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

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

CSS

Javascript

Браузеры

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

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

• Подкаст Веб-стандарты, выпуск №20 : Релизы Firefox, Chromium и jQuery, практический CSS, типографика на SVG, чёртов открытый веб и как дела в Adobe рассказывает Дмитрий Барановский.
• Подкаст Frontflip, выпуск 18. «Уговори меня поменять Redux на MobX». Петр Мязин
• Google: частые ошибки при добавлении логотипа на AMP-страницы
• Как мы используем SVG-спрайты
• Куда движется веб в 2016-м (Where The Web Is Going In 2016)
• Нельзя просто взять и научиться писать код (One does not simply learn to code)
• Чертов открытый веб (The Fucking Open Web)
• Обзор онлайн-песочниц для написания кода (A Round up of Online Code Playgrounds)
• UX валидация форм с помощью HTML и CSS (Form Validation UX in HTML and CSS)
• Подробно о том, как создавались новые шаблоны для рассылки на Tuts+ (How We Did It: Building the New Tuts+ Email Templates)
• PNG to WebP – сравнение размеров компрессии
• Видеозаписи докладов с конференции Web Rebels 2016
• Настройка и рассчет бюджета веб-производительности (Setting and Calculating a Web Performance Budget)
• Оптимизация посадочной страницы: радиокнопки vs дропдауны (Landing Page Optimization: Radio buttons vs. dropdowns)
• Как Emoji могут улучшить ваш код (How Emoji Can Improve Your Code—Seriously)
• Сайт Google Fonts получил редизайн и новые возможности
• Разработка по стайлгайдам с помощью Atomic Docs (Style Guide Driven Development with Atomic Docs)
• Mega Boilerplate — стартовый набор технологий в виде интерактивного генератора для быстрого старта проекта
• Улучшаем качество фронтенд проектов, автоматически (Improving the Quality of Front End Projects, Automatically! Pt. 1 – HTML)
• Эффектный веб
  
  • Интерактивный проигрыватель с помощью Web Audio API
  • SVG анимация перелистывания страниц книги (SVG: Multiples Make A 3d Flip Book)
  • Динамические двухцветные SVG-изображения помощью feColorMatrix и Jade (Dynamic duotone SVG images with feColorMatrix and Jade)
  • Залипательная демка на канвасе с эмуляцией физических свойств жидкости
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #42
  
  

CSS

• Как называть css-классы
• Оформление содержимого <use> в SVG с помощью CSS
• Магия CSS. Глава 4. Цвет
• Паттерны загрузки веб-шрифтов
• Как работают в флексбоксе z-index и автоотступы
• Битва с БЭМ: 10 самых распространенных проблем и способы их решения (часть 2)
• Видео с PiterCSS #5
• Юрий Зайцев о том, как улучшают качество CSS кода на Facebook (Improving CSS quality at Facebook and beyond)
• Разоблачение плотности пикселей (Pixel Density, Demystified)
• Сравнение лучших CSS пре- и пост- процессоров (What are the best CSS preprocessors/postprocessors?)
• 7 PostCSS плагинов для облегчения начала использования PostCSS (7 PostCSS Plugins to Ease You into PostCSS)
• Дефолтные стили браузера Google Chrome (The default style sheet used to render HTML)
• React CSS компоненты (React CSS components)
• Размышления по поводу floats, figures, regions и grids
• Snapper: A CSS Snap Points Carousel
• Интеграция Stylelint в ваш процесс разработки для улучшения CSS (Integrate Stylelint Into Your Workflow For Better CSS)
• Об использовании Pointer Events (A Mouse, Some Touches, and All Sorts of Pointers)
• CriticalCSS в действии
• Имплементация базового ритма в CSS (Implementing baseline rhythm in CSS)

JavaScript

