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

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

CSS

Javascript

Браузеры

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

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

• Пишите меньше кода, блин
• Подкаст Веб-стандарты, Выпуск №30 : Старьё, мысли про React, SMIL пока можно, скрывать по-новому, Народ.ру на Гитхабе, сайт на 10 КБ, интернет в отпуске.
• Подкаст Frontflip, выпуск №20: Elm и ядовитый утконос. В гостях Игорь Капков
• Анимации: ищем общий язык. Перевод статьи Communicating Animation
• Опубликованы два новых документа по b_-методологии: Быстрый старт, CSS по БЭМ
• Как фронтенд-разработка может улучшить искусственный интеллект (How Front-End Development Can Improve Artificial Intelligence)
• Доступный в оффлайне контент с помощью сервис-воркеров (Offline content with service workers)
• Использование изображений в формате WebP (Using WebP Images)
• Markapp: сайт со списком HTML/JS библиотек от LEA VEROU, целью которого является сбор и поддержка плагинов, не требующих написания JS кода
• Carbide — новая среда программирования, не требующая установки или настройки, и поддерживающая Javascript/ES2015, автоматический импорт модулей из NPM и GitHub Saves и работающая напрямую с Github Gists
• Производительность означает прогрессивное улучшение (Performance Means Progressive Enhancement)
• Несколько подсказок по HTML (A few HTML tips)
• Воспитание кодера занимает много времени (It takes a village to raise a coder)
• Настройка прогрессивных веб-приложений с amp-install-serviceworker (Bootstrapping Progressive Web Apps with amp-install-serviceworker)
• Создание первого плагина к Atom-у (Building your first Atom plugin)
• Визуализации концепций GraphQL (GraphQL Concepts Visualized)
• Flash умрёт в декабре: да здравствует HTML5 видео проигрыватель (Flash Is Dying In December: Long Live HTML5 Video Player)
• «SVG So Very Good» — доклад Tyler Sticka с CascadiaFest 2016
• Inline SVG – как я перестал беспокоиться и полюбил gzip (Inline SVG – How I Learned to Stop Worrying and Love gzip)
• API:
  
  • Как использовать WebPageTest и его API (How To Use WebPageTest and its API)
  • Быстрый совет по работе с JavaScript Battery API (Quick Tip: Working with the JavaScript Battery API)
  • Введение в Web Audio API (An Introduction to the Web Audio API)
  • Создание прогрессивного веб-приложения с помощью Web Bluetooth API (Start Building with Web Bluetooth and Progressive Web Apps)
  • Локальное кеширование результатов полученных AJAX запросов: обертка Fetch API (Cache Fetched AJAX Requests Locally: Wrapping the Fetch API)
  
  

CSS

• По старшинству. Когда порядок в CSS важен
• Style Validator — валидатор, определяющий «рискованные стили», которые могут сломать лейаут после JavaScript или CSS Media Queries.
• Примеры использования Fixed Backgrounds в CSS (Use Cases for Fixed Backgrounds in CSS)
• 3 скрытых совета по CSS (3 hidden CSS tips)
• Восемь хитрых трюков по использованию CSS (8 Clever Tricks with CSS Functions)
• Улучшение структуры данных с помощью Sass Maps (Building Better Data Structures With Sass Maps)
• Представление CSS свойства «font-display»
• Улучшение CSS анимаций с помощью движений по кривым (Upgrading CSS Animation With Motion Curves)
• Как выбрать правильные CSS инструменты и фреймворки (How to Choose the Right CSS Toolkits and Frameworks)
• Использование CSS3 счетчиков для нумерации Figure и таблиц (Using CSS3 Counters for Figure and Table Numbering)
• Как использовать модульный паттерн в таблицах стилей SCSS/SASS (How to use the module pattern in your SCSS/SASS stylesheets)
• Летящая ракета на чистом CSS (Pure CSS Flying Rocket)
• Введение в новую единицу CSS Grid «fr» в новом видео от Rachel Andrew (Intro to the CSS Grid fr unit)

JavaScript

• Node.js и JavaScript вместо ветхого веба
• Стоит ли Typescript усилий?
• JavaScript Performance, базы данных и поиски «серебряной пули»: видеозаписи ТОП-5 докладов HolyJS 2016
• Опрос: текущее состояние JavaScript (The State Of JavaScript)
• Быстрая подсказка: получение параметров URL с JavaScript (Quick Tip: Get URL Parameters with JavaScript)
• О ненависти к NodeJS
• Composition Is King
• Теория JS:
  
  • Почему я все ещё использую function в JavaScript?
  • Введение в каррирование в JavaScript
  • О ключевом слове «this» языка JavaScript: особенности использования с пояснениями
  • ES6, var против let (ES6, var vs let)
  • Для чего необходимы типы (Why You Need Types)
  • Является ли твоя JavaScript функция действительно чистой? (Is your JavaScript function actually pure?)
  
  
