Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• 
Подкаст «Frontend Weekend» #60 – Дмитрий Рожков о создании Senior Software Vlogger, зимовке в Таиланде и жизни в Гамбурге
• 
Подкаст «devschacht»: Ночной фронтенд #40 — ГПХ, депрессии, WSD и Patreon
• 
Подкаст «Фронтенд Юность (18+)» #55 Хочешь быть крутым React-разработчиком — слушай сюда!
• 
Подкаст «CSSSR»: Новости 512 — Выпуск №13 (02.07 — 08.07)
Веб-разработка
• 
Веб-кэширование на примере покупки молока в магазине
• Мобильный сайт или адаптивная вёрстка: что лучше с точки зрения SEO
• Как и зачем тестировать верстку
• 
Publii — новая статическая CMS с GUI для создания безопасных, быстрых и стильных сайтов
• 
Интернет сложен (Но он не должен быть таким). Руководство по веб-разработке для полных новичков
- Производительность:
• Google: поисковый алгоритм Speed Update будет запущен в июле 2018 года, Google Speed Update будет учитывать даже мелкие улучшения скорости загрузки
•
Аудит производительности: A глубокое погружение в Firefox Developer Tools
•
Улучшаем восприятие производительности: ресайз изображений по запросу
•
Оптимизация скорости сайтов с помощью Chrome DevTools. Обновленная статья в блоге разработчиков Google
•
Компоненты, зависимые от соединения. Используйте Network Information API для адаптации к разной скорости: img для, video для 4G
•
Уменьшение полезной загрузки JavaScript с помощью Tree Shaking
- Accessibility:
•
stylelint-a11y — плагин для stylelint с правилами a11y
•
Доступная карусель с использованием ARIA
•
Мощь и опасность WAI-ARIA: подробнее о распознавании голоса
- Эффектный веб:
•
Generative WorldCup. Эксперимент с API статистики чемпионата мира для генерации абстрактных шаблонов для каждой игры
•
Представляем GaspTools от Ueno: a simple tool to make your animations development workflow easier.
•
div, который по-разному выглядит во всех браузерах
•
Призрачная мышь, следующая за курсором
CSS
• 
GitHub превращается… превращается GitHub… в элегантный Windows 95
• Эффективная работа над стандартами — часть 1: оперативная обстановка, часть 2: трудный путь к компромиссу
• 
Руководство по интеграции и стилизации иконочных систем — SVG спрайтов, SVG символов и иконочных шрифтов
• 
CSS трюки для совершения революции в ваших макетах
• 
Размещение текста в контейнере
• 
Clearfix: урок в эволюции веб-разработки
• 
Как работает CSS: создание слоев с помощью z-index
- CSS Grid:
•
CSS Grid Level 2: и пришел Subgrid
•
CSS Grid в IE: разоблачение основных заблуждений об IE Grid
•
CSS Grid в IE: CSS Grid и новый Autoprefixer
•
CSS Grid в IE: Эмуляция Auto-Placement Grid с помощью Gaps
JavaScript
• 
Основы JavaScript для начинающих разработчиков
• 
Разработка собственного фреймворка и профессиональный рост JS-программиста
• Когда (и почему) стоит использовать стрелочные функции ES6
• 15 методов HTML элементов о которых вы, возможно, никогда не слышали
• 
Почему GraphQL: преимущества, недостатки и альтернативы
• 
Переменные JavaScript var, let и const, объясненные в истории
React:
•
16 инструментов React, которые пригодятся разработчикам интерфейсов
•
Самые распространенные ошибки в вашем React коде, которые вы (возможно) совершаете
• Простое (не менее 99% ES2015) обучающее руководство по React.
•
React — это просто JavaScript
•
Самые основы React Без NPM. Без Webpack. Без Redux. Изучите основы React, создавая анимированный фрактал прямо в браузерной песочнице
•
5 популярных практик, которые вы можете перестать использовать в React
•
Что такое Redux: руководство дизайнера
•
react-scrollbar-custom — лучший компонент React для создания кастомного скроллбара
VueJS:
• Vue Test Utils и Jest: как писать простые модульные тесты для фронтенда
•
Как использовать роутинг во Vue.js для улучшения пользовательского опыта
•
Создание мобильного приложения с помощью Capacitor и Vue.js
•
The Vue Handbook: подробное введение во Vue.js
•
Vue Authentication и Route Handling с помощью Vue-router
•
Лучшие шаблоны для админок на Vue.js в 2018
Angular:
•
Angular Developer Roadmap. Проект, цель которого — собрать самые основные / важные концепты, которые должен выучить каждый желающий стать разработчиком Angular
•
Веб-компоненты в Angular и AngularJS
•
Решения для динамических компонентов в Angular
- Libs & Plugins:
•
shepherd — библиотека для создания визуального помощника по элементам сайта
•
Rete.js — JavaScript фреймворк для визуального программирования
•
itty.bitty — инструмент для создания ссылок, содержащих маленькие сайты
Браузеры
• Скриншоты: обновлённое основное меню Microsoft Edge
• Google и Mozilla удалили из каталогов аддон для браузеров Stylish, который шпионил за пользователями
• Сравнение производительности различных реализаций WebAssembly
• Как использовать Microsoft Edge для чтения электронных книг
• Браузерную защиту от уязвимости Spectre удалось обойти
Занимательное
• Блокчейн — модное словечко или что-то серьёзное?
• Почему многим хочется стать менеджером и это не всегда хорошая идея
• В браузерном дополнении Stylish выявлен код для отправки истории посещений
• Перерождение виртуальности и дополненной реальности
• Июльский рейтинг языков программирования TIOBE: популярность TypeScript продолжает расти
• 
Визуальное введение в машинное обучение
PS: на следующей неделе дайджеста не будет, отпуск и все такое.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort
