\n\nПотом в Chrome 32 появились Promise. Затем обновились стандарты. И уже в Chrome 50 метод play() стал возвращать промис вместо того, чтобы синхронно выполнить запуск медиа. То есть ваш код сломался и выдаёт эксепшн, который даже даёт ссылку на специальную страничку https://developer.chrome.com/blog/play-request-was-interrupted.\n\nЕщё один пример, немного с другого бока подсвечивает эту же проблему. Люди издревле желали стилизовать скроллбары. Поэтому в Chrome появился целое семейство свойств для стилизации (::-webkit-scrollbar, ::-webkit-scrollbar-track…), в которых можно было задавать ширину или высоту скроллабара (в пикселях!), его цвет фона. Потом это дело ушло вариться в стандарты, ранние черновики были реализованы в Firefox: это были свойства scrollbar-width и scrollbar-color. Причём в scrollbar-width уже нельзя было задавать значения в пикселях (только thin или auto), а scrollbar-color принимал два цвета через пробел (для фонового цвета трека и «таскалки»). И вот так оно и жило где-то с 64 версии FF до наших дней: для стилизации в FF использовался «правильный» вариант с scrollbar-width/scrollbar-color, а в Chrome работали вендорные префиксы.\n\nЧто же могло пойти не так? В Chrome 121 завезли (https://developer.chrome.com/docs/css-ui/scrollbar-styling) так же стандартные scrollbar-width и scrollbar-color! И ваш код, хоть и не упал, но начал работать по-другому, так как скроллбары стали другими, и хорошо, если просто стали другими. В целом не то чтобы критично. Но возможно сегодня где-то в далёком офисе одинокий разработчик сдувает пыль с давнего проекта и добавляет хак, чтобы всё оставалось как раньше, и в Chrome по-прежнему применялась только стилизация через вендорные префиксы:\n\n\n@media screen and (min--moz-device-pixel-ratio:0) {\n .scrollable_styled {\n scrollbar-width: thin;\n scrollbar-color: gray transparent;\n }\n}\n\n.scrollable_styled::-webkit-scrollbar {\n width: 8px;\n}\n\n.scrollable_content::-webkit-scrollbar-thumb {\n background-color: gray;\n}\n\nDirected by robert b weide 🥁\n\nА для тех, кто дочитал до конца, приятный бонус: список задепрекейченых и выпиленных платформенных API: JS, HTML, CSS.","datePublished":"2024-01-30T07:01:16Z","dateModified":"2024-01-30T07:01:16Z","author":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"publisher":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":359},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1319491913-web_platform/posts/78","url":"https://telemetr.io/en/channels/1319491913-web_platform/posts/78","mainEntityOfPage":"https://telemetr.io/en/channels/1319491913-web_platform/posts/78","headline":"Фронтвестник 26.01.2024 Новости - состоялось заседание рабочей группы по веб-компонентам W3C, результаты: Dec…","articleBody":"Фронтвестник 26.01.2024\n\nНовости\n- состоялось заседание рабочей группы по веб-компонентам W3C, результаты: Declarative Shadow DOM появится в Firefox 123 в конце февраля (эта фича, позволяющая использовать Shadow DOM напрямую в HTML без вызова attachShadow() из JS); начнёт разрабатываться Scoped Element Registries, позволяющий создавать элементы с одинаковым именем в рамках одной страницы; Container Style Queries быть во всех движках в ближайшем будущем 🎉\n- грядущие нововведения в «клиентском» Реакте: use(Promise) — саспендинг на клиенте; use(Context) — такой же, как useContext, но можно вызывать в условиях; хуки и апи для работы с формами Form Actions, useFormState, useFormStatus; а также useOptimistic — специальный хук, чтобы смотреть на «классический» Реакт с оптимизмом\n- обновления в Chrome 121: появились свойства scrollbar-color и scrollbar-width (раньше работало только в FF, так что если у вас были стили только для FF в Хроме тоже внезапно включится!); font-palette для управления цветовыми шрифтами; псевдоэлементы ::spelling-error и ::grammar-error для стилизации ошибок; Speculation Rules API для программного префетча и пререндера страниц в классических MPA; showPicker() для программного выпадения (кажется, я когда-то ждал этого, но так давно, что уже забыл)\n- вышел Safari 17.3: пофикшен @supports и цвет каретки на iOS, закольцовывание медиа с нулевой длиной и другие мелочи\n\nПроекты\n- bun shell — возможность запускать shell-скрипты в JS (с помощью и во славу Bun)\n- workerpool — централизованный способ выгрузить воркеры (если у вас их много разных) в отдельный пул с очередью выполнения\n- partytown — запуск 3d-party скриптов в воркере (для выгрузки Google Tag Manager, Google Analytics, Amplitude из основного потока)\n\nСтатьи и демки\n\nJS\n- как отделить 0 от null и undefined: напоминание про разницу операторов || и ??\n- c AbortController.abort() удаляет разом несколько обработчиков событий (не нужно писать множество removeListener, yay!)\n- если вы захотите обновиться на 18 Реакт, возможно вам тоже придётся сделать что-то из того, что уже сделали в команде SonarQube\n- Реакт-стартеры в 2024: Vite, Next или Astro?\n- возможная замена проп-дриллингу — {children}\n- туториал по Next.js App Router от мейнтейнера Node.js и webpack: минималистично и интерактивно\n- как уменьшить размер бандла — рецепты с разных сторон: мониторинг через Lighhouse, Sentry; анализ с помощью Webpack Bundle Analyzer, Statoscope, bundlephobia; распространённые приёмы — отключить сорсмапы, оптимизировать импорты библиотек типа lodash, выделение чанков, динамические импорты и фреймворкоспецифичные подходы типа React.lazy\n\nCSS\n- частичный фейд текста с помощью градиентов (именно текста, а не покрывающий слой!): способы с mask-image и background-clip: text\n- сборник мелких, точных (и злых) «CSS-однострочников», которые уже можно заносить в проекты (и за это не придётся оправдываться): aspect-ratio, object-fit, margin-inline, text-underline-offset…\n- ещё одна подборка юзкесов селектора :has(): делаем выборку родителя, предыдущего сиблинга, по количеству элементов, в любом месте или всё, кроме меня\n- в догонку к предыдущему пункту демка с плавным переходом между радио-кнопками, которая стала возможна в CSS благодаря :has()\n- в 123 Chrome появится свойство field-sizing, авторасширяющее инпуты и текстареа при вводе длинного текста (неужели это когда-нибудь свершится, боже)\n\nHTML, SVG\n- эффект движущейся линии по скроллу на SVG элементах , и \n- чтобы улучшить метрику CLS достаточно просто один раз в день… задавать размеры в атрибутах width и height (и без px)\n- aria-hidden в жизни: для сокрытия визуальных декоративных элементов, скрывает интерактивные элементы не всегда, aria-hidden !== aria-hidden=\"true\"\n\nПлатформа\n- рецепты как выключить браузерное кеширование в серверных заголовках, HTML, htaccess, PHP и других бэкендах\n- каталог известных (и не очень) дизайн-систем на случай, если вам понадобится впечатлить коллег проведённым обширным ресёрчем","datePublished":"2024-01-26T15:58:25Z","dateModified":"2024-01-26T15:58:25Z","author":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"publisher":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":384},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1319491913-web_platform/posts/77","url":"https://telemetr.io/en/channels/1319491913-web_platform/posts/77","mainEntityOfPage":"https://telemetr.io/en/channels/1319491913-web_platform/posts/77","headline":"Окей, когда что-то нужно перестроить в интерфейсе при изменении разрешения экрана, используется media query в…","articleBody":"Окей, когда что-то нужно перестроить в интерфейсе при изменении разрешения экрана, используется media query в CSS.\n\nНо бывают случаи, когда просто что-то изменить в стилях недостаточно. Например, нужно перемонтировать компонент, запрос отправить на сервер за дополнительными данными или ещё что-то в этом духе.\n\nПервая мысль, как поступить в этой ситуации — подписаться на resize окна и смотреть в хендлере, нужная сейчас ширина окна или нет.\n\n\n\nfunction handleResize() {\n if (window.innerWidth >= width) {\n // setIsGreaterThanOrEqual whatever\n }\n}\n\nwindow.addEventListener('resize', handleResize);\n\nПроблема такого подхода в том, что резайз будет срабатывать на каждом изменившемся пикселе размера окна, и триггерить перерисовку. Что не есть хорошо если нужно отследить только факт условного «сейчас мобилка или нет?». \n\nТриггерить только срабатывание определённого условия ширины можно… теми же mediaQuery, только в JS. Для этого существет API window.matchMedia https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia, который принимает строку с медиавыражением и возвращает объект MediaQueryList, содержащий информацию о медиавыражении, применённом к документу.\n\n\n\nconst matchQueryList = window.matchMedia(\"(max-width: 600px)\")\n\n\nДля разовой проверки соответствия используется свойство matches:\n\n\n\nmatchQueryList.matches // true or false\n\n\nА для постоянного отслеживания соответствия, есть подписка на событие change:\n\n\n\nfunction handleChange(e) {\n // e.matches whatever\n}\n\nmatchQueryList.addEventListener(\"change\", handleChange)\n\n\nДля Реакта всё это заворачивается в хук и получается удобное отслеживание медиавыражений в JS:\n\n\n\nfunction App() {\n const isMobile = useMatchMedia(\"(max-width: 768px)\");\n\n return

