Building & Documenting UI Components

Storybook logo and article’s title: Angular & Storybook
Storybook logo and article’s title: Angular & Storybook

"Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient."

Storybook brings a lot of nice features out-of-the-box to aid us when working on UI components. It provides a sandbox to build them in isolation so we are able to develop them completely out of context. Therefore, we can test the multiple use cases in which it can be used and the different scenarios on how it can behave; making it easier to catch tricky edge cases.

Moreover, it also provides features that facilitates…

How to use it in your application step-by-step

Angular + Sentry: Error Monitoring with Releases & Source Maps
Angular + Sentry: Error Monitoring with Releases & Source Maps

When building web applications, we expect them to be used in a great range of devices and browsers by our users. In our industry, where things have to move fast, no developer is safe from introducing bugs to a project, no matter how many tests you write or how much of an amazing QA you have.

Another critical factor is that, especially when working with B2C applications, most users are unlikely to report errors. …

what, why and how

Image Source: Visual Regression Testing Tools

“When we talk about visual regression testing, we are concerned with preventing unintentional changes to our application’s visuals. If we change the styles of a Button component, how can we be sure that we haven’t messed up the styles of our ButtonGroup?”

Regression testing, in general, is validating that the changes we introduce to our source code do not have an unexpected impact on our system. With visual regression tests we are aiming for the same goal, but we are more concerned about the interface that is being presented to our final user rather than how functional our system is.

with useful examples!

“A pipe is a way to write display-value transformations that you can declare in your HTML. It takes in data as input and transforms it to a desired output”.

Angular Pipes definition is pretty straight forward and realising that they can be very useful as well. Angular comes with some helpful built-in pipes that are ready for use and also allows us to create our own custom pipes; and we are going to dive into it here.

Built-in Pipes

Angular comes with a set of pipes, which are available for use in any template. We are now going to see some of…

a guided introduction

CQRS Pattern & NestJS (Node.js) text with JS Logo
CQRS Pattern & NestJS (Node.js) text with JS Logo

When designing an application following traditional architecture oftentimes the same data model is used for both reading and writing operations. Even though it might work well on small applications or those which rely on simple logic, when we have a more complex environment we end up requiring more sophisticated solutions.

In this article, we are going to explore the CQRS design pattern fundamentals, its benefits and disadvantages. Also, we are going to dive into how we can implement such pattern by using the NestJS Framwork for Node.js.

obs: If you have not checked the NestJS Framework yet I would totally…

with usage examples

In a real world application its really common to work with big amounts of data and to present the user with the possibility to search through it and present it paginated. Therefore, in this article, I’ll show one approach on how to create a search component that handles search inputs with debounce and a pagination component which will handle requesting different pages of data; both working together.

Search Component

Let’s start with our Search Component. Our goal here is to provide an input to the user so he can type a search string to filter the results on a big collection. …

with useful examples!

angular logo with article’s title underneath
angular logo with article’s title underneath

In an Angular application, the components have their whole lifecycle managed by Angular, from creation to destruction. And it provides us access to lifecycle hooks, which allows us to act in key moments during the component’s lifecycle.

In order to use those hooks, we have to tell Angular we want to implement the desired hook interface. Angular inspects component classes and calls the hook methods if they are defined. Below is how this syntax goes (for OnInit):

export class MyComponent implements OnInit {    constructor() { }    ngOnInit() {
// Insert Logic Here!

This is the list of the…

with practical examples

angular logo with article’s title underneath
angular logo with article’s title underneath

Interceptors in Angular, as the name suggests, is a simple way provided by the framework to intercept and modify the application’s http requests globally before they are sent to the server. That really comes in handy, allowing us to configure authentication tokens, add logs of the requests, add custom headers that out application may need and much more.

Interceptors can perform a variety of implicit tasks, from authentication to logging, in a routine, standard way, for every HTTP request/response. Without interception, developers would have to implement these tasks explicitly for each HttpClient method call.”

Implementing an Interceptor

In order to implement an Interceptor…

an in-depth article with practical examples!

angular logo with article’s title underneath
angular logo with article’s title underneath

Reactive forms provide a model-driven approach to handling form inputs whose values change over time.”

Even though Angular Reactive Forms might seem complicated in a first approach, they can be quite awesome when you actually get it. They are really powerful and my intention here is to show a little bit of the most important things related to them that can be really useful in real world applications.

Firstly, in order to use them, you need to import ReactiveFormsModule into the desired Module.

import { ReactiveFormsModule } from ‘@angular/forms’;

Form Control

A Form Control is a class which holds the value and…

that can save you some time! 🤓

Memorizing the long list of git commands is not a simple task, especially those apart from the basics add, commit, pull and push. I’ve caught myself searching Google several times on how to execute specific tasks in Git, which ends up slowing you down; specially when you end searching the same commands over and over.

Some of these commands we tend to use a lot and it’s good to know them and have them saved somewhere for reference. In this article, I’ll make quick references to some of them, which I use frequently and/or find very useful.

For Inspection

git status

git statusgit…

Leonardo Giroto

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store