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

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

CSS

Javascript

Браузеры

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

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

• Сражаясь с БЭМ: 10 основных ошибок и как их избежать
• Эффективное использование Github
• Развертывание с GitHub на сервер
• Продолжение и окончание серии статей Ильи Климова «Frontend Dev: хороший, плохой, злой». Часть 2: Плохой путь, Часть 3: Злой путь
• Подкаст Веб-стандарты, Выпуск №25: Atom, доступность, загрузка шрифтов, промисы, векторные эффекты, Антон Виноградов про код, дизайн и Protein.
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Перевод статьи A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES сообществом css-live.ru
• Изучаем и отлаживаем webpack с помощью Chrome Dev Tools (Learn and Debug webpack with Chrome Dev Tools)
• Доступные компоненты пользовательского интерфейса для веба (Accessible UI Components For The Web)
• Создание mobile-first шаблона письма, пошаговое руководство (Coding mobile-first emails)
• Знаете что? Нахрен дропдауны (You Know What? Fuck Drop Downs)
• Service Workers:
  
  • Добавляем сервис-воркер на простой сайт, который хостится на Github pages и Cloudflare (Adding Service Worker to a simple website)
  • ServiceWorker: базовое руководство по BackgroundSync
  • Жизненный цикл сервис-воркеров (The Service Worker Lifecycle)
  
  
