Что такое политика безопасности контента?

Политика безопасности контента (Content Security Policy, CSP) — это мощный механизм защиты веб-приложений от различных атак, связанных с внедрением вредоносного кода. Разработанный консорциумом W3C в рамках стандартов веб-безопасности, CSP позволяет разработчикам контролировать, какие ресурсы (скрипты, стили, изображения и т. д.) могут загружаться и выполняться на их странице.

Основные угрозы, от которых защищает CSP

Межсайтовый скриптинг (XSS)
Блокирует выполнение вредоносных JavaScript-кодов, внедрённых через уязвимости.

Кликджекинг (Clickjacking)
Запрещает встраивание страницы во фреймы без явного разрешения.

Внедрение данных (Data Injection)
Предотвращает загрузку сторонних ресурсов (например, скриптов или стилей) с подозрительных доменов.

Атаки через динамический код (eval, inline-скрипты)
Ограничивает использование опасных функций, таких как eval(), setTimeout() со строками и встроенных (inline) скриптов.

Made in HTML/CSS

Что такое свойство Z-индекса CSS?

Свойство z-index управляет позиционированием элементов вдоль оси Z (глубина), то есть может перемещать их ближе или дальше от экрана. Оно определяет порядок наложения элементов, которые перекрывают друг друга.

Синтаксис
z-index: auto | <целое число> | initial | inherit;
Значения:
auto (по умолчанию) — элемент располагается в порядке, указанном в DOM.

<целое число> — положительное или отрицательное число. Элементы с большим значением отображаются поверх элементов с меньшим.

initial — устанавливает значение по умолчанию (auto).

inherit — наследует значение от родительского элемента.

Made in HTML/CSS

Что такое npm?

NPM (Node Package Manager) — менеджер пакетов для программной платформы Node.js.

Он нужен, чтобы не писать весь код проекта с нуля, а использовать уже готовые решения. Библиотеки, фреймворки, утилиты — всё это называется «пакетами», и NPM помогает ими управлять

Made in HTML/CSS

Что такое Mixin в CSS?

Mixin (миксин, примесь) — это многократно используемый блок CSS-кода, который можно применять к разным элементам с помощью директивы @include.

Это помогает:
- Группировать стили и повторно использовать их в нескольких местах кода или в разных CSS-файлах.
- Инкапсулировать связанные стили в модульные блоки, что поощряет модульный подход к разработке CSS.
- Персонализировать миксин с помощью аргументов, что позволяет изменять его поведение (например, изменять цвета, размеры).

Миксины поддерживаются препроцессорами CSS, например Sass и SCSS.

Made in HTML/CSS

Pretty TypeScript Errors — расширение для Visual Studio Code, которое улучшает отображение ошибок и предупреждений TypeScript.

Цель расширения — преобразовать стандартное форматирование ошибок TypeScript в более понятный и читаемый вид, что помогает разработчикам быстрее понимать и исправлять проблемы в своём коде.

Made in HTML/CSS

CSS Variable Autocomplete – полезное расширение для работы с CSS-переменными
Если вы активно используете CSS-переменные (Custom Properties) в своих проектах, то CSS Variable Autocomplete – это удобный инструмент, который ускоряет разработку, предлагая автодополнение и навигацию по переменным.

Made in HTML/CSS

Git Graph — это мощное расширение для VS Code, которое превращает ваш встроенный Git-клиент в интерактивный граф коммитов с удобной визуализацией веток, тегов и слияний. Оно заменяет команду git log --graph и делает работу с историей репозитория намного удобнее.

Made in HTML/CSS

Image Preview – это удобное расширение для VS Code, которое позволяет просматривать миниатюры изображений прямо в редакторе кода, не открывая их во внешних программах. Особенно полезно при работе с проектами, содержащими множество графических файлов (веб-разработка, документация, игры и т. д.).

Made in HTML/CSS

Чем полезно свойство clearfix в CSS?

Свойство clearfix в CSS полезно для устранения проблемы с обтеканием блоков в веб-дизайне.
Когда используются плавающие элементы (с помощью свойства float), родительский контейнер может не расширяться по высоте, чтобы охватить эти элементы. Это происходит потому, что плавающие элементы выводятся из обычного потока документа. Вследствие этого могут возникать серьёзные проблемы с компоновкой.

