Дайджест свежих материалов из мира фронтенда за последнюю неделю №290 (19 — 26 ноября 2017)

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

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

Медиа

• Подкаст «Frontend Weekend» #29 – Александра Ермоленко про то, как должны взаимодействовать дизайнеры и разработчики
• Подкаст «devschacht»: Ночной фронтенд #12 — Деньги не мотивация
• Подкаст «Фронтенд Юность (18+)» : JavaScript — лучший язык для бездумного копирования чужих велосипедов
• Подкаст «Drinkcast», Выпуск #18 — «Ребята, давайте жить дружно»
• «ALL YOUR HTML» #24: «Кастомный скролл и css свойство clip»
• HTML Шорты: Андрей Ситник — О сексе, алкоголе и Logux

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

• Адаптивная вёрстка. В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?
• Что за lit-html? lit-html — конкурент react или просто другой вид Handlebars
• Progressive Web Apps: подробное введение в PWA
• Локализация и перевод в вебе
• Общие проблемы безопасности в веб-приложениях, часть 1

• Производительность:
  • Использование 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
• Логические сетки в CSS Grid Layout, статья Эрика Мейера на alistapart
• Искусство решения проблем с помощью CSS
• CSS для комманд
• Обновите свой проект с помощью CSS-селекторов и пользовательских атрибутов
• О растущей популярности Atomic CSS
• Оптимизация CSS: тонкая настройка производительной анимации с помощью DevTools
• История о том, Зак Лизерман потратил 23 минуты на существенное улучшение времени загрузки шрифта

JavaScript

• Сколько стоит JavaScript? Перевод «The Cost Of JavaScript» Эдди Османи.
• 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек
• Знакомство с JS-шаблоном года или как обрабатывать async как босс
• PlainJS — множество утилит и плагинов на ванильном JS для решения распространненых задач фронтенда, с демками и примерами
• Введение в регулярные выражения (Regex) в JavaScript
• Как работает JavaScript: сравнение с WebAssembly + почему в некоторых случаях лучше использовать его вместо JavaScript
• Почему мы отказались от использования дефолтных экспортов в Javascript и почему вы должны сделать то же самое
• Имплементация JavaScript Functor и монад

• Фреймоврки:
  • Серия публикаций из 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

Браузеры

• Улучшение отладчика и расширение WebExtensions API: что нового для разработчиков в Firefox 58
• В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов
• Хотите получать новости первым? О том, как заблокировать раздражающие push notifications в разных браузерах
• Ваш первый (Web)extension для Firefox, написанный на Kotlin
• Сравнение скорости загрузки страниц в браузере: введение в методологию

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

• Анализ степени дублирования кода на GitHub
• GitHub получил функцию командных обсуждений
• Quartz: Google собирает данные о местоположении пользователей Android
• Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план
• 11 оптических иллюзий в интерфейсах
• Где найти последние места без интернета
• Программисты на пути к очередному пузырю?
• Миф о взаимозаменямости разработчиков

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

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

Автор: alexzfort

Источник