×Закрыть

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 Angular 2 to 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 C++ in 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 ES6 Modules

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

Prettier 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 Viewport in iOS 11

Подкасты „Медузы” — как работает новая система


Grammarly ищет талантливых Front-End инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. Подробнее здесь.

Присоединяйтесь.

С вами был Григорий Шехет, @AGambit95. За помощь в оформлении дайджеста благодарю своих коллег.


← Предыдущий выпуск: Frontend дайджест #24.
Следующий выпуск: Frontend дайджест #27

LinkedIn

2 комментария

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

Ждать следующую неделю, когда реакт переведут на MIT

если б это было его единственной проблемой..

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