CSS *

CSS Flexbox - это модуль раскладки, который позволяет легко выравнивать, распределять и переносить элементы на веб-странице с помощью небольшого количества кода. Flexbox работает с двумя осями - главной и побочной, которые определяют направление и порядок элементов внутри flex-контейнера. Flexbox также дает возможность задавать гибкость элементам, то есть их способность увеличиваться или уменьшаться в размерах в зависимости от свободного пространства в контейнере. В этой статье мы рассмотрим основные понятия и свойства CSS Flexbox, а также покажем несколько примеров его использования на практике.

Хочу рассказать о своём новом (хотя существует уже почти 3 года) сайте egaxegax.github.io, после закрытия предыдущего сайта egaxegax.appspot.com на хостинге Google App Engine в начале 2021 года. О нём я писал в статье Cайт на Django-nonrel на платформе Google App Engine для Python. Эта статья рассчитана на тех, кто хочет узнать или получить простой сайт с возможностью добавления и правки контента на основе создания markdown-постов.

Фронтенд-разработка — это как собирать лего без инструкции: иногда весело и творчески, но порой ты забираешься на кровать и кричишь: «*@#%*, да где же этот пропавший блок?!»

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

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

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

В данном случае - страница настранивается с бэк-енд админки (Processwire CMS) и потенциально может иметь боковую панель (произвольной ширины), может и не иметь. А возможно в дальнейшем и вторую панель кому захочется прикрутить (old school) на широких экранах.

Главная секция (main content) состоит из наших конструкторских чудо-карточек, о ней то речь и пойдёт.

Поделюсь опытом, как я блокирую рекламу в браузере Chrome (к счастью, мне хватает одного), пользуясь базовыми знаниями HTML/CSS.

Добрый день. Меня зовут Тимофей, я фронт-тимлид в диджитал-продакшене ДАЛЕЕ. В данном цикле статей я поделюсь подходами и инструментами фронтенд-разработки на аутсорсе, которые помогут создать качественный продукт без кошмарного instant-legacy и значительно облегчат жизнь команде разработчиков и не только.

Расскажу, почему не стоит излишне усложнять архитектуру фронтенда, и дам примеры удобных и эффективных инструментов разработки с точки зрения DX (developer experience. Это важно) и дальнейшей поддержки.

Изучая графику на Dribbble или Behance, вы найдёте там дизайнеров, использующих простую технику добавления в изображения текстур: шум. Добавление шума делает сплошные цвета или плавные градиенты, например, тени, более реалистичными. Но несмотря на любовь дизайнеров к текстурам, шум редко применяется в веб-дизайне.

В этой статье мы при помощи CSS и SVG сгенерируем цветной шум, позволяющий добавлять текстуру к градиенту.

Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui.

"Почему код для копирования/вставки, а не библиотека?

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

Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды.

Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации".

На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода.

Цель этой статьи — изучить архитектуру и реализацию shadcn/ui.

Если вы еще не использовали shadcn/ui, я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
• чем полезно свойство outline-offset;
• зачем вам нужно использовать медиа-функцию prefers-color-scheme;
• где должен находиться заголовок в разметке блока с новостью.

Давайте начнём!

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.

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

Верней оформил 5 декабря 2023 года оформил для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.

Код в React в итоге выглядит примерно так:

Всем привет. Меня зовут Евгений Чернышев, и я возглавляю фронтенд-разработку в одном из направлений деятельности Домклик. Хочу поделиться своими мыслями о том, как управлять сложными конфигурациями Webpack. Сразу «проведу черту», чтобы предотвратить возможные холивары: сравнение Webpack с другими бандлерами (Rollup, Vite и прочими) выходит за рамки статьи.

Де-факто, Webpack является основным сборщиком фронтенд-проектов. Это зрелый продукт, который до сих пор развивается и повсеместно используется. Но, как и любой инструмент, он имеет свои слабые стороны. Я считаю что основной недостаток Webpack — это сложность его конфигурации. На крупных долгоживущих проектах конфигурационные файлы становятся слишком большими и нечитаемыми, превращаясь в мешанину вложенных объектов и spread-операторов. Чтобы показать, что я имею в виду, рассмотрим стадии развития проекта.

▍ Правило наименьших полномочий

Описываем способы максимально ускорить загрузку шрифтов на сайте.

Развенчиваем мифы и разбираем ошибки. В статье вас ждут полезные онлайн сервисы для ускорения работы.

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.

Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!

Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров, начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Привет, Хабр! Меня зовут Александр Григоренко, я фронтенд-разработчик. В основном, занимаюсь разработкой приложений на React, но также постоянно экспериментирую с различными технологиями.

В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Давайте познакомимся с возможностями <dialog> поближе.

Продолжение перевода статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой рассматривается уже сам UnoCSS.

Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi CSS

Что такое Atomic CSS?

Для начала давайте дадим правильное определение атомарному CSS. Из этой статьи Джона Полачека:

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

Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.

В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.