Структуры данных для frontend-разработчиков с реальными примерами

#почитать

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

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

▫️Математика в CSS: что и зачем считать для стилей

#посмотреть

Современный CSS умеет в тригонометрию, округления, возведение в степень, логарифмы и даже в логические операции. Но при первом знакомстве с математическими функциями обычно возникает вопрос: «Зачем?»

⏱Смотреть на YouTube ⏱️45 минут

React Custom Hook: useDebounce

#почитать

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке useDebounce, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

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

Принцип открытости/закрытости SOLID в React

#почитать

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

Как мы знаем, проект постоянно развивается: появляются новые задачи, а вместе с ними — изменения и дополнения в коде. Любые правки увеличивают вероятность ошибок. Это естественно, но хочется свести такие риски к минимуму. Для этого код должен быть как можно менее связанным: так изменения затрагивают меньшее количество участков кода.

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

🪐 Новые вакансии фронтендеров


🚀 Frontend-разработчик в ДТ-Софт, 230 000 - 310 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-dt-soft-f382489d

🚀 Frontend-разработчик в Алабуга.Политех, oт 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-alabugapoliteh-6b3633d0

🚀 Frontend-разработчик в OQTACORE, oт 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-oqtacore-e80afb43

🚀 Frontend Developer в Vital Partners, 600 000 - 800 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-developer-vital-partners-a2f24c92

🚀 Frontend-разработчик в Placebo/25, 110 000 - 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-placebo25-2e5b0ca6

🚀 Junior frontend-разработчик (Vue.js), 60 000 - 155 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/junior-frontend-razrabotchik-vuejs-nda-9c5ebd30

🚀 Фронтенд-разработчик в Гуддело, oт 35 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-guddelo-cd81dfd9

🚀 Фронтенд-разработчик в Data World, до 200 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-data-world-ad1d66b9

🚀 Фронтенд-разработчик в Продуктовая лаборатория Mish, 160 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-produktovaya-laboratoriya-mish-e457265f

🚀 Fullstack Developer (React/Java) в Транслогика, 200 000 - 230 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-developer-reactjava-translogika-0cf0dc4f


Больше вакансий здесь ⤵️
https://jobrocket.ru/?categories=frontend

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

#почитать

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

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

Promise.try: единый вход для sync/async и единая обработка ошибок

#почитать

Не раз ловил себя на том, как в код-ревью всплывает одна и та же проблема: часть наших функций синхронные, часть асинхронные, а часть ведут себя как шрёдингеровские коты и делают вид, что синхронны, пока не дотронешься. В итоге в одном месте у нас try/catch, в другом .catch, где-то внезапно падает исключение, а в соседнем модуле молча утекает Promise. С появлением нативного Promise.try стало проще навести порядок и избавиться от разнобоя. Фича прошла процесс стандартизации в TC39 и включена в спецификацию ECMAScript 2026, при этом уже с января доступна в актуальных движках. Можно перестать спорить про обёртку из Promise.resolve().then и получить единый вход для sync/async с нормальной обработкой ошибок.

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

События keydown и keyup в JavaScript: управление клавиатурой

#почитать

Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году.

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

Создание навигационной панели с "подвижным выделением" с помощью JavaScript и CSS

#почитать

Создаем навигационную панель с "подвижным выделением" современным средствами Javanoscript и CSS. В соответствии с данным шаблоном граница вокруг активного элемента навигации анимируется непосредственно от одного элемента к другому, когда пользователь нажимает на элементы меню.

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

Правило @import в CSS: модульность и организация стилей

#почитать

Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.

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

Понимание CSS corner-shape и сила суперэллипса

#почитать

Свойство CSS corner-shape — это одно из самых захватывающих нововведений в геометрический инструментарий веб-дизайна за последние годы. Оно расширяет наши возможности по управлению внешним видом углов, выходя за рамки привычных скруглений с помощью border-radius. Это на первый взгляд небольшое дополнение открывает целый мир новых возможностей, которые раньше требовали сложных реализаций на основе SVG или решений с использованием изображений.

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

Спокойное подчёркивание текста

#почитать

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

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

Декодирование CSS селекторов: :has(:not) и :not(:has)

#почитать

При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции.

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

Форматирование текста в JavaScript: методы bold(), italics() и другие

#почитать

Когда вы начинаете погружаться в веб-разработку, рано или поздно возникает задача: как программно оформить текст? Представьте, что вам нужно выделить часть текста жирным или курсивом прямо из JavaScript, не прибегая к ручному написанию HTML-тегов. Здесь на помощь приходят встроенные методы строк в JavaScript, такие как bold(), italics() и их менее известные собратья. Эти методы позволяют оборачивать строки в HTML-теги, возвращая новую строку с нужным форматированием. Давайте разберёмся, как они работают, откуда взялись, и стоит ли их использовать в 2025 году.

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