Front-end дайджест #32: подводим итоги 2к18, новый браузер от Microsoft и Chrome Summit
В выпуске: новый блог Дэна Абрамова, как улучшить производительность вашего веб-приложения, разбираемся с React Hooks и Lazy-loading, а также материалы по Angular, Vue.js и Node.js.
CSS и CSS in JS
Making Future Interfaces With Custom Properties — кастомные свойства в CSS
A look at CSS Resets in 2018 — смотрим на CSS Rest с современным взглядом
Dark modes:
- Dark modes with CSS
- From dark to light and back again — инженеры 1Password о том, как сделать темную тему в блоге
A timing attack with CSS selectors and Javascript — CSS для хакеров
Preventing Content Reflow From Lazy-Loaded Images — как правильно загружать картинки
Bridging the Gap Between CSS and JavaScript:
Новинки из мира CSS in JS:
Пишем CSS по новому:
- color-adjust
- scrollbar-gutter
- Everything about CSS environment variables
- How and when to use the tabindex attribute
JavaScript
Hummingbird: Building Flutter for the Web
Console.rules() — становимся гуру консоли
The Power of Web Components — почему нужно использовать веб-компоненты
Web workers vs Service workers vs Worklets — зачем нам нужны веб-воркеры, сервис-воркеры и ворклеты
Going Offline First — делаем веб-приложение оффлайн
Little known features of JavaScript — баги и фичи JavaScript’а
These tools will help you write clean code — пишем код лучше с Prettier, ESLint, Husky, Lint-Staged и EditorConfig
Handling Errors in JavaScript: The Definitive Guide — как лучше отлавливать ошибки
An Introduction to Functional Programming Style in JavaScript — пишем функциональный JavaScript
Understanding Asynchronous JavaScript — the Event Loop — разбираемся в асинхронности
Performance
The Baseline Costs of JavaScript Frameworks — почему современные фреймворки такие большие?
A Netflix Web Performance Case Study — Эдди Османи анализирует производительность Netflix
CSS and Network Performance — как CSS влияет на производительность вашего веб-приложения
Improving Document Preview Performance — как инженеры Dropbox ускорили отрисовку превью документов
Fast Google Fonts with Cloudflare Workers — как оптимизировать подгрузку шрифтов вместе с Cloudflare
You need neither PWA nor AMP to make your website load fast — Никита Прокопов рассуждает, как сделать ваш сайт быстрым
React и React Native
A Guide to Custom Elements for React Developers
These are the concepts you should know in React.js (after you learn the basics)
How to create a three layer application with React
Testing React Components with Jest and Enzyme- In Depth
Inside Fiber: in-depth overview of the new reconciliation algorithm in React
Lazy Loading:
- Lazy loading (and preloading) components in React 16.6
- How to use React.lazy and Suspense for components lazy loading
React Hooks:
- Making Sense of React Hooks
- How to Build a Todo List with React Hooks
- Handling Errors in JavaScript: The Definitive Guide
- Why React Hooks, and how did we even get here?
- Under the hood of React’s hooks system
- Simple Code Reuse with React Hooks
How to Develop a Location-based Application Using React Native
Vue.js
Structuring a Vue project — Authentication
How to create a Vue.js app using Single-File Components, without the CLI
My Favorite Vue.js & Nuxt.js packages for 2019
Real-life use cases for computed properties in Vue
Turn your Vue Web App into a PWA!
Plans for the Next Iteration of Vue.js
Angular
Building Interactive Lists with the new Angular 7 Drag and Drop tool
Keeping browser tabs in sync using localStorage, NgRx, and RxJS
Best practices for a clean and performant Angular application
Creating a toast service with Angular CDK
The benefits of using pure pipes in Angular templates
How to optimize Angular applications
Node.js
Lets build express — пишем свой Express с 0
Writing memory efficient software applications in Node.js
How to use NodeJS without frameworks and external libraries
Nodejs C++/JS Boundary: Crossing The Rubicon
Библиотеки и инструменты
Fx — инструмент командной для форматирования JSON на JavaScript
HTM — JSX на шаблонных литералах
Rawact — babel-плагин, который компилирует React-компоненты чтобы исключить необходимость использования библиотеки во время выполнения
Linaria — новый CSS in JS, который генерирует CSS
NCC — CLI для компиляции Node.js от Zeit
ImmortalDB — key-value хранилище в браузере
Progress Estimator — логируем прогресс выполнения промиса
Worker Plugin — добавляет поддержку Web Worker’ов в Webpack
Ervy — строим графики в терминале
Carlo — браузерное окружение для Node.js приложений
Percollate — инструмент командной строки для превращения веб-страниц в PDF-файлы
Демо
3D Astronaut — на веб-компоненте <model-viewer>
Послушать
Frontend Weekend:
- #77 — Александр Амосов о том, почему стоит начать работать с 3D в браузере
- #78 — Антон Черноусов aka golodnyj о становлении менеджера продукта из программиста и подкастинге
- #79 — Олег Поляков об основании CodeDojo и о том, как это стало основным местом работы
- #80 — Гордей Левченко о переезде в Казахстан и развитии frontend-сообщества в Астане
- #81 — Екатерина Павленко о том, как работает программный комитет HolyJS изнутри
Веб-стандарты:
devschacht:
- 55: Быть тимлидом
- 56: NodeConf EU 2018
- 57: Как в компании Wrike используют язык Dart
- 58: UFADEVCONF, состояние Node.js в 2018 году
- 59: Как сделать крутой доклад
Фронтенд Юность (18+):
- #69 Java не успевает за JavaScript
- #70 Капитан Хук и Кот
- #71 На работу к Илону Маску через ректальные хуки
- #72 Как попасть к Ситнику в Browserslist
- #73 Три корочки Эдди Османи
CSSSR Новости 512:
- Выпуск № 27 (29.10 — 04.11)
- Выпуск № 28 (05.11 — 11.11)
- Выпуск № 29 (12.11 — 18.11)
- Выпуск № 30 (19.11 — 25.11)
- Выпуск № 31 (26.11 — 02.12)
Конференции и митапы
Что нового
PageSpeed Insights теперь работает на Lighthouse
VisBug — редактор интерфейсов в виде расширения для Chrome
Microsoft переводит Edge на платформу Chromium:
- Microsoft is building a Chromium-powered web browser that will replace Edge on Windows 10
- Microsoft Edge: Making the web better through more open source collaboration
Overreacted — персональный блог Дэна Абрамова
Остальное
Web.dev — коллекция курсов по разработке веб-приложений
Рассылай и властвуй: инструменты для создания и тестирования рассылки — как в 2ГИС создают и тестируют email-рассылки
I don’t know what to say — уязвимость event-stream
Exploiting Developer Infrastructure Is Ridiculously Easy
7 bad excuses for not using TypeScript — почему не TypeScript
The Ultimate VSCode Setup for Front End/JS/React — настраиваем VSCode под повседневные задачи
Готовимся к интервью:
- Front-end JavaScript Interviews in
2018–19 - Learn to code in 2019, get hired, and have fun along the way
Grammarly ищет талантливых Front-End инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. И если вам интересно стать частью её, то смотрите открытые вакансии здесь, или стучитесь ко мне в Facebook.
С вами был Григорий Шехет. За помощь в оформлении дайджеста благодарю своих коллег.
← Предыдущий выпуск: Frontend дайджест #31.
