#ссылка дня

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

Целый репозиторий всяческих :hover-правил: https://github.com/IanLunn/Hover

Название оригинальное: Hover.css :)

Есть и демо-страница: http://ianlunn.github.io/Hover/

Не могу сказать, что вы найдёте какие-то откровения там, но чекнуть стоит. Эффект завёрнутого уголка довольно забавный. Да и общий подход.

#css #hover #github

#фишка дня

Когда разработчикам Microsoft Edge делать нечего, они 3D-модель DOM в Edge DevTools запускают. Да, как в Firefox. Chrome такую штуку не имеет.

Честное слово, с трудом представляю, зачем это нужно… но отладить какие-то проблемы с z-index вполне можно.

Да и… красивое.

Так вот, фишка немного не в этом. Фишка-то в том, что доступ к этому инструменту можно, нажав Ctrl/Cmd-Shift-P и введя там 3D.

Знакомое сочетание?

Да, это командная панель, которую когда-то миру показал Sublime Text и потом потырили все, кому не лень. Вы точно ей пользовались в Atom и Visual Studio Code.

Так вот, эта панель команд и в Chrome DevTools тоже имеется. Теперь не надо ковырять меню в поисках нужного редкого инструмента!

Удобно.

#3d #zindex #edge #chrome #devtools

#ссылка дня

Grass is green,
Hyperlinks are blue,
Because in April 1993,
Mosaic decided that that would be its hue
© Bramus

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/


#css #history

#статья дня

Рейтинг в виде звёзд это, наверное, самая универсальная штука на свете. Лично я считаю, что цифры справляются не хуже, но уж как есть.

И вот, небезызвестный Ахмад Шадид с очередной реализацией, теперь на SVG: https://ishadeed.com/article/star-rating-noscript/

Как всегда, читать стоит не ради самой реализации — может, вам звёздный рейтинг и не пригодится-то никогда — а ради объяснения нюансов работы с SVG.

#noscript #css #star #rating #widget

#фишка дня

Если вам в проекте понадобилось вдруг использовать библиотеку  fullPage.js для поэкранной прокрутки — подумайте ещё раз.

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

Гораздо логичнее использовать scroll-snap, который давно и неплохо нативно поддерживается во всех остальных браузерах.

Вот простейший пример, который дальше уже можно наращивать по вашему желанию: https://codepen.io/argyleink/pen/qBRpdEr

Минимум кода, максимум отдачи. А уж оставшиеся фишки можно и дописать или настроить. Зато с этим уж точно не придётся бороться и у вас на руках все нативные события скролла.

#css #scroll #fullpage

#такое дня

Вроде вторник, а ощущений на целый понедельник.

Пришлось доказывать сейлзам из крупного провайдера чатов поддержки, что бывают интерфейсы в 300 пикселей шириной. На десктопе. И да, с миллионной аудиторией.

Давайте пиццу закажем чтоль.

.toppings {
  float: right;
}

#фишка дня

Я не ожидал, что простая подводка к мему вызовет столько бурления. Как-нибудь расскажу ещё о том, чем же я таким занимаюсь. А пока давайте к новостям.

В Chrome 95 (сейчас это Chrome Canary) появился API для забора цвета со страницы. Пипетка, короче.

API неофициальный, но Google как всегда бежит впереди паровоза.

Впрочем, почему бы и нет. Для экспериментов самое то, а потом кто-нибудь и полифиллы подгонит.

Демо: https://codepen.io/bramus/pen/mdwPWEL

#js #chrome #color #colorpicker

#статья дня

Ахмад Шадид выпустил большую статью-обзор методов маскирования и обрезки изображений. Сравниваются CSS и SVG-подходы. Огромное количество примеров и иллюстраций.

https://ishadeed.com/article/thinking-about-the-cut-out-effect/

Ну и демо, конечно же, для Ъ: https://codepen.io/shadeed/pen/GRmyPjK

Вообще, если коротко: белым обозначаем то, что хотим оставить, а чёрным — то, что хотим скрыть.

#css #noscript #clip #mask

#статья дня

В недавней заметке про кнопки и role="button" я упомянул, что переключатели и чекбоксы — вещи разные. Вот, прикладываю обещанное объяснение: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

Используйте переключатель:

1. Для вызова мгновенной реакции системы на включение опции.
2. Для выделения несвязанных элементов в группе.

Используйте чекбоксы:

1. Когда форму после пометок требуется отправить отдельным действием.
2. Если требуется множественный выбор.
3. Для выделения связанных элементов в группе.

#css #checkbox #switch #ux

