#новость дня

Одной картинкой.

У меня всё.

#статья дня

Вы когда-нибудь задумывались, что же делает шрифты приятным для чтения? Конкретно — кириллические шрифты?

А вот Александра Королькова точно задумывалась. И это неудивительно, она же автор «Живой типографики». Кстати, книга эта официально в бесплатном доступе: https://t.me/htmlshit/955

Так вот. Статья на сайте небезызвестных Паратайп так и называется: «Как разобраться в кириллице».

Конструкция букв, курсивы и наклонные шрифты, кернинг и распределение толщин — всё доступно и понятно.

Вот где клад для нашей жабы, котаны!

#fonts #cyrillic

#видео дня

Кому технического стендапа? Егор Малькевич как всегда: https://www.youtube.com/watch?v=b8k0FLrW4xw

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

Немного поржал с подачи, что Node.js это буквально просто вызовы API над Си.

Какое совпадение, не подскажете, за счёт чего PHP всё ещё держит позиции в крупных проектах? 😬

В общем, на ночь — самое то.

#video #nodejs

#фишка дня

Продолжаем наше путешествие по уже-не-столь-будущему псевдоселектору :has aka родительский селектор.

На сей раз абсолютно прекрасная штука, сочетание :has и object-view-box (aka фокусировка на части изображения):

img {
  object-view-box: inset(var(--top) ...);
}

:root:has(#car:checked) {
  --top: 61%;
  ...
}

Залипаем на видео, смотрим кодпен:

https://codepen.io/jh3y/pen/QWQrVwj

Ах, простите. Смотрим кодпен только в Chrome Canary с флагом Experimental Web Platform Features 😜

Но заглянуть в будущее всегда приятно.

#css #has #future

#ссылка дня

Мы не так давно приняли решение требовать в тестовых заданиях TypeScript по-умолчанию.

Сейчас уже сложно представить, как должен впечатлить нас человек, пишущий на чистом JavaScript. Даже если он использует cutting-edge возможности.

И мы далеко не первые в этом и уж точно не последние. Так что если желаете где-то адекватно работать или просто меньше бояться за стабильность своих проектов — самое время.

Ну а чтобы не было так больно, держите «методичку» по использованию TypeScript в React-приложениях: https://github.com/typescript-cheatsheets/react

Хороших выходных, котаны!

#react #typescript #cheatsheet

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

Всё ещё испытываете проблемы с ветками в Git?

Not anymore!

Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.

Или вы любите Mercurial? 🤔

#git #education

#игра дня

Очередной образец игры на CSS, ни строчки JS.

Проведите курсор к бриллианту, не касаясь стен: https://codepen.io/t_afif/pen/YzeNyjR

Очень странно, что она раньше не появилась. Реализация довольно очевидная :)

P. S. Да-да, я в курсе, что на мобиле можно выиграть сразу. Слово «курсор» видим?

#css

#ссылка дня

Вот вы знали, что Apple WWDC не ограничивается одной презентацией новых операционных систем, часов и ноутбуков?

Это же самая настоящая конференция для разработчиков. Как оказалось. А видео с неё рано или поздно попадают сюда: https://developer.apple.com/videos/

И вот там находятся настоящие бриллианты. Видео по дизайну, типографике, программированию…

Ну и, конечно, те самые видео с презентацией багнутых операционных систем тоже имеются :)

Обучаемся, котаны.

#apple #wwdc #video

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

Уметь пользоваться отладчиком должен каждый разработчик.

Особенно когда инструменты становятся всё дружелюбнее, да ещё и встроены в браузер.

Итак, как отследить, какой код вызвал изменение атрибута (или поддерева, или вообще удаления) элемента?

Находим элемент в инспекторе, правой кнопкой – «Break on» ➡️ «attribute modifications» и... и в общем, всё, смотрите видео.

Теперь исполнение остановится по условию и вы сможете посмотреть код, изменивший ваш атрибут, прямо во вкладке «Sources». Там же можно добавить больше точек останова или просто продолжить.

