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

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

CSS

Javascript

Браузеры

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

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

• Подкаст Веб-стандарты, Выпуск №27: Видео в iOS, ChakraCore конкурент V8, доступные модальные окна, таблицы и формы, чехарда с цветовыми функциями CSS.
• Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
• Организация задач в Grunt (Organizing Your Grunt Tasks)
• Оптимизация производительности критического пути с помощью Express Server и хендлебаров (Optimizing Critical-Path Performance With Express Server And Handlebars)
• Оптимизация PNG (PNG optimisation)
• Как подготовиться к собеседованию на фронтенд-разработчика (How to prepare for an interview for a front-end developer)
• Ретроспектива использования генератора статических сайтов (Using A Static Site Generator At Scale: Lessons Learned)
• Веб-компоненты и прогрессивное улучшение (Web Components and progressive enhancement)
• Руководство по работе с мобильным SEO (Your Guide to Getting Started with Mobile SEO)
• Самая сложная часть веба — это его невидимые части (The hardest parts of the Web are the invisible parts.)
• Расширяемые веб компоненты (Extensible web components)
• Как писать неподдерживаемый код (unmaintainable-code)
• Когда использовать переключатель, а когда чекбокс (When to Use a Switch or Checkbox)
• Web Animations API:
  
  • Поддержка Web Animations API появилась в Firefox 48
  • Подборка демок и экспериментов с Web Animation API
  • Когда использовать Web Animations API (When to Use the Web Animations API)
  
  
• Accessibility:
  
  • A11ycasts — новый подкаст на канале разработчиков Google, посвященный доступности. А также выпуск #02: Inert Polyfill
  • Букмарклеты для тестирования доступности (Bookmarklets for Accessibility Testing)
  • Edge прошел все тесты HTML5 Accessibility (Edge is the only browser to perform 100% in HTML5 Accessibility test)
  
  
• SVG:
  
  • Высокопроизводительные SVG (High Performance SVGs)
  • 3 странных браузерных несоответствия в SVG (3 Weird SVG Browser Inconsistencies)
  • Интерактивный эффект просвечивания сквозь очки с помощью SVG масок (“Put On The Sunglasses, Frank”: An Interactive with SVG Masks)
  
  
• Уроки:
  
  • Как я создал большую мультиплеерную онлайн-игру на HTML5 canvas за одну неделю (How I built a Massive Multiplayer Online HTML5 Canavs Game in One Week)
  • Как создать восьмибитную драм-машину с помощью Web Audio, SVG и Multitouch (How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch)
  
  

CSS

• Полноэкранные контейнеры внутри элементов ограниченной ширины. Перевод статьи Full Width Containers in Limited Width Parents
• CSS-изоляция. Перевод статьи CSS containment
• Использование вьюпорта для создания индикатора промотки страницы на чистом CSS (Using viewport units to create a CSS-only scroll indicator)
• Тайминг — это всё: улучшите ваши анимации с помощью нелинейных кривых (Timing is Everything: Improve your animations with custom, non-linear timing curves )
• Tootik — css-библиотека на CSS/SCSS/LESS для создания симпатичных тултипов
• Манипуляция с цветами Sass с помощью функциями HSL и прозрачности (Manipulating Sass Colors With HSL And Opacity Functions)
• Aphrodite vs. JSS
• Открывающаяся книга на «чистом CSS3»
• CSS mix-blend-mode — плохая практика для истории вашего браузера (CSS mix-blend-mode is bad for your browsing history)
• Приоритет в CSS (когда порядок в CSS имеет значение) (Precedence in CSS (When Order of CSS Matters))
• Cutestrap, легковесный CSS фреймворк (очередной) (Getting to Know Cutestrap, a Lightweight CSS Framework)
• Обзор единиц измерения CSS: углов, времени и частоты

JavaScript

