Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

#почитать #middle #senior

Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему.

Читать статью

search: новый html-элемент в 2023

#почитать #junior "#middle

В стандарте HTML появился новый семантический элемент <search>. Он обозначает раздел страницы, который используется для поиска или фильтрации. Он должен содержать элементы управления формой (например, текстовые поля, выпадающие меню, кнопки и так далее), а область поиска или фильтрации может быть любой: от одного документа до всего интернета.

Читать статью

Эти CSS-переменные

#почитать #junior #middle

Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.

Читать статью

Какой бесплатный HTML-редактор выбрать

#почитать #middle #junior

▪️ Notepad++
▪️ Brackets
▪️ Coffeecup
▪️ NoteTab
▪️ Eclipse
▪️ HTML-Online
▪️ BlueGriffon
▪️ Emacs + плагины
▪️ Atom
▪️ Visual Studio Community

Читать статью

Тридцатикратное ускорение отработки функций и отрисовки компонентов. Практический кейс

#почитать #middle

"В данной статье я хотел бы привести пример практического кейса использования метода requestIdleCallback, который возник у меня на проекте. Кейс сам по себе небольшой, замеры времени отработки функции и отрисовки компонентов для использования производились с помощью React Profiler.

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

Читать статью

Скругляем рамки, создаём круги, овалы и сложные фигуры. Практикум по CSS-свойству border-radius

#почитать @junior #middle

Полезно для стилизации кнопок, форм, карточек товаров и подобных элементов.

PS. Можно и SVG, но через border-radius более легковесно.

Читать статью

Кнопка «Показать ещё» на чистом JavaScript - для подгрузки товаров через AJAX

#почитать #junior #middle

▫️Как работает кнопка «Показать ещё»
▫️Написание backend-кода на PHP
▫️Создание HTML-кода
▫️Стилизация карточек и кнопки
▫️Добавление функциональности к кнопке с помощью JavaScript

Читать статью

Как практически без вложений улучшить пользовательский опыт с растром

#почитать #junior #middle

Простые правила при работе с растровыми изображениями на каждый день:
▫️Исходные данные и выбор основного формата
▫️Изменение размеров
▫️Оптимизация
▫️WebP
▫️Тег picture и srcset
▫️Предзагрузка
▫️Ленивая загрузка
▫️Сдвиг макета
▫️Object-fit

Читать статью

Что делать, если дизайнеры принесли кучу кривых вместо макета

#почитать #junior #middle

▫️Нет базовых состояний
▫️Нет специфичных состояний
▫️Обратная связь
▫️Нет индикаторов загрузки
▫️Нет сообщений об ошибке загрузки или отправки
▫️Недостаточно оформления для валидации
▫️Технические страницы
▫️Разные отступы идентичных элементов
▫️Слишком много размеров похожих элементов

Читать статью

Dev Mode в Figma. Быстрый обзор бета-версии

#почитать #middle

Возможности:
▫️Интеграция с GitHub, Anima, Storybook, Jira
▫️Работа с дизайн-системами
▫️Отметка «Готово для разработки» (Ready for dev)
▫️Сравнение изменений
▫️Экспорт — любой элемент можно выгрузить, положить в папочку и работать с ним локально

Читать статью