Дайджест свежих материалов из мира фронтенда за последнюю неделю №233 (17 — 23 октября 2016)

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

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

CSS

Javascript

Браузеры

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

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

• Подкаст Веб-стандарты, Выпуск №38: Yarn, Safari, Web Bluetooth, хорошие таблицы, alt, женщины CSS, Styled Components, JS (не) нужен, прогрессивное улучшение.
• Новая дефолтная WordPress тема Twenty Seventeen была внесена в релиз 4.7, который будет поставляться вместе с инфраструктурой, взятой от плагина Customize Snapshots
• Архитектура фронтенда, часть 1: структура файлов
  (Front-end Architecture part 1: File structure)
• Инструменты:
  
  
  • Yarn или npm: все, что вам нужно знать о них
  • Node.js v6 переходит в ветку LTS, а также множество подробностей о npm@4
  • Миграция на Webpack 2
  
  
• PWA:
  
  
  • Прогрессивные Веб-приложения: преодоление разрыва между вебом и мобильными устройствами (Progressive Web Apps: Bridging the Gap Between Web and Mobile)
  • «Мгновенная загрузка» с IndexedDB. Продолжение серии статей «Building a PWA», ч.2
  • Измеряем прогрессивное веб-приложение Washington Post
    (Measuring The Washington Post’s Progressive Web App)
  
  
• Производительность:
  
  
  • Чеклист мобильной веб-производительности (Mobile web performance checklist)
  • Оптимизация задержек — советы по оптимальной производительности от keycdn
    (Latency Optimization – Tips for Optimal Performance)
  • Ускорь свои сайты с помощью HTTP/2 (Speed up your sites with HTTP/2)
  • Создание сайта для мониторинга производительности
    (Building a Website Performance Monitor)
  
  
• Введение в Web Share API
• Когда пробелы имеют значение в HTML (When does white space matter in HTML?)
• Какой доктайп следует использовать для шаблонов писем (Which doctype should you use in HTML emails?)
• Pulp — онлайн инструмент для создания отзывчивых шаблонов писем
• Понимание параметра viewBox в SVG (Understanding the SVG viewBox)
• Средняя веб-страница по результатам Google top twenty
• WebVR и будущее сайтов (WebVR and the future of websites)
• Используем веб-технологии для создания эффекта «потяни чтоб обновить» (Using Web Technologies for a “Pull to Refresh” Animation)
• Креативный эффект анимации для букв при смене слов (Inspiration for Letter Effects)

CSS

• Условия для CSS-переменных
• “Dot Leaders” или “Точки между словами” на CSS
• Продолжайте нормализировать ваш CSS (Continue Normalising Your CSS)
• 20 наборов иконок на чистом CSS (20 Free Pure CSS Icon Sets)
• Детальная статья о создании сеток (Designing Grids)
• Небольшая заметка о режимах смешивания (A Little Thing About Blends)
• Создание периодической таблицы с помощью Grid CSS (Creating the Periodic Table with Grid CSS)
• Решаем проблемы с помощью CSS Grid и Flexbox на примере создания карточного интерфейса (Solving Problems With CSS Grid and Flexbox: The Card UI)
• Улучшаем наши компоненты с помощью CSS :empty
  (Enhancing Our Components with CSS :empty)
• 6 простых секретов идеальной типографики (6 Simple Secrets of Perfect Web Typography)
• Объяснение CSS Flexbox на примере путеществия по стране
  (CSS Flexbox Explained by Road Tripping Across the Country)

JavaScript

• Все рушится
• JavaScript 2016, а можно попроще?
• От Jquery UI до Ext.js: обзор javascript UI библиотек для SPA. Часть 1
• Темная сторона TypeScript — @декораторы на примерах
• Linux Foundation запустил «перезагрузку» JavaScript-сообщества
• JavaScript растёт и теперь обладает собственным фондом
  (JavaScript Grows Up and Gets Its Own Foundation)
