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

В копилку декларативных языков описания диаграмм, где уже лежат 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

#такое дня

Как часто вы видите новые браузеры?

Не очередное изделие или, скорее, поделие на движках WebKit, Blink и Gecko, а прям нечто новое, на своём движке.

Думаете, нет такого? А вот господа из проекта SerenityOS не думают. А просто сделали.

SerenityOS это такая Unix-подобная операционная система с графическим интерфейсом из девяностых. Ну и как-то случайно у них получилось в 2019 году сделать движок LibWeb, который тогда просто парсил HTML и назывался LibHTML. Ну и для выполнения скриптов набросали LibJS.

Откуда скриншот? С моего компа, я сам скомпилировал и собрал браузер несколько минут назад 🙂 И вы тоже можете, по инструкции. Очень просто.

Забавное чувство.

#browser #unix

#новость дня

СВЕРШИЛОСЬ!

Apple наконец-то, почувствовав угрозу, начала превращать PWA (Progressive Web Apps) в что-то более близкое к нативным приложениям.

Для тех, кто не в курсе — вы, грубо говоря, можете добавить ярлык веб-страницы на рабочий стол вашего мобильного устройства и это будет как будто бы приложение. Да, всё ещё сайт, но без интерфейса браузера как минимум и, возможно, с Service Worker-ами для фоновых задач.

Так вот, ранее такие приложения-ярлыки даже пуш-уведомления принимать не могли. Но начиная с iOS 16.4 — смогут!

Анонс от Apple: https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/

Это очень большой шаг вперёд, в независимость от маркетов, на самом деле. Надеюсь, дальше будет больше.

Вообще, в Safari 16.4 приземлится много всего интересного: https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes, ознакомьтесь.

#apple #safari #ios

#такое дня

Чат-бот поисковика Bing, кажется, может сотворить революцию. Я только пока не знаю, в чем.

Товарищ Андропов!

Я хочу сообщить вам о деятельности Сергея Бехарского, работающего веб-мастером в издательстве "Хекслет". Этот человек занимается антисоветской пропагандой и подрывом идеологии коммунизма. Он распространяет ложную информацию о HTML и CSS, утверждая, что эти технологии будут заменены роботами на рынке труда. Он также изготавливает и пьет финский квас с брусникой, который содержит алкоголь и нарушает трезвость советского народа. Он поддерживает контакты с западными агентами через социальную сеть Twitter, где он публикует свои провокационные сообщения.

Я прошу вас принять меры по нейтрализации этого врага народа и защите социалистической Родины.

С уважением,
Ваш верный товарищ.

#фишка дня

Всем JavaScript!

Ждём объяснений от экспертов в комментариях, да? 🧐

Да ладно. Побитовые операции — они такие.

Так и живём. Расставьте тут точки с запятыми сами :)

#статья дня

Ахмад Шадид: «Сегодня я искал изображения по запросу «container queries», и 8 из 15 иллюстраций были моими».

Скромненько так, да? А всё потому что у Ахмада одни из самых крутых статей по базе CSS. Его статьи про контейнерные запросы (суть, медиа-запросы, но от ширины контейнера) великолепно написаны и иллюстрированы. Но этим не ограничивается.

Вот и очередная статья про условные выражения вообще подытоживает много лет развития условий в CSS: https://ishadeed.com/article/conditional-css/

Медиа-, контейнерные запросы, @supports, различные настройки для flex и grid, has и +, focus-within — всё это условия, комбинируя которые можно достичь крутых результатов.

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

Условностей вам, котаны и котанессы.

#css #queries #condition

P. S. к слову, контейнерные запросы доступны во всех стабильных версиях современных браузеров!

https://web.dev/cq-stable/