#codepen дня

Каждый программист должен написать хелловорлд, калькулятор и музыкальный плеер.

Время повышать планку. Каждый верстальщик теперь тоже должен написать калькулятор.

И даже не шучу, глядите: https://codepen.io/lillian-kodi/pen/YzZLebR

Он на десктопе точно работает, а вот на мобилах что-то через раз.

Тут разбираться и разбираться. Но точно можно сказать, что число хаков ужасающе мало. Почти всё легитимно.

Сходу можно сказать, что каждая кнопка создаёт свой слой. Нажали на радиокнопку — стал активен следующий слой. И так далее.

Ждём статью от автора, разберёмся: https://twitter.com/LillianKodi/status/1401325452581613568

#css #calculator #awesome

#фишка дня

Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.

Давайте сделаем свою. Для любого сайта.

Секунд за пять.

1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11

Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW

Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».

Впрочем, он же пишет, что повторить подобное поведение ему не удалось.

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

#css #darktheme #filter

#заметка дня

— Э, что это за обводка на полях и ссылках? Убирай.

Знакомо же? Отключение подсветки, box-shadow, focus-visible... Но хочется же как-то проще решить вопрос.

И тут нас встречает свойство outline-offset. Ага, можно управлять отступом контура от элемента. И это уже будет выглядеть интереснее.

А главное, это свойство — анимируемое, глядите: https://codepen.io/alinaki/pen/GRWXeae

Элегантно и максимально просто. Автор идеи — Adam Argyle.

#css #focus #outline

#инструмент дня

Ну наконец-то! В Chrome 92 полноценно заработал редактор CSS Grid с удобной панелью. Не очень понятно, что у них заняло так много времени :) Редактор флексов был давно.

Полный список изменений: https://developer.chrome.com/blog/new-in-devtools-92/

Ещё из интересного: добавили индикацию Quirks Mode (почему сейчас-то?) и возможность записи действий для Puppeteer.

#chrome #devtools

#codepen дня

Уже любимая всеми нами Ана Тюдор совсем не так давно написала шикарную статью о том, как стилизовать ползунковый контроллер, в простонародье input[type=“range”]: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/

Вообще, это статья о том, как сделать вариант с двумя ползунками. Просто разделение на составные части виджета и объяснение принципа даны прекрасно.

Но мы тут собрались готовые решения смотреть. И вот они, целая коллекция ползунков: https://codepen.io/collection/DgYaMj?sort_order=desc&sort_by=item_updated_at

На любой вкус и цвет! Двойные и одиночные. Подобрать можно под практически любой дизайн.

Пользуйтесь 😉

Важное дополнение к посту выше: эта коллекция собиралась и пополнялась автором не один месяц. Не стесняйтесь использовать сортировку и вообще копаться в ней 🤗

Тем временем, пост я поправил, чтобы ссылка сразу эту сортировку включала. Приношу свои извинения.

#инструмент дня

Очередной генератор сеток CSS Grid: https://css-grid-layout-generator.pw/

Не говорите мне, что это масло-масленое. Многие до сих пор мыслят категориями Bootstrap и т. п., каждый раз приходится уточнять 👀

Так вот, этот довольно сложный.

Мне кажется, проще выучить спецификацию гридов, чем разобраться в нём 😅

Но упоминания стоит.

#css #grid #generator

#статья дня

…а точнее, цикл статей Ника Мостового (на английском) о производительности фронтенда, составляющие вполне себе методичку (это я так handbook перевёл, вроде ок).

1. Как браузер отрисовывает страницу.
2. Как можно улучшить FMP (First Meaningful Paint) и TTI (Time to Interactive).
3. Событийный цикл, разметка, отрисовка, композиция, стек вызова.

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

#css #javanoscript #layout #handbook #fmp #fcp #tti #eventloop

#codepen дня

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

Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx

В данном примере JS нужен лишь для того, чтобы сразу показать React-компонент.

Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪

Те, кто делал скруглённые уголки, поймут. Вот только технологии сильно вперёд ушли и теперь перед нами пользовательские свойства.

История точно движется по спирали.

#css #component #directional

#ссылка дня

Eleventy — это простой, но мощный генератор статических сайтов.

Суть его в том, что вы имеете доступ к мощной и разветвленной системе шаблонов, шорткодов и обработчиков запросов к разным API, но только в момент сборки. После чего получаете чистый HTML. Без CMS и прочего бакенда, пока сами не захотите. Мне вот нравится черновики статей в Markdown готовить.

Кайф в том, что Eleventy никак не ограничивает вас в инструментах сборки и постобработки. Webpack, Snowpack, Gulp — что угодно. Хоть виджеты на React вставляйте.

В общем, вот бесплатный курс по нему: https://piccalil.li/course/learn-eleventy-from-scratch/

Сейчас сам тоже его буду проходить. Ибо сайт канала максимально прост. Слишком прост 🤷‍♂️

#11ty #eleventy #course

#статья дня

Тот случай, когда статья шестилетней давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Классика вечна :)

#css #noscript #gif #animation

#инструмент дня

Знакомая ситуация? 👆

Сегодня я представляю на ваш суд расширение для VS Code под названием Blockman: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Что оно делает?

Всё просто: подсвечивает блоки кода, что очень часто бывает довольно удобно. Причём, не прямоугольниками, а всю область видимости целиком.

Да, VS Code подсвечивает парные скобки, но иногда этого бывает недостаточно. Просто посмотрите скринкасты со страницы расширения.

