Front-end digest #80: основи WebGL2, стратегії тестування для React та Redux, npm@6

Новини/Релізи:

• npm@6 та новий npm CLI

• sonarwhal v1

Статті

• Замінюємо GIF на відео

• Більш доступна розмітка за допомогою display: contents

• Анімуємо <progress>

• Багаторазовий, підтримуваний та модульний CSS

• Управління рівнями заголовків в дизайн системах

• Flexbox фолбеки для популярних UI рішень, які використовують CSS Grid

• Використовуємо псевдоелементи з CSS Grid

• Гід по основах WebGL2

• Огляд CSS Viewport Units

• 5 підказок для надшвидкого CSS

• 7 трюків для покращення продуктивності CSS

• Використовуємо атрибут for для елемента output в HTML5

<form id="myForm">
  <input type="number" id="num1" value="0">
  <input type="number" id="num2" value="0">
  <output id="op" for="num1 num2"></output>
</form>

• Про глобальний HTML5 атрибут hidden

Корисності

• webpack 4 configurator – сервіс для створення персоналізованого та оптимізованого webpack.config.js

Javascript Jedi:

• Як працює JavaScript: CSS та JS анімації + як оптимізувати їх продуктивність

• Пишемо WebAssembly вручну

• Базовий гід по Webpack 4 та бандлінгу модулів

• Дайте Parcel шанс, він вам сподобається

• Функціональне програмування за допомогою JavaScript Object Arrays

• Демістифікація ключового слова new в JS

Angular:

• Аутентифікація в Angular за допомогою NGRX

• Фічі Angular 6

• Приховані можливості Angular Material CDK

• Запуск AngularJS 1.6 в Angular 5 (пліч-о-пліч)

• .NET Core 2.0, Angular 4 and MySQL. Надсилання PUT запиту на сервер

• Створюємо застосунок для пошуку бібліотек на Angular: основи

React:

• Redux vs Mobx vs RxJS 🇺🇦

• Стратегії тестування для React та Redux

• Мігруємо на новий React Context API

• 5 накращих архітектурних практик React

• Розглядаємо React setState

• Gooact: React в 160 рядках JavaScript коду

• Як використовувати Figma веб API для перетворення дизайну в код React

• Вивчаємо компоненти вищого порядку (Higher-Order Components) в React, створюючи екран завантаження

Vue:

• Як створити плагін для vue-cli 3

• Питання зі співбесіди по Vue.js

• VuePress vs Nuxt.js

• Vue.js застосунок з використанням Axios зі Vuex

• SVG та Vue.js

• Інтегруємо Websockets в застосунок з Socket.io та Vuex, ч. 4

• Створення адаптивних Vue компонентів за допомогою ResizeObserver

• 

• Створення міні-клона Clone за допомогою Vue

• 5 чудових шаблонів для VueJS проектів

• Завантаження файлів з Vue за допомогою vue-dropzone

• Приклад Vue Firebase CRUD

Відео:

• Коротка історія JavaScript, доповідь Брендана Ейча (творець JavaScript)

• CSSConf Australia: як використовувати CSS Grid в реальному світі – Brenda Storer

5 сайтів, що надихають:

• The Greatest Showman

• Squarespace Timeline

• DTO Films

• Toggl

• Class for creating myself