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

Ну наконец-то! В 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

#жизнь дня

Опаздываю с постом по простой причине: член команды (я не знаю как лучше перевести teammate) свалился с панической атакой 👀, а баги на мне никуда не делись.

Есть у меня теория, почему это произошло, будем думать, как избежать.

А через 15 минут у меня собеседование очередного соискателя из Португалии. Или Бразилии, я точно не помню уже, их много сейчас проходит.

Русский акцент это плохо, считаете вы? Вы не слышали португальского. Впрочем, это всё равно легче вьетнамского. Но ко всему привыкаешь.

Быть личинкой тимлида – сложно. Но не буду советовать вам избегать по-возможности. Это весело.

#work #teamlead

#заметка дня

Многие из вас наверняка используют CodePen. Кто-то потому что так требуют в чатах 👀, a кто-то — для развлечения. Тут я напоминаю вам про рубрику #codepen дня 🔥.

Но сегодня попробуем поговорить о том, как использовать в ваших экспериментах npm-пакеты. Ибо не всегда нужная библиотека есть на CDN, а копировать код целиком ну откровенно неудобно.

Давайте возьмём для примера sal.js: https://github.com/mciastek/sal

Что говорит документация? А говорит она нам: установите npm-пакет и импортируйте модуль.

Ну что же, давайте откроем настройки нашего кодпена (шестерёнка) и посмотрим на раздел JS. Там есть поиск по npm.

Как только вы ввели в поле название и выбрали нужный пакет, CodePen вставит в блок JS что-то такое:

import * as salJs from "https://cdn.skypack.dev/sal.js";

Это отличается от того, что в документации:

import sal from 'sal.js’;

И дело тут вовсе не в кавычках. А дело в том, что существуют разные форматы экспорта модулей из пакетов. Я рекомендую обратиться к учебникам: https://learn.javanoscript.ru/modules или https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/import

Но у нас тут не гвоздями же прибито, давайте просто исправим импорт:

import sal from "https://cdn.skypack.dev/sal.js";

И вот нужная функция импортирована. Остались стили.

Документация рекомендует и их импортировать, но заодно поставляет и собранные, чтобы добавить классическим способом.

Судя по документации, это каталог dist. Ну, давайте попробуем открыть через наш Skypack CDN: https://cdn.skypack.dev/sal.js/dist/sal.css

Надо же, стили нашлись. Опять открываем настройки кодпена и просто добавляем в раздел CSS этот адрес.

И вот готовый результат: https://codepen.io/alinaki/pen/RwVROKN

Если вы уже самостоятельно открыли ссылку на модуль: https://cdn.skypack.dev/sal.js, то могли заметить, что некая инструкция есть и там. Крайне рекомендую ознакомиться.

Например, можно просто найти пакет на самом https://www.skypack.dev/ и нажать на кнопку «Open in CodePen».

А вообще, не бойтесь экспериментировать и внаглую писать то, что ожидаете увидеть. Иногда оно так и работает.

#es6 #modules #javanoscript #scroll #animation

Кто догадается, о чём будет надвигающийся пост? :)