Browsing with {isMobile ? \"mobile\" : \"desktop\"}

;\n}\n\nКод тут https://codesandbox.io/p/devbox/frosty-mcclintock-93ghzg","datePublished":"2024-01-23T07:00:28Z","dateModified":"2024-01-23T07:00:28Z","author":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"publisher":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":463},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1319491913-web_platform/posts/76","url":"https://telemetr.io/en/channels/1319491913-web_platform/posts/76","mainEntityOfPage":"https://telemetr.io/en/channels/1319491913-web_platform/posts/76","headline":"Фронтвестник 19.01.2024 Новости - в Safari TP 186 допиливают @scope, добавили align-content для табличных яче…","articleBody":"Фронтвестник 19.01.2024\n\nНовости\n- в Safari TP 186 допиливают @scope, добавили align-content для табличных ячеек и сделали анимируемым свойство content-visibility\n- обновилась Node v20.11.0 (LTS): появились esm import.meta.dirname и import.meta.filename на замену CommonJS __filename и __dirname\n- вышел Prettier 3.2: поддержан формат файлов jsonc (если вы, также как и я не знали, что это такое, — это творение Microsoft, json с комментами // и /**/)\n- вышел Next.js 14.1 — ускорен стартап и Turbopack, улучшен вывод ошибок, добавлена поддержка нативных window.history.pushState и window.history.replaceState, логирование использования кэша, расширены возможности работы с картинками\n- в TS 5.4 появится новый тип NoInfer, чтобы блокировать инфер пришедшего типа\n\nПроекты\n- The AHA Stack — всем панкрок! или Astro, htmx и Alpine.js объединились в банду, шатают SPA-мир и хотят вернуть веб-разработке простые ментальные модели и воркфлоу (интересно, доколе ещё ждать наступления прекрасного будущего?!)\n- remote-storage — localStorage с сохранением на удалённый сервер (даже бесплатный, чтобы вы туда насохраняли инфы, а потом душили жабку за подписку, которая вскоре появится)\n- templ — серверный рендеринг HTML на Go (внутри можно редерить и React-компоненты) \n- worker-timers — таймеры, которые не фризятся при неактивном окне за счёт выноса в worker\n- dep-tree — 3d визуализация внутренних связей проекта\n- symbiotejs — а что если вы завтра проснётесь и React окажется дурным сном, а все приложения вокруг будут написаны близко к нативным API, без прятания за абстракциями и «магических ящиков»\n\nСтатьи и демки\n\nJS\n- новомодные написанные на Rust линтеры (oxlint, biome…) быстры в том числе потому, что не интегрированы с TS type checking API, которое, увы, довольно медленное, но зато фичёвое\n- ещё одно напоминание, что в Google Chrome во второй половине 2024 будут отключены сторонние (3d-party) куки, что поломает Google же Analytics, Google Pixel, инструменты ретаргетинга…, но в целом останутся ещё другие безкукисовые инструменты, чтобы показать вам баннер с рекламой кредитной карты — опыт команды Sentry\n- React Server Components не требует наличия сервера или Анонс курса Дэна Абрамова «Нейминг от бога» (а Astro, кстати, требует)\n- с помощью Clipboad API можно копипастить не только текст, но и картинки в PNG, гайд как это сделать на React\n- как с помощью современных JS-рантаймов (bun, deno, node) собрать самодостаточный выполняемый файл\n- золотое правило написания тестов: «Тест должен не проходить, тогда и только тогда, когда цель системы не выполнена.», то есть в тесте не стоит вдаваться в детали имплементации, а сфокусировать один тест только на одной цели\n- сравнение либ типизированной проверки данных: Zod vs Valibot\n- querySelector отличается от getElementById тем, что не признаёт id начинающиеся с цифры\n\nCSS\n- набор молодого интернационалиста: margin-inline, dir, :lang() и writing-mode\n- на что способно свойство border-image: полупрозрачный фейд, скошенный фон на весь экран, градиентные бордеры\n- ещё один способ центровки контента без обёртки — max-width: max-content; margin-inline: auto\n- юзкейсы скролл-анимации с помощью animation-timeline (пока только в Chrome)\n- способы описания кастомных easing-функций в JS для Web Animations API: предвычисление массива keyframes, новая функция linear(), а также предложение добавить встроенную функцию document.registerTimingFunction\n\nHTML\n- чтобы убрать элемент от показа в описании сайта в гугл-поиске нужно добавить тегу атрибут data-nosnippet\n\nПлатформа\n- прошедший год у npm: 184 миллиарда скачиваний пакетов в месяц; март самый активный месяц по публикации версий пакетов; топ зависимостей — TS, react, eslint, @types/node, react-dom, jest, prettier; самое длинное возможное название пакета из 214 символов\n- как выводить в консоль браузера анимированные 3D-SVG картинки и стилизованный текст, а также бонусом либа для определения открытости консоли и факт, что console.table(['foo']) растягивается на всю ширину консоли","datePublished":"2024-01-19T19:58:03Z","dateModified":"2024-01-19T19:58:03Z","author":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"publisher":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":444},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1319491913-web_platform/posts/75","url":"https://telemetr.io/en/channels/1319491913-web_platform/posts/75","mainEntityOfPage":"https://telemetr.io/en/channels/1319491913-web_platform/posts/75","headline":"Сейчас уже нет Настоящего Айкидо. В наше время айкидо называется, когда два чудака лупят друг друга пятками в…","articleBody":"Сейчас уже нет Настоящего Айкидо. В наше время айкидо называется, когда два чудака лупят друг друга пятками в челюсть или ломают друг другу суставы, или не знаю, чем они там ещё занимаются, не видел никогда.\n\nА Настоящее Айкидо — оно было совсем другое. Оно заключалось в том, чтобы победить Неприятеля так, чтобы самому не сильно напрягаться. Для этого даже не обязательно с этим Неприятелем встречаться.\n\nВот скажем принесли вам в разработку макеты с Неведомой Фичей. Как её сделать — хз, нет понимания.\n\nПриходит вам в голову мысль, как реализовать эту фичу с помощью Костылей. «Что поделать, инженерия — она такая», — думаете вы и берётесь за работу. В процессе к одному Костылю приходится прилепить ещё парочку и скрепить это для прочности подручными материалами. В общем, вы по ходу встречаете всё большие сложности и затем героически с ними боретесь. Получившееся решение громоздкое, хрупкое, но время на него уже потрачено, выкинуть жалко, да и в целом оно работает (почти всегда), так что что уж тут, оставляем.\n\nВроде бы вы и победили, но гаденько как-то, нет этого приятного ощущения, ради которого вы когда-то давно вообще этим всем начали заниматься. Это не Настоящее Айкидо.\n\nЛибо же вы ищете похожую задачу на Стэковерфлоу или спрашиваете у Чат-бота. И таким образом вы находите «Либу, которая решит все ваши проблемы». Правда помимо вашей задачи она решает ещё и парочку других проблем по пути, ну и тянет набор зависимостей на 500кб. Но это ладно, думаете вы, фичу-то надо сделать ещё вчера. «Ок, для временного решения сойдёт», — решаете вы и используете либу.\n\nА потом, спустя год-другой нужно вам зависимости проекта обновить и вы находите эту либу, вспоминаете что к чему, хотите версию этой либы заодно поднять. Но либа уже заброшена владельцем и вообще новым Реактом не поддерживается. «Что поделать, надо выпиливать», — думаете вы и снова оказываетесь в самом начале.\n\nЭто не победа, Неприятель вас обхитрил, притворился побеждённым и вам снова нужно с ним сражаться. Это тоже не путь Настоящего Айкидо.\n\nА как бы поступил Мастер Настоящего Айкидо? Он бы сел, подумал и вспомнил, что Браузер, для которого он пишет программу, уже и сам умеет в нужную фичу. И вот Мастер на митинге скажет «Это умеет Платформа», а потом возьмёт и напишет несколько строк кода, чтобы дёрнуть нужный браузерный API, закроет задачу и пойдёт пить чай. И его решение никогда не протухнет, ведь Платформа всегда обратно совместима.\n\nМастер Настоящего Айкидо прилагает большего всего сил, чтобы освоить базу, и затем стремится к применению усвоенных принципов. А когда ему приходит мысль, что ему всё ясно, то он говорит себе: «Этого недостаточно», и идёт дальше копать Базу. 🥷","datePublished":"2024-01-16T07:01:00Z","dateModified":"2024-01-16T07:01:00Z","author":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"publisher":{"@type":"Organization","name":"Веб-платформа","url":"https://telemetr.io/en/channels/1319491913-web_platform","image":"https://img.tlmtr.io/c/1ris7D/5471923326382368728?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3730},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}}]}

Веб-платформа

2 122

