Зачем писать юнит-тесты на фронтенд

#почитать #junior

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

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

Осмысленный alt-текст: 6 правил

#почитать #junior

📍Перескажите, что находится на картинке
📍Картинки не существуют сами по себе
📍Если картинка не несёт смысла — не пишите alt
📍Передавайте эмоции через alt
📍Не заигрывайте с декором ради декора
📍Не пишите в alt названия файлов или имя фотографа

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

Рефлексия в JavaScript и TypeScript: обзор основных техник

#почитать #junior

"Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы. В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка."

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

Какой формат выбрать — webp, png или jpg

#почитать #junior

"В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать."

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

SVG-спрайты - быстрый гайд

#почитать #junior

Спрайт — один большой графический файл, в котором объединены несколько небольших изображений. Спрайты были очень популярны, когда в качестве графики использовали растровые изображения. Создавали один большой файл, который содержит иконки, смайлики, логотипы, после чего через фоновое изображение в CSS и позиционирование показывали только ту часть графики, которая необходима. SVG-спрайт аналогичен: в нем все svg зашиты в один файл. Но работать с ним нужно немного иначе.

✴️ Как сделать
✴️ Как применять
✴️ CSS-стили в SVG-спрайтах
✴️ Практический пример
✴️ Автоматическая генерация в gulp
✴️ Немного о миксинах

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

С нуля: что изучать

#почитать #junior

В первую очередь это Figma. Идеальная программа, которая позволяет создавать прототипы и макеты сайтов. В ней можно делать все – и карту сайта, и взаимодействия пользователей, и презентации. Это Фотошоп на минималках. Из личных качеств усидчивость и внимательность – пожалуй, самые важные.

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

Интересные трюки JS, HTML и CSS

#почитать #junior

Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. DevTools для мобильных браузеров, CSS-антистресс для Booking.com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox)

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

Адаптивные изображения. атрибут srcset

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

#почитать #junior

Способы создания адаптивных изображений:
➡️ Метод описания плотности экрана
➡️ Кадрирование изображений и тег <picture>

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

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

#почитать #junior

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

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

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

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

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

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

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

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

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

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

Спаси глаза пользователей. Как добавить на сайт тёмную тему

#почитать #junior

Без лишних слов создадим простой переключатель для светлой и темной темы: HTML, CSS и JavaScript. Нам понадобятся три файла — index.html, styles.css и script.js.

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

Как корпорация-кракен Monotype захватила рынок шрифтов

#почитать #junior

Ей принадлежат Arial, Helvetica, Gotham и Times New Roman, а также отраслевой маркетплейс MyFonts. Как она развивалась и почему дизайнеры мирятся с её условиями — в кратком пересказе.

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

Способы центрировать текст в css

#почитать #junior

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое (text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее.

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

Паттерны реактивности в современном JavaScript

#почитать #junior

Мы работаем с большим количеством JS на сайтах и в веб-приложениях, поскольку браузер — это полностью асинхронная среда. Мы должны реагировать на действия пользователя, взаимодействовать с сервером, отправлять отчеты, мониторить производительность и т.д. Это включает в себя обновление UI, сетевые запросы, изменения навигации и URL в браузере, что делает каскадное обновление данных ключевым аспектом веб-разработки. Реактивность, обычно, ассоциируется с фреймворками, но можно многому научиться, реализуя реактивность на чистом JS.

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

JavaScript повсюду или почему веб-технологии захватили мир

#почитать #junior

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

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

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

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

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

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

Перенос, обрезка и ориентация текста в CSS

#почитать #junior

▪️Обработка пробелов (white-space)
▪️Обрезка текста (text-overflow)
▪️Перенос слов при переполнении (overflow-wrap)

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

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

#почитать #middle

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

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

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

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

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

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

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

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