Frontend

I moved my blog from Hashnode to a custom Next.js site on Vercel. Here is why I did it, how I moved my entire content library, and why Vercel is the best home for my posts.

Learn how to share Zod schemas between client and server in Next.js to ensure data integrity without repeating yourself. Photo by Clément Hélardot on Unsplash

Next.js gives you strong performance defaults. But fast by default doesn’t mean fast always. Over the last few days, I’ve been working with Next.js and React Server Components, assuming the framework would handle most performance concerns for me. And...

Today I’ve been reading about Redux-Saga. One of the key concepts there is the use of generator functions (function*). Generators are a JavaScript feature I’d heard of before, but I never really needed them in my day-to-day work—probably because I di...

A few days ago, I was fixing a small accessibility issue and decided to remove some unnecessary wrappers around a few elements. After making those changes, all the tests passed successfully—including the E2E tests. Everything was green, so I opened a...

Don't care if you use Angular 14, 15...19; your apps are still under the Zone.js umbrella. Maybe you feel your Angular apps work well, but under the hood, with Zone.js, Angular needs to iterate over the entire DOM tree, impacting app performance. Thi...

In the summer, I refreshed my NgRx skills by building a small application to handle my favorite places. During that process, I enjoyed NgRx because I had real control over the state of my app. One thing that caused a lot of noise was the number of se...

When we need to write a test for components, it is not hard. The pain starts when our components begin to have dependencies, not only in the constructor or in the TypeScript file. The real challenge comes when we start to add dependencies of other co...

The race for AI continues. Alternatives like Ollama help us interact with AI models on our machines. However, the Chrome and Google teams are moving one step forward by enabling Chrome with Gemini Nano running in our browsers. Note this API is exper...

During recent developer interviews, I noticed many candidates felt overwhelmed by coding challenges. For junior positions, it's common to be asked about basic JavaScript tasks. Today, I'll share essential data manipulation techniques that junior deve...

Side-effects! They are one of the most common tasks in our applications. In Angular, but build application if we don't take care the component ends with a lot of responsability, like get, process and render the data. But in Angular most of time when ...

When we work with request data in Angular to an external API, sometimes we need to add or send headers. The idea of repeating the code in each request is not something to feel proud of. For example, when working with the ball don't lie API, it requir...

In NgRx, when we want to get data from the store, the easiest way is by using store.select. It allows us to get any slice of the state. Yes, it sounds funny, but any slice returns an Observable<any>. For example: It is flexible but also risky becaus...

When you create actions in NgRx, you usually use the createAction function helper. We write our action names with an inline string about the source and the event, like [Cart] Update Price. This action is clearly linked with the Cart feature in our ap...

When we work with NgRx, tracing and debugging actions, knowing the current state of our store, and reproducing behavior are very important. We have a great tool to help us as developers debug and analyze our NgRx State: the Redux DevTools. The Redux ...

In a previous article, I wrote about managing the state in Angular by using Services, but when the application increases in size and needs to track and handle a large state, it becomes a bit complex and not easy to manage. For example, when we have m...

As developers, we create different types of applications. Sometimes, we work on data processing with forms or data visualization with grids or charts. But sometimes, we build applications that focus mainly on images. While making an app to show image...

When I need to build real-time apps with Angular, most of the time I use SignalR, but a few days ago, a friend mentioned SSE. I had never heard about it or had the opportunity to hear someone mention it, so I started to find out about it and was surp...

I was writing an article for Kendo about testing in Angular, but with the deprecation of Karma, I had some questions about the future of testing in Angular. I'm using Jest for my personal and professional projects, along with the Angular testing libr...

The Performance, this is one most important topics when we build applications, now days we work with huge amount of components and needs to think how to improve the bundle size in our apps. The Angular team knows that, and launches great and amazing ...

When working with libraries, we aim to share our code with teammates, not just keep it on our own computers. The easiest way to share and test our code is by using npm pack to create a zip version. Another option is to publish our package is with azu...

When coding in TypeScript or Angular and embracing types, sometimes we don't pay attention to "Circular dependencies". We create types and try to use them everywhere to match with the existing structure, and if we're not careful, it's so easy to crea...

When building applications in Angular, maintaining effective communication of data between components or routes is crucial. Sometimes we use a state manager, services, or take advantage of the URL to provide information as a convenient alternative. C...

When we build an application in Angular, it works as SPA so it is a single page with multiple views or pages running in the client. But how can we navigate between each one without a new request to the server? The Angular router updates the address b...