#js #debug #devtools

#такое дня

Щас будет немного хардкора. От вас не требуется понимания языка Python или работы компиляторов языков программирования.

Просто задумайтесь на секунду, в каком забавном мире мы живем: чтобы скачать видео с YouTube иногда требуется разобрать JavaScript на странице. А реализация парсинга кода, достаточного для этой задачи, укладываются в 500 строк на Python: https://github.com/yt-dlp/yt-dlp/blob/master/yt_dlp/jsinterp.py

Не знали, откуда начать свой путь в компиляторы и интерпретаторы языков программирования? Можно прям оттуда :)

#js #python

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

Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…

Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…

Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!

Ссылка: https://github.com/Bhupesh-V/ugit

КДПВ говорит сама за себя.

Какая-то неделя инструментов для Git выходит.

#git

#видео дня

Хук useEffect в React с самого начала был как микроскоп, который работал и выглядел как кувалда. Потому его и используют как кувалду даже там, где нужен микроскоп.

React 18 принёс ещё больше вопросов (отчасти ещё и потому, что документация сильно отстаёт и изначально неверна).

Так что я, конечно, настоятельно рекомендую почитать Дэна Абрамова: https://overreacted.io/a-complete-guide-to-useeffect/

Есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/445276/

А чтобы добить знания — глянуть видео о useEffect и его современном значении и правильном применении: https://www.youtube.com/watch?v=HPoC-k7Rxwo

#react #hooks #useeffect

#опрос дня

В каком порядке будут вызваны log*-функции?

Я знаю, вы скучали. Но это не просто опрос, будет чуть-чуть интересно.

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

Собственно, весь опрос был создан ради подводки к этому инструменту: JavaScript Visualizer 9000.

Ссылка: https://www.jsv9000.app/

Когда вы поймёте Event Loop и порядок вызова в JS — подобные опросы вообще перестанут иметь смысл. Так что побалуйтесь примерами, пишите свои, присылайте авторам интересные PR с новыми.

Развиваемся, котаны.

P. S. в комментариях подсказали похожий инструмент: http://latentflip.com/loupe/

P. P. S. ну и статья на тему с чуть иными формулировками: https://dmitripavlutin.com/javascript-promises-settimeout/

#js #education #learning #eventloop

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

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

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

Тогда я воспользовался 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

#заметка дня

Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)

Правильно, это продолжение заметок https://t.me/htmlshit/1182 и https://t.me/htmlshit/1183.

Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.

Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!

Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.

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

Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.

Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?

Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).

Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.

В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.

P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на vw+em, обратите внимание на https://uaz.ru/. Но делать так не надо! Зум у них сходит с ума, потому что на html шрифт указан в vw/vh в зависимости от ситуации, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.

P. P. S. Если вам интересно дальше обсудить возможности шлюзов/адаптивной типографики — не забывайте реагировать на пост и оставлять комментарии.

#css #postcss #rem #vw #vh

#такое дня

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

Итак, 4 (да ведь?) сезон. У них там изобретение Интернета и прочие развлечения из конца 80-х. Конкретно — 1986 год. Так к чему же придираемся?

Смотрим на скриншот из сериала и загибаем пальцы:

- BMP: 1987
- зона .yu: 1989
- HTML: 1993
- атрибут style: 1997
- PNG: 1996
- Flexbox: 2009
- srcset: 2013

Ничо так ребята, широко размахнулись.

Какие ещё фильмы с подобным несоответствием можно вспомнить?

#ссылка дня

Наверное немного странно кого-то убеждать в том, что CSS Grid это технология настоящего, а не будущего. Но тем не менее, такие люди всё ещё находятся.

Если вам встретятся они на пути – перешлите это видео.

А ещё это напоминание о мощности CSS Grid и о ситуации, когда он действительно нужен (а не для того, чтобы создавать пять элементов одинаковой ширины в строке).

Ссылка: https://www.reddit.com/r/css/comments/foqeek/css_grid_is_awesome/

#css #grid