Дайджест свежих материалов из мира фронтенда за последнюю неделю №263 (15 — 21 мая 2017)

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

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

CSS

Javascript

Браузеры

Занимательное

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

• Подкаст Веб-стандарты, Выпуск №69: Samsung, Safari, Google I/O, Git в Atom, GitHub Desktop, Box Alignment, Лия и Mavo, ППК и формы, фронтенд заговорил, Perf.HTML, ES-модули.
• Подкаст Frontend Weekend: FW #1 — Как стать frontend-разработчиком, FW #2 — Эволюция frontend-разработки, FW #3 — Про MoscowCSS и Moscow Coding School
• Как правильно вставлять SVG — HTML Шорты
• Как сделать сообщения об ошибках доступными
• Полный контроль над контрольными точками. В CSS и в JS
• Самые интересные сессии с Google I/O для веб-разработчиков
• Lea Verou презентовала на этой неделе библиотеку Mavo, которая превращает вашу HTML-разметку (включающую специальные атрибуты) в интерактивное веб-приложение.
  Введение в Mavo: создавайте веб-приложения с помощью HTML!
• Style Guide Guide — шаблон для создания руководства по стилям
• Перепроектирование фронтенда в Airbnb
• Комбинированное использование Webpack с Gulp 4
• Обширная презентация от Filament Group: доступность в отзывчивом мире, A11Y Days 2017
• Сравнение пяти самых популярных фронтенд фреймворков в 2017
• Google AMP используется на 2B+ мобильных страницах и на 900K доменах, грузится в два раза быстрее
• Scott Gilbertson: ‘Убейте Google-овский AMP, иначе он убъет открытый Web’
• Три способа уменьшить размер бандла в webpack
• Апдейты:
  
  
  • Представление нового формата: JSON Feed
  • Yarn create и Yarn 1.0
  • Интеграция с Git и GitHub приходит в Atom
  • Вышел Polymer 2.0. Поддержка ES6, свежайший Polymer CLI, стартовый набор для создания PWA шаблонов и многое другое
  
  
• PWA:
  
  
  • Прогрессивные Веб Приложения — норм или ни о чем?
  • preact-cli: CLI инструмент для создания PWA приложений за секунды
  • Web Components VS Frameworks
  
  
• Эффектный веб:
  
  
  • Moments of Happiness, набор демок с животными на WebGL, GSAP и Three.js
  • Создание креативных сплеш-переходов с помощью CSS и SVG
  • Эффект извлечения цветов с помощью CSS фильтров и Vibrant.js
  • Аккордеон, созданный одним Div-ом (и анимированный с помощью CSS переменных)
  • Занятное использование VR в вебе
  • Эксперименты с физикой твердого тела за счет графического ускорителя с помощью WebGL/threejs

CSS

• Инструкция: CSS-оптимизация веб-страницы для печати
• Сообщения об ошибках и рекомендации. Третья часть серии статей от ppk на тему нативной валидации форм
• Упрощаем создание кубов на CSS с помощью пользовательских свойств
• learncssgrid.com — руководство по изучению CSS grid
• Изучение CSS Grids
• Большая ошибка медиа-запросов
• Подробная статья о CSS свойствах writing-mode & text-orientation
• Несколько довольно полезных рецептов `:nth-child` для миксинов Sass
• Отзывчивый дизайн в движении. WebKit теперь поддерживает медиа свойство prefers-reduced-motion, являющегося частью CSS Media Queries Level 5
• Нелинейная интерполяция в CSS
• Крис Койер о стилизации синтаксиса CSS с помощью линтеров
• «Я нашел действительно умный CSS в теме reddit»
• Типографика:
  
  
  • Адаптивная типографика с помощью математики
  • Адаптивная и отзывчивая типографика с помощью Hamster Framework. Лечение гемороя без операции и боли
  • Резиновая отзывчивая типографика с помощью метода Poly Fluid Sizing
  • Пошаговое руководство по единицам измерения, которые вы можете использовать для размеров шрифта

