Адаптивная вёрстка сайта

#почитать

▫️Прочность
▫️Относительность единиц измерения
▫️Использование контрольных точек
▫️Максимальные и минимальные значения
▫️Вложенность объектов
▫️Правильные шрифты
▫️Грамотное использование графики
▫️Выдерживание размеров макетов

⏱Читать статью

Семантическая вёрстка

#почитать

Подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока.

⏱Читать статью

Elastic Overflow Scrolling

#почитать

Для начала понадобится какой-то элемент, выступающий в качестве контейнера для прокручиваемого контента. Конечно, можно JS, но это потребует добавления слушателей прокрутки или комбинации событий pointerDown, pointerUp и pointerMove, не говоря уже об отслеживании положения, инерционного движения и т. д. Идеальным было бы решение на CSS, и вот оно

⏱Читать статью

▫️CSS-анимации для начинающих

#почитать

Фундаментальный практикум на русском, по книге CSS Animation 101

⏱Читать статью
⏱Скачать шпаргалку

Видеопрактика:
▫️ Основы анимации для новичков ⏱30 минут
▫️ Гайд по CSS анимации. Transition / Animation ⏱20 минут

Как читать W3C-спецификации

#почитать

▫️Поймите, что спецификации W3C написаны для разработчиков реализаций, а не для конечных пользователей.
▫️Во многих спецификациях есть раздел с описанием, как они организованы и как их нужно читать.
▫️Знайте словарь, используемый в спецификациях.
▫️Помните, что не нужно читать каждое слово. Бегло просматривайте в поисках частей, которые имеют смысл.
▫️Избегайте обсуждений пространств имен.
▫️Научитесь читать BNF — он используется во многих местах.
▫️Научитесь читать DTD для ответов на вопросы по синтаксису.
▫️Если технология поддерживает скрипты, информация находится в привязках.

⏱Читать статью

Настройка цитат в HTML и CSS

#почитать

Цитаты позволяют выделять часть текста и придавать особое значение.

⏱Читать статью

Что нужно знать про OOCSS и организацию CSS

#почитать

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

⏱Читать статью

🖥 Хотите сделать красивый README на GitHub?

Я вообще обожаю описывать Readme файл и кайфую, когда всё красиво, чётко и ясно. Мне трудно понять людей, которые не ведут документируют собственные проекты, ведь это помогает не только другим, но и автору кода!

Например, недавно я создавала первый проект с Docker, Jenkins и генерацией отчета тестирования. Захотела сделать всё «по-умному», чтобы джобы сами работали и всё в этом духе. Так вот, мой Readme файл пригодился не только девопсу разобраться с моим кодом и помочь, но и мне! Потому что все эти команды запомнить не очень просто, а благодаря документации всё становится структурированным (это моё личное наслаждение)

Я пишу Readme по всем канонам: с тайтлами, изображениями, блоками кода, сносками и так далее. И вам советую! Потому что таким образом вашу документацию будет проще читать и использовать.

А возвращаясь к GitHub README файлу, здесь вообще большое пространство для фантазии. Потому что это ваша презентация, и вы имеете право писать всё, что угодно, в любом стиле.

А именно поэтому я хочу поделиться подборкой полезных ресурсов, которые помогут сделать вашу «визитную карточку» на GitHub более привлекательной:

▫️awesome-github-profile-readme
▫️creative-profile-readme
▫️skill-icons
▫️github-readme-stats
▫️cicirello/user-statistician
▫️dec0dOS/amazing-github-template
▫️markdown-badges

(источник)

Стилизация meter

#почитать

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

⏱Читать статью

CSS Wrapped 2024

#почитать

Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the forest, over the mountains, and across the seas as they explore the latest CSS launched for Chrome and the web platform in 2024.

⏱Посмотреть

Пишем одностраничное приложение с помощью htmx

#почитать

JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает столь желанное спасение.

Создатель htmx, Карсон Гросс, иронично объясняет эту динамику библиотеки так:

Нет, здесь у нас диалектика Гегеля:
тезис: традиционные многостраничные приложения,
антитезис: одностраничные приложения,
синтез (возвышенная форма): гипермедиа-приложения с островками интерактивности.

⏱Читать статью