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
👍19❤2
У кого там была шестидневка — лучиков, котаны ❤️
❤36
#дайджест недели
1️⃣ Понедельник
Automator в macOS — мощная, но забытая штука. Можно за пару минут собрать утилиту для превращения видео в гифку с ffmpeg и уведомлением через terminal-notifier. Теперь ты — макось-программист: https://t.iss.one/htmlshit/3868
2️⃣ Вторник
Свойство
3️⃣ Среда
HTML исполнилось 34 года 🎉 А мне — 38. 29 октября 1991 Тим Бернерс-Ли опубликовал документ с первыми 18 тегами. С Днём рождения, HTML! И я: https://t.iss.one/htmlshit/3871
5️⃣ Четверг
Swark — расширение для VS Code, которое строит диаграммы вашего кода с помощью Copilot и Mermaid.js: https://t.iss.one/htmlshit/3872
5️⃣ Пятница
Императивные запросы в Tanstack Query проще, чем кажется. Используйте
На митапе Design System Breakfast рассказал про Storybook Interactions — как писать тесты прямо в сторях и гонять их в Jest или Vitest.
Презентация Google Slides и пост: https://t.iss.one/htmlshit/3875
6️⃣ Суббота
Ахмад Шадид о том, как строить устойчивые секции с container queries, logical properties и flexible gaps.
Современная верстка без медиазапросов: https://t.iss.one/htmlshit/3877
Automator в macOS — мощная, но забытая штука. Можно за пару минут собрать утилиту для превращения видео в гифку с ffmpeg и уведомлением через terminal-notifier. Теперь ты — макось-программист: https://t.iss.one/htmlshit/3868
Свойство
text-align-last позволяет отдельно выровнять последнюю строку текста — мелочь, а красиво. Раньше поддерживалось только в IE, теперь работает и в нормальных браузерах: https://t.iss.one/htmlshit/3870HTML исполнилось 34 года 🎉 А мне — 38. 29 октября 1991 Тим Бернерс-Ли опубликовал документ с первыми 18 тегами. С Днём рождения, HTML! И я: https://t.iss.one/htmlshit/3871
Swark — расширение для VS Code, которое строит диаграммы вашего кода с помощью Copilot и Mermaid.js: https://t.iss.one/htmlshit/3872
Императивные запросы в Tanstack Query проще, чем кажется. Используйте
useQuery с enabled: false и refetch, если нужно вызывать запрос вручную: https://t.iss.one/htmlshit/3874На митапе Design System Breakfast рассказал про Storybook Interactions — как писать тесты прямо в сторях и гонять их в Jest или Vitest.
Презентация Google Slides и пост: https://t.iss.one/htmlshit/3875
Ахмад Шадид о том, как строить устойчивые секции с container queries, logical properties и flexible gaps.
Современная верстка без медиазапросов: https://t.iss.one/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👍8❤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.iss.one/htmlshit/3880
2️⃣ Вторник
Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.
https://t.iss.one/htmlshit/3881
Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles
https://t.iss.one/htmlshit/3883
3️⃣ Среда
Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.
https://t.iss.one/htmlshit/3884
А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.
https://t.iss.one/htmlshit/3886
5️⃣ Четверг
Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.
https://t.iss.one/htmlshit/3887
А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.
https://t.iss.one/htmlshit/3890
5️⃣ Пятница
Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://t.iss.one/htmlshit/3891
А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.
https://t.iss.one/htmlshit/3893
6️⃣ Суббота
Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.
https://t.iss.one/htmlshit/3895
Что-то время течёт по-разному. Но дайджест сам себя не напишет!
Стандартные CSS-тени выглядят грубо, ведь когда их придумывали — про эстетику не думали. Андрей Ситник сделал PostCSS-плагин Smooth Shadow, который генерирует мягкие многослойные тени без боли.
Демо: postcss.github.io/postcss-smooth-shadow
https://t.iss.one/htmlshit/3880
Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.
https://t.iss.one/htmlshit/3881
Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles
https://t.iss.one/htmlshit/3883
Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.
https://t.iss.one/htmlshit/3884
А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.
https://t.iss.one/htmlshit/3886
Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.
https://t.iss.one/htmlshit/3887
А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.
https://t.iss.one/htmlshit/3890
Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://t.iss.one/htmlshit/3891
А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.
https://t.iss.one/htmlshit/3893
Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.
https://t.iss.one/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
#заметка дня
Программисты обычно живут с ощущением, что они управляют всем. Мы ведь видим всё: где запрос упал, где сервер задыхался, где что-то пошло не так. Мы не просто знаем, как работает система — мы её создали. Какая уж тут неопределённость?
А потом в разговор вступает аналитик. Спокойно, без спешки, и говорит что-то вроде: «Похоже, пользователи не делают то, ради чего вы всё это писали». И становится неловко. Потому что действительно — код работает идеально, но как будто мимо жизни.
У аналитиков другой ракурс. Они не чинят, не деплоят, не рвут прод ночью. Они просто умеют смотреть туда, где заканчивается наша зона контроля. Видеть не поведение системы, а поведение людей. И в этом есть что-то раздражающее и завораживающее одновременно: они вмешиваются в тот уютный мир, где всё можно объяснить логикой.
Недавно читал у Димы Александрова размышления про аналитику — он там разложил весь этот мир на типы команд, роли и подходы. И внезапно стало ясно, что это действительно другая цивилизация. Мы строим системы, они — смыслы. Мы проверяем гипотезы на коде, они — на людях.
И, пожалуй, самое смешное в том, что в какой-то момент ты начинаешь слушать их внимательно. Потому что если уж кто-то и знает, что на самом деле происходит с твоим кодом, то это не ты.
Программисты обычно живут с ощущением, что они управляют всем. Мы ведь видим всё: где запрос упал, где сервер задыхался, где что-то пошло не так. Мы не просто знаем, как работает система — мы её создали. Какая уж тут неопределённость?
А потом в разговор вступает аналитик. Спокойно, без спешки, и говорит что-то вроде: «Похоже, пользователи не делают то, ради чего вы всё это писали». И становится неловко. Потому что действительно — код работает идеально, но как будто мимо жизни.
У аналитиков другой ракурс. Они не чинят, не деплоят, не рвут прод ночью. Они просто умеют смотреть туда, где заканчивается наша зона контроля. Видеть не поведение системы, а поведение людей. И в этом есть что-то раздражающее и завораживающее одновременно: они вмешиваются в тот уютный мир, где всё можно объяснить логикой.
Недавно читал у Димы Александрова размышления про аналитику — он там разложил весь этот мир на типы команд, роли и подходы. И внезапно стало ясно, что это действительно другая цивилизация. Мы строим системы, они — смыслы. Мы проверяем гипотезы на коде, они — на людях.
И, пожалуй, самое смешное в том, что в какой-то момент ты начинаешь слушать их внимательно. Потому что если уж кто-то и знает, что на самом деле происходит с твоим кодом, то это не ты.
Telegram
Ворчливый IT-дед
Кто такие аналитики?
Мы, разработчики, плохо представляем себе, кто такие аналитики. Лишь догадываемся, что есть там продуктовые аналитики, эмэльщики, слышали буквы DS, DL, DWH, BI. Но чем же они все на самом деле занимаются? Про это я поболтал с нашим…
Мы, разработчики, плохо представляем себе, кто такие аналитики. Лишь догадываемся, что есть там продуктовые аналитики, эмэльщики, слышали буквы DS, DL, DWH, BI. Но чем же они все на самом деле занимаются? Про это я поболтал с нашим…
❤7👍3🤩1
#статья дня
Гитаристы тут? Нужно ваше мнение!
Вот человек заморочился и сделал (почти, потому что не контейнировал) кастомный компонент для отображения... гитарных аккордов: https://dev.to/madsstoumann/guitar-chords-in-css-3hk8
Ну и кодпен для ясности: https://codepen.io/stoumann/pen/qEEKJYq
Запись получается примерно такая:
JS тут нужен, чтобы распределить кастомные атрибуты по CSS-переменным. После чего в дело вступают гриды.
Очевидно, аккорды можно записывать для чего угодно: от балалайки и укулеле до десятиструнного монстра от Марченко.
Ну, котаны, у кого тут свои гитарные курсы?
#css #guitar
Гитаристы тут? Нужно ваше мнение!
Вот человек заморочился и сделал (почти, потому что не контейнировал) кастомный компонент для отображения... гитарных аккордов: https://dev.to/madsstoumann/guitar-chords-in-css-3hk8
Ну и кодпен для ясности: https://codepen.io/stoumann/pen/qEEKJYq
Запись получается примерно такая:
<fret-board frets="4" strings="6" chord="E Major" class="dusty-blue">
<string-note string="6" open></string-note>
<string-note string="5" fret="2" finger="2"></string-note>
<string-note string="4" fret="2" finger="3"></string-note>
<string-note string="3" fret="1" finger="1"></string-note>
<string-note string="2" open></string-note>
<string-note string="1" open></string-note>
</fret-board>
JS тут нужен, чтобы распределить кастомные атрибуты по CSS-переменным. После чего в дело вступают гриды.
Очевидно, аккорды можно записывать для чего угодно: от балалайки и укулеле до десятиструнного монстра от Марченко.
Ну, котаны, у кого тут свои гитарные курсы?
#css #guitar
👍19❤5