Front-end дайджест #31: Оптимизируем производительность ресурса вместе с Эдди Османи и инженерами Google
В выпуске: TypeScript 3.0, новый фреймворк от Uber, как инженеры Airbnb искали дзен в мобильной разработке, зачем нам нужен WebAssembly и немного магии CSS.
HTML и CSS
CSS Grid in IE:
- Debunking Common IE Grid Misconceptions
- CSS Grid and the New Autoprefixer
- Faking an Auto-Placement Grid with Gaps
Logical Styling Based on the Number of Given Elements — стилизация на основе количества элементов
The peculiar magic of flexbox and auto margins — магия flex-box и margin auto
Everything You Need To Know About Alignment In Flexbox — выравниваем элементы, используя flex-box
Converting Images To WebP — конвертация картинок в WebP от А до Я
The trick to viewport units on mobile — как правильно рассчитать высоту экрана на мобильном
Магия CSS переменных:
- Simple Interactive Pie Chart with CSS Variables and Houdini Magic
- Switch font color for different backgrounds with CSS — меняем цвет элементов в рантайме или магия CSS-переменных
JavaScript
A Practical Guide to Regular Expressions(RegEx)In JavaScript — гайд по регулярным выражениям в JavaScript
10 Things You Will Eventually Learn About JavaScript Projects — все, что нужно знать о JavaScript
Understanding Static In Javascript — зачем нужен static разработчику интерфейсов
Detecting autofilled fields in Javascript — работа с автокомплитом в браузере
The Cost Of JavaScript In 2018 — Эдди Османи про эффективную загрузку скриптов
Reduce JavaScript Payloads with Tree Shaking — уменьшаем JS-нагрузки с тришейкингом
Build a state management system with vanilla JavaScript — стейт-менеджмент своими руками
Reduce JavaScript Payloads with Code Splitting — улучшаем перфоманс с помощью code-splitting
What’s Happening With the Pipeline (|>) Proposal? — когда будут пайп-лайны и будут ли вообще?
React
Finite State Machines with React — исследуем State Machine
How I made my portfolio website blazing fast with Gatsby
How styled-components works: A deep dive under the hood — styled-components под капотом
How to build GitHub search functionality in React with RxJS 6 and Recompose
Apple music — слушаем музыку на React
React Native
Why Discord is Sticking with React Native — React Native на продакшене
11 React Native Component Libraries You Should Know in 2018
React Native — Making your app fast again — ревью React Native после года использования
Эпопея React Native в Airbnb или почему:
Vue.js
Tutorial — Build an Instagram clone with Vue.js and CSSGram — пишем свой Инстаграм
Building „Renderless” Vue Components
I created the exact same app in React and Vue. Here are the differences
The First Vue.js Sprint — Summary — Vue.js ревью
Angular
I Built the Ngrx Demo App with Akita. Here’s the Result
Angular Console — The UI for the Angular CLI
Creating Reusable Animations in Angular
Attribute Directives ❤ Angular Forms
Angular Authentication: Using the Http Client and Http Interceptors
Progressive Web App
What is a PWA and why should you care? — зачем нам нужен Progressive Web App
A one year PWA retrospective — опыт использования в Pinterest
Как начать использовать:
- Progressive Web Apps 101: the What, Why and How
- A Beginner’s Guide to Progressive Web Apps & the Frontend Web
Node.js
This one line of Javascript made FT.com 10 times slower — как одна строчка может уменьшить производительность в 10 раз
Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers
Туториалы:
- How I built a job scraping web app using Node.js
- Build A Chat App With Sentiment Analysis Using Next.js
- Learn how to handle authentication with Node using Passport.js
WebAssembly
Что для нас значит WebAssembly:
- WebAssembly is more than the web
- Is WebAssembly the return of Java Applets & Flash?
- WebAssembly: How and why
Пишем на разных языках:
- Life: A secure, blazing-fast, cross-platform WebAssembly VM in Go
- A web application completely in Rust
Библиотеки
Apexcharts — добавляем красивые графики
Dumper.js — инспектор для вашего приложения на Node.js
Phenomenon — низкоуровневое легковесное API для WebGL
Unswitch — хендлинг Nintendo Switch контроллера
React-values — набор React-компонентов для управления состоянием при помощи render props
Послушать
Frontend Weekend:
- #60 — Дмитрий Рожков о создании Senior Software Vlogger, зимовке в Таиланде и жизни в Гамбурге
- #61 — Андрей Мелихов о работе в Яндекс.Деньгах, Ночном фронтенде и захвате власти в devSchacht
- #62 — Андрей Ситник о переезде в Нью-Йорк, путешествиях и порно в Твиттере
- #63 — Александр Першин о том, как и зачем создавать школу онлайн-образования в России
- #64 — Олег Мохов о том, как комфортно и правильно руководить разработчиками
- #65 — Игорь Шеко о том, как из серийного стартапера стать выступающим тимлидом
Веб-стандарты:
devschacht:
- Ночной фронтенд 40 — ГПХ, депрессии, WSD и Patreon
- Ночной фронтенд 41 — В поисках хорошего code review
- Ночной фронтенд 42 — Автоматизация CI/CD
- Ночной фронтенд 43 — Снова о Jenkins, ChaosConstructions 2018, ndb и ШРИ
- Ночной фронтенд 44 — Как пересадить всех разработчиков в компании на свой велосипед
- Ночной фронтенд 45 — Когда фронтендер становится девопс
Фронтенд Юность (18+):
- Фронтендер в Берлине
- #56 Токсичное сообщество
- #57 Утреннее шоу: Эхо фронтенда
- #58 За что уволили jQuery из GitHub
- #59 Поговорим о джаваскрипте
- #60 Сергей Бережной: Фрактальная жизнь
CSSSR Новости 512:
Egghead подкаст:
- Health and Wellness for Developers
- Ives Van Hoorne, creator of CodeSandbox
- Phil Pluckthun, Creator of Dank Mono
- Henry Zhu, Maintainer of Babel
Конференции и Митапы
Подборки Top 10
Топ 10 статей от Techburst.io за июль:
Топ 10 статей от Mybridge за август:
Top 10 open-source от Mybridge за июль:
Что нового?
Introduction to Feature Policy — новых серверные заголовки и атрибуте allow для <iframe>
Новый кодек AV1:
- An Invisible Tax on the Web: Video Codecs
- AV1: next generation video — The Constrained Directional Enhancement Filter
Fusion — фреймворк от Uber
Webhint — анализирует сайт на ошибки доступности
Serverless Docker Beta в Next.js
BDB — удобный дебаггинг Node.js приложений
Carbon now cli — создаем красивые скриншоты кода
Остальное
Developer Roadmaps — как развиваться
Browser painting and considerations for web performance — познаем дзен в производительности приложений
When 7 KB Equals 7 MB — когда кэш переполнен
PWACompat: the Web App Manifest for all browsers
Site Isolation for web developers — изолируем браузер в новом Chrome
Building the Google Photos Web UI — как создавался новый Google Photos
A milestone for Chrome security: marking HTTP as „not secure” — HTTP сайты под угрозой
Page Lifecycle API — новые состояния страницы
Graphqurl — curl для GraphQL
Introducing headless Chrome support in Cloud Functions and App Engine
Building websites for Safari Reader Mode and other reading apps — создаем сайты для режима чтения в браузере
Removing Babel’s Stage Presets — пресетов больше не будет
Juliarderity — телеграм канал моего хорошего друга Сергея Рубанова, где он делится инсайтами TC39, Babel и WebAssembly
Grammarly ищет талантливых Front-End инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. И если вам интересно стать частью её, то смотрите открытые вакансии здесь или стучитесь ко мне в Facebook.
Также 26 сентября у нас состоится Front-End митап. На нем Игорь и Женя расскажут, как разрабатывался с нуля экстеншн Grammarly. Приходите к нам в гости!
С вами был Григорий Шехет. За помощь в оформлении дайджеста благодарю своих коллег.
← Предыдущий выпуск: Frontend дайджест #30.
