Storybook — это интерактивная песочница для разработки и тестирования UI-компонентов (интерфейсных компонентов) в изоляции.

Представьте, что вы разрабатываете кнопку, карточку товара или сложный выпадающий список. Обычно чтобы посмотреть, как компонент выглядит или работает, вам нужно:
1. Запустить всё приложение.
2. Дойти до нужной страницы.
3. Совершить какие-то действия, чтобы этот компонент отобразился.
Storybook убирает все эти шаги. Вы разрабатываете и тестируете компоненты по отдельности, вне вашего основного приложения. Это как мастерская, где вы можете собирать, красить и проверять детали автомобиля (компоненты) отдельно, прежде чем устанавливать их в сам автомобиль (ваше приложение).

Made in HTML/CSS

Husky — пакет npm, который позволяет управлять Git-хуками в проектах JavaScript. Git-хуки — это скрипты, которые Git автоматически выполняет до или после определённых событий, таких как фиксация кода или отправка изменений в репозиторий.

Husky упрощает их настройку и делает её единообразной для всей команды. После установки в вашем проекте появится папка .husky, где вы можете описывать все необходимые хуки. В числе обязательных проверок от этого инструмента присутствует запуск линтера (ESLint), запуск форматтера (Prettier) и проверка типов.

Made in HTML/CSS

Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода

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

В статье рассматриваются актуальные средства для автоматизации форматирования и линтинга кода, которые намного облегчают разработку

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

Made in HTML/CSS

Может ли веб-страница содержать несколько элементов <header>? Как насчет элементов <footer>?

Да, веб-страница может содержать несколько элементов <header> и <footer>. Это абсолютно валидно с точки зрения HTML5.

Ключевой момент: эти элементы семантические и определяют не просто «верх» или «низ» страницы, а заголовок и нижний колонтитул для своего ближайшего секционного контента.
- <header> может использоваться не только в начале страницы, но и в начале любого раздела (<article>, <section>, <aside>, <nav>), представляя его вводный контент (заголовок, логотип, навигацию для этого раздела).
- <footer> similarly может быть у всей страницы или у каждого отдельного раздела, содержая информацию об авторе, copyright или ссылки, относящиеся именно к этой секции.

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

Made in HTML/CSS

Electron — это фреймворк с открытым исходным кодом, созданный компанией GitHub. Он позволяет разрабатывать настольные приложения для операционных систем Windows, macOS и Linux, используя знакомые веб-технологии: HTML, CSS и JavaScript.

По сути, Electron предоставляет среду выполнения (runtime), которая объединяет два основных компонента:
1. Chromium — движок браузера для отображения и работы с пользовательским интерфейсом (фронтенд).
2. Node.js — среда выполнения для работы с файловой системой, операционной системой и другими низкоуровневыми API (бэкенд).

Это сочетание дает разработчикам возможность создавать кроссплатформенные десктопные приложения, имея навыки веб-разработки.

Made in HTML/CSS

Surge.sh — это простой, но очень мощный инструмент для фронтенд-разработчиков, который решает одну ключевую задачу: мгновенное развертывание (деплой) статических сайтов в интернете.

Представьте, что у вас есть папка с HTML, CSS и JavaScript файлами (например, результат сборки вашего проекта на React, Vue, Angular или просто верстка). Вам нужно быстро показать эту работу клиенту, коллеге или протестировать на реальном сервере. Surge позволяет сделать это буквально одной командой (surge) в терминале

Made in HTML/CSS

Анимация заполнения при наведении

Данный код представляет собой стилизацию кнопки с анимационным эффектом заполнения.
Эффект реализован с помощью CSS-переходов и псевдоэлементов, что позволяет достичь плавной анимации без использования JavaScript.

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

Made in HTML/CSS

Animate.css — это популярная, готовая к использованию библиотека CSS-анимаций для веб-проектов. Её основная цель — максимально упростить добавление плавных, красивых и кроссбраузерных анимаций к элементам на вашем сайте с помощью всего пары классов.

Это не JavaScript-библиотека (хотя её можно легко использовать с JS), а чисто CSS-решение.

Made in HTML/CSS

Remix icon - огромная библиотека из +2500 проработанных минималистичных иконок, которые позволяют создавать дизайн в едином стиле.

На выбор есть outlined (контурные) и filled (заливные) иконки.

Made in HTML/CSS

Задача: "Sleep"

Описание:
Дано положительное целое число millis. Напишите асинхронную функцию, которая приостанавливает выполнение на millis миллисекунд. Функция может возвращать любое значение.

Примечание:
Незначительное отклонение от указанного времени millis в фактической продолжительности ожидания допустимо.

Объяснение:
1) Преобразование в строку: Число преобразуется в строку, чтобы можно было легко работать с его символами.
2) Переворот строки: Используем методы split, reverse и join, чтобы перевернуть строку.
3) Сравнение: Сравниваем исходную строку с перевернутой. Если они равны, число является палиндромом.

