Я не могу это не форварднуть 😂

Тем временем процесс релиза:

🔥-🌚-🫦\
🥵-😭-😢---😱-🤨-💩-🥳
🤦‍♂-🤬-🍆/

#ссылка дня

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

Как же обходились? Ну, например, генерировали картинки, используя библиотеки FreeType и (для PHP) GD2/Imagemagick.

К слову, это до сих пор валидный кейс, соответствующие плагины для популярных CMS вполне себе поддерживаются: https://www.drupal.org/project/textimage

Просто зачастую нет никакого смысла тащить целый шрифт на фронт ради пары заголовков. Да и даже его часть — тоже.

Естественно, всегда можно резать набор глифов (символов) на лету... например, утилитами вроде https://opentype.js.org/ или FontForge в командном режиме, но каждый ли проект в этом нуждается?

А, ну и как же, нельзя забывать о вкладе Adobe Flash в поддержку кастомных шрифтов! Была технология sIFR, которая генерировала маленькие Flash-апплеты на месте, где должен был располагаться ваш заголовок.

Или аналогичная — Cufon, но уже на связке JS/SVG или VRML (векторный язык в IE).

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

#font #old

#фишка дня

...от Никиты Голубова aka @midfilecrisis в Twitter.

В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.

Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.

Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

...почти 4 миллиона установок, ик.

#css #webstorm #phpstorm #vscode #plugin #extension

#такое дня

Меня одного задолбали недоделанные технологии?

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

Щас поясню. Примеры будут очень простые, про скроллинг. Но показательные. Дальше предложите сами.

1. position: sticky

Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.

Что мы делаем? Конечно же считаем скролл ручками!

2. element.scrollIntoView

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

Вот только где offset, я спрашиваю? Почему нет такой простой вещи?

Но ведь есть scroll-margin-top, скажете вы...

Ага, вроде и есть. Но у меня нифига не вышло. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?

Что мы делаем? А опять ручками:

const line = document.querySelector(`[data-id=${id}]`);

if (line) {
  const p = line.getBoundingClientRect();
  window.scrollTo(p.left, p.top + window.scrollY - 40);
}

Раздражает. Зачем таким вообще заниматься?

Ну выход на самом деле только один — участвовать в обсуждениях. Или заткнуться.

#css #hate

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

В копилку декларативных языков описания диаграмм, где уже лежат Mermaid и PlantUML, встречайте: D2.

https://d2lang.com/

…интересно, это реверанс в сторону D3.js? 🤔

Так или иначе, я предпочитаю использовать языки описания диаграмм визуальным инструментам. Наверное, профессиональная деформация.

…или просто надо перестать использовать тачпад и вернуться на мышь. Замечали, что мысли иначе работают?)

#diagram #language

#тред дня

Не так давно в нашем чате был мини-срач на тему SPA/Jamstack/SSR/SSG vs классические методы разрабоки сайтов.

Не то чтоб я собрался его повторять, но вот интересный обзор ситуации с экскурсом в историю от Кирилла Мокевнина.

В этот раз я не дублирую весь тред, он огромный. Но ссылку на Threadreader всё равно прикладываю, многим так проще.

Крайне рекомендую к ознакомлению тем, кто других подходов-то и не знал никогда и вошёл в мир веба с ноги CRA.

#spa #holywar

#фишка дня

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

Но что если вы что-то сохранили раз, два, три, десять... захотели отменить одно из старых изменений — а коммитов-то не было?

Wes Bos подсказывает, что на помощь придёт инструмент Timeline в VS Code!

Ну и собственно фишка эта появилась в VS Code в начале апреля. В Твиттере разработчиков есть большой разбор нововведений, и этого тоже: https://twitter.com/code/status/1511463346167496706

Надеюсь, вам не жалко нескольких десятков килобайт на диске ради возможности путешествий во времени :)

P. S. из чата пишут, что в в различных IDE от JetBrains тоже имеется Local History. И хранит он изменения прилично долго. Так что, конечно, фишка не уникальна.

#vscode #feature #timeline #бородач

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

А что мы с вами пропустили? А выход публичной беты десктоп-приложения HTTPie пропустили!

HTTPie начинался как консольный HTTP-клиент. Наш ответ curl'у, так сказать. Чуть более человечный, чуть менее стандарт индустрии.

