Дайджест свежих материалов из мира фронтенда за последнюю неделю №253 (6 — 12 марта 2017)


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

052af9eb2b6142a8856cf7a2b8894463.png


Веб-разработка
CSS
Javascript
Браузеры
Занимательное

b70f9feaeee78b42a0c78c3731555e73.gif Веб-разработка


  • Подкаст Веб-стандарты, Выпуск №58: Жирненький Firefox 52, история Firefox OS, руководства по гридам, кастомные свойства, прогрессивное улучшение CSS, метрики шрифта, инструменты PWA, верните Гитхаб, собеседование на бумажке.
  • Подкаст RadioJS, Выпуск 47: Все полимеры
  • W3C обновляет свой рабочий процесс
  • Краткое руководство по работе с Web Audio API
  • enmicroicon — микросервис с SVG иконками, которые можно использовать в качестве плейсхолдера
  • enИзучаем новые функции SVG 2
  • enSVGs в вебе — неудачные моменты
  • enДолжен ли я изучать [вставьте любой новый инструмент]?
  • enУниверсальные веб-компоненты
  • enAMP и веб
  • enМысли об AMP: Accelerated Mobile Project
  • enТестирование Service Workers
  • enСоздавай веб расширения, просто потому что ты можешь это
  • envideoWebAssembly: под капотом с Mozilla

36c2c69660dd21085a2dcb71d7246ae6.gif CSS


  • Оптимизация шрифтов. Как получить наименьший размер шрифтовых файлов
  • enЛинтинг HTML с помощью CSS
  • CSS Grid Layout:
    • Грид + флексбокс: мощнейшее комбо в веб-раскладке
    • enCSS Grid Layout и PostCSS: Now Kiss!
    • enCSS Grid Layout: новый модуль раскладки для веба
    • enИграемся с CSS Grids
    • enEric Meyer: Добро пожаловать в Grid!
    • enКоллекция примеров использования Grid Layout на CodePen
    • enCSS Grid Layout — шаблон страницы поста в блоге

  • enПростой пример использования `vmin`
  • enКак мы сделали EQCSS & и почему ты тоже должен попробовать создать полифилы
  • enCSS реминификация: совершенно безумная идея, которая сработала
  • enИспользование CSS Transitions для раскрывающихся блоков
  • enМожете ли вы центрировать сетку изображений с помощью CSS?
  • enИсправляем белое свечение для фильтра CSS blur ()
  • enРеализация Facebook Emoji Reactions с помощью CSS
  • enИнтервью с Håkon Wium Lie (создателем CSS) о стилях для печати

