Дек. 14

Front-end дайджест #37: поднимаем performance и выбираем технологию для проекта в 2к20

В выпуске: WebAssembly — теперь рекомендация W3C, как лучше добавить YouTube-видео в ваше приложение, решение Пола Айриша, а также набор React-хуков от Эдди Османи.

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:

7 Uses for CSS Custom Properties — примеры, когда кастомные CSS-свойства реально работают.
The Power (and Fun) of Scope with 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:

Why Svelte won’t kill React.
I created the exact same app in React and Svelte. Here are the differences — пошаговое сравнение двух технологий на примере todo-приложения.

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:

Что нового в Chrome 79.
Улучшение DevTools в Chrome 80.
8 New Chrome APIs You Should Know — подбора новинок от команды Chrome и не только.

Новинки Firefox:

Firefox 71: A year-end arrival.
Debugging Variables With Watchpoints in Firefox 72.
The Firefox UI is now built with Web Components — интерфейс 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

Грядущие конференции

14 марта пройдет конференция JavaScript fwdays’20 — самая масштабная конференция для JS разработчиков. В этом году объединит более 900 участников, которых ждут 3 потока докладов, крутой состав спикеров из Google, GitLab, Stack Overflow, core team of Vue.ja, Nuxt.js, DataRobot, Twilio; альтернативные дискуссии и незабываемое Afterparty. Среди спикеров: Jeff Atwood, Sara Vieira, Sebastien Chopin, Наталия Теплухина, Вадим Макеев, Chen Hui Jing, Martin Splitt, Илья Климов, Юрий Артюх, Stefan Judis (Twilio) и не только. Скидка 15% по промокоду: frontend_digest-dou

Так же приглашаем на JS Fest 2020 Spring, 3-4 апреля — международную конференцию, посвященную всем аспектам JavaScript разработке! Это одна из крупнейших JS конференций в Украине, которая пройдет в четвертый раз и соберет сотни опытных единомышленников со всего мира.

Grammarly ищет талантливых Front-End инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. И если вам интересно стать частью её, то смотрите открытые вакансии здесь, или стучитесь ко мне в Facebook.

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

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