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 и CSS in JS

PostCSS 8.0.

Atomic CSS-in-JS.

90 Seconds on CSS Custom Properties.

Creating Playful Effects With CSS Text Shadows — как сделать 3D-текст?

Building a Scalable CSS Architecture With BEM and Utility Classes — строим БЭМ в 2к20.

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

How to Style Your React Apps with Less Code Using Tailwind CSS and Styled Components — стилизуем React-форму.

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

LCH colors in CSS: what, why, and how? — что такое LCH-цвета и зачем они нужны?

Разбираемся с новыми свойствами:

• @property;
• mask-repeat.

Строим Motion Path на CSS и JS:

• Create a Responsive CSS Motion Path? Sure We Can! (CSS);
• Different Approaches to Responsive CSS Motion Path (JS).

Добавляем темную тему:

• Building dark mode on Stack Overflow;
• Dark mode and variable fonts;
• Implementing Dark Mode In React Apps Using styled-components;
• Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag.

Статьи из блога Ахмада Шадида о CSS:

• CSS Findings From The New Facebook Design;
• Image Techniques On The Web;
• Overflow In CSS;
• Spacing in CSS;
• Selection in 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.

JavaScript

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 за написанием игр:

• Learn JavaScript by Building 7 Games;
• How I Built My Own Tetris Game from Scratch with Vanilla JavaScript.

Typescript

Видеокурс по основам TypeScript.

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

• Types for classes as values in TypeScript;
• Typing functions in TypeScript.

Performance

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-чанков.

React и React Native

A Sneak Peek at React Router v6.

How Animations Work in React Native.

Why I Switched to React Native to Create a Super Easy Bottom Sheet.

Упрощаем приложение с React-хуками:

• Getting Started With The React Hooks API;
• Best Practices With React Hooks;
• How to Create a Custom React Hook and Publish it to npm;
• Fetching Data in React using Hooks.

Строим приложения, используя React-хуки:

• Building a CRUD App with React Hooks & the Context API;
• How to Build a Simple Pokémon Web App with React Hooks and the Context API.

Обрабатываем формы:

• Using Formik to Handle Forms in React;
• React Hook Form — An Elegant Solution to Forms in React.

How to Build a TodoApp using ReactJS and Firebase.

Vue.js

Getting Started With Nuxt.

How the Vue Composition API Replaces Vue Mixins.

An Overview of What’s Coming in Vue 3.

More i18n with Vue: Formatting and Fallbacks.

Introduction to Vue Custom Events.

Using Vue Template Syntax to Build A Photo Gallery.

Angular

Make Your Angular Directive Functionality Lazy.

Angular 9 для начинающих, статьи от Free Code Camp:

• How to Install Your First App with Angular CLI;
• Components and String Interpolation.

Svelte

The Svelte Compiler Handbook — как работает Svelte под капотом?

Настраиваем голову на Svelt в двух частях: часть 1 и часть 2.

Node.js

Смотрим новую версию Node.js:

• Node.js version 14 available now;
• What’s Async Local Storage in Node.js v14?

Exploring Node.js Internals — что таит Node.js под капотом?

A Practical Guide to Memory Leaks in Node.js — ищем утечки памяти.

Performance Best Practices: How to Run and Monitor Express.js in Production — настраиваем мониторинг.

PWA Tutorial: How to Build a Geolocation App Using MongoDB, Node.js, and Express.js — отслеживаем геолокацию.

How we 30x’d our Node parallelism — как распараллеливание Node.js сэкономило компании $300 000 в год.

Браузеры

Апдейты Chrome:

• New in Chrome 81;
• Deprecations and removals in Chrome 83.

Статьи от Webkit:

• Web Animations in Safari 13.1;
• A Tour of Inline Caching with Delete.

Инструменты и библиотеки

Redaxios — минималистичная версия Axios.

Vite — экспериментальный дев-сервер для Vue.js.

Blitz — фреймворк на Next.js для создания фулстек-приложений на React.js.

Phelia — пишем приложения для Slack на React.

Editly — видеоредактор командной строки на JavaScript.

Reactive-Resume — строим резюме на JavaScript.

COVID-19 в мире JavaScript

Awesome Coronavirus.

COVID-19 — получаем актуальные данные:

• NovelCOVID;
• Covid19;
• Corona CLI;
• Coronavirus Tracker CLI;
• COVID-19 Scenarios;
• COVID 19 API.

COVID-19 в Индии:

• Covid19 India Cluster;
• Covid19 India React.

Строим интерактивную COVID-19 карту:

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet;
• How to add Coronavirus (COVID-19) case statistics to your React map dashboard with Gatsby.

Послушать

Веб-стандарты:

• Выпуск 224: Safari и Chrome, ES2020, дизайнеры и код, палитры, анимации, устаревший Git Flow и видеоплееры;
• Выпуск 225: The F-Word, новинки браузеров, AVIF, WebStorm 2020.1, PostCSS 8.0, CSS-нудизм и тёмные темы;
• Выпуск 226: Браузеры, Chakra Core, Shower 3.0, jQuery, Гитхаб, ES-импорты, TC39, Телеграм против веба;
• Выпуск 227: Сайт Веб-стандартов, cssunderhood, Chrome, цвета, кастомные свойства, Brotli, цена фреймворков.

devschacht:

• Выпуск 113: Три проблемы nest;
• Мониторинг node.js на примере интересного кейса.

Фронтенд Юность (18+):

• Выпуск 131: Первый трёхмерный;
• Выпуск 132: Самый нерабочий;
• Выпуск 133: Самый беспилотный;
• Выпуск 134: Всё выглядит сложно, если ты тупой;
• Выпуск 135: Хуки лучше хоков.

CSSSR:

• Argumentarium — Коронавирус: удалёнка или страх и ненависть в IT;
• World Wide Work — Китай, Ухань, в гостях Арарат Мартиросян;
• Новости 512:
  
  • Новые тарифы Github, Three.js, SVG, frontendbookmarks, Vue 3 Beta.2, security-релизы git и Oracle;
  • Юбилей новостей, лямбда-JS, Ubuntu 20.04 LTS, NodeJS 14, Laravel 7.7, ещё security-релизы.

JS Party:

• #120 WFH!?
• #121 What even is a micro frontend?
• #122 What’s new and what’s Next.js;
• #123 JS “Danger” Party;
• #124 We got confs on lockdown.

CodePen:

• #260: Remote;
• #261: Following and Activity;
• #262: Dee;
• #263: A New Editor Vue;
• #264: Community Roundup.

Smashing Podcast:

• Episode 13 With Laura Kalbag: What Is Online Privacy?
• Episode 14 With Rachel Andrew: How Can I Run Online Workshops?

Остальное

Front-End Challenges — подборка сайтов с заданиями — от верстки до алгоритмов.

An abbreviated history of JavaScript package managers — история пакетных менеджеров npm, yarn и pnpm.

С вами был Григорий Шехет. До новых встреч =^.^=

← Предыдущий выпуск: Front-end дайджест #38.