×Закрыть

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-цвета и зачем они нужны?

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

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

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

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

Изучаем CSS Grid:

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:

Storage for the web — как лучше сохранять данные в браузере?

Учим JavaScript за написанием игр:

Typescript

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

Продолжаем разбирается с 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-хуками:

Строим приложения, используя 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:

Svelte

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

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

Node.js

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

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:

Статьи от Webkit:

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

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 — получаем актуальные данные:

COVID-19 в Индии:

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

Послушать

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

devschacht:

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

CSSSR:

JS Party:

CodePen:

Smashing Podcast:

Остальное

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

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


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


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

LinkedIn

1 комментарий

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Спасибо за подборку

Подписаться на комментарии