This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.
Вот как выделить объект, который не слушается мыши?
Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.
#devtools #tips #chrome #firefox #бородач
Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.
Вот как выделить объект, который не слушается мыши?
Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.
#devtools #tips #chrome #firefox #бородач
1👍24❤5🤩1
#видео дня
Когда я стал работать в нормальной компании, а не в веб-студии, я внезапно узнал, что оценка задачи происходит в баллах. «Стори поинтах», story points.
И стори поинты это не часы. Это некая условная оценка сложности. И выражается, как правило, в числах Фибоначчи: 1, 2, 3, 5, 8… Близко к экспоненциальной зависимости.
Если кому интересно, статей на эту тему много. Но дальше происходит самое интересное.
Оценка сложности не нужна :) Не в том смысле, что все задачи одинаковы, нет. А в том смысле, что не имеет особого смысла их делить.
Очень часто возникает ситуация, в которой все задачи на спринт оцениваются в 3. Или даже, что чаще, в 5. Ну просто потому что. Потому что так команде удобнее.
И вот, например, доклад именно на тему оценки сложности: https://m.youtube.com/watch?v=QVBlnCTu9Ms
Стоит посмотреть. Много здравых мыслей. Как минимум, вы решите для себя: более усердно относиться к оценке или же просто ограничить число задач на спринт.
Не болейте.
#agile #teamlead #scrum #бородач
Когда я стал работать в нормальной компании, а не в веб-студии, я внезапно узнал, что оценка задачи происходит в баллах. «Стори поинтах», story points.
И стори поинты это не часы. Это некая условная оценка сложности. И выражается, как правило, в числах Фибоначчи: 1, 2, 3, 5, 8… Близко к экспоненциальной зависимости.
Если кому интересно, статей на эту тему много. Но дальше происходит самое интересное.
Оценка сложности не нужна :) Не в том смысле, что все задачи одинаковы, нет. А в том смысле, что не имеет особого смысла их делить.
Очень часто возникает ситуация, в которой все задачи на спринт оцениваются в 3. Или даже, что чаще, в 5. Ну просто потому что. Потому что так команде удобнее.
И вот, например, доклад именно на тему оценки сложности: https://m.youtube.com/watch?v=QVBlnCTu9Ms
Стоит посмотреть. Много здравых мыслей. Как минимум, вы решите для себя: более усердно относиться к оценке или же просто ограничить число задач на спринт.
Не болейте.
#agile #teamlead #scrum #бородач
YouTube
#NoEstimates (Allen Holub)
This keynote presents my (and many other's) thinking about #NoEstimates. It argues that estimation is a bad thing, particularly in the Agile world, and presents ways to plan that don't involve estimation.
❤7👍4
🔥 Девушка без навыков разработки запустила AI-бота и вышла на первые продажи за месяц
Аня из комьюнити @its_capitan заметила: люди учат английский годами, но говорить не могут. И тогда она сделала Telegram-бота, который общается с тобой голосовыми на английском и исправляет ошибки как живой собеседник.
Что в итоге:
— ~700 пользователей за первый месяц
— первые 16 оплат
— первая выручка: ~$200
— подписка: $8/мес
— сделано на n8n + OpenAI без разработчиков
Не было ни команды, ни инвестиций, ни кода.
Главное — не технология.
Главное — простая понятная ценность.
Таких запусков в канале уже десятки. Показываем честно: цифры, провалы, рост и продвижение. Без теорий. Только реальные метрики и запуск в реальном времени.
👉 @its_capitan
Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqx4pHSC
Аня из комьюнити @its_capitan заметила: люди учат английский годами, но говорить не могут. И тогда она сделала Telegram-бота, который общается с тобой голосовыми на английском и исправляет ошибки как живой собеседник.
Что в итоге:
— ~700 пользователей за первый месяц
— первые 16 оплат
— первая выручка: ~$200
— подписка: $8/мес
— сделано на n8n + OpenAI без разработчиков
Не было ни команды, ни инвестиций, ни кода.
Главное — не технология.
Главное — простая понятная ценность.
Таких запусков в канале уже десятки. Показываем честно: цифры, провалы, рост и продвижение. Без теорий. Только реальные метрики и запуск в реальном времени.
👉 @its_capitan
Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqx4pHSC
🤡32🤬4❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#игра дня
Забавно, что в играх мы спокойно управляем экономикой, считаем ресурсы и думаем на несколько шагов вперёд. А когда речь про инфраструктуру — это уже «что-то сложное и серьёзное».
Нашёл проект — server-survival. Это по сути симулятор, где ты строишь свою серверную систему и пытаешься, чтобы она не развалилась. Есть деньги, есть доход от трафика, есть репутация. Всё, что добавляешь в архитектуру, стоит денег. Всё, что падает, бьёт по карману.
Нужно решать: масштабироваться заранее или рискнуть, держать запас прочности или экономить, как пережить внезапную атаку и не уйти в минус.
Мечтал побыть клауд-архитектором? Вперёд:
https://github.com/pshenok/server-survival
#cloud #game
Забавно, что в играх мы спокойно управляем экономикой, считаем ресурсы и думаем на несколько шагов вперёд. А когда речь про инфраструктуру — это уже «что-то сложное и серьёзное».
Нашёл проект — server-survival. Это по сути симулятор, где ты строишь свою серверную систему и пытаешься, чтобы она не развалилась. Есть деньги, есть доход от трафика, есть репутация. Всё, что добавляешь в архитектуру, стоит денег. Всё, что падает, бьёт по карману.
Нужно решать: масштабироваться заранее или рискнуть, держать запас прочности или экономить, как пережить внезапную атаку и не уйти в минус.
Мечтал побыть клауд-архитектором? Вперёд:
https://github.com/pshenok/server-survival
#cloud #game
👍16❤4
#статья дня
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: 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 #бородач
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: 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 #бородач
👍9🤩1
#статья дня
Оказывается,
Хороший пример —
В статье перечисляется целый зоопарк `ignore`-файлов:
и т. д. и т. п.
Вывод простой: одинаковое название не гарантирует одинаковое поведение. Если инструмент что-то «внезапно» включает или исключает — почти всегда дело в деталях реализации ignore-логики.
Собственно, ссылка: https://nesbitt.io/2026/02/12/the-many-flavors-of-ignore-files.html
#gitignore #ignore
Оказывается,
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
👍6❤2
#ссылка дня
Каждый из нас при взгляде на кодовую базу когда-нибудь ловит себя на мысли "есть ли вариант элегантнее и проще, может спецификацию обновили". Особенно это актуально в контексте стилизации (к счастью сейчас развитие спецификации можно назвать стремительным).
Но чтение разрозненных статей/заметок, попытки получить внятный ответ ИИ зачастую вносят лишь сумятицу.
Ведь хорошо когда можно найти готовые примеры современных решений частых (и не очень) задач в сравнении до/после.
Еще лучше когда для каждого примера указана поддержка браузерами использованных свойств спецификации.
https://modern-css.com содержит пока небольшое количество примеров, но с понятным описанием и ченжлогом
Каждый из нас при взгляде на кодовую базу когда-нибудь ловит себя на мысли "есть ли вариант элегантнее и проще, может спецификацию обновили". Особенно это актуально в контексте стилизации (к счастью сейчас развитие спецификации можно назвать стремительным).
Но чтение разрозненных статей/заметок, попытки получить внятный ответ ИИ зачастую вносят лишь сумятицу.
Ведь хорошо когда можно найти готовые примеры современных решений частых (и не очень) задач в сравнении до/после.
Еще лучше когда для каждого примера указана поддержка браузерами использованных свойств спецификации.
https://modern-css.com содержит пока небольшое количество примеров, но с понятным описанием и ченжлогом
👍10❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
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
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
🫡8🤩2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Дамы и господа, мы зашли слишком далеко.
Нужна виртуалка на Intel, а у тебя мак? Не вопрос, давай напишем эмулятор на CSS!
Проект X86CSS — это эмулятор x86-ассемблера без JavaScript. Вообще. Всё состояние процессора — через CSS-переменные. Исполнение — через
«Процессорный цикл» — это просто тик анимации. Пять герц в эквиваленте.
ПЯТЬ. Не гигагерц, а герц.
Идея выросла из статьи The CPU Hack на dev.to: современные возможности CSS позволяют организовать пошаговое изменение состояния. Если состояние можно хранить, менять и пересчитывать, а изменения можно повторять — система становится тьюринг-полной.
Как это выглядит в упрощённом виде.
Тик процессора:
Анимация создаёт шаг. На каждом шаге меняется состояние.
От состояния зависит, какие инструкции сработают дальше.
Ввод — тоже без JS. Например, зажатая кнопка:
Пока кнопка нажата — переменная меняется и влияет на вычисления.
В реальном проекте вместо двух переменных — регистры, память, флаги и декодирование инструкций. Сотни их.
Практической пользы — ну, нет.
Но сам факт, что CSS можно довести до уровня полноценной вычислительной модели и запустить на нём x86 — выглядит как интересная точка в эволюции фронтенда.
Ах, да. Работает только на Chrome, потому что — какая внезапность — использует условный оператор (if), который появился совсем недавно. И вот это — это вполне себе имеет практическое применение.
Просто пойдите и поиграйте в это. Ощущения невероятные, хрен с ней, с применимостью на практике, честное слово. Это целый компьютер! Вы можете даже программы для него компилировать с C на x86asm. Буквально.
#css #cpu #x86 #hack
Дамы и господа, мы зашли слишком далеко.
Нужна виртуалка на 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 #hack
❤10🫡4👍3
#такое дня
Люди в LinkedIn, конечно, странные. Удивительно, что useEffect и use ничему его не научили в продажах. Но не суть.
А суть в том, что ребята из React, конечно, как продолжали вносить смуту и вытаскивать наружу внутренние особенности реализации, так и продолжают. И никакие You Might Not Need an Effect тут уже не помогут.
Но вообще, конечно, просто смешная картинка. Ведь очевидно, что нужно использоватьEffector React Query.
#react #thoughts
Люди в LinkedIn, конечно, странные. Удивительно, что useEffect и use ничему его не научили в продажах. Но не суть.
А суть в том, что ребята из React, конечно, как продолжали вносить смуту и вытаскивать наружу внутренние особенности реализации, так и продолжают. И никакие You Might Not Need an Effect тут уже не помогут.
Но вообще, конечно, просто смешная картинка. Ведь очевидно, что нужно использовать
#react #thoughts
👍10❤1🫡1
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам🤗
✓ Как совместить кучу рабочих задач и личную жизнь?
✓ Как научиться отвлекаться от работы и отдыхать?
✓ Как справиться с прокрастинацией?
✓ Как не растерять запал, даже если начальник и коллеги💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии
Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам
✓ Как совместить кучу рабочих задач и личную жизнь?
✓ Как научиться отвлекаться от работы и отдыхать?
✓ Как справиться с прокрастинацией?
✓ Как не растерять запал, даже если начальник и коллеги
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🤩1🤡1
#фишка дня
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве
Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var #бородач
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве
--client-id и изменили один раз для шапки/подвала/сайдбара.Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var #бородач
codepen.io
Dynamic button text with css variable
...
👍6❤2
Какую крутоту Саша сделал! В вебе таких инструментов совсем немного.
❤3
Forwarded from alexgriss.tech
Итак, хочу поделиться новостью о публичном релизе Web Audio Studio!
🎛 🎛 🎛 🎛 🎛
Web Audio Studio — это инструмент для визуализации и отладки аудиографов, написанных на JavaScript с использованием Web Audio API. Устройство приложения простое: слева вы пишете WAA-код, запускаете его — и справа рендерится реально работающий аудиограф.
Сейчас в приложении поддержаны практически все узлы, описанные в спецификации Web Audio API, за исключением двух узлов для работы с многоканальным звуком и
Однако лучше расскажу не о том, чего в WAS пока нет, а о том, что в нём уже есть:
• полноценный редактор с подсветкой, форматированием кода и выводом ошибок;
• визуальный аудиограф с отображением практически всех доступных в WAA аудиоузлов на канвасе;
• маппинг аудиопараметров 1:1 — никаких лишних абстракций, только реальные параметры Web Audio API;
• поддержка модуляций аудиопараметров;
• возможность в реальном времени менять параметры и сразу слышать, как меняется сигнал;
• возможность проанализировать аудиосигнал в любом месте графа, вставив
• встроенная визуализация аудиопроцессов в основных узлах: фильтрах, ревербераторах, компрессорах и других;
• 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.
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.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🤩6❤1