GIANCARLOBUOMPRISCO

Articles

Long-form Articles and Guides, mostly on software

Building Widgets with Solid.js Web ComponentsBuilding Widgets withSolid.js WebComponents

Building Widgets with Solid.js Web Components

·9 min read·
SolidSolid

Solid.js is a small, familiar and super-fast library for building User Interfaces. In this post, we build a lightweight third-party widget as a Web Component using Solid and TailwindCSS.

React for Angular Developers: Introduction - Why ReactReact for AngularDevelopers: Introduction- Why React

React for Angular Developers: Introduction - Why React

·4 min read·
ReactReact

Introducing React for Angular Developers - a series for Angular developers who wish to learn React easily.

How to build production-grade Next.js projectsHow to buildproduction-grade Next.jsprojects

How to build production-grade Next.js projects

·10 min read·
NextNext

Learn the practices you should learn to build production-grade Next.js projects

Protect your Next.js API with ZodProtect your Next.jsAPI with Zod

Protect your Next.js API with Zod

·5 min read·
NextNext

Zod is a Typescript-first validation library for parsing data-structures and validate they respect your schema. In this blog post, we show how to validate a Next.js API's body payload with Zod.

Handling API errors in Next.jsHandling API errorsin Next.js

Handling API errors in Next.js

·5 min read·
NextNext

Learn how to write a Next.js middleware pipe to automatically and elegantly handle exceptions in your API functions

Clean API with Next.js Middleware PipesClean API withNext.js MiddlewarePipes

Clean API with Next.js Middleware Pipes

·7 min read·
NextNext

Next.js API routes are lean and powerful - but reusing code is not straightforward. Next API Middlewares can help us write better code and more reusable API.

Lazy Rendering React components with the Intersection Observer APILazy Rendering Reactcomponents with theIntersection ObserverAPI

Lazy Rendering React components with the Intersection Observer API

·6 min read·
ReactReact

In this post, we are going to build a React component to lazy rendering React trees to improve performance and page loading speed.

Cover Image for A React Component to connect with MetaMask

A React Component to connect with MetaMask

·6 min read·
ReactReact

In this post, we are going to build a React button able to connect with a Metamask Wallet, and read the wallet's selected address.

Automatic Dark Mode with one line of CSSAutomatic Dark Modewith one lineof CSS

Automatic Dark Mode with one line of CSS

·2 min read·
CSSCSS

Add dark mode to any webpage thanks to a single line of CSS, or with a simple Tailwind Class

Cover Image for Announcing MakerKit - A SaaS starter for Next.js and Firebase

Announcing MakerKit - A SaaS starter for Next.js and Firebase

·3 min read·
NextNext

MakerKit is a SaaS starter for Next.js, Firebase, and Tailwind CSS. It comes with authentication, organizations, payments with Stripe, a blog and documentation generators, and much more.

A Scalable Project Structure for Next.jsA Scalable ProjectStructure for Next.js

A Scalable Project Structure for Next.js

·7 min read·
NextNext

Next.js and React are not opinionated. Much is left to us to figure out - and without rules, our code can get wild pretty quickly. In this post I explain the rationale behind the way I structure my Next.js projects for small and medium-sized apps

Generating automatic banners for your BlogGenerating automaticbanners for yourBlog

Generating automatic banners for your Blog

·8 min read·
NextNext

Say no to custom banners. This post will teach you how to generate automatic banners for your articles using Next.js, SVG and Sharp

A conditional rendering Component for ReactA conditionalrendering Componentfor React

A conditional rendering Component for React

·4 min read·
ReactReact

This post shows how to create a React component to render components conditionally.

Using Firestore's SDK in Next.js's SSRUsing Firestore's SDKin Next.js's SSR

Using Firestore's SDK in Next.js's SSR

·3 min read·
NextNext

This blog post shows how you can work around a bug in React Firebase's library so that you can render components using Firestore on the server with Next.js

Deleting collections in Firebase's FirestoreDeleting collectionsin Firebase'sFirestore

Deleting collections in Firebase's Firestore

·3 min read·
FirebaseFirebase

This post shows a hidden way to delete a Firestore path with one function, and the most efficient way to delete collections.

Cover Image for A Reactive Enum with Typescript and RxJs

A Reactive Enum with Typescript and RxJs

·5 min read·
RxJsRxJs

Typescript's template literals' types allow us to generate dynamic and typed code, together. In this article, I want to show how we can build a dynamic reactive enum with TS and RxJS

