Цвета высокой четкости с 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

Responsively — это инструмент для веб-разработчиков, который помогает тестировать и отлаживать адаптивные (responsive) веб-сайты на разных разрешениях экрана.

Made in HTML/CSS

Что такое TCP?

TCP (Transmission Control Protocol) — это протокол передачи данных, который обеспечивает надёжную и упорядоченную доставку информации между устройствами в сети. Он работает на транспортном уровне модели TCP/IP и широко используется в интернете для таких задач, как загрузка веб-страниц, отправка электронной почты и передача файлов.

Основные принципы работы TCP:
- Надёжность передачи. TCP гарантирует, что все данные будут доставлены получателю без ошибок. Если какой-то пакет потеряется, случится повторная отправка.
- Упорядочивание данных. TCP собирает пакеты в правильной последовательности перед передачей приложению.
- Установка соединения. Перед началом обмена данными TCP использует трёхэтапное рукопожатие (SYN, SYN-ACK, ACK).

Где применяется TCP?
- Загрузка веб-страниц (HTTP/HTTPS)
- Отправка и получение электронной почты (SMTP, IMAP)
- Передача файлов (FTP)
- Удалённое управление серверами (SSH, RDP)

Made in HTML/CSS

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

Made in HTML/CSS

«Великолепный» CSS. Коллекция странностей CSS, на которые я потратил кучу времени

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

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

Made in HTML/CSS

Что такое UDP?

UDP (User Datagram Protocol) — это сетевой протокол транспортного уровня, который предназначен для быстрой передачи данных без установления соединения.

Ключевые особенности:
- Скорость важнее надежности: В отличие от TCP, UDP не устанавливает соединение (нет «рукопожатия»), не гарантирует доставку пакетов, их порядок и не контролирует перегрузку сети. Это делает его очень быстрым и минимизирует задержки.
- Простая структура: Заголовок UDP имеет фиксированный размер всего 8 байт и содержит всего 4 поля: порт отправителя, порт получателя, длину пакета и контрольную сумму.
- Работа с датаграммами: Данные передаются отдельными независимыми пакетами. Если пакет теряется по пути, его повторная отправка не производится.

Для чего нужен?
UDP идеален для сервисов реального времени, где небольшая потеря данных предпочтительнее, чем задержки:
- Видеозвонки и стриминг
- Онлайн-игры
- DNS-запросы (быстрый ответ с IP-адресом критичен для загрузки сайтов)
- Голосовая связь (VoIP)

Made in HTML/CSS

Material Icon Theme — это одно из самых популярных расширения для визуального оформления VS Code. Оно заменяет стандартные иконки файлов и папок в боковой панели на более красочные и смысловые иконки в стиле Google's Material Design.

Made in HTML/CSS

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

*Работает с VPN

Made in HTML/CSS

В чем различие между селекторами + и ~?

Главное отличие — в строгости условий расположения элементов. Селектор с плюсом, который называется смежным или adjacent sibling selector, работает по более жесткому принципу. Он выбирает только тот элемент, который находится непосредственно после указанного элемента и на том же уровне вложенности.

Другими словами, между ними не должно быть других элементов. Если представить цепочку элементов, то этот селектор нацелен строго на самого ближайшего «младшего брата», который идет следующим в коде.

В отличие от него, общий селектор ~, или general sibling selector, действует гораздо более свободно. Он выбирает все элементы, которые являются родственными (siblings) по отношению к указанному, находятся на том же уровне вложенности и следуют после него, но при этом между ними могут располагаться другие элементы.

Этот селектор ищет не только ближайшего соседа, а всех «младших братьев» в своей группе, независимо от того, сколько других элементов их разделяет.

Made in HTML/CSS

Puppeteer — это мощнейший инструмент для автоматизации браузера, созданный командой Google Chrome.

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

Made in HTML/CSS

Можете ли вы перечислить 4 типа свойства @media ?

Четыре основных типа медиа-запросов @media определяют категорию устройства, для которого предназначены стили.

all — универсальный тип, который применяется ко всем устройствам без исключения. Это значение используется по умолчанию.

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

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

speech — предназначен для речевых синтезаторов (скринридеров), которые озвучивают текст на странице для пользователей с ограниченными возможностями.

На практике эти типы часто комбинируются с дополнительными условиями, такими как ширина viewport (min-width, max-width), для создания полноценного адаптивного и доступного дизайна.

Made in HTML/CSS