49d04efb96fb6ce31cde9be5dc12a874.gif JavaScript


  • habrИстория о том, как мы перевели проект в почти четверть миллиона строк на TypeScript и остались в живых
  • enИнструменты для JS разработки
  • enПодробно о скроллинге в вебе в блоге разработчиков Microsoft Edge
  • enhyperHTML: альтернатива для Virtual DOM
  • Теория:
    • enКакая лучшая книга для изучения JavaScript?
    • enИнтервью с Kris Borchers, исполнительныи директором JS Foundation
    • enАнализ использования устаревших JavaScript-библиотек в интернете
    • enЧастота известных уязвимостей в библиотеках JavaScript
    • en Книга Рефакторинг устаревшего JavaScript кода для использования классов: хороший, плохой, злой

  • Практика:
    • habrИспользование Neutrino для быстрого начала разработки на JavaScript
    • habrСоздаем изоморфное/универсальное приложение на Next.JS + Redux
    • habrРазработка механики игры Bounce от Nokia на JavaScript
    • enПишем модульный JavaScript — ч.2
    • enШаблон навигации горизонтального скроллинга для тача и мыши с движущимся индикатором активного элемента

  • ES2015+:
    • enНативные модули ECMAScript: атрибут nomodule для миграции
    • en80/20 руководство по Async/Await в Node.js
    • enВозможности ES6 — десять примеров использования Proxy

  • React:
    • habrЧто взять за основу React приложения
    • habrУпрощаем универсальное/изоморфное приложение на React + Router + Redux + Express
    • Подкаст 5minreact #7 — Preact. Preact — быстрая альтернатива React с таким же API и всего 3kB в gzip
    • enПеревод поиска Airbnb на React
    • enreact2angular — простой способ внедрения React компонентов в приложения Angular 1

  • Vue:
    • enVue.js Component Style Guide
    • enЭй! Слышали ли вы о Vue.js?
    • enИнтерактивная инфографика с помощью SVGs & Vue.js
    • enHow do people React to my point of Vue
    • enПереVue-зировка (An overVue)
    • enКоллекция примеров с UI компонентами на Vue.js
    • enEnd-to-End тестирование Vue.js с TestCafe
    • envue-parallax-js
    • envue-recyclist — бесконечная прокрутка

  • Angular:
    • enСравнение Angular 2 и React
    • enИспользование Material компонентов в Angular 2
    • enЛучшие десять статей по Angular 2 за последний месяц
    • enЭмиттеры событий в Angular
    • enAngular Gauge 1.2.0 — настраиваемая директива для создания компонента датчика для Angular JS приложений и панелей управления.

  • Plugins & libs:
    • enNumscrubber.js — позволяет менять числовые значения в инпутах с помощью перетаскивания мышкой
    • eneslint-plugin-compat — проверка поддержки браузерами твоего кода
    • enfranc — определение текста языка по фрагменту
    • enService Worker Toolchain — коллекция утилит для создания/тестирования/экспериментов с service worker-ами
    • enblurify — маленькая библиотека для размытия изображений, поддерживающая CSS режим либо HTML5 Canvas режим (там где CSS недоступен)
    • enwebpack-blocks — конфигурация webpack с помощью блоков с функциональностью


Браузеры


  • enFirefox 52: Представляем Web Assembly, CSS Grid и Grid Inspector
  • Релиз Firefox 52. Подробности для разработчиков в блоге Марата Таналина
  • envideoАнонс CSS Grid & the Firefox Grid Inspector Tool
  • Оценка потребления памяти Firefox в многопроцессном режиме
  • Выпуск web-браузера Chrome 57
  • enНовое в Chrome 57
  • enЧто нового в DevTools (Chrome 58)
  • enSamsung Internet Beta теперь доступен без регистрации
  • enНам нужно поговорить про Opera Mini
  • envideo14 нужных советов по работе с Chrome Dev Tools

d4b289ef0a00e969108c25d0c3d75f58.gif Занимательное


  • AMP станут доступны для ещё 1 млрд пользователей в Азии
  • Почему новые условия использования GitHub всколыхнули общественность: разбор ситуации без лишних эмоций
  • Новости Google: В Google Photos добавили функцию автоматического баланса белого, Система нейронного перевода Google Translate стала доступна на русском языке, «Капча» Google стала невидимой: компания обновила популярную систему reCAPTCHA, а Технологии машинного обучения Google научились распознавать объекты в видео. Кроме того, Google обновила Hangouts для конкуренции со Slack. Но неразбериха все равно осталась
  • «Как думаете, какой запрос самый распространенный?». Глава Google Translate Барак Туровски — о том, как сервис переходит на нейросети
  • Помощь учёным, майнинг криптовалют, поиск далёких галактик: как использовать ресурсы «спящего» компьютера
  • Как Google Maps определяет загруженность парковок благодаря машинному обучению
  • Как оценить часы на разработку
  • Тренды вычислительной техники: программируем компьютеры будущего
  • Подкаст hexlet, №08. Эпоха возрождения и программирование в каменном веке
  • Разработчик создал рейтинг самых упоминаемых книг на Stack Overflow
  • Как GitHub влияет на вашу карьеру программиста
  • Что такое Windows 10 Cloud и почему она так важна для Microsoft?
  • IBM рекордно снизила долю ошибок в компьютерном распознавании речи
  • Нейросеть научили предсказывать наводнения по Flickr
  • enПравила для создания паролей — ерунда

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

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

Комментарии (0)

© Habrahabr.ru