#такое дня

Щас будет немного хардкора. От вас не требуется понимания языка 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

#фишка дня

На мобильных устройствах 100vh работает совсем не так, как хочется: значение включает в себя панели браузера. Но решение есть! Несколько.

Когда-то один только этот пост принёс мне не один десяток подписчиков. Пришло время обновить. Виталий (канал Просто Разработка) принёс из Твиттера Никиты Голубова новое решение и оно прекрасно работает!

Естественно, реальность немного сложнее, чем иллюстрация, но это уже большой шаг вперёд.

#css #100vh #viewport #height

#фишка дня

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

IMG — замещаемый (replaced) элемент. Его (тега) содержимое будет замещено, собственно, изображением. Поэтому ни о каких “добавочных” сущностях речи не идёт.

Единственный случай, когда вы можете добавить псевдоэлементы ::before и ::after на изображение – когда никаких данных не получено. Короче говоря, состояние ошибки.

Вот так:
https://codepen.io/alinaki/pen/BaLaPKy

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

Бонус: если изображению задать цвет/размер шрифта, эти правила применятся к альтернативному тексту.

Бонус 2: можно применить before только к тем изображениям, что действительно не загрузились. Добавьте обработчик события onerror и навесьте на изображение нужный класс: onerror="this.classList.add('error’)”, voila!

#css #js #img

#статья дня

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

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

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

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

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

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

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

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

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

#css #trigonometry #animation

#видео дня

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

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

https://www.youtube.com/watch?v=CMlXUS6e46w

#video #img #png #jpg #webp

#статья дня

На сайте increment.com вышла отличная статья о том, почему CSS получился… таким.

Технический директор W3C Крис Лиллей (Chris Lilley) рассказывает о причинах некоторых неожиданных, необычных и откровенно странных решений, которые привели CSS к тому виду, что мы имеем сейчас.

https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/

#css #w3c

«Неаккуратно как-то», — говорили они…

Подписываясь на крупные промо-проекты, будьте крайне осторожны, котаны :)

#threejs #promo

#ссылка дня

GreenSock, создатели широко известной библиотеки для анимации GSAP, решили закрыть разом все вопросы по работе со скроллом. Эффекты? Нате. Анимация? Нате. Параллакс? Их есть у меня. Анимировать SVG? Без проблем. Даже WebGL завезли.

В общем, они просто взяли и выложили подборку различных эффектов анимации по скроллу, добавили к каждому видео-предпросмотр и ссылку на CodePen.

Меньше слов, больше ссылок:

https://greensock.com/st-demos/

P. S. Библиотека GSAP имеет весьма развесистое лицензирование, но условия бесплатного использования покрывают даже некоторые коммерческие применения. В любом случае, идеи — бесценны.

#gsap #css #js #scroll #animation

#ссылка дня

Вот так вот ноябре 2011 года мы занимались адаптивной вёрсткой.

Три устройства, три разных платформы. Android, webOS и iOS.

И на всех трёх — браузеры, основанные на WebKit. И на Android явно проблемы.

Было забавно наблюдать в последующие года, как Chrome завоёвывал рынок, кастомные WebKit-браузеры на устройствах исчезали (впрочем, китайские телефоны до сих пор ставят что-то своё), а Safari стремительно отставал.

Впрочем, в последние пару лет Safari умудрился догнать и перегнать Chrome по скорости ввода новых фич. Например, вот новости с прошедшей WWDC 2022: https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/

Container Queries, Subgrids, Flexbox Inspector, WebPush на iOS (ого!), Animation offset path…

Неплохо стреляют.

#safari #ios #macos #wwdc

#статья дня

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

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

Обратите внимание: временная шкала рисуется руками. Это очень удобно и наглядно, практически как графическое решение уравнения. Сразу понятны все проблемы. Если интересно — давайте обсудим, как конкретно это реализовывать.

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

#css #svg #gif #animation

#такое дня

Мир изменился. Сегодня хороним Internet Explorer: https://www.theguardian.com/technology/2022/jun/15/microsoft-to-retire-internet-explorer-browser-and-redirect-users-to-edge

Не могу я сказать, что в мире IE трава была зеленее. Вообще нет.

Да, кто-то и дальше будет поддерживать IE11 или даже ниже. Сил вам, котаны.

А мы побежали дальше.

#ie #microsoft