Дайджест свежих материалов из мира фронтенда за последнюю неделю №293 (11 — 17 декабря 2017)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• 
Подкаст «Frontend Weekend» #32 — Андрей Смирнов о том, как появился Frontend Weekend и как из разработчика стать руководителем
• Подкаст «Пятиминутка React» #38 — React + Typescript = ? В гостях человек, который вместо записи RadioJS гуляет по чужим подкастам
• Подкаст «devschacht»: Ночной фронтенд #15 — HolyJS день 2, Rust захватывает мир, новости V8
• Подкаст «Фронтенд Юность (18+)» #29 Vue.js для нищебродов, Метод Кнута и Пряника
• Подкаст «Drinkcast», #21 — «RN vs PWA»
• 
«ALL YOUR HTML» #27: «Новогодняя анимация с Лидой»
• 29 видео с FrontendConf 2017
• 
Подкаст syntax: Веб-разработка в 2017 && взгляд в 2018
Веб-разработка
- Новости:
• HTML 5.2 получил статус рекомендованного стандарта, HTML 5.3 на подходе
• Новая политика WHATWG: шаг к единому стандарту HTML?
• Руководство по поисковой оптимизации для начинающих — новое, обновленное руководство по SEO от Google
• Polymer 2 и Googlebot. Работаете с клиентскими веб-приложениями и веб-компонентами? Тогда вам следует позаботиться об индексации вашего сайта ботами Google
• Как использовать язык шаблонизации в разработке HTML писем (EJS и шаблонные строки ES6)
• Работа с HTML5 Canvas с использованием Konva, обучающая серия из пяти статей
- AMP/PWA:
•
Google AMP: все, что вам нужно знать
•
Делаем сайт более приложение-подобным
•Google Maps тихо запустили PWA под названием Google Maps Go
- Производительность:
•О метриках рендеринга страниц в блоге speedcurve. Ребята предлагают добавить еще одну — Hero Rendering Times для самого большого IMG, H1, и BG img во вьюпорте
•Игорь Алексеенко из HTML Academy подробно рассказывает об оптимизации производительности фронтенда, погружаясь в нюансы работы с памятью и её утечками
•О том, как и зачем заботиться о производительности — доклад Артема Денисовапоследнего KharkivJS
- Инструменты:
•
Parcel — очень быстрый бандлер, не требующий настройки
•npm vs Yarn — какой пакетный менеджер лучше использовать?
•microbundle — упаковщик с нулём конфигураций для небольших модулей
•Как на самом деле работают браузеры? 5 видео с внутренними деталями
- Accessibility:
•WCAG 2.1 и кодовое имя Silver (AG): что будет в обновленном руководстве по доступности
•Доступность в контексте семантичной HTML разметки
•Инструменты для тестирования доступности
•SVG, иконочные шрифты и доступность на примере реального сайта
•Пишем автоматизированные тесты для доступности
•Переход от страха к мотивации при разговоре о законе о цифровой доступности
•Как использовать подчеркивание текста для улучшения UX
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #66
•Игровая графика с помощью WebGL/three.js и Lazy-Loading для 3D моделей
•3D Particle Explorations — клевый набор демок, который исследует анимацию частиц в 3D-пространстве с помощью three.js
•shuffle — трехмерная реализация бегущих строк текста
•NEBULAAN — впечатляющая реализация объемной задымленной звезды
CSS
• Изучение CSS Разметки
• Делаем адаптивный HTML, добавляя одну строку в CSS
• 11 вещей, которые я выучил, читая спецификацию CSS Grid
• Заметки по поводу вертикального написания и CSS гриды
• Понимание CSS Layout и блочного контекста форматирования
• Сохранияем видимость родительского элемента, когда дочерний в фокусе
• ABEM. Еще одна адаптация БЭМ
• Мое путешествие в мир изображений на чистом CSS
• Specificity Visualizer — визуализатор специфичности селекторов в CSS, особенно полезный для рефакторинга больших файлов стилей
• Контроль отображения шрифтов с помощью font-display
JavaScript
• Опубликованы результаты опроса по использованию javascript-технологий «The state of JavaScript 2017»
• 30 seconds of code — курируемая коллекция полезных JS сниппетов, которые мы сможете понять за 30 секунд
• Уместен ли все еще jQuery?
• Как присоединяться к API с помощью JavaScript
• Представление Nexus.js: мультипотоковая среда выполнения JavaScript
• JavaScript — Map vs. ForEach
- ES2015+:
•Почему [не] надо использовать async/await
•Запускаем тесты Mocha в качестве нативных ES6 модулей в браузере
•Текущее состояние имплементации и планирования для ESModules
VueJS:
•11 библиотек компонентов для Vue.js, которые стоит иметь в виду в 2018 м
•Vue.js инспектор для мобильных устройств
React:
•React Starter Kit — бесплатный видеокурс из пяти частей, с интерактивными примерами кода
•Чем React отличается от Vue? How Is React Different from Vue?
•Разбираемся в понимании Redux с помощью создания собственного стора
•Вопрос на собеседовании по React: что ренерится в браузере, компонент или элемент?
Angular:
• Создание PWA с помощью Angular 5: Часть 1: начало работы с фреймворком, создание приложения, хостинг на github-pages., Часть 2: прогрессификация приложений
• Упрощение импортов scss/less/styl в Angular
•Что нового в Angular CLI 1.6?
•NGRX Store: Actions versus Action Creators
•Альтернатива Protractor для проектов на Angular
Занимательное
• В США отменили принцип сетевого нейтралитета
• Много новостей о сетевом нейтралитете. Что это такое?
• Битва за сетевой нейтралитет: история вопроса
• Некоторым пользователям Firefox навязано непонятное дополнение Looking Glass
• Ученые: ИИ превратился в черный ящик, и с этим нужно что-то делать
• 9 дизайнерских трендов, которые определят 2018 год
• В даркнете нашли базу данных, содержащую более 1 400 000 000 учетных данных
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