Конечные автоматы Когда создаётся некая система, обычно естественно думать о том, что эта система будет делать, какие выполнять действия, что она поможет достичь. То есть продумываются целевые действия пользователя, что он он будет делать, куда переходить, какие кнопки нажимать. В целом, это ок подход. Он хорошо работает на прямолинейных сценариях с несложной логикой. В случае системы со сложным поведением, если её спроектировать исходя из действий, то тогда в программе начнут появляться «режимы работы», «флаги» isSomething… и хитроспетения условий с комбинациями значений этих флагов. Если ветвлений и состояний более 8-10, то тогда сложно создать и держать в голове ментальную модель, код на флагах и ифах превращается в плохо структурированную кашу, в которой легко допустить ошибку или логическую дыру. В этом случае приходит на помощь проектирование системы исходя из её состояний и переходов между ними, а не из выполняемых функций. Такая система и есть конечный автомат, то есть система с конечным числом состояний. Самый простой автомат состоит из двух состояний: выключено → включено. Чтобы перейти из одного состояний в другое вызывается action. Например, человек «спит» → вызывается action «пробудиться» → человек «бодрствует». Ключевая фишка такого подхода к описанию работы системы — можно на одной схеме изобразить все состояния и переходы между ними в виде такого «пошагового визарда», в котором видно всё одновременно. На фронте для реализации конечных автоматов есть классная либа xState. Автор либы из Microsoft, и она появилась, чтобы было проще поддерживать редактор workflows в Azure. На самом деле такое случается сплошь и рядом, когда появляется некая развесистая система, в которой могут разобраться только её авторы, так как в неё сложно въехать, объять умом целиком. И если есть общая диаграмма работы, то больше шансов, что человек с улицы сможет её раскурить. Например, посмотрите на вот эту схему, попробуйте нажать «Simulate» в правом верхнем углу и прогоните программу от начала до конца. Так уже сходу и стало более-менее понятно, что в ней происходит? А теперь если добавить, что из этой схемы сразу же генерится и код автомата, который можно скопировать в проект, допилить напильником и он будет работать, то получается прям бомба-пушка. Кстати, для VS Code есть визуализация прям внутри редактора, оч удобно прочекать, где куда и что идёт, это «живая документация». Что ещё интересного есть в xState. Между состояниями могут быть guards, которые в зависимости от результата поведут в одну сторону или в другую. Поддерживается TS и асинхронная логика. Есть интеграция с React, Vue, Svelte. Также авторы стали развивать либу в сторону actor-ов: это такой архитектурный паттерн, когда система представляется неким действующим лицом, актором, которое выполняет действия, может взаимодействовать с другими акторами и тд. В общем, если у вас уже запутанная система или вы собираетесь заниматься системой с множественными состояниями, советую приглядеться к xState ✌️. @web_platform | Поддержать канал 🤝

2.1k38135

analytics

Веб-платформа

2 122

Фронтвестник 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 используйте одинарные кавычки ' или &quot; Платформа - в Chrome 122 появилась улучшенная поддержка Speculation Rules API: это переосмысленный, более выразительный и автоматизированный последователь link="prerender" с исчерпывающим описанием, какие ресурсы и какой очерёдности прелоадить и пререндерить - 35 лет назад Тим Бернес Ли описал «спецификацию интернета» — Information Management: A Proposal @web_platform | 🤝 Поддержать канал 🤝

4911014

analytics

Веб-платформа

2 122

Ad

Нанесения пользы пост В 2024 году исполнилось 10 лет, как я работаю в эдтехе. Те, кто знают меня давно, в курсе, что я «стоял у истоков» HTML Academy. И если вы когда-нибудь участвовали в движухах Академии, то мы с вами так или иначе «пересекались»: в тренажёрах, интенсивах или наставничестве. Сейчас я продолжаю работать в обучении, но теперь уже в школьном сегменте, и лидю продуктовую команду в одном из образовательных подразделений VK: мы делаем инструменты для учителей, методистов и учеников, чтобы они они могли учить и учиться более современно. В образование меня привело желание наносить пользу в сфере, в которой я разбираюсь — веб-технологиях. Блог, в котором вы сейчас читаете этот пост, уже, кажется, четвёртая или пятая его реинкарнация. И в каждом случае я доношу до читателей примерно один и тот же мотив: веб-платформа — одна из крутейших технологий мира; веб-технологии широки, разнообразны и с ними очень увлекательно работать; нет пределов совершенству на пути веб-разработчика, можно копать вглубь, вширь и чем дальше заходишь, тем интереснее становится. Почему я веду блог? Мне дико нравится делиться знаниями, интересными находками и доносить до людей вот эту самую исследовательскую искру, которая не даёт стухнуть в рутине вдолгую. Зачем я веду блог? Я руководствуюсь идеей, что открытость, шеринг знаний создаёт условия для развития доверия и понимания, от которых в итоге выигрывают все в игре с ненулевой суммой. Короче, это мой вклад, который делает мир чуточку лучше. Когда я создал блог в Телеге, я сразу решил, что в нём не будет рекламы. На мой взгляд это не совсем честно по отношению к читателям продавать их внимание, и это конфликтует с идеей открытости и доверия. Туда же идут разделение контента на платную и бесплатную части (из-за пейволла большинство не увидит годный контент), а также подписочная модель (рано или поздно начинаешь тратить деньги впустую). И, получается, что более честно просто попросить у читателей поддержки. Это мотивирует меня продолжать развивать блог и стартовать новые познавательные движухи в рамках блога. Отдача перезаряжает и добавляет сил на новые свершения! Надеюсь на вашу поддержку ❤️‍🔥

438114

analytics

Веб-платформа

2 122

Фронтвестник 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>, &shy (с последней парочкой нужно быть аккуратными) - скролл-анимация триггерит смену кастомного свойства --animate: true, а по нему применяется Style Query @container style(--animate: true), который анимирует появившийся во вьюпорте элемент — самый блидинг из возможных эджей - хочешь не хочешь, а рано или поздно придёт она — задача на стилизацию печатных страниц, в этом случае пригодится детальный гайд по @page и @media print в разных вариациях Платформа - обширный гайд по скриншотному тестированию с Playwright: самое ценное, пожалуй, что есть рецепт по запуску таких тестов в CI/CD, так как локально, как правило, скриншоты будут немного отличаться в зависимости от ОС - опыт команды Самолёта по оптимизации перфа: есть довольно полный чеклист кандидатом на оптимизацию - из серии «не боги горшки обжигают»: понаблюдать за редизайном сайта nodejs можно тут: новый сайт, макет, обсуждение

4501117

analytics

Веб-платформа

2 122

Анимация без стереотипов Хоть анимация и понимается прежде всего как «оживление», в CSS кроме обычной плавной анимации, есть ещё пара типов — дискретная и никакая (свойство не анимируется). Про неанимируемые свойства понятно из названия. А что за дискретная анимация? В отличие от плавной анимации, когда одно значение может быть интерполировано, суммировано или аккумулировано к другому, в дискретном варианте значение сменяется, но без плавности, а просто в середине кейфрейма становится другим. Свойства с плавной анимацией — это цвета, размеры, отступы и прочие свойства, к которым можно применить плавные переходы. Свойства с дискретнной анимацией — (внезапно) почти все остальные свойства, за некоторым исключением. Ок, как это можно использовать. В этом кейсе я воспринимаю анимацию как механизм переключения значения свойства из одного в другое (с опциональным таймером и повторением N-раз). То есть некий setInterval(() => fn(value)), только в мире CSS. Я полистал список всех CSS-свойств и выбрал несколько, об анимации которых я раньше не задумывался. Например, свойство content. Можно сделать «мигающий курсор»:

div::after {
  animation: blink 1s infinite;
}

@keyframes blink {
  from {
    content: '';
  }
  to {
    content: '|';
  }
}

А учитывая, что content в качестве значения поддерживает текст, картинки, кавычки, счётчики, то можно сделать хоть целое слайдшоу 😁 Окей, ещё с помощью дискретной анимации можно собрать свою gif-ку на коленке. Это буквально быстрая смена «кадров» с картинками, как в кино. Если в секунду сменять 10 «кадров», то скорость будет достаточная для создания иллюзии непрерывного движения:

.frame {
  animation: movie 1s infinite;
}

@keyframes movie {
  0% {
    background-image: var(--image-1);
  }

  10% {
    background-image: var(--image-2);
  }

  …
}

Демо собрано тут. Дальше я решил развить тему кинематографа и следующим попробовать анимировать лейаут гридов. Для построения отдельных «кадров» я решил использовать свойство grid-template-areas. Это свойство описывает раскладку грида в декларативном виде. Вот так, к примеру, будет выглядеть начальный «кадр» будущего фильма:

grid-template-areas:
  ". . . . a a a a a . . . ."
  ". . . . . . . . b . . . ."
  ". . . . . . . . b . . . ."
  ". . . . . . . . b . . . ."
  ". . . . c c c c c . . . ."
  ". . . . . . . . d . . . ."
  ". . . . . . . . d . . . ."
  ". . . . . . . . d . . . ."
  ". . . . . . . . d . . . ."
  ". . . . e e e e e . . . .";

Точками в значении grid-template-areas обозначены те области грида, которые не будут закрашены белым, а буквами — те, которые закрашиваются. По ходу «фильма» значение grid-template-areas будет принимать разные значения. А вот подменять эти значения раскладки грида будет CSS-анимация. Для этого нужно прописать раскадровку «фильма» в кейфреймах:

@keyframes movie {
  0% {
    grid-template-areas: …;
  }
  10% {
    grid-template-areas: …;
  }
 
  …
  100% {
    grid-template-areas: …;
  }
}

И затем задать получившуюся анимацию для грид-контейнера .field:

