В выпуске: как жить с лицензиями 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
Лицензии реакт, как жить:
- Explaining React’s license — Блог
- The React license for founders and CTOs
- 3 Points to Consider before Migrating Away from React Because of Facebook’s ‘BSD+ Patent’ License
Rethinking drag and drop — React DnD в продуктах Atlassian
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
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:
- Write simple unit tests with Vue Test Utils and Jest
- VueJS unit tests as a learning tool:
v-text versusv-html
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:
- Angular Tests Made Easy With ngx-easy-test
- Automate E2E testing of Angular 4 apps with ProtractorJS & Jasmine
Flow
Обновленный Flow — теперь больше фич для React
Typing Higher-order Components in Recompose With Flow
What I Love and Hate About 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
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
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
React-imgpro — компонент обработки изображения для реакции
Redocx — React компонент текстовый редактор
React-markings — React markdown компонент
Послушать
Пятиминутка React:
- #30 — setState и орагнизация кода
- #31 — .getInstance, Екатерина Назарова
- #32 — Webpack 4, Cycle.js, Error Boundaries, StackBlitz, всем Preact, Пятиминутка Angular
- #33 — Кирилл Мокевнин, Hexlet.io
- #34 — Moscow Frontend Conference 2017 и BEM React Core
Devschacht — 3, 4
Frontend Weekend:
- #16 — Сергей Рубанов про организацию BeerJS и мировые конференции
- #17 — Вадим Макеев про HTML Academy, Opera, конфликты и сексизм
- #18 — Путешествие в Минск и обсуждение докладов на CSS-Minsk-JS
Shop talk show:
- CSS-Zingers (Summer 2017 Beachbody Edition)
- Top 5 Browser APIs You’re Not Using with Patrick Kettner
- RIP HTML Imports
- #shareyourdrafts
Фронтенд Юность (18+):
- #15 Почему проиграл Oxxxymiron
- #16 Тайны раскола в разработке Node.js
- #17 Как прокачиваться на работе
- #18 Как Лёха не попал в Booking
- RadioJS Выпуск 49: Alive!
Devschacht:
- Выпуск № 6
- Выпуск № 7 — Посмотри мой пулреквест
- Ночной фронтенд — экспериментальный выпуск
- Ночной фронтенд #2
- Ночной фронтенд #3 — Yarn 1.0, Sonotype Nexus, ESM в Node.js, ДЛМ
Посмотреть
Live Streams — еженедельные стримы Юрия Артюха
Chrome 61 — What’s New in DevTools
Конференции
FEDay Conference — текстовая трансляция Андрея Ситника и Алексея Иванова
Microsoft Edge Web Summit 2017
Демо
Emoji Train🚂🚃🚃🚃🚃
Что нового?
Polymer 3.0 preview: npm and ES6 Modules
React Armory — новый способ учить React
JavaScript Studio publicly available
Sonar — линтер от Microsoft
StackBlitz — Online VS Code IDE for Angular & React
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
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.