Front-end: Поднимаем performance и выбираем технологию для проекта в 2020

0
774

Front-end: Поднимаем performance и выбираем технологию для проекта в 2020

CSS

How Do You Remove Unused CSS From a Site? — обзор автоматических способов удаления неиспользуемых стилей из вашего приложения.

How We Implemented a Baseline Grid Using CSS — магия сеток в New York Times.

Playing Sounds with CSS — слушаем музыку, изменяя псевдоклассы элементов.

Dark Mode Favicon — стилизуем фавикон под мод системы.

Having a Little Fun With Custom Focus Styles — разбираем способы стилизации фокуса.

CSS Custom Properties:

JavaScript

JavaScript, ES6, ES7, ES10 where are we? — что принесли нам новые стандарты и чего ждать в будущем (Observables, Optional Chaining, Top Level Await и т. д.).

Why Should We Stop Using Objects As Maps in JavaScript? — почему стоит перейти на Map и не использовать объект как словарь.

Подборка особенностей и хаков, которые помогут упростить код:

An Introduction to the Picture-in-Picture Web API — введение в новый Picture-in-Picture API, который позволяет отделять видео в плавающий элемент.

Techniques for Rendering Text with WebGL — анимируем текст при помощи Tree.js.

React

Build your own React — пошаговое руководство, основанное на реальной реализации React.

Testing React Hooks With Enzyme and React Testing Library.

Rich docs with Storybook MDX — документируем дизайн-систему React-приложения.

Is it time to move on from Virtual DOM (React)? — почему Virtual DOM и React стал популярным и какие альтернативы в 2к19.

Svelte vs React:

React Native

Expo SDK 36.

10 Awesome React Native UI Component Libraries You Should Know — подборка UI-библиотек, которые ускорят разработку ваших мобильных приложений.

React Native Animations — Zero to Hero — прокачиваем себя в создании анимаций.

React Native vs Flutter: A comparison from a real project experience perspective — сравнение React Native и Flutter, когда лучше использовать то или иное решение?

React Native: How To Build a Home Screen Widget for iOS and Android — туториал создания виджета для рабочего стола.

React Native Video — handling fullscreen and controls on Android — кастомизируем проигрывание видео.

WebAssembly

World Wide Web Consortium (W3C) brings a new language to the Web as WebAssembly becomes a W3C Recommendation — официально WebAssembly рекомендация W3C.

Improved WebAssembly debugging in Chrome DevTools — улучшение отладки работы в новом Chrome DevTools.

Как мы внедряли WebAssembly в Яндекс.Картах и почему оставили JavaScript.

Vue.js

9 Vue.js Libraries That Will Make Your Life Easier — ускоряем написание Vue.js-приложений.

Create a lazy-loading image component for faster Vue.js apps — добавляем ленивую загрузку изображений в Vue.js-приложение.

Simple Vue.js grid using named scoped slots — создаем универсальные, переиспользуемые Vue.js-компоненты.

Angular

10 Useful Angular Features You’ve Probably Never Used — используем Angular API по полной.

Reduce Change Detection Cycles with Event Coalescing in Angular — разбираемся с новым свойством ngZoneEventCoalescing, которое предотвращает распространение события вверх по дереву.

Angular and Internet Explorer — о больном, поддержка Internet Explorer в Angular 8 и 9.

Performance benefits of using Service Worker in Angular app — кэширует результаты запросов используя Service Worker’ы.

Keeping Your Angular Components DRY With Content Projection — делаем расширяемыми и переиспользуемыми Angular-компоненты.

Why I Chose Angular Going Into 2020 — почему стоит выбирать Angular для разработки новых приложений в 2к20.

Node.js

Node.js 13.2.0 — экспериментальная поддержка ECMAScript-модулей теперь включена по умолчанию.

Getting Started With An Express And ES6+ JavaScript Stack — пишем Booklist API на Express, MongoDB и ES6.

Understanding Streams in Node.js — как работают и зачем нужны потоки в Node.js.

20 ways to become a better Node.js developer in 2020 — прокачиваем себя в 2к19.

Performance

Performance of JavaScript optional chaining — как новый синтаксис влияет на скорость кода.

Here’s What We Learned About Page Speed — результаты исследования скорости загрузки более 5 миллионов страниц.

JavaScript component-level CPU costs — как JavaScript-компоненты влияют на CPU.

Performance Tips for Background — способы оптимизации фонового видео.

The unseen performance costs of modern CSS-in-JS libraries in React apps — хорошо ли использовать CSS in JS в React-приложении? Цена CSS in JS.

Посмотреть

Smashing Magazine:

Послушать

Frontend Weekend

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

devschacht:

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

CSSSR:

Новости 512:

Smashing Podcast:

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

Lite youtube embed — самый быстрый способ добавить видео в ваше приложение от Пола Айриша.

Developer Tools to Increase Your Productivity — 9 инструментов, которые улучшат вашу производительность.

Flowy — минималистская библиотека для создания блок-схем.

React adaptive hooks — набор React-хуков для адаптивной загрузки контента от Эдди Османи.

Nano neuron — начинаем работать с ML на JavaScript.

Браузеры

Изменения в Chrome:

Новинки Firefox:

Остальное

Web Components and the Accessibility Object model (AOM) — о будущей реализации объектной модели доступности для кастомных элементов.

Redux Toolkit — официальный набор инструментов для разработки Redux-приложений.

5 Front-End Challenges to Code (Dec. 2019 Edition) — 5 задач для разминки.

Прокачиваем свой VSCode, если еще это не сделали:

A Recap of Frontend Development in 2019 — что нам принёс 2к19.

2020 and Beyond Programming Trend Predictions — предсказываем тренды будущего года.

Видео с конференций и митапов

CSS-Minsk-JS Conference 2019

WSD в Минске 2019

React Conf 2019

CSSConf Budapest 2019

JSConf Budapest 2019

JSConf Korea 2019

React Native EU 2019

RxJS Live 2019

elm-conf 2019

AngularConnect 2019

React Boston 2019

ReasonConf US 2019

GraphQL Summit 2019

источник