Создание навигационной панели с "подвижным выделением" с помощью 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 году.

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

CSS трансформации и матрица

#почитать

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

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

Очереди в TypeScript

#почитать

В этом практическом руководстве мы расскажем, как реализовать очереди в TypeScript с помощью связанных списков.

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

Vite или Webpack: гид по выбору идеального сборщика

#почитать

Сегодня мы разберем два популярных инструмента для сборки фронтенд-проектов – Vite и Webpack. Оба помогают разработчикам упростить работу, но используют принципиально разные подходы.

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

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

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

Уменьшение сложности CSS с псевдоклассом :is()

#почитать

Недавно появился повод воспользоваться новым псевдоклассом CSS :is(), и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов.

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

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

#почитать

Разберитесь в рекурсии на примерах и узнайте, как использовать рекурсивные функции в JavaScript.

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

Создание работающей сегодня плиточной разметки типа Masonry

#почитать

Как то возник вопрос, как сделать плиточную раскладку (типа Masonry), которая работала бы во всех браузерах? Ответ был найден. И это заняло всего 66 строк кода JavaScript.

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

Освоение Git: от основных основ до эффективной интеграции с Claude Code

#почитать

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

А Claude Code, как передовой инструмент AI-программирования, не только полностью совместим с рабочими процессами Git, но и благодаря глубокой интеграции предоставляет разработчикам беспрецедентную автоматизацию и удобство.

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

Оптимизируй фронтенд: 24 проверенных способа

#почитать

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

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

Не раздражающая валидация формы: CSS :user-valid и :user-invalid

#почитать

Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.

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

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


🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0

🚀 Frontend-разработчик в Human Help, до 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a

🚀 React Frontend Developer в Ziphy, до 390 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9

🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977

🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88

🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183

🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d

🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0

🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561

🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-developer-infomediji-9d262255

🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83

🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb

🚀 React-разработчик (контракт), oт 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e

🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2


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

Как работает navigator.credentials: API для входа без пароля

#почитать

navigator.credentials — это интерфейс Web Authentication API, который позволяет браузеру управлять учётными данными пользователя. С его помощью можно безопасно получать, сохранять и автоматически подставлять данные для входа: пароли, токены или ключи. Это делает процесс аутентификации проще и безопаснее — особенно на сайтах, где важен пользовательский опыт и скорость входа.

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

Проблемы преобразования значений в строки в JavaScript

#почитать

Руководство по преобразованию значений в строки в JavaScript: сравнение 5 методов, работа с объектами и JSON.stringify(), практические примеры и лучшие практики.

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

CSS Anchor Positioning API

#почитать

В статье вы узнаете как теперь без использования библиотек можно создавать tooltip'ы, контекстные меню, индикаторы и другие элементы UI, которым необходима якорная связка.

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

Error.isError(): Лучший способ проверки типов ошибки в JavaScript

#почитать

Руководство по новому методу Error.isError() в JavaScript: почему он лучше instanceof, как решает проблемы кросс-контекстных ошибок и типизации в TypeScript.

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

CSS-селекторы. Шпаргалка для новичков

#почитать

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

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