.field {
  animation-name: movie;
  animation-duration: 10s;
  animation-play-state: paused;
  animation-timing-function: step-end;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

Получившийся триллер можно найти тут. И ещё одна деталь про неанимируемые свойства. А что будет, если в кейфреймы положить display: none? Оно применится в конце, начале или середине анимации?

.fade-out {
  animation: fade-out 1s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

Спецификация говорит, что свойство display — not animatable. И для display: none с относительно недавних пор действует особое правило: если анимация «появляет» элемент, то display включается в самом начале, а если анимация элемент скрывает, то display: none применяется в самом конце, после всех остальных транзишнов (демо тут, работает везде)!

37910132

analytics

Веб-платформа

2 122

Фронтвестник 01.03.2024 Новости - вышел Firefox 123: поддерживает Declarative Shadow DOM (теперь поддерживается всеми!), пофикшен Date.parse(), улучшены SVG-градиенты, добавлена поддержка кода 103 Early Hints HTTP для предзагрузки ресурсов - в Mozilla выпустили MDN curriculum — учебный план для разработчиков, чтобы подтянуть базу по фронту: HTML, CSS, JS, доступность, контроль версий, перфоманс, тестирование, фреймворки, тулинг - в Firefox 125 будет доступен Popover API - в Vue отрефакторили систему реактивности и заменили структуры данных, чем уменьшили использование памяти на 56% и улучшили перф на 100-200% (а что, так можно было?) - вышел Git 2.44: более лучшие ребейзы командой git replay, опция --autosquash для сквоша коммитов при обычном, неинтерактивном ребейзе, настройка хинтов и другое Проекты - nue — генератор статических сайтов и аппликух, дерзкий, но честный аналог Astro и Next.js - functional-ui-kit — есть много разных UI-китов, но мало из них классно реализовано и в коде, и в Figma: этот кит из таких - shoelace — ещё один UI-кит, но на этот раз на веб-компонентах (аккуратный, с возможностью использовать совместно с фреймворками) - picocss — минималистичный CSS-фреймворк для стилизации (практически) голого HTML - keyux — либа для добавления управления с клавиатуры к сайту, интегрируется с aria- и role-атрибутами в HTML Статьи и демки JS - подраскрывается концепт slot-ов: в веб-компонентах, Vue и Angular: даже если не использовать их напрямую, иногда полезно иметь в голове такую ментальную модель - оказывается, в JSDoc есть даже продвинутые конструкции типа дженериков, каста типов и implements класса (правда становится нечитаемо быстрее, чем в TS) - как мы докатились до жизни такой: для того, что показать статический лендос нужно 10+ mb JS-кода (а для чата 50+ mb) 🤯 - сравнительный разбор Next.js и Remix, что же выбрать? (не забываем об опции, что можно не выбирать) - сравнительный разбор HTMX и React, что же выбрать? (опять же, можно и не выбирать 😏) - как, упрощенно, работает React Compiler, а также в целом подход к компиляции Static Single Assignment - а что, если не присылать на клиент JSON и строить DOM, а стримить готовый HTML? Такое сложно, но возможно не только для стрима при первой загрузке страницы, но и в рантайме при переходе в View Transitions API CSS - как подогнать стили при использовании View Transitions, чтобы две картинки «бесшовно переходили» одна в другую - в CSS есть константное значение infinity, и с его помощью, наконец-то, можно завершить эту битву раз и навсегда — z-index: calc(infinity), только нужно иметь в виду, что это число зависит от контекста - псевдоэлемент ::backdrop (подложка элемента <dialog>) теперь может наследовать все наследуемые свойства родителей, и кастомные тоже (странно, что раньше не могло) - исчерпывающий гайд по селектору :has: такая читерская неявная связь элементов одновременно и привлекает, и отпугивает своей неявностью - когда нужно использовать data IRL-ы: как обычно, it depends, надо сравнить насколько передача файла по сети добавляет больше байтов (заголовки, обмен сообщениями…), чем строка, закодированная в CSS - когда в кастомном свойстве CSS находится невалидное значение (20px задаётся для цвета, например), то срабатывает механизм Invalid At Computed Value Time (IACVT), который приводит к откату значения до unset Платформа - декларативный shadow DOM пришёл, для чего же он может пригодиться: это некий «ковёр», куда можно замести детали имплементации интерфейсных частей (сомнительно, но окэй) - полезные настройки Git: автосквош и автостэш при ребейзе, автосоздание ветки на сервере при пуше, изменение алогоритма диффов, авторебейз при пулле, автосоздание ветки main вместо master и другое

380101712

analytics

Веб-платформа

2 122

Сегодня вашему вниманию неувядающий дух экспериментов, который завёл меня в дебри режимов наложения CSS. https://telegra.ph/Ukroshchaem-rezhimy-nalozheniya-v-CSS-02-26

39767

analytics

Веб-платформа

2 122

Фронтвестник 23.02.2024 Новости - новости с полей Реакта: впиливают автомемоизацию (React Forget Compiler), Actions на клиенте, работа с <meta> из коробки, директивы "use client" и "use server", а также API для подгрузки статических файлов; всё это уже упаковано в канареечную версию вместе с докой и поедет в мажорной 19 версии - 1 из 5 пакетов в npm на содержит ESM-модули - анонсирован TypeScript 5.4 RC: улучшение в выводе типов, утилитарный тип NoInfer, Object.groupBy и Map.groupBy и другое Проекты - lucia — аутентификация во всех основных JS-рантаймах с адаптерами к БД из коробки - react-virtuoso — либа для быстрой работы с большими списками без проблем с перфомансом (включает также «виртуальные» таблицы, сетки, бесконечный скролл, группировку со стики-хедером) - restore-scroll — либа для восстановления позиции скролла после навигации (не только лишь body, но и любого другого элемента со скроллбаром) - react-strict-dom — экспериментальная встройка StyleX в ReactDOM как часть движения по сближению React Native и React DOM Статьи и демки JS - сравнение методов промисов all(), allSettled(), any() и race(), и от меня напоминание, что появлялись они не все сразу: all() и race() -> allSettled() -> any() в порядке исправления обнаруженных недостатков - как работает Hot Module Replacement (HMR) в сборщиках типа Vite и почему всё это хорошо легло на ESM-модули благодаря мета-информации об импортах/экспортах (import.meta.) - тренды React в 2024 (а скорее саммари событий 2023): Astro — самый быстрый фреймворк, аутентификация — всё ещё горячая тема, React Server Components шатко-валко адоптятся, в мире SPA новый роутер — TanStack Router, Vercel пушит React вперёд, противостояние Turbopack vs Vite и безголовые UI-либы - и саммари результатов разработки Node в 2023: дропнули 14, 16 и 19 версии; добавили в зависимости Ada, simdutf, simdjson; обновили сайт; добавили систему пермишенов; добавили фичи: Single Executable Apps (самодостаточные Nodejs-приложения без необходимости установленной Nodejs в системе), встроенная поддержка .env, WebSocket-клиент и test runner - визуализация распределения значений функции random и других её вариаций - гайд по использованию localStorage: синхронный, хранит не больше 5mb, но проще IndexedDB и быстрее куки — годится для малых данных, которые не нужно постоянно читать/писать; узнал про File System API, который работает только через воркер и про Extension Storage API для хранения данных браузерных расширений - как минимальными силами и зависимостями (только TS) поднять TS-сервер на Node c лайв-релоадом и env-переменными - использование discriminating unions (для более декларативных и разделённых типов) и pattern matching (для укрощения развесистых условий) в TS - анатомия итераторов в JS: встроенные и собственные, синхронные, асинхронные, прокачка объектов, чтобы сделать их итерируемыми CSS - наброс №1 (на серьёзных щщах) на Tailwind как маркетинговый проект, в котором идея «независимых от контента названий классов» была извращена, онбордя пользователей, а затем загоняя в vendor lock-in и заставляя привлекать в экосистему новых адептов - наброс №2 (смешной, слово «fuck» встречается 5 раз) на Tailwind с тем же посылом: если бы в мире был только HTML и Tailwind, а потом бы появился грамотно проданный CSS(!), то все бы начали писать кипятком по концептам, которые в него встроены - Custom Highlight API уже есть в Chrome, Safari 17.2 и даже ночном Firefox, а это значит, что выделять элементы на странице станет проще - работа с анимациями в UI: используем доп потоки, выносим разумно в композитные слои (они потребляют доп память) Платформа - попытка объять в одном тексте необъятное все виды состояний, которые влияют на конечный UI: состояние приложения, данных, страницы, UI-компонентов и элементов самого браузера, параметры и настройки девайсов и состояния самого пользователя 🤯 - если вы уже оптимизировали в ассетах, что могли, можно ещё попробовать подрезать кастомные шрифты, чтобы убрать оттуда неиспользуемые символы (есть ссылки на инструменты анализа и модификации подключенных шрифтов)

4771273

analytics

Веб-платформа

2 122

Фронтвестник 16.02.2024 Новости - вышел Safari TP 188: добавлена поддержка альтернативного синтаксиса свойства content, поддержка supports внутри директивы @import, выпилена поддержка нестандартного resize: auto и много всего мелкого пофикшено - из-за противостояния бюрократии и бигтехов в iOS в Европе перестанут работать PWA, как работают сейчас (по сути останется возможность только создать «закладку» со ссылкой 🤷‍♂️) - мейнтейнер Express решил взбодрить проект и запостил планы на 5, 6 и 7 версии (которые подозрительно напоминают план начать с нового года жизнь заново): больше координации с LST-версиями Ноды, меньше манкипатчинга и использования внутрянок Ноды, официально поддерживаемые типы Проекты - hono — серверный фреймворк для все JS-рантаймов: недавно вышла версия 4, которая во времена Реакта, идущего на сервер, наоборот стала уметь в SSG, клиентские компоненты (c jsx и реактовскими хуками), file-based роутингом и другими плюшками. Безусловно, радует что не next-ом единым! - glaze — если вдруг вам нравится tailwind-подход к написанию стилей, этой либой можно так же «декларативно» описывать GSAP-анимации - tabgod — запуск JS-скрипта одновременно в нескольких табах сразу (для гугления сразу в нескольких гуглах, например) - react-joyride — либа для создания туториалов и онбордингов по сервису - type-fest — набор базовых утилитарных дженерик-типов TS (автор разрешил копипастить код без импорта либы 😊) - tempo — yet another библиотека для работы с датами от команды Formkit Статьи и демки JS - иногда сидишь, думаешь, как пробросить что-то из состояния в DOM или наоборот, и тут, хоба!, можно же пробросить значение в кастомном свойстве! - подход к рефакторингу кода, который оброс множественными ветками условий или кейсов: найти общий паттерн, выделить его в интерфейс и причесать ветки кода так, чтобы каждая имплементировала выделенный интерфейс - как хэндлить события за пределами компонента в Реакте, из которого я узнал в том числе о нативном методе event.composedPath(), выдающие массив всех таргетов, через которых пройдёт событие при всплытии - дружеское напоминание, что Array.prototype.with работает везде и может «заменять» элементы массива немутабельно - новые методы Set.prototype.union, Set.prototype.intersection, Set.prototype.difference и другие (похожие на SQL) методы доступны в Chrome 122+ и Safari 17+ CSS - объёмный (я бы даже сказал) справочник по цветовым пространствам, функциям в CSS от базовых до современных от гугловцев: color(), display-p3, oklch, градиенты, проверка фич в supports() - пока мы тут работу работаем, в CSS тихо варятся нативные mixin-ы и функции - новые функции возведения в степень pow(), квадратный корень sqrt() и другая математика (даже есть примеры!) - задание диапазона жирности насыщенности шрифта с font-weight для вариативных шрифтов - как побороть поведение iOS, когда неправильно определяется цвет скроллбара, и он оказывается белым на белом фоне - на три вещи можно смотреть вечно: на огонь, воду и центровку блоков в CSS — современное прочтение без transform: translate(-50%) - если нужно вставить SVG фоном, можно встроить его прямо в CSS, и оказывается, можно даже не энкодить его в base64 HTML, SVG - ещё одно дружеское напоминание, что элемент <dialog>: 1) поддерживается везде и 2) из коробки имеет центровку, оверлей, закрывается по esc, а также ловит фокус и возвращает его при закрытии - дизейблить кнопки ок, но не совсем ок дизейблить элементы форм (особенно кнопки, тк это ридонли-элементы) Платформа - ежегодное обновление поста Андрея Ситника о том, как подключать favicon (кажется, с каждым годом он всё короче и когда-нибудь схлопнется до 1 строки) - никогда не будет лишним вспомнить или узнать хитрости по работе с гитом: config, blame, diff, rerere (не путать с ололо)

