Webchic - frontend, backend, ci/cd
995 subscribers
273 photos
22 videos
1.11K links
Канал о Web разработке, для фронтов и full stack.

По рекламе @adtgassetsbot
Admin: @Aleksei

🐍Python - @python_lounge
👨‍💻Другие языки - @cccoding
🥷Хакер/ИТ безопасность - @it_ha
Download Telegram
​​Анимация текста в canvas
This media is not supported in your browser
VIEW IN TELEGRAM
Layoutit - открытое программное обеспечение для построения и изучения CSS Grid
Оптимизация анимаций
— Стадии отрисовки элементов браузером: Style->Layout->Paint->Composite Layers.
— Main Thread, Compositor Thread - пересчет на CPU или GPU.
— Какие свойства лучше всего использовать в анимации

https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/
​​Радио с помощью одного div элемента и css
Оптимизация Javascript анимации:
— requestAnimationFrame вместо setTimeout и setInterval
— избегание форсирования синхронизации layout
— Web Animations API для запуска javascript анимаций в compositor thread
— Intersection Observer для отслеживания пересечения с областью видимости документа

https://www.viget.com/articles/animation-performance-101-optimizing-javascript/
​​Анимация svg цветочка с помощью TweenMax
Браузерные api для отслеживания элементов страницы:
— MutationObserver: оповещение о измении children элементов в отслеживаемом элементе, оповещение о изменении аттрибута
— IntersectionObserver: отслеживание попадания элемента во viewport

https://indepth.dev/observer-apis-in-javascript-part-i
Перевод статьи Joshua Comeau о программировании с помощью микрофона и трекера движения глаз:
— Talon Voice для диктовки текста программы
— tobii 5 - для трекинга движения глаз

https://habr.com/ru/company/vdsina/blog/524664/
Браузерные api для отслеживания элементов страницы:
— Resize Observer: наблюдение за изменениями размеров элемента
 —  Performance Observer : наблюдение за метками для замера производительности

https://indepth.dev/observer-apis-in-javascript-part-ii
​​Подставление фавиконки в инпут в зависимости от url
Советы по приведению легаси кода к нормальному состоянию:
— Webpack плагины для снижения веса бандла и удаления неиспользуемых файлов
— Eslint для статического анализа кода
— Sentry для логирования
— Добавление проверок на CI

https://habr.com/ru/company/domclick/blog/524606/
​​Surma пытается объяснить Jake Archibald WebAssembly, threads, WebAssembly Threads:
— Передача своих импортов в wasm
— Импорт выделяемой памяти в wasm
— Варианты общения главного процесса с процессом воркера: postMessage, SharedArrayBuffer
— Atomics vs while true для ожидания значения в другом потоке
​​WebGl анимация частиц