When I see many chats connected with AI, a friend once said it's difficult, but it isn't. Today, I want to demonstrate how easy it is to build your own chat connected with AI and a nice interface using just a few lines of code. we'll learn how to cr...

When we create a website, the content is more than just text. As I learned in my previous article, accessibility is about more than just aria-label or alt attributes in images. Sometimes we add more than images, like SVGs, charts, or even consider co...

Today, I was trying to update multiple projects, but didn't want to struggle with compatibility issues or potential breaks. I found an amazing package, [npm-check-updates](https://www.npmjs.com/package/npm-check-updates). It helps to find package upd...

Nowadays, when making an app, accessibility is often ignored, or some developers think that aria-label is all they need. Some people also think that adding accessibility takes more work or makes the design less appealing, but that's not true. Having ...

In my previous article on building a sample store, I explored the animation feature in Angular 17. At the same time, I also developed an extensive product page feature. The product detail page needs to extract the product ID from the URL using the ro...

I'm constantly exploring ways to improve user interaction on websites. Recently, while building a store demo, I thought of enhancing the user experience when navigating between product pages. This led me to play with fantastic feature in Angular 17: ...

As 2023 comes to an end, I find myself reflecting on the valuable lessons and knowledge I've gained through writing. In addition to this blog, I create content for Telerik Kendo. Today, I'm excited 😊 to share with you my top Kendo UI articles from t...

When we create applications in Angular, the any type is our "live-saver" when struggle with complex error messages, want to save time by not writing specific type definitions, or think that TypeScript's type checking limits our coding flexibility and...

When we write tests in Angular Jasmine and Karma are the default for testing library and runner, but the Angular team was working on bringing Jest to Angular. Today, we're going to experiment with the Jest Builder for Jest (Experimental) in Angular 1...

I'm using the Angular Testing Library to test my components, and it works exceptionally well—I love it! However, I encountered a unique situation when using a Web Component within my component. This results in the error "Class constructor HTMLElement...

Angular 17 has been announced and is set to release in the upcoming days. It comes with a list of impressive new features, such as control flow, deferred views, hydration, server-side rendering (SSR), signals, and many more. One of the notable releas...

In the last half-year, I interviewed people to hire Angular Developers for my company. During this time, I learned a lot and noticed common errors made by some applicants. The purpose of this article is not to provide a one-size-fits-all solution for...

Sometimes we want to learn something, just for fun or to build new side projects. I heard about Svelte in 2016, but never tried it until a few months ago with Bezael to create a small microfrontend. However, yesterday I started to build a small side ...

Yesterday, I was chatting with my friend Jörgen de Groot about Signals. As our conversation shifted to cover effects, he encountered the error ERROR NG0203. Later, another friend approached me with the same issue. I decided to compose a brief article...

Since Angular 16, I have heard a lot about Signals, the @angular/team did great work listening to the community and improving the Signals API with Rxjs interop. Yesterday I was talking with my friend Juan Berzosa he hadn't played with Signals yet, So...

Today, I reviewed a piece of code where a variable could be of two types, but to enhance readability, the simple method is to use union and intersection. In this example, we have defined two interfaces, Player and Basket, each representing a specific...

A few days ago, a friend asked how to prevent duplicate keys in an array, and I told him there are other collections to work with, and each one is suited for a specific situation. Because I love the NBA, I tried to find an easy way to explain each da...