• Современный JavaScript стек с нуля (JavaScript Stack from Scratch)
• Прототипирование реактивных интерфейсов с помощью JavaScript Observer pattern (Prototyping reactive interfaces with an adapted JavaScript Observer pattern)
• Изменения в ECMAScript 2016, о которых вы возможно не знали
  (The ECMAScript 2016 change you probably don't know)
• Советы по использованию асинхронных функций в ES2017
  (Tips for using async functions (ES2017))
• Как сделать промисы более дружественными с помощью функций Async, заметка от Джейка Арчибальда (Async functions — making promises friendly)
• JavaScript для веб-дизайнеров: DOM Scripting
  (JavaScript for Web Designers: DOM Scripting)
• Исследуя JavaScript: типизированные массивы (Exploring JavaScript: Typed Arrays)
• “Генерация страниц во время создания ресурсов” как оптимизация
  (“Rendering pages during assets building” as an optimization)
• Начало работы с Paper.js: взаимодействие с пользователем
  (Getting Started With Paper.js: User Interaction)
• Добавляем Markdown к JavaScript консоли (Bringing Markdown to the JavaScript Console)
• Быстрый совет: замена jQuery’s Ready() на простой JS
  (Quick Tip: Replace jQuery’s Ready() with Plain JavaScript)
• Советы и подсказки по производительности jQuery кода
  (10 jQuery Performance Tips & Tricks)
• Создание на JavaScript редактора Minecraft 3D (Building a JavaScript 3D Minecraft Editor)
• Angular:
  
  
  • Знакомство с модулем Angular 2: @NgModule
    (Getting to Know Angular 2’s Module: @NgModule)
  • Книга по Angular 2 от Rangle (Rangle's Angular 2 Training Book)
  • Основы форм Angular 2: реактивные формы
    (Angular 2 form fundamentals: reactive forms)
  • Миграция приложений с Angular 1 на Angular 2 в 5 простых шагов
    (Migrating Angular 1 Applications to Angular 2 in 5 Simple Steps)
  
  
• React:
  
  
  • Аддон React Storybook для отображения README файлов в стиле github
    (React Storybook addon to render README files in github style)
  • Визуальное руководство по State в React (A Visual Guide to State in React)
  • react-fine-uploader — простой в интеграции в React-приложение Fine Uploader (react-fine-uploader — Easily integrate Fine Uploader into a React app)
  
  
• Vue:
  
  
  • Загрузка изображений в стиле Medium с Vue.js
    (Medium-like Image Loading with Vue.js)
  • Почему мы выбрали Vue.js (Why We Chose Vue.js)
  • Начало работы с VueJS (Getting Started With VueJS)

Браузеры

• Новое в Chrome 54
• В Firefox 52 планируют по умолчанию включить поддержку TLS 1.3, а в 51 — ограничить поддержку сертификатов на основе SHA-1
• Chrome 55: auxclick в новой версии, а также устаревшие и удаленные API
• Chrome 55 Beta: улучшения Input handling и async/await functions
• Экспериментальный браузер Chrome Canary теперь доступен и на Android
• 11 интересных браузеров (которые не Хром)

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

• Массовый DDoS на инфраструктуру DNS-провайдера Dyn.com привёл к недоступности сайтов Twitter, Github, Heroku и прочих
• Amnesty International назвала Facebook Messenger и WhatsApp самыми защищёнными мессенджерами
• Мировому IT-рынку предсказали возвращение к росту в 2017 году
• Google: AMP-страницы не требуют отдельного файла XML Sitemap
• Google будет отмечать новости с проверенными фактами
• Подкаст на Хекслет, выпуск №3: Математика, информатика и правила игры
• 9 лучших проектов из Google Chrome Experiments
• Ваш сайт может терять часть трафика из-за оптимизаций Google — блогер рассказал о своём отрицательном опыте
• Что послушать: обзор IT-подкастов
• Яндекс изнутри: поговорим о потрохах русского поиска
• Улыбнись, машина! Почему электроника тупая и скучная?
• Бесстрашные! Миллион владельцев Galaxy Note 7 отказываются сдавать смартфон
• Google открыл код ПО для регистраторов доменов первого уровня
• Китайская копия Twitter обошла оригинал по капитализации
• «Людям пока не нужны персональные помощники»: что ждёт искусственный интеллект в ближайшем будущем
• Разработчик натренировал нейронную сеть на порно, а затем заставил её генерировать картинки
• Material Design Awards 2016

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

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