Дайджест свежих материалов из мира фронтенда за последнюю неделю №229 (19 — 25 сентября 2016)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Веб-разработка

• Верстка: отображаем пользовательский контент
• Выходит HTML 5.1, готовится HTML 5.2. Welcome to HTML 5.2!
• Air Berlin: реализация Progressive Web App
• Секреты Progressive Web Apps: часть 1
• Быстрый рендеринг с DOM шаблонизаторами
• Подкаст Веб-стандарты, Выпуск №34: Новинки Гитхаба, Chrome, Safari, спеки HTML и SVG, новые API, письма, шрифты, JS для дизайнеров, Sass, PostCSS и CSSTree.
• Как быть начинающим разработчиком и не сойти с ума
• Руководство по цветам в вебе для «ботаников»
• SVG:
  • URL-encoder для SVG
  • Доступные SVG в высококонтрастном режиме (Accessible SVGs in High Contrast Mode)
  • SVG обладает еще большим потенциалом (SVG has more potential)

• Как сгенерировать стайлгайд с помощью Hologram & Gulp
• Клиентские подсказки (Client Hints). Продолжение серии статьей «Responsive Images 201» на тему адаптивных изображений
• Начинаем работать с доступностью в вебе (Developers: get started with web accessibility)
• Inky и Slinky: инструменты от Zurb, облегчающие работу с адаптивными HTML шаблонами писем
• 12 отличных советов по использованию Chrome DevTools для разработчиков (Twelve Fancy Chrome DevTools Tips)
• Почему мы использовали прогрессивное улучшение при создании GOV.UK (Why we use progressive enhancement to build GOV.UK)
• PPK: Web development as a hack of hacks
• Микросервисы – пожалуйста не надо (Microservices – Please, don’t)
• Эффектный веб:
  • Эффектная трансформация фоновых изображений (Background Segment Effect)
  • Эффект молнии в HTML5 canvas (Lightning effect)
  • Слайдер с кривыми в фоновой маске (Clean Slider With Curved Background)

CSS

• PostCSS. Будущее после Sass и Less
• Разбираемся с функциями первого класса в Sass 3.5
• 8 хитрых приёмов, реализуемых с помощью одного лишь CSS
• Темизация с Sass: бесконечная история
• Инлайновые стили в background-image
• Шрифты:
  • Не тормозите из-за шрифтов: 3 техники производительности для быстрого отображения контента (Don’t Brake for Fonts: 3 web performance techniques to show content quickly)
  • Новый стек системных шрифтов (The New System Font Stack?)
  • Представление OpenType шрифтов с технологией OpenType Font Variations (Introducing OpenType Variable Fonts)
  • Системные шрифты в SVG (System Fonts in SVG)

• CSS Grid Layout:
  • CSS Grid в реальном мире — создание формы логина (CSS Grid meets the real world — a login form)
  • CSS Grid Layout: резиновые колонки и улучшенные отступы (CSS Grid Layout: Fluid Columns and Better Gutters)
  • CSS Grid Layout: краткое руководство для начала работы (CSS Grid Layout: A Quick Start Guide)

• Объяснение флоатов на примере работающего эскалатора (CSS Floats Explained By Riding An Escalator)
• Скошенные углы на Sass (Tilted Angles in Sass)
• 9 недооцененных свойств в CSS (9 Underutilized Features in CSS)
• Нестандартное мышление с CSS shape-outside в контексте построения лейаутов (Thinking Outside the Box with CSS shape-outside)
• wysiwyg.css — стилизация контента из TinyMCE или Markdown с помощью одного CSS класса
• Столбчатые диаграммы в CSS (Column Charts in CSS)

JavaScript