Today I was facing a problem where I wanted an object with a list of properties but with specific values like: For example: export type NBATeam = "Lakers" | "Celtics" | "Bulls" | "Warriors"; const nbaChampionships = { Lakers: 17, Celtics: 17...

As developers, we use a lot of our coding time to fix bugs. Debugging helps us find and remove errors in software development. But sometimes, finding a bug takes longer than fixing it. That's when we need to learn some ways to debug our apps. Let's i...

TypeScript offers powerful features that make code more concise and efficient. Two such features, optional chaining and nullish coalescing, play a vital role in handling data effectively. In this article, we'll explore these features within the conte...

Today, one of our teammates was curious about which RxJS operators they'd need to create a search feature in Angular. I let them know that while RxJS has loads of operators, they don't need to know them all. I usually stick with Map, Filter, Tap, Swi...

Since Angular 14, we can convert our class guards to functional and also combine them with inject making it so easy to write guards Angular applications. When we move from class to functional, the constructor disappears, and the dependencies come fro...

When I started to play with templates and dynamic content in angular, I get surprised by multiple directives in angular to work with it ng-template, ng-container, and ng-content. Each one is pretty similar initially; each has exceptional use cases an...

Since Angular 14/15, there has been an alternative way to inject dependencies into our Angular applications. I will show two cases of using the inject function with Angular 14/15. Inject Dependencies in Functions Using inject, we can create functions...

When we start to build an application in Angular and need to create forms, we must pick one of the two flavors: "Reactive" or "Template Forms". For beginners, Template Forms are natural and appear less complex for new joiners, but some developers may...

When talking about unit testing, the first definition that comes into our head is to test the minor testable parts of an app, like functions, methods, and classes. It sounds perfect for a simple function or isolated class without dependencies, but it...

A few days ago, my friend was writing tests for an Angular App with two dependencies and wanted to test his code. I suggested that he should Spy and Mock the dependencies. When deciding whether to use a Mock or a Spy, it is important to consider the ...

For a few years, web projects have been taking more and more responsibility, which means more and more JavaScript. Nowadays, the top SPA Frameworks, React, Vue, or Angular, have great developer experience and allow us to build complex applications bu...

ESBuild is a swift JavaScript compiler used for ViteJS. You can play with him in Angular, changing a single line in the angular.json file. Note: It is in experimental mode 😜 Change the builder from "@angular-devkit/build-angular:browser" to "@angula...

I continue to play with the new features of Angular 14/15, and one pending task is to learn about Typed Reactive Forms. The strict forms help us avoid many common issues when working with our forms. The best way to learn and understand why to use Typ...

Today I was talking with my friend Leifer, and he asked me some about Functional Guards in Angular (14/15) with some questions. How do functional Router Guards work? Can The Class guards continue working in Standalone Components? How hard is conve...

Today with my friend @alt148 I was playing with Dynamic Forms, and we discovered changing one form control can trigger the validation several times in the validation process. For example, we have a form with a field, and in every key press, the form ...

In Angular Apps, making and updating forms is done by hand. Even small changes like adding a new field or changing its type can be difficult. Why not make forms adaptable to business changes? Why not transition to dynamic forms instead of hard-coded ...

Since version 15, Angular introduced Standalone Components as an easy way to build module-less applications. One of the benefits of Standalone Components is that they make Angular easier for new developers to learn and use, as they do not require an ...

When we build an Angular application with multiple modules in a large app, the main script file becomes a giant monster. One alternative to improve the user experience is to use the Lazy Module. Today, We learn how to use lazy loading to enhance the...

I was assisting a friend in constructing a sorting table with data in Typescript and he ran into some odd behavior along the way. In this lesson, we will explore what occurs in Javascript when the sort method is used with strings and numbers. Sorting...

In Angular, we have a few ways to add libraries, for example, using Angular schematics or using Angular libraries, which export modules to add to the app.module. But what happens when we have a standard library.js or ui.css and need to add it to use ...

I worked in a few companies building a UI Library or company framework to use in multiple products with the dream of having a great UI, consistency, and the same behavior for the users. The UI Library's idea helps the developers prevent the duplicity...

In Angular when we build components with public properties or the state to share with others, some options come into our heads to solve it: Emit an event using the new value of the component state. Inject service with Subject to share the state. Inj...

When we need to have different versions and use cases and make it flexible to the changes, however, some stuff becomes a bit complex. For example, we need to show the list of the country in one case, the company flag or the name of the selected count...

When we build our Angular apps, splitting the code into modules is good to keep the code in a specific place, but sometimes we need to break it into the project to put everything in an isolated area. By default, Angular CLI generates an initial appli...

In Typescript, we have to check for values types like boolean, string, object instance from class, and the values in objects. 👉🏽 Why pay for hosting? Click here to deploy your Angular apps for free on a reliable VPS In Typescript, we have three w...

When we use types or interfaces, the typescript compiler enforces the object fit with them to avoid runtime errors for missing fields. Sometimes we want the flexibility to create an object without breaking the contract with the interface type. For ex...

When we build an app, some data like the menu and options don't change with frequency. The best approach is to cache it because when the user moves around the app, the data to the server again impacts the speed and user experience. Rxjs provide us wi...

Angular help us to convert values for display using Pipes; the pipes are a way to transform input data to a desired or wished output. A bad practice is to use a method in the template to convert data because it hits the performance; when you need to ...

In Angular it is very common to subscribe to multiple observables to show data in our template, and use these observables in our template, we use multiple async pipes. async pipe, make easy to subscribe and unsubscribe from the observable in our tem...

In Rxjs, when we work with observables handling the errors is a bit confusing for beginners because you can think of a try-catch, but Rxjs comes with operators to manage it, so what can I use and when? Let's move to each step with code, the example u...

When we start to build the application and feel the code duplicated are in several places, our first idea is inheritance, because it solves our problem with repetitive code. It appears as a solution (and it's) and works. But the problem comes when we...

When we build components in an application, we maybe need to share or send data from parent to child without a direct connection. 👉🏽 Why pay for hosting? Click here to deploy your Angular apps for free on a reliable VPS Angular provides different...

Sometimes we need to test a private method, and Yes, maybe it's not a best practice, but in my case, I have a situation when I need to add a test to my private method, and if you have the same situation I hope it helps you. My example is a service wi...

When we want to test our code, some things have dependencies inside, and you don't want to call this stuff. You won't be sure your code works, not external dependencies or external code unrelated to my code. Today we will add tests to our example wea...

Angular, by default, comes with Jasmine; it is a great testing framework. I spent one year and a half running and writing tests with Jasmine, it works, but the market is moving to Jest and Testing library. Don't get scared because Jest is more straig...

Typescript is a technology that grows every day. Companies like Slack, Airbnb, or Google are changing their javascript codebase to Typescript. Frameworks like Vue, React, and (Angular) are using Typescript for writing maintainable code. These steps s...

Sometimes we have a long list of imports, with files that come from the same place, it makes our code noisy and a bit longer, something like: import { BeersService } from './services/beers.service'; import { WhiskyService } from './services/whiski....

When we go to a party, I love to have all beers ready to drink and take one, but sometimes taking time to pick from the fridge to the table and stay waiting is not a good experience. The same happens with our users working with our angular apps; we s...

When we use external libraries, it is widespread to declare and use a global object. But the price to pay is to get a complex testing scenario and, of course global an object like magic is not a “good practice”. How do you tell Angular about an exter...

One of the simplest dishes to prepare is a burger. Though the base remains the same, its contents can vary – so let's create our versatile burger component. Today we explain how to use ng content to provide an area flexible and multiple slots. Use n...

Sass provide darken and lighten mixins to make our colors looks darken or lighten, but how to do it without a preprocessor, only with the power of CSS ? We will learn how to use hsl and calc) functions to build darken and light colors. Demo Feel free...

When we build components, it needs to be flexible, because they can be used in many places or contexts, sometimes changing layout and colors. For example, Our customer wants a list of contacts; it needs to show as a card with the picture, name, and d...

When we work with Sass and Angular, importing files is a very common task, and if you have more than 10 files and want to change the path of your sass structure? @import 'shared/styles/colors'; @import 'shared/forms/input'; @import 'shared/forms/sele...

Today I was helping a new guy in angular with differences between the bind data because it provides 2 ways to move data to DOM, One-way and two-way data binding. It helps us to build dynamic apps. It binds the data from our component to the DOM, unid...

Last month I set up my blog with Angular Universal (Server Side Render); this is about my steps in installing SSR in my blog, so keep in mind a simple blog with only text with HTTP requests to contentful, so it is a real scenario, but the simple case...

I'm refactoring an Angular code, and I need to have the same filenames while finishing the refactor. My solution was to rename my imports. It is a great way to use a different name or alias for my classes and modules. For example, you can import a si...

Sometimes, we want to know how is the performance or time spent in some function or process can be solved using performance.now(). performance.now() help us get time in milliseconds, and we can measure the time between some function completing his pr...

Today, a friend ask about the difference between extends and implements. class Media { format: string; } class Video extends Media {} class Image implements Media {} The short answer for him was: extends: The class get all these methods and proper...

I'm continuing with Jest and typescript, we already know how to expect and assert variables and objects in our code, next step is handling errors. The Calculator has a new requirement if the type of calculation is not +,- or / we need to throw an err...

I continue fixing my CSS weakness and today is time for the CSS Animation. CSS helps us create animation using the keyword @keyframes, it helps to set the initial state for properties and the amount of time it will get during the animation. We chang...

Another good way to add great effects with CSS is using transitions, it helps to transform CSS properties from one to other smoothly with duration between them. The two keys properties to get it are: transition-property: set which property we want t...

Sometimes we want to add the effect of a nice color into our page images. The CSS gradients can help to do it. If you didn't work before with gradients, no problem, I will give a quick overview of it. The CSS gradient helps us to define smooth transi...

If you are a front-end developer, knowing to position elements with css is critical knowledge. CSS has five position types. I will try to write a small example with each of them. Every CSS Position example use the following HTML structure <main> ...

Sometimes style a specific part of an HTML element like the first letter of h1 or append at begin or after, style the first line, my default solution is use JavaScript but not is the best approach if CSS provide a way to solve with Pseudo elements. T...

I'm working with Jasmine and Karma because it is the default toolset for testing in Angular. It works, but one downside is the browser by default for tests runner. The browser is a bit slow for running, and in the CI, it impacts the time of execution...

I continue fixing my CSS weakness, and today is time for the Pseudo-classes. The Pseudo-classes help us to define a particular state of an element. The pseudo-class are determined using : maybe you are used before with links with something like a:ho...

I continue fixing my CSS weakness, and today is time for the CSS Combinators. Sometimes, we want to select elements without affecting others and understand the critical relationship between elements. The CSS Combinators help to write a better CSS sel...

One way to subscribe to observable in Angular is async pipe into the HTML template. It is easy but when you have several subscription use ng-container with *ngIf is a common solution, like : <ng-container *ngIf="userAuth$ | async as user"> <span...

Sometimes I reset the Ubuntu sandbox and install it all again. Everything is not an easy task. I present the list of my apps, packages, extensions for Setup. My development box focuses on Javascript (Angular/Typescript ) and Ubuntu (but it can work i...

I want to show a small overview of the typescript compiler, and the tsc is responsible for compiling our typescript code, watching changes, code checking, and more. The tsc accept parameters on the execution process can read the configuration from th...

In typescript or Angular apps, we can avoid having ugly paths like the following example. import { BookMark } from 'src/app/models/bookmark'; import { BookmarksState } from './../../../state/bookmarks.state'; import { GetBookMark } from './../../../s...

I worked for several months with Jest and Vue, but nowadays, I'm working with Angular, and the testing is part of my learning process. I will explain a bit about Jasmine and how to write a test for typescript classes. If you find something wrong, ple...

By default, installing angular-CLI gets the latest version, but sometimes we work with projects built in an old version. To downgrade your current angular-cli, follow these steps. Remove angular-cli sudo npm uninstall -g @angular/cli npm cache clean ...

If you are using Angular and need to access DOM with SSR, then use the domino package. Domino provides support for the DOM API and also CSS for querySelector(), querySelectorAll(), and matches(). Install the domino package from your terminal. npm ins...

A common task for web development is center elements. We can center the elements horizontally and vertically. Center horizontal Center horizontally is so accessible. Our element needs to have a width size. If not, our element will take all space poss...

Sometimes we need to run a fake API with JSON-Server and SPA at the same time. We need to run each command, one for our spa vue serve or ng serve and the other for json-server json-server /db.json One solution is with concatenating each command usi...

I am back with Angular, and today I was reading about the Angular Modules, which help us to encapsulate and share our code between apps. If you have been working with java or .net is like a library where you can keep some functionality private or pub...

I was talking about class decorators in Typescript in my previous post; today is time for properties decorators to define and use them for writing clean and elegant code. What is Property Decorator The property decorator is a function applied to the ...

The Decorators are an excellent Typescript feature; maybe you see them all over Angular and other frameworks. It helps to write code clean and declarative, maybe you already use it every day, but do you know when to create your decorators? I will s...

The interface is an excellent Typescript feature and helps to write structured and explicit code. The interface helps you describe a structure like fields without values or methods without implementation and forces objects and classes to have. Interf...

In Typescript, the classes can inherit from another class to share methods and properties between classes. Also, Typescript support abstract class. Let me show you why and when to use it. For example, we have a base class Subscription and create the ...

The encapsulation is an essential part of OOP, and Typescript support gets and sets keywords for members of classes. The encapsulation can be used with the get and set keywords before a function name, then using it. We can encapsulate some logic and ...

If there is one thing I have to admit, it is that Typescript allows us to feel in control in javascript and that is also thanks to the typings (tsd), but some libraries don't have the typings, I have found myself in need of writing the typings of the...

The Typescript language understands the functions return type by default; for example, in the following example, the compiler understands one return boolean and the other is void. function Auth() { return true } function Auth() { console.log("he...

Typescript comes with its types, and each one is part of typescript, not javascript. Typescript will provide these types as part of our development process, notify the compiler of the data type used, and force us to implement them appropriately. Tupl...

I am starting to move to Typescript. I discover how works type annotations in typescript functions. Let start by showing a few things I learned today about Typescript. Typescript allows type annotation in function parameters and returns types. Types ...

I am starting to move to Typescript. I discover how it works and different ways to use them with Typescript. Typescript is a superset running up to Javascript, and it supports all primitive types. Let start by showing a few things I learned today abo...