https://habr.com/ru/post/448904/

• CSS
• HTML
• JavaScript
• Разработка веб-сайтов

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

Веб-разработка    |    CSS    |    Javascript

---

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

• Что такое GraphQL
• Компания Mozilla представила платформу WebThings
• Оптимизация размера сборки webpack
• Как отправить PWA в Google Play Store
• Валидация полей ввода с помощью HTML5 и регулярных выражений
• Файл SVG, декларативно и асинхронно встроенный в HTML

• Производительность:
  • AMP Stories получили отдельный раздел в поисковой выдаче Google
  • Три способа проверки, что Rel=preconnect Resource Hints работают
  • Оптимизация производительности с помощью Resource Hints
  • В Cloudflare анонсировали AMP Real URL
  

• Анимация:
  • Как создавать и анимировать повернутые наложения
  • Креативная наглядная демонстрация Нотр-Дам со скролл-анимацией на WebGL
  

CSS

• Мистический inline-flex и что он делает
• Новости и демки CSS Subgrid
• CSS и accessibility
• CSS masonry с помощью flexbox, :nth-child() и order
• Затухание соседних элементов при наведении курсора в CSS
• Официальное представление CSSBattle — первой игры в гольф кодом на CSS
• Pixel borders: SASS mixin для добавления пикселизированной обводки элементов, с настройками размеров, цветов и расположения

JavaScript

Начата работа над переводом javascript.info на русский и украинский языки (текущая русская доступна на всем известном learn.javascript.ru). Команда активистов ищет добровольцев для помощи в переводе статей для учебника.

• JavaScript Web Workers: руководство для начинающих
• Динамический рендеринг для JS-приложений — JavaScript SEO
• Ужасный полифил globalThis в универсальном JavaScript
• 7 полезных хитростей JavaScript
• Как использовать консоль JavaScript за пределом console.log ()
• Начало работы с Javascript — правильные инструменты и ресурсы (видео-интервью с Christian Heilmann)
• Когда использовать TypeScript — подробное руководство по распространенным сценариям
• Симуляция движений мыши

• Теория:
  • Ответственный подход к JavaScript-разработке, часть 1
  • Ускоряем JavaScript-код с использованием типа данных Set
  • Анонимные функции в JavaScript
  • 12 концепций, которые прокачают ваш JavaScript
  • Основы JavaScript: осваиваем объекты
  • Как оптимизировать ваши приложения JavaScript с помощью циклов
  • JavaScript для котиков
  • ES6 and Beyond >
  • Исследование скрытого потенциала массивов в JavaScript
  

• VueJS:
  • Пишем одностраничное приложение с Flask и Vue.js
  • Как кэшировать страницы по URL с помощью Vue, Vue Router и Keep Alive
  • Оптимизация производительности приложения Vue с помощью асинхронных компонентов
  • Как построить воронку продаж на Vue.js
  • Мощь Named Transitions во Vue
  

• React:
  • ReactRussia #1 @ OK, видео с трех докладов
  • Получаем 60 кадров в секунду для анимации в React
  • Написание Redux-подобного простого middleware для React Hooks
  • useReducer vs useState в React
  • Подробное рассмотрение React Memoize хуков: useRef, useCallback и useMemo
  • От Redux к хукам: тематическое исследование
  • Новый стиль написания React Redux с хуками без селекторов
  • Шпаргалка по React хукам: решения частых проблем
  

• Angular:
  • Разбираемся в Angular Ivy: Incremental DOM и Virtual DOM
  • Правильная работа с SEO в Angular на стороне сервера
  • Быстрое погружение в то, как все складывается вместе в Angular
  • Почему и как делать ленивую загрузку библиотек в Angular
  • «Differential Loading» — новая функция в Angular CLI v8
  • PWA в Angular: SwPush и SwUpdate
  

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.