#статья дня
Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.
Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation
Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.
Хорошее чтиво на своей работе, да.
Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP
SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.
Pixelate all the thi(n)gs!
#js #pixel #effect #filter #svg
Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.
Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation
Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.
Хорошее чтиво на своей работе, да.
Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP
SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.
Pixelate all the thi(n)gs!
#js #pixel #effect #filter #svg
👍2
#codepen дня
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter
👍6🔥3👎1
#статья дня
Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.
Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation
Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.
Хорошее чтиво на своей работе, да.
Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP
SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.
Pixelate all the thi(n)gs!
#js #pixel #effect #filter #svg
Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.
Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation
Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.
Хорошее чтиво на своей работе, да.
Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP
SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.
Pixelate all the thi(n)gs!
#js #pixel #effect #filter #svg
👍11👎4
#codepen дня
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter
👍20
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А парни развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А парни развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect
👍16🤩2
#такое дня
2011 год: You Might Not Need jQuery aka Возможно, вам не нужен jQuery
2024 год: You Might Not Need an Effect aka Возможно, вам не нужен (хук use-) Effect
Как мы дошли до жизни такой, котаны?🫠
Ладно, вообще, статья по делу написано. Учитывая скорый выход React 19, обзор фишек которого я скоро проведу, это всё имеет смысл:
1. Не используйте useEffect чтобы обновить стейт, зависящий от других стейтов. Сюда же: не применяйте цепочки useEffect (один за одним).
2. Для тяжёлых операций используйте useMemo.
3. Запросы делайте в обработчиках событий, а не по хранимому в стейте флагу.
4. Не надо забывать, что компонент верхнего уровня — App — это всё ещё компонент, который может перемаунтиться (например, по ошибке).
Если что-то должно произойти всего раз за жизненный цикл приложения — определяйте флаги (didInit) за пределами компонента.
5. Постарайтесь избегать передачи данных от дочернего компонента к родительскому.
В статье прекрасные примеры. В сотый раз повторю: обновлённая документация по React — это лучший учебник.
Старая была полным дерьмом, я согласен. Именно по этой причине родилась туча инфоцыган-менторов. Сейчас всё хорошо.
#react #effect
2011 год: You Might Not Need jQuery aka Возможно, вам не нужен jQuery
2024 год: You Might Not Need an Effect aka Возможно, вам не нужен (хук use-) Effect
Как мы дошли до жизни такой, котаны?
Ладно, вообще, статья по делу написано. Учитывая скорый выход React 19, обзор фишек которого я скоро проведу, это всё имеет смысл:
1. Не используйте useEffect чтобы обновить стейт, зависящий от других стейтов. Сюда же: не применяйте цепочки useEffect (один за одним).
2. Для тяжёлых операций используйте useMemo.
3. Запросы делайте в обработчиках событий, а не по хранимому в стейте флагу.
4. Не надо забывать, что компонент верхнего уровня — App — это всё ещё компонент, который может перемаунтиться (например, по ошибке).
Если что-то должно произойти всего раз за жизненный цикл приложения — определяйте флаги (didInit) за пределами компонента.
5. Постарайтесь избегать передачи данных от дочернего компонента к родительскому.
В статье прекрасные примеры. В сотый раз повторю: обновлённая документация по React — это лучший учебник.
Старая была полным дерьмом, я согласен. Именно по этой причине родилась туча инфоцыган-менторов. Сейчас всё хорошо.
#react #effect
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22👍6
#codepen дня
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter #бородач
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter #бородач
❤12👍5🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect #бородач
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect #бородач
👍15❤4
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
На правах пятницы!
Если надо выбрать любимый бесполезный эффект — то мой определённо будет глитч.
И вот есть библиотечка как раз для этого!
https://github.com/7PH/powerglitch
Она это делает совершенно потрясающим способом: объявляется набор полигонов для выделения маски, элемент будто нарезается на куски, а потом к ним применяются CSS-преобразования. Просто шикарно.
Я давно хотел сделать плеер. где обложка будет глючить в так музыке :) Настало время!
#css #glitch #effect
На правах пятницы!
Если надо выбрать любимый бесполезный эффект — то мой определённо будет глитч.
И вот есть библиотечка как раз для этого!
https://github.com/7PH/powerglitch
Она это делает совершенно потрясающим способом: объявляется набор полигонов для выделения маски, элемент будто нарезается на куски, а потом к ним применяются CSS-преобразования. Просто шикарно.
Я давно хотел сделать плеер. где обложка будет глючить в так музыке :) Настало время!
#css #glitch #effect
👍13❤7
This media is not supported in your browser
VIEW IN TELEGRAM
#проект дня
Помните, когда я описывал библиотеку powerglitch, я сказал, что хотел бы сделать свой маленький плеер, где обложка глючила бы в такт?
Ну что же, я сделал!
Идея показалась интересной, особенно с перспективой в будущем генерировать глитч-видео на основе ритма. Но реализация оказалась не такой простой, как я думал.
Основные этапы разработки:
1. Загрузка аудиофайлов — обработка mp3-файлов и их воспроизведение в браузере.
2. Извлечение обложки — получаем картинку из метаданных трека.
3. Анализ аудиопотока — детектируем ритм и биты разными методами.
4. Генерация глитч-эффектов — синхронизируем глитчи с музыкой.
Для реализации я использовал:
- powerglitch — библиотека для создания глитч-эффектов.
- WebAudio API — анализ аудиопотока в браузере.
- music-metadata — для извлечения метаданных, в том числе обложек, из mp3.
Проблема с обложкой
На этапе парсинга метаданных и отображения обложки неожиданно возникла проблема: maximum stack size exceeded.
Всё оказалось просто: обложки были тупо слишком большими, поэтому я выходил за пределы максимального размера блока. А он всего 64 килобайта, которых хватит всем.
Нужно было обрабатывать данные поблочно.
Решилось всё использованием библиотеки uint8array-extras, хотя, если честно, решение лежало на поверхности. С другой стороны, есть нюанс с Юникодом.
И, к сожалению, библиотека powerglitch просто не позволяет менять настройки глитча на лету. Но она оказалась достаточно производительной, чтобы просто пересоздавать.
Методы детектирования ритма
Я добавил несколько способов анализа:
- Spectral Flux — анализ изменений спектральной энергии.
- Zero Crossing Rate — количество пересечений нуля в сигнале.
- Beat Tracking — поиск ударов в аудиопотоке.
- Energy Detection — резкие скачки громкости.
- Peak Detection — анализ пиков сигнала.
Сейчас плеер работает, но хочется добавить больше визуальных эффектов и попробовать другие алгоритмы анализа. Впрочем, на драмэндбассе любой сравнительно хорошо работает. Хотя надо бы ещё ручки покрутить.
Жаль, браузеры не могут записывать видео с самих себя... Но это мы решим :)
Ах, да. Посмотреть можно вот тут: https://bekharsky.github.io/GlitchBeat/
И репка: https://github.com/bekharsky/glitchbeat
Пощёлкайте разные виды определения ритма. Там очень далеко от идеала, но иногда получается прям хорошо.
#js #audio #glitch #effect #music
Помните, когда я описывал библиотеку powerglitch, я сказал, что хотел бы сделать свой маленький плеер, где обложка глючила бы в такт?
Ну что же, я сделал!
Идея показалась интересной, особенно с перспективой в будущем генерировать глитч-видео на основе ритма. Но реализация оказалась не такой простой, как я думал.
Основные этапы разработки:
1. Загрузка аудиофайлов — обработка mp3-файлов и их воспроизведение в браузере.
2. Извлечение обложки — получаем картинку из метаданных трека.
3. Анализ аудиопотока — детектируем ритм и биты разными методами.
4. Генерация глитч-эффектов — синхронизируем глитчи с музыкой.
Для реализации я использовал:
- powerglitch — библиотека для создания глитч-эффектов.
- WebAudio API — анализ аудиопотока в браузере.
- music-metadata — для извлечения метаданных, в том числе обложек, из mp3.
Проблема с обложкой
На этапе парсинга метаданных и отображения обложки неожиданно возникла проблема: maximum stack size exceeded.
Всё оказалось просто: обложки были тупо слишком большими, поэтому я выходил за пределы максимального размера блока. А он всего 64 килобайта, которых хватит всем.
Нужно было обрабатывать данные поблочно.
Решилось всё использованием библиотеки uint8array-extras, хотя, если честно, решение лежало на поверхности. С другой стороны, есть нюанс с Юникодом.
И, к сожалению, библиотека powerglitch просто не позволяет менять настройки глитча на лету. Но она оказалась достаточно производительной, чтобы просто пересоздавать.
Методы детектирования ритма
Я добавил несколько способов анализа:
- Spectral Flux — анализ изменений спектральной энергии.
- Zero Crossing Rate — количество пересечений нуля в сигнале.
- Beat Tracking — поиск ударов в аудиопотоке.
- Energy Detection — резкие скачки громкости.
- Peak Detection — анализ пиков сигнала.
Сейчас плеер работает, но хочется добавить больше визуальных эффектов и попробовать другие алгоритмы анализа. Впрочем, на драмэндбассе любой сравнительно хорошо работает. Хотя надо бы ещё ручки покрутить.
Жаль, браузеры не могут записывать видео с самих себя... Но это мы решим :)
Ах, да. Посмотреть можно вот тут: https://bekharsky.github.io/GlitchBeat/
И репка: https://github.com/bekharsky/glitchbeat
Пощёлкайте разные виды определения ритма. Там очень далеко от идеала, но иногда получается прям хорошо.
#js #audio #glitch #effect #music
👍18❤4🤩1