• Фреймворки:
  
  • Что нового в Marionette.js 3.0? (Getting started with new version)
  • Состояние JavaScript: Front-End фреймворки (The State Of JavaScript: Front-End Frameworks)
  • React FAQ
  • React паттерны (React Patterns)
  • BookReactJS для чайников: почему и как изучать React Redux правильно (ReactJS Convention BookReactJS For Dummies)
  • Компоненты ReactJS: изучение основ (ReactJS Components: Learning the Basics)
  • Работа с данными в React: свойства и State (Working with Data in React: Properties & State)
  • Игра на React — охота слона на тако (React Game- Elephant Taco Hunt)
  • react-music — создаем бит с помощью React (react-music — Make beats with React!)
  • react-static-plate — создание статических сайтов с помощью React и CSS Modules с хостингом на Amazon S3, Github Pages, Surge и т.п. (react-static-plate — build fast static sites with React & CSS Modules)
  • Новые горизонты с Horizon, RethinkDB и React (New horizons with Horizon, RethinkDB and React)
  • Как изучать Angular (How to Learn Angular)
  • Angular 1 с использованием архитектуры Redux (Angular 1 using redux architecture)
  • От ng-class к привязке свойств (From ng-class to Property Binding)
  • 19 Советов по облегчению изучения Angular 2 от Cody Lindley (19 Tips to Make Learning Angular 2 Easier)
  
  
• Уроки:
  
  • Эксперимент с веб аудио: определение нот пианино (A Web Audio experiment: detecting piano notes)
  • Создание музыкального комплекса на ванильном JavaScript (Create a Music Jam Station with Vanilla JavaScript)
  • Создание собственного фильтра (pipe) в Angular 2 (Creating a custom filter (pipe) in Angular 2)
  • Вращающиеся по направлению к мыши либо местам тача элементы (Rotating Elements To Mouse and Touch Locations Using JavaScript)
  • Создание смайлика на CSS, чьи глаза следят за курсором (Make a CSS Smiley Face with Dynamic Googly Eyes)
  • Создание ударной установки с Ember.js (Build a drum machine #1 — Playing Sounds — Ember.js)
  
  
• Плагины:
  
  • Grade.js — библиотека для генерации двухцветного градиента из основных цветов выбранного изображения
  • baffle.js — маленькая (~1.8kb) библиотека для обфускации и восстановление текста в DOM элементах
  • slate — фреймворк для создания текстовых веб-редакторов
  • pluggable.js — позволяет делать JS-код подключаемым с сохранением необходимых объектов и приватных данных через замыкания
  • WebMonkeys — тысячи параллельных задач на GPU с помощью самого простого API
  • Push.js — JS уведомления для браузеров
  • Odoo — эффектный одометр на SVG. Библиотека использует функциональный подход и ES7 Function Bind Syntax
  • in-view — скрипт, определяющий, когда элемент DOM появляется и исчезает из вьюпорта
  
  

Браузеры

• Исследователь рассказал об уязвимости в Chrome и Firefox из-за арабских доменов и эмодзи
• Google прекращает поддержку Chrome Apps на настольных системах
• В Firefox появится поддержка формата изображений Webp
• Surfingkeys — расширение возможностей браузера с javascript и клавиатурой (расширение для Chrome). (Surfingkeys — Expand your browser with javascript and keyboard.)

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

• Mozilla запустила бесплатный сервис по сканированию сайтов (Observatory by Mozilla)
• Технология Micropub получает статус CR в W3C (Micropub is now a W3C Candidate Recommendation!)
• Facebook открыл код библиотеки классификации текста fastText, а также наработки по распознаванию объектов на фотографиях
• Google не переходит по ссылкам в файлах SVG
• Google понизит сайты с полноэкранными баннерами в мобильной выдаче с 2017 года
• В поиске Google появилась возможность запускать некоторые игры, прослушивать издаваемые животными звуки и бросать монетку для принятия сложных решений
• Opera реализовала бесплатный сервис VPN для Android
• Pinterest покупает Instapaper
• Список из 300 полезных Slack-сообществ для дизайнеров, разработчиков и менеджеров
• Увольнения топ-менеджеров и растущая капитализация: год после реорганизации Google в Alphabet
• Список русскоязычных подкастов на тему информационных технологий.
• Обзор Windows 10 Anniversary Update: снова отучаем «десятку» следить и шпионить
• Ядру Linux исполнилось 25 лет
• Интернету — 25 лет! Тест на знание всемирной сети
• Две дороги в глобальном мире хайтека
• Как учить детей математике, чтобы они ее не возненавидели
• Индустрии из прошлого
• Apple уже не торт, или Почему я перехожу на продукты Google
• Интерактивная веб-карта олимпийского Рио
• GIF умер. Да здравствует GIF! (The GIF Is Dead. Long Live the GIF.)
• Интернет плохо работающих вещей (The Internet of Poorly Working Things)

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

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