420961

analytics

Веб-платформа

2 122

В повседневном коде с недесятичными форматами чисел сталкиваться приходится редко. Но есть кейс, когда двоичный формат приходится в тему — это битовые карты. То есть можно решить, что определённое число — это не просто число, а обозначение какого-то состояния. Например, у нас есть три слота, они могут быть заполнены или нет. Тогда битовые карты будут выглядеть так:

// все три слота свободны
000

// первый слот занят, остальные свободны
100

// первый и третий слоты заняты, второй свободен
101

Ок, идём дальше. То, что состояния теперь заданы в виде двоичных чисел, даёт возможность применять к ним двоичные операции! Например, это могут быть двоичные И и ИЛИ. Обозначаются они операторами & и |. Двоичные числа сравниваются побитово (первый бит одного числа с первым битом другого, второй бит одного числа со вторым битом другого…). В случае логического И оба бита должны быть равными 1, чтобы в результате получить 1, в остальных случаях будет 0:

0 & 0 === 0
0 & 1 === 0
1 & 0 === 0
1 & 1 === 1

В случае логического ИЛИ любой из битов может быть равен 1, чтобы получить в результате 1:

0 | 0 === 0
0 | 1 === 1
1 | 0 === 1
1 | 1 === 1

И теперь, если вернуться к примеру со слотами, мы можем «складывать» два состояния с помощью побитового ИЛИ: 100 | 001 === 101 (первый занятый слот ИЛИ третий занятый слот — это занятые 1 и 3 слот). А из «суммы» двух состояний можно убрать все состояния, кроме определённого, с помощью побитового И: 101 & 100 === 100 (первый с третьим занятые слоты И первый занятый слот — это первый занятый слот). Теперь к юзкейсу. Вся мякотка маппинга состояний на битовые карты раскрывается в кейсе, когда побитовое ИЛИ используется для создания композиции нескольких отдельных состояний. Представьте, что у нас есть некие состояния:

const MOBILE = 0b0001;
const TABLET = 0b0010;
const LAPTOP = 0b0100;
const DESKTOP = 0b1000;

Можно использовать как просто отдельное состояние, например, MOBILE, так и композицию нескольких состояний, к примеру, MOBILE | LAPTOP (что буквально так и считывается мобайл ИЛИ лаптоп, спасибо TS👋). Это можно использовать для задания динамических ключей объектов:

const objectMap = {
  [MOBILE]: "mobile stuff",
  [LAPTOP]: "laptop stuff",
  [MOBILE | LAPTOP]: "mobile or laptop stuff",
};

Как вы уже, возможно, догадались, распаковать этот ключ можно с помощью логического И (&), обратной операции. Предположим, что нужно отфильтровать только те ключи, в которых есть MOBILE, то есть нужно ко всем ключам применить & MOBILE:

MOBILE & MOBILE === MOBILE 
// у 0b0001 и 0b0001 есть общая 1, получаем 0b0001

LAPTOP & MOBILE === 0
// у 0b0100 и 0b0001 нет общей 1, получаем 0b0000

(MOBILE | LAPTOP) & MOBILE === MOBILE
// у 0b0101 и 0b0001 есть общая 1, получаем 0b0001

Дальше отфильтровываем те значения, ключи которых выдали нули и готово! Вот как выглядит функция-фильтровщик:

function getFilteredValues(objectMap, filterKey) {
  return Object.entries(objectMap)
    .map(([key, value]) => {
      const shouldInclude =
        (key & MOBILE) === filterKey ||
        (key & TABLET) === filterKey ||
        (key & LAPTOP) === filterKey ||
        (key & DESKTOP) === filterKey;
      return shouldInclude ? value : null;
    })
    .filter(Boolean);
}

Полный код примера тут https://codepen.io/juwain/pen/KKEGRrB?editors=0011 Кстати, небольшой оффтоп: обратите внимание на ссылку. Codepen тоже использует битовую карту, чтобы обозначить, какие редакторы по умолчанию скрыть (0), а какие показать (1) 👾 Я использовал такой подход для динамического создания стилей для каждого типа девайса. Иногда стили для соседних девайсов повторялись, не хотелось их дублировать и получилось сгруппировать по типу MOBILE | LAPTOP. Пример (это Styled Components):

${setResponsiveStyles({
  [MOBILE]: css`
    // some only mobile styles
  `,
  [MOBILE | TABLET]: css`
    // some mobile or tablet styles
  `,
  [LAPTOP]: css`
    // some only laptop styles
  `,
  [DESKTOP]: css`
    // some only desktop styles
  `
})}

35010133

analytics

Веб-платформа

2 122

Объяснение 👇 В JS можно записывать числа помимо десятичного формата в двоичном, 8-ричном и 16-ричном. Для этого нужно начать число с 0, а дальше: - поставить B, а после него записать двоичное число, например, 0b10 === 2 - поставить O, а после него записать 8-ричное число, например, 0o10 === 8 - поставить X, а после него записать 16-ричное число, например, 0x10 === 16 0x0 — это 0 в 16-ричном формате, а 0B0 — это тоже ноль, но в двоичном формате. Но ноль любом формате — это всё тот же ноль, поэтому они равны между собой. Завтра будет пост с одним интересным юзкейсом чисел в двоичном формате в JS 🛠️

3191103

analytics

Веб-платформа

2 122

Чему равно сравнение 0X0 === 0B0

Anonymous voting

299

analytics

Веб-платформа

2 122