Почему надо предпочесть его — Postman'у и Thunder Client'у?

С Postman ответ очевиден — он стал монстром, пре- и пост-скрипты мне не нужны, интерфейс запутан, управление env-переменными ужасно.

Thunder... просто бесит.

Так вот, приложение: https://httpie.io/product

Обзор: https://twitter.com/httpie/status/1555557706538303488

Рассказ Злых Марсиан о том, как они его дизайнили: https://evilmartians.com/chronicles/ui-design-for-httpie-macos-vibes-for-the-api-testing-client

Забавно, что статья про дизайн — вторая из серии «Как сделать Electron-приложение максимально десктопным». Первая, про основные правила: https://evilmartians.com/chronicles/how-to-make-absolutely-any-app-look-like-a-macos-app

Короче, я HTTPie уже использую и вам рекомендую, котаны.

#httpie #client #api

#статья дня, предложка от нашего подписчика glebcha:

Изумительная детективная история о том, как производительность eslint улучшали.

В сюжете:
- ставший привычным случай замены на классический цикл for
- страх и ненависть к полифилам с их последующим удалением из процесса сборки
- исследование/оптимизация "лентяек" (в этом случае была библиотека esquery, которая предоставляет DSP для обращения к AST через css-подобные селекторы)
- «сложности перевода», точнее, как AST тайпскрипта приводить к формату estree и насколько это затратно (использование бабеля с пресетом тайпскрипта существенно ускорило процесс в ущерб типобезопасности).

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

Читаем: https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3

Автор статьи — член кор-команды Preact. Третья из цикла, если что. Там много интересного.

#подписчик #eslint

#инструмент дня, тянущий на #открытие дня

Я тут изучал возможности сервиса Datadog, особенно в части Session Replay. Что это? Ну, собственно, запись пользовательских действий в вашем приложении.

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

А Datadog раскрывает источники. Как оказалось, их средство записи — открытый проект https://www.rrweb.io/

Чем хорошо? Ну, оно, на самом деле, не записывает никакого видео!

Средство записи делает слепок текущего состояния DOM, кодирует его, архивирует и шлёт вместе с информацией о векторе направления курсора!

А потом просто отправляет разницу с новым слепком.

Вы понимаете, что это значит? Что нагрузка на сеть и компьютер минимальная, никто не гоняет картинки и всё то, что можно восполнить.

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

Офигенная штука, это вам не жисоны гонять. Хотя, по факту...

#js #tool

#заметка дня

Минус это не дефис! Минус это, простите, минус. Он такой не просто так, будете использовать дефис — табличные данные будут скакать.

Как его поставить?

Ну, на macOS это:
- дефис: -
– минус: option + -
— тире: option + shif + -

У кого-то на клавиатуре Option это Alt.

Кто на винде и линуксе, подскажите ваши сочетания. Я уже не помню, что там с Compose.

Александра Королькова напомнила об этом в своём посвященном новому изданию Живой типографики канале. А старое издание все так же доступно бесплатно.

#typography

Upd.

На самом деле, как верно заметили в комментариях, мы ставим таким образом короткое тире.
https://www.compart.com/en/unicode/U+0150

Минус… он другой:
https://www.compart.com/en/unicode/U+2212

Разницу можно почувствовать в комментариях. Но она настолько мизерная, что ею, учитывая простоту печати короткого тире, можно пренебречь.

Или используйте типографы.

#видео дня

Вы ждали этого. Вы просили. И вот время пришло.

Вышла документалка про React.js!

https://youtu.be/8pDqJVdNa44

Полтора часа превосходства и превозмогания!

Не, ну а что. Про Vue.js было, про GraphQL было. Пришло время!

#react

#видео дня

Первым комментарием к предыдущему посту было: «Подумал что дока из бетки вышла. 😁»

И вообще, это весьма забавно. Бета-версия документации React.js засиделась уже слишком долго. Я вообще, мягко говоря, удивлён, как React прошёл через переход классы — хуки с куском камня вместо документации. Ну да ладно.

Так что если что, доки по реакту читаем тут: https://beta.reactjs.org/

Всё ещё неполное, но всё ещё лучше.

Теперь к видео. Меня спросили, что за документалки по Vue.js и GraphQL.