JavaScripts

• Ваши JavaScript-велосипеды никому не нужны: сохраните своё время, избегая повторного написания популярных функций
• Может ли Google правильно анализировать и индексировать JavaScript фреймворки? Эксперимент по JavaScript SEO
• Написание современного JavaScript кода
• Анатомия современного JavaScript приложения
• Улучшаем производительность вашего веб-приложения на JavaScript
• Почему я выбрал ClojureScript вместо JavaScript
• Не усложняйте Javascript #0
• Начинаем работать с JavaScript Web Animation API
• Практическое руководство по fetch(), reduce() и форматированию данных из внешних API
• Возможно вам не нужно конвертировать JavaScript код
• Видео с конференции JSConf EU 2017
• Теория:
  
  
  • Переосмысление JavaScript: Смерть for
  • Каррируй, мой блудный сын. Перевод статьи Tom Harding: Curry On Wayward Son.
  • Осваиваем замыкания в Javascript. Вольный перевод статьи Let’s Learn JavaScript Closures
  • (Не) Все в JavaScript — это объект
  
  
• React:
  
  
  • Подкаст Пятиминутка React #17 — Idiomatic Redux
  • json-api-normalizer: простой спрособ интеграции JSON API и Redux, статья на Хабре
  • react + d3 = vx, компонент для визуализации. Начинаем работать с vx
  • j0nas/light-form — легковесная библиотека для легких React/Redux форм
  • react-pdf — создание PDF файлов с использованием React
  • Видео с React Kyiv April
  
  
• Vue:
  
  
  • Как (безопасно) использовать jQuery плагины с Vue.js
  • Почему разработчики сейчас сравнивают Vue.js с такими гигантами JavaScript, как Angular и React?
  • Vue.js хорош, но лучше ли он, чем Angular или React?
  • Как создать простое SPA с помощью Vue 2 (часть 2)
  • Что такое Vuex? Руководство для новичков по Vue Application Data Store
  • vue-js-modal — простые модальные окна на Vue.js 2.0+
  
  
• Angular:
  
  
  • React vs Angular: две стороны JavaScript
  • Как создать библиотеку для Angular(2+) и опубликовать это дело в npm
  
  
• Libs & Plugins:
  
  
  • Workbox — JS библиотеки для прогрессивных веб приложений
  • leerraum.js — библиотека типов PDF с точным позиционированием и дешифровкой строк
  • delaunator — быстрая библиотека для триангуляции Делоне 2D-точек
  • godzilla — транспайлер кода ES2015 в Go

Браузеры

• Кэширование в браузерах и CDN
• Обновлены макеты переработанного оформления Firefox 57
• Firefox 55 будет запрашивать разрешение на использование Flash по умолчанию
• Анонс стабильной версии Samsung Internet v5.4, с поддержкой DeX, PWA-фишек, Physical Web и других модных штук
• Microsoft Edge на Build 2017

Занимательное

• Основные анонсы Google I/O 2017
• Последние новости о виртуальной / дополненной реальности с Google I/O 2017
• Что там с WannaCry: дешифратор, новые вирусы и зараженная медицинская техника
• Facebook представила инструмент для разработки способного вести диалоги ИИ
• IBM представила свой самый мощный квантовый процессор
• Google опубликовала результаты своего игрового эксперимента Quick, Draw!
• Facebook запустила тестирование раздела для заказа еды из ресторанов
• Стоимость биткоина впервые превысила $2000
• Почему криптовалюты дорожают и стоит ли их покупать
• Новый кампус Apple Park. Последняя презентация Стива Джобса
• Биткоин — пузырь. Но почему он никак не лопнет?
• Контроль и свобода: Как отличается корпоративная культура Apple и Google
• Как бывший инженер Google построил компанию на $1,5 млрд за 21 месяц

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

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