#фишка дня
Когда-то давно я слышал о таком свойстве, как text-align-last.
Что оно делает? Ну, думаю, всё понятно из иллюстрации :)
Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/
С интерактивным примером, как вы любите.
Почему я акцентировал на нём внимание?
Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.
В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(
Но есть же наш уютный канальчик, мы тут всё вспомним :)
#css #thefuturepast #бородач
Когда-то давно я слышал о таком свойстве, как text-align-last.
Что оно делает? Ну, думаю, всё понятно из иллюстрации :)
Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/
С интерактивным примером, как вы любите.
Почему я акцентировал на нём внимание?
Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.
В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(
Но есть же наш уютный канальчик, мы тут всё вспомним :)
#css #thefuturepast #бородач
👍10❤2🤩1
#день_рождения дня
Сегодня День рождения не только лишь у меня, но и у HTML тегов!
29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.
И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.
Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
С Днём рождения, HTML! Ну и я :)
#html #бородач
Сегодня День рождения не только лишь у меня, но и у HTML тегов!
29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.
И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.
Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
С Днём рождения, HTML! Ну и я :)
#html #бородач
50👍34❤9🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
#расширение дня
Странный хештег, если честно. Как расширение сознания. Давайте я расширения разного рода буду лучше как #инструмент дня публиковать.
Короче, на повестке дня — очередной генератор диаграмм, схем кода! Только на сей раз — умный.
Swark — расширение для VS Code. Строит схемы вашего (или не очень) кода, используя мощности Github Copilot чтобы группировать модули и пояснять их предназначение. Под капотом использует Mermaid.js. У этой библиотеки вообще с LLMками случился ренессанс, никто не хотел писать диаграммы текстом, кроме определённых нердов вроде меня.
В общем, надо пробовать!
#tool #diagram #llm
Странный хештег, если честно. Как расширение сознания. Давайте я расширения разного рода буду лучше как #инструмент дня публиковать.
Короче, на повестке дня — очередной генератор диаграмм, схем кода! Только на сей раз — умный.
Swark — расширение для VS Code. Строит схемы вашего (или не очень) кода, используя мощности Github Copilot чтобы группировать модули и пояснять их предназначение. Под капотом использует Mermaid.js. У этой библиотеки вообще с LLMками случился ренессанс, никто не хотел писать диаграммы текстом, кроме определённых нердов вроде меня.
В общем, надо пробовать!
#tool #diagram #llm
👍10
#заметка дня
Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?
Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.
Вот только есть один нюанс: мутацию — опять же, по-определению — нельзя отменить. Если требование изменений ушло на сервер — слишком много телодвижений нужно, чтобы перестать это делать. Нет уверенности в том, что изменения ещё не применились.
Да, даже если мутация, на самом деле, ничего не делает.
А мне надо было, стояла задача подключаться к источникам данных, но иметь возможность это подключение (или несколько) прекратить в любой момент без создания, собственно, токена.
А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.
С мутацией сильно больше телодвижений.
Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.
Ладно, но всё же, как вызвать запрос императивно?
Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:
И используем как обычно:
Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.
Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.
Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.
#react #tanstack #query #бородач
Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?
Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.
Вот только есть один нюанс: мутацию — опять же, по-определению — нельзя отменить. Если требование изменений ушло на сервер — слишком много телодвижений нужно, чтобы перестать это делать. Нет уверенности в том, что изменения ещё не применились.
Да, даже если мутация, на самом деле, ничего не делает.
А мне надо было, стояла задача подключаться к источникам данных, но иметь возможность это подключение (или несколько) прекратить в любой момент без создания, собственно, токена.
А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.
С мутацией сильно больше телодвижений.
Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.
Ладно, но всё же, как вызвать запрос императивно?
Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:
useQuery<TokenResponse>({
enabled: false,
retry: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
refetchInterval: false,
queryKey: ['connecting', dsId, connectionKey],
queryFn: async ({ signal }) => {
signal?.addEventListener('abort', cancelConnection);
...
}
});
И используем как обычно:
const {
data: profile,
refetch: startConnection,
connectionStatus,
isFetching: isFetchingConnection,
isError,
} = useConnect(dataSource, ...);
Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.
Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.
Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.
#react #tanstack #query #бородач
❤6👎1🫡1
#презентация дня
Я тут сегодня успел на митапе побывать! И не просто побывать, а ещё и спикером там был.
Митап — Design System Breakfast, который лидит Варя Степанова — посвящён, как несложно догадаться, дизайн-системам в разных их проявлениях. И сегодня я там презентовал открытую мной недавно возможность писать функциональные и поведенческие тесты прямо в сторях, а потом запускать их в Jest как локально, так и в CI/CD.
И называется эта вся прелесть — Storybook Interactions. И, естественно, одним только Jest дело не ограничивается, скорее даже наоборрот — официальная их рекомендация это использование Vitest и Playwright. Но у нас в команде уже есть сформированная экосистема.
Итак, презентация: https://docs.google.com/presentation/d/1hpAt3y4zE1U8vRhY_IfmM3NEeY8qCe9QdKnQLAJF8oo/edit?usp=sharing
Ну и, конечно же, пример на гитхабе: https://github.com/bekharsky/when-jest-met-storybook
Стек: Vite, React 19, MSW, MUI, React Router, Tanstack Query, Storybook 9 и Jest с SWC.
Если нужно больше подробностей или хотите стрим прямо здесь на канале — требуйте, не стесняйтесь, котаны!
#react #design #storybook #ui #test
Я тут сегодня успел на митапе побывать! И не просто побывать, а ещё и спикером там был.
Митап — Design System Breakfast, который лидит Варя Степанова — посвящён, как несложно догадаться, дизайн-системам в разных их проявлениях. И сегодня я там презентовал открытую мной недавно возможность писать функциональные и поведенческие тесты прямо в сторях, а потом запускать их в Jest как локально, так и в CI/CD.
И называется эта вся прелесть — Storybook Interactions. И, естественно, одним только Jest дело не ограничивается, скорее даже наоборрот — официальная их рекомендация это использование Vitest и Playwright. Но у нас в команде уже есть сформированная экосистема.
Итак, презентация: https://docs.google.com/presentation/d/1hpAt3y4zE1U8vRhY_IfmM3NEeY8qCe9QdKnQLAJF8oo/edit?usp=sharing
Ну и, конечно же, пример на гитхабе: https://github.com/bekharsky/when-jest-met-storybook
Стек: Vite, React 19, MSW, MUI, React Router, Tanstack Query, Storybook 9 и Jest с SWC.
Если нужно больше подробностей или хотите стрим прямо здесь на канале — требуйте, не стесняйтесь, котаны!
#react #design #storybook #ui #test
👍8👎2
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Действительно адаптивный дизайн может быть достигнут только с использованием контейнерных запросов. Ведь ширина экрана это, конечно, прекрасно, но ширина контейнера — это как раз то, что нас всегда волновало.
Ну и ограничиваться одним только вертикально-горизонтально всегда раздражало.
Потому, вашему вниманию — новая статья Ахмада Шадида: «Верстка секций современным CSS».
Автор подробно разбирает, как теперь можно строить гибкие секции без избыточных медиазапросов и хаков. Вместо того чтобы подгонять дизайн под ширину экрана, он предлагает мыслить локально — в пределах блока. Каждая секция сама решает, как ей выглядеть, если становится уже, шире или выше.
Особое внимание уделено таким возможностям, как container queries, logical properties и flexible gaps. Шадид показывает, как всё это помогает создавать действительно устойчивые макеты, которые не ломаются при изменении контента, языка или даже направления текста.
И, как всегда у Ахмада, статья не ограничивается теорией — множество живых демо, аккуратных примеров и пояснений, зачем это всё нужно.
А, ссылка: https://ishadeed.com/article/modern-css-section-layout/
#css #article #container #cqw
Действительно адаптивный дизайн может быть достигнут только с использованием контейнерных запросов. Ведь ширина экрана это, конечно, прекрасно, но ширина контейнера — это как раз то, что нас всегда волновало.
Ну и ограничиваться одним только вертикально-горизонтально всегда раздражало.
Потому, вашему вниманию — новая статья Ахмада Шадида: «Верстка секций современным CSS».
Автор подробно разбирает, как теперь можно строить гибкие секции без избыточных медиазапросов и хаков. Вместо того чтобы подгонять дизайн под ширину экрана, он предлагает мыслить локально — в пределах блока. Каждая секция сама решает, как ей выглядеть, если становится уже, шире или выше.
Особое внимание уделено таким возможностям, как container queries, logical properties и flexible gaps. Шадид показывает, как всё это помогает создавать действительно устойчивые макеты, которые не ломаются при изменении контента, языка или даже направления текста.
И, как всегда у Ахмада, статья не ограничивается теорией — множество живых демо, аккуратных примеров и пояснений, зачем это всё нужно.
А, ссылка: https://ishadeed.com/article/modern-css-section-layout/
#css #article #container #cqw
👍20❤2
У кого там была шестидневка — лучиков, котаны ❤️
❤36
#дайджест недели
1️⃣ Понедельник
Automator в macOS — мощная, но забытая штука. Можно за пару минут собрать утилиту для превращения видео в гифку с ffmpeg и уведомлением через terminal-notifier. Теперь ты — макось-программист: https://t.me/htmlshit/3868
2️⃣ Вторник
Свойство
3️⃣ Среда
HTML исполнилось 34 года 🎉 А мне — 38. 29 октября 1991 Тим Бернерс-Ли опубликовал документ с первыми 18 тегами. С Днём рождения, HTML! И я: https://t.me/htmlshit/3871
5️⃣ Четверг
Swark — расширение для VS Code, которое строит диаграммы вашего кода с помощью Copilot и Mermaid.js: https://t.me/htmlshit/3872
5️⃣ Пятница
Императивные запросы в Tanstack Query проще, чем кажется. Используйте
На митапе Design System Breakfast рассказал про Storybook Interactions — как писать тесты прямо в сторях и гонять их в Jest или Vitest.
Презентация Google Slides и пост: https://t.me/htmlshit/3875
6️⃣ Суббота
Ахмад Шадид о том, как строить устойчивые секции с container queries, logical properties и flexible gaps.
Современная верстка без медиазапросов: https://t.me/htmlshit/3877
Automator в macOS — мощная, но забытая штука. Можно за пару минут собрать утилиту для превращения видео в гифку с ffmpeg и уведомлением через terminal-notifier. Теперь ты — макось-программист: https://t.me/htmlshit/3868
Свойство
text-align-last позволяет отдельно выровнять последнюю строку текста — мелочь, а красиво. Раньше поддерживалось только в IE, теперь работает и в нормальных браузерах: https://t.me/htmlshit/3870HTML исполнилось 34 года 🎉 А мне — 38. 29 октября 1991 Тим Бернерс-Ли опубликовал документ с первыми 18 тегами. С Днём рождения, HTML! И я: https://t.me/htmlshit/3871
Swark — расширение для VS Code, которое строит диаграммы вашего кода с помощью Copilot и Mermaid.js: https://t.me/htmlshit/3872
Императивные запросы в Tanstack Query проще, чем кажется. Используйте
useQuery с enabled: false и refetch, если нужно вызывать запрос вручную: https://t.me/htmlshit/3874На митапе Design System Breakfast рассказал про Storybook Interactions — как писать тесты прямо в сторях и гонять их в Jest или Vitest.
Презентация Google Slides и пост: https://t.me/htmlshit/3875
Ахмад Шадид о том, как строить устойчивые секции с container queries, logical properties и flexible gaps.
Современная верстка без медиазапросов: https://t.me/htmlshit/3877
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍2
#инструмент дня
Стандартные тени в CSS слишком... жёсткие. Когда они все придумывались — всё делалось максимально топорно, в итоге и градиенты у нас линейные и, стало быть, тени.
Об этом информации, в целом, достаточно много. Например, вот: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
В сети имеется достаточное количество генераторов теней, но это дико неудобно. Потому Андрей Ситник написал очередное расширение для так любимого нами PostCSS. Так и называется: Smooth Shadow.
Демо: https://postcss.github.io/postcss-smooth-shadow/
Такое мы любим!
#css #postcss #shadow
Стандартные тени в CSS слишком... жёсткие. Когда они все придумывались — всё делалось максимально топорно, в итоге и градиенты у нас линейные и, стало быть, тени.
Об этом информации, в целом, достаточно много. Например, вот: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
В сети имеется достаточное количество генераторов теней, но это дико неудобно. Потому Андрей Ситник написал очередное расширение для так любимого нами PostCSS. Так и называется: Smooth Shadow.
Демо: https://postcss.github.io/postcss-smooth-shadow/
Такое мы любим!
#css #postcss #shadow
❤11
#ссылка дня
Когда технологии стареют, это почти незаметно — пока не становится поздно. Вроде всё работает, но обновлений безопасности больше нет, старые зависимости перестают собираться, а новые версии библиотек ломают совместимость. Так проект постепенно превращается в мину замедленного действия.
Чтобы не попадать в такие ситуации, существует проект endoflife.date. Он показывает, когда заканчивается поддержка языков, библиотек, фреймворков и систем. Вводишь, например, Node.js или Ubuntu — и сразу видно, какие версии ещё живы, а какие пора обновлять. У них даже есть открытое API, так что можно встроить проверку прямо в CI и получать напоминания автоматически.
Но обновляться стоит с умом. Иногда новая версия приносит несовместимые изменения и кучу головной боли. Поэтому существуют LTS-версии — стабильные ветки, которые поддерживаются дольше обычных и меняются не так резко. На них удобно сидеть, если важна предсказуемость и стабильность.
Простая идея, но в долгосрочной перспективе экономит много времени и нервов.
#lts #support
Когда технологии стареют, это почти незаметно — пока не становится поздно. Вроде всё работает, но обновлений безопасности больше нет, старые зависимости перестают собираться, а новые версии библиотек ломают совместимость. Так проект постепенно превращается в мину замедленного действия.
Чтобы не попадать в такие ситуации, существует проект endoflife.date. Он показывает, когда заканчивается поддержка языков, библиотек, фреймворков и систем. Вводишь, например, Node.js или Ubuntu — и сразу видно, какие версии ещё живы, а какие пора обновлять. У них даже есть открытое API, так что можно встроить проверку прямо в CI и получать напоминания автоматически.
Но обновляться стоит с умом. Иногда новая версия приносит несовместимые изменения и кучу головной боли. Поэтому существуют LTS-версии — стабильные ветки, которые поддерживаются дольше обычных и меняются не так резко. На них удобно сидеть, если важна предсказуемость и стабильность.
Простая идея, но в долгосрочной перспективе экономит много времени и нервов.
#lts #support
1👍9❤7
#ссылка дня
Итак, файлы конфигурации, они же dotfiles.
.bashrc, .zshrc, .vimrc, emacs/.config/emacs, .gitignore
Понятно, почему dotfiles? У всех есть точка в начале названия самого файла или директории до него. В Unix-подобных системах такой файл будет скрыт от файлового менеджера или дефолтной команды списка файлов aka ls.
Какие-то из них отвечают за поведение эмулятора терминала. Какие-то за поведение различных классических и не очень редакторов. Какие-то содержат хитровысосанные алиасы сложных команд... Какие-то влияют на глобальное поведение локальных утилит, того же git-а.
Я когда-то давно дико упарывался по сложной конфигурации своих машин. Эффективность over 9000. Но заметил одну проблему...
На машинах коллег и удаленных серверах эффективность падала до нуля. Я просто привык к своим стандартам.
Так что закончилось это минимальным набором вроде vimrc (все равно вим никто не использует больше) и глобального gitignore.
Так вот, ссылка дня представляет собой сборную солянку различных dotfiles на GitHub. Делитесь, котаны, кто что использует: https://github.com/topics/dotfiles
Может, я что-то упускаю?
#бородач
Итак, файлы конфигурации, они же dotfiles.
.bashrc, .zshrc, .vimrc, emacs/.config/emacs, .gitignore
Понятно, почему dotfiles? У всех есть точка в начале названия самого файла или директории до него. В Unix-подобных системах такой файл будет скрыт от файлового менеджера или дефолтной команды списка файлов aka ls.
Какие-то из них отвечают за поведение эмулятора терминала. Какие-то за поведение различных классических и не очень редакторов. Какие-то содержат хитровысосанные алиасы сложных команд... Какие-то влияют на глобальное поведение локальных утилит, того же git-а.
Я когда-то давно дико упарывался по сложной конфигурации своих машин. Эффективность over 9000. Но заметил одну проблему...
На машинах коллег и удаленных серверах эффективность падала до нуля. Я просто привык к своим стандартам.
Так что закончилось это минимальным набором вроде vimrc (все равно вим никто не использует больше) и глобального gitignore.
Так вот, ссылка дня представляет собой сборную солянку различных dotfiles на GitHub. Делитесь, котаны, кто что использует: https://github.com/topics/dotfiles
Может, я что-то упускаю?
#бородач
❤2👍2🫡2
#статья дня
Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы.
Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить.
Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод.
TL;DR
Google Translate в Chrome при переводе страницы подменяет текстовые узлы (
Как всегда, я рекомендую оригинал. Потому что там полно интерактивных примеров и дополнительной информации по теме.
Правда, финские программисты даже и пытаться не будут...
#translate
Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы.
Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить.
Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод.
TL;DR
Google Translate в Chrome при переводе страницы подменяет текстовые узлы (
TextNode) на элементы <font> (sic!), ломая структуру DOM и работу React. После этого текст перестаёт обновляться при изменении данных, а операции с узлами (removeChild, insertBefore) вызывают ошибки. Обойти проблему можно лишь частично — оборачивая текст в <span> или отключая перевод, что снижает производительность и доступность.Как всегда, я рекомендую оригинал. Потому что там полно интерактивных примеров и дополнительной информации по теме.
Правда, финские программисты даже и пытаться не будут...
#translate
❤7🫡3👍2
#инструмент дня
Наверняка многие сталкивались с проблемой правильного описания и, как результат, поддержки регулярных выражений.
Особенно остро встает вопрос восприятия - правильно ли добавил группу захвата в последовательность условий, какой предполагается вывод, да и впринципе есть ли сейчас в регулярном выражении ошибки.
Да, можно исопльзовать сервисы вроде regex101.com, но ведь хочется не покидая среду разработки.
Недавно появилось отличное решение проблемы - ArkRegex как абстракция над
https://arktype.io/docs/blog/arkregex
Пример из документации:
Однако не обошлось без нюансов - во избежание проблем с производительностью, лучше ограничивать длину и сложность регулярного выражения (скорее всего большинство из вас не столкнутся с этим нюансом).
Если сильно увлечься, потенциально сложный вывод типов может сильно нагружать языковой сервер и typescript начнет с большой задержкой выводить типы проекта из-за сложных регулярных выражений в большом количестве.
Ждём
Наверняка многие сталкивались с проблемой правильного описания и, как результат, поддержки регулярных выражений.
Особенно остро встает вопрос восприятия - правильно ли добавил группу захвата в последовательность условий, какой предполагается вывод, да и впринципе есть ли сейчас в регулярном выражении ошибки.
Да, можно исопльзовать сервисы вроде regex101.com, но ведь хочется не покидая среду разработки.
Недавно появилось отличное решение проблемы - ArkRegex как абстракция над
new RegExp() с выводом пояснительной информации и валидацией в типах Typescripthttps://arktype.io/docs/blog/arkregex
Пример из документации:
import { regex } from "arkregex"
const ok = regex("^ok$", "i")
// Regex<"ok" | "oK" | "Ok" | "OK", { flags: "i" }>
const semver = regex("^(\\d*)\\.(\\d*)\\.(\\d*)$")
// Regex<`${bigint}.${bigint}.${bigint}`, { captures: [`${bigint}`, `${bigint}`, `${bigint}`] }>
const email = regex("^(?<name>\\w+)@(?<domain>\\w+\\.\\w+)$")
// Regex<`${string}@${string}.${string}`, { names: { name: string; domain: `${string}.${string}`; }; ...>
Однако не обошлось без нюансов - во избежание проблем с производительностью, лучше ограничивать длину и сложность регулярного выражения (скорее всего большинство из вас не столкнутся с этим нюансом).
Если сильно увлечься, потенциально сложный вывод типов может сильно нагружать языковой сервер и typescript начнет с большой задержкой выводить типы проекта из-за сложных регулярных выражений в большом количестве.
Ждём
tsgo и существенного прироста производительности, чтобы не думать о нюансах.ArkType
ArkType Docs
TypeScript's 1:1 validator, optimized from editor to runtime
❤5👍2
#такое дня
Вчера Apple выкатила сорсмапы своей новой веб-версии AppStore прямо в продакшен. И, естественно, оно утекло.
Естественно, репа уже грохнута. Естественно, у меня есть копия. И вообще, её довольно интересно смотреть!
Да и клоны вовремя успели создать, например этот репозиторий.
Но для начала, чтобы этот пост не был таким уж бесполезным, слито всё было с помощью Chrome-расширения Save All Resources. Как минимум, мы знаем теперь, что оно работает!
Итак, что же интересного в исходниках?
Ну, для начала, это Svelte. Неожиданно? Да не сказать. Apple любит не-мейнстримовые фреймворки (да-да, фанаты Svelte, двух фреймворков достаточно). Начинали они со SproutCore в то время, когда везде был Angular и Backbone, а продолжили моей любовью — Ember.js. Как минимум, Apple Music был на нём написан.
Во-вторых, авторы не стесняются комментариев в коде. И нет, это не ИИ-комментарии, там всё по делу. Но в мире, где принято писать самодокументирующийся код, это неожиданно.
В-третьих мне, как — в основном — React-разработчику очень необычно видеть весьма странную структуру репозитория и настолько огромные компоненты. Но то такое.
Ну и в-четвёртых, у них, похоже, свой фреймворк для стейта, роутинга, запросов — Jet. Пока сложно сказать, насколько эффективный.
Естественно, утечка подняла в очередной раз миллион вопросов вроде: «Если код всё равно будет на клиенте, какая разница, обфуцированный он, или нет». Как минимум, фишингу отсутствие исходников никак не мешает.
Мнения, котаны?
#apple #svelte
Вчера Apple выкатила сорсмапы своей новой веб-версии AppStore прямо в продакшен. И, естественно, оно утекло.
Естественно, репа уже грохнута. Естественно, у меня есть копия. И вообще, её довольно интересно смотреть!
Да и клоны вовремя успели создать, например этот репозиторий.
Но для начала, чтобы этот пост не был таким уж бесполезным, слито всё было с помощью Chrome-расширения Save All Resources. Как минимум, мы знаем теперь, что оно работает!
Итак, что же интересного в исходниках?
Ну, для начала, это Svelte. Неожиданно? Да не сказать. Apple любит не-мейнстримовые фреймворки (да-да, фанаты Svelte, двух фреймворков достаточно). Начинали они со SproutCore в то время, когда везде был Angular и Backbone, а продолжили моей любовью — Ember.js. Как минимум, Apple Music был на нём написан.
Во-вторых, авторы не стесняются комментариев в коде. И нет, это не ИИ-комментарии, там всё по делу. Но в мире, где принято писать самодокументирующийся код, это неожиданно.
В-третьих мне, как — в основном — React-разработчику очень необычно видеть весьма странную структуру репозитория и настолько огромные компоненты. Но то такое.
Ну и в-четвёртых, у них, похоже, свой фреймворк для стейта, роутинга, запросов — Jet. Пока сложно сказать, насколько эффективный.
Естественно, утечка подняла в очередной раз миллион вопросов вроде: «Если код всё равно будет на клиенте, какая разница, обфуцированный он, или нет». Как минимум, фишингу отсутствие исходников никак не мешает.
Мнения, котаны?
#apple #svelte
❤10👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Я бы сказал, #офигеть дня. Возможно, вы помните этот пример, его во многих пабликах презентовали как «ад разработчика».
Так вот. Вы не поверите. Его смогли запрограммировать!
Давайте я сразу пруф дам, а потом уже к делу и о чём я вообще. Вот ссылка, можно подёргать.
Итак, инструмен, который помог создать это творение, называется TypeGPU. Что он делает?
Он конвертирует TypeScript в GLSL. Да, в язык описания шейдеров! Точнее, в WGSL — WebGPU Shading Language.
Ну то есть понимаете, что происходит? Вы описываете логику так, как привыкли на TypeScript — с некоторыми особенностями шейдеров (например, дикая параллельность вычислений) — и получаете на выходе разделённый на логику и шейдеры код!
Можно начать с простого примера градиента, чтобы хоть немного в это въехать. Но, конечно, это не за один вечер :)
Я обожаю такие проекты. Стирают все грани и вдохновляют.
#typescript #webgpu #webgl #glsl #wgsl
Я бы сказал, #офигеть дня. Возможно, вы помните этот пример, его во многих пабликах презентовали как «ад разработчика».
Так вот. Вы не поверите. Его смогли запрограммировать!
Давайте я сразу пруф дам, а потом уже к делу и о чём я вообще. Вот ссылка, можно подёргать.
Итак, инструмен, который помог создать это творение, называется TypeGPU. Что он делает?
Он конвертирует TypeScript в GLSL. Да, в язык описания шейдеров! Точнее, в WGSL — WebGPU Shading Language.
Ну то есть понимаете, что происходит? Вы описываете логику так, как привыкли на TypeScript — с некоторыми особенностями шейдеров (например, дикая параллельность вычислений) — и получаете на выходе разделённый на логику и шейдеры код!
Можно начать с простого примера градиента, чтобы хоть немного в это въехать. Но, конечно, это не за один вечер :)
Я обожаю такие проекты. Стирают все грани и вдохновляют.
#typescript #webgpu #webgl #glsl #wgsl
❤28🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.
2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:
Пример: https://codepen.io/alinaki/pen/VwRMpPY
И раньше это не работало в Chrome, до версии 125. Просто потому что ребята их Chrome решили сделать сразу тригонометрию, забыв про простую арифметику.
Ну и ещё вариант...
3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR
И секрет будет в правиле:
Всем шахмат, котаны :)
#css #trick #math #бородач
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
width: calc(95vmin + -1*mod(95vmin, 15px));
Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.
2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:
min-width: round(95vmin,15px);
Пример: https://codepen.io/alinaki/pen/VwRMpPY
И раньше это не работало в Chrome, до версии 125. Просто потому что ребята их Chrome решили сделать сразу тригонометрию, забыв про простую арифметику.
Ну и ещё вариант...
3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR
И секрет будет в правиле:
grid-template-columns: repeat(auto-fill, 15px);
Всем шахмат, котаны :)
#css #trick #math #бородач
👍12🤩3❤2
#новость дня
CENTI CONF: Frontend Day — 21 ноября, Москва
Остановите всё: офлайн-день фронтенда, который стоит посетить.
Centicore Group собирает frontend- и Angular-специалистов — настоящих, с опытом на реальных проектах.
Что будет
— Разборы реальных кейсов от ведущих разработчиков.
— Неформальное общение со спикерами в лаунж-зонах и на afterparty.
— Темы: генеративные UI, Computer Science во фронтенде, сигналы в Angular, и честное резюме без «подкруток».
Для кого
Для frontend- и Angular-разработчиков уровня middle, middle+, senior, teamlead. А также всех, кто хочет вырасти в профессии и поговорить с людьми, которые реально пишут код.
📍 Москва, ул. Новодмитровская, д. 1, стр. 23
🕥 21 ноября 2025 г., 10:30 (МСК)
💸 1000 ₽
🔗 https://events.centicore.ru
CENTI CONF: Frontend Day — 21 ноября, Москва
Остановите всё: офлайн-день фронтенда, который стоит посетить.
Centicore Group собирает frontend- и Angular-специалистов — настоящих, с опытом на реальных проектах.
Что будет
— Разборы реальных кейсов от ведущих разработчиков.
— Неформальное общение со спикерами в лаунж-зонах и на afterparty.
— Темы: генеративные UI, Computer Science во фронтенде, сигналы в Angular, и честное резюме без «подкруток».
Для кого
Для frontend- и Angular-разработчиков уровня middle, middle+, senior, teamlead. А также всех, кто хочет вырасти в профессии и поговорить с людьми, которые реально пишут код.
📍 Москва, ул. Новодмитровская, д. 1, стр. 23
🕥 21 ноября 2025 г., 10:30 (МСК)
💸 1000 ₽
🔗 https://events.centicore.ru
👍3
#инструмент дня
Я не знаю, насколько для вас знакома картина, как на иллюстрации, но всё же.
Итак, что там изображено? Там изображён лог вывода терминала. То есть, условно, запустил я 100 тестов, чтобы проверить их стабильность. И вывод упавших тестов положил в файл.
Если бы я просто в терминале за этим наблюдал — я бы получил подсвеченный текст: ошибки, результат тестирования, общий вывод консоли. И это всё обозначается так называемыми escape sequence aka «управляющая последовательность».
Управляющая посредственность, гг
Ну вам они знакомы по, например, регулярным выражениям и командам терминала: «заэскейпить кавычки». Вот так:
Короче, понадобилось мне эти логи проанализировать. Агент-то тоже работает, но и самому надо. И в VS Code оно открывается, как на картинке.
И решение оказалось простым! Расширение ANSI Colors. Открыли файл, выбрали ANSI Preview в командной панели — и вы великолепны.
Очень удобно.
#vscode #ansi #escape
Я не знаю, насколько для вас знакома картина, как на иллюстрации, но всё же.
Итак, что там изображено? Там изображён лог вывода терминала. То есть, условно, запустил я 100 тестов, чтобы проверить их стабильность. И вывод упавших тестов положил в файл.
Если бы я просто в терминале за этим наблюдал — я бы получил подсвеченный текст: ошибки, результат тестирования, общий вывод консоли. И это всё обозначается так называемыми escape sequence aka «управляющая последовательность».
Управляющая посредственность, гг
Ну вам они знакомы по, например, регулярным выражениям и командам терминала: «заэскейпить кавычки». Вот так:
"\"". Только в терминале это управляет в том числе цветом и выглядит чуть сложнее. Короче, понадобилось мне эти логи проанализировать. Агент-то тоже работает, но и самому надо. И в VS Code оно открывается, как на картинке.
И решение оказалось простым! Расширение ANSI Colors. Открыли файл, выбрали ANSI Preview в командной панели — и вы великолепны.
Очень удобно.
#vscode #ansi #escape
👍12❤1
#инструмент дня
Ох что я вам нашёл! Просто пушка.
Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.
Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!
Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.
Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda
Демо: https://eruda.liriliri.io/
В принципе, выглядит как сильно упрощённая копия хромовых вебтулзов и вполне себе может помочь в отладке, особенно учитывая количество всяческих официальных и не очень плагинов от визуализации касаний до пиксель-пёрфект подложки.
В общем, забавная вещь! В какой-то момент может и выручить.
#js #devtools #mobile #бородач
Ох что я вам нашёл! Просто пушка.
Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.
Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!
Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.
Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda
Демо: https://eruda.liriliri.io/
В принципе, выглядит как сильно упрощённая копия хромовых вебтулзов и вполне себе может помочь в отладке, особенно учитывая количество всяческих официальных и не очень плагинов от визуализации касаний до пиксель-пёрфект подложки.
В общем, забавная вещь! В какой-то момент может и выручить.
#js #devtools #mobile #бородач
👍13🤩1
#дайджест недели
Что-то время течёт по-разному. Но дайджест сам себя не напишет!
1️⃣ Понедельник
Стандартные CSS-тени выглядят грубо, ведь когда их придумывали — про эстетику не думали. Андрей Ситник сделал PostCSS-плагин Smooth Shadow, который генерирует мягкие многослойные тени без боли.
Демо: postcss.github.io/postcss-smooth-shadow
https://t.me/htmlshit/3880
2️⃣ Вторник
Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.
https://t.me/htmlshit/3881
Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles
https://t.me/htmlshit/3883
3️⃣ Среда
Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.
https://t.me/htmlshit/3884
А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.
https://t.me/htmlshit/3886
5️⃣ Четверг
Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.
https://t.me/htmlshit/3887
А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.
https://t.me/htmlshit/3890
5️⃣ Пятница
Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://t.me/htmlshit/3891
А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.
https://t.me/htmlshit/3893
6️⃣ Суббота
Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.
https://t.me/htmlshit/3895
Что-то время течёт по-разному. Но дайджест сам себя не напишет!
Стандартные CSS-тени выглядят грубо, ведь когда их придумывали — про эстетику не думали. Андрей Ситник сделал PostCSS-плагин Smooth Shadow, который генерирует мягкие многослойные тени без боли.
Демо: postcss.github.io/postcss-smooth-shadow
https://t.me/htmlshit/3880
Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.
https://t.me/htmlshit/3881
Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles
https://t.me/htmlshit/3883
Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.
https://t.me/htmlshit/3884
А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.
https://t.me/htmlshit/3886
Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.
https://t.me/htmlshit/3887
А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.
https://t.me/htmlshit/3890
Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://t.me/htmlshit/3891
А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.
https://t.me/htmlshit/3893
Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.
https://t.me/htmlshit/3895
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Почти забытая рубрика!
Вариативные шрифты давно с нами, но вот весёлых вариантов применения пока не так много. Учитывая разворот индустрии в сторону более формальной коммуникации на лендингах, страницы с ошибками — это то немногое, где ещё можно развернуться.
Ну и вообще, весьма интересное напоминание, что вариативность в шрифтах не ограничивается одной лишь жирностью — осей вариативности может быть много! И задаются они создателем шрифта. Стандартных не так-то и много: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings
Мне ещё не очень понятно, кто заставляет создателей стандартов на шрифты экономить буквы: wght — серьёзно?
В данном случае у нас шрифт Cheee, у которого какое-то невероятное число осей, ну и ссылка на кодпен: https://codepen.io/Grooo/pen/ZMdqOb
А на символы это всё разбито плагином GSAP — SplitText.
#css #font #variation
Почти забытая рубрика!
Вариативные шрифты давно с нами, но вот весёлых вариантов применения пока не так много. Учитывая разворот индустрии в сторону более формальной коммуникации на лендингах, страницы с ошибками — это то немногое, где ещё можно развернуться.
Ну и вообще, весьма интересное напоминание, что вариативность в шрифтах не ограничивается одной лишь жирностью — осей вариативности может быть много! И задаются они создателем шрифта. Стандартных не так-то и много: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings
Мне ещё не очень понятно, кто заставляет создателей стандартов на шрифты экономить буквы: wght — серьёзно?
В данном случае у нас шрифт Cheee, у которого какое-то невероятное число осей, ну и ссылка на кодпен: https://codepen.io/Grooo/pen/ZMdqOb
А на символы это всё разбито плагином GSAP — SplitText.
#css #font #variation
❤11