Как стать автором
Обновить
45.18

CSS *

Каскадные таблицы стилей

Сначала показывать
Порог рейтинга
Уровень сложности

Визуализация алгоритмов поиска пути на Svelte: Практические заметки

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 2.7K

Привет, Хабр! В этом посте делюсь опытом разработки на Svelte, демонстрируя это на моем пет-проекте.

Код проекта: GitHub
Лайв демо: ivan-sem.com

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 11

Как писать более чистый CSS: дюжина советов от банальных до неочевидных

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 15K

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

CSS как технология действительно немного раздут, но не так хаотичен и сложен, как его иногда описывают. Просто нужно стремиться к лаконичности - в том числе, с помощью описанных подходов.

Читать далее
Всего голосов 19: ↑19 и ↓0 +19
Комментарии 16

Где учить Frontend бесплатно в 2024 году

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 29K

В 2024 году изучать frontend по-прежнему актуально. Вот несколько причин, почему это может быть полезным:

1. Развитие технологий: Веб-технологии постоянно развиваются, и в 2024 году можно ожидать еще большего прогресса. Изучения frontend поможет быть в курсе последних тенденций и использовать новые инструменты и фреймворки.

2. Рост спроса на разработчиков: Веб-разработка остается одной из самых востребованных отраслей IT. Спрос на frontend-разработчиков будет продолжать расти, так как все больше компаний стремятся создавать привлекательные и функциональные веб-приложения.

3. Возможность карьерного роста: Уверенное владение frontend-навыками может открыть двери к различным возможностям карьерного роста. Вы сможете работать над различными проектами, включая веб-сайты, веб-приложения, мобильные приложения и другие интерактивные решения.

4. Комбинированные навыки: Знание frontend-разработки может быть полезным дополнением к другим IT-навыкам. Например, если вы уже знаете backend-разработку, изучение frontend поможет вам создавать полноценные веб-приложения самостоятельно.

5. Творческий потенциал: Frontend-разработка предоставляет возможность реализовать свои творческие идеи и создавать уникальные пользовательские интерфейсы. Вы сможете воплотить свою визуальную концепцию и улучшить пользовательский опыт.

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

Читать далее
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 14

Суперсемейка против Unicode: Эластика и ее противник гибкий UTF-8

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 2.6K

Кодировка символов – это про то, как символы которыми мы пишем наши сообщения выглядят в двоичном коде.

В мире существует множество кодировок, но самые популярные из них, это;

ASCII – это самая первая кодировка в мире, она была создана в Америке. Собственно благодаря ей, 8 бит равны 1 байт.

UTF-8, 16 и 32 – данные кодировки были созданы организацией Unicode (Юникод). Если по простому, то они это то же самое что и ASCII, но более вместительные, что означает, что они занимают больше памяти.

Все бы ничего, легкая тема, но есть одно но – кодировка UTF-8 имеет, как по мне, гениальную особенность: она умеет "растягиваться". То есть адаптироваться под большое кол-во символов.

Читать далее
Всего голосов 8: ↑5 и ↓3 +2
Комментарии 13

Истории

Сжатие css классов. Как сделать веб Ещё быстрее. next.js

Время на прочтение 3 мин
Количество просмотров 6.3K

Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. Длинные классы увеличивают вес страницы, это в свою очередь означает увеличение времени загрузки самого главного для рендера страницы - документа и файла стилей, от которых напрямую зависят метрики FCP, LCP.

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

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 26

Скрытые возможности элемента <input>

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 16K

Элемент <input> в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).

Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме. В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях. Приступим!
Читать дальше →
Всего голосов 103: ↑102 и ↓1 +101
Комментарии 22

Кодим 24/7: Прокачиваем продуктивность в условиях жесткого цейтнота

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 15K

Привет! Меня зовут Михаил, я Senior Software Developer в YouHodler.

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

Читать далее
Всего голосов 12: ↑0 и ↓12 -12
Комментарии 9

CSS Flexbox: быстрый и гибкий способ создания макетов

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 6.6K

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

Читать далее
Всего голосов 7: ↑1 и ↓6 -5
Комментарии 10

Сайт с поддержкой markdown на GitHub-Pages платформе

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 4.5K

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

Читать далее
Всего голосов 15: ↑3 и ↓12 -9
Комментарии 11

Увлекательный мир фронтенда

Уровень сложности Простой
Время на прочтение 16 мин
Количество просмотров 13K

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

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

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

Читать далее
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 17

Css «карточки» в динамически генерируемом web документе — моя реализация

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 4K

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

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

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

Читать далее
Всего голосов 1: ↑0 и ↓1 -1
Комментарии 10

Блокировка рекламы в браузере (User CSS)

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 7.9K

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

Читать далее
Всего голосов 20: ↑15 и ↓5 +10
Комментарии 17

KISS your website или как написать уважаемый сайт на аутсорсе, глава первая

Уровень сложности Средний
Время на прочтение 9 мин
Количество просмотров 2.9K

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

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

Читать далее
Всего голосов 7: ↑6 и ↓1 +5
Комментарии 4

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн

Зернистые градиенты на CSS и SVG

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 5.5K

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

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

Читать далее
Всего голосов 21: ↑21 и ↓0 +21
Комментарии 1

Анатомия shadcn/ui

Уровень сложности Средний
Время на прочтение 14 мин
Количество просмотров 4.9K


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


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

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

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

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

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


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


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

Читать дальше →
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 1

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 4

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 4.4K

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


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

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

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

Читать дальше →
Всего голосов 40: ↑40 и ↓0 +40
Комментарии 4

Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 11K

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

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

Читать далее
Всего голосов 12: ↑10 и ↓2 +8
Комментарии 81

Facebook выпустил новую CSS-in-JS библиотеку — StyleX

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 14K

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

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

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 23

Наводим порядок в конфигах Webpack

Уровень сложности Средний
Время на прочтение 15 мин
Количество просмотров 4.8K

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

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

Читать далее
Всего голосов 20: ↑19 и ↓1 +18
Комментарии 5

Вам не нужен для этого JavaScript

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 27K

Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…

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


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

В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.
Читать дальше →
Всего голосов 97: ↑95 и ↓2 +93
Комментарии 38

Вклад авторов