Front-end дайджест #38: Angular 9, що таке Rome

У випуску: розбираємося як живе Front-end інженер в Slack, дивимося документальний фільм про Vue.js пробуємо Svelte, апргрейдим CSS-скіли і намагаємося підкорити JavaScript за 30 днів.

CSS і CSS in JS

Створюємо Polaroid-камеру на чистому CSS: стаття , демо .

Вивчаємо CSS Grid на сторінках Smashing Magazine:

Хороший блог про CSS від Ахмада Шадіда:

The CSS Cascade — розбираємося, як браузер дозволяє конкуруючі стилі.

CSS object-fit and object-position properties: Crop embedded images in HTML — кадрируем картинки правильно.

Статті з блогу CSS-Tricks:

JavaScript

Stop Using === Everywhere — що краще використовувати в умовах?

JavaScript Internationalization in 2020 — новинки в Internationalization API.

Turn JavaScript Objects in Maps for Predictability — як Map зможе убезпечити ваш код у порівнянні зі словником?

A Guide to Console Commands — огляд всіх можливостей об'єкта console.

Creating an Editable Webpage With Google Spreadsheets and Tabletop.js — використовуємо Google-таблиці в якості CMS.

Building an Images Gallery using PixiJS and WebGL — створюємо стильну галерею галерею на WebGL.

Aborting a fetch request — перериваємо fetch запити за допомогою AbortController.

Typescript

Аксель Раушмайер розбирається з TypeScript в своєму блозі:

7 really good reasons not to use TypeScript — варто використовувати? 7 причин з протилежного табору.

Lazy Pipelines with Generators in TypeScript .

TypeScript 3.8 Finally Fixes Private Fields .

Performance

Improving SVG Runtime Performance — як поліпшити продуктивність SVG?

How to load polyfills only when needed — як завантажувати полифилы, тільки коли вони потрібні.

Counting Calories: How We Improved the Performance and Experience of Developer UberEats.com .

React і React Native

How to Use in SVG React Native .

Mistakes Junior React Developers Make — чотири помилки новачка.

5 Awesome React.js Libraries You Should Know — спрощуємо код, застосовуючи корисні бібліотеки.

React Hooks — Passing Child Component State Up with useRef — розбираємося з хуком useRef.

React + D3.js — дивимося, як їх використовувати разом.

React Router v6 in Three Minutes — дивимося на новинки React-Router 6.

The Hooks of React Router — обозор хуків нового React-роутера.

Onboarding thousands of users with React Native — ретроспектива для компаній, що розглядають React Native.

React. 5 tricks to improve the performance of your applications — 5 кроків до поліпшення продуктивності вашого React-додатки.

Beautiful React Hooks — колекція корисних React-хуків.

Type Route — React-роутер з упором на типізацію.

Rome — експериментальний набір інструментів для компіляції, линтинга, форматування, бандлинга і тестування від інженерів Фейсбук.

Rome, a new JavaScript Toolchain — спробуємо Rome на практиці разом з стаття Джейсоном Міллером, творцем Preact.

Openchakra — візуальний редактор і генератор коду для React з використанням Chakra UI.

Vue.js

How To Build A Music Manager With Nuxt.js And Express.js — пишемо музичний плеєр.

Vue.js: The Documentary — документальний фільм про Vue.js.

6 Techniques to Write Better VueJS v-Loops for — покращуємо рендеринг циклів Vue.js.

Чому все-таки Vue.js, а не React:

Angular

Розбираємося з:

How to architect epic Angular app in less than 10 minutes! — будуємо додаток з нуля.

How To Create A Card Matching Game Using Angular And RxJS — пишемо гру, використовуючи реактивні фреймворки.

RxJS in Angular: Part I — як використовувати міць реактивних фреймворків в Angular-додатку.

6 Different Ways To Implement Micro-Frontends With Angular — принципи поділу програми на частини.

Свіжий Angular 9 і Project Ivy:

Svelte

Is It Time We Forget React and Jump on the Svelte Bandwagon? — чому варто використовувати Svelte, а не React?

Getting Acquainted With Svelte, the New Framework on the Block — розбираємося, що таке Svelte і з чим його їдять.

A new technique for making responsive, JavaScript-free charts — створюємо SVG-графіки.

Node.js

How To Build A Simple Cryptocurrency Blockchain In Node.js — створюємо свою криптовалюту з підручних засобів.

Understanding the Node.js event loop phases and how it executes the JavaScript code — як працює цикл подій Node.js.

ExpressJS vs Actix-Web. It is exactly what you think — порівняння Rust і actix-web з Node і Express для простих сценаріїв.

WebAssembly

Introducing Acrobat on the Web, Powered by WebAssembly — pdf-редактор на WebAssembly.

A Weekend with Blazor: Running C# in the Browser — виконуємо C# в браузері разом з WebAssembly.

Послухати

Веб-стандарти:

devschacht:

Фронтенд Юність (18+):

CSSSR:

Smashing Podcast:

JS Party:

CodePen:

Відео конференцій

ConFrontJS 2019

Node + JS Interactive 2019

AgentConf 2020

dotJS 2019

dotCSS 2019

WebAssembly Summit 2020

Інше

Chrome 80 — що нового?

Esbuild — швидкий бандлер, написаній на Golang.

A Day in the Life of a Frontend Product Engineer at Slack — робочий день розробника інтерфейсів в Slack.

Мовчання вентиляторів. Google Colab, Javascript і TensorflowJS — навчаємо нейромережа у браузері.

Do We Really Need a Front-end Framework? — яким повинен бути фронтенд фреймворк?

Demystifying Browsers — вихідні браузерів, хто за ними стоїть і інші секретики.

30DaysOfJavaScript — JavaScript за 30 днів.


14 березня в Києві пройде JavaScript fwdays'20 — концентрована конференція, де спікери Sebastien Chopin (автор Nuxt.js), Sara Vieira, Юрій Артюх, Вадим Макєєв, Ілля Клімов, Наталія Теплухіна, Тимур Шемседінов та інші поділяться своїм досвідом роботи над проектами в компаніях зі світовим ім'ям. Програма включає 4 потоку доповідей і, крім них, у кооперації з Zlit придумали новий альтернативний ком'юніті стейдж Code Block — про код і розмови. А на Afterparty проведемо ще кілька дискусійних сесій на нетехнічні теми з BeerJS. Знижка 15% за промокоду: frontend_digest-dou

Також 3-4 квітня в Києві пройде професійна JavaScript-конференціяJS Fest 2020 Spring ! Для читачів дайджесту промокод на знижку 10% D-DOUJS-10.

З вами був Григорій Шехет. До нових зустрічей =^.^=


? Попередній випуск: Front-end дайджест #37 .

Опубліковано: 07/03/20 @ 11:00
Розділ Блоги

Рекомендуємо:

Як за допомогою статичних аналізаторів коду на основі Roslyn підвищити якість розробки
Перші кроки в NLP: розглядаємо Python-бібліотеку NLTK в реальному завданні
Коли варто переписувати код проекту і як це донести до замовника
Ви підприємець чи науковець? Як продакт-менеджера обирати компанію відповідно до схильностей
Arti, Langkah serta Taktik Tepat dalam Main Koa/Ceki/Pei