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 images embedded in HTML — кадрируем картинки правильно.
Статьи из блога CSS-Tricks:
- Custom Styling Form Inputs With Modern CSS Features — стилизуем элементы формы, используя современные возможности CSS.
- Animated Matryoshka Dolls in CSS — анимируем матрешку.
- Weaving a Line Through 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 Developer Experience of UberEats.com.
React и React Native
How to Use SVG in 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
Почему все-таки 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 Martin Michael Frederiksen: What Is Ethical Design?
JS Party:
- #113 Fullstack D3
- #114 Octane moves Ember to an HTML-first approach
- #115 All the stale things
- #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
Также
С вами был Григорий Шехет. До новых встреч =^.^=
← Предыдущий выпуск: Front-end дайджест #37.
