Новое css свойство content-visibility
Google Chrome разработчики Jake Archibald и Surma о новом свойстве в css content-visibility, позволяющем сильно улучшить время на layout страницы с большим количеством html элементов.
Google Chrome разработчики Jake Archibald и Surma о новом свойстве в css content-visibility, позволяющем сильно улучшить время на layout страницы с большим количеством html элементов.
YouTube
Slashing layout cost with content-visibility - HTTP 203
Jake makes a quick change to the CSS of the HTML spec, and takes the layout time from 50 seconds down to 400ms. Then he spends a much longer amount of time chatting about it with Surma.
The result → https://goo.gle/34QX5B1
More info on content-visibility…
The result → https://goo.gle/34QX5B1
More info on content-visibility…
CSS variables:
— Что происходит, если var() использует undefined значение
— задание fallback значения для переменной
— помощь dev tools в работе с css переменными
https://patrickbrosset.com/articles/2020-09-21-3-things-about-css-variables-you-might-not-know/
— Что происходит, если var() использует undefined значение
— задание fallback значения для переменной
— помощь dev tools в работе с css переменными
https://patrickbrosset.com/articles/2020-09-21-3-things-about-css-variables-you-might-not-know/
Набор полезных инструментов для проверки доступности сайта, чистоты и качества кода, ссылок, seo
https://habr.com/ru/company/vdsina/blog/522932/
https://habr.com/ru/company/vdsina/blog/522932/
Сравнение хранилищ Redux vs Mobx:
— Одно или несколько хранилищ?
— Бойлерплейт
— Что легче расширять?
— Что легче тестировать?
— Дебагинг
— Популярность
https://blog.codota.com/redux-vs-mobx/
— Одно или несколько хранилищ?
— Бойлерплейт
— Что легче расширять?
— Что легче тестировать?
— Дебагинг
— Популярность
https://blog.codota.com/redux-vs-mobx/
Codota Blog
Redux vs MobX in React: Which is right for you? | Codota Blog
The sooner you adopt a state management approach and library for your project, the less code you will be forced to rewrite as the size and complexity of your code-base grow.
Пример переноса тяжелой синхронной операции в Web Worker
https://blog.logrocket.com/how-to-improve-interface-responsiveness-with-web-workers/
https://blog.logrocket.com/how-to-improve-interface-responsiveness-with-web-workers/
LogRocket Blog
How to improve interface responsiveness with Web Workers - LogRocket Blog
This post shows you how to make your site feel more responsive to users and improve user satisfaction with Web Workers.
Небольшое сравнение Svelte с остальными библиотеками и фреймворками
https://dev.to/hanna/why-svelte-is-revolutionary-415e
https://dev.to/hanna/why-svelte-is-revolutionary-415e
DEV Community
Why svelte is revolutionary
Recently I've been trying multiple different JavaScript frameworks, ranging from React to Angular. Bu...
Как изменилась логика кэширования ресурсов с 86-й версии Google Chrome.
Причина изменения: увеличение безопасности и конфиденциальности, но есть и обратная сторона - трафик за ресурсами возрос на 4%
https://developers.google.com/web/updates/2020/10/http-cache-partitioning?hl=ru
Причина изменения: увеличение безопасности и конфиденциальности, но есть и обратная сторона - трафик за ресурсами возрос на 4%
https://developers.google.com/web/updates/2020/10/http-cache-partitioning?hl=ru
Google Developers
Gaining security and privacy by partitioning the cache | Web
Chrome's HTTP cache partitioning helps with better security and privacy.
🔥 Оказывается можно уже не писать код, а надиктовывать с помощью программного обеспечения Talon
https://twitter.com/JoshWComeau/status/1316809020301246466?s=20
https://twitter.com/JoshWComeau/status/1316809020301246466?s=20
Большинство вариантов по оптимизации фронтенд части сайта, собранные в одной статье:
— Алгоритмы сжатия
— 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 весёлыми демками и уроками с Алисой в Стране Чудес.