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

Начнем новую неделю одной из самых популярных фронтендерских твиттер-шуток прошедшей:

Потому что жизненно. Удачной рабочей недели и оптимального выбора инструментов для решения ваших задач!

Медиа

• Подкаст «Веб-стандарты», Выпуск №:163 - Математика в CSS, быстродействие и оверхэд, новый видеокодек AV1, JavaScript и SEO, роботы нас не заменят.
• Подкаст «CSSSR» Новости 512 — Выпуск №40 (25.02 — 03.03)
• «Девшахта-подкаст»:https://medium.com/devschacht/devschacht-71-de5fb3487f63
• Подкаст «Фронтенд Юность (18+)» #:
• На митап! #1: запись докладов. Материалы по итогам первой встречи в онлайн-формате, организованной HTML Academy
• Видеоблог Вадима Макеева: "15. Лайв с ответами "
• Турнир: "Лучшая JS-фича 2018" (ЧАСТЬ 4 - ФИНАЛ!)

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

• Качество кода. Расшифровка доклада Ивана Ботанова с Frontend Conf, где он говорит о читаемости, нейминге, декларативности, Code style и отношениях между джунами и лидами

• Тестировать верстку? Легко

• Переработка портфолио, часть 1: анимация, микровзаимодействия и SVG

• Генераторы статических сайтов: руководство для начинающих

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

  • Google: скорость загрузки на мобильных должна быть постоянным приоритетом
  • Для иллюзии быстрой загрузки страниц: правила создания скелетного экрана на сайтах и в приложениях
  • A Bit of Performance. Новая статья Романа Комарова о деталях оптимизации его сайта - предзагрузка ссылок, шрифтов, прогрессивная навигация и тому подобное
  • Serve Responsive Images

• Accessibility:

  • Когда кнопка - не кнопка?
  • Доступность не является «проблемой React»
  • Web Accessibility Guide - Курируемая подборка советов, трюков и рекомендаций по веб-доступности.
  • Практики обеспечения доступности для компонентов с выбором даты
  • Анализ доступности домашних страниц 1.000.000 сайтов
  • Использование искусственного интеллекта для создания альтернативного текста на изображениях

• Анимация:

  • Эффекты фильтрации SVG. Часть 7. Продвижение вперед
  • SVG Filter Effects: двигаемся дальше
  • Text Trail Effect

CSS

• Как работает @supports
• Адаптивный дизайн и пользовательские свойства CSS: определение переменных и брейкпоинтов
• Ментальная модель CSS. Новая статья PPK, в которой он пытается объяснить философию CSS разработчикам Javascript
• Рабочая группа CSS согласилась добавить множество математических функций, среди которых acos(), asin(), atan(), hypot(), sqrt() и многие другие
• Breaking Boxes With CSS Fragmentation. Свежая статья Rachel Andrew о новой спецификации CSS
• Воссоздание градиентного эффекта Facebook Messenger с помощью CSS
• Детальный обзор принципов работы CSS селекторов + шпаргалка
• Менее известные CSS свойства в GIF
• 8 маленьких видео о редакторе Shape Path Editor в Firefox
• Победят ли пользовательские свойства CSS циклы Sass?
• Смотри-ка, никаких медиа-запросов! Адаптивные макеты с использованием CSS Grid

JavaScript

• Wolfensteiny 3D — реверс-инжиниринг 251 байтов JavaScript

• Google запускает серию видео на тему SEO для JavaScript

• FunES#9: загадка. Фокусы с JavaScript

• Релизы: Apollo Client 2.5, Ember 3.8, GSAP 2.1

• Как писать простые современные JavaScript-приложения с использованием Webpack и прогрессивных веб-технологий

• Понимание проблемы производительности с “полиморфическими” JSON данными

• Теория:

  • 5 советов как лучше писать условные конструкции в JavaScript
  • 12 концепций JavaScript, о которых нужно знать
  • Полное руководство по циклам в JavaScript
  • Какая наиболее длинная последовательность ключевых слов в Javascript?
  • Полное руководство по коллбекам

• React:

  • Эффективное создание компонентов с помощью styled system
  • Мы перешли на Next.js, чтобы обрабатывать нашу домашнюю страницу в 7,5 раз быстрее
  • Повышение производительности в функциональных компонентах React с помощью React.memo ()
  • Как «золотое правило» компонентов React может помочь вам писать лучший код
  • Написание тестов для React-приложений с использованием Jest и Enzyme
  • Объяснение Redux-а за 1 минуту
  • 8 причин использовать styled-components

• VueJS:

  • Повышаем производительность разработки на примере Vue — часть 2
  • Оптимизация производительности приложения Vue.js, часть 1: Введение в оптимизацию производительности и ленивую загрузку
  • Sliding In And Out Of Vue.js. Подробная статья об одном из преимуществ Vue - легкой прогрессивной интеграции с другим JS
  • Создание пользовательских директив в Vue.js
  • Еще один пример абстрактного компонента в Vue.js

• Angular:

  • MVC в мире Angular
  • Анонс Angular Loadable (ngx-loadable ~ 2.2kB)
  • Как передавать файлы и данные между клиентом на Angular и бекендом на Node.js

• Libs & Plugins:

  • FrenchKiss.js - сверхбыстрая и легкая библиотека для интернационализации, работающая как в браузере, так и в среде NodeJS
  • terser - JavaScript парсер и mangler/compressor инструментарий для ES6 +.
  • cnbuilder - Yet another classname string builder
  • Zero Server: zero configuration web framework
  • npmf: быстро подтягивает информацию об npm пакете прямо в терминал

Браузеры

• 0Day-уязвимость в Chrome используется для кражи данных
• Сторожевой лис. Как настроить Firefox для повышения приватности
• В Firefox 67 появится страница about:compat и выгрузка вкладок при нехватке памяти
• Google ускоряет Chrome с новой функцией кэширования открытых страниц
• В Firefox появится режим картинка в картинке и переработанный менеджер дополнений
• Хром больше не нужен