#Пульс_веб_платформы 08.03.2024
Новости
- вышел TypeScript 5.4: нового с RC версии почти ничего не подвезли, но там было много всего хорошего, можно обновляться
- вышел Parcel v2.12.0: теперь умеет прекомпилировать JS-функции в билд-тайме вместо включения в общий бандл (вдохновлено макросами из Bun); на сайте появился REPL (интерактивный редактор с отображением результата); теперь под капотом Lightning CSS бандлит CSS-файлы; возможность вручную сконфигурировать shared-бандлы
- вышел Babel 7.24.0: теперь поддерживает JSON modules imports, а также последнюю актуальную версию декораторов
- в Safari 17.4 появится поддержка нового «пропатченного» чекбокса — переключателя (<input type=checkbox switch checked> с псевдоэлементами ::thumb и ::track), также появились вертикальные контролы форм, <hr> в <select>, обновление движка Inline Layout, работающий align-content для таблиц и блоков (не только гридов и флексбоксов), @scope и :scope, Promise.withResolvers, Object.groupBy и Map.groupBy и кое-что ещё
- вышла PixiJS v8: либа для 2d анимации с десятилетней историей хорошо бустанулась по перфу, подружилась с WebGPU, изменила структуру пакета, получила обновления в графических, векторных и текстовых API
- вышла бета Million Lint: интересный концепт линтера перфоманса React-приложения, который в реалтайме показывает в коде на манер eslint количество ререндеров и время
- React Compiler aka Forget (автомемоизатор) не будет включён в релиз React 19
Проекты
- readability — JS-версия браузерного режима для чтения из Firefox: это когда остаётся только текст, а стили и оформление с баннерами уходит
- embla-carousel — минималистичная JS-карусель, без зависимостей, для доп функциональности подключаются плагины
- pkgx — запускальщик всего здесь и сейчас без установкии смс, что не умеет npx, например, мождно запустить ноду pkgx node@16 или бан pkgx bun run
- turbo repo — тула для организации более быстрой работы команд запуска и сборки в монорепах (yarn/npm/pnpm устанавливает пакеты, turbo запускает с кешированием)
- capo.js — инструмент для анализа правильности в порядке тегов в <head>: покажет, в какой последовательности расставить теги будет правильнее
Статьи и демки
JS
- 4 издание прекрасной книги про JS — Eloquent JavaScript — для программистов любых возрастов и вероисповедания
- первые отзывы о JSR — альтернативному npm пакетному менеджеру от создателей deno: пока очень нишево, привязано к deno и немного чем отличается (TS-first, only ESM-модули), но, тем не менее, конкуренция — всегда хорошо
- если вы, как и автор статьи, удивляетесь, почему у однострочных пакетов типа is-number столько скачиваний на npm, то бывает это сам автор раздувает использование своей либы через другие пакеты (naturally, пакеты с пакетами)
- как на Performance API собрать (на коленке) основные пользовательские метрики перфа: Largest Contentful Paint, First Contentful Paint, Cumulative Layout Shift, Interaction To Next Paint, Long Animation Frames
CSS
- реакт реактом, а переносить текст со строчки на строчку всё равно нужно — гайд по word-break, oveflow-wrap, hyphens, <wbr>, ­ (с последней парочкой нужно быть аккуратными)
- скролл-анимация триггерит смену кастомного свойства --animate: true, а по нему применяется Style Query @container style(--animate: true), который анимирует появившийся во вьюпорте элемент — самый блидинг из возможных эджей
- хочешь не хочешь, а рано или поздно придёт она — задача на стилизацию печатных страниц, в этом случае пригодится детальный гайд по @page и @media print в разных вариациях
Платформа
- обширный гайд по скриншотному тестированию с Playwright: самое ценное, пожалуй, что есть рецепт по запуску таких тестов в CI/CD, так как локально, как правило, скриншоты будут немного отличаться в зависимости от ОС
- опыт команды Самолёта по оптимизации перфа: есть довольно полный чеклист кандидатов на оптимизацию
- из серии «не боги горшки обжигают»: понаблюдать за редизайном сайта nodejs можно тут: новый сайт, макет, обсуждение
Новости
- вышел TypeScript 5.4: нового с RC версии почти ничего не подвезли, но там было много всего хорошего, можно обновляться
- вышел Parcel v2.12.0: теперь умеет прекомпилировать JS-функции в билд-тайме вместо включения в общий бандл (вдохновлено макросами из Bun); на сайте появился REPL (интерактивный редактор с отображением результата); теперь под капотом Lightning CSS бандлит CSS-файлы; возможность вручную сконфигурировать shared-бандлы
- вышел Babel 7.24.0: теперь поддерживает JSON modules imports, а также последнюю актуальную версию декораторов
- в Safari 17.4 появится поддержка нового «пропатченного» чекбокса — переключателя (<input type=checkbox switch checked> с псевдоэлементами ::thumb и ::track), также появились вертикальные контролы форм, <hr> в <select>, обновление движка Inline Layout, работающий align-content для таблиц и блоков (не только гридов и флексбоксов), @scope и :scope, Promise.withResolvers, Object.groupBy и Map.groupBy и кое-что ещё
- вышла PixiJS v8: либа для 2d анимации с десятилетней историей хорошо бустанулась по перфу, подружилась с WebGPU, изменила структуру пакета, получила обновления в графических, векторных и текстовых API
- вышла бета Million Lint: интересный концепт линтера перфоманса React-приложения, который в реалтайме показывает в коде на манер eslint количество ререндеров и время
- React Compiler aka Forget (автомемоизатор) не будет включён в релиз React 19
Проекты
- readability — JS-версия браузерного режима для чтения из Firefox: это когда остаётся только текст, а стили и оформление с баннерами уходит
- embla-carousel — минималистичная JS-карусель, без зависимостей, для доп функциональности подключаются плагины
- pkgx — запускальщик всего здесь и сейчас без установки
- turbo repo — тула для организации более быстрой работы команд запуска и сборки в монорепах (yarn/npm/pnpm устанавливает пакеты, turbo запускает с кешированием)
- capo.js — инструмент для анализа правильности в порядке тегов в <head>: покажет, в какой последовательности расставить теги будет правильнее
Статьи и демки
JS
- 4 издание прекрасной книги про JS — Eloquent JavaScript — для программистов любых возрастов и вероисповедания
- первые отзывы о JSR — альтернативному npm пакетному менеджеру от создателей deno: пока очень нишево, привязано к deno и немного чем отличается (TS-first, only ESM-модули), но, тем не менее, конкуренция — всегда хорошо
- если вы, как и автор статьи, удивляетесь, почему у однострочных пакетов типа is-number столько скачиваний на npm, то бывает это сам автор раздувает использование своей либы через другие пакеты (naturally, пакеты с пакетами)
- как на Performance API собрать (на коленке) основные пользовательские метрики перфа: Largest Contentful Paint, First Contentful Paint, Cumulative Layout Shift, Interaction To Next Paint, Long Animation Frames
CSS
- реакт реактом, а переносить текст со строчки на строчку всё равно нужно — гайд по word-break, oveflow-wrap, hyphens, <wbr>, ­ (с последней парочкой нужно быть аккуратными)
- скролл-анимация триггерит смену кастомного свойства --animate: true, а по нему применяется Style Query @container style(--animate: true), который анимирует появившийся во вьюпорте элемент — самый блидинг из возможных эджей
- хочешь не хочешь, а рано или поздно придёт она — задача на стилизацию печатных страниц, в этом случае пригодится детальный гайд по @page и @media print в разных вариациях
Платформа
- обширный гайд по скриншотному тестированию с Playwright: самое ценное, пожалуй, что есть рецепт по запуску таких тестов в CI/CD, так как локально, как правило, скриншоты будут немного отличаться в зависимости от ОС
- опыт команды Самолёта по оптимизации перфа: есть довольно полный чеклист кандидатов на оптимизацию
- из серии «не боги горшки обжигают»: понаблюдать за редизайном сайта nodejs можно тут: новый сайт, макет, обсуждение
🔥9👍7❤2
Нанесения пользы пост
В 2024 году исполнилось 10 лет, как я работаю в эдтехе. Те, кто знают меня давно, в курсе, что я «стоял у истоков» HTML Academy. И если вы когда-нибудь участвовали в движухах Академии, то мы с вами так или иначе «пересекались»: в тренажёрах, интенсивах или наставничестве. Сейчас я продолжаю работать в обучении, но теперь уже в школьном сегменте, и лидю продуктовую команду в одном из образовательных подразделений VK: мы делаем инструменты для учителей, методистов и учеников, чтобы они они могли учить и учиться более современно.
В образование меня привело желание наносить пользу в сфере, в которой я разбираюсь — веб-технологиях. Блог, в котором вы сейчас читаете этот пост, уже, кажется, четвёртая или пятая его реинкарнация. И в каждом случае я доношу до читателей примерно один и тот же мотив: веб-платформа — одна из крутейших технологий мира; веб-технологии широки, разнообразны и с ними очень увлекательно работать; нет пределов совершенству на пути веб-разработчика, можно копать вглубь, вширь и чем дальше заходишь, тем интереснее становится.
Почему я веду блог? Мне дико нравится делиться знаниями, интересными находками и доносить до людей вот эту самую исследовательскую искру, которая не даёт стухнуть в рутине вдолгую.
Зачем я веду блог? Я руководствуюсь идеей, что открытость, шеринг знаний создаёт условия для развития доверия и понимания, от которых в итоге выигрывают все в игре с ненулевой суммой. Короче, это мой вклад, который делает мир чуточку лучше.
Когда я создал блог в Телеге, я сразу решил, что в нём не будет рекламы. На мой взгляд это не совсем честно по отношению к читателям продавать их внимание, и это конфликтует с идеей открытости и доверия. Туда же идут разделение контента на платную и бесплатную части (из-за пейволла большинство не увидит годный контент), а также подписочная модель (рано или поздно начинаешь тратить деньги впустую).
И, получается, что более честно просто попросить у читателей поддержки. Это мотивирует меня продолжать развивать блог и стартовать новые познавательные движухи в рамках блога. Отдача перезаряжает и добавляет сил на новые свершения!
Надеюсь на вашу поддержку ❤️🔥
В 2024 году исполнилось 10 лет, как я работаю в эдтехе. Те, кто знают меня давно, в курсе, что я «стоял у истоков» HTML Academy. И если вы когда-нибудь участвовали в движухах Академии, то мы с вами так или иначе «пересекались»: в тренажёрах, интенсивах или наставничестве. Сейчас я продолжаю работать в обучении, но теперь уже в школьном сегменте, и лидю продуктовую команду в одном из образовательных подразделений VK: мы делаем инструменты для учителей, методистов и учеников, чтобы они они могли учить и учиться более современно.
В образование меня привело желание наносить пользу в сфере, в которой я разбираюсь — веб-технологиях. Блог, в котором вы сейчас читаете этот пост, уже, кажется, четвёртая или пятая его реинкарнация. И в каждом случае я доношу до читателей примерно один и тот же мотив: веб-платформа — одна из крутейших технологий мира; веб-технологии широки, разнообразны и с ними очень увлекательно работать; нет пределов совершенству на пути веб-разработчика, можно копать вглубь, вширь и чем дальше заходишь, тем интереснее становится.
Почему я веду блог? Мне дико нравится делиться знаниями, интересными находками и доносить до людей вот эту самую исследовательскую искру, которая не даёт стухнуть в рутине вдолгую.
Зачем я веду блог? Я руководствуюсь идеей, что открытость, шеринг знаний создаёт условия для развития доверия и понимания, от которых в итоге выигрывают все в игре с ненулевой суммой. Короче, это мой вклад, который делает мир чуточку лучше.
Когда я создал блог в Телеге, я сразу решил, что в нём не будет рекламы. На мой взгляд это не совсем честно по отношению к читателям продавать их внимание, и это конфликтует с идеей открытости и доверия. Туда же идут разделение контента на платную и бесплатную части (из-за пейволла большинство не увидит годный контент), а также подписочная модель (рано или поздно начинаешь тратить деньги впустую).
И, получается, что более честно просто попросить у читателей поддержки. Это мотивирует меня продолжать развивать блог и стартовать новые познавательные движухи в рамках блога. Отдача перезаряжает и добавляет сил на новые свершения!
Надеюсь на вашу поддержку ❤️🔥
❤11👍5🔥5
Веб-платформа pinned «Нанесения пользы пост В 2024 году исполнилось 10 лет, как я работаю в эдтехе. Те, кто знают меня давно, в курсе, что я «стоял у истоков» HTML Academy. И если вы когда-нибудь участвовали в движухах Академии, то мы с вами так или иначе «пересекались»: в тренажёрах…»
#Пульс_веб_платформы 15.03.2024
Новости
- в опенсорс выложен Rolldown, замена Rollup на Rust для Vite: радует, что обратно совместим с Rollup, но пока ещё в активной разработке, не для продакшена
- вышла Node v21.7.0: встроенная стилизация текста console.log(util.styleText('bold', 'text')), загрузка и парсинг переменных окружения process.loadEnvFile(path) и util.parseEnv(content), поддержка многострочных значений в .env файлах
- вышел Biome v1.6: поддержка расширений файлов vue, astro, svelte; новые настройки форматтера; лёгкая миграция с Prettier
- вышел Storybook 8: встроенные визуальные тесты, поддержка React Server Components, обновления интерфейса и ускорение работы
- INP теперь официальная метрика Core Web Vitals, FID будет задепрекейчена в сентябре 2024
- Astro выпустили Astro DB, адаптированную SQL-бд на основе libsql
Проекты
- utopia — система «резиновой» типографики, отступов, сетки: позволяет задать минимальное и максимальное разрешение интерфейса, а также количество промежуточных шагов между ними и получить готовые CSS-переменные для использования
- device-simulator — симуляция девайсов в браузере для тестирования интерфейсов: не browserstack, скорее переосмысление стандартных браузерных дев-тулзов (device toolbar), помощнее, есть возможность показа нескольких устройств одновременно
- gravity-ui — каждое поколение яндексоидов создаёт собственный UI-кит, и этот выглядит очень даже прилично: есть дизайн-система, Figma и токены, позаботилились о доступности, свои иконки; остаётся только понять, какой из двух Яндексов будет его дальше овнить
- react-geiger — счётчик Гейгера для React-приложения: если что-то рендерится долго и часто, то вы это услышите
- jsoncanvas — спецификация и формат файлов JSON Canvas для имплементации бесконечных досок аля Miro, Obsidian и тд
Статьи и демки
JS
- если долго сидеть у реки, то рано или поздно по ней проплывёт заброшенный JS-проект, так как его купили крупняки, уволили сотрудников и забили (речь о Gatsby, если что)
- работа с относительными datetime-ами с помощью Intl.RelativeTimeFormat (давно поддерживаемая в браузерах)
- создание доступных компонентов форм на React: кнопки, лейблы, филдсет, плейстхолдеры, фокус и навигация с клавиаутры, отображение ошибок
- лучшие практики по использованию React Testing Library: тестирование доступности компонентов, реализация смоук-тестов
- make macros great again: теперь подход с прекомпилированными в билд-тайме кусочками JS-кода доступен не только в parcel, но и в webpack, vite и остальных
CSS
- статьи про новые CSS-фичи читаются как научная фантастика: красиво, интересно, когда-то это будет, но пока полностью не работает; вот и в этом материале рассказывается, как собрать ванильные модалки и «тосты»: <dialog> для модальных всплывашек, popover — для немодальных всплывашек, нативная стилизация элементов и показ/сокрытие, стартовая анимация @starting-style и даже anchor positioning для показа в определённом месте интерфейса
- стилизация текста: глитч-эффект, множественные тени и SVG-фильтры (осторожно, можно случайно стать КМС по text-shadow)
- небольшие рецепты из жизни по использованию :has(): изменение лейаута, если в контейнере есть определённый элемент; подсветка контейнера, если внутри есть :target; затемнение соседей при ховере на элементе
- предложение от Ли Веру сделать из кастомных свойств своего рода «объекты»: --color-green: { base: red; 100: green; 200: blue}; зная, что благодаря Ли в CSS уже появилось много ништяков, глядишь и этот тоже затащат
- использование color-mix() для создания палитр: ещё один кусок платформа откусила от sass
HTML
- для записи кавычек в тексте alt используйте одинарные кавычки ' или "
Платформа
- в Chrome 122 появилась улучшенная поддержка Speculation Rules API: это переосмысленный, более выразительный и автоматизированный последователь link="prerender" с исчерпывающим описанием, какие ресурсы и в какой очерёдности прелоадить и пререндерить
- 35 лет назад Тим Бернес Ли описал «спецификацию интернета» — Information Management: A Proposal
@web_platform | Поддержать канал 🤝
Новости
- в опенсорс выложен Rolldown, замена Rollup на Rust для Vite: радует, что обратно совместим с Rollup, но пока ещё в активной разработке, не для продакшена
- вышла Node v21.7.0: встроенная стилизация текста console.log(util.styleText('bold', 'text')), загрузка и парсинг переменных окружения process.loadEnvFile(path) и util.parseEnv(content), поддержка многострочных значений в .env файлах
- вышел Biome v1.6: поддержка расширений файлов vue, astro, svelte; новые настройки форматтера; лёгкая миграция с Prettier
- вышел Storybook 8: встроенные визуальные тесты, поддержка React Server Components, обновления интерфейса и ускорение работы
- INP теперь официальная метрика Core Web Vitals, FID будет задепрекейчена в сентябре 2024
- Astro выпустили Astro DB, адаптированную SQL-бд на основе libsql
Проекты
- utopia — система «резиновой» типографики, отступов, сетки: позволяет задать минимальное и максимальное разрешение интерфейса, а также количество промежуточных шагов между ними и получить готовые CSS-переменные для использования
- device-simulator — симуляция девайсов в браузере для тестирования интерфейсов: не browserstack, скорее переосмысление стандартных браузерных дев-тулзов (device toolbar), помощнее, есть возможность показа нескольких устройств одновременно
- gravity-ui — каждое поколение яндексоидов создаёт собственный UI-кит, и этот выглядит очень даже прилично: есть дизайн-система, Figma и токены, позаботилились о доступности, свои иконки; остаётся только понять, какой из двух Яндексов будет его дальше овнить
- react-geiger — счётчик Гейгера для React-приложения: если что-то рендерится долго и часто, то вы это услышите
- jsoncanvas — спецификация и формат файлов JSON Canvas для имплементации бесконечных досок аля Miro, Obsidian и тд
Статьи и демки
JS
- если долго сидеть у реки, то рано или поздно по ней проплывёт заброшенный JS-проект, так как его купили крупняки, уволили сотрудников и забили (речь о Gatsby, если что)
- работа с относительными datetime-ами с помощью Intl.RelativeTimeFormat (давно поддерживаемая в браузерах)
- создание доступных компонентов форм на React: кнопки, лейблы, филдсет, плейстхолдеры, фокус и навигация с клавиаутры, отображение ошибок
- лучшие практики по использованию React Testing Library: тестирование доступности компонентов, реализация смоук-тестов
- make macros great again: теперь подход с прекомпилированными в билд-тайме кусочками JS-кода доступен не только в parcel, но и в webpack, vite и остальных
CSS
- статьи про новые CSS-фичи читаются как научная фантастика: красиво, интересно, когда-то это будет, но пока полностью не работает; вот и в этом материале рассказывается, как собрать ванильные модалки и «тосты»: <dialog> для модальных всплывашек, popover — для немодальных всплывашек, нативная стилизация элементов и показ/сокрытие, стартовая анимация @starting-style и даже anchor positioning для показа в определённом месте интерфейса
- стилизация текста: глитч-эффект, множественные тени и SVG-фильтры (осторожно, можно случайно стать КМС по text-shadow)
- небольшие рецепты из жизни по использованию :has(): изменение лейаута, если в контейнере есть определённый элемент; подсветка контейнера, если внутри есть :target; затемнение соседей при ховере на элементе
- предложение от Ли Веру сделать из кастомных свойств своего рода «объекты»: --color-green: { base: red; 100: green; 200: blue}; зная, что благодаря Ли в CSS уже появилось много ништяков, глядишь и этот тоже затащат
- использование color-mix() для создания палитр: ещё один кусок платформа откусила от sass
HTML
- для записи кавычек в тексте alt используйте одинарные кавычки ' или "
Платформа
- в Chrome 122 появилась улучшенная поддержка Speculation Rules API: это переосмысленный, более выразительный и автоматизированный последователь link="prerender" с исчерпывающим описанием, какие ресурсы и в какой очерёдности прелоадить и пререндерить
- 35 лет назад Тим Бернес Ли описал «спецификацию интернета» — Information Management: A Proposal
@web_platform | Поддержать канал 🤝
🔥8👍6❤1
#Лаборатория_веб_платформы
Конечные автоматы
Когда создаётся некая система, обычно естественно думать о том, что эта система будет делать, какие выполнять действия, что она поможет достичь. То есть продумываются целевые действия пользователя, что он он будет делать, куда переходить, какие кнопки нажимать.
В целом, это ок подход. Он хорошо работает на прямолинейных сценариях с несложной логикой. В случае системы со сложным поведением, если её спроектировать исходя из действий, то тогда в программе начнут появляться «режимы работы», «флаги» isSomething… и хитроспетения условий с комбинациями значений этих флагов.
Если ветвлений и состояний более 8-10, то тогда сложно создать и держать в голове ментальную модель, код на флагах и ифах превращается в плохо структурированную кашу, в которой легко допустить ошибку или логическую дыру.
В этом случае приходит на помощь проектирование системы исходя из её состояний и переходов между ними, а не из выполняемых функций. Такая система и есть конечный автомат, то есть система с конечным числом состояний.
Самый простой автомат состоит из двух состояний: выключено → включено. Чтобы перейти из одного состояний в другое вызывается action. Например, человек «спит» → вызывается action «пробудиться» → человек «бодрствует».
Ключевая фишка такого подхода к описанию работы системы — можно на одной схеме изобразить все состояния и переходы между ними в виде такого «пошагового визарда», в котором видно всё одновременно.
На фронте для реализации конечных автоматов есть классная либа xState. Автор либы из Microsoft, и она появилась, чтобы было проще поддерживать редактор workflows в Azure. На самом деле такое случается сплошь и рядом, когда появляется некая развесистая система, в которой могут разобраться только её авторы, так как в неё сложно въехать, объять умом целиком. И если есть общая диаграмма работы, то больше шансов, что человек с улицы сможет её раскурить.
Например, посмотрите на вот эту схему, попробуйте нажать «Simulate» в правом верхнем углу и прогоните программу от начала до конца. Так уже сходу и стало более-менее понятно, что в ней происходит?
А теперь если добавить, что из этой схемы сразу же генерится и код автомата, который можно скопировать в проект, допилить напильником и он будет работать, то получается прям бомба-пушка. Кстати, для VS Code есть визуализация прям внутри редактора, оч удобно прочекать, где куда и что идёт, это «живая документация».
Что ещё интересного есть в xState. Между состояниями могут быть guards, которые в зависимости от результата поведут в одну сторону или в другую. Поддерживается TS и асинхронная логика. Есть интеграция с React, Vue, Svelte. Также авторы стали развивать либу в сторону actor-ов: это такой архитектурный паттерн, когда система представляется неким действующим лицом, актором, которое выполняет действия, может взаимодействовать с другими акторами и тд.
В общем, если у вас уже запутанная система или вы собираетесь заниматься системой с множественными состояниями, советую приглядеться к xState ✌️.
@web_platform | Поддержать канал 🤝
Конечные автоматы
Когда создаётся некая система, обычно естественно думать о том, что эта система будет делать, какие выполнять действия, что она поможет достичь. То есть продумываются целевые действия пользователя, что он он будет делать, куда переходить, какие кнопки нажимать.
В целом, это ок подход. Он хорошо работает на прямолинейных сценариях с несложной логикой. В случае системы со сложным поведением, если её спроектировать исходя из действий, то тогда в программе начнут появляться «режимы работы», «флаги» isSomething… и хитроспетения условий с комбинациями значений этих флагов.
Если ветвлений и состояний более 8-10, то тогда сложно создать и держать в голове ментальную модель, код на флагах и ифах превращается в плохо структурированную кашу, в которой легко допустить ошибку или логическую дыру.
В этом случае приходит на помощь проектирование системы исходя из её состояний и переходов между ними, а не из выполняемых функций. Такая система и есть конечный автомат, то есть система с конечным числом состояний.
Самый простой автомат состоит из двух состояний: выключено → включено. Чтобы перейти из одного состояний в другое вызывается action. Например, человек «спит» → вызывается action «пробудиться» → человек «бодрствует».
Ключевая фишка такого подхода к описанию работы системы — можно на одной схеме изобразить все состояния и переходы между ними в виде такого «пошагового визарда», в котором видно всё одновременно.
На фронте для реализации конечных автоматов есть классная либа xState. Автор либы из Microsoft, и она появилась, чтобы было проще поддерживать редактор workflows в Azure. На самом деле такое случается сплошь и рядом, когда появляется некая развесистая система, в которой могут разобраться только её авторы, так как в неё сложно въехать, объять умом целиком. И если есть общая диаграмма работы, то больше шансов, что человек с улицы сможет её раскурить.
Например, посмотрите на вот эту схему, попробуйте нажать «Simulate» в правом верхнем углу и прогоните программу от начала до конца. Так уже сходу и стало более-менее понятно, что в ней происходит?
А теперь если добавить, что из этой схемы сразу же генерится и код автомата, который можно скопировать в проект, допилить напильником и он будет работать, то получается прям бомба-пушка. Кстати, для VS Code есть визуализация прям внутри редактора, оч удобно прочекать, где куда и что идёт, это «живая документация».
Что ещё интересного есть в xState. Между состояниями могут быть guards, которые в зависимости от результата поведут в одну сторону или в другую. Поддерживается TS и асинхронная логика. Есть интеграция с React, Vue, Svelte. Также авторы стали развивать либу в сторону actor-ов: это такой архитектурный паттерн, когда система представляется неким действующим лицом, актором, которое выполняет действия, может взаимодействовать с другими акторами и тд.
В общем, если у вас уже запутанная система или вы собираетесь заниматься системой с множественными состояниями, советую приглядеться к xState ✌️.
@web_platform | Поддержать канал 🤝
👍11🔥3❤1
#Пульс_веб_платформы 22.03.2024
Новости
- вышел Astro 4.5: новая встроенная панель аудита сайта, по View Transitions теперь можно перерендерить интерактивные части сайта, обновлён хайлайтер синтаксиса для блоков кода Shiki, поддержка отдельных CDN для разных типов файлов (и заодно ребята отпраздновали 3 года проекта)
- вышел Firefox 124: добавлена поддержка AbortSignal.any, ::first-letter и ::first-line теперь работают для SVG <text>, content-visibility: auto включено по умолчанию (скорость отрисовки сайтов станет быстрее)
- что будет, если вместе соберутся создатель и бывший CEO npm, инжиниринг-менеджер из Github и npm и разработчик из Google? Они попробуют создать более лучший пакетный менеджер (JSR был только началом)!
- выпущен vitepress — генератор статических сайтов из md на vue и vite: изначально генерится статика SSG, а после загрузки инициализируется SPA для дальнейшей навигации по сайту
Проекты
- madge — анализ и нахождение циклических зависимостей в проекте, а также постройка визуального графа зависимостей
- shiki — стильный хайлайтер кода в браузере + если вы читали документацию по TS на сайте TS, то наверняка запомнили примеры кода с тултипами-аннотациями, в которых показываются «скомпиленные» подсказки: это реализовано с помощью twoslash, который работает в тандеме с shiki, а также бонусом библиотека анимирования кода из одного состояния в другой shiki-magic-move
- downshift — базовые примитивы, заложенные в хуки, для создания доступных выпадашек на React
- spectacle — либа для создания презентаций с помощью React и JSX
- modernfontstacks — наборы шрифтов (включая системные): показывается, какие шрифты используются сейчас в браузере, какие доступны и недоступны
Статьи и демки
JS
- автомемоизация React Compiler строится на том, чтобы при выводе типов понять какие значения — примитивы и не момойзить их; собственно, и без React Compiler примитивные значения мемойзить иногда вредно
- гайд по созданию анимаций с react spring: есть примеры с простыми и сложными анимациями, впрочем простые анимации можно собрать и на коленке на CSS, разве что в либе есть встроенные «пружинные» изинги
- сравнительная таблица наличия API в разных JS-рантаймах (кроме браузера): заодно освещён рантайм WinterJS, использующий для JS движок SpiderMonkey из FF
- мастеркласс по экономии на спичках в JS-коде, если всё остальное уже оптимизировано
- как настроить среду и TS для разработки Node-приложения
- шпаргалка по типизации в React-е: если вы когда-нибудь натыкались на заковыристую типизацию, она наверняка раскрыта в этой доке
CSS
- напоминание, что отступы margin и padding недопустимы в стилях агностик-UI-компонентов, вместо них нужно использовать gap
- свойство contain, которое привносит новизну в вёрстку двухколоночного лейаута: с contain: size можно «изолировать» лейаут одного элемента от всех остальных (как будто position absolute только в потоке), а также с помощью contain: layout можно спозиционировать fixed элемент относительно родителя (но он перестанет быть fixed!)
- вместо border: 0 лучше писать border-color: transparent, чтобы не отрубать рамки для контрастного режима браузера (такое стоит делать хотя бы для @media (forced-colors: active))
- неочевидные стили для кнопок: touch-action: manipulation для отключения зума по двойному тапу, user-select: none для выключение выделения текста, ::file-selector-button для стилизации кнопки input file, аутлайн для фокуса не по клику с :focus-visible
- значение align-items: safe center для выравнивания элементов без риска обрезать их в случае появления скролла в контейнере
- ликбез по боксовой модели CSS, а также сброс неудобной дефолтной настройки box-sizing: content-box
- удобный дефолт для респонсив-размера шрифта font-size: calc(1rem + 0.25vw) вместо дурацкого переключения по разрешениям
Платформа
- если ваша монорепа разрастётся до миллиона файлов, то скорее всего в ней начнёт тормозить git; если такое произошло, выхода два: распилить монорепу или перейти на Mercurial (как сделали ребята из компании на букву F)
@web_platform | Поддержать канал 🤝
Новости
- вышел Astro 4.5: новая встроенная панель аудита сайта, по View Transitions теперь можно перерендерить интерактивные части сайта, обновлён хайлайтер синтаксиса для блоков кода Shiki, поддержка отдельных CDN для разных типов файлов (и заодно ребята отпраздновали 3 года проекта)
- вышел Firefox 124: добавлена поддержка AbortSignal.any, ::first-letter и ::first-line теперь работают для SVG <text>, content-visibility: auto включено по умолчанию (скорость отрисовки сайтов станет быстрее)
- что будет, если вместе соберутся создатель и бывший CEO npm, инжиниринг-менеджер из Github и npm и разработчик из Google? Они попробуют создать более лучший пакетный менеджер (JSR был только началом)!
- выпущен vitepress — генератор статических сайтов из md на vue и vite: изначально генерится статика SSG, а после загрузки инициализируется SPA для дальнейшей навигации по сайту
Проекты
- madge — анализ и нахождение циклических зависимостей в проекте, а также постройка визуального графа зависимостей
- shiki — стильный хайлайтер кода в браузере + если вы читали документацию по TS на сайте TS, то наверняка запомнили примеры кода с тултипами-аннотациями, в которых показываются «скомпиленные» подсказки: это реализовано с помощью twoslash, который работает в тандеме с shiki, а также бонусом библиотека анимирования кода из одного состояния в другой shiki-magic-move
- downshift — базовые примитивы, заложенные в хуки, для создания доступных выпадашек на React
- spectacle — либа для создания презентаций с помощью React и JSX
- modernfontstacks — наборы шрифтов (включая системные): показывается, какие шрифты используются сейчас в браузере, какие доступны и недоступны
Статьи и демки
JS
- автомемоизация React Compiler строится на том, чтобы при выводе типов понять какие значения — примитивы и не момойзить их; собственно, и без React Compiler примитивные значения мемойзить иногда вредно
- гайд по созданию анимаций с react spring: есть примеры с простыми и сложными анимациями, впрочем простые анимации можно собрать и на коленке на CSS, разве что в либе есть встроенные «пружинные» изинги
- сравнительная таблица наличия API в разных JS-рантаймах (кроме браузера): заодно освещён рантайм WinterJS, использующий для JS движок SpiderMonkey из FF
- мастеркласс по экономии на спичках в JS-коде, если всё остальное уже оптимизировано
- как настроить среду и TS для разработки Node-приложения
- шпаргалка по типизации в React-е: если вы когда-нибудь натыкались на заковыристую типизацию, она наверняка раскрыта в этой доке
CSS
- напоминание, что отступы margin и padding недопустимы в стилях агностик-UI-компонентов, вместо них нужно использовать gap
- свойство contain, которое привносит новизну в вёрстку двухколоночного лейаута: с contain: size можно «изолировать» лейаут одного элемента от всех остальных (как будто position absolute только в потоке), а также с помощью contain: layout можно спозиционировать fixed элемент относительно родителя (но он перестанет быть fixed!)
- вместо border: 0 лучше писать border-color: transparent, чтобы не отрубать рамки для контрастного режима браузера (такое стоит делать хотя бы для @media (forced-colors: active))
- неочевидные стили для кнопок: touch-action: manipulation для отключения зума по двойному тапу, user-select: none для выключение выделения текста, ::file-selector-button для стилизации кнопки input file, аутлайн для фокуса не по клику с :focus-visible
- значение align-items: safe center для выравнивания элементов без риска обрезать их в случае появления скролла в контейнере
- ликбез по боксовой модели CSS, а также сброс неудобной дефолтной настройки box-sizing: content-box
- удобный дефолт для респонсив-размера шрифта font-size: calc(1rem + 0.25vw) вместо дурацкого переключения по разрешениям
Платформа
- если ваша монорепа разрастётся до миллиона файлов, то скорее всего в ней начнёт тормозить git; если такое произошло, выхода два: распилить монорепу или перейти на Mercurial (как сделали ребята из компании на букву F)
@web_platform | Поддержать канал 🤝
🔥7👍6❤2
#Лаборатория_веб_платформы
Зависимости
Окей, вам нужно сделать фичу и вы решаете добавить в проект зависимость. Лучше было бы, конечно, этого не делать, но иногда бывает нужно срочно-кипяточно или наговнякать для проверки гипотезы. Как сделать выбор более осознанно и уменьшить риски, что зависимость в будущем создаст проблем?
Признаю: будущее никто не знает, может случиться что угодно и риски есть всегда. Так что, как осознанно не подходи к выбору, всё равно что-то может пойти не так. Но что можно сделать, так это собрать более-менее полную эвристику и вывести наименее рискованный вариант.
Обычно проекты и большие, и маленькие, проходят примерно один и тот же жизненный цикл: рождение, бурное развитие со сломом обратной совместимости, стабилизация, стагнация, уход в поддержку/неподдержку.
Причём проект может проходить цикл повторно. Например, если изменилась прикладная цель или пришёл новый овнер, проект может пойти на новый круг по спирали.
Сам цикл может проходить быстро, если проект — это mvp со сроком жизни в месяц, или долго, когда проект долгоиграющий (Linux 👋).
Так вот, к зависимостям.
О качестве зависимости можно не задумываться, если срок жизни вашего проекта будет короче, чем срок жизни зависимости. И, наоборот, качество зависимости очень важно, если ваш проект — долгий: зависимости нужно будет обслуживать и утилизировать в случае заброшенности, либо дорабатывать форк. Чем зависимостей больше, тем больше времени будет уходить на обслуживание.
Нестабильные зависимости в стабилизировавшийся проект лучше не добавлять, иногда становится трудно/накладно обновлять зависимости и в проекте может появиться дырка, которая будет висеть месяцами.
Дальше нужно определиться, из чего складывается качество зависимости.
🍿 Часто бывает, что зависимость выбирается по популярности. Типа «миллионы юзеров не могут ошибаться».Да, у популярного проекта большее сообщество, больше контрибьюторов, но бывает, что что-то становится модным, а затем мода на это проходит. Тут можно смотреть на количество звёзд, форков, подписчиков, контрибьюторов, скачиваний (а также тренд скачиваний).
👥 Мейнтейнер(ы) и мейнтейн. Если мейнтейнер один, то вероятность стать заброшенным у проекта больше, так как бас фактор. Мейнтейн можно оценить по соотношению открытых/закрытых ишью, времени закрытия ишью, времени последнего обновления и частоте релизов.
🛠️ Качество инфраструктуры. Документация, настроенный линтер, тесты, внятное версионирование. Тут всё ясно.
⛓️ Зависимость от других зависимостей. Чем больше зависимостей, тем хуже. Энтропия увеличивается, всё остальное падает. Одиночные пакеты лучше, но есть исключение, когда речь идёт о целой экосистеме, например, ui-ките, который вы целиком используете.
🏋️ Размер. Часто даже у популярного проекта могут быть более компактные аналоги. Размер одиночных пакетов часто кореллирует с количеством зависимостей. Меньше зависимостей — меньше размер.
🧭 DX. Если проект будет минимального размера и без внешних зависимостей, но при этом него будет неудобный API, то не стоит брать его. Нервы дороже.
💸 Финансирование. Если у проекта есть платная версия или же за ним стоит зарабатывающая компания, то вероятность более длинной жизни проекта больше. Без поддержки энтузиазм быстрее заканчивается.
Как теперь это всё отслеживать, спросите вы. Для этого есть инструменты.
Оценить размер бандла, увидеть вложенные зависимости и сравнить с аналогами можно на bundlephobia (пример).
Увидеть «рейтинг» пакета можно на npms (пример). Там оценивается «качество», «популярность» и «мейнтейн». Так же можно сравнить с аналогами.
Более детально проанализировать зависимости можно на npmgraph. Например, можно оценить количество мейнтейнеров в дочерних зависимостях, актуальность зависимостей, оценку npms.
Повторюсь: даже проанализировав все параметры, что-то в будущем всё равно может пойти не так. Но этого никто не знает, а здесь и сейчас у вас будет инструмент для более осознанного выбора зависимостей и обоснования этого выбора для коллег и менеджеров.
@web_platform | Поддержать канал 🤝
Зависимости
Окей, вам нужно сделать фичу и вы решаете добавить в проект зависимость. Лучше было бы, конечно, этого не делать, но иногда бывает нужно срочно-кипяточно или наговнякать для проверки гипотезы. Как сделать выбор более осознанно и уменьшить риски, что зависимость в будущем создаст проблем?
Признаю: будущее никто не знает, может случиться что угодно и риски есть всегда. Так что, как осознанно не подходи к выбору, всё равно что-то может пойти не так. Но что можно сделать, так это собрать более-менее полную эвристику и вывести наименее рискованный вариант.
Обычно проекты и большие, и маленькие, проходят примерно один и тот же жизненный цикл: рождение, бурное развитие со сломом обратной совместимости, стабилизация, стагнация, уход в поддержку/неподдержку.
Причём проект может проходить цикл повторно. Например, если изменилась прикладная цель или пришёл новый овнер, проект может пойти на новый круг по спирали.
Сам цикл может проходить быстро, если проект — это mvp со сроком жизни в месяц, или долго, когда проект долгоиграющий (Linux 👋).
Так вот, к зависимостям.
О качестве зависимости можно не задумываться, если срок жизни вашего проекта будет короче, чем срок жизни зависимости. И, наоборот, качество зависимости очень важно, если ваш проект — долгий: зависимости нужно будет обслуживать и утилизировать в случае заброшенности, либо дорабатывать форк. Чем зависимостей больше, тем больше времени будет уходить на обслуживание.
Нестабильные зависимости в стабилизировавшийся проект лучше не добавлять, иногда становится трудно/накладно обновлять зависимости и в проекте может появиться дырка, которая будет висеть месяцами.
Дальше нужно определиться, из чего складывается качество зависимости.
🍿 Часто бывает, что зависимость выбирается по популярности. Типа «миллионы юзеров не могут ошибаться».Да, у популярного проекта большее сообщество, больше контрибьюторов, но бывает, что что-то становится модным, а затем мода на это проходит. Тут можно смотреть на количество звёзд, форков, подписчиков, контрибьюторов, скачиваний (а также тренд скачиваний).
👥 Мейнтейнер(ы) и мейнтейн. Если мейнтейнер один, то вероятность стать заброшенным у проекта больше, так как бас фактор. Мейнтейн можно оценить по соотношению открытых/закрытых ишью, времени закрытия ишью, времени последнего обновления и частоте релизов.
🛠️ Качество инфраструктуры. Документация, настроенный линтер, тесты, внятное версионирование. Тут всё ясно.
⛓️ Зависимость от других зависимостей. Чем больше зависимостей, тем хуже. Энтропия увеличивается, всё остальное падает. Одиночные пакеты лучше, но есть исключение, когда речь идёт о целой экосистеме, например, ui-ките, который вы целиком используете.
🏋️ Размер. Часто даже у популярного проекта могут быть более компактные аналоги. Размер одиночных пакетов часто кореллирует с количеством зависимостей. Меньше зависимостей — меньше размер.
🧭 DX. Если проект будет минимального размера и без внешних зависимостей, но при этом него будет неудобный API, то не стоит брать его. Нервы дороже.
💸 Финансирование. Если у проекта есть платная версия или же за ним стоит зарабатывающая компания, то вероятность более длинной жизни проекта больше. Без поддержки энтузиазм быстрее заканчивается.
Как теперь это всё отслеживать, спросите вы. Для этого есть инструменты.
Оценить размер бандла, увидеть вложенные зависимости и сравнить с аналогами можно на bundlephobia (пример).
Увидеть «рейтинг» пакета можно на npms (пример). Там оценивается «качество», «популярность» и «мейнтейн». Так же можно сравнить с аналогами.
Более детально проанализировать зависимости можно на npmgraph. Например, можно оценить количество мейнтейнеров в дочерних зависимостях, актуальность зависимостей, оценку npms.
Повторюсь: даже проанализировав все параметры, что-то в будущем всё равно может пойти не так. Но этого никто не знает, а здесь и сейчас у вас будет инструмент для более осознанного выбора зависимостей и обоснования этого выбора для коллег и менеджеров.
@web_platform | Поддержать канал 🤝
👍6❤2
Веб-платформа
#Лаборатория_веб_платформы Зависимости Окей, вам нужно сделать фичу и вы решаете добавить в проект зависимость. Лучше было бы, конечно, этого не делать, но иногда бывает нужно срочно-кипяточно или наговнякать для проверки гипотезы. Как сделать выбор более…
Лол, кажись bundlephobia поплохело. Наглядная иллюстрация проблемы с зависимостью 😅
Нашёл рекомендацию https://bundlejs.com (пример). Билдит зависимость прямо в браузере. Но не проверял ещё подробно.
Нашёл рекомендацию https://bundlejs.com (пример). Билдит зависимость прямо в браузере. Но не проверял ещё подробно.
#Пульс_веб_платформы 29.03.2024
Новости
- вышел Safari TP 190: поддерживается style container queries, ключевое слово safe во флексбоксах, getComputedStyle() теперь работает с ::highlight(), атрибут shadowrootclonable для разрешения кловирования shadow root
- вышла Turborepo 1.13: новый ui-терминал, команда scan для определения подходящих настроек на вашей машине, улучшенное логирование на CI
- веб-компонентный ui-кит Shoelace теперь называется Web Awesome (так как их купил Font Awesome): хорошая новость — у кита будет финансовая поддержка, плохая — полностью бесплатным кит не будет
- в V8 у итераторов появились новые методы map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find, позволяющие, например, не приводить к массиву коллекцию Nodelist, чтобы её обойти const posts = document.querySelectorAll('a').values().find()
- обновился Chrome до версии 123: функция light-dark() для упрощённого задания цветовой темы; Long Animation Frames API для отслеживания избыточных перерисовок в PerformanceObserver; Service worker Static Routing API для указания, какие ресурсы через Service worker гонять не нужно, а всегда брать из сети; стили для picture-in-picture версии сайта @media (display-mode: picture-in-picture)
Проекты
- gitpkg — тула, чтобы сделать папку github-репозитория отдельной npm-зависимостью
- tzdb — либа с всегда актуальными мировыми таймзонами (данные берутся с geonames.org)
- changesets — тула для составления чейнджлогов в репах и монорепах
- microdiff — мини-либа без зависимостей для сравнения объектов в JS, в том числе new Date() и new RegExp(), а также объектов с циклическими ссылками
Статьи и демки
JS
- документалка о истории Node.js: не смотрел, но одобряю
- чем отличаются JS движок и JS рантайм: движок (V8, SpiderMonkey, JavaScriptCore) имплементит спецификацию ECMAScript, а рантайм (браузеры, Node, Deno, Bun) — это хост, в котором запускается движок + дополнительная инфраструктура для работы (DOM для браузеров, доступ в файловой системе в Node, event loop)
- походы для двустороннего и одностороннего общения сервер-клиент с WebSockets, Server-Sent-Events, Long-Polling, WebRTC и WebTransport: WebSockets ок, но сложны в реализации, SSE — только в направлении сервер->клиент, WebTransport работает на протоколе HTTP/3 QUIC и пока не везде поддерживается, WebRTC больше для клиент-клиент соединений, Long-Polling ок, но хак
- обзор всех полей package.json: скорее всего они уже описаны в доке npm, но тут как-то приятно собрано и описано всё вместе
CSS
- идея использовать scroll-snap не в горизонтальной карусели, а для скролл-навигации по заголовкам текста в вертикальном направлении: чем-то напомнило вертикально листающиеся по свайпу «карточки»
- как создать фича-флаги на CSS с помощью @container style(--is-mobile: true): я предполагал, что это станет можно делать в 2025, и кажется прогноз сбудется, так как хоть style container queries и появились в Safari TP 190, но в FF ещё нет
- мастеркласс по приготовлению веб-компонента круглого прогресс-бара: в меню инкапсуляции с выделением открытых «ручек» на кастомных свойствах, обзёрвабл атрибутов (реактивность!), на десерт размеры в container unit-ах и гриды
- найдено малоизвестное CSS-свойство text-emphasis для выделения символов в тексте: кажется, может сгодиться, например, для подсветки «неверных» слов в тексте
- 5 примеров разной анимации бордеров: строится на вращении фонового псевдоэлемента с сокрытием лишнего overflow: hidden, размытии фильтром, outline или анимации stroke-dashoffset у SVG
- найден юзкейс единицы измерения turn — «докрутка» элемента при остановке анимации
- псевдокласс :empty не учитывает текстовые ноды, а вот :not(:has(*)) чинит это
- отсюда можно просто взять и скопипастить popover-модалку
Платформа
- незаслуженно неизвестные современные команды git: switch для переключения веток, restore для отката правок в файле, sparse-checkout для частичного чакаута, worktree для чекаута одновременно двух веток, bisect для бинарного поиска проблемного коммита
@web_platform | Поддержать канал 🤝
Новости
- вышел Safari TP 190: поддерживается style container queries, ключевое слово safe во флексбоксах, getComputedStyle() теперь работает с ::highlight(), атрибут shadowrootclonable для разрешения кловирования shadow root
- вышла Turborepo 1.13: новый ui-терминал, команда scan для определения подходящих настроек на вашей машине, улучшенное логирование на CI
- веб-компонентный ui-кит Shoelace теперь называется Web Awesome (так как их купил Font Awesome): хорошая новость — у кита будет финансовая поддержка, плохая — полностью бесплатным кит не будет
- в V8 у итераторов появились новые методы map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find, позволяющие, например, не приводить к массиву коллекцию Nodelist, чтобы её обойти const posts = document.querySelectorAll('a').values().find()
- обновился Chrome до версии 123: функция light-dark() для упрощённого задания цветовой темы; Long Animation Frames API для отслеживания избыточных перерисовок в PerformanceObserver; Service worker Static Routing API для указания, какие ресурсы через Service worker гонять не нужно, а всегда брать из сети; стили для picture-in-picture версии сайта @media (display-mode: picture-in-picture)
Проекты
- gitpkg — тула, чтобы сделать папку github-репозитория отдельной npm-зависимостью
- tzdb — либа с всегда актуальными мировыми таймзонами (данные берутся с geonames.org)
- changesets — тула для составления чейнджлогов в репах и монорепах
- microdiff — мини-либа без зависимостей для сравнения объектов в JS, в том числе new Date() и new RegExp(), а также объектов с циклическими ссылками
Статьи и демки
JS
- документалка о истории Node.js: не смотрел, но одобряю
- чем отличаются JS движок и JS рантайм: движок (V8, SpiderMonkey, JavaScriptCore) имплементит спецификацию ECMAScript, а рантайм (браузеры, Node, Deno, Bun) — это хост, в котором запускается движок + дополнительная инфраструктура для работы (DOM для браузеров, доступ в файловой системе в Node, event loop)
- походы для двустороннего и одностороннего общения сервер-клиент с WebSockets, Server-Sent-Events, Long-Polling, WebRTC и WebTransport: WebSockets ок, но сложны в реализации, SSE — только в направлении сервер->клиент, WebTransport работает на протоколе HTTP/3 QUIC и пока не везде поддерживается, WebRTC больше для клиент-клиент соединений, Long-Polling ок, но хак
- обзор всех полей package.json: скорее всего они уже описаны в доке npm, но тут как-то приятно собрано и описано всё вместе
CSS
- идея использовать scroll-snap не в горизонтальной карусели, а для скролл-навигации по заголовкам текста в вертикальном направлении: чем-то напомнило вертикально листающиеся по свайпу «карточки»
- как создать фича-флаги на CSS с помощью @container style(--is-mobile: true): я предполагал, что это станет можно делать в 2025, и кажется прогноз сбудется, так как хоть style container queries и появились в Safari TP 190, но в FF ещё нет
- мастеркласс по приготовлению веб-компонента круглого прогресс-бара: в меню инкапсуляции с выделением открытых «ручек» на кастомных свойствах, обзёрвабл атрибутов (реактивность!), на десерт размеры в container unit-ах и гриды
- найдено малоизвестное CSS-свойство text-emphasis для выделения символов в тексте: кажется, может сгодиться, например, для подсветки «неверных» слов в тексте
- 5 примеров разной анимации бордеров: строится на вращении фонового псевдоэлемента с сокрытием лишнего overflow: hidden, размытии фильтром, outline или анимации stroke-dashoffset у SVG
- найден юзкейс единицы измерения turn — «докрутка» элемента при остановке анимации
- псевдокласс :empty не учитывает текстовые ноды, а вот :not(:has(*)) чинит это
- отсюда можно просто взять и скопипастить popover-модалку
Платформа
- незаслуженно неизвестные современные команды git: switch для переключения веток, restore для отката правок в файле, sparse-checkout для частичного чакаута, worktree для чекаута одновременно двух веток, bisect для бинарного поиска проблемного коммита
@web_platform | Поддержать канал 🤝
👍13🔥4❤3
#Лаборатория_веб_платформы
Фикс скроллбар-сдвига
Сегодня расскажу про старый-добрый CSS-трюк.
Бывает кейс, когда интерфейс сайта центрируется, и при появлении и скрытии скроллбара контент начинает сдвигаться чуть в сторону на ширину скроллбара. Особенно актуально в случае модалок, при появлении которых общий скролл «выключается» и интерфейс «прыгает» вправо, а при сокрытии — обратно влево.
Это можно решить, задав в CSS принудительный показ скроллбара с overflow-y: scroll. Но тогда скролл будет показываться в том числе, когда в этом нет необходимости.
Можно также придумать или найти разные варианты решения этой проблемы на JS: высчитывать ширину скроллбара и вычитать её из общей ширины body, либо вычислять разницу между интерфейсом со скроллом и без скролла, а затем компенсировать эту разницу опять же для body. Но всё это кажется неизящными костылями. Даже если пробросить вычисленное значение в CSS кастомными свойствами.
Есть более изящный костыль на CSS, который применяется только когда нужно и не нагружает скрипты ненужными махинациями.
Суть в том, чтобы задать контейнеру, внутри которого располагается центрирующийся контент, компенсирующий отступ слева, если скроллбара нет. А если скроллбар есть, то этот отступ должен убираться.
Как вычислить это значение без прибегания к скриптам? На помощь приходит то, чему равняются значения 100% и 100vw для блока со скроллом. В случае vw — это ширина всего вьюпорта, включая скроллбар, а в случае % — это ширина блока без скроллбара. То есть разница между этими двумя значениями — это и есть ширина самого скроллбара:
Если скроллбар есть, то отступ будет, так как 100vw будет больше 100%. Если скроллбара нет, то 100vw и 100% будут равны между собой и отступа не будет.
Демо тут: попробуйте понажимать на кнопку, которая включает и выключает скролл, и увидеть сдвиг, а затем раскомментировать фикс.
@web_platform | Поддержать канал 🤝
Фикс скроллбар-сдвига
Сегодня расскажу про старый-добрый CSS-трюк.
Бывает кейс, когда интерфейс сайта центрируется, и при появлении и скрытии скроллбара контент начинает сдвигаться чуть в сторону на ширину скроллбара. Особенно актуально в случае модалок, при появлении которых общий скролл «выключается» и интерфейс «прыгает» вправо, а при сокрытии — обратно влево.
Это можно решить, задав в CSS принудительный показ скроллбара с overflow-y: scroll. Но тогда скролл будет показываться в том числе, когда в этом нет необходимости.
Можно также придумать или найти разные варианты решения этой проблемы на JS: высчитывать ширину скроллбара и вычитать её из общей ширины body, либо вычислять разницу между интерфейсом со скроллом и без скролла, а затем компенсировать эту разницу опять же для body. Но всё это кажется неизящными костылями. Даже если пробросить вычисленное значение в CSS кастомными свойствами.
Есть более изящный костыль на CSS, который применяется только когда нужно и не нагружает скрипты ненужными махинациями.
Суть в том, чтобы задать контейнеру, внутри которого располагается центрирующийся контент, компенсирующий отступ слева, если скроллбара нет. А если скроллбар есть, то этот отступ должен убираться.
.container {
margin-left: Npx;
}
Как вычислить это значение без прибегания к скриптам? На помощь приходит то, чему равняются значения 100% и 100vw для блока со скроллом. В случае vw — это ширина всего вьюпорта, включая скроллбар, а в случае % — это ширина блока без скроллбара. То есть разница между этими двумя значениями — это и есть ширина самого скроллбара:
.container {
margin-left: calc(100vw - 100%);
}
Если скроллбар есть, то отступ будет, так как 100vw будет больше 100%. Если скроллбара нет, то 100vw и 100% будут равны между собой и отступа не будет.
Демо тут: попробуйте понажимать на кнопку, которая включает и выключает скролл, и увидеть сдвиг, а затем раскомментировать фикс.
@web_platform | Поддержать канал 🤝
🔥24👍3❤1
#Пульс_веб_платформы 05.04.2024
Новости
- обновились LST версии Node.js: в v20.12.0 бэкпортированы crypto.hash(), более быстрый, чем createHash(), загрузка и парсинг переменных окружения с process.loadEnvFile(path) и util.parseEnv(content), стилизация вывода текста util.styleText; в v18.20.0 добавлены импорт-атрибуты import "foo" with { ... }, а также dirent.path заменён на dirent.parentPath (следом доехали секьюрные апдейты v20.12.1 и v18.20.1)
- вышел bun v1.1: теперь поддерживается в Windows 10, также добавлен Bun.Glob для поиска по файловой системе, Bun.Semver для проверки и сортировки версий по semver, новые свойства server.url и server.requestIP() при использовании serve, улучшена совместимость с Node для более бесшовного перехода, много улучшений в работе с Web API и в целом дофига фиксов и изменений
- вышел (олдскулы свело) Gulp v5: разработчикам пришлось отказаться или взять под своё крыло заброшенные зависимости, многое переписать (вызывает чувство уважения с лёгким налётом тщетности бытия)
Проекты
- typed.js — либа для анимации печатающегося текста
- npm-publish — публикация npm-пакетов из GitHub Actions при изменении версии пакета
- runJS — песочница для написания JS- или TS-кода с одновременным выводом результата рядом (как будто каждая строка выводится в консоль, только прямо рядом с кодом, без переключения контекста)
Статьи и демки
JS
- визуальный гайд по работе промисов, из которого можно узнать, что «колбек» на резолве промисов записывается в поле [[PromiseFulfillReactions]] и что «макротасков» нет, а есть просто таски
- если вы захотите на JS собрать CLI-программу, то это можно сделать без всяких дополнительных библиотек на коленке с помощью файла index.js со строкой #!/usr/bin/env node, а также запуска через поле package.json "bin": { "setup-project": "./index.js" }
- а почему бы нам не добавить реактивности в JS, подумали двое ребят и отправили пропоузал сигналов в JS, чтобы можно было создавать new Signal.State и Signal.Computed: внутри рантайма это будет лучше по перфомансу и возможно даже будет интегрировано с DOM (уууу, ну уже тогда проклятому Реакту точно конец!)
- каждая версия Реакта как приход весны: старые хуки перерождаются в новые и жизнь фреймворка выходит на новый круг (useFormState умер, да здравствует useActionState)
- в Реакте при задании значений по умолчанию в аргументах не стоит использовать массивы и объекты, так как каждый раз это будет ссылкой на новый объект, то есть пропсы будут меняться и компонент ререндериться
- попытки ограничить типами передаваемые в children элементы в Реакте заранее обречены, так как все элементы будут всё равно безликими JSX.Element, поэтому если нужен контроль за передаваемыми внутрь компонента данными, лучше воспользоваться пропами
- в браузерах есть механизм bfcache, который позволяет при переходе back и forward загружать страницу не повторно по сети, а из хранящегося снепшота в памяти (чек window pageshow по event.persisted)
CSS
- как на @scope, :scope и all: revert-layer собрать инкапсуляцию стилей в компонентах: как обычно в CSS — многословно, но нативно
- как на :root:has(select option[value="dark"]:checked) собрать современный переключатор светлой/тёмной темы сайта с сохранением в localstorage
- интерактивный гайд по container queries, в котором приводится много юзкейсов примеров использования единиц измерения от «контейнера», а также перечислены ограничения: если блок объявлен как container, то он не может иметь одновременно лейаут грида/флексбокса; container нельзя использовать в query для самого себя, для этого должен быть отдельный элемент
- <marquee> хоть и давно задепрекейчен, «бесконечные» движущиеся полосы в дизайнах с нами, думаю, навсегда, поэтому можно научиться их реализовывать с помощью задержки анимации margin-left для каждого отдельного элемента
Платформа
- как улучшить метрику CLS: предустанавливать размеры для картинок и для мест с инжектящимся контентом, не загружать лениво CSS в зоне видимого интерфейса, не анимировать top/left, подбирать подходящие фолбек-шрифты
@web_platform | Поддержать канал 🤝
Новости
- обновились LST версии Node.js: в v20.12.0 бэкпортированы crypto.hash(), более быстрый, чем createHash(), загрузка и парсинг переменных окружения с process.loadEnvFile(path) и util.parseEnv(content), стилизация вывода текста util.styleText; в v18.20.0 добавлены импорт-атрибуты import "foo" with { ... }, а также dirent.path заменён на dirent.parentPath (следом доехали секьюрные апдейты v20.12.1 и v18.20.1)
- вышел bun v1.1: теперь поддерживается в Windows 10, также добавлен Bun.Glob для поиска по файловой системе, Bun.Semver для проверки и сортировки версий по semver, новые свойства server.url и server.requestIP() при использовании serve, улучшена совместимость с Node для более бесшовного перехода, много улучшений в работе с Web API и в целом дофига фиксов и изменений
- вышел (олдскулы свело) Gulp v5: разработчикам пришлось отказаться или взять под своё крыло заброшенные зависимости, многое переписать (вызывает чувство уважения с лёгким налётом тщетности бытия)
Проекты
- typed.js — либа для анимации печатающегося текста
- npm-publish — публикация npm-пакетов из GitHub Actions при изменении версии пакета
- runJS — песочница для написания JS- или TS-кода с одновременным выводом результата рядом (как будто каждая строка выводится в консоль, только прямо рядом с кодом, без переключения контекста)
Статьи и демки
JS
- визуальный гайд по работе промисов, из которого можно узнать, что «колбек» на резолве промисов записывается в поле [[PromiseFulfillReactions]] и что «макротасков» нет, а есть просто таски
- если вы захотите на JS собрать CLI-программу, то это можно сделать без всяких дополнительных библиотек на коленке с помощью файла index.js со строкой #!/usr/bin/env node, а также запуска через поле package.json "bin": { "setup-project": "./index.js" }
- а почему бы нам не добавить реактивности в JS, подумали двое ребят и отправили пропоузал сигналов в JS, чтобы можно было создавать new Signal.State и Signal.Computed: внутри рантайма это будет лучше по перфомансу и возможно даже будет интегрировано с DOM (уууу, ну уже тогда проклятому Реакту точно конец!)
- каждая версия Реакта как приход весны: старые хуки перерождаются в новые и жизнь фреймворка выходит на новый круг (useFormState умер, да здравствует useActionState)
- в Реакте при задании значений по умолчанию в аргументах не стоит использовать массивы и объекты, так как каждый раз это будет ссылкой на новый объект, то есть пропсы будут меняться и компонент ререндериться
- попытки ограничить типами передаваемые в children элементы в Реакте заранее обречены, так как все элементы будут всё равно безликими JSX.Element, поэтому если нужен контроль за передаваемыми внутрь компонента данными, лучше воспользоваться пропами
- в браузерах есть механизм bfcache, который позволяет при переходе back и forward загружать страницу не повторно по сети, а из хранящегося снепшота в памяти (чек window pageshow по event.persisted)
CSS
- как на @scope, :scope и all: revert-layer собрать инкапсуляцию стилей в компонентах: как обычно в CSS — многословно, но нативно
- как на :root:has(select option[value="dark"]:checked) собрать современный переключатор светлой/тёмной темы сайта с сохранением в localstorage
- интерактивный гайд по container queries, в котором приводится много юзкейсов примеров использования единиц измерения от «контейнера», а также перечислены ограничения: если блок объявлен как container, то он не может иметь одновременно лейаут грида/флексбокса; container нельзя использовать в query для самого себя, для этого должен быть отдельный элемент
- <marquee> хоть и давно задепрекейчен, «бесконечные» движущиеся полосы в дизайнах с нами, думаю, навсегда, поэтому можно научиться их реализовывать с помощью задержки анимации margin-left для каждого отдельного элемента
Платформа
- как улучшить метрику CLS: предустанавливать размеры для картинок и для мест с инжектящимся контентом, не загружать лениво CSS в зоне видимого интерфейса, не анимировать top/left, подбирать подходящие фолбек-шрифты
@web_platform | Поддержать канал 🤝
👍10🔥4❤3
#Пульс_веб_платформы 12.04.2024
Новости
- вышел Jpegli — новая либа для кодирования jpeg, обещают на 35% лучшеезашакаливание сжатие, казалось бы jpeg сто лет в обед, но до сих пор случаются прорывы
- PartyKit, библиотека для создания мультиплеер-приложений, куплена Cloudflare: обещают холить и лелеять (но это в пресс-релизах они все так обещают)
- V8 Sandbox — более не эксперимент: уже в Chrome 123 память для V8 будет отделяться в отдельную «резервацию», чтобы предотвратить несанкционированный доступ к ней
- вышел новый учебник по JS от гугловцев: как обычно, считаю, что только читать материал — мало, квизы в конце статей — тоже мало, надо отрабатывать на практике, вот буквально набивать руку, печатая код
- вышел ESLint v9.0.0, в нём много нововведений и breaking changes: не поддерживается нода < v18.18.0, v19; eslint.config.js — теперь дефолт, .eslintrc —депрекейт; удалены форматтеры, кроме stylish, html, json и json-with-meta; обновлен eslint:recommended; добавлены и изменены многие правила
- вышел ESLint Config Inspector — инструмент для визуального изучения вашего конфига, к чему он применяется, почему, зачем, за что (работает только с eslint.config.js) — это приятная пилюля для тех, кто страдает, что надо снова всё перелопачивать
Проекты
- ts-pattern — либа реализующая pattern matching подход в TS: если у вас есть развесистые условия, то возможно стоит присмотреться к либе
- vinejs — если вдруг вы использовали Zod в Node для валидации полей формы с клиента, то вас стоит взглянуть на спец либу для валидации именно HTTP request body
- dioma — либа для реализации dependency injection в JS и TS
- cally — веб-компонент календаря: фичастый, маленький, доступный, твой
- previewjs — таб с превью отрендеренного компонента из текущего файла прямо в редакторе для React, Vue, Svelte, Solid
Статьи и демки
JS
- очередное напоминание о существовании Shadow DOM без разглагольствований: бери и копируй базовый веб-компонент кнопки, который сразу заработает
- шоукейс библиотеки Effect, которая берёт на себя задачу помочь декларативностью и наглядностью побороть неоптимальную конкуренцию в асинхронных приложениях
- оптимизация бандла, в общем-то, неважно какого приложения: основная мысль — бандл — не бинарник, это высокоуровневый JS, который можно растрепать и посмотреть, что там есть лишнего (webpack-bundle-analyzer в помощь)
- yarn для тех, кому нужно не только запускать команды из package.json, а: хранить кэш всех пакетов проекта в репозитории; использовать workspaces в монорепе; интерактивно обновлять зависимости проекта; гибко управлять версиями пакетов; использовать «протоколы» для подключения к проекту внешних файлов и папок; патчить пакеты и другое
CSS
- крутые текстовые эффекты (ведь всю эту мощь в CSS же принесли для стилей, а не программирования, так?)
- что будет, если соединить :has(:hover) и сетку на 100500 элементов — позиционирование курсора без использования JS
- а что будет, если соединить :has(input:focus) input:invalid и пачку инпутов с maxlength="1" и pattern="[tT]" — wordle без использования JS
- «складывающиеся» элементы на transform-ах: особо приятен эффект затенения при более остром угле складывания
- использование CSS как инструмента для причинения умышленного визуального регресса для антипаттернов в HTML (например, для выявления забытых пустых ссылок a:not([href]), a[href=""], a[href$="#"], a[href^="javanoscript"])
HTML
- ещё один гайд по <img>, srcset, sizes и <picture> с фокусом на последовательное понимание, а зачем оно вообще нужно
Платформа
- если что WebP уже не самый топ-формат и повсеместно распространён более лучший AVIF, правда руками настраивать всю машинерию имаджинерии сложно, поэтому можно воспользоваться инструментами для пребилда картинок в нужном формате или доставкой из CDN
@web_platform | Поддержать канал 🤝
Новости
- вышел Jpegli — новая либа для кодирования jpeg, обещают на 35% лучшее
- PartyKit, библиотека для создания мультиплеер-приложений, куплена Cloudflare: обещают холить и лелеять (но это в пресс-релизах они все так обещают)
- V8 Sandbox — более не эксперимент: уже в Chrome 123 память для V8 будет отделяться в отдельную «резервацию», чтобы предотвратить несанкционированный доступ к ней
- вышел новый учебник по JS от гугловцев: как обычно, считаю, что только читать материал — мало, квизы в конце статей — тоже мало, надо отрабатывать на практике, вот буквально набивать руку, печатая код
- вышел ESLint v9.0.0, в нём много нововведений и breaking changes: не поддерживается нода < v18.18.0, v19; eslint.config.js — теперь дефолт, .eslintrc —депрекейт; удалены форматтеры, кроме stylish, html, json и json-with-meta; обновлен eslint:recommended; добавлены и изменены многие правила
- вышел ESLint Config Inspector — инструмент для визуального изучения вашего конфига, к чему он применяется, почему, зачем, за что (работает только с eslint.config.js) — это приятная пилюля для тех, кто страдает, что надо снова всё перелопачивать
Проекты
- ts-pattern — либа реализующая pattern matching подход в TS: если у вас есть развесистые условия, то возможно стоит присмотреться к либе
- vinejs — если вдруг вы использовали Zod в Node для валидации полей формы с клиента, то вас стоит взглянуть на спец либу для валидации именно HTTP request body
- dioma — либа для реализации dependency injection в JS и TS
- cally — веб-компонент календаря: фичастый, маленький, доступный, твой
- previewjs — таб с превью отрендеренного компонента из текущего файла прямо в редакторе для React, Vue, Svelte, Solid
Статьи и демки
JS
- очередное напоминание о существовании Shadow DOM без разглагольствований: бери и копируй базовый веб-компонент кнопки, который сразу заработает
- шоукейс библиотеки Effect, которая берёт на себя задачу помочь декларативностью и наглядностью побороть неоптимальную конкуренцию в асинхронных приложениях
- оптимизация бандла, в общем-то, неважно какого приложения: основная мысль — бандл — не бинарник, это высокоуровневый JS, который можно растрепать и посмотреть, что там есть лишнего (webpack-bundle-analyzer в помощь)
- yarn для тех, кому нужно не только запускать команды из package.json, а: хранить кэш всех пакетов проекта в репозитории; использовать workspaces в монорепе; интерактивно обновлять зависимости проекта; гибко управлять версиями пакетов; использовать «протоколы» для подключения к проекту внешних файлов и папок; патчить пакеты и другое
CSS
- крутые текстовые эффекты (ведь всю эту мощь в CSS же принесли для стилей, а не программирования, так?)
- что будет, если соединить :has(:hover) и сетку на 100500 элементов — позиционирование курсора без использования JS
- а что будет, если соединить :has(input:focus) input:invalid и пачку инпутов с maxlength="1" и pattern="[tT]" — wordle без использования JS
- «складывающиеся» элементы на transform-ах: особо приятен эффект затенения при более остром угле складывания
- использование CSS как инструмента для причинения умышленного визуального регресса для антипаттернов в HTML (например, для выявления забытых пустых ссылок a:not([href]), a[href=""], a[href$="#"], a[href^="javanoscript"])
HTML
- ещё один гайд по <img>, srcset, sizes и <picture> с фокусом на последовательное понимание, а зачем оно вообще нужно
Платформа
- если что WebP уже не самый топ-формат и повсеместно распространён более лучший AVIF, правда руками настраивать всю машинерию имаджинерии сложно, поэтому можно воспользоваться инструментами для пребилда картинок в нужном формате или доставкой из CDN
@web_platform | Поддержать канал 🤝
👍15❤4🔥2
#Пульс_веб_платформы 19.04.2024
Новости
- обновления Chrome 124: возможность фокусироваться клавиатурой на скроллер; атрибут writingsuggestions для включения/отключения браузерных подсказок при запонении полей; заголовок priority для HTTP; блок рендера страницы с помощью rel=expect у ссылок, пока гарантировано не загрузится нужный элемент; новый WebSocketStream API, фиксящий недостатки WebSocket API; методы setHTMLUnsafe и parseHTMLUnsafe для доступа к декларативному shadow DOM из JS; pageswap эвент для реакции на переход по View Transitions
- обновления Safari TP 192: поддержаны View Transitions API, URL.parse(), внесены багфиксы
- обновления Firefox 125: align-content в добавок к гридам и флексбоксам теперь работает и с display: block; поддержан Intl.Segmenter и Popover API
- обновления Next.js до версии 14.2: продолжено впиливание Turbopack; улучшен тришейкинг и потребление памяти при билде; CSS-чанки теперь подключатся в порядке импортов (странно, что это было не так); появились более явные сообщения об ошибках
- рендер JSX в следующей версии React обещает быть быстрее за счёт отказа от клона объекта пропсов в пользу прокидывания его напрямую
Проекты
- noscriptencode — энкодер SVG в URL, base64 и другие вариации (раньше пользовался энкодером от yoksel, но этот помощнее)
- react-datepicker — доступный, фичастый реакт дейтпикер-компонент
- next-view-transitions — View Transitions API для Next.js App Router (в догонку ко всем, кто уже внедрил у себя VT)
- markdowndown — инструмент для скачивания любого сайта в виде md
Статьи и демки
JS
- как быть со StyledComponents в React Server Components: на сервере context не поддерживается, поэтому SC не могут работать, в принципе; альтернативно можно перейти на compile-time-библиотеки с похожим API — Linaria, Panda CSS или Pigment CSS (основанный на либе, выросшей из Linaria — wyw-in-js)
- песочница, чтоб поиграть с предложенным Signal API в JS (поиграл, ощущения приятные)
- подходы к написанию логики retry: можно увеличивать время повторного запроса по экспоненте, линейно, рандомно, просто фиксировать задержку или обойтись вовсе без неё
- в каких случаях (не) нужен GraphQL: клиенты ломаются при смене API; долгое время загрузки из-за каскадных запросов; сложность поддержки множественных эндпойнтов; нужна тонкая настройка перфоманса и безопасности
- создатели xState отпилили от него лишнее и получился… новый стейт-менеджер @xstate/store, основанный на событийной модели
CSS
- галерея копипаст-градиентов: линейные, круговые и серобуроказявчатые
- в каких ситуациях может не сработать aspect-ratio: когда заданы явно оба размера, блок растягивает флекс-контейнер, что-то форсит расчёт естественной высоты блока
- современные CSS-фишечки в Campfire, используются: oklch для высчитывания оттенков цветов; кастомные свойства в фолбеках кастомных свойств color: var(--btn-color, var(--color-text)); :has для определения наличия внутренних элементов :where(:not([open]):has(.unread)) или их количества :where(:has(> :last-child:nth-child(2)); единственное медиавыражение @media (max-width: 100ch); any-hover: hover для определения нетач-девайсов
Платформа
- как попап об использовании кукис может навредить перфомансу: на самом деле относится к любому попапу или всплывающему элементу: скрипты/стили попапа могут загружать основной поток, хотя это явно должно грузиться асинхронно; поисковой робот может неверно определить LCP-элемент (вместо контента самого сайта — баннер или попап); попап может двигать контент (нехорошо для CLS)
- подборка фишек дев-тулзов: обычно в таких списках всё уже известно, но также попадается 1-2 фишки, которые прям вау; так и в этой статье нашлось кое-что новое интересное — эмуляция фокуса на странице (чтобы при переходе в дев-тулзы не закрывался ховер-элемент) и logpoints — console.log, который можно назначить на строке прям из дебаггера
- оказывается, внутрь PDF можно встраивать JS by design, который можно использовать, например, для XSS-атаки (к счастью, в браузере можно запретить исполнение JS в PDF)
@web_platform | Поддержать канал 🤝
Новости
- обновления Chrome 124: возможность фокусироваться клавиатурой на скроллер; атрибут writingsuggestions для включения/отключения браузерных подсказок при запонении полей; заголовок priority для HTTP; блок рендера страницы с помощью rel=expect у ссылок, пока гарантировано не загрузится нужный элемент; новый WebSocketStream API, фиксящий недостатки WebSocket API; методы setHTMLUnsafe и parseHTMLUnsafe для доступа к декларативному shadow DOM из JS; pageswap эвент для реакции на переход по View Transitions
- обновления Safari TP 192: поддержаны View Transitions API, URL.parse(), внесены багфиксы
- обновления Firefox 125: align-content в добавок к гридам и флексбоксам теперь работает и с display: block; поддержан Intl.Segmenter и Popover API
- обновления Next.js до версии 14.2: продолжено впиливание Turbopack; улучшен тришейкинг и потребление памяти при билде; CSS-чанки теперь подключатся в порядке импортов (странно, что это было не так); появились более явные сообщения об ошибках
- рендер JSX в следующей версии React обещает быть быстрее за счёт отказа от клона объекта пропсов в пользу прокидывания его напрямую
Проекты
- noscriptencode — энкодер SVG в URL, base64 и другие вариации (раньше пользовался энкодером от yoksel, но этот помощнее)
- react-datepicker — доступный, фичастый реакт дейтпикер-компонент
- next-view-transitions — View Transitions API для Next.js App Router (в догонку ко всем, кто уже внедрил у себя VT)
- markdowndown — инструмент для скачивания любого сайта в виде md
Статьи и демки
JS
- как быть со StyledComponents в React Server Components: на сервере context не поддерживается, поэтому SC не могут работать, в принципе; альтернативно можно перейти на compile-time-библиотеки с похожим API — Linaria, Panda CSS или Pigment CSS (основанный на либе, выросшей из Linaria — wyw-in-js)
- песочница, чтоб поиграть с предложенным Signal API в JS (поиграл, ощущения приятные)
- подходы к написанию логики retry: можно увеличивать время повторного запроса по экспоненте, линейно, рандомно, просто фиксировать задержку или обойтись вовсе без неё
- в каких случаях (не) нужен GraphQL: клиенты ломаются при смене API; долгое время загрузки из-за каскадных запросов; сложность поддержки множественных эндпойнтов; нужна тонкая настройка перфоманса и безопасности
- создатели xState отпилили от него лишнее и получился… новый стейт-менеджер @xstate/store, основанный на событийной модели
CSS
- галерея копипаст-градиентов: линейные, круговые и серобуроказявчатые
- в каких ситуациях может не сработать aspect-ratio: когда заданы явно оба размера, блок растягивает флекс-контейнер, что-то форсит расчёт естественной высоты блока
- современные CSS-фишечки в Campfire, используются: oklch для высчитывания оттенков цветов; кастомные свойства в фолбеках кастомных свойств color: var(--btn-color, var(--color-text)); :has для определения наличия внутренних элементов :where(:not([open]):has(.unread)) или их количества :where(:has(> :last-child:nth-child(2)); единственное медиавыражение @media (max-width: 100ch); any-hover: hover для определения нетач-девайсов
Платформа
- как попап об использовании кукис может навредить перфомансу: на самом деле относится к любому попапу или всплывающему элементу: скрипты/стили попапа могут загружать основной поток, хотя это явно должно грузиться асинхронно; поисковой робот может неверно определить LCP-элемент (вместо контента самого сайта — баннер или попап); попап может двигать контент (нехорошо для CLS)
- подборка фишек дев-тулзов: обычно в таких списках всё уже известно, но также попадается 1-2 фишки, которые прям вау; так и в этой статье нашлось кое-что новое интересное — эмуляция фокуса на странице (чтобы при переходе в дев-тулзы не закрывался ховер-элемент) и logpoints — console.log, который можно назначить на строке прям из дебаггера
- оказывается, внутрь PDF можно встраивать JS by design, который можно использовать, например, для XSS-атаки (к счастью, в браузере можно запретить исполнение JS в PDF)
@web_platform | Поддержать канал 🤝
🔥10👍3❤2😁1
#Фикшн_веб_платформы
Представьте, что завтра вы проснётесь, а горячо любимый всеми нами telegram перестанет работать или объявят, что он теперь только платный или что-то ещё с ним произойдёт такого, что вы вынуждены будете перестать им пользоваться.
Например, гендир telegram решит отойти от дел и прикрыть лавочку, так как все доступные средства освоены, а новых не нашли, или уволятся ключевые разработчики.
Все подписки на блоги, бережно отсортированные папки и сохранёнки больше станут недоступны. Ощущения так себе, куда идти, что читать? Не в Твиттер же 😅
Мы находимся в большущем вендор-локе, и это само по себе печально. Вдвойне печально, что мы читаем тексты (в том числе рекламные), оформление которых заточено под проприетарное ПО. Часто оформление тестов скудное или неудобное, кроме того случаются баги. Хотя, на минуточку, у нас есть бесплатный веб с его HTML, CSS и JS для абсолютно любой стилизации и добавления интерактивности в контент.
А представьте, если бы вместо того, чтобы заводить новый канал автор бы создавал свой блог в вебе? И чтобы была такая технология, чтобы можно было в одном приложении собирать посты со всех блогов, которые вам интересны, а также чтобы можно было и комментировать, ставить реакции, вот это всё.
Беда в том, что у веба самого по себе никогда не было хороших продуктологов. Вот которые бы придумывали новые фичи самого веба. Как мы пользуемся вебом, взаимодействуем с другими пользователями веба, чтобы это было свежо и интересно. Такое ощущение, что веб принадлежит всем, но в то же время никем не овнится. Если речь идёт про взаимодействие, то мы уходим в определённый сервис, но у нас мало или нет фич самого веба хотя бы для взаимодействия друг с другом.
Окей, частично функцию развития веба выполняют вендоры браузеров, но у них своя повестка и заработок (продажа рекламы вам и ваших данных рекламодателям).
Окей, есть W3C, какие-то ещё комитеты и члены, которые придумывают протоколы того, как машинам общаться с машинами — это именно технари, они не овнят веб как продукт для людей. Это скорее про техническую составляющую: как технарям хорошо делать так, чтобы машины успешно общались с другими машинами.
Окей, есть электронная почта, а также когда-то был популярным RSS — это когда контент сайта публиковался в определённом XML-формате и у вас был приёмник, который подсасывал все обновления с интересующих вас сайтов. Это было в целом удобно, но ограничено вашим личным опытом взаимодействия с контентом в вебе (как и сам «веб-сёрфинг»). То есть нельзя было прямо в RSS-ридере пообщаться с другими читателями этой же ленты.
Может быть бы RSS и развился дальше во что-то такое, но его сначала придушили поисковики (Google выгоднее, чтобы вы гуглили что-то в интернете и переходили на сайты, а не собирали инфу себе в Google Reader) и потом заменили соцсети.
Гугл, справедливости ради, пытался в эту сторону. Некоторое время просуществовал Google Wave, но, к сожалению, он появился слишком рано, чтобы выстрелить. Но если сейчас на него взглянуть, то можно узнать то, что мы сейчас видим, например, в telegram: мессенджер, треды, комменты. Даже мультиредактирование было. 🙂 Уже не помню, был ли там прикручен RSS, чтобы совместно читать одну ленту с другими пользователями.
К слову, потом, в эру зарождения соцсетей, Гугл делал заход со своим Google+, но не зашло. Кажется, что тот раз было уже слишком поздно. Да и идеи были заложены вторичные, заливание баблом не помогло.
В общем, так и живём тут, хотя могли бы огого!
Cкриншоты сервисов для интересущихся приложил в комментах ✌️
@web_platform | Поддержать канал 🤝
Представьте, что завтра вы проснётесь, а горячо любимый всеми нами telegram перестанет работать или объявят, что он теперь только платный или что-то ещё с ним произойдёт такого, что вы вынуждены будете перестать им пользоваться.
Например, гендир telegram решит отойти от дел и прикрыть лавочку, так как все доступные средства освоены, а новых не нашли, или уволятся ключевые разработчики.
Все подписки на блоги, бережно отсортированные папки и сохранёнки больше станут недоступны. Ощущения так себе, куда идти, что читать? Не в Твиттер же 😅
Мы находимся в большущем вендор-локе, и это само по себе печально. Вдвойне печально, что мы читаем тексты (в том числе рекламные), оформление которых заточено под проприетарное ПО. Часто оформление тестов скудное или неудобное, кроме того случаются баги. Хотя, на минуточку, у нас есть бесплатный веб с его HTML, CSS и JS для абсолютно любой стилизации и добавления интерактивности в контент.
А представьте, если бы вместо того, чтобы заводить новый канал автор бы создавал свой блог в вебе? И чтобы была такая технология, чтобы можно было в одном приложении собирать посты со всех блогов, которые вам интересны, а также чтобы можно было и комментировать, ставить реакции, вот это всё.
Беда в том, что у веба самого по себе никогда не было хороших продуктологов. Вот которые бы придумывали новые фичи самого веба. Как мы пользуемся вебом, взаимодействуем с другими пользователями веба, чтобы это было свежо и интересно. Такое ощущение, что веб принадлежит всем, но в то же время никем не овнится. Если речь идёт про взаимодействие, то мы уходим в определённый сервис, но у нас мало или нет фич самого веба хотя бы для взаимодействия друг с другом.
Окей, частично функцию развития веба выполняют вендоры браузеров, но у них своя повестка и заработок (продажа рекламы вам и ваших данных рекламодателям).
Окей, есть W3C, какие-то ещё комитеты и члены, которые придумывают протоколы того, как машинам общаться с машинами — это именно технари, они не овнят веб как продукт для людей. Это скорее про техническую составляющую: как технарям хорошо делать так, чтобы машины успешно общались с другими машинами.
Окей, есть электронная почта, а также когда-то был популярным RSS — это когда контент сайта публиковался в определённом XML-формате и у вас был приёмник, который подсасывал все обновления с интересующих вас сайтов. Это было в целом удобно, но ограничено вашим личным опытом взаимодействия с контентом в вебе (как и сам «веб-сёрфинг»). То есть нельзя было прямо в RSS-ридере пообщаться с другими читателями этой же ленты.
Может быть бы RSS и развился дальше во что-то такое, но его сначала придушили поисковики (Google выгоднее, чтобы вы гуглили что-то в интернете и переходили на сайты, а не собирали инфу себе в Google Reader) и потом заменили соцсети.
Гугл, справедливости ради, пытался в эту сторону. Некоторое время просуществовал Google Wave, но, к сожалению, он появился слишком рано, чтобы выстрелить. Но если сейчас на него взглянуть, то можно узнать то, что мы сейчас видим, например, в telegram: мессенджер, треды, комменты. Даже мультиредактирование было. 🙂 Уже не помню, был ли там прикручен RSS, чтобы совместно читать одну ленту с другими пользователями.
К слову, потом, в эру зарождения соцсетей, Гугл делал заход со своим Google+, но не зашло. Кажется, что тот раз было уже слишком поздно. Да и идеи были заложены вторичные, заливание баблом не помогло.
В общем, так и живём тут, хотя могли бы огого!
Cкриншоты сервисов для интересущихся приложил в комментах ✌️
@web_platform | Поддержать канал 🤝
❤3🔥3👍2
#Пульс_веб_платформы 26.04.2024
Новости
- обновился pnpm до версии v9.0.0: дропнули поддержку Node.js v16 и 17 (кстати, у pnpm есть standalone-версия с нодой прямо в бандле); добавлена совместимость с Corepack; обновлены параметры конфигов и изменён формат лок-файлов (для более лучшего разрешения git-конфликтов); улучшен процесс разрешения вложенных зависимостей
- выпущена Node.js 22: обновлён V8; появился синхронный require() ESM-модулей пока за флагом; добавлена команда node --run для запуска скриптов из package.json в обход npm и встроенный вотчер изменений файлов node --watch; поддержка WebSocket выведена из-под флага; в node:fs добавлены паттерн-матчеры glob и globSync
- обещанная блокировка 3d-party cookies в Chrome откладывается на конец года: сообщество и британская антимонопольная служба проверяет эту прекрасную затею
- первый минорный апдейт в ESLint v9.1.0: в основном багфиксы, но печаль в том, что плагинная экосистема ещё совсем не готова к новому формату, переход будет долгим
- вышла React 19 Beta: всё, что обещали раньше (useTransition, useActionState, useFormStatus, useOptimistic, use, ref as a prop, <Context> as a provider, поддержка <meta>-тегов, API для предзагрузки prefetchDNS, preconnect, preload, preinit), а также вроде как новое: сleanup functions for refs, useDeferredValue, атрибут precedence для <link> (вроде как нестандартный), поддержка асинхронных скриптов и кастомных элементов
- выпущен Biome v1.7 (форматтер и линтер, 2 в 1): включает тулу для миграции с ESLint и Prettier (соблазнительно в момент, когда ESlint в переходном состоянии)
Проекты
- react-phone-number-input — инпут для ввода телефонного номера в различных международных форматах
- imaskjs — ещё один «маскировщик» инпутов, но уже более широкого формата: есть даты, адреса, деньги
- The Front End Developer/Engineer Handbook 2024 — большой сборник по современным технологиям фронтенда: помню, что в 2018-2019 часто к нему прибегал, когда составлял карты обучения
- ripl — общий API для создания 2d-графики в SVG и canvas
- testplane (aka Hermione) — браузерное тестирование с mocha и WebdriverIO на борту
- devalue — JSON.stringify, который не ломается на циклических референсах, undefined, Infinity, NaN, -0, датах, Map, Set и BigInt
Статьи и демки
JS
- атрибуты и свойства DOM-элементов — разные вещи: атрибуты сериализуются, свойства могут быть любого типа, атрибуты нечувствительны к кейсу; иногда изменения свойств отражаются в атрибуты, иногда нет; в целом, атрибуты — для конфигурации, а свойства — для хранения состояния
- пропоузал TC39 signals завернули в Реакт-хук и сравнили с useState: даже сейчас уже выглядит приятно
- как работает тришейкинг в Webpack: местами непонятно, но суть улавливается
- Райан Даль настойчиво зовёт вас воспользоваться JSR, новым npm-совместимым реестром (esm-only, ts-first), обещает, что не придётся жонглировать package.json и tsconfig, всё заработает само
CSS
- для определения включенности скриптов есть @media (noscripting: enabled | none) (если вы считаете, что такое ещё возможно в современном вебе)
- плиточная раскладка (masonry) — это всё же часть гридов или отдельный вариант display? Вот и разработчики не могут выбрать и просят вас помочь
- с помощью режимов наложения mix-blend-mode: difference и plus-lighter, применённых к видео, можно детектить движение
HTML
- напоминание, как писать alt к изображениям: представьте, что картинка — это часть окружающего текста и опишите содержимое картинки (не нужно писать, что это картинка; лучше включить знаки препинания; в декоративных изображениях alt не стоит писать; alt можно не писать, если рядом уже есть текст содержимого картинки, например, имя пользователя)
- использование атрибута maxlength у инпутов — антипаттерн: текст обрезается, иногда сложно угадать точное количество символов, которые обрезать безопасно; вместо этого лучше показать ошибку о превышении длины
Платформа
- если взять страницу с 1mb HTML, CSS и JS, а потом открыть её по 3G, то только на соединение и парсинг потратится 0.5s (также приводятся другие метрики)
@web_platform | Поддержать канал 🤝
Новости
- обновился pnpm до версии v9.0.0: дропнули поддержку Node.js v16 и 17 (кстати, у pnpm есть standalone-версия с нодой прямо в бандле); добавлена совместимость с Corepack; обновлены параметры конфигов и изменён формат лок-файлов (для более лучшего разрешения git-конфликтов); улучшен процесс разрешения вложенных зависимостей
- выпущена Node.js 22: обновлён V8; появился синхронный require() ESM-модулей пока за флагом; добавлена команда node --run для запуска скриптов из package.json в обход npm и встроенный вотчер изменений файлов node --watch; поддержка WebSocket выведена из-под флага; в node:fs добавлены паттерн-матчеры glob и globSync
- обещанная блокировка 3d-party cookies в Chrome откладывается на конец года: сообщество и британская антимонопольная служба проверяет эту прекрасную затею
- первый минорный апдейт в ESLint v9.1.0: в основном багфиксы, но печаль в том, что плагинная экосистема ещё совсем не готова к новому формату, переход будет долгим
- вышла React 19 Beta: всё, что обещали раньше (useTransition, useActionState, useFormStatus, useOptimistic, use, ref as a prop, <Context> as a provider, поддержка <meta>-тегов, API для предзагрузки prefetchDNS, preconnect, preload, preinit), а также вроде как новое: сleanup functions for refs, useDeferredValue, атрибут precedence для <link> (вроде как нестандартный), поддержка асинхронных скриптов и кастомных элементов
- выпущен Biome v1.7 (форматтер и линтер, 2 в 1): включает тулу для миграции с ESLint и Prettier (соблазнительно в момент, когда ESlint в переходном состоянии)
Проекты
- react-phone-number-input — инпут для ввода телефонного номера в различных международных форматах
- imaskjs — ещё один «маскировщик» инпутов, но уже более широкого формата: есть даты, адреса, деньги
- The Front End Developer/Engineer Handbook 2024 — большой сборник по современным технологиям фронтенда: помню, что в 2018-2019 часто к нему прибегал, когда составлял карты обучения
- ripl — общий API для создания 2d-графики в SVG и canvas
- testplane (aka Hermione) — браузерное тестирование с mocha и WebdriverIO на борту
- devalue — JSON.stringify, который не ломается на циклических референсах, undefined, Infinity, NaN, -0, датах, Map, Set и BigInt
Статьи и демки
JS
- атрибуты и свойства DOM-элементов — разные вещи: атрибуты сериализуются, свойства могут быть любого типа, атрибуты нечувствительны к кейсу; иногда изменения свойств отражаются в атрибуты, иногда нет; в целом, атрибуты — для конфигурации, а свойства — для хранения состояния
- пропоузал TC39 signals завернули в Реакт-хук и сравнили с useState: даже сейчас уже выглядит приятно
- как работает тришейкинг в Webpack: местами непонятно, но суть улавливается
- Райан Даль настойчиво зовёт вас воспользоваться JSR, новым npm-совместимым реестром (esm-only, ts-first), обещает, что не придётся жонглировать package.json и tsconfig, всё заработает само
CSS
- для определения включенности скриптов есть @media (noscripting: enabled | none) (если вы считаете, что такое ещё возможно в современном вебе)
- плиточная раскладка (masonry) — это всё же часть гридов или отдельный вариант display? Вот и разработчики не могут выбрать и просят вас помочь
- с помощью режимов наложения mix-blend-mode: difference и plus-lighter, применённых к видео, можно детектить движение
HTML
- напоминание, как писать alt к изображениям: представьте, что картинка — это часть окружающего текста и опишите содержимое картинки (не нужно писать, что это картинка; лучше включить знаки препинания; в декоративных изображениях alt не стоит писать; alt можно не писать, если рядом уже есть текст содержимого картинки, например, имя пользователя)
- использование атрибута maxlength у инпутов — антипаттерн: текст обрезается, иногда сложно угадать точное количество символов, которые обрезать безопасно; вместо этого лучше показать ошибку о превышении длины
Платформа
- если взять страницу с 1mb HTML, CSS и JS, а потом открыть её по 3G, то только на соединение и парсинг потратится 0.5s (также приводятся другие метрики)
@web_platform | Поддержать канал 🤝
👍4🔥3❤1
#Пульс_веб_платформы 03.05.2024
Новости
- из MS Edge будут выпилилены свойства -ms-high-contrast media и -ms-high-contrast-adjust в угоду стандартным медиа-фичам forced-colors и prefers-color-scheme, а также свойству forced-color-adjust
- вышел React v18.3.0: добавились ворнинги на задепрекейченые фичи в React и React DOM
- анонсирован GitHub Copilot Workspace: (утопичная) идея сделать некую среду, в которой можно будет на натуральном языке планировать, обсуждать, писать, отлаживать и тестировать программы
- у Bun вышло обновление с новым crash reporter-ом, из интересного: идея в один 150-байтный URL запихнуть платформу, хэш коммита, стэк трейсы, сообщение и тип ошибки: малочитаемо, но зато очень коротко
- вышел TypeScript 5.5 Beta: TS научился выводить тайпгарды самостоятельно, появился импорт типов JSDoc в js-файлах и встроенная проверка регулярок, упрощен импорт es-модулей из пакета typenoscript для Ноды, опция isolatedDeclarations для изолированной компиляции d.ts, задепрекечена часть вещей
- обновился кит React Spectrum и Aria: добавлены компоненты вложенного меню, дропзоны, инпут-файла, а также компоненты для работы с цветом (пикер, ареа, слайдер, колесо)
- вышел release candidate Svelte 5: для тех, кто использует Svelte 4, всё будет будет работать быстрее, а для тех, кто использует Svelte 3, сначала рекомендуют обновиться до Svelte 4
Проекты
- extension — либа для разработки браузерных расширений, достаточно простая, чтобы запустить своё расширение командой npx extension create <your-extension-name>
- react-spring-visualizer — визуализатор анимации либы react-spring
- tagify — компонент тегов в инпуте и текстарии, умеет в поиск, сортировку, кастомизацию
Статьи и демки
JS
- как улучшить читаемость кода, вынеся подробности имплементации API в отдельный архитектурный слой: было — apiClient.get<UserResponse>(`/user/${handle}`), стало — UserApi.getUser(handle)
- туториал по новым фичам нового Реакта: особо хорошо выглядит use
- когда использовать Bun вместо Node: если важен перф; когда нужен швейцарский нож (раннер, пакетный менеджер, тест-раннер и бандлер в одном); когда не хочется заморачиваться с импортами, а хочется, чтобы просто работало; когда нудна встроенная БД SQLite
- объяснена тайна века, как же всё таки работает array.sort((a, b) => b - a): функция нужна, чтобы понять куда уйдёт a на числовой прямой, вправо и влево
- как собрать на коленке свой шаблонизатор на HTML и .sh, «потому что могу»
CSS
- респонсив размеры шрифта с помощью clamp(): хорошо — clamp(1rem, 2.5vw, 3rem), ещё лучше — clamp(1rem, calc(2.5vw + 1rem), 3rem)
- реализация боковых отступов в древовидном компоненте: проще всего добавить пустой элемент-спейсер с динамической шириной --spacer-col: max(8px, var(--level) * 8px)
- отрисовка нот в гридовой сетке: SVG с data-атрибутами вписывается и раскладывается по рядам и колонкам
- вендорные префиксы для каких свойств ещё остались актуальны (можно пересчитать на пальцах рук)
- оказывается можно управлять порядком отрисовки fill и stroke с помощью свойства paint-order: stroke fill (по умолчанию рисуется fill → stroke)
HTML
- официальное разрешение от Гугла: использовать popover API теперь можно!
Платформа
- великая проблема компьютерных наук — центрирование элементов (если вы думаете, что проблема в CSS или вебе, то это не так: те же проблемы есть и у дизайнеров, и в нативной платформе)
@web_platform | Поддержать канал 🤝
Новости
- из MS Edge будут выпилилены свойства -ms-high-contrast media и -ms-high-contrast-adjust в угоду стандартным медиа-фичам forced-colors и prefers-color-scheme, а также свойству forced-color-adjust
- вышел React v18.3.0: добавились ворнинги на задепрекейченые фичи в React и React DOM
- анонсирован GitHub Copilot Workspace: (утопичная) идея сделать некую среду, в которой можно будет на натуральном языке планировать, обсуждать, писать, отлаживать и тестировать программы
- у Bun вышло обновление с новым crash reporter-ом, из интересного: идея в один 150-байтный URL запихнуть платформу, хэш коммита, стэк трейсы, сообщение и тип ошибки: малочитаемо, но зато очень коротко
- вышел TypeScript 5.5 Beta: TS научился выводить тайпгарды самостоятельно, появился импорт типов JSDoc в js-файлах и встроенная проверка регулярок, упрощен импорт es-модулей из пакета typenoscript для Ноды, опция isolatedDeclarations для изолированной компиляции d.ts, задепрекечена часть вещей
- обновился кит React Spectrum и Aria: добавлены компоненты вложенного меню, дропзоны, инпут-файла, а также компоненты для работы с цветом (пикер, ареа, слайдер, колесо)
- вышел release candidate Svelte 5: для тех, кто использует Svelte 4, всё будет будет работать быстрее, а для тех, кто использует Svelte 3, сначала рекомендуют обновиться до Svelte 4
Проекты
- extension — либа для разработки браузерных расширений, достаточно простая, чтобы запустить своё расширение командой npx extension create <your-extension-name>
- react-spring-visualizer — визуализатор анимации либы react-spring
- tagify — компонент тегов в инпуте и текстарии, умеет в поиск, сортировку, кастомизацию
Статьи и демки
JS
- как улучшить читаемость кода, вынеся подробности имплементации API в отдельный архитектурный слой: было — apiClient.get<UserResponse>(`/user/${handle}`), стало — UserApi.getUser(handle)
- туториал по новым фичам нового Реакта: особо хорошо выглядит use
- когда использовать Bun вместо Node: если важен перф; когда нужен швейцарский нож (раннер, пакетный менеджер, тест-раннер и бандлер в одном); когда не хочется заморачиваться с импортами, а хочется, чтобы просто работало; когда нудна встроенная БД SQLite
- объяснена тайна века, как же всё таки работает array.sort((a, b) => b - a): функция нужна, чтобы понять куда уйдёт a на числовой прямой, вправо и влево
- как собрать на коленке свой шаблонизатор на HTML и .sh, «потому что могу»
CSS
- респонсив размеры шрифта с помощью clamp(): хорошо — clamp(1rem, 2.5vw, 3rem), ещё лучше — clamp(1rem, calc(2.5vw + 1rem), 3rem)
- реализация боковых отступов в древовидном компоненте: проще всего добавить пустой элемент-спейсер с динамической шириной --spacer-col: max(8px, var(--level) * 8px)
- отрисовка нот в гридовой сетке: SVG с data-атрибутами вписывается и раскладывается по рядам и колонкам
- вендорные префиксы для каких свойств ещё остались актуальны (можно пересчитать на пальцах рук)
- оказывается можно управлять порядком отрисовки fill и stroke с помощью свойства paint-order: stroke fill (по умолчанию рисуется fill → stroke)
HTML
- официальное разрешение от Гугла: использовать popover API теперь можно!
Платформа
- великая проблема компьютерных наук — центрирование элементов (если вы думаете, что проблема в CSS или вебе, то это не так: те же проблемы есть и у дизайнеров, и в нативной платформе)
@web_platform | Поддержать канал 🤝
🔥11👍6❤5🤷♂1
Собрал для вас в одну папку авторов, ведущих блоги по фронтенду, веб-разработке и вокруг неё.
🔗 https://news.1rj.ru/str/addlist/Z6Efi4jXwe9lODcy
Специально отобрал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код.
Для меня это хороший способ следить за реакциями о событиях индустрии. Например, конференции проходят не так часто, и контент с них становится общедоступным не сразу. Кроме того, там обычно рассказывают о чём-то эпичном, не сиюминутном, так как формат обязывает. А вот в авторских бложиках (и комментариях к постам) можно собрать цельную картинку происходящего в рутине, и не просто факты, а именно авторскую интерпретацию и комментарии.
Надеюсь, будет полезно ✌️
@web_platform | Поддержать канал 🤝
🔗 https://news.1rj.ru/str/addlist/Z6Efi4jXwe9lODcy
Специально отобрал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код.
Для меня это хороший способ следить за реакциями о событиях индустрии. Например, конференции проходят не так часто, и контент с них становится общедоступным не сразу. Кроме того, там обычно рассказывают о чём-то эпичном, не сиюминутном, так как формат обязывает. А вот в авторских бложиках (и комментариях к постам) можно собрать цельную картинку происходящего в рутине, и не просто факты, а именно авторскую интерпретацию и комментарии.
Надеюсь, будет полезно ✌️
@web_platform | Поддержать канал 🤝
🔥19👍15❤7
#Пульс_веб_платформы 10.05.2024
Новости
- выпущена Node v22.1.0: появилась поддержка NODE_COMPILE_CACHE для включения режима кеширования V8 (если граф модулей не меняется, то повторная пересборка становится быстрее за счёт кэша)
- только недавно в Next.js решили не патчить fetch, как в React решили патчить Date: «мы по-тихому, никому мешать не будем, со стандартами будет совместимо, вы же полифиллы используете, вот и дату норм пропатчить»; вроде так, но есть нюанс: в случае полифиллов добавляются костыли для воссоздания недостающих стандартных возможностей платформы, а фича-патчи добавляют проприетарные костыли, что уже не то же самое
Проекты
- react-tracked — представьте, что у вас есть useState/useReducer, которые триггерят ререндеры не всегда, когда стейт перезадался, а когда он именно изменился, стал другим (под капотом Proxy, работает для вложенных уровней стейта тоже)
- pragmatic-drag-and-drop — многообещающая либа для драг-н-дропа (для травмированных React DnD)
Статьи и демки
JS
- почему таки плохо патчить globals: автоматом создаёт техдолг, нестандартные фичи работают непредсказуемо в разных средах, скрывают магию внутри, лочат на вендора и в целом тормозят прогресс в долгую
- Bun может ускорить не только локальную разработку, но и сборку и деплой на CI, так как, например, заменяет yarn и Vitest
- (не совсем JS, но это не так важно) как разложить одно нечитаемое условное выражение на несколько мелких или же вынести в отдельную функцию
- чтоб не оборачивать new URL(urlstring) в try catch для обработки невалидных урлов, можно использовать URL.canParse(urlstring), а также скоро можно будет URL.parse (начиная с Chrome 126 и Firefox 126)
- React хорош для организации UI-компонентов, но когда речь заходит про дата-фетчинг, то всё что предлагает React из коробки — это выйти в окно; и в этом случае на помощь приходит React Query, который позаботится о кэшировании, оффлайне, восстановлении скролла и тд, чтобы вы спокойно могли с чистой совестью выключить компьютер в конце рабочего дня
- лучший способ гарантировано отправить неблокирующий запрос при закрытии страницы — на событии visibilitychange выполнить navigator.sendBeacon()
- возможно для управления версиями Node стоит попробовать альтернативы nvm: самой перспективной выглядит Volta, которая не требует доп файлов (конфиг в package.json), кроссплатформенна, автопереключает версию при смене проекта, а заодно может переключать версию yarn
CSS
- как-то незаметно в повседневной разработке мы перестали думать про минификацию стилей, тк эту функцию взяли на себя фреймворки, хотя [олдфаг mode on] раньше было почему-то важно считать сколько десятков килобайт умеет сэкономить твой минификатор [олдфаг mode off]
- мифы про специфичность: 1) специфичность — это не целое число, а набор из трёх чисел a, b, c 2) добавление атрибута style не добавляет специфичности 3) !important не добавляет специфичности, а уносит объявление в другой origin
- в мире победившего color-mix()-а серые палитры создаются с помощью полутона между чёрным и белым color-mix(in oklch, black 20%, white)
- border-color: transparent — это ок, если, например, на hover задавать видимый цвет, чтобы при задании рамки не изменялись размеры элемента
- :has() — это не только «родительский» селектор, но и полноценный условный оператор для элементов интерфейса, например, для select (красим select в зависимости от выбранного значения) или же для всего интерфейса (красим весь сайт в зависимости от выбранного значения (сомнительно))
- субгриды в помощь для контроля за переполнением дочерних ячеек грида на примере нумерации в упорядоченных списках
- Popover API для создания тултипов, якорящихся на элемент-триггер (сложно, но возможно)
Платформа
- разработчики React Aria поделились, как сделать человеческое выпадающее субменю, чтобы оно случайно не закрывалось во время движения курсора: строится визуальный треугольник, в рамках которого считается, что подменю не должно быть скрыто + по скорости движения предполагается, куда пользователь собрался двигать курсор
@web_platform | Поддержать канал 🤝
Новости
- выпущена Node v22.1.0: появилась поддержка NODE_COMPILE_CACHE для включения режима кеширования V8 (если граф модулей не меняется, то повторная пересборка становится быстрее за счёт кэша)
- только недавно в Next.js решили не патчить fetch, как в React решили патчить Date: «мы по-тихому, никому мешать не будем, со стандартами будет совместимо, вы же полифиллы используете, вот и дату норм пропатчить»; вроде так, но есть нюанс: в случае полифиллов добавляются костыли для воссоздания недостающих стандартных возможностей платформы, а фича-патчи добавляют проприетарные костыли, что уже не то же самое
Проекты
- react-tracked — представьте, что у вас есть useState/useReducer, которые триггерят ререндеры не всегда, когда стейт перезадался, а когда он именно изменился, стал другим (под капотом Proxy, работает для вложенных уровней стейта тоже)
- pragmatic-drag-and-drop — многообещающая либа для драг-н-дропа (для травмированных React DnD)
Статьи и демки
JS
- почему таки плохо патчить globals: автоматом создаёт техдолг, нестандартные фичи работают непредсказуемо в разных средах, скрывают магию внутри, лочат на вендора и в целом тормозят прогресс в долгую
- Bun может ускорить не только локальную разработку, но и сборку и деплой на CI, так как, например, заменяет yarn и Vitest
- (не совсем JS, но это не так важно) как разложить одно нечитаемое условное выражение на несколько мелких или же вынести в отдельную функцию
- чтоб не оборачивать new URL(urlstring) в try catch для обработки невалидных урлов, можно использовать URL.canParse(urlstring), а также скоро можно будет URL.parse (начиная с Chrome 126 и Firefox 126)
- React хорош для организации UI-компонентов, но когда речь заходит про дата-фетчинг, то всё что предлагает React из коробки — это выйти в окно; и в этом случае на помощь приходит React Query, который позаботится о кэшировании, оффлайне, восстановлении скролла и тд, чтобы вы спокойно могли с чистой совестью выключить компьютер в конце рабочего дня
- лучший способ гарантировано отправить неблокирующий запрос при закрытии страницы — на событии visibilitychange выполнить navigator.sendBeacon()
- возможно для управления версиями Node стоит попробовать альтернативы nvm: самой перспективной выглядит Volta, которая не требует доп файлов (конфиг в package.json), кроссплатформенна, автопереключает версию при смене проекта, а заодно может переключать версию yarn
CSS
- как-то незаметно в повседневной разработке мы перестали думать про минификацию стилей, тк эту функцию взяли на себя фреймворки, хотя [олдфаг mode on] раньше было почему-то важно считать сколько десятков килобайт умеет сэкономить твой минификатор [олдфаг mode off]
- мифы про специфичность: 1) специфичность — это не целое число, а набор из трёх чисел a, b, c 2) добавление атрибута style не добавляет специфичности 3) !important не добавляет специфичности, а уносит объявление в другой origin
- в мире победившего color-mix()-а серые палитры создаются с помощью полутона между чёрным и белым color-mix(in oklch, black 20%, white)
- border-color: transparent — это ок, если, например, на hover задавать видимый цвет, чтобы при задании рамки не изменялись размеры элемента
- :has() — это не только «родительский» селектор, но и полноценный условный оператор для элементов интерфейса, например, для select (красим select в зависимости от выбранного значения) или же для всего интерфейса (красим весь сайт в зависимости от выбранного значения (сомнительно))
- субгриды в помощь для контроля за переполнением дочерних ячеек грида на примере нумерации в упорядоченных списках
- Popover API для создания тултипов, якорящихся на элемент-триггер (сложно, но возможно)
Платформа
- разработчики React Aria поделились, как сделать человеческое выпадающее субменю, чтобы оно случайно не закрывалось во время движения курсора: строится визуальный треугольник, в рамках которого считается, что подменю не должно быть скрыто + по скорости движения предполагается, куда пользователь собрался двигать курсор
@web_platform | Поддержать канал 🤝
🔥15👍11❤2
#Фикшн_веб_платформы
А это React и TypeScript моей молодости, внучок! 👨🦳
Если серьёзно (и выкинуть всякую xml-требуху), то смотрите:
- типы есть;
- всё декларативненько;
- импорты «нативные»;
- UI-лейаут флекс-подобный резиновый был;
- логика отделена от UI, но собрано в одном файле;
- реактивность в каком-то виде, кажется, тоже была;
- ООП, вроде как, тоже было.
Правда загнулось вместе с флешом, но даже сейчас вызывает любопытство.
@web_platform | Поддержать канал 🤝
А это React и TypeScript моей молодости, внучок! 👨🦳
Если серьёзно (и выкинуть всякую xml-требуху), то смотрите:
- типы есть;
- всё декларативненько;
- импорты «нативные»;
- UI-лейаут флекс-подобный резиновый был;
- логика отделена от UI, но собрано в одном файле;
- реактивность в каком-то виде, кажется, тоже была;
- ООП, вроде как, тоже было.
Правда загнулось вместе с флешом, но даже сейчас вызывает любопытство.
@web_platform | Поддержать канал 🤝
🔥13👍9😁5🥴1👻1
#Пульс_веб_платформы 17.05.2024
Новости
- вышел Astro 4.8: добавлена экспериментальная поддержка actions — возможность объявить методы, запускающиеся на бэкенде, и вызывать их напрямую из JS. Что сразу же мне напомнило аналогичную возможность из ASP.NET образца 2008 года под названием PageMethods: это было очень удобно, а главное просто и понятно, тк серверные методы вызываются из JS напрямую, туда наглядно прокидываются нужные данные. Также добавлена экспериментальная возможность в «мидлваре» перехватывать и перенаправлять запрос на другой адрес
- вышел Safari 17.5 (третий большой апдейт в 2024): появились text-wrap: balance, color-scheme: light dark и light-dark(), @starting-style, @import <url> supports(<feature>)
- ситуация с неготовностью экосистемы ESLint к новой версии ESLint 9 привела к созданию особого пакета @eslint/compat, функцией fixupPluginRules из которого можно обернуть старые плагины и обещают, что они заработают внутри 9 версии
- вышел React Compiler, призванный избавить от ручного использования useMemo, useCallback и memo(), но он как героически побеждает проблемы React, так и превносит новые проблемы с тем, что работает только в Strict-mode, несовместим с mobx, несёт чёрную магию на борту
- обновления Chrome 125: поддержан CSS Anchor Positioning, добавлены CSS-функции round(), mod(), and rem(), а также Compute Pressure API
- Screen Wake Lock API поддерживается во всех браузерах: можно указать программно не гасить экран
Проекты
- hugeicons — большая коллекция компонентов иконок: кастомизируются размер, цвет, скругление и иногда вариативность
- eslint-plugin-regexp — плагин ESLint для нахождения ошибок в регекспах
- fuzzysort — быстрый и лёгкий fuzzy-поиск на JS
- Web Platform Dashboard — таблица с данными о поддержке фич платформы в браузерах
Статьи и демки
JS
- принципы SOLID на примере Реакт-компонентов: даже если не называть это какими-то буквами, а руководствоваться принципами здравого смысла, то примеры здравые: не замешивать несвязаные друг с другом вещи, а связанные — наоборот держать вместе, не хардкодить, писать единообразно, просто, не усложнять логику
- и ещё советы по вынесению ответов API, обработки выходных или входных данных в отдельный API-слой приложения
- если вы дизайнер и напрямую не кодите, но при этом хотите вживую «править» сайты, то вот список, чему научиться: выбирать элементы, переключать классы, подписываться на эвенты, менять HTML, собирать данные с форм (бонус дизайн-режим document.designMode = "on")
- если вы пишете либу, даже небольшую, неплохая идея — написать JSDoc для подсветки в IDE, пакетном менеджере, ридми: внутри можно писать текст, типы, теги @param и @returns для описания функций, примеры кода в md, теги @link , @linkcode, @linkplain для ссылок
- один из недооцененных хуков — useDefferedValue — откладывает рендер компонента до более подходящего момента, чтобы, например, если компонент «тяжёлый», улучшить перфоманс или же показать лоадер
- у элементов форм есть полезные методы из коробки: form.elements.namedItem, form.elements.group для радио-групп, app.elements.firstname.defaultValue для получения дефолтного значения инпута
CSS
- range syntax медиа-выражений width >= 48em, width < 48em лучше тем, что не вынуждает писать разные числа min-width: 48em, max-width: 47.99em с возможными «мёртвыми» зонами между разрешениями
- гайд по созданию форм на CSS: сейчас всё в большинстве случае сводится к SVG или же к clip-path: polygon() и mask + gradient
- если взять кастомное свойство типа <integer> и инкрементить его раз в миллисекунду, то у нас есть централизованный счётчик для создания «анимаций» по типу rotate: calc(var(--t) * .001turn); вся соль в том, что с наличием такого счётчика можно синхронизировать несколько анимаций без JS
- фейд-градиент поверх картинки и под текстом border-image: fill 0 linear-gradient(#003, #000)
- Chrome пушит Anchor Positioning API: штука для позиционирования элементов относительно других элементов; вангую, через 1-2 года заработает везде, а пока есть полифилл
@web_platform | Поддержать канал 🤝
Новости
- вышел Astro 4.8: добавлена экспериментальная поддержка actions — возможность объявить методы, запускающиеся на бэкенде, и вызывать их напрямую из JS. Что сразу же мне напомнило аналогичную возможность из ASP.NET образца 2008 года под названием PageMethods: это было очень удобно, а главное просто и понятно, тк серверные методы вызываются из JS напрямую, туда наглядно прокидываются нужные данные. Также добавлена экспериментальная возможность в «мидлваре» перехватывать и перенаправлять запрос на другой адрес
- вышел Safari 17.5 (третий большой апдейт в 2024): появились text-wrap: balance, color-scheme: light dark и light-dark(), @starting-style, @import <url> supports(<feature>)
- ситуация с неготовностью экосистемы ESLint к новой версии ESLint 9 привела к созданию особого пакета @eslint/compat, функцией fixupPluginRules из которого можно обернуть старые плагины и обещают, что они заработают внутри 9 версии
- вышел React Compiler, призванный избавить от ручного использования useMemo, useCallback и memo(), но он как героически побеждает проблемы React, так и превносит новые проблемы с тем, что работает только в Strict-mode, несовместим с mobx, несёт чёрную магию на борту
- обновления Chrome 125: поддержан CSS Anchor Positioning, добавлены CSS-функции round(), mod(), and rem(), а также Compute Pressure API
- Screen Wake Lock API поддерживается во всех браузерах: можно указать программно не гасить экран
Проекты
- hugeicons — большая коллекция компонентов иконок: кастомизируются размер, цвет, скругление и иногда вариативность
- eslint-plugin-regexp — плагин ESLint для нахождения ошибок в регекспах
- fuzzysort — быстрый и лёгкий fuzzy-поиск на JS
- Web Platform Dashboard — таблица с данными о поддержке фич платформы в браузерах
Статьи и демки
JS
- принципы SOLID на примере Реакт-компонентов: даже если не называть это какими-то буквами, а руководствоваться принципами здравого смысла, то примеры здравые: не замешивать несвязаные друг с другом вещи, а связанные — наоборот держать вместе, не хардкодить, писать единообразно, просто, не усложнять логику
- и ещё советы по вынесению ответов API, обработки выходных или входных данных в отдельный API-слой приложения
- если вы дизайнер и напрямую не кодите, но при этом хотите вживую «править» сайты, то вот список, чему научиться: выбирать элементы, переключать классы, подписываться на эвенты, менять HTML, собирать данные с форм (бонус дизайн-режим document.designMode = "on")
- если вы пишете либу, даже небольшую, неплохая идея — написать JSDoc для подсветки в IDE, пакетном менеджере, ридми: внутри можно писать текст, типы, теги @param и @returns для описания функций, примеры кода в md, теги @link , @linkcode, @linkplain для ссылок
- один из недооцененных хуков — useDefferedValue — откладывает рендер компонента до более подходящего момента, чтобы, например, если компонент «тяжёлый», улучшить перфоманс или же показать лоадер
- у элементов форм есть полезные методы из коробки: form.elements.namedItem, form.elements.group для радио-групп, app.elements.firstname.defaultValue для получения дефолтного значения инпута
CSS
- range syntax медиа-выражений width >= 48em, width < 48em лучше тем, что не вынуждает писать разные числа min-width: 48em, max-width: 47.99em с возможными «мёртвыми» зонами между разрешениями
- гайд по созданию форм на CSS: сейчас всё в большинстве случае сводится к SVG или же к clip-path: polygon() и mask + gradient
- если взять кастомное свойство типа <integer> и инкрементить его раз в миллисекунду, то у нас есть централизованный счётчик для создания «анимаций» по типу rotate: calc(var(--t) * .001turn); вся соль в том, что с наличием такого счётчика можно синхронизировать несколько анимаций без JS
- фейд-градиент поверх картинки и под текстом border-image: fill 0 linear-gradient(#003, #000)
- Chrome пушит Anchor Positioning API: штука для позиционирования элементов относительно других элементов; вангую, через 1-2 года заработает везде, а пока есть полифилл
@web_platform | Поддержать канал 🤝
👍24🔥6❤4
#Лаборатория_веб_платформы
Частичный stage файлов в git
Приходилось ли вам работать с длинными JSON-ами в git-е?
Мне вот приходилось, когда в проект внедрялись дизайн-токены. Схема такая: есть «источник правды» в виде хранилища значений разных элементов интерфейса (цвета, размеры шрифтов, параметры теней и тд) в виде плагина к Figma. Из этого хранилища дизайнеры применяют значения в макетах, а для разработки выгружается JSON-файл. Затем файл процессится и из него генерятся кастомные свойства аля
Так вот, на этапе разработки эта JSON-ина была одна и большая. И часто случалось так, что от дизайнеров приходила сразу пачка разнородных изменений в один этот файл. И нужно было как-то отделить мух от котлет, и все текстовые правки одного файла разделить на несколько коммитов в разные ветки.
Руками копировать правки — так себе идея. Тут пригодится возможность git-а делать добавление частичных правок файла в stage.
Когда вы добавляете файл в stage — это на самом деле не целиком файл, а именно конкретное состояние этого файла, его «снепшот». То есть если в файле две текстовые правки, застейджить можно только одну из них, а вторую пока не брать.
Для этого в VSCode нужно перейти в файл, выделить интересующие текстовые правки и выполнить команду
Похожим образом можно также частично откатывать изменения в файлах. Например, что бы подчистить временные логи. Для этого нужно выбрать файл, так же выделить текстовые правки и выполнить команду
Из консольного git-а такое частичное добавление в stage также работает. Для этого есть команда
Для частичного реверта нужна команда
@web_platform | Поддержать канал 🤝
Частичный stage файлов в git
Приходилось ли вам работать с длинными JSON-ами в git-е?
Мне вот приходилось, когда в проект внедрялись дизайн-токены. Схема такая: есть «источник правды» в виде хранилища значений разных элементов интерфейса (цвета, размеры шрифтов, параметры теней и тд) в виде плагина к Figma. Из этого хранилища дизайнеры применяют значения в макетах, а для разработки выгружается JSON-файл. Затем файл процессится и из него генерятся кастомные свойства аля
--ui-element-background-color-default, которые уже используются в стилях.Так вот, на этапе разработки эта JSON-ина была одна и большая. И часто случалось так, что от дизайнеров приходила сразу пачка разнородных изменений в один этот файл. И нужно было как-то отделить мух от котлет, и все текстовые правки одного файла разделить на несколько коммитов в разные ветки.
Руками копировать правки — так себе идея. Тут пригодится возможность git-а делать добавление частичных правок файла в stage.
Когда вы добавляете файл в stage — это на самом деле не целиком файл, а именно конкретное состояние этого файла, его «снепшот». То есть если в файле две текстовые правки, застейджить можно только одну из них, а вторую пока не брать.
Для этого в VSCode нужно перейти в файл, выделить интересующие текстовые правки и выполнить команду
cmd(ctrl)+shift+P > Git: Stage Selected Ranges и в stage уйдут только частичные правки файла, остальные правки останутся в изменённом файле.Похожим образом можно также частично откатывать изменения в файлах. Например, что бы подчистить временные логи. Для этого нужно выбрать файл, так же выделить текстовые правки и выполнить команду
cmd(ctrl)+shift+P > Git: Revert Selected Ranges. Либо в окошке с диффами тыкнуть на дифф и выбрать Revert this change.Из консольного git-а такое частичное добавление в stage также работает. Для этого есть команда
git add -p. Если, к примеру, была правка в двух местах файла, то появится такое сообщение (1/2) Stage this hunk [y,n,q,a,d,j,J,g,/,e,?]?. Выбор y — правка стейджится, n — не стейджится, ? — помощь по остальным вариантам команд.Для частичного реверта нужна команда
git restore -p, которая вызовет такой же интерактивный диалог только с другим вопросом: Discard this hunk from worktree?.@web_platform | Поддержать канал 🤝
👍23🔥6