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

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

CSS

Javascript

Браузеры

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

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

• Фронтенд для новичка. Куда идти и что делать?
• Подкаст Веб-стандарты, Выпуск №44: Новости Firefox, веб-компоненты в WebKit, мультиколонки, системы раскладки, SVG-паттерны, нюансы доступности, методологии CSS, улучшение формы, фолбеки к шрифтам, HTML на стероидах, подкаст жив!
• Что нового в WordPress 4.7?
• Результаты опроса «The State of Front-End Tooling 2016»
• Интернет странных вещей. Автор создает умную гирлянду по мотивам сериала «Stranger Things», используя Node.js, WebSockets и Raspberry Pi (Internet of Stranger Things)
• За кем следить в твиттере, если вы — разработчик фронтенда
• Пользовательские компоненты, которые работают везде (Custom Elements That Work Anywhere)
• AMP от Google — это золотая клетка (о проблемах индексации сайта на WP) (Google's AMP is a gilded cage)
• Подборка ссылок на тематические репозитории из серии «You Don't Need»
• Производительность:
  
  
  • О новых практиках фронтенда при использовании HTTP/2 (Getting Started with HTTP/2: Part 2)
  • Коллекция инструментов для измерения производительности ?
  • 9 советов по оптимизации веб-производительности
  
  
• HTML:
  
  
  • Что нового в HTML 5.1
  • Использование элемента address в HTML 5.2
  • Diff of HTMLs — неофициальный сайт с подробным сравнением стандартов WHATWG HTML и W3C HTML
  
  
• PWA:
  
  
  • Progressive Web App Checklist
  • 5 клевых Прогрессивных Веб-приложений, на которые стоит обратить внимание
  • Установка веб-приложений на телефоны (по-настоящему)
  
  
• SVG:
  
  
  • Пуленепробиваемые SVG с помощью Grunticon
  • SVG — это не все… SVG (An SVG That Isn’t All… SVG)
  
  
• Service Worker:
  
  
  • Сервис воркеры, что вы такое? (Service Worker, what are you ?)
  • Service Worker Routing
  
  
• A Webpack Pattern Library
• Полезные Regex-шаблоны

CSS

• Как я вспоминал школьный курс геометрии
• Шрифты:
  
  
  • Как использовать кастомные шрифты в вебе и не сойти с ума
  • Улучшаем стили с помощью em-ов
  • Эксперименты с цветными шрифтами
  
  
• @supports изменит вашу жизнь
• Горизонтальный скролл на чистом CSS
• Циклы в CSS препроцессорах
• Когда какую CSS методологию использовать (When to use which CSS methodology)
• Nesting Your BEM?
• 7 способов размещения элементов с помощью CSS Grid Layout
• Производительный параллаксинг (Performant Parallaxing, by Paul Lewis on developers.google.com )
• Кружевные шаблоны в CSS (Lace Patterns in CSS)
• 9 простых фильтров в CSS
• Обтекание текста вокруг искривленного изображения с помощью CSS Shapes
• Как область видимости стилей работает с Element Queries (How Style Scoping Works with Element Queries)
• Запись трансляции CSS Conf AU 2016

JavaScript

• Logux: Connection lost, data synchronized – интервью с Андреем Ситником (Злые Марсиане)
• Функциональное программирование с примерами на JavaScript. Часть первая. Основные техники функционального программирования
• Запись прямой трансляции с JS Conf AU
• Как избежать усталости от JavaScript и спокойно спать по ночам
• Использование компонентов Bootstrap без jQuery
• Мысли о линейных градиентах, похожих на оригинальное изображение (Thoughts on Linear Gradients That Resemble Images)
• Базовая настройка окружения для разработки JavaScript
• JavaScript разработчики: следите за своим языком! (JavaScript Developers: Watch Your Language!)
• Svelte — Производительный фреймворк, заимствующий черты Vue.js и Ractive.
• Как использовать Aurelia с Redux
• ES6:
  
  
  • Когда использовать ES5 Var, а когда ES6 Let
  • JS промисы для чайников (JavaScript Promises for Dummies)
  • Вы уже пишете ES6 JavaScript? (Editorial: Are You Writing ES6 JavaScript Yet?)
  • Async / Await разогревается (Async / Await Warm Up)
  
  
• React:
  
  
  • Подкаст «Пятиминутка React»: выпуск #4 — Redux, Аctions подряд, выпуск #5 — Redux, Derived Data
  • React и третьесторонние библиотеки
  • Магия, стоящая за styled-components
  • Практическое руководство по Redux (A Practical Guide to Redux)
  • Создание собственных Middleware в React/Redux. (Creating custom Middleware in React/Redux.)
  
  
• Vue:
  
  
  • Начинаем работать с фреймворком Vue.js 2.0
  • Vue.js Fundamentals. Изучайте Vue 2.0 из серии руководств
  • Изучение Vue 2: шаг за шагом
  • vuelidate — простая валидация на базе модели для Vue.js
  • Очистка Vue модулей с помощью стрелочных функций ES6
  
  
• Angular:
  
  
  • Релиз Angular 2.3.0-rc.0 (2016-11-30)
  • Angular 2 просто ужастен
  • ng2d3 — композитный Angular2 + D3js фреймворк для создания графиков
  • Angular 2?—? анимированные роутер-переходы
  
  
• Плагины
  
  
  • JSON-Splora — GUI для редактирования, визуализации и манипуляции данных JSON с помощью jq или JS
  • mgGlitch — небольшой jQuery плагин для добавления эффекта глитча
  • Premonish — библиотека для предсказания следующего элемента, с которым будет взаимодействовать пользователь дальше
  • KUTE.js — JS движок для создания высокопроизводительной и эффективной анимации
  • date-fns — современная библиотека для манимуляций датой в JavaScript
  • primitive.js — перерисовка изображений с помощью примитивных форм

Браузеры

• Mozilla и Tor закрыли критическую уязвимость, которая активно использовалась для деанонимизации пользователей Tor
• Chrome 55 сократил потребление памяти на 30%
• Выпуск web-браузера Chrome 55
• Chrome 55 теперь блокирует Flash, используя HTML5 по умолчанию
• В Firefox 52 Developer Edition добавили новый JS-отладчик
• Firefox стал богаче, когда прекратил жить на деньги Google
• WebVR 1.0 доступен в Firefox Nightly
• Firefox 53: особый изолированный процесс для работы с локальными файлами
• CSS Grid и Grid Highlighter доступны в Firefox Developer Edition
• Визуализация анимации и изингов в DevTools

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

• Обновленный Timelapse сервиса Google Earth демонстрирует как менялась Земля в последние 30+ лет
• Google Translate теперь может работать с языками, переводу между которыми не обучался
• Яндекс сравнил поисковые запросы со словарем Даля
• Как создать искусственный интеллект? (Почти) исчерпывающее руководство
• Как открытый API влияет на бизнес
• Компания Huawei стала самым прибыльным производителем Android-устройств
• Twitter приобрел стартап Yes! и назначил его главу директором по продукту сервиса
• Google предупредила российских пользователей о повышении цен с 2017 года из-за «налога на Google»
• YouTube запускает поддержку 4K для стриминга обычных и панорамных 360-градусных видео
• Компания Mozilla опубликовала финансовый отчёт за 2015 год
• Facebook будет развлекать пользователей играми

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

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