14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
90% каналов про ИИ - пересказ чужих новостей.
А что если контент делают те, кто строит эти системы?
🥷🏻 NeuroNinja - канал, который ведёт команда инженеров из Яндекса, Тинькова, Озона и Сбера.
Не блогеры. Не инфобизнесмены. Практики, которые каждый день работают с ML, LLM и продуктовым AI.
Что внутри:
🔹 Разборы реальных кейсов из BigTech изнутри
🔹 Гайды по нейросетям от тех, кто их внедряет
🔹 Инструменты и лайфхаки, проверенные в бою
🔹 Честный взгляд на тренды без хайпа
Без рекламы. Без воды. Только то, что реально работает.
👉 Подписаться: /channel/+UuibMa7rB-diNGM6
#фишка дня
А вы знали, что Apple уже очень давно для каждой ноутбука поставляет и 3D-модель?
Кроме шуток, если зайти на страницу продукта с Safari на iPhone, появится возможность посмотреть, например, ноутбук в дополненной реальности. Ясное дело, скачивается 3D-модель. Но эту модель легко вытащить и посмотреть даже на десктопе! Ссылка, нонечно, скрыта, потому лезем в исходники и ищем USDZ-файл.
USDZ расшифровывается как Universal Scene Description Zipped, и придумал был ещё в Pixar. Что значит Zipped? Очевидно, zip-контейнер, а значит, можно распаковать и найти там и модель, и текстуры и карты нормалей.
Но это история давняя, ARKit с нами уже лет 10. Что новое — это то, что начиная с MacBook Neo модель поставляется с возможность конфигурации по цвету и состоянию! Закрыт-открыт, розовый-жёлтый... вот это вот всё.
Можете сами зайти на яблочный сайт и скачать USDZ любого продукта. Как минимум, это забавно. А дальше уже можно и модельки покрутить, если надо.
#apple #3d #ar
Сеньор за полгода? 📈
Эта девушка получила оффер в IT-компанию, хотя весь её опыт — пара курсов с ютуба 😱
Она воспользовалась ИИ-помощником и легко скрыла все свои пробелы в знаниях.
Теперь впереди: ⤵️
удалёнка, стартовое обучение и ставка 55$ в час.
Проходи собеседования вместе с Interview Ninja 🥷
Проверь успех на себе — есть 100 бесплатных запросов на день.
👉 @interview_ninja
#статья дня
Как вообще меняется JavaScript?
В блоге Bloomberg вышла интересная история про Temporal — новый API для дат и времени. Но статья на самом деле не столько про сам API, сколько про то, как такие вещи вообще появляются в языке.
Объект Date появился в JavaScript в 1995 году и, по сути, был просто позаимствован из Java. Тогда это казалось нормальным решением. Спойлер: нет.
Проблема в том, что веб сильно вырос, а Date почти не менялся. Со временем стало понятно, что работать с датами в JavaScript неудобно: таймзоны, переходы на летнее время, странный парсинг строк.
Экосистема ответила библиотеками вроде Moment.js, date-fns и Luxon. Их скачивают десятки миллионов раз в неделю — почти каждый проект как-то решает эту проблему.
В 2017 году появилась идея сделать нормальный API прямо в стандарте. Так началась история Temporal.
Дальше — девять лет обсуждений и доработок. В работе участвовали инженеры из Microsoft, Google, Mozilla, Bloomberg и Igalia. Предложение прошло весь процесс TC39 и в итоге стало крупнейшим добавлением в ECMAScript со времён ES2015.
Любопытная деталь: для реализации Temporal разработчики движков даже сделали общую библиотеку на Rust — temporal_rs. Редкость!
Ещё, конечно, поражает количество тестов.
В общем, это хороший текст про то, как вообще принимаются изменения в современном JavaScript. Стадии, обзоры альтернатив, обсуждения.
Почитать:
https://bloomberg.github.io/js-blog/post/temporal/
Если что, есть и перевод.
#javascript #temporal
#инструмент дня
Иногда мелкие неудобства в разработке настолько привычны, что мы перестаём их замечать. Один из таких примеров — бесконечные localhost:3000, localhost:5173, localhost:8080.
Запускаешь несколько сервисов — фронтенд, API, сторибук, документацию — и через час уже не помнишь, что было на каком порту. Перезапустил сторибук — и он уже на другом.
Бесит.
В Vercel Labs решили попробовать убрать саму причину проблемы и выпустили экспериментальный инструмент Portless. Идея очень простая: вместо портов использовать локальные доменные имена.
Было так:
http://localhost:3000
http://localhost:8080
http://localhost:5173
http://app.localhost
http://api.localhost
http://docs.localhost
#инструмент дня
Я в универе постоянно делал презентации для своих работ и семинаров. Ну просто как минимум потому, что старание — это всегда плюс балл не только к оценке, но и к репутации.
Это, кстати, вполне себе лайфхак. Пишите лабы по программированию на двух языках, делайте нормальные доки — и будет вам легко.
Но не суть. Я сильно пристрастился к тачпаду на ноутбуке, потому все визуальные задачи, где нужно было мышевозить, давались с трудом. Когда готовишь документ, горячие клавиши спасают, а уж сейчас всё сразу в Markdown по-умолчанию пишешь и голова не болит. Но вот презентации и электронные схемы — дело другое.
И если для схем я ещё готов подключить мышь, напрячься и так далее, то презентации я писал на HTML, используя https://revealjs.com/.
Но инструмент, который хочу показать сегодня — это https://sli.dev/
Что он делает? Из видео, в общем, понятно — преобразует Markdown-файлы во всё те же презентации! Это очень круто, почти один уровень с Mermaid по удобству.
Горячая рекомендация.
#markdown #tool #presentation
#инструмент дня
Тактильный отклик на телефонах — штука потрясающая.
Конечно, лучше когда он реализован линейным актуатором, но и обычная вибрация сойдёт. Обратная связь в играх, уведомления об успехе-неуспехе, просто подтверждение действия — вот это вот всё.
Правда, думаю, из-за избыточного использования вибрации в DuoLingo, Taptic Engine на моём iPhone и разболтался...
Так вот, давно уже существует API navigator.vibrate(). Позволяет ли Apple его использовать на своих устройствах?
Конечно же, нет.
Но при этом есть интересная штука. На iOS любой чекбокс можно превратить в переключатель атрибутом switch. И что делает такой переключатель, когда на него нажисают? Правильно, откликается вибрацией.
И это могло остаться незамеченным, но нашлись люди, которые на базе одной только этой штуки сделали целую библиотеку обратной связи! Встречайте: https://haptics.lochie.me/
Одиночные сигналы, паттерны вибрации — вот это вот всё.
Не, ну вы понимаете, да? Создают виртуальные переключатели и теребонькают их. Fuck you, Apple в чистом виде. Результат весьма убедительный.
Конечно, есть и ограничения. Работает только по клику. Но даже это покрывает кучу юзкейсов.
Надеюсь, это немного заставит Apple пересмотреть политику в API браузера.
#vibrate #haptic #taptic
#заметка дня
Продолжение эпопеи про пульт для телевизоров на Flutter. В последнем посте я писал об неком подобии игры в CTF на сайте Samsung Apps.
Что появилось с тех пор? Вообще, достаточно многое, но сейчас — чуть более прозаичная тема.
Как это обычно бывает, иногда приходится внимательно смотреть, как те же задачи решают другие.
Наткнулся на один пример, который идёт ровно по поему плану. Удивило, что у них — одна кнопка для play/pause, как на обычных пультах.
Я был почти уверен, что без реального знания состояния плеера это корректно не сделать. Стало принципиально интересно, как они это реализовали.
Попробовал декомпилировать через Ghidra — толком не вышло. Кроме строк ничего полезного вытащить не удалось, и там — ничего примечательного: ни скрытых команд, ни дополнительных кнопок. Тогда пришлось идти по сетевому следу.
Поднял сервер, отвечающий на SSDP-запросы, начал сниффать весь трафик на предмет поисковых строк, логировать каждый запрос и его аргументы. Многие вещи пришлось копировать с реального телевизора — в том числе DMR-запросы (Digital Media Renderer, часть стандарта DLNA), через которые устройство объявляет и принимает мультимедийные возможности.
Больше всего времени ушло на корректный ответ токен-авторизации: нужно было добиться, чтобы приложение приняло фейковый ответ.
Ирония в том, что моё приложение в своё время вообще не проверяло формат ответа и не ждало подтверждения — вроде как получил токен и достаточно.
Убил пару часов, а оказалось...
...оказалось эти гении просто отправляют pause и ставят у себя флажок. Следующее нажатие — play. Потом снова pause... ну вы поняли. Если видео не играет — нажать надо два раза. А если с другого пульта остановить воспроизведение — тоже.
Я ожидал API, а получил социальную инженерию, на которую сам и попался. Надо было просто потестировать дольше минуты.
Тем временем мой пульт уверенно движется к релизу: аккуратно выглядит на разных мобильных устройствах, на десктопах появились горячие клавиши, помимо Samsung Tizen теперь частично поддерживается и LG webOS, а ещё можно кастить фотографии на экран телевизора.
Для публикации в Google Play нужно 12 тестировщиков — если хотите поучаствовать, буду рад услышать.
#flutter #remote #smarttv
Какую крутоту Саша сделал! В вебе таких инструментов совсем немного.
Читать полностью…
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗
✓ Как совместить кучу рабочих задач и личную жизнь?
✓ Как научиться отвлекаться от работы и отдыхать?
✓ Как справиться с прокрастинацией?
✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии
#ссылка дня
Дамы и господа, мы зашли слишком далеко.
Нужна виртуалка на Intel, а у тебя мак? Не вопрос, давай напишем эмулятор на CSS!
Проект X86CSS — это эмулятор x86-ассемблера без JavaScript. Вообще. Всё состояние процессора — через CSS-переменные. Исполнение — через
«Процессорный цикл» — это просто тик анимации. Пять герц в эквиваленте.
ПЯТЬ. Не гигагерц, а герц.
Идея выросла из статьи The CPU Hack на dev.to: современные возможности CSS позволяют организовать пошаговое изменение состояния. Если состояние можно хранить, менять и пересчитывать, а изменения можно повторять — система становится тьюринг-полной.
Как это выглядит в упрощённом виде.
Тик процессора:
@property --ip {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --tick {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.cpu {
animation: clock 0.1s steps(1) infinite;
}
@keyframes clock {
to {
--tick: calc(var(--tick) + 1);
}
}
.cpu {
--ip: calc(var(--ip) + var(--tick));
}
.key:active ~ .cpu {
--running: 1;
}
.cpu {
--running: 0;
--ip: calc(var(--ip) + var(--running));
}
Backend реальности или скрытые механизмы этого мира
Любой разработчик знает, что за каждым интерфейсом, плавной анимацией или кнопкой, на которую хочется нажать, стоят тысячи строк кода. Кода, который долго оттачивали, рефакторили и дебажили. Пользователь видит картинку — мы видим архитектуру, логику и зависимости.
В жизни всё устроено точно так же. За каждым крупным событием, культовым брендом или социальным трендом стоит своя «кодовая база» — смыслы и механизмы, которые не видны при беглом взгляде.
Если вам привычнее мыслить системами, а не картинками, загляните в канал «Рабочая философия».
Там занимаются деконструкцией реальности. Это разборы того, как на самом деле устроено поведение людей, на какие «скрытые спецификации» опирается наш мозг при принятии решений и как конструируются смыслы, управляющие миллионами.
Советую к прочтению:
→ Как Нетфликс конструирует реальность?
→ Как один ритуал превратил стартап в систему за $730 млн (кейс Ironman)
→ Баги восприятия. Как реклама обходит наши фильтры и заставляет покупать ненужное
→ Как человек превратился в «символическое животное» и почему мы живем в мире знаков
Полезно читать, чтобы понимать правила игры, в которую мы все вовлечены. Даже если вы не собираетесь «строить бизнес», знание того, как устроены социальные механизмы, дает огромное преимущество в критическом мышлении — @journey_liceum
#ссылка дня
Каждый из нас при взгляде на кодовую базу когда-нибудь ловит себя на мысли "есть ли вариант элегантнее и проще, может спецификацию обновили". Особенно это актуально в контексте стилизации (к счастью сейчас развитие спецификации можно назвать стремительным).
Но чтение разрозненных статей/заметок, попытки получить внятный ответ ИИ зачастую вносят лишь сумятицу.
Ведь хорошо когда можно найти готовые примеры современных решений частых (и не очень) задач в сравнении до/после.
Еще лучше когда для каждого примера указана поддержка браузерами использованных свойств спецификации.
https://modern-css.com содержит пока небольшое количество примеров, но с понятным описанием и ченжлогом
В Telegram довольно сложно находить и продвигать по-настоящему качественные технические каналы. Алгоритмической ленты почти нет, рекомендации работают слабо, а хорошие авторы часто остаются в тени — просто потому что их трудно обнаружить.
Поэтому была собрана отдельная папка с каналами по бэкенду — чтобы не теряться в потоке и не полагаться на случайные репосты.
В подборке — авторы, которые пишут про архитектуру, разборы логов, инциденты на проде, выбор между скоростью и качеством. Есть каналы разработчиков с большим практическим опытом: про подходы, рефакторинг, читаемый код, сложные конфигурации и реальные продакшен-факапы. Встречаются материалы по Node.js и Go — в целом всё, что обычно под капотом реальных проектов.
Добавлен также канал с анонсами офлайн и онлайн встреч для разработчиков — полезно для нетворкинга и обмена опытом.
Папка собрана как удобный способ систематизировать качественный бэкенд-контент в среде, где хорошим проектам непросто пробиться. Можно забирать и использовать как готовую подборку.
#игра дня
Забавно, что в играх мы спокойно управляем экономикой, считаем ресурсы и думаем на несколько шагов вперёд. А когда речь про инфраструктуру — это уже «что-то сложное и серьёзное».
Нашёл проект — server-survival. Это по сути симулятор, где ты строишь свою серверную систему и пытаешься, чтобы она не развалилась. Есть деньги, есть доход от трафика, есть репутация. Всё, что добавляешь в архитектуру, стоит денег. Всё, что падает, бьёт по карману.
Нужно решать: масштабироваться заранее или рискнуть, держать запас прочности или экономить, как пережить внезапную атаку и не уйти в минус.
Мечтал побыть клауд-архитектором? Вперёд:
https://github.com/pshenok/server-survival
#cloud #game
#статья дня
Страница грузится 7 секунд.
Причина — один эмодзи ❤️
Иногда проблемы с производительностью оказываются совсем не там, где их ищешь. В статье Аллена Пайка «A Broken Heart» он разбирает случай, когда страница внезапно начала грузиться по 7 секунд, хотя сервер, сеть и JavaScript работали нормально. В профайлере оказалось, что почти всё время Safari тратит на layout — причём один проход занимал больше секунды.
Дальше — обычный путь: постепенно вырезать куски интерфейса и смотреть, когда станет быстрее. В какой-то момент выяснилось, что всё упирается в один эмодзи в кнопке. Убираешь его — всё работает мгновенно. Возвращаешь — снова тормоза.
Причина оказалась в том, как Safari работает со шрифтами. Если указать Noto Color Emoji как основной шрифт, он используется даже для обычного текста, хотя покрывает только эмодзи. Для всех остальных символов браузер каждый раз ищет подходящий fallback-шрифт. В процессе layout он пересчитывает размеры текста, переносы строк и позиции элементов, и делает это много раз подряд.
В норме такие пересчёты почти ничего не стоят, но в Safari здесь есть просадка, из-за которой всё резко замедляется. В итоге одна строка с emoji-шрифтом может увеличить время layout в десятки или даже сотни раз.
Минимальный пример:
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
<style>
body {
font-family: "Noto Color Emoji";
}
</style>
<button>Click ❤️</button>
#заметка дня
Иногда стоит выкладывать рекламу, чтобы просто увидеть, что вы живы, котаны. На посты такого количества реакций никогда нет.
А тема сегодняшней заметки — очередная статья на тему «Нам не нужен useEffect»: вот тут.
В чём же проблема таких статей? Да на самом деле проблемы-то особой и нет, есть некоторая недосказанность.
И недосказанность эта связана с тем, что ВСЕ ваши прекрасные библиотеки управления состоянием, анимацией, загрузкой данных и кешем — будут использовать useEffect внутри себя. И говорить, что вы отказываетесь от useEffect — не очень верно.
Что верно, так это то, что их имплементация будет просто намного лучше протестирована. Ну, возможно.
Тем не менее, самый любимый пример, когда отказ от useEffect действительно имеет смысл — на иллюстрации.
Суть проста: если ваше действие требует полной перезагрузки логики, перерисовки компонента — так перерисуйте, блин, компонент, а не пытайтесь через useEffect чота там стартануть.
Продублирую текстом:
// ❌ BAD: Effect attempts to emulate remount behavior
function VideoPlayer({ videoId }) {
useEffect(() => {
loadVideo(videoId);
}, [videoId]);
}
// ✅ GOOD: key forces clean remount
function VideoPlayer({ videoId }) {
useMountEffect(() => {
loadVideo(videoId);
});
}
function VideoPlayerWrapper({ videoId }) {
return <VideoPlayer key={videoId} videoId={videoId} />;
}
#ссылка дня
Поскольку не говорить про ИИ и агентсткую разработку не получается, давайте пробовать хотя бы извлекать из этого пользу.
Многие боятся (возможно, небезосновательно), что мы все забудем как писать код. Что пропадёт тот самый обмен опытом, умениями, лучшими практиками и так далее. Вот только...
Вот только пока что всё ровно наоборот! Все же знают, что такое skills — умения?
А skills в контексте ИИ-агентов — это буквально описание лучших практик. Вот это делай, вот это не делай, а в случае таких-то условий, поступай вот так.
Люди создают целые маркетплейсы скиллов, конкурируют за лучшие из них, пишут решения для своей работы. А самое главное, скиллы — это, буквально, текст! Который и прочитать может кто угодно. Да, сжато, но всё же.
Ладно, к чему это я. Anthropic выкатили гайд по созданию скиллов. Да, формально — для Claude, но все известные мне инструменты подхватывают скиллы Клода вообще без проблем.
И почему-то по принятой в западном сегменте интернета традиции — в абсолютно ублюдочном формате презентационного PDF на 33 страницы.
К счастью, нашёлся человек, который не только перевёл это на русский, но и оформил в виде нормального веб-решения: https://fkonovalov.github.io/claude-skills-guide-ru/
fkonovalov, спасибо! :)
#ai #skills
#событие дня
Я понятия не имею, как я пропустил! Итак, соревнование March MadCSS!
16 лучших фронтенд-разработчиков схлестнутся в жаркой битве по вёрстке интерфейсов.
Ну, я надеюсь, вам что-то говорят имена Josh Cameau, Wes Bos, Kyle Cook, Chris Coyier... если нет — очень зря!
Первый раунд был неделю назад и его можно посмотреть на YouTube: https://www.youtube.com/watch?v=nuxSFTjXrhI
А второй как раз будет сегодня.
И да, даже лучшие верстальщики мира гуглят, как выровнять текст.
Сайт ивента с турнирной таблицей и мерчом: https://madcss.com/
Смотрим?
#css #dev #battle
Я довольно часто вижу тексты про выгорание и «научитесь отдыхать», и каждый раз немного спотыкаюсь об один момент. Там обычно много советов про хард-стопы, не писать после восьми, не работать в отпуске — и это всё, конечно, правильно. Но создаётся ощущение, что проблема будто бы решается просто дисциплиной: возьми и выключи работу из головы.
Вот в тему поста Димы из Яндекс Лавки — поймал себя на мысли, что на практике это у многих работает чуть сложнее. Мозг продолжает крутить работу не из вредности. Он просто пытается дожевать то, что осталось незакрытым: нерешённую задачу, странное решение, ощущение, что что-то пошло не так. И сколько ни говори себе «стоп», если внутри висит этот незакрытый хвост — он всё равно будет возвращаться.
Иногда помогает довольно простая вещь: довести мысль до какого-то финала. Принять решение. Даже если это решение — «ну и чёрт с ним».
Недавно у меня сломался чемодан — крепление колёс. Первый раз починил. Второй раз починил. На третий раз даже приготовил всё для ремонта — и вдруг понял, что это уже какой-то чемодан без ручки.
В итоге просто вынес его на помойку. Тоже решение проблемы. И удивительным образом после этого голова про чемодан больше не думает вообще.
С рабочими задачами часто так же. Иногда мозгу нужно не «перестань думать», а точка: решение, план, отказ, перенос, признание, что это не стоит времени. Как только она появляется — он обычно довольно охотно отпускает.
#заметка дня
Иногда по разным причинам хочется задать собеседнику очень простой вопрос: а ты вообще пробовал ну… читать?
Не «читать книги, чтобы стать лучше». А в рабочем. Читать текст с экрана. Потому что если так посмотреть, почти всё, что мы делаем с кодом, — это именно чтение.
Мы читаем код. Читаем результаты поиска. Читаем ошибки. Читаем документацию. Читаем чужие pull request’ы, логи, комментарии, ответы в чатах. Писать зачастую приходится намного меньше, чем читать и разбираться в уже написанном.
И на этом фоне довольно забавно выглядят разговоры про ИИ. Постоянно всплывает вопрос: «а кто будет ответственен за код?» или «а что он там вообще делает?»
В смысле, блин, что делает?! Ты читать-то пробовал?!
Вся ирония в том, что ИИ как раз очень много пишет. Пишет, что собирается сделать, показывает diff, объясняет шаги, ссылается на документацию. В конце ещё и резюмирует результат. То есть по сути ведёт подробный текстовый отчёт о своей работе.
Я Copilot, зачастую, даже тормозить успеваю в процессе раздумий, ну потому что вижу, что начинает думать херню.
И это, внезапно, оказывается удобным способом учиться. Можно спросить, почему он сделал именно так. Можно вытащить из ответа незнакомый термин и пойти почитать отдельно. Можно, наконец, разобраться в библиотеке или подходе, до которого раньше не доходили руки.
Причём, как ни странно, это ещё и хорошо помогает с двумя вещами, которые знакомы почти каждому разработчику: страхом чистого листа и синдромом самозванца.
Потому что у вайбкодеров из отдела продаж или у дизайнеров, которые прям щас утверждают, что готовы тебя заменить, никакого синдрома самозванца не наблюдается.
Перед тобой уже не абстрактное «сделай систему», а текст: код, diff, объяснение, план действий. Дальше по накатанной.
Поэтому когда разговор снова возвращается к классическому «а кто будет ответственен за код», мне каждый раз кажется, что проблема на самом деле не там.
Проблема не в ИИ.
Проблема в том, что всё это требует одной довольно старой привычки — читать.
А ты так и не научился.
#llm #work
15 марта у Яндекса пройдёт митап AI Dev Day — встреча про реальный опыт внедрения AI-инструментов в процессы разработки. Вместе с инженерами и руководителями из Яндекса, Авито, Сбера, Т-Банка и Ozon будем обсуждать, как компании внедряют AI в разработку, какими метриками пытаются измерять его влияние и какие проблемы возникают на практике.
Сейчас почти у всех в работе есть AI-инструменты, но главный вопрос остаётся тем же: как понять, что это реально ускоряет разработку, а не просто создаёт ощущение продуктивности.
Из программы особенно интересен доклад Андрея Попова (Яндекс) про то, как команды подходят к оценке эффективности AI-инструментов и какие сигналы вообще можно считать доказательством пользы. Когда речь идёт о больших кодовых базах и десятках команд, измерить влияние AI оказывается гораздо сложнее, чем кажется.
Формат будет полезным не только для ML-инженеров — это скорее разговор про разработку вообще: backend, frontend, мобильные команды, аналитиков и тимлидов, которые уже используют AI-инструменты и пытаются встроить их в процессы.
📅 15 марта
📍 онлайн + офлайн в Москве (офис Яндекса в Красной Розе)
Программа и регистрация
Итак, хочу поделиться новостью о публичном релизе Web Audio Studio!
🎛 🎛 🎛 🎛 🎛
Web Audio Studio — это инструмент для визуализации и отладки аудиографов, написанных на JavaScript с использованием Web Audio API. Устройство приложения простое: слева вы пишете WAA-код, запускаете его — и справа рендерится реально работающий аудиограф.
Сейчас в приложении поддержаны практически все узлы, описанные в спецификации Web Audio API, за исключением двух узлов для работы с многоканальным звуком и AudioWorkletNode, с помощью которой можно писать собственную DSP-логику в отдельном аудиоворкере. Работа над ними уже ведётся, и поддержка появится в будущих версиях.
Однако лучше расскажу не о том, чего в WAS пока нет, а о том, что в нём уже есть:
• полноценный редактор с подсветкой, форматированием кода и выводом ошибок;
• визуальный аудиограф с отображением практически всех доступных в WAA аудиоузлов на канвасе;
• маппинг аудиопараметров 1:1 — никаких лишних абстракций, только реальные параметры Web Audio API;
• поддержка модуляций аудиопараметров;
• возможность в реальном времени менять параметры и сразу слышать, как меняется сигнал;
• возможность проанализировать аудиосигнал в любом месте графа, вставив AnalyserNode между двумя узлами;
• встроенная визуализация аудиопроцессов в основных узлах: фильтрах, ревербераторах, компрессорах и других;
• 20 готовых шаблонов кода для демонстрации ключевых возможностей Web Audio API.
Моей мотивацией создать этот инструмент было сильное желание разобраться в сложном, но невероятно интересном мире синтеза и обработки цифрового звука. Конкретные идеи родились из личного опыта работы с Web Audio API (и боли) — он действительно может быть сложным для понимания и отладки. Web Audio Studio задуман как способ сделать эту работу более прозрачной и понятной.
WAS пока находится в статусе альфа, работает только на десктопе и, к сожалению, может быть недоступен с РФ-адресов. Надеюсь, в будущем смогу найти способ это обойти, но сейчас прошу учитывать это ограничение.
🎛 🎛 🎛 🎛 🎛
Ссылка: https://webaudio.studio
Буду рад любому фидбеку, особенно от разработчиков, которые уже делали что-то нетривиальное на Web Audio. Мне важно понимать реальные боли аудио-разработчиков в браузере — это поможет делать инструмент действительно полезным. Вы можете оставить обратную связь в комментариях, в личке в Telegram, по почте contact@webaudio.studio или через форму обратной связи в приложении. Также буду рад, если вы подпишетесь на обновления через форму внизу лендинга.
Буду благодарен за распространение Web Audio Studio среди ваших коллег и знакомых, работающих или заинтересованных в Web Audio.
#фишка дня
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.
Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var #бородач
#такое дня
Люди в LinkedIn, конечно, странные. Удивительно, что useEffect и use ничему его не научили в продажах. Но не суть.
А суть в том, что ребята из React, конечно, как продолжали вносить смуту и вытаскивать наружу внутренние особенности реализации, так и продолжают. И никакие You Might Not Need an Effect тут уже не помогут.
Но вообще, конечно, просто смешная картинка. Ведь очевидно, что нужно использовать Effector React Query.
#react #thoughts
#фишка дня
CSS anchor positioning aka якоря могут реально поменять то, как мы с вами реализуем интерфейсы, требующие графового представления: CJM, майндмапы, блок-схемы, пайплайны...
Темани Афиф недавно сделал пример, соединив круги стрелками и набросив немного JS для drag&drop: https://css-tip.com/connected-circles/
Потом немного улучшил: https://css-tip.com/connected-circles-2/
И пару дней назад пошёл ва-банк и представил буквально реализацию поиска кратчайшего пути в графе: https://css-tip.com/graph-theory/
Выглядит, конечно, весьма сложно. Но следующим шагом, видимо, будет транспиляция Mermaid в CSS... Зато самому алгоритм стрелок реализовывать не придётся! 😂️️️️️️
#css #anchor #graph
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
#статья дня
Оказывается, ignore-файлы — это не только .gitignore. Почти каждый инструмент в экосистеме тащит свою версию формата, и хотя все говорят «поддерживаем синтаксис .gitignore», нюансы часто отличаются.
Хороший пример — .npmignore. Если его нет, npm ориентируется на .gitignore. Но как только вы добавляете .npmignore, он полностью заменяет правила из .gitignore. В итоге можно случайно опубликовать в пакет то, что в Git было исключено, или наоборот — не опубликовать нужные файлы. Поведение похоже, но не идентично, и легко запутаться.
В статье перечисляется целый зоопарк `ignore`-файлов:.gitignore — Git.dockerignore — Docker.npmignore — npm.prettierignore — Prettier.eslintignore — ESLint.stylelintignore — Stylelint.hgignore — Mercurial.containerignore — Podman/Buildah.gcloudignore — Google Cloud CLI.vercelignore — Vercel.slugignore — Heroku.cfignore — Cloud Foundry.helmignore — Helm
и т. д. и т. п.
Вывод простой: одинаковое название не гарантирует одинаковое поведение. Если инструмент что-то «внезапно» включает или исключает — почти всегда дело в деталях реализации ignore-логики.
Собственно, ссылка: https://nesbitt.io/2026/02/12/the-many-flavors-of-ignore-files.html
#gitignore #ignore
#статья дня
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/
И да!
Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.
Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!
В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.
Есть обсуждение на HackerNews, вдруг кому интересно.
И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv
Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts
В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.
#opentype #fonts #colr #бородач
🔥 Девушка без навыков разработки запустила AI-бота и вышла на первые продажи за месяц
Аня из комьюнити @its_capitan заметила: люди учат английский годами, но говорить не могут. И тогда она сделала Telegram-бота, который общается с тобой голосовыми на английском и исправляет ошибки как живой собеседник.
Что в итоге:
— ~700 пользователей за первый месяц
— первые 16 оплат
— первая выручка: ~$200
— подписка: $8/мес
— сделано на n8n + OpenAI без разработчиков
Не было ни команды, ни инвестиций, ни кода.
Главное — не технология.
Главное — простая понятная ценность.
Таких запусков в канале уже десятки. Показываем честно: цифры, провалы, рост и продвижение. Без теорий. Только реальные метрики и запуск в реальном времени.
👉 @its_capitan
Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqx4pHSC