Testing RxJS timers with JestTesting RxJS timerswith Jest

Testing RxJS timers with Jest

·2 min read·
RxJsRxJs

Learn how to test simple time-operators with RxJS and Jest

Cover Image for Caching RxJS streams into Web Storage

Caching RxJS streams into Web Storage

·9 min read·
RxJsRxJs

Learn how to cache RxJS streams in your browser's storage

Using Brotli with Node.jsUsing Brotli withNode.js

Using Brotli with Node.js

·2 min read·
NodeNode

This post shows how to compress large strings with Brotli using Node.js.

Streamline your code with Typescript assertionsStreamline your codewith Typescriptassertions

Streamline your code with Typescript assertions

·3 min read·
TypescriptTypescript

In this post we introduce Typescript assertions, which can make our Typescript code easier to read and more concise by not introducing conditions

Cover Image for Introduction to Firebase: An Overview

Introduction to Firebase: An Overview

·6 min read·
FirebaseFirebase

Firebase is Gooogle's PaaS, geared towards mobile apps but perfect for any kind of application. This post is a brief introduction to Firebase: what it is, what you can use it for, and how to get started

Cover Image for Benchmarking Angular 12 with Webpack 5

Benchmarking Angular 12 with Webpack 5

·2 min read·
AngularAngular

Angular 12 has been released and with it the much awaited Webpack 5 upgrade. In this post I benchmarked the bundle-size and compilation speed against the previous version

Cover Image for Principles for creating libraries with Nx and Angular

Principles for creating libraries with Nx and Angular

·5 min read·
AngularAngular

Working with Nx may be confusing. This article explains how I create Nx libraries and the principles behind my motivations

Cover Image for Where to put your Angular models?

Where to put your Angular models?

·5 min read·
AngularAngular

Organizing entities and models in your Angular app may be hard. This article explains where to put your entities and what mistakes to watch out for

Cover Image for 5 common mistakes with RxJS

5 common mistakes with RxJS

·6 min read·
RxJsRxJs

A list of common mistakes while using RxJS, and explanations on what to do instead

Cover Image for Using the Intersection Observer API with Angular

Using the Intersection Observer API with Angular

·5 min read·
AngularAngular

This article shows how to build a directive with Angular that uses the Intersection Observer API to check when an element becomes visible on the page

Cover Image for Setters vs ngOnChanges: which one is better?

Setters vs ngOnChanges: which one is better?

·3 min read·
AngularAngular

Listening to Input changes can be done in different ways. But which one should you use?

Better code with Typescript aliasesBetter code withTypescript aliases

Better code with Typescript aliases

·2 min read·
TypescriptTypescript

Cover Image for Build Typescript libraries for the browser with Nx

Build Typescript libraries for the browser with Nx

·2 min read·
TypescriptTypescript

This article shows how to set up your Webpack configuration to build Typescript libraries with Nx

Async Rendering with a single Rx OperatorAsync Rendering witha single RxOperator

Async Rendering with a single Rx Operator

·3 min read·
AngularAngular

Increase your app rendering performance with this simple Rx operator

Cover Image for 3 Ways to Render Large Lists in Angular

3 Ways to Render Large Lists in Angular

·6 min read·
AngularAngular

An overview of the available techniques to render large lists of items with Angular

Cover Image for Lazy-Loading Auxiliary Routes with Angular — Why and How

Lazy-Loading Auxiliary Routes with Angular — Why and How

·7 min read·
AngularAngular

Auxiliary Routes can be helpful for both technical and UX reasons: learn why and how to use them with Angular

Cover Image for 6 Concepts to Master to be an Angular Architect

6 Concepts to Master to be an Angular Architect

·7 min read·
AngularAngular

Six concepts every Angular developer should explore in-depth in order to master Angular and design well-architected applications.

Cover Image for An Opinionated Coding Styleguide for Angular

An Opinionated Coding Styleguide for Angular

·8 min read·
AngularAngular

An internal style guide for writing code is an important decision that any development team should define and agree on at some point, ideally early on in the project.

Cover Image for Creating and Integrating Design Systems with StencilJS

Creating and Integrating Design Systems with StencilJS

·7 min read·
StencilStencil

A step-by-step guide to building and distributing a design system built with StencilJS

Cover Image for Top Reasons Why Your Angular App Is Slow

Top Reasons Why Your Angular App Is Slow

·8 min read·
AngularAngular

Is your app slow? Learn what to watch out when debugging poor performance in your Angular apps!

