Дайджест свіжих матеріалів зі світу фронтенда за останній тиждень №339 (12 — 18 листопада 2018)
Пропонуємо вашій увазі підбірку з посиланнями на нові матеріали з області фронтенда і біля нього.
Медіа | Веб-розробка | CSS | Javascript | Браузери | Цікаве
Медіа
• Подкаст «Frontend Weekend» #79 – Олег Поляків про заснування CodeDojo і про те, як це стало основним місцем роботи
• Подкаст «П’ятихвилинка React» #49 — bem-react-core
• «Девшахта — подкаст»: 57: Як у компанії Wrike використовують мову Dart
• Подкаст «Фронтенд Юність (18+)» #73 Три корочки Едді Османі
• Подкаст «CSSSR»: Новини 512 — Випуск №29 (12.11 — 18.11)
• Відеоблог Вадима Макєєва 9. Меню меню, гріди або Бутстрапа, доцільність зручності
• KharkivJS #9 2018, 32 відео
• FrontTalks 2018, 16 відео
• Chrome Dev Summit 2018 — All Sessions
Веб-розробка
• До побачення, Electron. Здрастуйте, настільні PWA
• HTTP поверх протоколу QUIC буде стандартизований як HTTP/3
• Початок роботи з WebAssembly, використовуючи тільки 14 рядків JavaScript
• Web.dev by Google — новий ресурс з детальною структурованою інформацією про сучасних техніках веб-розробки
• Потужність веб-компонентів
• 5 причин, по яких статичні сайти рулять
• Основні моменти, винесені з Chrome Dev Summit 2018
• Віртуальний DOM — повільний. Зустрічайте мемоизированный DOM
- Продуктивність:
• Google провів редизайн інструменту PageSpeed Insights
• Google випустила додаток Squoosh для оптимізації зображень
• Адді Османі про браузери, JS і його оптимізацію
• Вимір, оптимізація та моніторинг. Addy Osmani про те, як правильно інвестувати свої сили в продуктивність
• Огляд доповідей конференції performance.now(), що пройшла нещодавно в Амстердамі
• Инлайнить або кешувати? Обидва варіанти, будь ласка!
• Ретроспектива роботи над продуктивністю в Mapbox Studio (великої програми на React — Redux з рендером в WebGL canvas з Mapbox GL)
- Tools:
• Розсилай і володарюй: інструменти для створення і тестування розсилки
• Розробка фронтенда на iPad Pro (2018)
- Accessibility:
• Важливість рівнів заголовків для допоміжних технологій
• Чому використання значень `tabindex` вище ніж “0” — це погано
• Focus-стилі, специфічні тільки для клавіатури
- Анімація:
• Page Flip Layout
• flashlight ефект для будинку з привидами
• Креативний концепт сторінки розробника (digital design)
CSS
• Приклади використання флексбоксов
• “C” в CSS: The Cascade
• Як позбутися від невикористаного CSS для полегшення CSS файлів
• Різниця між currentColor і Custom Properties
• Braces to Pixels. Докладна стаття на alistapart про те, як CSS код перетворюється в пікселі на екрані
• Плавне масштабування тексту в JavaScript & CSS
• Хардкорний CSS calc( )
• Невелике відео про те, як команда basecamp.com використовує CSS Grid на продакшені
JavaScript
• Google профінансує поліпшення фреймворків JavaScript
• Граємо в Mortal Kombat з TensorFlow.js: перенесення навчання і доповнення даних
• «TypeScript Definitive Guide» — безкоштовна онлайн-книга з Typescript
• Обробка помилок в JavaScript: повне керівництво
• Ланцюжка промисов мертві. Хай живе async/await
• Створення своєї власної інтерактивної JavaScript пісочниці
• Чому Facebook api починається з циклу for
• Після двох років використання TypeScript – чи варто воно того?
- NodeJS:
• Node.js sleep, usleep, msleep. Як загальмувати потік і зробити паузу
• Як використовувати NodeJS без фреймворків та зовнішніх бібліотек
• Оффлайн документація по Node.js (PDF)
- Теорія:
• Контекст виконання і стек викликів в JavaScript
• Можливості JavaScript, про яких я не знав
• Керівництво по JavaScript: частина 1: перша програма, особливості мови, стандарти, частина 2: стиль коду і структура програм, частина 3: змінні, типи даних, вирази, об’єкти
• Цікавий JavaScript: Без фігурних дужок
• Контекст виконання і стек викликів — візуальна ілюстрація у вигляді розрізаного торта
- React:
• Введення в React Hooks
• Чому React Hooks, і як ви до цього дійшли?
• Концепти, які ви повинні знати React.js (після вивчення основ)
• Огляд Render Props в React
• Створення React To-Do App з допомогою React Hooks (No Class Components)
• Як використовувати React.lazy і Suspense для ледачої завантаження компонентів
• Hooked on hooks: як використовувати React’s useReducer()
• Робимо React реактивним використовуючи хуки
- VueJS:
• Як налаштувати установку змінних оточення Nuxt.js у рантайме, або Як зробити все не як всі і не пошкодувати
• Превью Vue.js 3.0 від Evan You
• Створення вашого першого Vue.js PWA проекту
• Як ми використовуємо Redux & Redux-Вами з Vue (v3.0 journal)
• Offline-First Vue програми з Hoodie & Workbox
• Проектуємо покращений UX з Vue.js переходами і анімаціями
• Візуальне пояснення Vuex
- Angular:
• Оптимізація обробки подій в Angular
• Angular — всі доповіді з AngularConnect за 2015-2018
• Початок роботи з Angular App і Angular CLI за кілька хвилин
- Libs & Plugins:
• TensorSpace.js — фреймворк для 3D візуалізації нейромереж, побудова інтерактивної і інтуїтивної моделі в браузерах, підтримка попередньо підготовлених моделей глибокого навчання від TensorFlow, Keras, TensorFlow.js
• TNG-Hooks — надає натхненні Реактом «хуки» типу useState(..) для автономних функцій
• router: простий JS роутер для рішення однієї задачі без фреймворків React, Angular або Vue
Браузери
• Firefox почне повідомляти про відвідуванні зламаних сайтів, а також зміни цін
• В нічні збірки Firefox додана підтримка Wayland
• Mozilla тестує в Firefox дві нові можливості: Price Wise та Email Tabs
• У Chrome розвивається API для створення повноцінних додатків
Цікаве
• Сім нових атак на механізм спекулятивного виконання в CPU
• Розкол серед розкольників: що сталося з четвертої по капіталізації криптовалютой Bitcoin Cash
• Погляд зсередини: про продуктову культуру Facebook
• Google відкриє для всіх домен верхнього рівня .dev
• Microsoft вирощує огірки краще, ніж Tencent і Intel. Заснована Біллом Гейтсом компанія, схоже, нарешті знайшла своє покликання
• Статистика Octoverse: топові мови програмування в 2018-м
Просимо вибачення за можливі помилки або непрацюючі/повторювані посилання. Якщо ви помітили проблему — напишіть будь-ласка в лічку, ми намагаємося оперативно їх виправляти.
Дайджест за минулий тиждень.
Матеріал підготували dersmoll і alekskorovin.