Фронтвестник 09.02.2024 Новости - вышел Million 3 (кастомный компилятор для React): авторы обещают, что просто выполнив npx million@latest можно добиться ускорения работы Реакта с O(n) до O(1) - вышла jQuery 4.0.0 BETA: без шуток внушительный чейнджлог, в который разве что не влез отказ от IE11 - вышел Vite 5.1: появился экспериментальный режим Vite Runtime API, который позволяет сделать прослойку между сервером и рантаймом и делать там что-то своё, такая мидлваря, но мощная, и отвязанная от сервера; поддержка запуска CSS-препроцессоров в отдельных потоках (перф улушается); более быстрый холодный старт; улучшенная поддержка .css?url и другие фишки - вышел биндинг GSAP для React @gsap/react, включает удобный хук useGASP() - вышел Remix v2.6.0, который однажды утром проснулся и обнаружил, что он превратился в Vite-плагин Проекты - drab — коллекция headless кастомных элементов (для расширения кругозора, что кастомные элементы можно использовать как обёртку как для ui-элемента, так и для процесса, например, prefetch) - svgfm — визуальный конструктор SVG-фильтров, позволяющий собирать фильтры в цепочки (написано на JS!) - baklava — приятная дизайн-система и ui на нативных веб-компонентах без примудростей - replay — «проигрывание» действий в интерфейсе puppetier-ом с помощью Chrome DevTools Recorder (попробуйте, это вкладка есть в девтулзах Хрома) - knip — либа для нахождения неиспользуемых файлов, зависимостей и экспортов в проекте - simple-git-hooks — суперлайтовые и простые гит-хуки, если не нужно сложности и нужна быстрота и простота - npmgraph — визуальное отображение зависимостей проекта в виде интерактивного графа Статьи и демки JS - типобезопасные id в TS с помощью template literal types (`node_${string}`): в комментариях приводят более общее решение через branded types - как Deno изменился за 2023 год, а также кое-что под названием JSR (JavaScript Registry), «смутно напоминающий npm», но с нативной интеграция TS и ESM-only пакетами, автоматически генерируемой документацией - стата о самом востребованном JS-фреймворке: конечно, это React по количеству вакансий; в Бельгии больше всего востребован Vue, а в Швейцарии — Ангуляр (интересно, а отсутствие JS-фреймворка это хоть сколько-нибудь востребовано?) - оказывается есть не только <input type="color"> (везде), но и цветовой пикер new EyeDropper() (в Хроме) - очередной герой самоотверженно бросается в пучину настройки фронтовой монорепы и выясняет, что для него лучшим оказалось сочетание инструментов Turborepo + pnpm - бестпрактисы и юзкейсы переменных окружения .env: можно задавать при запуске ноды, в .env-файлах можно задавать фича-тогглы, переменные для разных окружений и хранить секреты - попытка ещё раз взять и запомнить различия между типами ReactElement, ReactChild и ReactNode - когда может пригодиться as never в TS (спойлер: в этом кейсе не поможет даже as any!) - шоукейс про микрофронты от команды Dodo: в 1 и 2 рассказано, как переходили на SingleSPA + SystemJS, а заодно и на Vite и Vitest - а может и не нужны эти ваши микрофронты и достаточно ограничиться npm modules или даже git submodules? - организация кэша в JS с помощью Cache Storage API и его преимущества перед local storage и indexed db CSS - юзкейсы all: revert-layer: более лайтовый ресет, чем all: revert, точечное восстановление ранее сброшенных значений, а также антихрупкие дефолты для переменных var(--size, revert-layer) - градиентная рамка с помощью linear-gradient и mask - боковая шторка на <dialog> (не обошлось без заворачивания в веб-компонент) - CSS-анимация SVG-элементов и тонкости настройки transform-box и transform-origin HTML, SVG - пятёрка атрибутов, улучшающих UX: hreflang, translate, reversed, controls и autocomplete (в порядке возрастания полезности) Платформа - история о том, как веб нарушил конвенцию квадратных чекбоксов и круглых радиокнопок - дзен и искусство ухода за маком в 2024: чеклист от и до - кто такой и зачем нужен CORS с бонусным списком как не нужно его обходить (принимать всё отовсюду, выключать preflight checks плагинами в браузере и устанавливать mode в no-cors)

4307135

analytics

Веб-платформа

2 122

Недавно мы с Александром, автором канала «Frontend Everyday» , решили подискутировать на тему «Отберёт ли ИИ работу у разработчиков». По моему мнению, в обозримом будущем работа разработчиков существенно изменится. Недавно мне попался рейтинг профессий Job Impact Index, в котором показано на сколько % сейчас та или иная работа затронута ИИ. Так вот, 70% условных задач frontend-разработчика уже сейчас автоматизируется и может быть делегирована (выполнена с помощью) ИИ. Что же там в оставшихся 30% задач? Кастомизация и нешаблонные вещи, высокоуровневые задачи, которые сложно сформулировать, или которые находятся в контексте больших существующих систем, работа на стыках нескольких систем, проприетарщина и тд. Но главное, что входит в эти 30% — это ответственность, которую человек берет на себя за результат. Даже если бы уровень автоматизации был на условных 99%, все равно кто-то должен эту автоматизацию запускать, внедрять и поддерживать. Робот сам по себе не несет ответственности за то или иное решение. Это делает человек, который выбирает решение, предложенное роботом. Ок, давайте представим, куда это всё нас ведёт. Каждый разработчик в единицу времени начинает делать больше, то есть ему для «ручного» режима решения остаются более сложные задачи. Количество выполненных задач растет, растет результативность работы, зона ответственности, растет ценность специалиста для бизнеса и зарплата. Одновременно уменьшает количество людей, необходимых для решения задач, бизнесы срезают косты разработки сокращением количества разработчиков. То есть ИИ неминуемо, прямо или косвенно, в обозримом будущем уменьшает численность команд разработки, лишает многих из нас работы. Это уже происходит прямо сейчас в бигтехах, которые оптимизируют процессы и штат, со временем раскатится и на всех остальных. Бизнесы в основном устроены так, что если можно где-то срезать, то так это и делается, либо вас обходят соптимизированные конкуренты. И мы оказываемся в ситуации, когда люди с определенным опытом, которые могут брать на себя ответственность за крупные задачи и системы (условно «сеньоры»), востребованы и их зарплата продолжает расти. В то же время начинающие разработчики, которые с ходу большую ответственность не могут потянуть (условно «джуны») теряют: во-первых, в деньгах, так как вдобавок растёт конкуренция среди других джунов, а во-вторых, в возможности вообще куда-то устроиться на работу, так как работу делают сеньоры и их дрессированные роботы. Парадоксальность ситуации в том, откуда будут появляться новые сеньоры, если новых джунов в рабочих процессах задействуется всё меньше? Выходит, что путь «органического роста» из джуна в сеньора теперь становится слишком медленным и неудобным для изменившегося процесса работы. И новые сеньоры должны буквально прокачиваться на местах в мегаускоренном темпе «на стероидах». Это может производиться либо с помощью классического прикрепления 1-1 джуна к сеньору (подмастерье <-> мастер), чтобы в максимально синхронном режиме вкатываться в рабочий процесс. Либо, если нужны промышленные масштабы, в некой симулирующей среде (тренажёре, симуляторе, инкубаторе, акселераторе…) джун на решении смоделированных задач ускоренно прокачивается и набирает нужное число часов «налёта» перед выходом в «реальный мир». Возможно даже и одно, и другое по очереди: симулятор -> парная работа. Такие дела. А теперь время пойти почитать, что скажет Александр в @front_everyday и решить, кто же из нас двоих прав. 😊

357363

analytics

Веб-платформа

2 122

Фронтвестник 02.02.2024 Новости - в React 19 появятся нативные custom elements (мама, неужели они решили задепрекейтить jsx?!) - что в последнее время появилось нового в браузерах: <hr> в <select>, HTMLSelectElement.showPicker, стилизация скроллбаров, анимация font-palette, transfer() и transferToFixedLength() у ArrayBuffer - анонсирован Typescript 5.4 beta: улучшение сужениях типов в замыканиях, новый утилитарный тип NoInfer для запрета вывода типов, Object.groupBy и Map.groupBy, улучшение quick-fix, а также анонс грядущих депрекетов в TypeScript 5.0 - минорно обновлены версии Node 18, 20, 21 для фиксов безопасности - в V8 v9.1 выпущена поддержка import assertions (это такое import json from './foo.json' with { type: 'json' }, для того, чтобы не запустить зловредное ПО, маскирующееся под JSON) Проекты - expressive-code — решение для интеграции блоков кода в контенте сайта (для astro, next) - unlazy — универсальная либа для ленивой загрузки картинок (с плейсхолдерами) - веб-компонент авторастягивающейся textarea - анимация прыгающего мяча кучей возможных способов (без JS, на чистом JS, с либами, на canvas, видео и гифка) - type-coverage — мониторинг и зачистка (от any) типов в проекте Статьи и демки JS - мнение, что вся React-движуха завела часть индустрии не туда, отзывается: неестественный для браузера DX, в который двигаются React, Next и иже с ними, оказывают медвежью услугу (и, конечно, зарабатывают на этом), и, в целом, во многих случаях не нужны, так как являются легаси из 2013, когда в браузерах не было шаблонных строк и BFCache - ещё одно мнение, что система, которая вынуждает переписывать кодовую базу каждые 2-3 года — слабая, и напоминание о «правиле минимальной мощности», когда для решения задачи следует выбирать минимально необходимый по мощности язык/систему/технологию - не поверите, ещё одно мнение о том, что стоит попробовать Qwik вместо React (по мне так шило на мыло, нужны другие ментальные модели для написания кода для платформы) - сначала придумывается SSR, потом решается, как же быть, когда нужно узнать что-то из клиентского браузера, а потом придумываются костыли — надёжный план! - попытки замерять Core Web Vitals не только на первой загрузке SPA, но и на последующей клиентской навигации — спец событие soft navigation для PerformanceObserver - pnpm поддерживает страницу с бенчмарками npm, pnpm, yarn (они поддерживают страницу, потому что pnpm быстрый или следят за быстротой pnpm из-за поддержки страницы 🤔) - современный стартер для либы: TS, тесты нативные node:test, билд npm-скриптами, конфиг для CI на GitHub Actions в yml, автодеплой в npm, provenance и секреты - event loop – мифы и реальность: браузерные и небраузерные среды исполнения, почему понятия нет в спеке ECMA-262, макротасков не бывает, а task queue это не очередь, а set - улучшаем качество кода React-приложения с помощью Compound Components CSS - блюрная backdrop-тень с помощью mask, backdrop-filter и box-shadow - если вы всё ещё убираете обводку (outline: 0), то это можно уже не делать, так как есть :focus-visible - попытка объять необъятное шрифтовые единицы измерения длины: cap, ch, em, ex, ic, lh, а также из «рутовые» аналоги rem, rlh, rex, rch, ric и другая магия - выделение текста с помощью скролл-анимации: animation-timeline и background-size - строим тоггл: с :has(), адаптивно, доступно, с «ручками» для кастомизации стилей - анимация цветовых шрифтов font-palette (жаль, что самих шрифтов мало) - анимация движения по линии в SVG с offset-path и offset-distance - свежий взгляд на старую как мир стилизацию <table> HTML, SVG - про тег <abbr> и атрибут title: лучше не использовать и с title, и без него - плохие стороны HTML: лучше НЕ использовать <select multiple>, атрибут title, <datalist>, <input type=number>, <input type=date>, <menu> во избежание проблем Платформа - базовые различия jwt и session-вариантов аутентификации: jwt более модное, но сложнее в реализации, сессия попроще и понадёжнее - что намечается в рамках Interop 2024: хотеть custom properties, declarative shadow DOM, relative color syntax, @starting-style

