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

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

CSS

Javascript

Браузеры

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

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

• Браузеры наши меньшие, или Нам нужно серьёзно поговорить
• Подкаст Веб-стандарты, Выпуск №33: Несмелый Safari, доступность, порядок элементов, фронтенд Mail.Ru, зачем PWA, HTTPS без вариантов, кастомные свойства, строчный код, платные конференции.
• Политика безопасности контента, ваш будущий лучший друг
• Новые статусы HTML5.1 и SVG2
• Оптимизация производительности:
  
  • Измерение производительности с User Timing API
  • Секретные техники оптимизации PNG
  • А ваши картинки крадут время?
  • Как использовать amp-img и amp-video для повышения скорости вашего сайта
  • Web Performance Checklist
  
  
• PWA:
  
  • Технологии AMP и PWA в поиске Google – Будущее уже стало настоящим
  • PWA Performance
  • Что именно делают Прогрессивные Веб-приложения? (What, Exactly, Makes Something A Progressive Web App?)
  • Прогрессивные веб-приложения имеют смысл (Progressive Web Apps Simply Make Sense)
  
  
• Ботанское руководство по цветам в вебе (A Nerd’s Guide to Color on the Web)
• Как автоматизировать Gulp задачи и генерировать веб-шрифты из SVG файлов (How to automate Gulp tasks and generate webfont from SVG files)
• Хорошее ли сейчас время, чтобы начать использовать Web Bluetooth? (Спойлер: да) (Is Now a Good Time to Start using Web Bluetooth?)
• О новом GitHub GraphQL API
• Не ломайте ваши <img> (Don’t ruin your <img>)
• Изменчивые шрифты, новый тип шрифтов для отзывчивого дизайна (Variable fonts, a new kind of font for flexible design)
• Cross-origin Service Workers: эксперименты с Foreign Fetch
• Начинаем работать с Webpack: магия пакетирования модулей (Getting Started with Webpack: Module Bundling Magic)
• Использование Webpack для горячей перезагрузки Backbone-Marionette-Ampersand проекта (Using Webpack to Hot-Reload Your Backbone-Marionette-Ampersand Project)
• WebGL2 Fundamentals
• Один NodeJS сервер на несколько сайтов: Такой же простой запуск JavaScript файлов с помощью NodeJS, как и запуск PHP файлов с помощью Apache
• Встраивание кода с Github на сайт
• Клевая анимация букв с помощью SVG (Fancy SVG Letter Animation )

CSS

• Шрифты:
  
  • Шрифты в вебе, обзор от 2016 года
  • Отзывчивый размер шрифта
  • Проверка, загрузился ли шрифт Font Awesome
  • 3 вещи, которые нужно учитывать при работе с отзывчивой типографикой (3 things to keep in mind to master Responsive Typography)
  
  
• Email Templates:
  
  • Gmail анонсировал поддержку CSS media queries в письмах
  • Письма наконец просыпаются с адаптивным дизайном (Email finally wakes up to responsive design)
  • 7 хаков для шаблонов писем, о которых должен знать каждый разработчик (7 email hacks every developer should know)
  • Gmail вводит поддержку отзывчивого дизайна, улучшает стилизацию шрифтов + CSS для доступности (Gmail to Support Responsive Design, Improved Font Styling + CSS for Accessibility)
  • Красочные кампании: руководство по использованию CSS фильтров в письмах (Captivatingly colourful campaigns: Our guide to using CSS Filters in email)
  
  
• Разбираемся в функциях Sass 3.5 first-class
• Благодаря RSCSS мой код больше не беспорядочен (RSCSS?—?my CSS is no longer a mess)
• Как мы отрефакторили наш CSS для BGP (How we refactored our CSS for BGP)
• Рабочие хаки для определения IE (Efficiently Detecting IE Browsers)
• Настало время быть честными относительно техник подмены изображений (It’s Time to Be Honest about Image Replacement Techniques)
• Почему CSS4 не существует — объяснение уровней CSS (Why there is no CSS4 — explaining CSS Levels)
• Как создать глитч-эффект с помощью CSS (How To Create CSS Glitch Effect)
• Fun with CSS: NBA edition
• MinMaxing: понимание vMin и vMax в CSS
• Как создавать и использовать кастомные функции в SASS (How to Create and Use Custom Functions)
• Расширяем лимиты CSS 3: удивительные творения на чистом CSS (Stretching the limits of CSS 3: Amazing creations in pure CSS)
• Автоматизация визуальных регрессий, опять (Automating visual regression testing, again )
• SpinThatShit — набор SCSS миксинов для создания лоадеров одним элементом
• Эффект предзагрузки контента Skeleton Screen на CSS
• Полноэкранное видео с mix-blend-mode текстом над ним (Fullscreen Background Video with mix-blend-mode Overlay Text)

JavaScript

