Фронтенд-дайджест №350 (28 января — 3 февраля 2019)

Основная тема прошедшей недели - продолжающиеся споры и дискуссии фронтендеров JS и CSS фракций на тему, кто из них более достоин называться фронтендером в 2019 году.

"Все опять обозлились на CSS. В общей сложности всё сводится к тому, что CSS достаточно прост, но одновременно с этим и достаточно сложен. До такой степени, что, во избежание волнений общественности, проще завернуть его в JavaScript." (с)

Медиа

• Подкаст «Веб-стандарты» Выпуск №158: Сайт «Веб-стандартов», события и сообщества, новинки Safari TP, свежие статьи, снипеты и редакторы кода, кому нужен VR, фонд GitNation
• «FrontSpot Show» #1. Дэн Абрамов - самозванец? Flow не float? И кто же он — король ништяков?
• Подкаст «RadioJS» Выпуск 55: Node.js на бэкенде – настоящий бэкенд?
• Подкаст «devschacht»: 68: Неудобные вопросы к GraphQL
• Подкаст «Фронтенд Юность (18+)» #82 Как lodash изменил javascript
• Турнир: "Лучшая веб-фича 2018" (ЧАСТЬ 1)

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

• Как писать хороший и понятный код

• HTML, CSS и исчезающие точки входа в индустрию

• Руководство по GraphQL для начинающих

• CSS и JS в состоянии войны: как это остановить

• HTML есть и всегда был целью компиляции - можем ли мы что-нибудь сделать с этим?

• Магазин Google Play теперь открыт для Progressive Web Apps 😱

• “Бэкэндификация” фронтенд-разработки

• Обзор наиболее интересных предложений для веб-платформы, связанных с веб-компонентами

• Производительность:

  • Оптимизация скорости страницы: метрики, инструменты и способы улучшения
  • Улучшение производительности веб-шрифтов на примерах
  • “Радость оптимизации изображений ” доклад Una Kravets

• Инструменты:

  • tris-webpack-boilerplate - webpack-бойлерплейт для создания для статических сайтов, в котором есть все необходимые современные инструменты и встроенные средства оптимизации.
  • 11 JavaScript расширений для Visual Studio Code
  • Что нового в DevTools (Chrome 73)
  • Новое в Firefox DevTools 65

• Accessibility:

  • Использование искусственного интеллекта для создания альтернативного текста на изображениях
  • Инструменты и стратегии для разработки доступных веб-приложений
  • Как ты используешь элемент figure?

• Анимация:

  • Деконструкция Taotajima.jp WebGL
  • Создание волновых анимаций на Three.js
  • Кастомные эффекты для курсора

CSS

• Как на самом деле работает position: sticky в CSS

• Взгляд на CSS-переносы в 2019 году

• Множество способов изменить SVG-заливку при наведении (и когда их использовать)

• CSS-in-JS и статический рендеринг

• CSSans Pro - новый цветной креативный шрифт

• Codepen demo:

  • CSS WordArt
  • CSS Grid: Excel Spreadsheet
  • CSS Animation: Marauder's Map

JavaScript

• Цена композиции в Javascript-мире

• EcmaScript 10 — JavaScript в этом году

• Почему в основе каждого нового веб-приложения в PayPal лежит TypeScript?

• Что нового в JavaScript 2019

• Будущий JavaScript: чего еще не хватает?

• Статическое vs Юнит vs Интеграционное vs E2E тестирование для фронтенд-приложений

• React vs Angular: подробное сравнение

• Еще три способа визуализации состояния JavaScript

• Новые релизы: TypeScript 3.3, Babel 7.3, Jest 24

• Теория:

  • JavaScript: Публичные и приватные поля классов
  • Как освоить синтаксис async/await: реальный пример
  • Как работать с async/await в циклах JavaScript
  • Краткая история асинхронных возможностей Javascript
  • Погружаемся еще глубже в объекты JavaScripts. Пристальный взгляд на дескрипторы объектов JavaScript

• VueJS:

  • 7 проблем, которые вы можете избежать, используя Nuxt.js для вашего следующего приложения на Vue
  • Оптимизация производительности приложения Vue.js: часть 1 - Введение в оптимизацию производительности и отложенную загрузку.
  • Освоение Computed Properties в VueJS
  • Как создать простой мониторинг социальных сетей на NodeJS, GraphQL и Vue
  • Использование Vue.js для создания интерактивной панели погоды с API
  • Что Vue 3.0 означает для веб-разработки?

• React:

  • (Новые) методы жизненного цикла React на простом доступном языке
  • React as a UI Runtime, свежий пост в блоге Дена Абрамова
  • Создание прогрессивных веб-приложений с помощью React. Часть 1
  • addimated - interruptible декларативная библиотека анимации для React.
  • React Custom Scroll 4.0 - маленький кастомизируемый компонент для создания кастомного скролла
  • 5 способов анимировать ReactJs-приложения в 2019 году.
  • Почему Gatsby такой быстрый

• Angular:

  • Знакомство с NG-VDOM: новый способ написания приложений на Angular
  • Создайте готовый к продакшену PWA с Angular и Firebase
  • Angular 7|6 Tutorial: Создание и отправка форм
  • Angular DI: знакомство с Ivy NodeInjector

• Libs & Plugins:

  • flexsearch - Библиотека полнотекстового поиска по тексту в браузерах и Node.js
  • readability.js - отдельная версия библиотеки, используемой для режима читателя в Firefox
  • webaudio-synth: Web Audio API полифонический синтезатор

Браузеры

• В 2020 году Microsoft прекратит поддержку Internet Explorer 10
• Релиз Firefox 65, а также детали для веб-разработчиков в блоге Марата Таналина
• WebRender для видеокарт AMD/Intel и защита от MITM-атак в Firefox
• Mozilla представила ещё один мобильный браузер
• Пользователи пожаловались на проблемы с сертификатами после установки Firefox 65
• Что станет с блокировщиками рекламы после обновления API Chromium: мнения «Яндекс.Браузера», AdGuard и Adblock Plus