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

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

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

CSS

Javascript

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

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

• Как HTML-верстальщику поднять свой уровень
• Yarn:
  
  • Facebook и Google выпустили Yarn, новый менеджер пакетов для JavaScript
  • Обзор Yarn: все что вы должны знать о новом пакетном менеджере для JS от Facebook (Yarn Roundup: What you need to know about Facebook’s new JS Package Manager)
  • NPM vs Yarn Cheat Sheet
  • Блог npm: Hello, Yarn!
  • Yehuda Katz: почему я работаю с Yarn ( Why I'm Working on Yarn)
  • Yarn Package Manager: улучшения по сравнению с npm (An Improvement over npm)
  • 5 вещей, которые вы можете делать с Yarn (5 things you can do with Yarn)
  • Тестирование yarn, быстрого npm для JavaScript (Testing yarn, a fast npm for JavaScript)
  
  
• Развенчание десяти мифов про AMP (Debunked: 10 Misconceptions about AMP)
• Развенчание шести мифов о SEO (6 SEO Myths Debunked)
• Оптимизация веб-изображений в Photoshop (Optimizing Web Images in Photoshop)
• Техника “Offline First” с помощью сервис воркеров (“Offline First” with Service Worker (Building a PWA, Part 1))
• Текущее состояние элементов ввода в HTML5 (The State of HTML5 Input Elements)
• Вам не нужны Gulp/Grunt/Webpack (You don’t need Gulp/Grunt/Webpack)
• Заметка в помощь для работы с ARIA (A (not so) short note on ARIA to the rescue)
• Раздражающая проблема двойного нажатия на мобильных устройствах (The Annoying Mobile Double-Tap Link Issue)
• Рескин для SVG Symbols: как их делать (и зачем) (‘Reskinnable’ SVG Symbols: How to Make Them (..and Why))
• Заметка о доступности на developers.google.com, основанная на курсе Accessibility на Udacity
• Вам не будет комфортно в веб-разработке (You Can’t Get Comfortable in Web Development)
• Умер ли MVC для фронтенда? (Is MVC dead for the frontend?)
• Прогрессивное улучшение не мертво, но уже с запашком (Progressive enhancement isn’t dead, but it smells funny)
• Визуальные примитивы для эпохи компонентов. Используем лучше части из ES6 и CSS для стилизации ваших React приложений (Visual primitives for the component age)
• Анимация дропдауна с эффектом морфинга
• Анимация декоративных линий (Line Maker: Animated Decorative Lines)
• С Днём рождения Foundation: пять первых лет первого адаптивного фреймворка (Happy Birthday Foundation: Five Years of Firsts)
• excel-bootstrap — генератор сайта на бутстрапе из Excel (excel-bootstrap — Generate Bootstrap websites from Microsoft Excel)
• Руководство по написанию качественных README файлов (Learn the art of writing quality READMEs.)

Медиа

• Подкаст Веб-стандарты, Выпуск №37: Не обижайте CSS, флексы, JS в 2016 году, PWA и React, без джаваскрипта жизнь не та, не блокируйте вьюпорт.
• Подкаст radioJS, Выпуск 41: Типизация 2.0, типизация в командах, серверный код, конференции
• Видео докладов с митапа MoscowJS в Badoo
• Видео со LvivJS Conference
• Видео с KharkivCSS 2016
• Видео с PiterCSS №6
• Lea Verou — CSS Variables: var(--subtitle);
• Chrome DevTools Masterclass

CSS

• Способы подчеркивания в CSS, перевод статьи Styling Underlines on the Web
• Визуальное регрессионное тестирование с PhantomCSS
• Возможно, вам не нужен JavaScript (You might not need JavaScript)
• Прагматичная, практичная и прогрессивная темизация с помощью нативных CSS переменных (Pragmatic, Practical, and Progressive Theming with Custom Properties)
• Вдумчивая архитектура CSS (Thoughtful CSS Architecture)
• Особые запросы в CSS:
  
  • Quantity Queries: Количественные запросы и Flexbox (Quantity queries and Flexbox)
  • Media Queries: SVG & media queries
  • Mod Queries: Использование мод-запросов с селекторами диапазонов (Using CSS Mod Queries with Range Selectors)
  • Feature Queries: Как использовать Feature Queries (запросы свойств) (How to use CSS Feature Queries)
  • Feature Queries: Добавляем предупреждение «свойство Х не поддерживается» для ваших CSS демок с помощью @supports (Adding “feature X is unsupported” warnings in your CSS Demos with supports)
  
  
• Типографика:
  
  • Будущее веб-шрифтов (The Future of Web Fonts)
  • 32 безопасных веб-шрифта для CSS (32 Gorgeous Web Safe Fonts to Use with CSS)
  • Разбираемся с загрузкой веб-шрифтов (Getting started with CSS Font Loading)
  
  
• Grid Layout Summertime. Сводка изменений, которые были представлены прошедшим летом для стандарта CSS Grid Layout
• Удивительные женщины из мира CSS (The Amazing Women of CSS)
• Как сделать табы, используя только CSS (How to make tabs using only CSS)
• Фильтр контента на чистом CSS (Pure CSS Content Filter)
• Создание масштабируемой и поддерживаемой кодовой базы CSS с ITCSS (Building a Maintainable and Scalable CSS Codebase with ITCSS)
• Сапёр на чистом CSS (Pure CSS minesweeper)

JavaScript

• Теория:
  
  • Инфографика, объясняющая, почему JS разработка выглядит такой сложной (This Infographic Explains Why JS Dev Seems So Complicated)
  • Почему я считаю, что Elm — это будущее фронтенд-разработки (Why I think Elm is the Future of Front End Development)
  • Нужны ли Service Worker-ы в твоем веб приложении? (Do you need Service Worker in your web app?)
  • Уместен ли еще jQuery (Is jQuery Still Relevant?)
  • Вам может понадобиться JavaScript (You Might Need JavaScript)
  • Мы нуждаемся в JavaScript, чтобы починить веб (We need JavaScript to fix the web)
  • Усталость от Javascript с точки зрения нуба (Javascript Fatigue. From a noob perspective)
  • Фреймворк vs Библиотека — разница в веб-разработке (Framework vs Library — differences in web development)
  
  
• Практика:
  
  • Объектно-ориентированный JavaScript. Быстрое введение в OOP в JavaScript (Object-Oriented JavaScript)
  • Валидация форм как компонент высокого порядка часть.1 (Form Validation As A Higher Order Component Pt.1)
  • Как быть компилятором — создаем компилятор с помощью JavaScript (How to be a compiler — make a compiler with JavaScript)
  • ResizeObserver: это как document.onresize для элементов (ResizeObserver: It’s Like document.onresize for Elements)
  • Улучшение формы комментариев: от основ до кастомных сообщениях об ошибках с помощью BackgroundSync (Enhancing a comment form: From basic to custom error message to BackgroundSync)
  • Сравнение чистых и «нечистых» функций (Pure versus impure functions)
  • Доступ к буферу обмена с помощью JavaScript (Quick Tip: Accessing The Clipboard With JavaScript)
  
  
• ES6:
  
  • Promises 101. Базовые приемы создания и управления промисами.
  • Использование ES6 генераторов на примере koa.js
  • Рекурсия в JavaScript с ES6, destructuring и rest/spread (Recursion in JavaScript with ES6, destructuring and rest/spread)
  • Глупые трюки с ES6 (Stupid ES6 tricks)
  
  
• Фреймворки:
  
  • Свежие релизы: Angular 2.1.0, Релиз Marionette v3.1.0
  • Лучший способ изучить AngularJS (The best way to learn AngularJS)
  • Шаблоны Angular 2 для приложений Angular 1.x (Angular 2 Patterns for Angular 1.x Apps)
  • Роутер Angular: предзагрузка модулей (Angular Router: Preloading Modules)
  • Angular 2  —  Dynamic View and Components
  • Двусторонний data-биндинг в Angular 2 (Two-way Data Binding in Angular 2)
  • Создание приложения с Material Design с Angular 2 (Build a Material Design app with Angular 2)
  • Начало работы с Angular 2 End To End тестированием (Getting Started with Angular 2 End To End Testing)
  • Разбираемся с данными роутера в Angular 2 (Resolving route data in Angular 2)
  • Как тут у нас в Китае дела с React.js (What we have in China about React.js)
  • react-day-picker — календарь для React
  • desklamp — чистый контейнер для роутинга и state в react (clean routing and state container for react)
  • Официальная интеграция Semantic-UI-React
  • react-router-server — рендеринг на серверной стороне для React Router v4 (react-router-server — Server Side Rendering library for React Router v4.)
  
  
• gDoc.js — используйте Google Spreadsheets для своей CMS (Use gDoc.js for your CMS)
• CerebralJS — контроллер состояний с собственным отладчиком. Подходит для сложных приложений (A state controller with its own debugger )
• Порт движка по распознаванию изображений Tesseract на JavaScript (Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine.)

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

• Выпуск web-браузера Chrome 54
• Google в 1,5 раза сократит расход памяти браузером Chrome
• Google запустил новый инструмент для проверки AMP
• noto — новый шрифт от Google для всех языков и наречий
• Кто «подложил бомбу» в смартфоны Samsung?
• Samsung разослала огнеупорные коробки для возврата Galaxy Note 7, Что случилось с Samsung Galaxy Note 7 и почему он горит
• Facebook официально запустила корпоративную социальную сеть Workplace
• В Skype добавили поддержку русского языка для синхронного перевода речи во время голосовых и видеовызовов
• Насколько серьезны проблемы Элона Маска
• Каково это — работать в Apple?
• «Просто заткнитесь и дайте разработчикам сконцентрироваться на задачах», — считает сооснователь площадки Stack Overflow Джоэл Спольски
• «Samsung, ты не одна»
• Большая нейронная война: что на самом деле затевает Google
• Что понял Павел Дуров в процессе создания «ВКонтакте»
• Алгоритм чтения книг по программированию
• Разнообразие нейронных сетей. Часть вторая. Продвинутые конфигурации
• Как лайки и боты сформируют журналистику будущего
• Новые властители разума: как поисковые системы влияют на выборы
• Смогут ли секс-роботы пройти тест Тьюринга?
• Как проходит телефонное собеседование в Google: рассказ из первых рук от кандидата на должность технического директора
• Инженеры MIT создали «Photoshop для 3D-печати»
• Удивительная история эмодзи (The surprising history of emojis)

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

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