• Улучшения стандарта MathML в WebKit
• Настоящий мир HTTP/2: загрузка 400gb изображений в день (Real–world HTTP/2: 400gb of images per day)
• Автостопом по галактике современной фронтенд разработки (The Hitchhiker's guide to the modern front end development workflow)
• Плюсы для производительности при использовании rel=noopener (The performance benefits of rel=noopener)
• Руководства от Microsoft по REST API (Microsoft REST API Guidelines)
• Насколько Pony Foo перемудрен — и почему это реально круто (How Pony Foo is ridiculously over-engineered— and why that is awesome)
• Поддержка WebP – более широкая чем ты думаешь (WebP Support – It’s More Than You Think)
• Практические примеры использования элемента picture (Practical use cases for the picture element)
• HyperTerm — JS/HTML/CSS терминал (JS/HTML/CSS Terminal)
• Эффектный интерактив для маркера на карте (Simple Interactive Points Effect)

CSS

• Оформление модальных окон. Перевод статьи Considerations for Styling a Modal
• Трюки с псевдоклассом :target. Перевод статьи The :target Trick
• Как линтовать ваш Sass/CSS правильно с помощью Stylelint. Перевод статьи How to lint your Sass/CSS properly with Stylelint
• Как линтить SCSS с помощью stylelint (How to lint SCSS with stylelint)
• Как веб-компоненты изменят архитектуру CSS (How Will Web Components Change CSS Architecture?)
• В поисках святого грааля: как я остановился на Element Queries и как вы можете их использовать сегодня (The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today)
• 4 способа реализации sticky hover эффекта для мобильных устройств (4 novel ways to deal with sticky :hover effects on mobile devices)
• Год, проведенный с PostCSS (A year with PostCSS)
• Тестирование визуальных регрессий с помощью PhantomCSS (Visual Regression Testing with PhantomCSS)
• Новости и текущее состояние стандрта CSS Grid Layout (CSS Grid updates, changes and state of the browsers)
• БЭМ и Atomic Design: CSS архитектура, которую стоит любить (BEM & Atomic Design: A CSS Architecture Worth Loving)
• Эффекты с CSS фильтрами: размытие, ч/б, яркость и многое другое (CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!)
• Ограничения медиа запроса supports (The limits of supports)
• Работа со строками в Sass (Working With Strings In Sass)
• Создание клевой CSS анимации для улучшения производительности фронтенда (Creating Cool CSS Animations to Improve Frontend Performance)
• Адаптация к полям ввода (Adapting to Input)
• Разбор позиционирование в CSS: мастер-класс с Paul O’Brien (Decoding CSS Positioning: A Master Class with Paul O’Brien)
• Стили для печати с Rachel Andrew (Translating CSS for Paged Media with Rachel Andrew)
• Jets.js — нативный движок CSS поиска (Native CSS search engine)

JavaScript

• JavaScript снова возглавляет список наиболее популярных языков программирования (JavaScript, Once Again, Leads The List Of Top Programming Languages)
• 9 видео с конференции OdessaJS 2016, проходившей 2 — 3 июля
• Прогрессивная загрузка современных веб-приложений через разделение кода (Progressive loading for modern web applications via code splitting)
• Миф о «настоящем JavaScript разработчике» (The myth of the “Real JavaScript Developer” – Brenna O'Brien / Front-Trends 2016)
• Почему литералы объекта в JavaScript — стоящая вещь (Why object literals in JavaScript are cool)
• Настройка кросс-браузерного JS юнит-тестирования (Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing)
• Альтернатива регулярным выражениям: apg-exp (An Alternative to Regular Expressions: apg-exp)
• ES6:
  
  • ES6 по-человечески. Перевод краткого (действительно краткого) руководства по ES6
  • Стрелочный ад, или новый круг старой проблемы
  • Литералы шаблонов в ES6: техники и инструменты (ES6 Template Literals: Techniques and Tools)
  • Const или Let? (Const or Let: Let’s Talk Javascript)
  • Детали о свойствах ES2016, о которых вы должны знать (Must know details about ES2016 features)
  • 6 вариантов использования ES6 прокси (6 compelling use cases for ES6 proxies)
  • Как использовать аргументы и параметры в ECMAScript 6 (How To Use Arguments And Parameters In ECMAScript 6)
  • 5 причин, по которым вы должны использовать промисы (5 Reasons Why You Should Be Using Promises)
  • Наиболее детальное рассмотрение ES6 Destructuring (The Most In-Depth Yet Understandable ES6 Destructuring Tutorial (complete with Assembled Avengers))
  • Чистый код с ES6 параметрами по умолчанию и сокращениями свойств (Clean Code with ES6 Default Parameters & Property Shorthands)
  • Использование новых коллекций ES6: Map, Set, WeakMap, WeakSet (Using the New ES6 Collections: Map, Set, WeakMap, WeakSet)
  • Использование ES6 генераторов и Yield для реализации асинхронных процессов в JavaScript (Using ES6 Generators And Yield To Implement Asynchronous Workflows In JavaScript)
  • JavaScript промисы 101 (JavaScript Promises 101)
  
  
• Фреймворки:
  
  • Порталы в React.js
  • React.js в паттернах (React.js in patterns)
  • Как работать со state в React. Недостающий FAQ. (How to handle state in React. The missing FAQ.)
  • Начинаем работать с Redux: введение (Getting Started with Redux: An Intro)
  • Техники прогрессивного улучшения с помощью React, ч.1 (Progressive Enhancement Techniques for React Part 1)
  • Три простых шага для улучшения React Redux кода (3 simple steps to improve your React Redux code)
  • Создание шаблонов для писем с React компонентами (Creating email templates with React components)
  • Как работать с элементами форм в Angular 2 (How to Deal with Different Form Controls in Angular 2)
  • Мобильные JS приложения: рассвет React Native (Mobile JavaScript Apps: The Dawn of React Native)
  • AngularJS vs. Ember.js: какой JavaScript фреймворк будет для вас лучшим?
  • Начинаем работать с Vue.js (Getting Started With Vue.js)
  • Рассмотрите на VueJS для вашего следующего веб-проекта (Consider VueJS for Your Next Web Project)
  
  
• Уроки:
  
  • Бесплатный онлайн-тренинг по Angular 2 16-17го августа
  • SPA с AngularJS и WordPress REST API (Single Page Apps Using AngularJS and the WordPress REST API)
  • Создание приложения для знакомств на базе компонентов с Angular 1.5 (Writing component based goats dating app with angular 1.5)
  • Создание приложения в VueJS 2 (Create an App in VueJS 2)
  • Создание приложения для потоковой музыки с Electron, React и ES6 (Build a Music Streaming App with Electron, React & ES6)
  • Учимся создавать визуализации данных с D3.js на примере (Learn to Create D3.js Data Visualizations by Example)
  
  
• Плагины:
  
  • howlerjs — библиотека для работы с аудио в современном вебе (Audio library for the modern web. howler.js makes working with audio in JavaScript easy and reliable across all platforms.)
  • Cleave.js — форматирование контента в поле <input/> при наборе
  • allora — промисы, использующие ES6 прокси для каждого JS API (Promisify using es6 Proxies every javascript API with less than 50 lines of code)
  • Dio — легковесный (~6kb) фреймворк с Virtual DOM. (Dio is a lightweight (~6kb) Virtual DOM framework.)
  • Aquarelle — JS для реализации эффекта растекания акварельной краски (Aquarelle is a watercolor js effect)
  
  

Браузеры

• В Firefox 48 начнётся интеграция компонентов на языке Rust
• Firefox переходит к блокировке некоторых видов Flash-контента
• Выпуск web-браузера Chrome 52
• Microsoft рекомендует использовать браузер Microsoft Edge из-за его энергоэффективности
• Что повлечет за собой покупка китайским консорциумом компании Opera Software?
• ChromeLens ChromeLens, расширение Chrome DevTools для имитации цветовой слепоты и устройств чтения с экрана
• Топ 12 инструметов для тестирования браузерной совместимости
• Детали релиза Safari Technology Preview Release 9
• Oryoki — маленький веб-браузер с тонким интерфейсом, экспериментальный проект в разработке
• Apple планирует внедрять WebP для повышения скорости сайтов

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

• Stack Overflow запускает самое большое нововведение с момента старта всего проекта — документации
• В Китае запрещают блокировщики рекламы
• В ближайшем крупном обновлении Windows 10 появится режим разработчика
• Google задействовала машинное обучение для удобства чтения комиксов
• Падение продаж Apple Watch потянуло вниз весь рынок «умных» часов
• Капча CloudFlare может применяться для деанонимизации пользователей Tor
• Спрос на технарей упал на 40%, но никто не говорит об этом
• Основой SEO-рынка продолжает оставаться обман
• Бум нейросетей: Кто делает нейронные сети, зачем они нужны и сколько денег могут приносить
• 5 медицинских тенденций будущего
• 108 задач с IT-собеседований с разбором решений
• Десять предсказаний о будущем, которые напугают вас до смерти
• Покемономания: Кто и как зарабатывает на игре Pokemon Go
• Когнитивные искажения. То, что нужно знать всем
• Хватит учиться писать код – лучше учитесь анализировать данные
• 7 законов робототехники Сатья Наделлы
• Где и как задействуют нейронные сети
• План 2026: Марк Цукерберг об основных направлениях развития Facebook на ближайшие 10 лет
• Каждый месяц Facebook Messenger пользуется 1 млрд человек
• Пора искать замену мобильной версии Skype?

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

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