Дайджест свежих материалов из мира фронтенда за последнюю неделю №322 (2 — 8 июля 2018)

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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №128: React это просто JS, вложенность в CSS, система отступов, недоступная капча, забудьте про гриды в IE, верстальщик против визивига.
• Подкаст «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 будет учитывать даже мелкие улучшения скорости загрузки
  • Аудит производительности: глубокое погружение в Firefox Developer Tools
  • Улучшаем восприятие производительности: ресайз изображений по запросу
  • Оптимизация скорости сайтов с помощью Chrome DevTools. Обновленная статья в блоге разработчиков Google
  • Компоненты, зависимые от соединения. Используйте Network Information API для адаптации к разной скорости: img для 2G/3G, video для 4G
  • Уменьшение полезной загрузки JavaScript с помощью Tree Shaking
  

• Accessibility:
  • stylelint-a11y — плагин для stylelint с правилами a11y
  • Доступная карусель с использованием ARIA
  • Мощь и опасность WAI-ARIA: подробнее о распознавании голоса
  

• Эффектный веб:
  • Generative WorldCup. Эксперимент с API статистики чемпионата мира для генерации абстрактных шаблонов для каждой игры
  • Представляем GaspTools от Ueno: простой инструмент, облегчающий процесс работы над анимациями
  • 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:
  • Русскоязычный канал оф. комьюнити vuetify.js в discord
  • 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