Веб-разработка *

При написании HTML-страницы по методологии БЭМ («Блок, Элемент, Модификатор») БЭМ-сущности привязываются к узлам HTML-дерева. В предыдущих статьях я рассматривал, как можно выполнить в скрипте на языке PowerShell проверку правильности написания названий БЭМ-сущностей по отдельности с помощью регулярных выражений.

В этой статье рассмотрено, какие есть правила для совмещения нескольких имен БЭМ-сущностей на одном узле HTML-дерева и как соблюдение этих правил можно проверить в скрипте на языке PowerShell. Приведены иллюстрации фрагментов результатов работы скрипта в разных случаях, при обнаружении разных ошибок.

Angular имеет отличный инструмент для ограничения навигации между страницам из коробки. Но, как и любом большом проекте, у него есть свои подводные камни. Сегодня я расскажу вам об одном из них.

Любой крупный проект старше пары лет имеет легаси. hh.ru здесь — не исключение. Однажды перед нашей командой встала задача перевести страницу прайс-листа работодателя на React. Сперва это занятие показалось нам абсолютно рутинным, но если бы это на самом деле было так, вы бы сейчас не читали эту статью.

Всем привет! Меня зовут Саша, я — фронтенд-разработчик команды «Монетизация» hh.ru. В своем материале расскажу, как мы рефакторили наболевшее, обнаруживали главные проблемы и находили элегантные решения.  

В далёком 2012 году довелось мне участвовать в одном интересном проекте - BuyinUsa. Идея проекта была в следующем: объединить в одном месте товарные предложения с наиболее популярных торговых площадок США, представить их российским потребителям, взять на себя доставку и конвертацию при оплате.

Для начала решили взять самые крупные: ebay, amazon, zappos. К тому же в этот год zappos вообще закрыл возможность для российских пользователей даже заходить на их сайт. А тут мы такие…

Как, наверно, кто-то еще помнить, тогда вездесущего алиэкспресс еще не было, да и умением покупать за границей отличались лишь “продвинутые интернетчики”, а наша задача была предложить услугу как можно более массовому потребителю.
Я выступал в роли и соучредителя и в качестве, как бы сейчас сказали, тимлида, так как вся разработка проекта была на мне. Я был еще достаточно юным и пылал энтузиазмом:)

Вся разработка осуществлялась удаленно, программисты, вебмастер, дизайнер и я работали исключительно через сеть. Использовались в основном простые средства вроде teamview и skype. В качестве основы для сайта взяли всем известную Joomla, а для интернет-магазина Virtualmart. Конечно, по современным воззрениям это ужас-ужас, но тогда мне так не казалось.

Что надо было решить:

1. Карточка товаров, которые были очень разноплановые. А от характеристик зависела возможность отфильтровать товары в поиске.

Решение: взяли более ста карточек с разными характеристиками и просили их отсортировать по важности знакомых и друзей. Сравнивали результаты и выделяли главные. А потом скопировали карточку с Запоса и отредактировали её под свои нужды:)

Эта статья предназначена для широкого круга читателей. Но прежде всего, эта статья для тех, кто занимается непосредственно веб-разработкой, а также является руководителем или заказчиком этого проекта. Если вы веб-дизайнер, вам эта статья вряд ли будет особо интересной. Она поможет тем, кто хочет развиваться в целом, понимать, как происходит процесс в целом, как разработать сайт, какие этапы необходимо пройти. 

Ниже я буду рассказывать о своем опыте. Сайтами я занимаюсь  уже порядка 15 лет, а вплотную – около 10 лет. Почему это так? Сейчас любая трансформация в организации, любые изменения в организации, так или иначе, касаются информационных систем. То есть, если мы хотим получить продажи, мы должны создать сайт. Если мы хотим повысить качества сервиса, то, скорее всего, это должно каким-то образом отображаться на сайте, например, в личном кабинете и как следствие ведет за собой создание нового сайта.

Через 2 дня начнется главное событие для разработчиков высоконагруженных систем. 22 и 23 сентября мы снова будем делиться опытом построения веб-сервисов для решения задач сотен тысяч пользователей по всему миру. Если у вас не получилось попасть в Санкт-Петербург на DESIGN DISTRICT DAA in SPB, подключайтесь к открытой трансляции Главного зала конференции.

Не забывайте про расписание докладов. 22 сентября трансляция докладов продлится с 10:00 до 19:00 часов. А на второй день 23 сентября с 10:30 до 19:00 часов. Теперь давайте подробнее познакомимся с докладчиками открытой трансляции.

В Python списковые включения (и генераторы списков) —  замечательные механизмы, способные серьёзно упрощать программный код. Правда, чаще всего их используют в форме, предусматривающей наличие единственного цикла for и, возможно, одного условия if. И это всё. Но если попытаться немного вникнуть в эту тему, то окажется, что у списковых включений Python имеется гораздо больше возможностей, чем можно подумать, возможностей, разобравшись с которыми, можно, по меньшей мере, кое-чему научиться.

Привет, друзья!

В данной статье мы с вами разработаем кастомный хук, функционал которого будет аналогичен функционалу встроенного хука useEffect, за исключением того, что наш useEffect будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты).

Предполагается, что вы хорошо знакомы с тем, как работает хук useEffect, а также с тем, когда и почему происходит повторный рендеринг React-компонентов. Если нет, вот парочка ссылок:

