How To

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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