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

15 марта у Яндекса пройдёт митап AI Dev Day — встреча про реальный опыт внедрения AI-инструментов в процессы разработки. Вместе с инженерами и руководителями из Яндекса, Авито, Сбера, Т-Банка и Ozon будем обсуждать, как компании внедряют AI в разработку, какими метриками пытаются измерять его влияние и какие проблемы возникают на практике.Сейчас почти у всех в работе есть AI-инструменты, но главный вопрос остаётся тем же: как понять, что это реально ускоряет разработку, а не просто создаёт ощущение продуктивности.Из программы особенно интересен доклад Андрея Попова (Яндекс) про то, как команды подходят к оценке эффективности AI-инструментов и какие сигналы вообще можно считать доказательством пользы. Когда речь идёт о больших кодовых базах и десятках команд, измерить влияние AI оказывается гораздо сложнее, чем кажется.Формат будет полезным не только для ML-инженеров — это скорее разговор про разработку вообще: backend, frontend, мобильные команды, аналитиков и тимлидов, которые уже используют AI-инструменты и пытаются встроить их в процессы.📅 15 марта📍 онлайн + офлайн в Москве (офис Яндекса в Красной Розе)Программа и регистрация

#заметка дняПродолжение эпопеи про пульт для телевизоров на Flutter. В последнем посте я писал об неком подобии игры в CTF на сайте Samsung Apps.Что появилось с тех пор? Вообще, достаточно многое, но сейчас — чуть более прозаичная тема.Как это обычно бывает, иногда приходится внимательно смотреть, как те же задачи решают другие.Наткнулся на один пример, который идёт ровно по поему плану. Удивило, что у них — одна кнопка для play/pause, как на обычных пультах.Я был почти уверен, что без реального знания состояния плеера это корректно не сделать. Стало принципиально интересно, как они это реализовали.Попробовал декомпилировать через Ghidra — толком не вышло. Кроме строк ничего полезного вытащить не удалось, и там — ничего примечательного: ни скрытых команд, ни дополнительных кнопок. Тогда пришлось идти по сетевому следу.Поднял сервер, отвечающий на SSDP-запросы, начал сниффать весь трафик на предмет поисковых строк, логировать каждый запрос и его аргументы. Многие вещи пришлось копировать с реального телевизора — в том числе DMR-запросы (Digital Media Renderer, часть стандарта DLNA), через которые устройство объявляет и принимает мультимедийные возможности.Больше всего времени ушло на корректный ответ токен-авторизации: нужно было добиться, чтобы приложение приняло фейковый ответ. Ирония в том, что моё приложение в своё время вообще не проверяло формат ответа и не ждало подтверждения — вроде как получил токен и достаточно. Убил пару часов, а оказалось......оказалось эти гении просто отправляют pause и ставят у себя флажок. Следующее нажатие — play. Потом снова pause... ну вы поняли. Если видео не играет — нажать надо два раза. А если с другого пульта остановить воспроизведение — тоже.Я ожидал API, а получил социальную инженерию, на которую сам и попался. Надо было просто потестировать дольше минуты.Тем временем мой пульт уверенно движется к релизу: аккуратно выглядит на разных мобильных устройствах, на десктопах появились горячие клавиши, помимо Samsung Tizen теперь ч

Какую крутоту Саша сделал! В вебе таких инструментов совсем немного.

Итак, хочу поделиться новостью о публичном релизе 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 пока находится в статусе альфа, работает только на десктопе и, к сожалению, может быть недоступен с РФ-адресов. Надеюсь, в будущем смогу найти способ это обойти, но сейчас прошу учитывать это ограничение.���

#фишка дняМногие недооценивают 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

#ссылка дняДамы и господа, мы зашли слишком далеко.Нужна виртуалка на 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));}Анимация создаёт шаг. На каждом шаге меняется состояние.От состояния зависит, какие инструкции сработают дальше.Ввод — тоже без JS. Например, зажатая кнопка:.key:active ~ .cpu { --running: 1;}.cpu { --running: 0; --ip: calc(var(--ip) + var(--running));}Пока кнопка нажата — переменная меняется и влияет на вычисления.В реальном проекте вместо двух переменных — регистры, память, флаги и декодирование инструкций. Сотни их.Практической пользы — ну, нет.Но сам факт, что CSS можно довести до уровня полноценной вычислительной модели и запустить на нём x86 — выглядит как интересная точка в эволюции фронтенда.Ах, да. Работает только на Chrome, потому что — какая внезапность — использует условный оператор (if), который появился совсем недавно. И вот это — это вполне себе имеет практическое применение.Просто пойдите и поиграйте в это. Ощущения невероятные, хрен с ней, с применимостью на практике, честное слово. Это целый компьютер! Вы можете даже программы для него компилировать с C на x86asm. Буквально.#css #cpu #x86 #ha

#фишка дня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 #бородач

#ссылка дняКаждый из нас при взгляде на кодовую базу когда-нибудь ловит себя на мысли "есть ли вариант элегантнее и проще, может спецификацию обновили". Особенно это актуально в контексте стилизации (к счастью сейчас развитие спецификации можно назвать стремительным).Но чтение разрозненных статей/заметок, попытки получить внятный ответ ИИ зачастую вносят лишь сумятицу.Ведь хорошо когда можно найти готовые примеры современных решений частых (и не очень) задач в сравнении до/после.Еще лучше когда для каждого примера указана поддержка браузерами использованных свойств спецификации.https://modern-css.com содержит пока небольшое количество примеров, но с понятным описанием и ченжлогом