• Как учить людей JS: Часть 1. Заметки на полях
• Распознавание голоса и чтение текста в браузере в 3 строки на JavaScript: демонстрация и примеры кода
• Представлен бесплатный видеокурс по современным технологиям для веб-разработчиков: ES6, ESnext, Node.js, NPM, RxJS, WebPack и TypeScript
• Функциональный TypeScript (Functional TypeScript)
• Понимание нативных методов для массивов в JavaScript (Understanding native JavaScript array methods)
• Детальный обзор symbols в ES6 (Detailed overview of well-known symbols)
• Заметки Джейка Арчибальда по мотивам мероприятия на тему сервис-воркеров (Service worker meeting notes by Jake Archibald)
• Как внедрить интернационализацию (i18n) в JavaScript (How to Implement Internationalization (i18n) in JavaScript)
• Async функции попадут в ES2017! (Async functions are now stage 4 and will be included in ES2017!)
• JavaScript и функциональное программирование (JavaScript and Functional Programming)
• Цикл for против forEach в JavaScript (The for Loop vs. forEach in JavaScript)
• Внедрение JavaScript в Python (Embedding JavaScript into Python)
• Исчерпывающий обзор jQuery селекторов (A Comprehensive Look at jQuery Selectors)
• Фреймворки:
  
  • Компоненты высшего порядка в React. Перевод статьи Higher Order Components: A React Application Design Pattern
  • AngularJS vs ReactJS
  • Интернационализация в React (Internationalization in React)
  • Интерактивные графики на Angular с помощью ZingChart
  • Отладка приложений на Angular c помощью Augury (Debugging Angular 2 Apps with Augury)
  • State of React: #1: A Stateless React App?, #2 – From Inception to Redux
  • Описание нового алгоритма ядра React, React Fiber (React Fiber Architecture)
  • Учебник для начинающих по экосистеме React: часть 2 из 3-х (A Primer on the React Ecosystem: Part 2 of 3)
  • React Native в SoundCloud (React Native at SoundCloud)
  • kasia — инструментальный набор React Redux для WordPress API (kasia — a React Redux toolset for the WordPress API)
  • react-media — CSS media query компонент для React (react-media — a CSS media query component for React)
  • Использование Kendo UI для jQuery в React приложениях (Using Kendo UI for jQuery in a React App)
  • Кастомные элементы форм в Angular 2 (Custom Form Controls in Angular 2)
  • Создание современных веб-приложений с Ember.js (Building Ambitious Web Applications with Ember.js)
  • Исследование Mithril, JavaScript фреймворк для создания прекрасных приложений (Exploring Mithril, A JavaScript Framework for Building Brilliant Applications)
  
  
• Плагины:
  
  • Audiogram — библиотека для генерации видео из аудиоклипов
  • lightgallery.js — полнофункциональная галерея для изображений и видео (lightgallery.js — full featured JavaScript image & video gallery.)
  • vivus — библиотека для анимации SVG (vivus,, bringing your SVGs to life)
  • jQuery Rate — простой jQuery плагин для создания графических рейтингов (jQuery Rate — a simple jQuery plugin for creating graphical ratings)
  
  

Браузеры

• «Биткоин-браузер» Brave собрал 4,5 млн долларов
• Установка дополнений Google Chrome в Mozilla Firefox
• Релиз Firefox 48, технические детали для разработчиков
• План перевода Firefox на многопроцессную архитектуру
• Firefox начнёт показывать вместо ошибок 404 архивные страницы
• В Opera 39 оптимизировано выносное видео и требуется меньше памяти
• В Chrome 52 для Android видео грузится быстрее, использует меньше трафика и медленнее садит батарею
• Microsoft продолжает кампанию против Chrome, теперь ОС Windows 10 советует пользователям перейти с браузера Google на Edge
• Microsoft Edge по-прежнему аутсайдер на рынке браузеров
• Новинки Microsoft Edge, которые появились после Windows 10 Anniversary Update
• Тренды браузеров августа 2016: как располагаются соперники Chrome? (Browser Trends August 2016: How Do Chrome’s Rivals Stack Up?)
• Microsoft Edge получит расширения, обновление поддержки JavaScript в обновлении Windows 10 Anniversary (Microsoft Edge Get Extensions, Better JavaScript in Windows 10 Anniversary Update)

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

• В протоколе HTTP/2 выявлено сразу четыре опасных бага
• Google расширит поддержку AMP на всю органическую выдачу
• В ОАЭ на законодательном уровне запретили использование VPN
• Dropbox запускает собственный сервис Paper для совместной работы над документами и задачами
• Кликбейт под запретом: Facebook уменьшит присутствие неинформативных публикаций с завлекающими заголовками в ленте
• Искусственный интеллект не справился с тестом на здравый смысл
• Киберспорт на Олимпиаде: фантазии или реальность?
• Как стать киберспортсменом, и что для этого нужно
• Инвестор Yahoo Эрик Джексон о продаже компании
• Аналитики оценили среднюю стоимость украденных аккаунтов от Uber, Netflix, Gmail и других сервисов
• Выпиливание реальности
• IBM создала ближайший искусственный аналог нейронов
• MS Windows: накануне дефолта
• Windows 10 Anniversary Update: первые впечатления
• Цикл статей Ильи Климова на тему «7 грехов программиста»: Гордыня, Зависть, Гнев, Уныние, Алчность, Чревоугодие

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

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