Дайджест свежих материалов из мира фронтенда за последнюю неделю №290 (19 — 26 ноября 2017)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
•
•
•
•
•
•
•
Веб-разработка
•
• Что за lit-html? lit-html — конкурент react или просто другой вид Handlebars
•
•
•
-
Производительность:
•Использование SVG в качестве Placeholder’a
•Оптимизация скорости визуализации веб-страниц
• «Яндекс» запустил в поиске «турбо-страницы» — аналог Google AMP и Instant Articles
•Новый монитор производительности (Performance monitor) в Chrome DevTools. Теперь вы можете наблюдать множество метрик производительности в реальном времени
•Объяснение понятия First Contentful Paint (FCP) в блоге GTmetrix
•Что такое HEIF и заменит ли этот формат JPEG?
-
Инструменты:
•Внутреннее устройство и оптимизация бандла webpack
•Jest и Puppeteer: автоматизация тестирования веб-интерфейсов
•stacks-cli — наглядный анализ стэка сайта из терминала
•Clean-mark — конвертор статей в markdown текст
-
Accessibility:
•Подробный разбор создания доступного слайдер контента
•Шаблоны HTML писем и доступность
•Пропаганда доступного дизайна интерфейсов
-
Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #63
•Shredder Redux — реализация Shredder Polygon с использованием инстансов, на three.js, Maf.js и dat.gui
•Креативная анимация чекбоксов в Todo списке на CSS
CSS
• Всё, что вам нужно знать о CSS-in-JS
•
•
•
•
•
•
•
JavaScript
• Сколько стоит JavaScript? Перевод «The Cost Of JavaScript» Эдди Османи.
• 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек
•
•
•
•
•
•
-
Фреймоврки:
•Серия публикаций из 11-ти статей со сравнением Aurelia, Ember, Dojo, Vue, React и Angular, с выводами и приведенными плюсами/минусами каждого из них
•JavaScript фреймворки в цифрах по состоянию на осень 2017
•Современные фронтенд фреймворки должны быть меньше о “frame” и больше о “work”
•Angular vs React: сравнение в контексте популярности
-
Теория:
•Чем отличаются JavaScript и ECMAScript?
•Основы троттлинга событий в JavaScript
•Типы в JavaScript: почему вы должны заботиться о них
•Нестандартное объяснение JavaScript области видимости переменных на примере уровней в парламенте
•Как сделать жизнь проще с помощью использования функционального программирования в TypeScript
•Изучите, как обрабатывать ошибки в JavaScript с помощью Try, Throw, Catch, & Finally
-
VueJS:
•Прогрессивная миграция с AngularJS на Vue.js в Unbabel
•Прогрессивное веб-приложение с помощью Vue JS, Webpack & Material Design
•Как я начал использовать Vue
-
React:
•Основы React: всё, что нужно знать для начала работы
•Бесплатные лекции по продвинутому React.js
•Как значительно улучшить производительность приложения на React
•bemto-components. Умные компоненты для использования методологии BEM с React. Лучше всего заходит со styled-components.
•Издержки производительности при серверном рендеринге React на Node.js
-
Angular:
•Использование Angular компонентов со сторонними библиотеками
•Взгляд на Angular через призму Vue — знакомый код
•Как сделать компонент загрузки приложения Angular с помощью Angular CLI
•Angular 5 Service Worker
•“React лучше, чем Angular” и другой бред
-
Libs & Plugins:
•Scrollama — JS библиотека для реализации сторителлинга с помощью IntersectionObserver в пользу событий прокрутки.
•Chartkick — создание красивых графиков с помощью одной строки на React
•imaskjs — маскирование данных по заданным параметрам в текстовом поле ввода, без зависимостей
•raspchat — сервер с чатом, который можно запускать на Raspberry Pi
•z — нативный паттерн сравнения для Javascript
•AWS Amplify — декларативная библиотека для разработки приложений, использущих Cloud сервисы с JS
Браузеры
•
• В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов
• Хотите получать новости первым? О том, как заблокировать раздражающие push notifications в разных браузерах
•
•
Занимательное
• Анализ степени дублирования кода на GitHub
• GitHub получил функцию командных обсуждений
• Quartz: Google собирает данные о местоположении пользователей Android
• Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план
• 11 оптических иллюзий в интерфейсах
• Где найти последние места без интернета
•
•
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.