• Доступен язык TypeScript 2.0, продвигаемый Microsoft в качестве дополнения к JavaScript
• Видео докладов с TomskJS meetup 1 (03.09.16)
• Видео докладов с Nordic.js 2016
• Визуализация ошибок в JavaScript после обновления Chrome и Firefox (A Visualization Of JavaScript Errors After Firefox & Chrome Updates)
• Почему Elm собирается изменить мир (Why Elm is Going to Change the World)
• Настройка и запуск с ESLint — валидатора JS кода (Up and Running with ESLint — the Pluggable JavaScript Linter)
• Высеченное в камне: неизменяемость в JS (Carved In Stone: Immutables in JavaScript)
• Почему мы не будем писать на JS через 5 лет (Why We Won’t Be Writing JavaScript in Five Years)
• 7 вещей в JS, о которых вы, возможно, не знали (7 Things You May Not Know in JavaScript)
• jQuery 3 — новые свойства и улучшения производительности (jQuery 3 — New Features and Performance Improvements)
• Прогресс Node.js — куда движется технология год спустя после объединения Node.js и io.js (The Progress of Node.js a Year Post Node.js and io.js Merge and Where the Technology is Going)
• Четыре необходимых совета по созданию кросс-платформенных Electron-приложений (4 must-know tips for building cross platform Electron apps)
• Фреймворки:
  • Angular:
    • Angular 2 вышел в релиз. Ставит ли это под угрозу React? (Angular 2 has been released! Does this threaten React?)
    • Стратегии миграции с Angular 1.x на Angular 2 (Migrating from Angular 1.x to Angular 2: Upgrade Strategies)
    • 4 этапа настройки производительности для вашего приложения на Angular 2 (The 4 Stages of Perf Tuning for your Angular2 App)
    • Почему изучение Angular 2 было мучительным (Why Learning Angular 2 Was Excruciating)
    • Валидация форм в Angular 2 (Angular 2 Form Validation)
    • 30 ресурсов для изучения Angular 2
    • maintained-angular — поддерживаемые проекты на Angular 1 и 2 (maintained-angular — Maintained Angular Projects)
    • Понимание определения изменений в Angular 2 (Understanding Angular 2 change detection)
    • Использование нового релиза роутера Angular 2 — Router 3.0.0 (Using the New Release of Angular 2’s Router 3.0.0)
    • Тестирование компонентов в Angular 2 с Jasmine (Testing Components in Angular 2 with Jasmine)

  • React:
    • React Routify — библиотека для роутинга для React-приложений (React Routify — a routing library for React applications)
    • mdcomponents — компоненты для React-приложений с Material-дизайном (mdcomponents — Material Design components for React)
    • Новый подход к управлению actions в Redux (A new approach to managing Redux actions)
    • Возможно вам не нужен Redux (You Might Not Need Redux)
    • Паттерны и анти-паттерны Redux-а (Redux Patterns and Anti-Patterns)
    • Redux или MobX: попытка разобраться (Redux or MobX: An attempt to dissolve the Confusion)
    • Как умирает React Native (How React Native Dies)

  • Почему Vue (а не React) — это новый jQuery (Why Vue (Not React) Is the New jQuery)
  • Поток данных в Vue и Vuex (Data Flow in Vue and Vuex)
  • Подкаст: что появится в Vue.js 2.0 (50: Evan You — What's Coming in Vue.js 2.0)

• Плагины:
  • Reflexbox — отзывчивая сетка на flexbox для компонентов React
  • optimize-js — оптимизация и ускорения вызова JavaScript путем оборачивания функций особым методом
  • ApproveJs — библиотека для проверки данных (ApproveJs — simple JavaScript validation that doesn't interfere)
  • retina.js 2.0 — поддержка ретины для вашего сайта
  • fetch-reject — простая обертка для fetch для отслеживания HTTP-ошибок (fetch-reject — simple wrapper for fetch which rejects on HTTP error)
  • GraphicsJS — легковесная графическая библиотека с интуитивно понятным API на SVG/VML (GraphicsJS — a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.)
  • pareto.js — небольшая функциональная библиотека для JS (pareto.js — an extremely small, intuitive and fast functional utility library for JavaScript)

Уроки

• Мастер-класс: верстаем интерактивный баннер
• Пишем игру Тетрис на JavaScript
• Создаём hacker news с Angular 2 cli, rxjs и webpack
• Создание игры с Three.js, ReactJS и WebGL
• Создание поисковой функциональности с помощью Scout и Vue.js

Браузеры

• Выпуск web-браузера Opera 40 со встроенным VPN
• Релиз Firefox 49, а также технические детали для разработчиков
• Chrome 54 Beta для Android умеет проигрывать видео в фоновом режиме
• falcon — расширение Chrome для полноценного поиска по истории посещений сайта

Новости и занимательное

• В Картах Google теперь показывается направление движения
• Google отдаёт предпочтение AMP перед страницами приложений в выдаче
• Google сделал Penguin частью основного алгоритма: как это повлияет на поисковую выдачу
• Google запустила мессенджер Allo с шифрованием сообщений и встроенным помощником
• Как проходят и зачем нужны соревнования между владельцами протезов и экзоскелетов
• Google все-таки объединит Android и Chrome OS
• Четыре финальных редизайна Mozilla (Mozilla’s rebrand reaches the final four)
• MotionMark: новый графический бенчмарк от webkit

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.

Автор: Zfort Group

Источник