Использование clearfix позволяет:
- Избежать проблем с компоновкой. Родительский элемент будет корректно окружать float-элементы, сохраняя при этом свою высоту.
- Удержать макет на месте. Clearfix предотвращает перемешивание с другими элементами, которые обтекаются.

Made in HTML/CSS

Для чего используется ключевое слово «new»?

Ключевое слово «new» в JavaScript используется для создания экземпляров объектов на основе функций-конструкторов. Оно автоматически создаёт пустой объект, привязывает его к this внутри конструктора и возвращает созданный объект.

Это удобно, когда нужно создать множество однотипных объектов с разными свойствами. Например, для игры можно сделать конструктор врагов и потом создавать новых противников в нужных местах.

Особенности работы:
- Внутреннее свойство prototype нового объекта (proto) становится таким же, как и у конструирующей функции.
- Переменная this указывает на вновь созданный объект, свойство, объявленное с ключевым словом this, привязано к новому объекту.
- Созданный объект возвращается, когда функция-конструктор возвращает не примитивное значение (т. е. объект JavaScript). Если функция-конструктор возвращает примитивное значение, оно будет проигнорировано.

Made in HTML/CSS

Цвета высокой четкости с OKLCH и OKLAB

Новые цветовые пространства, такие как LCH, okLCH, LAB и okLAB, предоставляют доступ к на 50% большему количеству цветов, чем традиционные RGB/HSL. Эти цветовые пространства, основанные на человеческом восприятии, открывают захватывающие возможности для создания насыщенных градиентов и комплексных цветовых палитр.

Вот статья, которая дает лучшее понимание об цветовых пространствах.

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

Made in HTML/CSS

Глубокое погружение в работу промисов в JavaScript

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

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

Made in HTML/CSS

Фичи будущего в интерфейсе, которые можно и нельзя использовать в 2025 году

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

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

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

Made in HTML/CSS

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

Made in HTML/CSS

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

Made in HTML/CSS

Что такое микроанимации и какие они бывают?

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

Вот некоторые виды микроанимаций и их предназначение:
- Анимации состояния. Показывают изменение состояния элемента (нажатие кнопки, переключение тумблера).
- Анимации загрузки. Помогают сохранить внимание пользователя во время ожидания.
- Анимации появления/исчезновения. Объясняют, откуда появляются новые элементы и куда исчезают.
- Анимации подсказок. Направляют пользователя и помогают понять, какие действия доступны.
- Анимации обратной связи. Подтверждают действия пользователя (успех, ошибка, процесс).

Made in HTML/CSS

Active Vision – это удобный онлайн-инструмент, который помогает разработчикам и дизайнерам создавать безупречные визуальные эффекты. С его помощью можно легко подбирать идеальные градиенты и настраивать тени, придавая интерфейсам глубину и стиль.

Made in HTML/CSS

CSRF-уязвимости все еще актуальны

CSRF (англ. cross-site request forgery — «межсайтовая подделка запроса») — вид атак на посетителей веб-сайтов, при которой злоумышленник обманом заставляет пользователя выполнить нежелательные действия на доверенном сайте.

В данной статье более подробно объяснены принципы работы атаки и защиты от нее.

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

Made in HTML/CSS

Как работает hoisting в JavaScript?

Hoisting (поднятие) — это особенность JavaScript, при которой объявления переменных (с var) и функций (Function Declaration) "невидимо" перемещаются в начало своей области видимости перед выполнением кода.

Плюсы:
- Позволяет вызывать функции до их объявления (удобно для взаимных вызовов).
- Упрощает работу интерпретатора (код анализируется за один проход).

Минусы:
- Может запутывать, если не понимать механизм (например, var дает undefined, а не ошибку).
- let и const не подвержены hoisting’у в полной мере (более предсказуемы).

Made in HTML/CSS

Chrome вводит функцию if в CSS, включающую условный стиль в CSS

В Chrome 137 появилась новая функция if() в CSS, позволяющая использовать условную логику прямо в стилях без препроцессоров.

Эта функция поддерживает проверку условий через style(), media() и supports(), что упрощает динамическое применение стилей. Например, можно менять цвет элемента в зависимости от атрибута data-status.

*Пока if() работает только в Chrome 137+, и поддержки в Firefox и Safari нет.

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

Made in HTML/CSS