Made in HTML/CSS

HTML и CSS осенью 2025. Эти новые фичи я рекомендую изучить прямо сейчас

Общаясь с фронтендерами, я заметил, что многие не знают новые классные возможности HTML и CSS. Мне от этого грустно. Надо это исправлять!
Я подумал и составил список, состоящий из наиболее рекомендуемых мной новых фишек. Они поддерживаются в большинстве современных браузеров. Решают старые проблемы. Упрощают разработчикам жизнь. В общем суперполезные!

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

Made in HTML/CSS

Yarn (Yet Another Resource Negotiator) - это быстрый, надежный и безопасный менеджер пакетов для JavaScript, разработанный компанией Facebook в сотрудничестве с Google, Exponent и Tilde.

Made in HTML/CSS

HTML- и CSS-советы для джуниор фронтенд-разработчиков

В целом можно найти очень классные статьи, видео и бесплатные курсы. Но и мне есть что сказать!
Я собрал несколько советов. По моей задумке, если вы обратите внимание на эти аспекты, то ваш код будет лучше.

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

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

Made in HTML/CSS

В чем разница между typeof и instanceof?

typeof — это оператор, который возвращает строку, указывающую примитивный тип переменной. Он хорош для проверки простых типов: string, number, boolean, undefined, symbol, bigint, а также для выявления function и ловушки — object (или null).

instanceof — это оператор, который проверяет, присутствует ли в цепочке прототипов объекта определенный конструктор (класс). Он используется для проверки сложных типов (объектов, массивов, созданных классов).

Made in HTML/CSS

EnjoyCSS — это мощный онлайн-генератор кода для современных CSS3-эффектов и элементов пользовательского интерфейса (UI). Его главная идея — позволить дизайнерам и фронтенд-разработчикам быстро создавать визуально привлекательные компоненты без необходимости вручную писать сложный CSS-код

Made in HTML/CSS

Что такое SEO?

SEO (Search Engine Optimization) — это комплекс мер по оптимизации сайта для повышения его видимости в результатах выдачи поисковых систем (Google, Яндекс, Bing и др.) по определенным запросам пользователей.

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

Если у вас есть сайт, то он должен решать какую-то задачу: продавать товары, привлекать клиентов, информировать людей, развлекать и т.д. Но сайт не принесет пользы, если его никто не найдет. SEO нужно именно для того, чтобы ваш сайт находили нужные люди.

Made in HTML/CSS

esbuild — это невероятно быстрый сборщик (bundler) и минификатор (minifier) для JavaScript и TypeScript кода. Его главная и единственная цель — максимально быстро преобразовать ваш исходный код в готовые для браузера файлы.

Представьте, что у вас есть десятки или сотни модулей (.js, .ts, .jsx, .tsx файлов), библиотек из node_modules, CSS и изображений. esbuild берет весь этот "строительный материал" и:
- Объединяет (bundles) его в один или несколько оптимизированных JavaScript-файлов.
- Транспилирует современный JS/TS в код, понятный старым браузерам.
- Сжимает и минифицирует результат, удаляя все лишнее (комментарии, пробелы, переименовывая переменные в короткие имена).
- Разрешает зависимости и импорты между файлами.

Made in HTML/CSS

Coolify — это open-source, самохостируемая альтернатива таким сервисам, как Heroku, Netlify или Vercel. Проще говоря, это платформа для развертывания (деплоя) и управления вашими веб-приложениями, базами данных и сервисами на вашем собственном сервере.

Если вы разработчик и хотите запустить свой сайт или приложение в интернете, вам нужен сервер. Coolify позволяет превратить любой сервер (ваш домашний компьютер, VPS от DigitalOcean, Hetzner, AWS и т.д.) в мощную платформу для развертывания с минимальными усилиями.

Made in HTML/CSS

Что такое JWT?

JSON Web Token (JWT) — открытый стандарт (RFC 7519) для создания токенов доступа, основанный на формате JSON. Обычно JWT используется для передачи данных после аутентификации в клиент-серверных приложениях.

Преимущества:
- Бессессионность — не требуется хранение сессий на сервере, так как вся необходимая информация содержится в самом токене.
- Кросс-доменное взаимодействие — JWT облегчает предоставление одновременного доступа к различным доменам и сервисам, что полезно в микросервисных архитектурах.
- Децентрализованная проверка — любой сервис, имеющий доступ к секретному ключу или публичному ключу (в случае асимметричного шифрования), может проверить токены без обращения к центральному серверу аутентификации.

Made in HTML/CSS

Как создать дизайн-систему для сайта, если ты не дизайнер

Столкнувшись с хаосом в интерфейсах и постоянными правками, я решила изучить, как можно организовать процесс создания дизайн-системы самостоятельно. Результат вы видите в этой статье. Очень надеюсь, что описанные правила помогут вам сделать первые шаги в создании дизайна для вашего проекта.

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

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

Made in HTML/CSS