Frontend дайджест #17: Інструменти Create React App Progressive Web Apps, що нового в Chrome 52, вивчаємо TypeScript за 30 хвилин

У випуску: зменшуємо час завантаження веб-додатків, досліджуємо node_modules, набір демок на чистому CSS, створення власних HTML елементів, функціональне тестування JavaScript, поширені помилки починаючого верстальника, а також матеріали по React, Angular і GraphQL.

Почитати

Imperative vs Declarative Programming .

Goodbye, Object Oriented Programming .

Вичерпне керівництво по стратегіям завантаження веб-шрифтів .

Progressive loading for modern web applications via code splitting .

Journey to HTTP/2 .

Defer loading javascript .

All about HTML Custom Elements — створення власних HTML-елементів.

The performance benefits of rel=noopener .

The :target Trick .

The State of CSS Reflections .

What Goes Through My Head When Exploring a Site — перевіряємо верстку.

Considerations for Styling a Modal — верстаємо модальне вікно.

Force Selection of Text Block .

10 плагінів PostCSS .

Animating like you just don't care with Element.animate .

What's new in Chromium 52 and Opera 39 .

Exploring the Physical Web (Without Buying Beacons) .

MathML Improvements in WebKit .

Building A Cross-Platform Game With WebGL Babylon.js .

Breathing air into AirBnB's JavaScript Style Guide .

Youtube Player — створення власного плеєра на JavaScript.

Everything You Need to Know About Instagram API Integration .

Solvable Chunks: One Week Video Game — гра на Canvas за тиждень

Chrome 52 матеріали з Progressive Web Apps від Google:
— CSS Containment in Chrome 52 ;
— Houdini — Demystifying CSS — створюємо CSS властивості з Гудіні;
— Complexities of an infinite scroller ;
— Service worker caching, playbackRate and blob URLs for audio and video on — Chrome for Android ;
— Offline Storage for Progressive Web Apps ;
— Debug Progressive Web Apps ;
— Shadow DOM v1: self-contained web components .

Designing Responsive Progressive Web Apps .

Progressive web apps running as native OS X apps .

The Business Case for Progressive Web Apps .

Service worker meeting notes .

Accessible UI Components For The Web .

Fixing HTML Video on Mobile — створення системи кодування відео Whitewater.

Image Upload and Manipulation with React .

Progressive Enhancement Techniques for React — Part 1 , Part 2 .

Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS .

React Storybooks meets Create React App .

AngularJS vs ReactJS — холиварим.

Angular Router: Declarative Lazy Loading .

How to Install the Facebook SDK into a React Native Android або iOS App .

Why Redux makes sense to me and how I conceptualize it .

I Peeked Into My Node_Modules Directory And You won't Believe What Happened Next .

Relay and Routing .

Faking GraphQL with ember-cli-mirage .

GraphQL and the amazing Apollo Client .

Why Redux is not so easy, some alternatives .

Apollo:
— Snappier UIs with Apollo Client + GraphQL ;
— Mutations and Optimistic UI in Apollo Client ;
— GraphQL as a best practice for modern Angular apps?
— Apollo Server 0.2: GraphQL with Express, Connect, HAPI or Koa ;
— Pagination and Infinite Scrolling in Apollo Client ;
— Seamless integration for GraphQL and React .

Туторіали

JavaScript Promises 101 .

Learn TypeScript in 30 Minutes .

Building Your First App With Vue.js .

Розгортання з GitHub на сервер .

Методичний посібник для новачків з верстки .

Поширені помилки починаючого HTML-верстальника .

Плитка Sitepoint: практична реалізація .

Let your website cast the Northern Lights — Auroral .

Communicating with Bluetooth Low Energy Devices in Cordova .

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

JavaScript Testing with Functional Nightwatch.js .

Tutorial: Getting started with GraphQL and queries mutations .

Angular 2 Authentication made easy with Firebase .

Подивитися

Choosing a JavaScript Framework — Rob Eisenberg .

Chrome 52: Contain Property, the PerformanceObserver API & Service Worker Stream .

Frontend United 2016 .

Front-Trends 2016 .

OdessaJS .

Moscow Node.js Meetup 8 .

MoscowJS Meetup 32 .

Послухати

Веб-стандарти —24 , 25 , 26 , 27 і 28 випуски.

JavaScript Air:
— 31. Automated Accessibility Testing with aXe-core ;
— 32. Publishing JavaScript Packages ;
— 33. Getting started with web audio ;
— 34 Typed Functional Programming in JavaScript ;
— 35. How to be a mentor .

Бібліотеки

Cleave.js — форматуємо форми.

ScrollTrigger — анимируем скрол.

Whitewate — заміна HTML5 Video.

React Monocle — візуалізація React компонент.

Webpack Dashboard — збірка під мікроскопом.

React Elm Components .

Vue Typescript .

Covalent — UI на Typescript і Angular-Material 2.

Демо

Above & Beneath: Content Featured Layout Effect .

You-Dont-Need-Javascript — набір демок на чистому CSS.

108 — біт-машина на Web Audio API.

Elm Spa Example .

Інше

Create React App .

Новинки в SVG 2 .

Aurelia 1.0 .

Stylint 7.1.0 .

Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay .

Release Notes for Safari Technology Preview Release 10 .

Flash and Chrome — Flash прийде кінець.

New <video> Policies for iOS .

Hyperterm — термінал на Electron.

Moeditor — markdown редактор на Electron.

JSCS End of Life — переходимо на Eslint.

Sketch to VR .

Lepton — новий формат стиснення без втрат від Dropbox.

Подкасти Web-Standards текстом .

Ефективне використання Github .

Новий розділ Documentation на Satck Overflow .

Programming Fonts — вибираємо відповідний шрифт.

Atom Themes — колекція тим для Atom.

Escape — перевіряємо знання про XSS.

Functional Programming Jargon — словник термінів функціонального програмування.

React in patterns .

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

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

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

Опубліковано: 19/08/16 @ 10:27
Розділ javascript

SEO Блог