38617176

analytics

Веб-платформа

2 122

Веб-платформа регламентирована как backwards и forwards совместимая. То есть всё новое, что появляется в платформе не ломает уже имеющееся, и гарантированно должно быть совместимо с будущими изменениями. На деле это вроде как так и есть, но не всегда и не совсем. Работает это так. Вам вдруг приходит задача, что что-то поломалось в коде. Причём в старом коде, который уже давно не менялся и был написан прото-программистами, которые уже давно уволились. Казалось бы, что может пойти не так? А дело в том, что сами браузеры обновляются и в них что-то вдруг начинает работать по-другому. В том числе код, который вам предстоит исправить. Самые «любимые» баги. Как это такое происходит, ведь платформа должна быть обратно совместима? Главным образом так: далеко не всегда сначала появляются стандарты, а потом браузеры пилят фичи по этим каноническим стандартам. Иногда фичи просто пропушиваются вендорами (яркий пример — префиксы -webkit-feature, -moz-feature), а потом уже под них подгоняются стандарты или же они адоптятся стандартами и… всё это обратной волной докатывается до браузеров. Браузеры немного меняют имплементацию и ваш код, который просто работал, становится как бы сломанным. Что поделать, ваш код признан устаревшим и приговаривается к утилизации, приговор обжалованию не подлежит! Но ок, вендорные префиксы были всеми явно признаны как фейл. Есть и более прозаические примеры. Есть такой метод play() у аудио и видео HTML-элементов. Он появился ещё в Chrome 3. Он просто работал и включал медиа. То есть можно было запустить, например, видео и тут же его поставить на паузу, чтобы оно сразу прогрузилось.

<script>
  video.play();
  video.pause();
</script>

Потом в Chrome 32 появились Promise. Затем обновились стандарты. И уже в Chrome 50 метод play() стал возвращать промис вместо того, чтобы синхронно выполнить запуск медиа. То есть ваш код сломался и выдаёт эксепшн, который даже даёт ссылку на специальную страничку https://developer.chrome.com/blog/play-request-was-interrupted. Ещё один пример, немного с другого бока подсвечивает эту же проблему. Люди издревле желали стилизовать скроллбары. Поэтому в Chrome появился целое семейство свойств для стилизации (::-webkit-scrollbar, ::-webkit-scrollbar-track…), в которых можно было задавать ширину или высоту скроллабара (в пикселях!), его цвет фона. Потом это дело ушло вариться в стандарты, ранние черновики были реализованы в Firefox: это были свойства scrollbar-width и scrollbar-color. Причём в scrollbar-width уже нельзя было задавать значения в пикселях (только thin или auto), а scrollbar-color принимал два цвета через пробел (для фонового цвета трека и «таскалки»). И вот так оно и жило где-то с 64 версии FF до наших дней: для стилизации в FF использовался «правильный» вариант с scrollbar-width/scrollbar-color, а в Chrome работали вендорные префиксы. Что же могло пойти не так? В Chrome 121 завезли (https://developer.chrome.com/docs/css-ui/scrollbar-styling) так же стандартные scrollbar-width и scrollbar-color! И ваш код, хоть и не упал, но начал работать по-другому, так как скроллбары стали другими, и хорошо, если просто стали другими. В целом не то чтобы критично. Но возможно сегодня где-то в далёком офисе одинокий разработчик сдувает пыль с давнего проекта и добавляет хак, чтобы всё оставалось как раньше, и в Chrome по-прежнему применялась только стилизация через вендорные префиксы:

@media screen and (min--moz-device-pixel-ratio:0) {
  .scrollable_styled {
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
  }
}

.scrollable_styled::-webkit-scrollbar {
  width: 8px;
}

.scrollable_content::-webkit-scrollbar-thumb {
  background-color: gray;
}

Directed by robert b weide 🥁 А для тех, кто дочитал до конца, приятный бонус: список задепрекейченых и выпиленных платформенных API: JS, HTML, CSS.

3596134

analytics

Веб-платформа

2 122

Фронтвестник 26.01.2024 Новости - состоялось заседание рабочей группы по веб-компонентам W3C, результаты: Declarative Shadow DOM появится в Firefox 123 в конце февраля (эта фича, позволяющая использовать Shadow DOM напрямую в HTML без вызова attachShadow() из JS); начнёт разрабатываться Scoped Element Registries, позволяющий создавать элементы с одинаковым именем в рамках одной страницы; Container Style Queries быть во всех движках в ближайшем будущем 🎉 - грядущие нововведения в «клиентском» Реакте: use(Promise) — саспендинг на клиенте; use(Context) — такой же, как useContext, но можно вызывать в условиях; хуки и апи для работы с формами Form Actions, useFormState, useFormStatus; а также useOptimistic — специальный хук, чтобы смотреть на «классический» Реакт с оптимизмом - обновления в Chrome 121: появились свойства scrollbar-color и scrollbar-width (раньше работало только в FF, так что если у вас были стили только для FF в Хроме тоже внезапно включится!); font-palette для управления цветовыми шрифтами; псевдоэлементы ::spelling-error и ::grammar-error для стилизации ошибок; Speculation Rules API для программного префетча и пререндера страниц в классических MPA; showPicker() для программного выпадения <select> (кажется, я когда-то ждал этого, но так давно, что уже забыл) - вышел Safari 17.3: пофикшен @supports и цвет каретки на iOS, закольцовывание медиа с нулевой длиной и другие мелочи Проекты - bun shell — возможность запускать shell-скрипты в JS (с помощью и во славу Bun) - workerpool — централизованный способ выгрузить воркеры (если у вас их много разных) в отдельный пул с очередью выполнения - partytown — запуск 3d-party скриптов в воркере (для выгрузки Google Tag Manager, Google Analytics, Amplitude из основного потока) Статьи и демки JS - как отделить 0 от null и undefined: напоминание про разницу операторов || и ?? - c AbortController.abort() удаляет разом несколько обработчиков событий (не нужно писать множество removeListener, yay!) - если вы захотите обновиться на 18 Реакт, возможно вам тоже придётся сделать что-то из того, что уже сделали в команде SonarQube - Реакт-стартеры в 2024: Vite, Next или Astro? - возможная замена проп-дриллингу — {children} - туториал по Next.js App Router от мейнтейнера Node.js и webpack: минималистично и интерактивно - как уменьшить размер бандла — рецепты с разных сторон: мониторинг через Lighhouse, Sentry; анализ с помощью Webpack Bundle Analyzer, Statoscope, bundlephobia; распространённые приёмы — отключить сорсмапы, оптимизировать импорты библиотек типа lodash, выделение чанков, динамические импорты и фреймворкоспецифичные подходы типа React.lazy CSS - частичный фейд текста с помощью градиентов (именно текста, а не покрывающий слой!): способы с mask-image и background-clip: text - сборник мелких, точных (и злых) «CSS-однострочников», которые уже можно заносить в проекты (и за это не придётся оправдываться): aspect-ratio, object-fit, margin-inline, text-underline-offset… - ещё одна подборка юзкесов селектора :has(): делаем выборку родителя, предыдущего сиблинга, по количеству элементов, в любом месте или всё, кроме меня - в догонку к предыдущему пункту демка с плавным переходом между радио-кнопками, которая стала возможна в CSS благодаря :has() - в 123 Chrome появится свойство field-sizing, авторасширяющее инпуты и текстареа при вводе длинного текста (неужели это когда-нибудь свершится, боже) HTML, SVG - эффект движущейся линии по скроллу на SVG элементах <linearGradient>, <path> и <clip-path> - чтобы улучшить метрику CLS достаточно просто один раз в день… задавать размеры <img> в атрибутах width и height (и без px) - aria-hidden в жизни: для сокрытия визуальных декоративных элементов, скрывает интерактивные элементы не всегда, aria-hidden !== aria-hidden="true" Платформа - рецепты как выключить браузерное кеширование в серверных заголовках, HTML, htaccess, PHP и других бэкендах - каталог известных (и не очень) дизайн-систем на случай, если вам понадобится впечатлить коллег проведённым обширным ресёрчем

