Будни разработчика

#ссылка дня Интерактивный... кликер (?) для изучения типов в TypeScript: Visual Types. Показывает всё то, что, в общем, есть в хендбуке, но гораздо нагляднее. Где-то просто на примере объектов, где-то — в виде диаграмм и кругов Эйлера. Дело, конечно, не ограничивается только типами. Есть и объяснение unknown против any, есть условные типы, есть паттерны и даже мапы. В общем, есть что покликать на вечер, чтобы потом вспоминать :) #typescript #tool

#такое дня Насмотревшись на миллион способов отцентрировать текст в нашем рабочем репозитории, я почему-то вспомнил о том, что есть способы сильно проще.

    
        
magick -background lightblue -fill black -font Helvetica -size 800x200 -gravity center caption:"CSS is a scam" -extent 1200x600 text.png
{}
    

🎉 Извините. #imagemagick #terminal

#инструмент дня Ты тоже верстать умеешь лучше, чем рисовать? Say no more! Библиотека Satori от небезызвестной компании Vercel умеет конвертировать почти любой HTML-макет в SVG: https://github.com/vercel/satori Зачем это надо? Ну, например, автоматически генерировать OG-изображения для соцсетей. Или быстро сверстать — буквально — визитку и внедрить ее в ваш дизайн-макет. К слову, тут у кого-то из подписчиков была задача сгенерировать изображения таблиц. Или на карте точки расставлять и потом экспортировать в отчёт. Короче, крутая штука же. #svg #html #бородач

Боитесь, что ваше решение убьёт проект? Срочно сюда! 13 ноября в 11:00 Ростелеком проведёт «Проектную Исповедь» — ИТ-конференцию в тематике сериала «Разделение». Вы будете искать решения в ситуациях, где нет единственно верного ответа — всё это в формате интерактивного квеста. Сможете влиять на сюжет, участвовать в дебатах и собрать карту лабиринта проектных решений. Спасите свой проект — регистрируйтесь на «Проектную Исповедь» по ссылке.

#фишка дня Как сделать вывод консоли красивеньким? Очень просто, использовать спецификаторы преобразования! Прямо как 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 #бородач

7 декабря в Петербурге — большая практическая конференция про искусственный интеллект: «Питерский промпт. Вторая серия». Более 1000 специалистов соберутся обсудить, как внедрять ИИ в задачи бизнеса уже сейчас: — от маркетинга и продаж до аналитики, автоматизации и контента. Среди докладов конференции: — Как автоматизировать бизнес-процессы продаж и контроля качества с помощью AI-технологий, доступных каждому уже сегодня AI в маркетинге: от промптов к процессам. — Как мы за 2 года перешли от точечной работы с промптами к выстраиванию всех процессов в маркетинге с учётом ИИ — Как сохранить и увеличить прибыль в 2026 году при росте расходов с помощью искусственного интеллекта (на примере доставки рационов, фитнес-клуба) — 10 практических решений для повышения эффективности с помощью ИИ, которые работают «здесь и сейчас» — Хакни нейросети: личный ассистент по любым вопросам 24/7. Мастер-класс по созданию агента, который напишет качественный промпт вместо вас для любой нейросети — Как связать Google Таблицы и ChatGPT и автоматизировать рутину (ну или вообще что захочется) 💡 Форматы участия: офлайн и онлайн. Подробности и билеты по моему промокоду htmlshit скидка 10%

#статья дня Гитаристы тут? Нужно ваше мнение! Вот человек заморочился и сделал (почти, потому что не контейнировал) кастомный компонент для отображения... гитарных аккордов: 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

#заметка дня Программисты обычно живут с ощущением, что они управляют всем. Мы ведь видим всё: где запрос упал, где сервер задыхался, где что-то пошло не так. Мы не просто знаем, как работает система — мы её создали. Какая уж тут неопределённость? А потом в разговор вступает аналитик. Спокойно, без спешки, и говорит что-то вроде: «Похоже, пользователи не делают то, ради чего вы всё это писали». И становится неловко. Потому что действительно — код работает идеально, но как будто мимо жизни. У аналитиков другой ракурс. Они не чинят, не деплоят, не рвут прод ночью. Они просто умеют смотреть туда, где заканчивается наша зона контроля. Видеть не поведение системы, а поведение людей. И в этом есть что-то раздражающее и завораживающее одновременно: они вмешиваются в тот уютный мир, где всё можно объяснить логикой. Недавно читал у Димы Александрова размышления про аналитику — он там разложил весь этот мир на типы команд, роли и подходы. И внезапно стало ясно, что это действительно другая цивилизация. Мы строим системы, они — смыслы. Мы проверяем гипотезы на коде, они — на людях. И, пожалуй, самое смешное в том, что в какой-то момент ты начинаешь слушать их внимательно. Потому что если уж кто-то и знает, что на самом деле происходит с твоим кодом, то это не ты.

#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

#дайджест недели Что-то время течёт по-разному. Но дайджест сам себя не напишет! 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