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

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

Представляю вашему вниманию перевод этой замечательной статьи, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.

Что такое ререндеринг?

Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:

• первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
• ререндеринг — второй и последующие рендеринги компонента.

Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.

Привет, Хабр! Давненько не брал я в руки шашек Решили оживить рубрику AMA (Ask me anything), которую мы ранее совмещали с рассказом об изменениях на сайте за месяц. А раз давно не было таких постов, то и список изменений будет немалый.

А скоро вспомним ещё одну хорошо забытую рубрику!

Что в этом дайджесте? 1 млн уников в сутки на сайте-новостнике на Joomla, немного статистики, маркетинговых исследований, обзоры, электронная коммерция. 46 (+66) расширений Joomla, 8 ресурсов для разработки, Joomla 4 REST API и мобильные приложения, 8 статей и переводов, события из жизни Joomla-сообщества.

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

Проверка выполняется с помощью ряда простых регулярных выражений, по которым одно за другим в определенном порядке проверяются правила именования. Каждое из применяемых регулярных выражений я рассматриваю в подробностях.

Приведена иллюстрация, как может работать (какой результат может выдавать в консоль) такой скрипт-валидатор.

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

На днях мне на глаза попалась статья, посвященная разработке корзины товаров на React с помощью Redux Toolkit для управления состоянием приложения и Redux Persist для хранения состояния в localStorage.

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

• Руководство по Redux Toolkit
• Шпаргалка по Zustand
• Репозиторий с кодом проекта

Если вам это интересно, прошу под кат.

Как разместить свой Django проект на Heroku...

Недавно британские ученые открыли, что на свете бывают непослушные разработчики, которые все делают наоборот. Им дают полезный совет: «Не подключай целую библиотеку ради одной функции», — они берут и подключают. Им говорят: «Будь внимателен на код-ревью», — они тут же начинают апрувить все подряд. Ученые придумали, что таким разработчикам нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.

 У нас есть две задачи. Первая задача - это создать контактную форму на сайте, и темизировать её, вторая задача - это научиться темизировать формы вообще. Итак, давайте сначала рассмотрим те решения, которые подсказывает нам сообщество Drupal.

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами.

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

Представляю вашему вниманию перевод 2 статей:

• Use TypeScript Mapped Types Like a Pro о связанных или сопоставленных типах (mapped types) TypeScript;
• 10 TypeScript features you might not be using yet or didn't understand о полезных возможностях современного TS.

Гайд по освоению комплексных модальных потоков React Native.

Руководители AGIMA, ITECH и GRAPE делятся советами, что нужно сделать, чтобы собраться в экстренной ситуации.

Вот вам задача: надо проверить, входит ли число 200 миллионов в диапазон от 0 до 1 миллиарда. Знаю, что на Python её решение выглядит до крайности примитивно — достаточно воспользоваться функцией any и списковым включением:

Недавно я обратил внимание на одно заблуждение, связанное с генераторами, а точнее — с тем, как они позволяют экономить память. Такое ощущение, что многие воспринимают генераторы как инструмент, который позволит им получить "большой прирост производительности" из ничего. Или за такую шляпу фокусника, в которую можно засунуть бесконечное количество данных и не тратить память в самом скрипте.

Сначала я удивился — откуда взялись такие идеи? Ведь мы много лет работали с большими объемами данных без всяких генераторов. Лучшая статья про генераторы в РНР, опубликованная ещё десять лет назад, Что генераторы могут для вас сделать Антонио Феррары тоже практически не упоминает экономию памяти. У меня и у самого всегда было чёткое ощущение, что хотя генераторы — это совершенно отличное изобретение, у которого есть множество разнообразных применений, но вот только экономии памяти среди них нет.

В итоге у меня разыгралось любопытство и я решил разобраться с этим вопросом.

Данная статья описывает баг и его решения в контексте ReactJS + Server-Side Rendering, но это также актуально для всех фреймворков большой тройки так и для чистого JS.

При разработке сайта мы столкнулись с проблемой, что при использовании тега <img> на некоторых страницах Safari загружал изображение несколько раз вместо одного. Для отображения картинок мы использовали тег <img> с атрибутом srcset, что бы показывать картинки разного разрешения для экранов с высоким ppi.

В предыдущей статье мы поговорили о том, что такое graphQL, почему решили на него переходить, какие у него есть достоинства и недостатки. Но что делать дальше, если вы всё-таки решились внедрить graphQL в java-проект? Какие на данный момент есть фреймворки, чем они отличаются и какой вообще выбрать? Именно с этими проблемами мы и столкнулись почти год назад и не нашли адекватного ответа в одном источнике. Собрав по крупицам инфу из разных ресурсов (статьи, документации, доклады) и потыкав палочкой несколько фреймворков, мы сформировали общую базу знаний о них, которой и захотелось поделиться.

Если вам интересно, какие есть современные graphql-фреймворки на java, как выбрать подходящий и посмотреть, как он может выглядеть в продакшне — эта статья для вас.

Всем привет! Меня зовут Артем, я бэкенд-разработчик в hh.ru. Сегодня мы поговорим о современных решениях в GraphQL-мире на Java.

Статья также доступна в видео-формате.

Разработчик из консалтинговой компании в области разработки This Dot Labs рассказывает, как использовать canvas в Svelte и как превратить многословный API Canvas в краткий, более декларативный. Подробности — к старту нашего курса по фронтенду.

Иногда бывает необходимо развернуть не большое рест апи для своего сайта, сделанного по технологии СПА (Vue, React или др.) без использования каких-либо фреймворков, CMS или чего-то подобного, и при этом хочется воспользоваться обычным php хостингом с минимальными усилиями на внедрение и разработку.  При этом там же желательно разместить и сам сайт СПА (в нашем случае на vue).

Использование php позволяет для построения ендпоинтов апи использовать даже статические php файлы, размещаемые просто в папках на хостинге, которые предоставляют результат при непосредственном обращении к ним. И хотя, видимо в своё время, такой подход послужил широкому распространению php мы рассмотрим далее более программистский подход к созданию апи, который очень похож на используемый в библиотеке Node.js Express и поэтому интуитивно понятен, и прост для освоения.

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

В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.

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

Мы постоянно имеем дело с формами: регистрация, заполнение анкеты, составление отзыва. Первое, что нам хочется сделать как разработчикам,— максимально выделить общие компоненты, чтобы как можно меньше дублировать код. 

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

На самом деле есть другое решение.