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/
— Стадии отрисовки элементов браузером: Style->Layout->Paint->Composite Layers.
— Main Thread, Compositor Thread - пересчет на CPU или GPU.
— Какие свойства лучше всего использовать в анимации
https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/
https://www.viget.com
Animation Performance 101: Browser Under the Hood | Viget
Your ultimate guide to animation performance — starting from the ground up.
Оптимизация Javascript анимации:
— requestAnimationFrame вместо setTimeout и setInterval
— избегание форсирования синхронизации layout
— Web Animations API для запуска javascript анимаций в compositor thread
— Intersection Observer для отслеживания пересечения с областью видимости документа
https://www.viget.com/articles/animation-performance-101-optimizing-javascript/
— requestAnimationFrame вместо setTimeout и setInterval
— избегание форсирования синхронизации layout
— Web Animations API для запуска javascript анимаций в compositor thread
— Intersection Observer для отслеживания пересечения с областью видимости документа
https://www.viget.com/articles/animation-performance-101-optimizing-javascript/
MDN Web Docs
Using the Web Animations API - Интерфейсы веб API | MDN
Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c весёлыми демками и уроками с Алисой в Стране Чудес.
Курс для начинающих по Docker и Kubernetes от FreeCodeCamp
https://www.youtube.com/watch?v=Wf2eSG3owoA
https://www.youtube.com/watch?v=Wf2eSG3owoA
YouTube
Docker and Kubernetes - Full Course for Beginners
Learn the fundamentals of Docker and Kubernetes in this complete hand-on course.
First, you will learn about creating docker images, running docker containers, docker volumes, container registry and docker architecture. Next, you will learn about Kubernetes…
First, you will learn about creating docker images, running docker containers, docker volumes, container registry and docker architecture. Next, you will learn about Kubernetes…
XSS атаки: какие бывают, как исполняются, как защититься.
https://levelup.gitconnected.com/cross-site-scripting-xss-fd374ce71b2f
https://levelup.gitconnected.com/cross-site-scripting-xss-fd374ce71b2f
Medium
Cross-site Scripting (XSS) 😈
What it is, why it matters, how they are executed, how to prevent XSS attacks — and how to create a cookie stealer!
Браузерные api для отслеживания элементов страницы:
— MutationObserver: оповещение о измении children элементов в отслеживаемом элементе, оповещение о изменении аттрибута
— IntersectionObserver: отслеживание попадания элемента во viewport
https://indepth.dev/observer-apis-in-javascript-part-i
— MutationObserver: оповещение о измении children элементов в отслеживаемом элементе, оповещение о изменении аттрибута
— IntersectionObserver: отслеживание попадания элемента во viewport
https://indepth.dev/observer-apis-in-javascript-part-i
Angularindepth
Angular in Depth
Unlock the power of software engineering at its core with Angular in Depth!
Перевод статьи Joshua Comeau о программировании с помощью микрофона и трекера движения глаз:
— Talon Voice для диктовки текста программы
— tobii 5 - для трекинга движения глаз
https://habr.com/ru/company/vdsina/blog/524664/
— Talon Voice для диктовки текста программы
— tobii 5 - для трекинга движения глаз
https://habr.com/ru/company/vdsina/blog/524664/
Joshwcomeau
Hands-Free Coding
Earlier this year, I lost the ability to use a keyboard and mouse for extended periods. Fortunately, this wasn't as catastrophic as it sounds! This article chronicles my experience using adaptive tools like dictation and eye-tracking as my primary mechanisms…
Браузерные api для отслеживания элементов страницы:
— Resize Observer: наблюдение за изменениями размеров элемента
— Performance Observer : наблюдение за метками для замера производительности
https://indepth.dev/observer-apis-in-javascript-part-ii
— Resize Observer: наблюдение за изменениями размеров элемента
— Performance Observer : наблюдение за метками для замера производительности
https://indepth.dev/observer-apis-in-javascript-part-ii
Angularindepth
Angular in Depth
Unlock the power of software engineering at its core with Angular in Depth!
Объемная статья-исследование о использование ООП в Javascript:
— Функция конструктор
— Классы
— Объекты, связанные с другими объектами (OLOO)
— Фабричные функции
Что и в каких случаях проще использовать?
https://webdevblog.ru/varianty-obektno-orientirovannogo-programmirovaniya-na-javascript/
— Функция конструктор
— Классы
— Объекты, связанные с другими объектами (OLOO)
— Фабричные функции
Что и в каких случаях проще использовать?
https://webdevblog.ru/varianty-obektno-orientirovannogo-programmirovaniya-na-javascript/
Еще один блог веб-разработчика
Варианты объектно-ориентированного программирования (на JavaScript) - Еще один блог веб-разработчика
В статье очень подробно рассматривается четыре подхода к объектно-ориентированному программированию в JavaScript
Автор многих крутых работ на Codepen Jhey Tompkins написал статью о 3d и анимации в css.
https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/
https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/
CSS-Tricks
CSS in 3D: Learning to Think in Cubes Instead of Boxes | CSS-Tricks
My path to learning CSS was a little unorthodox. I didn't start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS
Советы по приведению легаси кода к нормальному состоянию:
— Webpack плагины для снижения веса бандла и удаления неиспользуемых файлов
— Eslint для статического анализа кода
— Sentry для логирования
— Добавление проверок на CI
https://habr.com/ru/company/domclick/blog/524606/
— 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 для ожидания значения в другом потоке
— Передача своих импортов в wasm
— Импорт выделяемой памяти в wasm
— Варианты общения главного процесса с процессом воркера: postMessage, SharedArrayBuffer
— Atomics vs while true для ожидания значения в другом потоке
YouTube
WebAssembly Threads - HTTP 203
Surma tries to explain WebAssembly, threads and WebAssembly Threads to Jake. He also has scary diagrams and uses assembly language. Just in time for Halloween. Spooky. We hope you enjoy. If you read this far, thank you. We appreciate your thoroughness. Put…
Подробно и с визуализацией про javascript Promise:
— Состояния fulfilled, rejected, pending
— Методы then, catch, finally
— Обработка промисов в eventloop, разница микро и макро задач
— async await
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
— Состояния fulfilled, rejected, pending
— Методы then, catch, finally
— Обработка промисов в eventloop, разница микро и макро задач
— async await
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
DEV Community
⭐️🎀 JavaScript Visualized: Promises & Async/Await
If you're here in 2024 (or later), here's an updated video: Ever had to deal with JS code...
Checka11y.css - помогает в поиске проблем с доступностью интерфейсов, подключается как обычный css файл и подсвечивает некоторые проблемы разметки:
— картинки без alt тега
— видео с autoplay атрибутом
— проверка, что помимо <li> в <ol> и <ul> нет других элементов на первом уровне и другие проблемы доступности
— картинки без alt тега
— видео с autoplay атрибутом
— проверка, что помимо <li> в <ol> и <ul> нет других элементов на первом уровне и другие проблемы доступности
Web Api наблюдатели с примерами использования:
1) ResizeObserver - наблюдение за изменением размеров целевого элемента.
2) IntersectionObserver - отслеживание попадания элемента во viewport.
3) MutationObserver - отслеживание изменения атрибутов, текстового содержимого целевого элемента и его потомков.
https://habr.com/ru/post/525536/
1) ResizeObserver - наблюдение за изменением размеров целевого элемента.
2) IntersectionObserver - отслеживание попадания элемента во viewport.
3) MutationObserver - отслеживание изменения атрибутов, текстового содержимого целевого элемента и его потомков.
https://habr.com/ru/post/525536/
Хабр
Примеры использования наблюдателей в JavaScript
Наблюдатель (observer) — это объект, который следит за состоянием определенного элемента и регистрирует происходящие в нем изменения. Элемент, который находится под наблюдением (чуть не написал...