Дайджест свіжих матеріалів зі світу фронтенда за останній тиждень №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 реактивним використовуючи хуки
Читайте також  Користувачі Facebook здають свої акаунти в оренду, отримуючи гроші і безкоштовні ноутбуки

 

  • 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-м

Читайте також  Генератор коду для Laravel — на введення RAML, на висновок JSON-API

Просимо вибачення за можливі помилки або непрацюючі/повторювані посилання. Якщо ви помітили проблему — напишіть будь-ласка в лічку, ми намагаємося оперативно їх виправляти.
Дайджест за минулий тиждень.
Матеріал підготували dersmoll і alekskorovin.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

Вам також сподобається...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *