Будни разработчика

2021-06-17 11:00:04 #codepen дня

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

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

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

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

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

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

#css #component #directional Открыть/Комментировать

2021-06-15 17:00:10 #статья дня

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

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

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

#css #javascript #layout #handbook Открыть/Комментировать

2021-06-15 13:01:13 Видишь классный макет, но не знаешь как его сверстать?

Канал «Просто: разработка» может тебе помочь. Его автор публикует ценные статьи, а также авторские наработки, которые помогут верстать макеты любой сложности!

1. Откуда горизонтальный скролл?!
2. Доступные цвета
3. Часы БЕЗ на HTML и CSS (без js)

YouTube-канал с уроками, а также чат на тысячу человек — прилагаются.

#реклама Открыть/Комментировать

2021-06-15 09:00:33 #инструмент дня

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

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

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

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

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

#css #grid #generator Открыть/Комментировать

2021-06-15 08:30:23 Важное дополнение к посту выше: эта коллекция собиралась и пополнялась автором не один месяц. Не стесняйтесь использовать сортировку и вообще копаться в ней

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

2021-06-14 12:00:41 #codepen дня

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

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

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

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

Пользуйтесь Открыть/Комментировать

2021-06-12 12:54:27 #инструмент дня

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

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

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

#chrome #devtools Открыть/Комментировать

2021-06-11 19:25:00 Посмотри на ДЕЙСТВИТЕЛЬНО ужасный код: @badcode_tg Открыть/Комментировать

2021-06-11 15:15:00 #заметка дня

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

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

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

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

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

#css #focus #outline Открыть/Комментировать