Learn why building apps with AI fails after the first week, and how to use Spec-Driven Development with Gemini and Antigravity CLI to build features that last.

My personal experience moving from quick AI chat demos to real products, why 'vibe coding' eventually collapses, and how Spec-Driven Development fixes the chaos.

The recent supply chain attacks are a wake-up call. Here is why I'm switching to pnpm for all my projects and how you can migrate your workflow safely.

Learn how to protect your AI agents using a defense-in-depth strategy with these 4 essential security layers.

A transparent list of developer tools I use daily - from productivity powerhouses like Warp and GitKraken to minimalist gems like There and Mole. Some are referrals, all are essential.

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.

A production guide to running Next.js on Google Cloud Run: configure Cloud CDN asset caching, mount Secret Manager env variables, reduce cold starts, and automate Cloud Build.

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.

Why I migrated my Next.js projects from Vercel to Google Cloud Run, how the standalone Docker build works, and how to stay on the free tier.

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.

An easy explanation of cybersecurity 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.

How to use Vercel Agent Skills in Cursor, Claude Code, and AI IDEs to automatically apply 40+ React 19 and Next.js performance rules to eliminate waterfalls and optimize re-renders.

A friend told me my emails were hitting his Spam folder. Here is how I fixed my deliverability using Cloudflare Email Routing and custom domain authentication for $0.

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

Learn how to catch visual and DOM layout regressions in Angular using Jest snapshot testing, when to use snapshots vs assertions, and best practices to avoid brittle tests.

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

Learn how to test Angular components with complex child dependencies. Compare NO_ERRORS_SCHEMA, manual stub components, and ng-mocks in both legacy and modern Standalone Angular.

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

Learn how to debug NgRx state in modern Angular with Redux DevTools: configure provideStoreDevtools, trace actions, inspect diffs, and use time-travel debugging.

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

Learn why circular dependencies break TypeScript applications at runtime, how to detect them using Madge and ESLint, and how to fix them using type-only imports and clean architectural patterns.

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

Learn how to pass and read route parameters, query parameters, and matrix parameters in Angular using Signals, withComponentInputBinding, and ActivatedRoute.

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

Learn how to safely check and upgrade outdated dependencies in npm, pnpm, yarn, and bun projects using npm-check-updates (ncu) with interactive mode and monorepo workspace support.

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

Why using any in TypeScript leads to hidden runtime bugs, and how to replace it with unknown, custom type guards, utility types, and the satisfies operator.

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

Learn how to transform component inputs in Angular using @Input({ transform }) and modern Signal input({ transform }), with built-in booleanAttribute and numberAttribute helpers.

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

A practical guide to modern Angular interview questions for junior and mid-level roles, covering Signals, Standalone APIs, Control Flow, Vitest, and Zoneless Angular.

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

Learn how to compose TypeScript types using Union (|), Intersection (&), and interface extends with practical examples, decision matrices, and real-world patterns.

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

A practical guide to essential RxJS operators in Angular: debounceTime, distinctUntilChanged, filter, switchMap, catchError, map, tap, and how they connect with Signals.

Learn how to unit test Angular functional route guards using TestBed.runInInjectionContext, mock services, and modern Vitest test suites.

Learn the exact differences between ng-template, ng-container, and ng-content in Angular, how to pass context with ngTemplateOutlet, multi-slot projection, and how they evolve with modern @if, @for, and @defer control flow.

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

A practical guide to Angular's inject() function: property initializers, eliminating constructor inheritance boilerplate, functional guards, and InjectionContext.

A practical comparison between Template-Driven, Reactive, and Signal-Driven Forms in Angular. Learn how to build forms with strictly typed validation, modern control flow, and Signal-based computed state.

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

Learn how to unit test Angular components with TestBed, handle child components and service mocks, and switch from Karma/Jasmine to modern Vitest with Standalone and Signals.

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

Learn the practical differences between Mocks and Spies in unit testing. Explore practical examples using modern Vitest (vi.fn, vi.spyOn), Jest, and Jasmine in Angular.

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

Learn how to use strictly typed reactive forms in Angular, leverage NonNullableFormBuilder and FormRecord, and eliminate runtime nullability bugs with compile-time safety.

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

Learn how to build data-driven, typed dynamic forms in modern Angular from configuration models using Reactive Forms, Control Flow (@switch, @for), and validation.

Learn how to build module-less Angular applications using Standalone Components. Explore bootstrapApplication, app.config.ts, lazy loading with loadComponent, and Vitest unit testing.

Improve Angular application speed and initial bundle size using lazy loading routes with loadComponent, custom preloading strategies, and modern @defer template views.

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

Learn how to properly integrate third-party JavaScript libraries, CSS stylesheets, and Web Components into Angular using angular.json bundles, dynamic script loaders, and SSR-safe afterNextRender.

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

Learn how to check and validate types in TypeScript at compile-time and runtime using typeof, instanceof, the in operator, discriminated unions, custom type guards, and Zod or Valibot.

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

Learn how to avoid multiple async pipes and duplicate subscriptions in Angular templates using combineLatest, modern Signals (toSignal), and the @let template syntax.

Learn how to catch, handle, and recover from errors in RxJS streams and Angular using catchError, throwError, EMPTY, and modern Angular Signals interop.

Why class inheritance often leads to constructor hell in Angular, and how to use the Directive Composition API (hostDirectives), inject(), and Signals for clean code.

Learn the best patterns to share data between Angular components. Compare legacy Input/Output decorators and BehaviorSubjects with modern Signals, input(), output(), model(), and Signal-based services.

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

Learn how to overlay CSS linear, radial, and conic gradients over background images, use background-blend-mode, and create modern visual duotone effects with pure CSS.

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

Eliminate nested async subscriptions and template callback hell in Angular using RxJS flattening operators (switchMap, combineLatest), @let declarations, and toSignal().

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