В выпуске: углубляемся в React и GraphQL, фундаментальные принципы MobX, начинаем писать на Inferno, почему Vue так крут и многое другое.
CSS
CSS-анимации: Transitions и Animations. Motion Path Module CSS.
Coloring the insertion caret — используем caret-color.
What’s in a name? A CSS naming convention overview — обзор CSS конвенций.
Random Numbers in CSS — удобства прокладывания чисел из JavaScript в CSS.
Animate to Different End States Using One Set of CSS Keyframes.
Map Rollovers — пишем SVG-карту.
The Road to SVG and Custom Elements in Clarity Icons — как парни из Clarity готовят иконки.
Адаптивный Pixel Perfect — новый инструмент для сравнения верстки.
Что поправить в верстке перед выпуском в продакшн?— хороший чек-лист.
Let’s Look at 50+ Interesting CSS Properties & Values — используем новые CSS свойства.
Ultimate Guide to Non-Rectangular Headers (Part 1) — 50+ CSS-свойств и значений в примерах.
Understanding the Critical Rendering Path — от сервера до пикселей на экране.
3 New CSS Features to Learn in 2017.
Зарелизил вторую версию awsm.css — о релизе библиотеки для превращения обычной разметки без классов в красивую страничку.
CSS Grid — Table layout is back. Be there and be square — о grid в Chrome 57.
How calc() Works — как работает calc() на примерах.
JavaScript
Making transpiled ES modules more spec-compliant.
A Brief History of JavaScript — история становления JavaScript.
Web Components, the React way — создаем компоненты в стиле React.
Native ECMAScript modules — the first overview — обзор нативных JavaScript-модулей.
Манифест? А? Что? Зачем?— поясняющая заметка к спецификации Web App Manifest.
The global object in JavaScript: a matter of platforms, unreadable code and not breaking the internet — о глобальных объектах в JavaScript.
Pattern Matching — предложения по добавлению возможности pattern matching в ECMAScript.
Implementing „Save For Offline” with Service Workers — добавляем возможности офлайн.
Enhanced Editing with Input Events — редактирование текста в contenteditable c Input Events.
Functional Programming is taking over UIs with Pure Views — используем чистые функции для разработки UI.
12 JavaScript Libraries for Data Visualization.
React
Серия продвинутого руководства по React.js:
- JSX — подробности
- PropTypes — проверка типов в React
- Ref-атрибуты и DOM в React
- Неконтролируемые компоненты в React
- Оптимизация производительности в React
React Interview Questions — готовимся к интервью.
Crafting a high-performance TV user interface using React — о написании Netflix TV .
Isn’t our code just the *BEST*.
Web Components, the React way.
Optimizing the Performance of Your React Application.
The fundamental principles behind MobX — фундаментальные принципы MobX.
Learn About Inferno JS: Build and Authenticate an App — пишем приложение на Inferno.
Immutability in JavaScript using Redux.
React Native
Beek.io — React Native Case Study.
Getting Started with React Native Development for Windows.
Playing with React Native Animations.
React Native Deployment to iPhone.
Thinking in Redux (when all you’ve known is MVC).
CSS in JS
A
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components.
Angular 1x-2
Angular and React: Brief Comparison Based on a
Testing Angular Directives with Custom Matchers by thoughtram.
Minify, uglify and bundle your JavaScript in NativeScript Angular 2 app.
A deep dive on Angular decorators.
An Introduction to Observables for Angular Developers.
Vue
Введение в Vue:
VueJS: First ImpressionsSome things that are better in Vue than in React — почему Vue круче, чем React.
Managing Vue.js State with Vuex.
Build a Vue.js Website in 4 Steps.
5 идей Vue.js, которые вы полюбите (даже если React вас полностью устраивает).
TypeScript
TypeScript 2.1: Improved Inference for Literal Types.
Refactoring 30000 lines of JS with types.
ELM
Easy VR with Elm and A-Frame — работаем с VR на ELM.
Choosing the right Elm SPA architecture — о механизме навигации в ELM приложениях.
Node.js
OpenCV tutorial: Computer vision with Node.js — учимся работать с компьютерным зрением.
Build your first Node.js microservice — пишем первый микросервис на Node.js.
npm cache: the unsung hero — сравниваем кэши.
Meteor
Create and secure your Mongo collections with Meteor and TypeScript.
Super Simple and Free Meteor Deployments using ZEIT ▲now.
GraphQL
Give it a REST: use GraphQL for your APIs.
GraphQL vs REST: Overview — сравниваем подходы.
Build a GraphQL server and Catch ‘Em All!— покедекс на GraphQL.
Let’s build a Spotify GraphQL Server.
Building An Instagram Clone With GraphQL and Auth0.
Библиотеки
micro-analytics — микросервис для подсчета количества просмотров чего угодно.
Mitt — EventEmitter в функциональном стиле.
React Navigation — новый роутер для React Native.
Redux Beacon — анализируем Redux/NGRX экшены пользователя.
Qart.js — генерируем QR-коды.
Backpack — пишем Node.js приложение без лишних зависимостей.
iTyped — анимируем написание текста.
reactNativeEverywhere — пишем приложение на любую платформу.
Посмотреть
This.JavaScript 01/28 — Vue, React, Angular, RxJS, Polymer & Ember.
Послушать
Веб-стандарты — 50, 51, 52, 53 выпуски.
Конференции
Web Standards Days в Москве, 2017.
Демо
ColorMe — визуализируем цвета с помощью CSS-функции color().
Home Automation with RPi and Javascript.
Illustrated Algorithms — визуализируем алгоритмы.
Что нового?
Webpack 2.2: The Final Release.
CSS Snapshot 2017 — опубликовано официальное определение CSS (CSS-2017).
Opera Neon — концепт браузера.
Riptide — сборщик мусора в Webkit.
XVG — Chrome расширения для дебаггинга SVG.
React 15.5 and 16 Umbrella — чего ждать.
Остальное
Front-End Developer Handbook 2017.
Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue — сравниваем технологии рендера.
Site Reliability Engineering — опыт поддержки Google.
Awesome Case-study — подборка места для обучения.
2016 JavaScript Rising Stars — восходящие звёзды мира JS в 2016 году.
Why working on Chrome made me develop a tool for reading source code — о создании инструмента для удобного чтения и визуализации кода.
Mozilla Open Design — Mozilla адаптировала идеи опенсорса к дизайну.
Get Started with Analyzing Network Performance in Chrome DevTools — анализ сетевого быстродействия в отладчике Chrome.
33 способа ускорить ваш фронтенд в 2017 году — опыт разработчиков Badoo.
GitHub’s post-CSP journey — опыт применения CSP у разработчиков Github для защиты от разных видов атак.
Infinite Loops — решения проблемы зависания браузера при выполнении бесконечных циклов.
Seedux — Redux утилита для Chrome.
Rules for Using ARIA in HTML — правилах использования ARIA в разметке.
Get involved in open source today!— разработчики Apollo все за опен-сорисоли.
Artsy Webpack tour — аннотированные исходники Вебпак.
Show Facebook Computer Vision Tags Chrome Extension — анализируем изображения.
Grammarly ищет талантливых инженеров. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, мы используем передовые технологии и решаем интереснейшие технические задачи. Смотрите открытые позиции на www.grammarly.com/jobs/engineeringи присоединяйтесь.
С вами был Григорий Шехет, @AGambit95. За помощь в оформлении дайджеста благодарю своих коллег.
← Предыдущий выпуск: Frontend дайджест #20.