38412102

analytics

Веб-платформа

2 122

Окей, когда что-то нужно перестроить в интерфейсе при изменении разрешения экрана, используется media query в CSS. Но бывают случаи, когда просто что-то изменить в стилях недостаточно. Например, нужно перемонтировать компонент, запрос отправить на сервер за дополнительными данными или ещё что-то в этом духе. Первая мысль, как поступить в этой ситуации — подписаться на resize окна и смотреть в хендлере, нужная сейчас ширина окна или нет.

function handleResize() {
  if (window.innerWidth >= width) {
    // setIsGreaterThanOrEqual whatever
  }
}

window.addEventListener('resize', handleResize);

Проблема такого подхода в том, что резайз будет срабатывать на каждом изменившемся пикселе размера окна, и триггерить перерисовку. Что не есть хорошо если нужно отследить только факт условного «сейчас мобилка или нет?». Триггерить только срабатывание определённого условия ширины можно… теми же mediaQuery, только в JS. Для этого существет API window.matchMedia https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia, который принимает строку с медиавыражением и возвращает объект MediaQueryList, содержащий информацию о медиавыражении, применённом к документу.

const matchQueryList = window.matchMedia("(max-width: 600px)")

Для разовой проверки соответствия используется свойство matches:

matchQueryList.matches // true or false

А для постоянного отслеживания соответствия, есть подписка на событие change:

function handleChange(e) {
  // e.matches whatever
}

matchQueryList.addEventListener("change", handleChange)

Для Реакта всё это заворачивается в хук и получается удобное отслеживание медиавыражений в JS:

function App() {
  const isMobile = useMatchMedia("(max-width: 768px)");

  return <h1>Browsing with {isMobile ? "mobile" : "desktop"}</h1>;
}

Код тут https://codesandbox.io/p/devbox/frosty-mcclintock-93ghzg

46314192

analytics

Веб-платформа

2 122

Фронтвестник 19.01.2024 Новости - в Safari TP 186 допиливают @scope, добавили align-content для табличных ячеек и сделали анимируемым свойство content-visibility - обновилась Node v20.11.0 (LTS): появились esm import.meta.dirname и import.meta.filename на замену CommonJS __filename и __dirname - вышел Prettier 3.2: поддержан формат файлов jsonc (если вы, также как и я не знали, что это такое, — это творение Microsoft, json с комментами // и /**/) - вышел Next.js 14.1 — ускорен стартап и Turbopack, улучшен вывод ошибок, добавлена поддержка нативных window.history.pushState и window.history.replaceState, логирование использования кэша, расширены возможности работы с картинками - в TS 5.4 появится новый тип NoInfer<T>, чтобы блокировать инфер пришедшего типа Проекты - The AHA Stack — всем панкрок! или Astro, htmx и Alpine.js объединились в банду, шатают SPA-мир и хотят вернуть веб-разработке простые ментальные модели и воркфлоу (интересно, доколе ещё ждать наступления прекрасного будущего?!) - remote-storage — localStorage с сохранением на удалённый сервер (даже бесплатный, чтобы вы туда насохраняли инфы, а потом душили жабку за подписку, которая вскоре появится) - templ — серверный рендеринг HTML на Go (внутри можно редерить и React-компоненты) - worker-timers — таймеры, которые не фризятся при неактивном окне за счёт выноса в worker - dep-tree — 3d визуализация внутренних связей проекта - symbiotejs — а что если вы завтра проснётесь и React окажется дурным сном, а все приложения вокруг будут написаны близко к нативным API, без прятания за абстракциями и «магических ящиков» Статьи и демки JS - новомодные написанные на Rust линтеры (oxlint, biome…) быстры в том числе потому, что не интегрированы с TS type checking API, которое, увы, довольно медленное, но зато фичёвое - ещё одно напоминание, что в Google Chrome во второй половине 2024 будут отключены сторонние (3d-party) куки, что поломает Google же Analytics, Google Pixel, инструменты ретаргетинга…, но в целом останутся ещё другие безкукисовые инструменты, чтобы показать вам баннер с рекламой кредитной карты — опыт команды Sentry - React Server Components не требует наличия сервера или Анонс курса Дэна Абрамова «Нейминг от бога» (а Astro, кстати, требует) - с помощью Clipboad API можно копипастить не только текст, но и картинки в PNG, гайд как это сделать на React - как с помощью современных JS-рантаймов (bun, deno, node) собрать самодостаточный выполняемый файл - золотое правило написания тестов: «Тест должен не проходить, тогда и только тогда, когда цель системы не выполнена.», то есть в тесте не стоит вдаваться в детали имплементации, а сфокусировать один тест только на одной цели - сравнение либ типизированной проверки данных: Zod vs Valibot - querySelector отличается от getElementById тем, что не признаёт id начинающиеся с цифры CSS - набор молодого интернационалиста: margin-inline, dir, :lang() и writing-mode - на что способно свойство border-image: полупрозрачный фейд, скошенный фон на весь экран, градиентные бордеры - ещё один способ центровки контента без обёртки — max-width: max-content; margin-inline: auto - юзкейсы скролл-анимации с помощью animation-timeline (пока только в Chrome) - способы описания кастомных easing-функций в JS для Web Animations API: предвычисление массива keyframes, новая функция linear(), а также предложение добавить встроенную функцию document.registerTimingFunction HTML - чтобы убрать элемент от показа в описании сайта в гугл-поиске нужно добавить тегу атрибут data-nosnippet Платформа - прошедший год у npm: 184 миллиарда скачиваний пакетов в месяц; март самый активный месяц по публикации версий пакетов; топ зависимостей — TS, react, eslint, @types/node, react-dom, jest, prettier; самое длинное возможное название пакета из 214 символов - как выводить в консоль браузера анимированные 3D-SVG картинки и стилизованный текст, а также бонусом либа для определения открытости консоли и факт, что console.table(['foo']) растягивается на всю ширину консоли

444582

analytics

Веб-платформа

2 122

Сейчас уже нет Настоящего Айкидо. В наше время айкидо называется, когда два чудака лупят друг друга пятками в челюсть или ломают друг другу суставы, или не знаю, чем они там ещё занимаются, не видел никогда. А Настоящее Айкидо — оно было совсем другое. Оно заключалось в том, чтобы победить Неприятеля так, чтобы самому не сильно напрягаться. Для этого даже не обязательно с этим Неприятелем встречаться. Вот скажем принесли вам в разработку макеты с Неведомой Фичей. Как её сделать — хз, нет понимания. Приходит вам в голову мысль, как реализовать эту фичу с помощью Костылей. «Что поделать, инженерия — она такая», — думаете вы и берётесь за работу. В процессе к одному Костылю приходится прилепить ещё парочку и скрепить это для прочности подручными материалами. В общем, вы по ходу встречаете всё большие сложности и затем героически с ними боретесь. Получившееся решение громоздкое, хрупкое, но время на него уже потрачено, выкинуть жалко, да и в целом оно работает (почти всегда), так что что уж тут, оставляем. Вроде бы вы и победили, но гаденько как-то, нет этого приятного ощущения, ради которого вы когда-то давно вообще этим всем начали заниматься. Это не Настоящее Айкидо. Либо же вы ищете похожую задачу на Стэковерфлоу или спрашиваете у Чат-бота. И таким образом вы находите «Либу, которая решит все ваши проблемы». Правда помимо вашей задачи она решает ещё и парочку других проблем по пути, ну и тянет набор зависимостей на 500кб. Но это ладно, думаете вы, фичу-то надо сделать ещё вчера. «Ок, для временного решения сойдёт», — решаете вы и используете либу. А потом, спустя год-другой нужно вам зависимости проекта обновить и вы находите эту либу, вспоминаете что к чему, хотите версию этой либы заодно поднять. Но либа уже заброшена владельцем и вообще новым Реактом не поддерживается. «Что поделать, надо выпиливать», — думаете вы и снова оказываетесь в самом начале. Это не победа, Неприятель вас обхитрил, притворился побеждённым и вам снова нужно с ним сражаться. Это тоже не путь Настоящего Айкидо. А как бы поступил Мастер Настоящего Айкидо? Он бы сел, подумал и вспомнил, что Браузер, для которого он пишет программу, уже и сам умеет в нужную фичу. И вот Мастер на митинге скажет «Это умеет Платформа», а потом возьмёт и напишет несколько строк кода, чтобы дёрнуть нужный браузерный API, закроет задачу и пойдёт пить чай. И его решение никогда не протухнет, ведь Платформа всегда обратно совместима. Мастер Настоящего Айкидо прилагает большего всего сил, чтобы освоить базу, и затем стремится к применению усвоенных принципов. А когда ему приходит мысль, что ему всё ясно, то он говорит себе: «Этого недостаточно», и идёт дальше копать Базу. 🥷

3.7k19202

analytics

Show more