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:
- 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 и не использовать объект как словарь.
Подборка особенностей и хаков, которые помогут упростить код:
- Some simple and amazing JavaScript tricks.
- 11 Extremely Useful JavaScript Tips.
- Insanely Useful JavaScript Array Methods.
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
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
- #99 — Что изменилось у Виталия Фридмана (об усталости от конференций и экосистеме Smashing Magazine)
- #100 — Что изменилось у Артёма Цацина и самого подкаста за два года (юбилейный выпуск)
- #101 — Анастасия Калашникова о пути от HR к IT-психологу и проблемах разработчиков
Веб-стандарты:
- Выпуск 204 — Chrome Dev Summit, GitHub, снимок веба 2019, GSAP 3, Visual Studio
- Выпуск — 205 Safari TP, сервис-воркеры, Node.js ESM, Async и Promise, Optional Chaining, кастомные свойства
- Выпуск 206 — Браузер Flow, Lighthouse CI, сабгриды, лишний CSS, details, JS 2019, strict, JS кусается
- Выпуск 207 — 10 лет фронтенда, Firefox 71, WASM, YouTube, селект, экономия трафика в CSS, реклама, WSD всё
devschacht:
- Выпуск 101 — Антон Анохин о трудностях технопиара компании, пишущей на Dart
- Выпуск 102 — Новости Node.js и около
- Выпуск 103 — Dependency Injection в JavaScript
Фронтенд Юность (18+):
- #115 С чистым сердцем и голым движком
- #116 Как стать фронтендером и сохранить лицо
- #117 Садись за стол, Братишка!
- #118 Как заработать на самолёт во фронтенде?
CSSSR:
- World Wide Work — США, в гостях Яков Файн
- Remote Talk #09 — Яков Файн и Антон Моисеев, NYC vs Самара, TypeScript и важность книг в IT
Новости 512:
- React Conf, SmashingConf, VS Online, PHP 7.4.0 RC6, React 16.12, WordPress 5.3
- predustanovka, RC-парад, новые фичи Vue 3, CSS 8, Github for mobile и Oracle vs Google
- JS tooling, Vue 3, новый гайд по созданию собственного React и CSSDB
- Figma Auto Layout, Reatom, Vue domain-driven architecture и WebAssembly в законе
Smashing Podcast:
- Episode 3 With Jina Anne: What Are Design Tokens?
- Episode 4 With Heydon Pickering: What Are Inclusive Components?
Инструменты и библиотеки
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, если еще это не сделали:
- 10 Extremely Helpful Visual Studio Code Plugins for Programmers.
- 15 VS Code Extensions to Save Your Time and Make You a Better Developer.
A Recap of Frontend Development in 2019 — что нам принёс 2к19.
2020 and Beyond Programming Trend Predictions — предсказываем тренды будущего года.