Cover Image for Quantum Angular: Maximizing Performance by Removing Zone

Quantum Angular: Maximizing Performance by Removing Zone

·11 min read·
AngularAngular

Experiment: Removing Zone from Angular with minimal effort, to boost runtime performance

Cover Image for Debugging Memory Leaks in Angular

Debugging Memory Leaks in Angular

·10 min read·
AngularAngular

The situations where memory leaks are most likely to happen, and how you can deal with them using Chrome DevTools

Cover Image for RxJS Subjects in Depth

RxJS Subjects in Depth

·7 min read·
RxJsRxJs

Learn how RxJS Subjects are used in real-world applications

Cover Image for Demystifying RxJS for Angular Developers

Demystifying RxJS for Angular Developers

·11 min read·
AngularAngular

Understand Enough RxJS for your basic Angular needs

Cover Image for Debugging Javascript Like a Pro

Debugging Javascript Like a Pro

·10 min read·
JavascriptJavascript

Discover the best debugging tools Chrome has to offer

Cover Image for RxJS Patterns: Efficiency and Performance

RxJS Patterns: Efficiency and Performance

·9 min read·
RxJsRxJs

A rundown of all RxJS operators and techniques you can leverage to avoid needless computation and make your code snappier and faster

Cover Image for Soft Skills for Software Developers

Soft Skills for Software Developers

·8 min read·
🤔Thoughts

A write-down of my thoughts about being a good teammate, and what I wish every single one of my future colleagues would know

Cover Image for Building Scalable Multi-Platform Projects with Angular and Nx

Building Scalable Multi-Platform Projects with Angular and Nx

·9 min read·
AngularAngular

Building a scalable multi-platform monorepo application with Angular and Nx

Cover Image for State Management with NgRx: Abstracting State with Facades

State Management with NgRx: Abstracting State with Facades

·10 min read·
AngularAngular

Using Ngrx facades to connect your components with your state

Cover Image for Tips for Good Communication in Software Development Teams

Tips for Good Communication in Software Development Teams

·9 min read·
🤔Thoughts

Whether it is reviewing pull requests or any other form of feedback — doing it the right way, makes a world of difference

Cover Image for A simple Countdown with RxJS

A simple Countdown with RxJS

·5 min read·
RxJsRxJs

In this tutorial, we’re going to build a very simple timer application with only a few lines of code using RxJS

Cover Image for State Management with NgRx: Building Side Effects

State Management with NgRx: Building Side Effects

·6 min read·
AngularAngular

Effects are one of the most powerful features in NGRX. Let’s see some practical examples, like calling an API or streaming real-time data

Cover Image for State Management with NgRx: Architecting the Store

State Management with NgRx: Architecting the Store

·10 min read·
AngularAngular

A step-by-step guide to building and architecting the Store in NGRX

Cover Image for State Management with NgRx: Introduction

State Management with NgRx: Introduction

·9 min read·
AngularAngular

An Introduction to the NGRX platform — Concepts, Best Practices, and Tips

Cover Image for Understanding Angular Modules

Understanding Angular Modules

·8 min read·
AngularAngular

A quick but comprehensive guide for understanding the different types of Angular Modules

Cover Image for Frameworks don't magically make your code good

Frameworks don't magically make your code good

·3 min read·
🤔Thoughts

Why using the latest cool stacks doesn’t (always) mean you’re going to write better code

Cover Image for Practical RxJS and Angular

Practical RxJS and Angular

·9 min read·
AngularAngular

Practical scenarios with Angular and RxJS, going through useful patterns you may use and what to look out for

Cover Image for Building an enterprise-grade Angular project structure

Building an enterprise-grade Angular project structure

·7 min read·
AngularAngular

Cover Image for Multi-environment setup for your Angular app

Multi-environment setup for your Angular app

·5 min read·
AngularAngular

Setting up multiple environment setups with the Angular CLI

Cover Image for Enforce your team coding style with Prettier and TsLint

Enforce your team coding style with Prettier and TsLint

·5 min read·
TypescriptTypescript

Using TsLint to enforce your team coding style

Cover Image for OnPush change detection for faster Angular apps

OnPush change detection for faster Angular apps

·5 min read·
AngularAngular

Increasing your application's performance using OnPush change detection

Cover Image for Writing scalable Typescript

Writing scalable Typescript

·10 min read·
TypescriptTypescript

Let’s explore in detail how to write clean, safe, enterprise-grade Typescript code