Front-Еnd дайджест #26: Yarn 1.0, потоки в JS, Atom-IDE, починаємо писати на Reason і WebAssembly

У випуску: як жити з ліцензіями React, інвестиції Webpack — чого чекати? Піднімаємо продуктивність наших додатків і розбираємося з системами типізації — Flow або TypeScript?

CSS

Inside a super fast CSS engine: Quantum CSS (aka Stylo) — як влаштований новий движок обробки CSS в Firefox

Unicode-range — як це працює?

Building Skeleton Screens with CSS Custom Properties

Writing CSS with Accessibility in Mind — не забуваємо про доступності при написанні стилів

JavaScript

JavaScript Events Unmasked: How to Create an Input Mask for Mobile — створюємо поле вводу з маскою для телефонів

Deep Dive into the Payment Request API

Quokka — Live JavaScript Scratchpad for Atom editor

How I Convinced Our CTO to Switch From CoffeeScript to ES6 — як переконати керівництво перейти з CoffeeScript на ES6

Building a Maybe in JavaScript — пишемо Maybe монаду на JavaScript

Converting from Speech to Text with JavaScript — розпізнаємо мова в браузері

Building Skeleton Screens with CSS Custom Properties — компоненти-заглушки з допомогою CSS змінних

How JavaScript works: memory management + how to handle 4 common memory leaks — робота збирача сміття і витоку пам'яті в JS

Concurrent JavaScript: It can work! — потоки в JS!

Deploying ES2015+ Code in Production Today — використовуємо ES6 код на продакшине. Як? Навіщо?

Progressive Web Apps

Building a Small PWA with Preact and Firebase — будуємо PWA на Preact і Firebase для спортивних тренувань

Android Oreo takes a bite out of Progressive Web Apps — проблеми PWA в Android 8

A React And Preact Progressive Web App Performance Case Study: Treebo — Едді Османі про перфоманс PWA на React

React і React Native

Ліцензії реактив, як жити:

Rethinking drag and drop — React DnD в продуктах Atlassian

DOM Attributes in React 16

All the fundamental React.js concepts, jammed into this single Medium article — фундаментальні концепції React

React Animations in Depth — анімація в деталях

Writing Scalable React Apps with the Component Folder Pattern — best practice структурування проекту з styled-components

How to use React's controlled inputs for instant form field validation

How We Built Our React Native App

How I built a Content Management System for a React app in one day

Use a Render Prop! — пишемо компоненти з render prop

Vue

Vue is now on OpenCollective!

Reactivity In Vue.js (And Its Pitfalls)

Reusable, Scalable and Easy to organize project using Vue — як правильно будувати програми на Vue:

Building a movie app interface with Vue.js

Тестуємо Vue:

Angular

Implementing a parser using Angular 4

Building a Simple Carousel Component with Angular

Building an Angular 4 Component Library with the Angular CLI and ng-packagr

Тестуємо Angular:

Flow

Оновлений Flow — тепер більше фіч для React

Typing Higher-order Components in Recompose With Flow

What I Love and Hate About Flow

Linting in Flow

Private Object Properties Using Flow's Opaque Type Aliases

Redux & Flow-type — getting the maximum benefit from the fewest key strokes

TypeScript

TypeScript in CRNA — пишемо React Native додаток на TypeScript

Typescript or Flow

A Brief Introduction to TypeScript — Part 1

Apollo і GraphQL

The Fullstack Tutorial for GraphQL — керівництво по використанню GraphQL з різними технологіями

Build a GraphQL API in under 20 minutes

Angular vs React vs Vue (Холивары)

Why we moved from 2 to Angular Vue.js (and why we didn't choose React)

Angular vs. React: Which Is Better for Web Development?

Angular vs. React vs. Vue: A 2017 comparison

Node.js

Build a simple Telegram Bot with Node.js — пишемо телеграм-бота

How To Combine a NodeJS Back End with a ReactJS Front End App

ReasonML

Reducers are Here

Seattle JS RN App — демо додаток на React Native

Статті з блогу:

WebAssembly

The simplest way to get started with WebAssembly

JavaScript ? C++: Modern Ways to Use in C++ JavaScript Projects

CreaturePack: High Performance 2D WebGL Character Animation with WebAssembly

Продуктивність

Building the DOM faster: speculative parsing, async, defer and preload

Аудит швидкості сайту документації Vue.js

Size Limit: Make the Web lighter

The State of the Web — гайд по поліпшенню перфомансу

Architecting Electron Applications for 60fps

Optimize React Performance — розбираємося з продуктивністю React-додатків

Бібліотеки

Iroh — інструмент для аналізу динамічного коду на JavaScript

Sentineljs — виявляємо нові DOM елементи за допомогою CSS селекторів

Rendertron — серверний рендеринга від команди Google Chrome

Hazel — легкий сервер оновлень для додатків на Electron

Deeplearnjs — бібліотека глибокого навчання для Інтернету

Lozad.js — легкий і настроюється ледачий завантажувач

Three.ar.js — бібліотека three.js для створення веб-ресурсів AR

Songbird

React-imgpro — компонент обробки зображення для реакції

Redocx — React компонент текстовий редактор

React-markings — React markdown компонент

React-powerplug

Послухати

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

П'ятихвилинка React:

Devschacht —3 ,4

Frontend Weekend:

Shop talk show:

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

Devschacht:

Подивитися

Live Streams — щотижневі стріми Юрія Артюха

Chrome 61 — what's New in DevTools

Конференції

OdessaJS 2017

ChernivtsiJS #3

Polymer Summit 2017

FEDay Conference — текстова трансляція Андрія Ситника та Олексія Іванова

Microsoft Edge Web Summit 2017

Демо

Emoji Train ? ? ? ? ?

Що нового?

Announcing Yarn 1.0

Polymer 3.0 preview: npm and Modules ES6

React Armory — новий спосіб вчити React

Babel Planning for 7.0

Introducing Atom-IDE

Sublime Text 3.0

JavaScript Studio publicly available

Headless mode Firefox 56

Sonar — лінтер від Microsoft

StackBlitz — Online VS Code IDE for Angular & React

Safari 11.0

Introducing Formik 0.9.0

Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements

Pret-рівня 1.7.0: JSX tweaks, Pragma, TypeScript and CSS fixes

Інше

Webpack awarded $125,000 from MOSS Program

Gtop — моніторинг дашборд

Src2png — вихідний код в красиві зображення з виділеним синтаксисом зображення

Мобільні браузери та їх пухнасті лапки

Run multiple versions of Chrome side-by-side

Managing CSS & JS in an HTTP/2 World

Offline UX Considerations

Ten Years Ago — інтернет 10 років тому

Custom Elements Everywhere — Хто готовий до роботи з веб-компонентами?

What every software engineer should know about search

Introducing the Extension Compatibility Tester — тестуємо Chrome-розширення на сумісність з WebExtension для Firefox 57+

Understanding the WebView in Viewport iOS 11

Подкасти "Медузи" — як працює нова система

Grammarly шукає талановитих Front-End інженерів для удосконалення нашого продукту, створення мінімалістичних елегантних користувальницьких інтерфейсів і вирішення складних технічних завдань. Нашим продуктом користуються мільйони користувачів щодня. У нас чудова команда, разом з якою ми використовуємо самі передові технології. Докладніше тут .

Приєднуйтесь.

З вами був Григорій Шехет, . За допомогу в оформленні дайджесту дякую своїх колег.

? Попередній випуск: Frontend дайджест #24 .

Опубліковано: 23/09/17 @ 10:00
Розділ Блоги

SEO Блог