• официальная документация по useEffect;
• Продвинутые хуки в React: все о useEffect;
• React: полное руководство по повторному рендерингу.

Этого должно быть достаточно для понимания того, о чем мы будем говорить. В дальнейшем будет приведено еще несколько ссылок для более глубокого погружения в тему.

Код проекта, с которым мы будем работать, можно найти здесь.

Начнем с примера.

Сказ про то, как повысить надежность фронтенда с помощью CSS Modules, TypeScript и Webpack.

В этой статье мы расскажем подробно про систему поблочной сборки и подводные “камни” реализации подобной системы под «1С-Битрикс» для frontend-разработчиков.

Блочная редактируемость

Нам требовалось разработать сайт на базе CMS «1С-Битрикс: Управление сайтом» и при этом предоставить контент-менеджерам полную власть над страницами и их содержимым. Контент-менеджеры \читай не разработчики\ должны иметь возможность собирать страницы из заранее созданных блоков, определять порядок этих блоков на странице, управлять настройками дополнительного визуального оформления для каждого из блоков и редактировать контент в рамках поддерживаемых типов данных. И всё это управляется через визуальный редактор Битрикса без необходимости вручную создавать новый инфоблок для каждого блока на странице. Такую систему можно назвать “Блочная редактируемость”.

Распознавание типов БЭМ-сущностей (блок, элемент, разные виды модификаторов) в скрипте на языке PowerShell с помощью простых регулярных выражений.

Предполагается, что скрипт получает файл с кодом на языке HTML, разбирает его (парсит) и определяет типы БЭМ-сущностей, привязанных к узлам HTML-дерева, после чего выводит информацию об этом в окно терминала (консоли). Приведена иллюстрация того, как может работать подобный скрипт. Такой инструмент можно использовать для изучения методологии БЭМ самому или обучения этой методологии других.

В этой статье я расскажу, как и для чего, на одном из своих проектов, мы прикрутили новую возможность Next.js – On-Demand ISR (инкрементная статическая регенерация по запросу).

Joomla 4 "под капотом" претерпела немало изменений относительно предыдущих версий. Её кодовую базу сообщество разработчиков регулярно подтягивают до современных реалий, вводя актуальные технологии в ядро CMS. Так, например, если раньше загрузка классов была вариациями на тему include, то в Joomla 4 появился лоадер, приведённый к PSR-4. Ядро CMS переводится на концепцию сервис-провайдеров, внедрены DI-контейнеры. Эти изменения влекут за собой изменения в структуре компонентов, модулей и плагинов.

В данной статье пойдёт речь о том, как создать модуль для Joomla 4 с новой структурой файлов и классов. Как создать новый (или апгрейдить старый) модуль так, чтобы он ещё долго прослужил на Joomla 4 и Joomla 5? Читаем далее...

Как мы решаем проблемы со склонением для задач SEO-оптимизации с помощью phpMorphy.

Делимся решением!

Википедия достигла невероятного успеха благодаря усилиям тысяч старательных участников, и технологическая сторона не была исключением. В настройке серверов и инфраструктуры, в переводе, в создании ботов и скриптов — Википедия развивалась от любительского проекта, стоящего на одном сервере, к надёжной платформе, работающей в центрах обработки данных на разных континентах.

Наша статья — о тех, кто разработал технологию Википедии, и о том, как они работали.

Когда говорят о выборе архитектуры IT-системы, почти всегда упускают один ма-а-аленький нюанс: мы делаем продукты для пользователей, не для себя. А пользователям совершенно неважно, какая у сервиса архитектура. Никто в отзывах не ставит звёздочки за event-driven подход или классную реализацию service mesh — разве что в редких случаях, когда речь о продуктах для разработчиков. 

Техническое совершенство — современные инструменты, предельная оптимизация, чистота кода и лаконичная, но гибкая и масштабируемая архитектура — всё это нужно нам, технарям. А как это всё связано со счастьем пользователей, как его измерять и учитывать при проектировании сервиса, разберёмся под катом.  

Всем привет! Меня зовут Николай Каменев, я фронтенд-разработчик в Почтатехе. Мы разрабатываем UI для порталов и приложений Почты России.

Я хочу поделиться коротким гайдом, как автоматически рендерить og:image-изображения для превью сайтов.

Привет! Меня зовут Самат, я frontend-специалист компании SimbirSoft.

Моё первое знакомство с Angular началось с погружения в документацию, которая помогла мне лучше понять, как устроен этот фреймворк. Наверняка, этого было бы достаточно, чтобы подключиться к проекту или заняться его разработкой с нуля.

Но если после подключения разработчик заходит в уже выстроенную систему, и его задачи редко связаны с архитектурой, то в разработке с нуля ситуация обстоит иначе, даже если на первый взгляд кажется, что вопросов не возникнет. Они появятся позже, когда окажется, что нельзя легко и просто внести важную фичу или безопасно изменить часть приложения, так как она тесно связана с другой частью. А компоненты приложения, которые мы сами же и писали, покажутся незнакомыми и сложными.

Цель этой статьи – познакомиться с темой построения архитектуры Angular-приложений. Я расскажу о том, как разработать приложения таким образом, чтобы специалист любого уровня при наличии знаний Angular мог легко разобраться в коде и структуре приложения. И как избежать проблем масштабирования.

Практическое руководство по написанию лаконичного кода и повторному использованию вспомогательных функций JS в проектах.