Редакция отвечает.

Vue.js: https://www.youtube.com/watch?v=OrxmtDw4pVI

GraphQL: https://www.youtube.com/watch?v=783ccP__No8

На том канале (Honeypot) вообще очень много документалок и прочих вдохновляющих видео. Не только для фронтендеров.

По Ember.js хочу...

#video #vue #react

Upd. там и про Эмбер есть, кек. Моя вечная любовь:

https://www.youtube.com/watch?v=Cvz-9ccflKQ

#игра дня

Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?

Вы по адресу!

Интерактивное руководство: https://bezier.method.ac/

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

#vector #bezier #tool #learn

#библиотека дня

Помните, мы когда-то с вами проматывали видео программно?

Ну вот же, чо вы: https://t.iss.one/htmlshit/864

Так вот. Я всё думал, куда же такое можно применить... а вот создатели сегодняшней библиотеки долго не думали.

Встречайте: https://scrollyvideo.js.org/

Зачем надо? Ну чтобы эффектно по лендингу слоганы расставить, сильно не заморачиваясь с эффектами.

Красиво, дёшево, практично. Что ещё нужно? Берём, используем.

Правда, видео у них что-то долго в примере грузилось...

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

#video #scroll

#ссылка дня

Среди новичков (да и не только) зачастую отсутствует понимание того, как же всё-таки выглядят вообще все HTML-теги. Но это-то ладно.

А вот для чего нужен normalize? sanitize? reset? bootstrap? Что происходит-то вообще?

Почему нельзя просто на одной странице всё наглядно показать и сравнить?!

Так можно!

HTML5 Kitchen Sink. Всё в кучу!

https://github.com/dbox/html5-kitchen-sink/

Заходим, переключаем, сравниваем.

Я вот, не так давно, взял эту штуку в качестве мока для тестов, чтобы HTML sanitize проверить. Ничего лучше нет. Ну, для этой цели.

А вот для проверки на XSS вам нужен Big List of Nasty Strings. Что-то такое вот: https://t.iss.one/htmlshit/1537

#html #css #reset #normalize #бородач

#драма дня

Итак, в OSS-сообществе происходит драма, которая, на самом деле, назревала и даже уже рванула очень давно.

Знаете ли вы, кто такой Денис Пушкарёв?

А что если я вам скажу, что его код, скорее всего, прямо сейчас не только в вашем проекте, но и на половине популярнейших сайтов интернета?

Всё потому что он ментейнер одной из наиболее мощных и проработанных библиотек полифиллов core-js.

Тащил (ментейнил) он библиотеку де-факто единолично. Денег почти не получал. Потом в его жизни случился трагический случай, из-за которого его репутация сильно пошатнулась. И война добила и поставила на грань его возможность работы над библиотекой вообще.

Почитайте: https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md

И давайте ещё раз задумаемся о том, как хрупка современная разработка и какие люди вообще могут руководить популярнейшими проектами; буквально эксплуатирующие разработчиков-одиночек.

Почему я выразился так резко? Потому что в итоге больше всего поддежки проект получал от Bower, который сам-то уже на обочине. А не от Babel, который от core-js зависит прямо.

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

А хейтеры идут нахуй, как всегда. Нельзя такими быть.

#js #drama #oss

#codepen дня

Есть тут любители механических клавиатур, кому на работе или жена запрещает использование из-за клацанья?

I got you!

Глядите, какая штука, симулятор механической клавиатуры:
https://codepen.io/ykadosh/pen/bGKgxbe

Набираете циферки на своей — клацает экранная. Ну разве не прелесть?

Прелесть.

#keyboard #sound

#статья дня

Задумывались ли вы о то, как нарисовать веревку? Канат, если точнее.

А как нарисовать веревку по заданному контуру? В SVG, короче.

А вот Станко, автор блога MuffinMan, задумался. И нарисовал. Сначала в блокноте, все как я люблю 😻

Собственно, статья: https://muffinman.io/blog/draw-svg-rope-using-javascript/

Снабжена подробными инструкциями, кодом, иллюстрациями и математикой. Каждый блок статьи предваряется картинкой с текущим статусом. И в конце будет генератор веревок — собственно, цель повествования.

Красивое.

#svg #js #math