Stop making users manually edit JSON files to install your MCP server. Learn how to automate one-click installation deep links for Cursor and VS Code.

How to maintain your authentic voice as a developer in a world crowded with AI-generated content. Why lived experience and real analogies are your most powerful tools.

Vercel is great, but costs can grow quickly. In this post, I explain why I moved my projects to Google Cloud Run, the commands I used, and the lessons learned.

Vercel hides the complexity of environment variables. When you move to Docker, these hidden challenges surface. Learn the architecture to scale your app correctly.

WebMCP is a new standard from Microsoft and Google. It turns your website into a tool for AI agents. Learn how to use it today.

I recently joined Neuraltrust, a cybersecurity company. Here is an easy explanation of the acronyms (SIEM, IDP, PII, SPII) and concepts that every developer needs to know.

I was tired of explaining how to manually install MCP servers. So I built www.mcpclick.app to turn a boring 5-step process into a single click.

I discovered Vercel's agent skills and used one command to apply 10+ years of React optimization knowledge to my blog. Here's how it made my code faster, more accessible, and easier to maintain.

A friend told me my emails were hitting his Spam folder. I noticed my open rates dropping. Here is how I fixed my deliverability using Cloudflare Email Routing without paying for Google Workspace.

I was explaining to a friend why validating emails isn't enough. Learn how to stop bots from killing your subscription endpoint using Rate Limiting—from a naive in-memory solution to a robust Redis implementation.

Stop fighting with Git commands and dependency updates. Learn how GitHub MCP brings AI-powered productivity to your editor and how Dependabot keeps your dependencies secure—automatically.

After years of using Loom for screen recordings, I made the switch to Cap.so. Here's why this open-source alternative won me over with its simplicity, features, and incredible pricing.

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.

The year is ending soon. In 2025, I made many small projects, saved many articles, and installed many tools. Now, my digital life is messy. Here is how I cleaned it to start 2026 with a fresh start.

2025 is almost over. It wasn't perfect, but it was a challenging year for health and work-life balance.

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...

In 2025, I built quite a few demos using Gemini and Kendo UI, building small chat experiences using chatbots combined with Conversational UI for quick prototypes, taking a piece of text (sometimes an image) and sending back a nice-looking answer. The...

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...

Nowadays, when we need to work with multiple apps and products, and each one has its own version of libraries, it is important to make your environment flexible to changes. At that moment, nvm becomes a great option to run multiple versions of Node o...

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...

A few days ago, several people asked me how to download a project from Firebase Studio. Currently, it doesn't have a "download" project button like StackBlitz. But if you want to have the code on your machine, the easiest way is to get our code, it p...

Sometimes, life gets too noisy—work, technology, AI everywhere, and things always changing. We forget to care for what really matters. That’s when your body and health send a strong message and make you stop to think about your life. I’ve been offlin...

The year 2024 is almost over, and reflecting on it, it was amazing with many tech talks, community contributions, learning from the community, and sharing great times with friends and family. Special Thanks I want to say a big thank you to Jörgen de ...

When we build apps, we usually focus on delivery rather than covering other aspects like Accessibility and Testing (but testing will be covered in another post). Today, I want to talk about Accessibility. Most of the time, we think accessibility is j...

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...

Hi! 👋🏽 November has ended, and it was packed with four events in a single month (special thanks to my family, Edgar, and Silvia, for their patience ❤️). It was an incredible experience sharing and learning with the community and GDG. Let’s recap! �...

Hi! 👋🏽 October has ended, and it was a month where I felt more productive. I started to find time to write more, learn, and share! From exploring NgRx entities, building dashboards, to hosting exciting events. Let’s take a look back at the highligh...

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...

September has come to an end, and it was a calm and reflective month. While I couldn't write as much as I had hoped, I took the time to adapt to my job at @celonis and dive deeper into Angular Signals, writing, and reading a great book. Let's take a ...

I was very busy in September, but now I'm working on creating a workshop about signals and developing ideas on how signals can simplify our code. Recently, I've been using @Input() and @Output for component communication. However, Angular 17 introduc...

August has come and gone, and it was a bit quieter than usual. I focused on a few important things, especially refreshing my knowledge about RxJS, and took some time off. Thanks to @googledevexpert and @angularaddicts for the mention! Let me share wh...

When we build apps with state, the entry point is key to initialize our state for our components, but sometimes, we have requirements to preserve application state within the URL to allow users to bookmark or share specific application states, with t...

A few days ago, I was working with NgRx effects in an application,where I needed to get data from the store and combine it with service calls involving asynchronous tasks. When working with combined streams, it's important to choose the appropriate o...

July has come to an end. That month has been a bit busy, so I can't write too much, but I always take time to write about things I'm doing. During July, most of my time was spent writing tests and playing with ChatBots and LLMs. Let's take a look bac...

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...

June has come to an end, and it has been a fantastic month with some changes in my professional life! I want to take a moment to share the great experience I had working with the community and learning about NgRx and testing. Let's take a look back a...

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...

May has come to an end, and what a fantastic month it was! I had a great time learning about real-time apps, optimization, and NgRx. I also enjoyed working with Progress Telerik and Kendo UI learning about improve performance, build flexible componen...

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...

April has come to an end, and what a fantastic month it was! I had a great time learning about Signals, Angular 17, and the future of testing. Let's take a look back at the highlights and fun moments. 👋🏼 Bye Bye Karma! Hello Web Test Runner and 🦥 ...

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 ...

March has come to an end, and what a fantastic month it was! I had a great time diving into AI, learning about Angular and Typescript, and connecting with the DonWeb Cloud & IaaS community, especially about Kendo. Let's take a look back at the highli...

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...