#статья дня

Роман Шамин из «Злых марсиан» (Андрей Ситник оттуда, если вы не в курсе кто это — shame on you) о том, как минимальными усилиями со стороны дизайнера добиться максимальной доступности интерфейсов.

https://teletype.in/@romanshamin/a11y-for-designers

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

#design #a11y

#фишка дня

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

const operators = [
  {
    label: ‘Equals’,
    value: ‘==’,
  },
  {
    label: ‘Not equals’,
    value: ‘!=’,
  },
  …
];

И вот надо же мне типизировать использование этих операторов. Но как? Не руками же.

И выход есть:

const operators = [
  …
] as const;

type Operators = typeof operators[number][‘value’];

В итоге, виртуально получаем вот это вот:

type Operators = "==" | “!=“;

Красота.

#typenoscript #types #const

#фишка дня

Если вам нужны более мягкие градиентные переходы, но лень возиться с easing-формулами, попробуйте комбинировать их. Например, радиальные градиенты в прозрачность: https://codepen.io/alinaki/pen/eYRBbYj?editors=1100

Во многих случаях это именно то, что нужно. Менее насыщенная середина с двумя акцентами по краям.

Про то, что же такое easing-градиенты я писал не так давно: https://news.1rj.ru/str/htmlshit/581

#css #gradient #radial

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

Есть такая прекрасная утилита — SVGO. SVG Optimizer.

Для неё был реализован недостающий GUI — SVGOMG. Удивительная магия аббревиатур работает и тут — это буквально SVGO Missing GUI.

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

Так вот, сегодня, спустя два года с момента последнего обновления, вышла версия 2.0!

https://jakearchibald.github.io/noscriptomg/

Развлекайтесь :)

#noscript #noscripto #noscriptomg

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

Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.

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

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это как jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a

Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli

#ссылка дня

Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook

#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

 О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок.

#new #github #codepen #sandbox

P. S. вчерашнее было случайно удалено, но терять не охота.

С днём программиста, народ!

256-й день в году, как-никак.

А ещё в этот день два года назад я получил оффер в компанию, в которой работаю и сейчас 🎉

#статья дня

Если вы до сих пор не подписаны на блог Джоша Камю и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation

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

Задумывались ли вы когда-нибудь о том, что и как в CSS называется?

Как правильно задать вопрос? Как назвать тот или иной блок, правило? Да и правило ли вовсе это?

Вообще, строго говоря, нам всем нужен словарь.

И хорошо, когда он ещё и удобный: http://apps.workflower.fi/vocabs/css/en

Кликаем по определениям, подсвечивается кусок реального кода.

А большего и не нужно.

Ладно, ладно. Вот на русском: http://apps.workflower.fi/vocabs/css/ru

Вот теперь точно не нужно.

#css #vocabulary

#баг дня

Если вы когда-нибудь пытались повторить подобие раскладки masonry на grid, вы вполне себе могли столкнуться с косяком: после некоторого числа строк, все элементы начинают накладываться друг на друга.

Вот вполне себе пример: https://jsfiddle.net/cdysL3rm/2/

Для предотвращения утечек памяти, число строк в гридах было ограничено 1000.

Подобные виды имитации Masonry больше напоминают хак, так что этот лимит очень легко преодолеть. В моём случае – уже на пятидесяти изображениях.

Сейчас этот лимит подняли.

Так вот, багу — больше 4 лет: https://bugs.chromium.org/p/chromium/issues/detail?id=688640

И его наконец-то исправили! Не прошло и пяти лет :)

Правда, до выхода ещё надо немного подождать.

#chrome #grid #bug

#фишка будущего

Сложно найти человека, которого бы не бесили медиа-запросы. Эти вечные min-width, max-width, screen and min-width... да зачем так сложно-то? 😭

Но Media Queries Level 4 дарят нам столь долгожданное и столь математически очевидное решение: ranges!

Ну согласитесь, писать

 (240px <= width <= 360px)

намного приятнее, чем

 (min-width: 240px) and (max-width: 360px)

...слышу отдалённые крики гуманитариев, которым спешу напомнить про 1023px, ага.

Нативно поддерживается только в Firefox:
https://caniuse.com/mdn-css_at-rules_media_range_syntax, но есть PostCSS-плагин: https://github.com/postcss/postcss-media-minmax

Если вы желаете, чтобы и Chrome добавил поддержку диапазонов, ставьте звёздочку на заведённом фич-реквесте: https://bugs.chromium.org/p/chromium/issues/detail?id=1034465

Удобной вам разработки :)

#css #media #ranges