Front-end дайджест #31: Оптимизируем производительность ресурса вместе с Эдди Османи и инженерами Google

В выпуске: TypeScript 3.0, новый фреймворк от Uber, как инженеры Airbnb искали дзен в мобильной разработке, зачем нам нужен WebAssembly и немного магии CSS.

HTML и CSS

CSS Grid in IE:

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 переменных:

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

React is not the new JQuery

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

Как начать использовать:

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

Туториалы:

WebAssembly

Что для нас значит WebAssembly:

Пишем на разных языках:

Библиотеки

Apexcharts — добавляем красивые графики

Dumper.js — инспектор для вашего приложения на Node.js

Phenomenon — низкоуровневое легковесное API для WebGL

Unswitch — хендлинг Nintendo Switch контроллера

React-values — набор React-компонентов для управления состоянием при помощи render props

Послушать

Frontend Weekend:

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

devschacht:

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

CSSSR Новости 512:

Egghead подкаст:

Конференции и Митапы

CSS Grid | OdessaFrontend

2018 June Meetup

CSSconf EU 2018

JSConf EU 2018

Подборки Top 10

Топ 10 статей от Techburst.io за июль:

Топ 10 статей от Mybridge за август:

Top 10 open-source от Mybridge за июль:

Что нового?

Typescript 3.0

FramerX

Framer X Preview

Vue CLI 3.0

Introduction to Feature Policy — новых серверные заголовки и атрибуте allow для <iframe>

Новый кодек AV1:

Chrome 68 и Chrome 69 Beta

Fusion — фреймворк от Uber

Webhint — анализирует сайт на ошибки доступности

Serverless Docker Beta в Next.js

Electron Fiddle

BDB — удобный дебаггинг Node.js приложений

Carbon now cli — создаем красивые скриншоты кода

Mdx-deck создаем презентацию на Markdown

Остальное

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.
Следующий выпуск: Frontend дайджест #32

👍НравитсяПонравилось0
В избранноеВ избранном0
Подписаться на автора
LinkedIn



Підписуйтесь: Soundcloud | Google Podcast | YouTube


Нет комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Подписаться на комментарии