Верстальщик от бога

CSS if(): новая функция условной логики доступна в Chrome 137+ #почитать CSS с каждым днём превращается в настоящий «язык программирования». С появлением новых возможностей, таких как CSS переменные, функция calc(), псевдоклассы :has() и :is(), а также универсальные @media запросы, CSS упрощает создание сложных стилей и макетов. ⏱Читать статью

Как сделать первую букву абзаца большой — буквица через ::first-letter #почитать Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году. Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике. ⏱Читать статью

Всё самое важное о псевдоклассе :default #почитать Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе. ⏱Читать статью

Гидратация в React 19: новые подходы и секреты оптимизации #почитать До выхода React 19 процесс гидратации был далеко не идеален: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности мешали разработчикам создавать быстрые и отзывчивые приложения. В React 19 были введены важные улучшения, которые значительно повышают эффективность гидратации и снижают время загрузки страниц. Разбираем новые подходы на практических примерах. ⏱Читать статью

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

Справочник по новым математическим функциям CSS #почитать За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов. ⏱Читать статью

Подборка библиотек для создания слайдеров на JavaScript в 2025 году #почитать Слайдеры – это один из самых популярных UI-элементов, который часто используется в веб-разработке. Будь то карусель изображений, отзывы пользователей или список товаров, хороший слайдер делает сайт динамичным и удобным. В 2025 году JavaScript библиотеки продолжают развиваться, и выбор инструментов для создания слайдеров стал еще шире. Давайте разберем самые интересные библиотеки, которые помогут вам легко и быстро добавить слайдер на ваш сайт. ⏱Читать статью

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

Переключение на элемент iframe на примере видеоплеера #почитать Итак, в прошлый раз мы рассмотрели, как можно без особых проблем выкатить рабочую страницу на GitHub Pages и попробовать встроить в эту страницу, например, плеер и убедиться, что он работает. Логично предположить, что следующими этапами будут взаимодействие со встроенными элементами iframe и автоматизация проверок с такими элементами на созданной нами странице. Для начала давайте немного пройдемся по базе. ⏱Читать статью

Vue.js на практике: классический Todolist с сохранением состояния #почитать Todolist — это не просто «список задач», а идеальный проект для освоения основ любого фронтенд-фреймворка. Сегодня мы сделаем именно такой проект на Vue 3, используя Vite, Pinia для управления состоянием и SCSS для стилей. И всё это с сохранением задач в localStorage. Это будет полноценное одностраничное приложение, которое не стыдно положить в портфолио. ⏱Читать статью

Как использовать cause для более понятной обработки ошибок в JavaScript #почитать Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема. ⏱Читать статью

focus-visible #почитать Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab. Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный. Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули. Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры. ⏱Читать статью

Псевдоклассы валидации форм: делаем интерфейсы понятнее #почитать Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков. Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить. ⏱Читать статью

Округление в CSS с функцией round() #почитать Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript. ⏱Читать статью

Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты #почитать Современные веб-приложения построены на основе богатого инструментария работы с CSS, связанного со множеством пакетов NPM и этапов сборки. Ванильное же веб-приложение может выбрать более легковесный путь, отказавшись от современных методик с предварительно обработанным CSS и выбрав нативные для браузеров стратегии. ⏱Читать статью

Как работает единица измерения em в CSS #почитать Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся. ⏱Читать статью

Функции в JavaScript: полное руководство для начинающих #почитать Функции в JavaScript — это блоки кода, которые выполняют определённую задачу и могут быть вызваны многократно. Они помогают структурировать программу, делая код чище и удобнее для поддержки. В этой статье мы разберём, как создавать функции, какие их виды существуют, и как использовать параметры, возвращаемые значения и другие возможности. Всё с примерами, чтобы вы могли сразу начать применять знания! ⏱Читать статью

CSS font-palette: управление цветами шрифтов #почитать Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет. В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения. ⏱Читать статью

🪐 Новые вакансии фронтендеров 🚀 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

Библиотеки JavaScript для создания фотогалереи #почитать Веб-разработчики часто сталкиваются с задачей создания фотогалерей для сайтов. Хорошая галерея не только облегчает пользователям просмотр изображений, но и делает сайт более привлекательным и удобным. В этой статье рассмотрим несколько популярных библиотек для создания фотогалерей на JavaScript, которые помогут вам быстро и эффективно решить эту задачу. ⏱Читать статью