Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | 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