• Строим свой full-stack на JavaScript: Сервер
• Три принципа производительности в JavaScript, делающие Bluebird быстрым
• Проект Mozilla представил новый отладчик для JavaScript
• 4 видео с MoscowJS 33
• Фреймворки:
  
  • Состоялся финальный релиз Angular 2
  • Анимации в Angular 2 — основные концепты (Angular 2 Animations — Foundation Concepts)
  • Мы серьезно недооценили Angular (We Have Seriously Underestimated Angular)
  • Angular, version 2: proprioception-reinforcement
  • Финальный релиз Angular 2. Наконец. (Angular 2 Final Release Finally. FINALLY.)
  • Angular 2 вышел — начинаем отсюда (Angular 2 is out — Get started here)
  • Dependency Injection в Angular 1 и Angular 2
  • Советы для настройки производительности React/Redux (React/Redux Performance Tuning Tips)
  • React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек
  • Реми Шарп: первые впечатления от React (Remy Sharp: First impressions of React )
  • Создание простого To-Do приложения с помощью React (Create a Simple To-Do App With React)
  • Изучаем React: настройка среды разработки (Learning React: Setting up a minimal React development environment)
  • Представление Tide — библиотекой React для менеджмента состояний (Introducing Tide?—?Our React State Management Library)
  • Полное введение в ReactJS [часть 1] — создание React приложения с нуля (The Ultimate Introduction to ReactJS [Part 1] — Building React From Scratch)
  • AJAX запросы в React-е: как и где грузить данные (AJAX Requests in React: How and Where to Fetch Data)
  • Встречайте AdonisJs! Laravel-style MVC Framework для Node.js
  
  
• ES6:
  
  • «Будущее ES6» — доклад Jafar Husain на Full Stack Fest 2016 (The future of ES6)
  • Является ли ES6 концом Underscore / Lodash? (Does ES6 Mean The End Of Underscore / Lodash?)
  • Transpiling ES6
  
  
• JavaScript vs jQuery
• Modernization of Reactivity. Презентация новой реактивной библиотеки для создания эффективных веб-приложений без фреймворков
• Что каждый JS разработчик должен знать о Unicode (What every JavaScript developer should know about Unicode)
• Техники рефакторинга JS (JavaScript Refactoring Techniques: Specific to Generic Code)
• Прагматичное использование Monkey Patching в JS (Pragmatic Uses of Monkey Patching in JavaScript)
• Генераторы и каналы в JavaScript (Generators and Channels in JavaScript)
• Способы объявления переменных в JS (Quick Tip: How to Declare Variables in Javascript)
• JavaScript аргументы функции по умолчанию (JavaScript Default Function Arguments)
• Улучшение синтаксиса EJS-шаблонов (Improving the syntax of EJS templates)
• Литералы шаблонов однозначно лучше строк (Template Literals are Strictly Better Strings)
• Быстрая настройка TDD для TypeScript (Fast TDD setup for TypeScript)
• Тестирование JavaScript с Jest (Testing JavaScript with Jest)
• Почему нужно использовать Flow? (Why Use Flow?)
• Запуск асинхронного JavaScript кода в последовательности с Async Waterfall (Running Asynchronous JavaScript Code in Sequence with Async Waterfall)
• pageAccelerator — простое решение для более быстрой загрузки веб-страниц (IE10+) использует ajax и pushState

Браузеры

• Microsoft снова демонстрирует, насколько ее браузер Edge превосходит по энергоэффективности Chrome, Opera и Firefox
• Google Chrome будет бороться с медленными скриптами на страницах сайтов
• Как максимально использовать возможности браузера Chrome на Android
• Как сделать Microsoft Edge чуточку лучше
• Chrome Beta 54: фоновая музыка и видео, цветные вкладки и новая главная страница

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

• JavaScript, Font-Awesome и Microsoft лидируют в статистике GitHub
• Samsung запустила страницу для проверки дефектности аккумуляторов у Note 7
• В США было зафиксировано более 70 случаев возгорания смартфона Galaxy Note 7
• Samsung Galaxy Note 7: причины возгорания и временное решение проблемы
• Компания Oracle передаёт среду разработки NetBeans сообществу Apache
• Twitter обновит лимит символов для твитов
• Компания Google представила наработки по поддержке изменчивых шрифтов OpenType
• Facebook и Twitter помогут Google отсеять ложные новости
• В Windows Store наконец появятся привычные десктопные программы и игры
• Uber, Dropbox, Airbnb и другие компании создадут единые стандарты кибербезопасности
• YouTube Community — «социальная сеть» внутри видеосервиса Google
• Абсолютно новый GitHub: хостинг репозиториев представил новый дизайн, инструменты, обсуждения и возможности
• Pornhub и Youporn окончательно заблокированы на территории России
• Не будь злом. Как Google стал шпионской сетью номер один в мире
• Ракетостроение сквозь века
• Новая штаб-квартира Facebook в Менло-Парке в репортаже Ильи Варламова
• 9 способов выжать максимум из офисного интернета
• Как онлайн-мошенник украл у меня $500, а под конец умолял не сдавать его маме
• От клона ICQ до создания WeChat и статуса самой дорогой компании Китая — история Tencent
• Заняться теорией и олимпиадами или пойти на работу в IT-компанию? — Эксперты дают советы начинающим программистам
• Во что превратятся деньги через 5 лет?
• Будущее без экранов. Как VR резко меняет то, как мы взаимодействуем с технологиями

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

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