Front-end дайджест #39: COVID-19 у світі розробки інтерфейсів

У випуску: розбираємося з новим Node.js додаємо підтримку темної теми і покращуємо продуктивність веб-додатків.

HTML

Responsive Images the Simple Way — оптимізуємо завантаження картинок під потрібний дозвіл екрану.

SVG, Favicons, and All the Fun Things We Can Do With Them — міняємо картинки в залежності від теми.

CSS Scrollbar With Progress Meter — стилізуємо прогрес прокрутки скроллбара.

Level Up Your CSS Animation Skills — відеокурс по CSS-анимациям.

LCH colors in CSS: what, why, and how? — що таке LCH-кольори і навіщо вони потрібні?

Розбираємося з новими властивостями:

Будуємо Motion Path на CSS і JS:

Додаємо темну тему:

Статті з блогу Ахмада Шадіда про CSS:

Вивчаємо CSS Grid:

The Ultimate Guide to CSS Grid — все, що потрібно знати.
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs — як CSS Grids можуть допомогти вирішувати різні повсякденні завдання?
Thinking in Behaviors, Not Screen Sizes — розбираємося, як працювати з властивістю gap.

ECMAScript 2020: the final feature set — що увійде в новий стандарт JavaScript?

Creating Scheduled Push Notifications — призначаємо push-повідомлення, використовуючи Service Worker'и.

how to manage HTML DOM with vanilla JavaScript only? — добірка кейсів маніпуляції DOM на чистому JavaScript.

Розбираємося з нативними API:

The .classList() API ;
An introduction to the Web Contact Picker API — працюємо з книгою контактів на мобільних пристроях;
How to Detect Idle Browser Tabs with the Page Visibility API — визначаємо неактивні вкладки, використовуючи Page Visibility API;
Monitor your web page's total memory usage with measureMemory() — експериментальне API з відстеження пам'яті в браузері;
WebSocketStream: integrating streams with the WebSocket API .

Storage for the web — як краще зберігати дані в браузері?

Вчимо JavaScript за написанням ігор:

Продовжуємо розбирається з TypeScript в блозі Акселя Раушмайера:

Web performance checklist — починати потрібно з чек-листа.

The Cost of Javascript Frameworks — порівнюємо час завантаження, обробки, виконання, а також витрати пам'яті сучасних фреймворків.

Improve your Website's Performance with Real User Monitoring — покриваємо наш ресурс моніторингом продуктивності.

Optimising the Fonts on My Website — оптимізуємо шрифти.

Performance monitoring in CSS animations — як краще робити анімацію з точки зору продуктивності? Дивимося під мікроскопом.

Improved Next.js and Gatsby page load performance with granular chunking — новий спосіб зменшення дублюючого коду в додатках Next.js і Gatsby шляхом оптимізації Webpack-чанків.