Большинство вариантов по оптимизации фронтенд части сайта, собранные в одной статье:
— Алгоритмы сжатия
— Lazy Loading
— Partial Hydration
— Tree shaking
— Минификация
— использование более “компактных” библиотек и другие советы
https://levelup.gitconnected.com/the-ultimate-guide-to-modern-web-application-performance-ec4eec9939
— Алгоритмы сжатия
— Lazy Loading
— Partial Hydration
— Tree shaking
— Минификация
— использование более “компактных” библиотек и другие советы
https://levelup.gitconnected.com/the-ultimate-guide-to-modern-web-application-performance-ec4eec9939
Medium
The ultimate guide to modern web application performance
After reading this you will be able to boost your application speed beyond the limits. Good luck!
Хорошие советы от опытного интервьюера William Ian Douglas про софт скилловую часть интервью и как подготовиться к решению технических задач
https://habr.com/ru/post/524186/
https://habr.com/ru/post/524186/
Хабр
Я провёл более 600 технических интервью — и вот пять проблемных мест, которые я заметил у кандидатов
Недавно я провёл 600-е собеседование на interviewing.io (IIO). Хотелось бы поделиться опытом, рассказать, как я подхожу к интервью, и пролить свет на типичные пр...
Настройка Github Actions для автоматического деплоя сайта после изменения мастер ветки
YouTube
Automatic Deployment With Github Actions
In this video we will setup automatic deployments using Github Actions.
Anson's YouTube Channel:
https://www.youtube.com/user/DatAdam93
Github Actions Page:
https://github.com/features/actions
Timestamps:
0:00 - Introduction & Demo
3:07 - Setting up Github…
Anson's YouTube Channel:
https://www.youtube.com/user/DatAdam93
Github Actions Page:
https://github.com/features/actions
Timestamps:
0:00 - Introduction & Demo
3:07 - Setting up Github…
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