I was an Ubuntu / Mac user, but two years ago, I switched back to Windows. Why? Well, because of the high prices of MacBooks 😢, and my company assigned me a machine with Windows 11 Pro. However, as a frontend developer, most of my code and my apps r...

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...

February was amazing and full of surprises! Let's go over the best parts and the fun projects I worked on. Cheers from the Community Big cheers: I became a #ProgressChampion! 🎉 Thank you so much to Progress Telerik and Kendo UI for this big honor. ...

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...

Reflecting on 2023, I experienced a year brimming with presentations, contributions, and remarkable achievements in content creation. Here's a snapshot of my year by the numbers: 🎤 14 Talks: Shared knowledge on topics like Angular , Astro, Analog, ...

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...

When building components, defining the interfaces to be used by consumers is often challenging. We need to consider the information that must be passed between components and, at times, how it is processed. At times, we expose interfaces solely due t...

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...

When we develop applications, errors can also occur in the API, such as when we request data and it doesn't exist or the database is unavailable. How can we catch and handle errors in the API? For instance, in the Jumbo API, we the cards.service find...

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...

In my previous article, we got started with API creation in Nest, we learned about how to create a controller and add methods on it with decorators to allow getting and posting data it is a very basic example. When we want to have better examples or ...

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...

When I write articles with examples or code MVP , I need to show some data in most of the cases JSON-server save me, or use open APIs to retrieve and post data. However, there are times when we may require specific features, such as uploading files, ...

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...

When working with code, explaining to others what we've done in our code is not easy. Writing commit messages to convey our changes can vary for each team member. Everyone has their own way of writing commit messages, and sometimes we don't know what...

As an Angular enthusiast, I frequently create solutions that consist of multiple projects, such as apps and libraries. The Angular CLI is instrumental in managing these projects through Angular workspaces. I often use Angular in conjunction with othe...

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...

I've been checking out Deno and found it's a really great choice if you're looking for a JavaScript and TypeScript runtime, it comes with pre-built modules that make it super easy to develop applications without having to start everything from scratc...

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 we build an Angular App, the communication between components is something to take care of. We can start using parent-to-child with Input and Output events; the lack of input and output communication is the only parent-to-child or vice versa, bu...

I'm a front-end developer using a lot of CLI, which runs a few commands to generate a final project or perform tasks. I heard of shell scripting but have never tried it before. Daily, I use some shell commands from the terminal, like: cd: Change the...

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...

As a front-end developer, I'm looking to expand my cloud skills so I can build and deploy web applications. I'm taking some time to research which Azure services are most applicable to frontend development and how I can use them to build, deploy, and...

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 ...

I'm a Front-end Developer focused on Angular, Typescript, and Sass; during the last four years, I put all my energy into improving my Frontend Skills (Angular, NgRx, Testing, Sass) but without any effort to learn something about the Cloud. Why don't ...

The year 2022 is close to ending; it has been a fantastic year for my professional goals and family. I am 39 years old, so I have focused on investing energy in topics related to my job to make my life as a developer easier. I want to use this post t...

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...

I love to have a clean terminal, the name of the computer is a piece of information not relevant to read every single time. I'm still using the bash shell. echo "export PS1='$ '" >> ~/.bash_profile . ~/.bash_profile For zsh users add the following ...

I'm a git Kraken lover but sometimes surf into my projects. I love to know in which branch I'm working. Edit the .bash_profile and paste the following lines. parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/' ...

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...

The 2021 year was good, professional, technical, and personal, but I'm 38 years old, so I can't learn too much stuff simultaneously. I'm learning slowly; similar to 2020, I'm only spending my energy on topics related to my job to make my life easy. I...

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...

If you work with docker, typing for every action is not a good deal, and sometimes it can be a nightmare because a typo mistake breaks our process, rerunning all commands. Today, we will learn how Docker-compose makes our experience with docker easy ...

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...

Being ready to deploy your apps with Docker is a higher-demand knowledge today, and this article will guide you (and me) from zero to surviving with Docker. The guide's key features are: Install and run the docker Create and build images Mount vol...

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'm VSCode fan, this is my 20 VSCode extensions in my workflow. A special description for my top 3. 1-TabNine is the most powerful extension for autocomplete and help with your code. https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine...

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 we ignore the duplicate files for every project.DS_Store or npm-debug.log*, we can save time using a global .gitignore. Note: Be Keep in mind that it will change your default behavior on your computer. If you share a project, be careful wh...

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...

If the terminal window is too small for writing your commits, then using VSCode is your solution. Configuring it is easy. First, run the following command in the terminal: git config --global core.editor "code --wait". git config --global core.editor...

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...

Hello, I'm a poor css guy who always uses a framework like bootstrap, and today I decided to use Bulma CSS. Bulma allows use by CDN or NPM. The CDN is an easy way to use but with some caveats. No Sass for customizing. Large file (complete Bulma fram...

I didn’t have a clear picture of how much code has tests? NYC comes to help me know the actual status of my testing. NYC is an npm package for getting stats about the test coverage working hand to hand with Mocha, and the setup is so easy. In my exam...

“The promises”, is a common task for javascript developers to run async code, but how I can test it ?. Feel free to read the code on Github or continue reading. I will write a method that returns a promise, and we will add a test for the resolved and...

I’m trying to learn to test in javascript, today we have few ways to test our code write plain test code or using mocha, jest or cypress. But what is a Test? the test is a piece of code that ensures our software works as we expect, it can be done wit...

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...

If you worked with typescript you may have heard about generics, which may be used in types like array or promises. But, did you ever understand what, why, and when using them? Let me give you a small overview. First point: keep in mind you always us...

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...