На самом же деле, чтобы не попадать в такие ситуации, старайтесь не допускать большой вложенности кода. Но уж если так получилось…

#vscode #extension

#статья дня

То тут то там можно услышать, что Google Chrome с 91 версии исправил что-то там в таблицах. А точнее, в их рендеринге. Но что конкретно?

А вот давайте и посмотрим, с примерами: https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/

Итак, по-порядку:

1. Ширина колонок наконец-то может быть в долях пикселей. 33.333px вместо 33px, 33px и 34px как было раньше.
2. TD/TH начали поддерживать writing-mode без дополнительных обёрток. Т. е. можно делать вертикальные заголовки и содержимое.
3. colgroup начал поддерживать схлопывание колонок (visibility: collapse).
4. Полноценная поддержка position: sticky на всех элементах таблицы.

К сожалению, в отстающих теперь Safari. Надеюсь, это ненадолго. У Firefox дела давно весьма хорошо.

Да и прогрессивное улучшение никто не отменял.

#css #table #sticky

#фишка дня

А вы знали, что тег video поддерживает субтитры?

Ну, допустим, кто-то знал.

А вы знали, что эти субтитры можно ещё и стилизовать?

Через псевдоэлемент ::cue. Буквальный перевод — реплика. Кто бы мог подумать.

А вот и пример: https://codepen.io/alinaki/pen/qBreeBK

Обратите внимание на переданные в стили реплик параметры v и c. Самые наблюдательные уже заметили: разным героям — разный цвет слов.

Так вот, субтитры должны поставляться в файле особого формата — WebVTT (Web Video Text Tracks). И уже внутри разметки субтитров можно указать голосовые отрезки — voice spans, выглядящие как самые обычные теги:

<c><i>[ evil laughter ]</i></c>

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

#html #video #subnoscripts #vtt #webvtt

#статья дня

Как правильно настроить фавиконку или изображение для закладки на таскбаре или экране мобильного телефона? Сколько файлов нужно, какого формата?

Можно бездумно воспользоваться инструментами-генераторами вроде https://favicomatic.com/

Они сделают всю работу за вас, но я всё же предлагаю понять, что конкретно и как нужно делать.

А для этого — вот отличная статья Андрея Ситника из Evil Martians: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

1. favicon.ico для старых браузеров
2. SVG с версиями под тёмную и светлую темы для современных браузеров
3. PNG 180x180 для устройств Apple
4. PNG 192x192 и 512x512 для Android-устройств

Всё остальное — или устарело, или просто оказалось ненужным в современных реалиях, об этом даётся справка.

Ну и конечно, статья была бы не настолько хороша без инструкций по подготовке изображений. Всё отлично объяснено.

#noscript #png #favicon #touch

#codepen дня

Даже не кодпен дня, а коллаборация дня. Это моя любимая тема.

Автор A выкладывает концепт, автор B дополняет его. Автор C анимирует и добавляет интерактива.

Следите за руками:

1. При помощи правила -webkit-background-clip: text; можно сделать полосатый текст, просто наложив градиент: https://codepen.io/TajShireen/pen/YzZmbep
2. Градиент может быть и коническим: https://codepen.io/argyleink/pen/XWRWagg
3. Или анимированным, используя Houdini и пользовательские свойства: https://codepen.io/bramus/pen/abWbvXJ
4. А ещё можно заставить градиент следить за курсором, используя всё те же пользовательские свойства: https://codepen.io/bramus/pen/PomoJym

Простой концепт, а сколько вариантов и идей.

#css #houdini #gradient #clip

#статья дня

Не так давно по многим ресурсам катком прошлась статья про использование тригонометрии в вёрстке: https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javanoscript-introduction-to-trigonometry/

А точнее, там целый цикл, ссылки внутри.

Но они не применили ничего из этого в CSS-анимациях, хоть и привели пример на canvas. Так что пришло время расчехлить наше всё.

Вашему вниманию предлагается… прыгающая коробочка: https://codepen.io/alinaki/pen/GbxrwO

Если вы ездили поездами РЖД, она может быть вам знакома по их Wi-Fi порталу. Но там-то просто гифка, а тут — магия SCSS.

Я решил не использовать библиотеку math для SCSS и реализовал тригонометрические функции по известным алгоритмам, SCSS вполне себе позволяет такое.

Крайне рекомендую посмотреть скомпилированный CSS чтобы понять изначальный принцип.

Итого, «физически правильно» прыгаем по косинусу и пружиним по синусу :)

Школьная тригонометрия вам о таком использовании не рассказывала, уверен.

#css #trigonometry #animation

#игра дня

Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.

Давайте бахнем хардкором: https://css-challenges.com/

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

Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.

Дерзайте 🔥

P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/

Там, кстати, небезызвестный Илья Стрельцын в лидерах :)

#css #game

#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url

#статья дня

Неожиданно прекрасная статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/

"Когда?", — спросите вы. "Тогда", — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.

В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.

Получилось прекрасно, всплакнул.

Каждый аспект работы проиллюстрирован и объяснен, почему так, а не иначе. Очень хорошо разобрано всё на компоненты. Я получил эстетическое удовольствие от чтения.

Рекомендую. 11 из 10.

#ie6 #facebook #css #layout

#фишка дня

Чтобы задать анимацию появления какого-либо элемента на экране при загрузке страницы, добавлении элемента или обновлении DOM совсем не нужно городить сложных конструкций.

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.

#css #keyframes #animation