• Видео с Frontend Conf 2016: Библиотека UI компонентов о которой вы всегда мечтали
• Делаем свой JavaScript чистым
• Введение в функциональный JavaScript: Часть 2
• Два столпа JavaScript
• Видео докладов с JSConf Budapest 2016
• Фреймворки:
  
  • Руководство по работе с Redux
  • Видео записи докладов с конференции React Amsterdam 2016
  • Выбираем JavaScript фреймворк (Choosing a JavaScript Framework — Rob Eisenberg)
  • Тестирование AngularJS с Jasmine и Karma (Part 1)
  • Структура React и Redux приложений (Structuring React and Redux Applications)
  • Минимальный стартовый набор для работы с React (The bare minimum to work with React)
  • Три причины, по которым я прекратил использование React.setState (3 Reasons why I stopped using React.setState)
  • React: ES5 (createClass) или ES6 (class)? (React: ES5 (createClass) or ES6 (class)?)
  • Обзор Egghead курсов: React, реактивное программирование и опен-сорс (Egghead Courses Review: React, Reactive Programming & Open Source)
  • Синтаксис Angular Component (Angular Component Syntax)
  • Доступен Angular 2.0 RC2 (RC2 Now Available)
  • Пересмотренный роутинг в Angular 2 (Routing in Angular 2 revisited)
  • Preact — альтернатива React-у с тем же ES6 API (Preact)
  
  
• ES2015, ES2016:
  
  • #ES2016 (aka #ES7) spec is out.
  • ECMAScript 2016 утвержден
  • ES6: улучшения объекта Number изнутри
  • Understanding JavaScript Promises, Pt. I: Background & Basics
  • Мировоззрение, основанное на промисах (A Promise-Based Worldview)
  
  
• gulp-sww — плагин для gulp, позволяющий вашему веб-приложению или сайту работать оффлайн с помощью ServiceWorkerWare и AppCache
• Исследование ESLint (ESLint Part 1: Exploration)
• Миграция 10к строк JS кода на TypeScript (Migrating a 10,000-line legacy JavaScript codebase to TypeScript)
• Функциональное программирование на JavaScript (Functional Programming in JavaScript)
• Функциональные концепции для JavaScript разработчиков: каррирование (Functional Concepts For JavaScript Developers: Currying)
• Каррирование в JavaScript (Currying Functions in JavaScript)
• Как три точки изменили JavaScript (How three dots changed JavaScript)
• Изоморфный Javascript, еще проще. (Isomorphic Javascript, let’s make it easier.)
• Один странный прием, который изменит ваш способ написания кода: JavaScript TDD (One weird trick that will change the way you code forever: JavaScript TDD)
• История загрузчиков модулей JavaScript (History and Background of JavaScript Module Loaders)
• Изучение основ D3.js, взращивая овощи в огороде (Learn D3.js Basics By Planting A Vegetable Garden)
• Практическое функциональное программирование с Ramda.js (Hands-on Functional Programming with Ramda.js)
• PQ: компилятор читаемой по человечески цепочки промисов (PQ: Human Readable Promise Chain Query Compiler)
• Kakapo.js — фреймворк нового поколения для создания моков (Kakapo.js — Next generation mocking framework in Javascript)
• fetch-sync — прокси fetch запросов через Background Sync API (fetch-sync — Proxy fetch requests through the Background Sync API)

Браузеры

• Экспериментальная поддержка виртуальной реальности в Google Chrome
• Блокировщик рекламы Opera стал доступен на всех мобильных платформах
• Что нового в Safari
• Google готовит большую оптимизацию для Chrome 53
• Blisk: твой следующий браузер для веб-разработки? (Blisk: Your Next Web Development Browser?)

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

• Разработчики показали первый в мире 1000-ядерный процессор
• GitHub предупредил об атаке, использующей перехваченные с других сайтов пароли
• Эпоха копирования Apple подходит к концу
• Samsung покупает компанию Joyent
• «Яндекс» открывает исходный код ClickHouse
• Microsoft покупает LinkedIn за $26.2 млрд
• Зачем Microsoft купила LinkedIn
• Как ИТ-эксперты и пользователи соцсетей отреагировали на сделку между Microsoft и LinkedIn
• 10 правил, которые позволяют NASA писать миллионы строк кода с минимальными ошибками
• WWDC’16 за 10 минут: iOS 10, macOS Sierra и watchOS 3
• Технологии надзора: приватности не существует
• Лучшие трейлеры прошедшей E3
• «Пострадают все»: Как введение «налога на Google» повлияет на российский ИТ-рынок
• Где деньги: топ-10 самых «щедрых» стартап-акселераторов мира
• Соцсети: было и прошло
• 7 гаджетов, которые должен попробовать каждый
• Топ-5 IT-компаний в рейтинге самых дорогих брендов
• Google обвиняют в краже идеи Project Loon

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

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