Frontend дайджест #18: Angular 2.0, TypeScript 2.0, Progressive Web Apps з пісочниці

У випуску: Ден Абрамов про Redux, компоненти на будь-який смак для React Native, а також матеріали по React, GraphQL і ELM.

Почитати

Developing Extensible HTML and CSS Components .

Fun Times With CSS Pixel Art .

Flexible typography with CSS locks .

You can kinda invent your own weird design language with attributes and attribute selectors .

Methods for Controlling Spacing in Web Typography .

KharkivCSS — текстова трансляція.

Why there is no CSS4 — explaining CSS Levels .

Welcome to HTML 5.2 .

How To Use WebPageTest and its API .

A Case Study on Boosting Front-End Performance .

HTTP/2 connection coalescing .

400,000 GitHub repositories, 1 billion files, 14 terabytes of code: Spaces or Tabs?

Indicating offline .

WebDriver Support in Safari 10 .

Bringing WebVR to Microsoft Edge .

Simple sharing on the web with navigator.share .

Explaining basic 3D theory .

Writing a lambda-calculus interpreter in javascript .

Що нового в Marionette.js 3.0?

DevTools Digest, September 2016: Перфорація Roundup .

Cross-origin Service Workers: Experimenting with Foreign Fetch .

Debugging Service Workers .

Everything You Should Know About Progressive Web Apps .

Things I learned making a Progressive Web App for "super selfies" .

How we made the RioRun progressive web app .

Create React PWA — Прогресивне веб-додаток на React.

Air Berlin: реалізація Progressive Web App .

Untangling Deeply-Nested Promise Chains — рефакторинг промисов.

A $100 cellular webpagetest agent .

Bundling With Rollup—The Basics .

11 Simple npm Tricks That Will Knock Your Wombat Socks Off .

Прискорюємо npm-скрипти .

The State Of JavaScript: Front-End Frameworks .

How To Scale React Applications .

Offline-first додаток з Hoodie&React:
Частина перша: браузерна база даних ;
Частина друга: авторизація .

Interesting React-Native projects to learn from .

Configure create-react-app without ejecting .

How to safely use React context .

Better Cross-Platform React Native Component .

Redux Patterns and Anti-Patterns .

10 Tips for Better Redux Architecture .

You Might Not Need Redux — Ден Абрамов.

If not Redux then what? — реакція на статтю Абрамова.

React Native UI Challenge #2 .

New awesome UI toolkit for React-Native Apps .

Github GraphQL API React Example .

Why Learning Angular 2 Was Excruciating .

Using the New Release of Angular 2's Router 3.0.0 .

Angular Router Final is Released .

The 4 Stages of Perf Tuning for your Angular2 App .

Dependency Injection in Angular 1 and Angular 2 .

Three Ways to Test Angular 2 Components .

Angular — Introduction to Reactive Extensions (RxJS) .

Understanding Reactive Programming and RxJS .

Why We won't Be Writing JavaScript in Five Years .

10 reasons why you should give Elm a try .

Why Elm is Going to Change the World .

Move fast and don't break things. Running a startup on Elm .

Using Elm in the newsroom .

Blazing Fast HTML .

So You Want to be a Functional: Part 1 , 2 , 3 , 4 .

Статті від Apollo:
GraphQL Concepts Visualized ;
All you need to know about GraphQL.js 0.7 ;
GraphQL: The next generation of API design ;
Data management and AJAX server fetching for Angular Components ;
GraphQL Subscriptions in Apollo Client ;
The new GitHub GraphQL API ;
GraphQL.org just got a makeover ;
Bringing GraphQL to iOS ;
Native code generation at Facebook .

How to automate tests and of deployments Node.js apps .

.

Туторіали

An Introduction to Chart.js 2.0 — Six Simple Examples .

How to Translate from DOM to SVG Coordinates and Back Again .

Realtime Form Validation .

perfschool — воркшоп з основ клієнтської оптимізації.

Build a Music Streaming App with Electron, React & ES6 .

Building a Game with Three.js, ReactJS and WebGL .

Building Animated Components, or How React Makes D3 Better .

How to Create Elm App .

Подивитися

.

ElmLive .

курс THREE.js .

CascadiaFest 2016 .

Developer Diary c Підлогою Льюїсом.

A11ycasts .

TomskJS .

PiterJS #7 .

MoscowJS № 33 .

Nordic.js 2016 .

Послухати

Веб-стандарти29 , 30 , 31 , 32 , 33 , 34 , 35 випуски.

Frontflip Podcast: 20. Elm і отруйний качкодзьоб. Ігор Капков .

JavaScript Air:
36. Managing Dependencies like a boss ;
37. On-site at React Rally ;
38. Typed JavaScript with TypeScript and Flow ;
39. Node.js and Community ;
40. On-site at The Strange Loop ;
41. Test all the things with Cypress .

Бібліотеки

Eslint config cleanjs .

Babili (babel-minify) .

Tape Enzyme — Tape на стероїдах.

Appmetrics.js — результати Timing API Google Analytics.

ProtectJS — приватні методи для JS об'єктів.

Elm autocomplete .

ELM CSS normalize .

Webpack dashboard .

Lightgallery.js .

React Native elements .

Shoutem UI — набір компонент для React Native.

Optimize JS .

React game kit .

React music .

React media .

React animations .

React with styles — CSS-in-JavaScript від Airbnb.

Neuron — ES6 React Electron starter kit.

Auto-install .

Демо

Bouncy Ball — рівняння технік анімації.

GraphicsJS .

SetIdle — моніторинг бездіяльності користувача.

Fuse.js — реалізація fuzzy search.

Regl — WebGL у функціональному стилі.

Pairs — гра на Elm + Elixir/Phoenix.

Minesweeper — сапер на Elm.

Інше

Angular 2.0.0 .

TypeScript 2.0 .

Babel 6.14.0 .

Polymer 2.0 Preview .

Chrome Beta 54: Custom Elements V1, BroadcastChannel, and media platform improvements .

Firefox 49 .

Opera 40 .

Carbide .

Nucleus .

Our First 50,000 Stars — історія React.

Observatory — перевірка безпеки від Mozilla.

VSCode — iOS Web on Windows Debugging and Mac .

From Chrome Apps to the Web .

React Components Catalog .

Перший мобільний браузер з підтримкою розширень для Chromium. Нова альфа Яндекс.Браузера .

WebGL2 Fundamentals .

Web Share API .

Shoutem UI toolkit — набір компонентів для React Native.

GitKit.js — гіт на JavaScript в браузері.

30 Learning Resources For Mastering Angular 2 .

Ramme — Instagram клієнт на Electron.

Vue HackerNews 2.0 — на Vue 2.0.

WhatsApp — на React Native.


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


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

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

Опубліковано: 30/09/16 @ 06:29
Розділ javascript

Рекомендуємо:

10 жовтня, Київ — Курс «IP-телефонія Asterisk»
Псссс, пацан
12 листопада, Київ — Курс iOS advanced
10 жовтня, Дніпро — Курс FullStack Developer з працевлаштуванням в Дніпрі
Кейс: Зростання трафіку на 27% за 3,5 місяця і збільшення продажів на 35%