#такое дня
Вчера 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
Ваша история в IT начинается в Авито 🚀
Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью:
➡️ наставника — подскажет, как мыслить в процессе решения задач;
➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать;
➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее.
Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест.
Условия:
➡️ зарплата и корпоративный ноутбук,
➡️ формат — офис, удалёнка или гибрид,
➡️ от 25 часов в неделю,
➡️ продолжительность — 9 месяцев,
➡️ компенсация питания, консультации с психологами и юристами,
➡️ после стажировки — возможность остаться в команде, если покажите крутой результат.
📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.
Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью:
Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест.
Условия:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👎2🤡2
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
❤26🤩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 #бородач
👍11🤩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 #бородач
👍12
#дайджест недели
Что-то время течёт по-разному. Но дайджест сам себя не напишет!
1️⃣ Понедельник
Стандартные CSS-тени выглядят грубо, ведь когда их придумывали — про эстетику не думали. Андрей Ситник сделал PostCSS-плагин Smooth Shadow, который генерирует мягкие многослойные тени без боли.
Демо: postcss.github.io/postcss-smooth-shadow
https://www.tgoop.com/htmlshit/3880
2️⃣ Вторник
Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.
https://www.tgoop.com/htmlshit/3881
Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles
https://www.tgoop.com/htmlshit/3883
3️⃣ Среда
Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.
https://www.tgoop.com/htmlshit/3884
А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.
https://www.tgoop.com/htmlshit/3886
5️⃣ Четверг
Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.
https://www.tgoop.com/htmlshit/3887
А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.
https://www.tgoop.com/htmlshit/3890
5️⃣ Пятница
Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://www.tgoop.com/htmlshit/3891
А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.
https://www.tgoop.com/htmlshit/3893
6️⃣ Суббота
Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.
https://www.tgoop.com/htmlshit/3895
Что-то время течёт по-разному. Но дайджест сам себя не напишет!
Стандартные CSS-тени выглядят грубо, ведь когда их придумывали — про эстетику не думали. Андрей Ситник сделал PostCSS-плагин Smooth Shadow, который генерирует мягкие многослойные тени без боли.
Демо: postcss.github.io/postcss-smooth-shadow
https://www.tgoop.com/htmlshit/3880
Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.
https://www.tgoop.com/htmlshit/3881
Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles
https://www.tgoop.com/htmlshit/3883
Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.
https://www.tgoop.com/htmlshit/3884
А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.
https://www.tgoop.com/htmlshit/3886
Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.
https://www.tgoop.com/htmlshit/3887
А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.
https://www.tgoop.com/htmlshit/3890
Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://www.tgoop.com/htmlshit/3891
А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.
https://www.tgoop.com/htmlshit/3893
Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.
https://www.tgoop.com/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
❤10
#заметка дня
Программисты обычно живут с ощущением, что они управляют всем. Мы ведь видим всё: где запрос упал, где сервер задыхался, где что-то пошло не так. Мы не просто знаем, как работает система — мы её создали. Какая уж тут неопределённость?
А потом в разговор вступает аналитик. Спокойно, без спешки, и говорит что-то вроде: «Похоже, пользователи не делают то, ради чего вы всё это писали». И становится неловко. Потому что действительно — код работает идеально, но как будто мимо жизни.
У аналитиков другой ракурс. Они не чинят, не деплоят, не рвут прод ночью. Они просто умеют смотреть туда, где заканчивается наша зона контроля. Видеть не поведение системы, а поведение людей. И в этом есть что-то раздражающее и завораживающее одновременно: они вмешиваются в тот уютный мир, где всё можно объяснить логикой.
Недавно читал у Димы Александрова размышления про аналитику — он там разложил весь этот мир на типы команд, роли и подходы. И внезапно стало ясно, что это действительно другая цивилизация. Мы строим системы, они — смыслы. Мы проверяем гипотезы на коде, они — на людях.
И, пожалуй, самое смешное в том, что в какой-то момент ты начинаешь слушать их внимательно. Потому что если уж кто-то и знает, что на самом деле происходит с твоим кодом, то это не ты.
Программисты обычно живут с ощущением, что они управляют всем. Мы ведь видим всё: где запрос упал, где сервер задыхался, где что-то пошло не так. Мы не просто знаем, как работает система — мы её создали. Какая уж тут неопределённость?
А потом в разговор вступает аналитик. Спокойно, без спешки, и говорит что-то вроде: «Похоже, пользователи не делают то, ради чего вы всё это писали». И становится неловко. Потому что действительно — код работает идеально, но как будто мимо жизни.
У аналитиков другой ракурс. Они не чинят, не деплоят, не рвут прод ночью. Они просто умеют смотреть туда, где заканчивается наша зона контроля. Видеть не поведение системы, а поведение людей. И в этом есть что-то раздражающее и завораживающее одновременно: они вмешиваются в тот уютный мир, где всё можно объяснить логикой.
Недавно читал у Димы Александрова размышления про аналитику — он там разложил весь этот мир на типы команд, роли и подходы. И внезапно стало ясно, что это действительно другая цивилизация. Мы строим системы, они — смыслы. Мы проверяем гипотезы на коде, они — на людях.
И, пожалуй, самое смешное в том, что в какой-то момент ты начинаешь слушать их внимательно. Потому что если уж кто-то и знает, что на самом деле происходит с твоим кодом, то это не ты.
Telegram
Ворчливый IT-дед
Кто такие аналитики?
Мы, разработчики, плохо представляем себе, кто такие аналитики. Лишь догадываемся, что есть там продуктовые аналитики, эмэльщики, слышали буквы DS, DL, DWH, BI. Но чем же они все на самом деле занимаются? Про это я поболтал с нашим…
Мы, разработчики, плохо представляем себе, кто такие аналитики. Лишь догадываемся, что есть там продуктовые аналитики, эмэльщики, слышали буквы DS, DL, DWH, BI. Но чем же они все на самом деле занимаются? Про это я поболтал с нашим…
❤6👍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
7 декабря в Петербурге — большая практическая конференция про искусственный интеллект: «Питерский промпт. Вторая серия».
Более 1000 специалистов соберутся обсудить, как внедрять ИИ в задачи бизнеса уже сейчас:
— от маркетинга и продаж до аналитики, автоматизации и контента.
Среди докладов конференции:
— Как автоматизировать бизнес-процессы продаж и контроля качества с помощью AI-технологий, доступных каждому уже сегодня AI в маркетинге: от промптов к процессам.
— Как мы за 2 года перешли от точечной работы с промптами к выстраиванию всех процессов в маркетинге с учётом ИИ
— Как сохранить и увеличить прибыль в 2026 году при росте расходов с помощью искусственного интеллекта (на примере доставки рационов, фитнес-клуба)
— 10 практических решений для повышения эффективности с помощью ИИ, которые работают «здесь и сейчас»
— Хакни нейросети: личный ассистент по любым вопросам 24/7. Мастер-класс по созданию агента, который напишет качественный промпт вместо вас для любой нейросети
— Как связать Google Таблицы и ChatGPT и автоматизировать рутину (ну или вообще что захочется)
💡 Форматы участия: офлайн и онлайн.
Подробности и билеты
по моему промокоду htmlshit скидка 10%
Более 1000 специалистов соберутся обсудить, как внедрять ИИ в задачи бизнеса уже сейчас:
— от маркетинга и продаж до аналитики, автоматизации и контента.
Среди докладов конференции:
— Как автоматизировать бизнес-процессы продаж и контроля качества с помощью AI-технологий, доступных каждому уже сегодня AI в маркетинге: от промптов к процессам.
— Как мы за 2 года перешли от точечной работы с промптами к выстраиванию всех процессов в маркетинге с учётом ИИ
— Как сохранить и увеличить прибыль в 2026 году при росте расходов с помощью искусственного интеллекта (на примере доставки рационов, фитнес-клуба)
— 10 практических решений для повышения эффективности с помощью ИИ, которые работают «здесь и сейчас»
— Хакни нейросети: личный ассистент по любым вопросам 24/7. Мастер-класс по созданию агента, который напишет качественный промпт вместо вас для любой нейросети
— Как связать Google Таблицы и ChatGPT и автоматизировать рутину (ну или вообще что захочется)
💡 Форматы участия: офлайн и онлайн.
Подробности и билеты
по моему промокоду htmlshit скидка 10%
#фишка дня
Как сделать вывод консоли красивеньким?
Очень просто, использовать спецификаторы преобразования!
Прямо как sprintf в Си, ну как вы можете этого не знать?
Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.
А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX
Для тех, кто по ссылкам не ходит, сокращённая версия:
Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.
Полный список спецификаторов есть на MDN.
Красота спасёт мир, котаны!
#console #js #sprintf #бородач
Как сделать вывод консоли красивеньким?
Очень просто, использовать спецификаторы преобразования!
Прямо как sprintf в Си, ну как вы можете этого не знать?
Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.
А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX
Для тех, кто по ссылкам не ходит, сокращённая версия:
console.info(
"%c %cAdobe %cPhotoshop Web%c %c2023.20.0.0%c %c1bba617e276",
"padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)
Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.
Полный список спецификаторов есть на MDN.
Красота спасёт мир, котаны!
#console #js #sprintf #бородач
👍8❤3
#инструмент дня
Ты тоже верстать умеешь лучше, чем рисовать? Say no more!
Библиотека Satori от небезызвестной компании Vercel умеет конвертировать почти любой HTML-макет в SVG: https://github.com/vercel/satori
Зачем это надо?
Ну, например, автоматически генерировать OG-изображения для соцсетей. Или быстро сверстать — буквально — визитку и внедрить ее в ваш дизайн-макет. К слову, тут у кого-то из подписчиков была задача сгенерировать изображения таблиц. Или на карте точки расставлять и потом экспортировать в отчёт.
Короче, крутая штука же.
#svg #html #бородач
Ты тоже верстать умеешь лучше, чем рисовать? Say no more!
Библиотека Satori от небезызвестной компании Vercel умеет конвертировать почти любой HTML-макет в SVG: https://github.com/vercel/satori
Зачем это надо?
Ну, например, автоматически генерировать OG-изображения для соцсетей. Или быстро сверстать — буквально — визитку и внедрить ее в ваш дизайн-макет. К слову, тут у кого-то из подписчиков была задача сгенерировать изображения таблиц. Или на карте точки расставлять и потом экспортировать в отчёт.
Короче, крутая штука же.
#svg #html #бородач
❤8👍4
#такое дня
Насмотревшись на миллион способов отцентрировать текст в нашем рабочем репозитории, я почему-то вспомнил о том, что есть способы сильно проще.
🎉
Извините.
#imagemagick #terminal
Насмотревшись на миллион способов отцентрировать текст в нашем рабочем репозитории, я почему-то вспомнил о том, что есть способы сильно проще.
magick -background lightblue -fill black -font Helvetica -size 800x200 -gravity center caption:"CSS is a scam" -extent 1200x600 text.png
🎉
Извините.
#imagemagick #terminal
🤩9🤡6
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Интерактивный... кликер (?) для изучения типов в TypeScript: Visual Types.
Показывает всё то, что, в общем, есть в хендбуке, но гораздо нагляднее. Где-то просто на примере объектов, где-то — в виде диаграмм и кругов Эйлера.
Дело, конечно, не ограничивается только типами. Есть и объяснение unknown против any, есть условные типы, есть паттерны и даже мапы.
В общем, есть что покликать на вечер, чтобы потом вспоминать :)
#typescript #tool
Интерактивный... кликер (?) для изучения типов в TypeScript: Visual Types.
Показывает всё то, что, в общем, есть в хендбуке, но гораздо нагляднее. Где-то просто на примере объектов, где-то — в виде диаграмм и кругов Эйлера.
Дело, конечно, не ограничивается только типами. Есть и объяснение unknown против any, есть условные типы, есть паттерны и даже мапы.
В общем, есть что покликать на вечер, чтобы потом вспоминать :)
#typescript #tool
👍18
#библиотека дня
Я тут такое нашёл, закачаешься. Очередные выкрутасы с Shadow DOM. На сей раз — метаязык для описания паттернов.
Короче говоря, можно шикарные фоны делать не ограничивая себя возможностями градиентов.
Называется это всё <css-doodle/>: https://css-doodle.com/
Описываем нужный нам паттерн используя правила CSS и простые функции типа flip, reverse, shape, random и так далее, там полновесный декларативный язык.
Огромное число примеров, большое сообщество. Вот, например, автор описывает как сделать классический китайский орнамент на простых flip-invert-reverse функциях: https://yuanchuan.dev/flip-invert-reverse
В общем, потрясающая штука.
#css #pattern #doodle #бородач
Я тут такое нашёл, закачаешься. Очередные выкрутасы с Shadow DOM. На сей раз — метаязык для описания паттернов.
Короче говоря, можно шикарные фоны делать не ограничивая себя возможностями градиентов.
Называется это всё <css-doodle/>: https://css-doodle.com/
Описываем нужный нам паттерн используя правила CSS и простые функции типа flip, reverse, shape, random и так далее, там полновесный декларативный язык.
Огромное число примеров, большое сообщество. Вот, например, автор описывает как сделать классический китайский орнамент на простых flip-invert-reverse функциях: https://yuanchuan.dev/flip-invert-reverse
В общем, потрясающая штука.
#css #pattern #doodle #бородач
❤5
#дайджест недели
Понедельник
Вариативные шрифты: напоминание, что осей вариативности куча — не только жирность. Забавный шрифт Cheee с пачкой настроек, пример на CodePen, разбивка — через GSAP SplitText.
https://www.tgoop.com/htmlshit/3897
Вторник
Кастомный веб-компонент для гитарных аккордов: атрибуты → CSS-переменные, дальше гриды. Работает для любого числа струн и любых инструментов.
https://www.tgoop.com/htmlshit/3899
Среда
Красивый вывод в консоль: спецификатор
https://www.tgoop.com/htmlshit/3901
Четверг
Satori от Vercel превращает HTML в SVG — удобно для OG-картинок, отчётов, визиток, карт.
https://www.tgoop.com/htmlshit/3903
ImageMagick: простой способ центрировать текст через
https://www.tgoop.com/htmlshit/3904
Пятница
Visual Types — интерактивный «кликер» для изучения TypeScript: типы, unknown/any, условные типы, паттерны, диаграммы.
https://www.tgoop.com/htmlshit/3905
Суббота
https://www.tgoop.com/htmlshit/3906
Понедельник
Вариативные шрифты: напоминание, что осей вариативности куча — не только жирность. Забавный шрифт Cheee с пачкой настроек, пример на CodePen, разбивка — через GSAP SplitText.
https://www.tgoop.com/htmlshit/3897
Вторник
Кастомный веб-компонент для гитарных аккордов: атрибуты → CSS-переменные, дальше гриды. Работает для любого числа струн и любых инструментов.
https://www.tgoop.com/htmlshit/3899
Среда
Красивый вывод в консоль: спецификатор
%c + CSS-стили. Именно так Photoshop Web пихает свой логотип прямо в devtools.https://www.tgoop.com/htmlshit/3901
Четверг
Satori от Vercel превращает HTML в SVG — удобно для OG-картинок, отчётов, визиток, карт.
https://www.tgoop.com/htmlshit/3903
ImageMagick: простой способ центрировать текст через
-gravity center и -extent.https://www.tgoop.com/htmlshit/3904
Пятница
Visual Types — интерактивный «кликер» для изучения TypeScript: типы, unknown/any, условные типы, паттерны, диаграммы.
https://www.tgoop.com/htmlshit/3905
Суббота
<css-doodle/> — язык для генеративных паттернов на CSS: flip, reverse, random, shape. https://www.tgoop.com/htmlshit/3906
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Сupercookie — https://github.com/jonasstrehle/supercookie
— показывает почти абсурдный рабочий (но в 2025 году лишь частично) способ отслеживать людей через обычную фавиконку.
Браузер хранит эти маленькие иконки так упорно, что по одному только факту: «запросил он её повторно или нет», можно собрать устойчивый идентификатор.
Кстати, поскольку тема не новая, я решил проверить.
Итак:
1. В Chrome стабильно устойчиво, даже после перезапуска браузера
2. В Chrome Incognito устойчиво в пределах сессии, новая сессия — новый айди.
3. В Firefox устойчиво в пределах сессии. Перезапуск бораузера — новая сессия, новый айди.
4. В Firefox Private Window аналогично инкогнито в Chrome: новое окно — новый айди.
5. В Safari вообще определить не смогло — постоянный редирект :)
Фавиконка уже давно время от времени выстреливает в самых неожиданных местах. Когда-то находили утечки приватного режима в Firefox — браузер сохранял фавиконки даже там, где вообще не должен был ничего помнить. Были случаи, когда соединение, открытое ради favicon, не закрывалось даже после того, как вкладку закрыли.
То есть сама механика суперкуки не падает с неба. И теперь это оформлено в аккуратный POC: заходишь на демо в репозитории, а оно спокойно узнаёт тебя, потому что favicon-кэш живёт своей отдельной жизнью.
И самое ироничное во всём этом: автор сидит и пишет диссертацию, как превратить такую пустяковую деталь интерфейса в стабильный механизм идентификации.
А какова была тема вашей диссертации, котаны? Я вот Шазам копировал.
Если что, есть перевод: https://habr.com/ru/companies/itsumma/articles/542734/
#favicon #security
Сupercookie — https://github.com/jonasstrehle/supercookie
— показывает почти абсурдный рабочий (но в 2025 году лишь частично) способ отслеживать людей через обычную фавиконку.
Браузер хранит эти маленькие иконки так упорно, что по одному только факту: «запросил он её повторно или нет», можно собрать устойчивый идентификатор.
Кстати, поскольку тема не новая, я решил проверить.
Итак:
1. В Chrome стабильно устойчиво, даже после перезапуска браузера
2. В Chrome Incognito устойчиво в пределах сессии, новая сессия — новый айди.
3. В Firefox устойчиво в пределах сессии. Перезапуск бораузера — новая сессия, новый айди.
4. В Firefox Private Window аналогично инкогнито в Chrome: новое окно — новый айди.
5. В Safari вообще определить не смогло — постоянный редирект :)
Фавиконка уже давно время от времени выстреливает в самых неожиданных местах. Когда-то находили утечки приватного режима в Firefox — браузер сохранял фавиконки даже там, где вообще не должен был ничего помнить. Были случаи, когда соединение, открытое ради favicon, не закрывалось даже после того, как вкладку закрыли.
То есть сама механика суперкуки не падает с неба. И теперь это оформлено в аккуратный POC: заходишь на демо в репозитории, а оно спокойно узнаёт тебя, потому что favicon-кэш живёт своей отдельной жизнью.
И самое ироничное во всём этом: автор сидит и пишет диссертацию, как превратить такую пустяковую деталь интерфейса в стабильный механизм идентификации.
А какова была тема вашей диссертации, котаны? Я вот Шазам копировал.
Если что, есть перевод: https://habr.com/ru/companies/itsumma/articles/542734/
#favicon #security
👍8
Yet Another Frontend Night: глубже про AI в реальных проектах Яндекса
Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Главная тема — практическая интеграция AI в фронтенд. Команда Яндекса поделится своими инсайтами, какие нейросетевые инструменты помогают им в работе, как меняется процесс разработки и какие вызовы возникают при решении реальных задач.
Доклады топовых экспертов Яндекса:
— Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
— Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
— Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
— Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
— Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают
Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого
Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется.
Подробности и регистрация
Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Главная тема — практическая интеграция AI в фронтенд. Команда Яндекса поделится своими инсайтами, какие нейросетевые инструменты помогают им в работе, как меняется процесс разработки и какие вызовы возникают при решении реальных задач.
Доклады топовых экспертов Яндекса:
— Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
— Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
— Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
— Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
— Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают
Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого
Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется.
Подробности и регистрация
🤡3👍1