Series

How To

Practical guides and step-by-step tutorials to solve specific problems.

馃摎 41 Articles
How JavaScript Generators works with Examples
How To

How JavaScript Generators works with Examples

Today I鈥檝e been reading about Redux-Saga. One of the key concepts there is the use of generator functions (function*). Generators are a JavaScript feature I鈥檇 heard of before, but I never really needed them in my day-to-day work鈥攑robably because I di...

Why I moving from NVM to Volta
How To

Why I moving from NVM to Volta

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

How to download Firebase Studio Project?
How To

How to download Firebase Studio Project?

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

Beginner's Guide to Using WSL on Windows 11
How To

Beginner's Guide to Using WSL on Windows 11

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

Web Accessibility: Working with Images and Content
How To

Web Accessibility: Working with Images and Content

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

Fun and Easily Update NPM Dependencies with npm-check-updates
How To

Fun and Easily Update NPM Dependencies with npm-check-updates

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

Web Accessibility: Head Start
How To

Web Accessibility: Head Start

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

Svelte for the First Time: A Personal Experience
How To

Svelte for the First Time: A Personal Experience

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

How to Create Your First API with Nest Effortlessly
How To

How to Create Your First API with Nest Effortlessly

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

How To Improve Your Git Commit Messages Using Conventional Commits
How To

How To Improve Your Git Commit Messages Using Conventional Commits

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

How to Improve Cloud Skill As Frontend
How To

How to Improve Cloud Skill As Frontend

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

How and When to Use Mocks or Spies on Unit Testing
How To

How and When to Use Mocks or Spies on Unit Testing

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

How to Get Cloud Skills As Frontend
How To

How to Get Cloud Skills As Frontend

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

How to Build Your First App with Astro
How To

How to Build Your First App with Astro

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

How to hide computer name in OSX terminal
How To

How to hide computer name in OSX terminal

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

How to show the git branch in the terminal
How To

How to show the git branch in the terminal

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)/' ...

How To Test Private Methods in Typescript
How To

How To Test Private Methods in Typescript

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

How To Mock Dependencies With Jest
How To

How To Mock Dependencies With Jest

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

How To Learn Docker Compose Step-by-Step Guide
How To

How To Learn Docker Compose Step-by-Step Guide

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

How To Get Started with Docker: A Step-by-Step Guide for Beginners
How To

How To Get Started with Docker: A Step-by-Step Guide for Beginners

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

How to measure javascript code with performance.now()
How To

How to measure javascript code with performance.now()

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

How to Test Errors with Jest in Typescript
How To

How to Test Errors with Jest in Typescript

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

How to speed coding with 20 VSCode extensions
How To

How to speed coding with 20 VSCode extensions

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

How to use CSS Animation with examples
How To

How to use CSS Animation with examples

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

How to use transitions and transform in CSS
How To

How to use transitions and transform in CSS

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

How to use CSS Gradients to create images effects.
How To

How to use CSS Gradients to create images effects.

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

How to learn CSS Positions with examples
How To

How to learn CSS Positions with examples

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

How to use CSS Pseudo Elements
How To

How to use CSS Pseudo Elements

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

How to Speed up Karma and Jasmine Tests with ChromeHeadless
How To

How to Speed up Karma and Jasmine Tests with ChromeHeadless

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

How to use CSS Pseudo classes with examples
How To

How to use CSS Pseudo classes with examples

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

How to use CSS Combinators with examples
How To

How to use CSS Combinators with examples

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

How to save time using global .gitignore
How To

How to save time using global .gitignore

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

How to configure Ubuntu for Javascript coding.
How To

How to configure Ubuntu for Javascript coding.

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

How To Head Start with Testing in Angular with Jasmine
How To

How To Head Start with Testing in Angular with Jasmine

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

How to Use VSCode for Writing Git Commits
How To

How to Use VSCode for Writing Git Commits

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

How to center elements using the box model
How To

How to center elements using the box model

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

How to use BulmaCSS with Parcel
How To

How to use BulmaCSS with Parcel

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

How to run multiple npm scripts with npm-run-all
How To

How to run multiple npm scripts with npm-run-all

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