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 від Ахмада Шадіда:
- Learn CSS Positioning — інтерактивне керівництво.
- Same HTML, Different CSS — експеримент стилізації сторінки без зміни розмітки.
- Styling The Good Ol' Button Element — кращі практики щодо стилізації кнопки.
- Let's Use CSS Counters — що таке CSS Counter і з чим його їдять?
The CSS Cascade — розбираємося, як браузер дозволяє конкуруючі стилі.
CSS object-fit and object-position properties: Crop embedded images in HTML — кадрируем картинки правильно.
Статті з блогу CSS-Tricks:
- Custom Styling Form Inputs With Modern CSS Features — стилізуємо елементи форми, використовуючи сучасні можливості CSS.
- Animated Matryoshka Dolls in CSS — анимируем матрьошку.
- Weaving Through a Line Text in CSS — як ефективно кастомно перекреслити текст в CSS.
- Responsive Grid Magazine Layout in Just 20 Lines of CSS — пишемо нову розмітку журналу, використовуючи гріди.
- Fixed Headers and Jump Links? The Solution is scroll-margin-top — використовуємо властивість scroll-margin-top.
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 в своєму блозі:
- Typing objects in TypeScript ;
- TypeScript: exhaustiveness checks via exceptions ;
- Types for classes in TypeScript ;
- Alternatives to enums in TypeScript ;
- Typing Arrays in TypeScript ;
- What is a type in TypeScript? Two perspectives .
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:
- Version 9 of Angular Now Available — Project Ivy has arrived! ;
- Welcome to the Ivy League: Lazy Loading Components in Angular v9 ;
- Upgrading to Angular 9: My experience .
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.
Послухати
Веб-стандарти:
- 215. Перфоманс спочатку або потім, воркеры, офлайн, без JS, чистий CSS і брудний результат
- 216. Ручний SVG, Puppeteer 2.1 Firefox, знову Yarn 2, що таке TeamCity, компоненти Storybook
- 217. Firefox 73, Angular 9, Container Queries, Web We Want, CSS4, JS поїдає HTML DOM Reflow
- 218. Знову гріди, градієнти все краще, блокуючий CSS, веб-компоненти, все про кнопки і disabled
devschacht:
- Випуск 110: Коли починати вивчати архітектуру З
- Випуск 111: Змішуємо CJS і ESM. Гексагональна архітектура
- Випуск 112: Артем Кобзар про власну альтернативу TS і багато іншого
Фронтенд Юність (18+):
- #124 Історії з паралельної реальності
- #125 HTTP-контрабанда
- #126 Лавка для фронтендера
- #127 Мало половин. Частина перша
CSSSR:
- Argumentarium — React & Virtual DOM vs. Angular & Incremental DOM
- World Wide Work — Ірландія, в гостях Роксана Петрук
- Новини 512:
Smashing Podcast:
- Episode 8 With Stephanie Stimac And Aaron Gustafson: what's New In Microsoft Edge?
- Episode 9 With St?phanie Walter: How Can I Work With UI Frameworks?
- Episode 10 With Trine Falbe And Michael Martin Frederiksen: What Is Ethical Design?
JS Party:
- #113 Fullstack D3
- #114 Octane moves Ember to an HTML-first approach
- #115 All the things stale
- #116 Somebody somewhere is generating JS from Fortran
CodePen:
Відео конференцій
Інше
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