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

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