Forem: Renan Ferro

A simple and cool CSS animation, new year and good to be back!

Renan Ferro — Thu, 08 Jan 2026 01:14:11 +0000

Heyy everyone, how do you guys are doing?

I'm a little absent from here but I miss our community, sharing and meeting new things and new people here!

I'm a little absent from here but I miss our community, sharing and meeting new thins and new people too! I have a lot on my mind to do this year, sharing lots of cool things I learned too!

So, let's get started!

Soo, what?!!!

I'm organizing my new office in my house, my new machine but these days I created a really cool and simple CSS animation! Specifically, I saw a cool image on my Instagram of an ad that had some cards from some Healthy Programs, something similar to the image below:

So I decide to replicate it and add some animations using just CSS, I like to do this to practice my knowledge and also see the end result, which always makes me happy when I manage to take what I have in mind and put it into code, so, see how it turned out:

I think it was a cool end result, right?!

That's it guys, for this post I just wanted to share a simple animation and I'm eager and excited to share all the new posts I'm working on and writing!

I really missed the community and it's great to be back!

Let's make this year a great year!

Code Link:

Animation CSS: Stackblitz

Angular Tip: Let's Simplify our Module Imports Like a Ninja 🥷🏻

Renan Ferro — Wed, 07 Aug 2024 23:33:36 +0000

Hey guys, how are you?!

It's been a while since I wrote anything but I missed it!

So I wanted to write and share something really cool with you!

Today, I would like to share an interesting way on how we can simplify our module imports, like a one-page Create Account module, and with that, have some advantages!

Let's see what it's like and how we can do it?!

✹ The "Common" Structure 🧩

Think of a Create Account component, when we create it we can notice in the code that the class is not exported by default, because if we look at the export it will be as below:

▶️ The Actual Module Structure:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CreateAccountRoutingModule } from './create-account-routing.module';
import {CreateAccountComponent} from "./create-account.component";


@NgModule({
  declarations: [
    CreateAccountComponent
  ],
  imports: [
    CommonModule,
    CreateAccountRoutingModule
  ]
})
export class CreateAccountModule { }

If you take a look, we don't have the word default after export, so we don't use the standard import of modules.

And when we declare the route in our AppRoutingModule, we need to use the following structure:

▶️ The Actual AppRoutingModule Structure:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'signup',
    loadChildren: () => import('./pages/public/account/create-account/create-account.module')
      .then(module => module.CreateAccountModule),
    title: 'Sign Ups',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

If you look at the code, you can see that we need to import the module. Now, let's see another and simple way.

✹ Exporting as Default 🥷🏼

Now, let's export the class module as default, and with this we can make some improvements and simplify our code, making it more readable and simple, like bellow:

▶️ The New Module Structure:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CreateAccountRoutingModule } from './create-account-routing.module';
import {CreateAccountComponent} from "./create-account.component";


@NgModule({
  declarations: [
    CreateAccountComponent
  ],
  imports: [
    CommonModule,
    CreateAccountRoutingModule
  ]
})
export default class CreateAccountModule { }

And now in our AppRoutingModule we can simplify the code, like:

▶️ The New AppRoutingModule Structure:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'signup',
    loadChildren: () => import('./pages/public/account/create-account/create-account.module'),
    title: 'Sign Ups',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

If you look in the code, now we don't have the .then(module => module) structure.

Because when we declare the module class as default in Angular, we are using the module's default export. This simplifies module import into routes, as the import structure becomes more direct and intuitive.

When using default, the exported module can be imported directly without having to explicitly access the exported module property.
This eliminates the need to use the .then(module => module) structure in routes.

We have many possibilities to make our codes simpler and more elegant, I hope that with this new possibility you have learned something and it helps you!

If you know any other way, have any comments or anything else, leave a comment and let's talk!

See you soon 😁😁🤘🤘🤘

The Best UX Research Sites for Developers/Designers Inspirations

Renan Ferro — Wed, 08 May 2024 11:56:07 +0000

Hello everyone, how are you today?! I hope you are well :)

Today I'd like to talk about something a little different, sometimes we want to start a new project but we don't have the exact idea of the layout or something else, like the theming of the project!

So, in my case I'm looking for layout inspiration for my new project, looking for template sites, random sites or something like that and that always helps me!

Have you ever been in this situation too?!

So, today I'd like to show for you guys some Web/App Design sites inspirations!

✹ Page Collective

☞ Link: Page Collective

✹ Appshots

☞ Link: Appshots

✹ Landingfolio

☞ Link: Landingfolio

✹ Designspiration

Link: Designspiration

✹ Refero

☞ Link: Refero

✹ Awwwards

☞ Link: Awwwards

✹ Dribbble

☞ Link: Dribbble

✹ Land-book

☞ Link: Land-book

✹ Lapa Ninja

☞ Link: Lapa Ninja

✹ Mobbin

☞ Link: Mobbin

Thanks @hosseinyazdi for this recommendation 💪

A pretty cool list, right?!

Did you know them all or any of them?! I think some are more common, like Dribbble and Awwwards!

I also tried to list the sites that I look for inspiration when I want to think about a project or something!

And do you know anyone else that isn’t on the list and you think they should be?!

🥷 Tip of The Day: NTL - Node Task List

Renan Ferro — Wed, 24 Apr 2024 12:09:21 +0000

Hi guys how are you?!

I'm taking some courses and trying out some new things and this week I saw something very interesting that I didn't know about!

Have you already forgotten which scripts you have in package.json?! This usually happens to me (unfortunately) because I work on different projects during the day, and as a result I end up forgetting what each project has :(

Buuut

While studying this week I saw something interesting and powerful to solve and help me with the problem of remembering the scripts available in the project.

And even cooler, it was created by a Brazilian, specifically this monster called Ruy Adorno 🤟🏽

📌 NTL: Node Task List

NTL in a few words is basically and like the name says: A Node Task List, an interactive cli tool that lists and run package.json scripts. And it's really cool and useful!

Let's see how we can configure it in your machine!

🛠 Installing the NTL:

First, open your preferred terminal and run the command bellow to install the ntl globally:



npm i -g ntl

💃🕺 Just use it!

We now have ntl available in our workspace. So basically in your project folder you can simply run the command below and see all the scripts available in your project, have a look:

Execute command:



~ ntl

🎉 Output

As you can see, we have all our scripts available quickly and easily:

NTL also has some other really cool possibilities, one of which is that we can add a structure block to our package.json with descriptions about the scripts, and thus never forget what each one does, as below:

Description structure:

Inside in your package.json, just add the code block below ntl like you can see in the code example below:



{
  "name": "dev-tab",
  "version": "3.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "test:prod": "ng test --browsers=ChromeHeadless --watch=false --code-coverage --include=src/app/services/controller-storage.service.spec.ts",
    "dev:ssr": "ng run dev-tab:serve-ssr",
    "serve:ssr": "node dist/dev-tab/server/main.js",
    "build:ssr": "ng build && ng run dev-tab:server",
    "prerender": "ng run dev-tab:prerender",
    "format": "prettier --write .",
    "serve:ssr:dev-tab": "node dist/dev-tab/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "ntl": {
    "descriptions": {
      "format": "Execute prettier formater"
    }
  }
}

And now, we can see the CLI with more informations:

This is really something really cool and interesting for us to use in our daily lives!

If it's something new for you, like it was for me, share it with your friends or the community!

Maybe you can help like you helped me!

That's all guys, see you soon 🖖🏽🖖🏽🖖🏽

JavaScript Challenge: What would be your solution to this challenge? 🥷🏻🧩

Renan Ferro — Thu, 11 Apr 2024 19:56:50 +0000

Hey folks. how are you today?!

Today I saw a cool and interesting JavaScript challenge and thought I'd bring it to our community too!

Soo...

The Challenge 🕵️‍♂️

The expected result for the challenge will be something like below:

🎯 Expected Output:

{
  CJS: "This is the original Node.js module system, used since its first versions."
}

And also the base code is to start solving the challenge as below:

🎯 Base Code:

function getCorrectDescription(patternName) { 
    let patterns = { 
        ESM: "This is a more modern modularization pattern, officially introduced in newer versions of Node.js.", 
        CJS: "This is the original Node.js module system, used since its first versions.", 
        AMD: "AAMD is a modularization standard associated with JavaScript development for the browser.",
    };

    return ?;
 }

A little cool, right?!

When I saw this challenge I thought it was really cool and I needed to take some time to apply it and finish it.

And you, what would be your proposed solution?! Leave it in the comments, let's share and see different ways of solving

See you 😄😁

Glam Up My Markup - The Coolest Camp

Renan Ferro — Mon, 25 Mar 2024 20:58:25 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

Demo

Link: Demo

Journey

First, I looked at some layouts on Dribbble related to the challenge theme. After that, I thought about a layout and made a small drawing on paper, then after that I went looking for an image that would be used as the top of the page and that would be part of the rest of the page below.

Then I found the perfect image to the challenge:

So with the image already chosen, I went to Google Fonts to look for 2 types of fonts, one for the title and one for the rest, and I managed to find some really cool ones:

Title Font:

Font: Rubik Scribble

Content Font:

Font: Indie Flower

So now I thought about the theme of the project. Taking my image as inspiration, I tried to leave the project theme in accordance with elements present in the image, in the same style.

So, I did my project root vars:

:root {
  --space-sm: 0.5rem;
  --spacer: 1rem;
  --spacer-lg: 2rem;
  --border-radius: 8px;
  --border-radius-lg: 25px;
  --primary: #f7c525;
  --secondary: #130f41;
  --white: #ffffff;
  --dark: #000000;
  --secondary-yellow: #d1a513;
  --tertiary-yellow: #aa8a1f;
  --animation-to-up: all 850ms cubic-bezier(0.13, 0.77, 0.23, 1.19);
}

After that, I implemented all the CSS according to the planned layout, and I also implemented some animations that I already had in mind and a quick confirmation of submitting the form.

Soo, the CSS and JavaScript structure will be like below:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik+Scribble&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Indie Flower', cursive;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

:root {
  --space-sm: 0.5rem;
  --spacer: 1rem;
  --spacer-lg: 2rem;
  --border-radius: 8px;
  --border-radius-lg: 25px;
  --primary: #f7c525;
  --secondary: #130f41;
  --white: #ffffff;
  --dark: #000000;
  --secondary-yellow: #d1a513;
  --tertiary-yellow: #aa8a1f;
  --animation-to-up: all 850ms cubic-bezier(0.13, 0.77, 0.23, 1.19);
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--secondary);
  position: relative;

  &:after {
    content: '';
    background: url(https://weather-app-renanferro.vercel.app/assets/images/4358862.jpg);
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
  }
}

#camp-activities-inquiry {
  background: rgba(19, 15, 65, 0.56);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8.7px);
  -webkit-backdrop-filter: blur(8.7px);
  border: 1px solid rgba(19, 15, 65, 0.17);
  padding: var(--spacer);
  position: absolute;
  top: 100%;
  width: 90%;

  &.active {
    top: 50%;
    transform: translateY(-50%);
    transition: var(--animation-to-up);
  }

  button,
  label {
    font-family: 'Indie Flower', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--white);
  }

  h1 {
    transition: 0.25s;
    font-size: 2.5rem;
    line-height: 40px;
    text-align: center;
    font-family: 'Rubik Scribble', system-ui;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 2rem;
  }

  form {
    display: grid;

    label {
      font-size: 18px;
    }

    button {
      border: unset;
      margin-block-start: 8px;
      font-size: 1.25rem;
      width: 100%;
      border-radius: 25px;
      background-color: var(--primary);
      padding: 0.5rem 1rem;
      color: var(--dark);
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:before,
      &:after {
        content: '';
        position: absolute;
        height: 1px;
        width: 1px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        z-index: 0;
      }

      &:before {
        background: var(--secondary-yellow);
        transition: 0.6s ease-in;
        transition-delay: 0.1s;
      }

      &:after {
        background: var(--tertiary-yellow);
        transition: 0.8s ease;
        transition-delay: 0.4s;
      }

      &:hover {
        &:before,
        &:after {
          transform: translate(-50%, -50%) scale(510);
          opacity: 0;
        }
      }
    }

    select,
    textarea {
      border-radius: var(--border-radius);
      margin-block-end: var(--spacer);
      padding: var(--space-sm);

      &:focus-visible {
        outline: unset;
        -webkit-box-shadow: -1px 2px 25px -8px rgba(247, 197, 37, 1);
        -moz-box-shadow: -1px 2px 25px -8px rgba(247, 197, 37, 1);
        box-shadow: -1px 2px 25px -8px rgba(247, 197, 37, 1);
      }
    }

    textarea {
      resize: none;
    }
  }
}

.confirmation-box {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(9.5px);
  position: absolute;
  width: 100%;
  height: 100dvh;
  font-size: 1.5rem;
  font-family: 'Indie Flower', cursive;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: all 300ms ease-in;

  &.active {
    opacity: 1;
    transition: all 300ms ease-in-out;
  }
}

@media (min-width: 1279px) {
  body {
    &:after {
      content: '';
      height: 96%;
      background-position: center bottom;
    }
  }

  #camp-activities-inquiry {
    width: 70%;
  }

  #camp-activities-inquiry {
    padding: var(--spacer-lg);
  }
}

JavaScript:

const section = document.querySelector('#camp-activities-inquiry');
const body = document.querySelector('body');
const form = document.querySelector('form');
const textareas = form.querySelectorAll('textarea');
const select = form.querySelector('select');
const button = form.querySelector('button');

function disableFormFields(actualState) {
  button.disabled = actualState;
  select.disabled = actualState;
  textareas.forEach((input) => {
    input.disabled = actualState;
  });
  form.reset();
}

function showConfirmationRegister() {
  const confirmationBoxContent = document.createElement('div');

  confirmationBoxContent.innerHTML = 'Well done, see you soon :)';
  confirmationBoxContent.classList.add('confirmation-box');

  body.appendChild(confirmationBoxContent);

  setTimeout(() => {
    disableFormFields(false);
    confirmationBoxContent.classList.add('active');
  }, 10);

  setTimeout(() => {
    confirmationBoxContent.classList.remove('active');
  }, 2000);

  setTimeout(() => {
    body.removeChild(confirmationBoxContent);
  }, 2300);
}

function animateHoverSectionFormulary() {
  section.addEventListener('mouseover', (event) => {
    let cursorPositionX = event.clientX;
    let cursorPositionY = event.clientY;
    section.style.transform = `translateY(-50%) rotateX(-${Math.round(
      cursorPositionX / 80
    )}deg) rotateY(-${Math.round(cursorPositionY / 80)}deg)`;
  });
}

function showFormularyContent() {
  setTimeout(() => {
    section.classList.add('active');
  }, 100);

  animateHoverSectionFormulary();
}

function submitFormulary() {
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    showConfirmationRegister();
  });
}

window.addEventListener('load', () => {
  showFormularyContent();
  submitFormulary();
});

That's it, I hope you liked the final result. I loved the result and even more so participating in this challenge, which is certainly the first of many!

See you soon guys!!!

What structure, operator or other thing do you use most in your daily development?

Renan Ferro — Thu, 07 Mar 2024 19:48:44 +0000

Hey guys, how are you?!

Today I was developing some things and I realized that I was using something very frequently, this is wonderful because as I develop using Angular, when we have more repetition of components, for example, the better, as it becomes easier to create components and reuse structures!

In my case, I noticed that I use the Conditional (ternary) operator quite often (My heart aches to know that Clean Code indicates not to use If too often and at too high levels
🤣🥲).

Here are a simple example of the structure:



<h1 [ngClass]="titleForHomepage ? 'title-homepage' : 'title-internpage'">
  {{ title }}
</h1>

Therefore, I'd like to talk to you and find out what you frequently use when developing?! It could be some validation structure, JavaScript operator or something else!

Share with us and let's talk!

👨‍🎨 The Dev Tab Daily: My Latest Hobby/Practice Cool Project

Renan Ferro — Wed, 21 Feb 2024 14:38:58 +0000

Heyy, how are you guys are today?!

I'd like to share my latest hobby/study project, this was really cool and productive to do as I managed to study, apply and practice many new and interesting things!

I always wanted a dashboard-style project with some websites that I visit frequently that would make access/view easy, so I implemented something similar with some technology information websites.

Aaannd the result is this beautiful thing: Dev Tab Daily

The project is non-profit, it's just a project for me to practice, learn and share with you!

📝 The Project

The Dev Tab Daily is just a "dashboard" project to see some notices, development topics, Lofi songs, interesting websites and some other cool stuff!

📌 Technologies:

In this project I wanted to use some cool technologies to practice and learn more about them and also try some new things, the technologies are:

Angular: v17
Bootstrap: v5.3
RxJs: v7.8
Typescript: v5.2
NGXS/Store: v3.8
NGXS/Devtools-plugin: v3.8
Vercel

🎨 The Homepage:

Basically, the home page is like a panel with some cards with different themes to view, with side scrolling and fully
responsive. And we also have some interesting components, like the browsing history button, light/dark mode and a button at the bottom to navigate around the site:

📌 Mobile Version:

📌 Desktop Version:

🌓 Dark/Light Controller:

The Dev tab has the Dark/Light option too, it was cool to implement because I used some very interesting things, like:

And the result is like below:

🌕 Light Mode:

🌑 Dark Mode:

🔖 History of navigation:

On some sites I browse sometimes I miss an easily accessible browsing history (I know, we have the browser's own history),so I implemented a small one with the history and the option to clear it if the history doesn't make sense more, and it looked like this:

🪤 Tests:

Unfortunately I don't have much time at work to implement tests in projects, so in this personal project I'm looking to implement and learn more about tests, and I'm really enjoying it. Some tests that the project has are:

📌 Technology Badge Component Test:

describe('BadgeTecnologieComponent', () => {
  let component: BadgeTecnologieComponent;
  let fixture: ComponentFixture<BadgeTecnologieComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BadgeTecnologieComponent]
    });
    fixture = TestBed.createComponent(BadgeTecnologieComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  //(D) = Integration Test With DOM
  it(`(D) Should the aria-label property must have the same name shown in the element`, () => {
    fixture.detectChanges();
    const tecnologieNameExample: string = 'angular';
    component.tecnologie = tecnologieNameExample;
    fixture.detectChanges();
    const spanElement: HTMLElement = fixture.nativeElement.querySelector('span');
    expect(spanElement.getAttribute('aria-label')).toBe(tecnologieNameExample);
  });
});

📌 Controller Storage Service Test:

describe('ControllerStorageService', () => {
  let service: ControllerStorageService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ControllerStorageService);
  });

  it(`${ControllerStorageService.prototype.getLocalStorage.name}()
                should throw new Error when called empty`, () => {

    expect(() => service.getLocalStorage(''))
      .withContext('Called with empty value')
      .toThrowError();
  })
});

I'm working on this site constantly, because it was a cool project and gave me a lot of knowledge about some things I didn't know and the opportunity to implement things that I'm not used to.

If you feel curious how something was done, please leave a comment and let's talk more!

And I also hope you enjoyed the project and if you have any tips, suggestions or anything else, please leave a comment.

See you guys 😆

How to Remove Repeated API Calls Like a Pro with Just RxJs and Leaving the Content Always Available

Renan Ferro — Thu, 18 Jan 2024 17:51:24 +0000

Now, how are you?! I'm doing good and I hope you are fine too! Today we're going to talk about how we can remove unnecessary/repeated API call's and make your application better and faster than before!

So, let's gooo!

🎯 Understanding the Problem

When we have an application (big or small) with a few pages and some API calls we need to improve the user experience and the application performance!

Now, let's see an example about the problem and how it happens!

🧩 The Problem Example:

So, imagine you're in a website more specify in the home page:

⛳️ The Home page:

⛳️ The Networking:

And you go to the Market List page:

⛳️ The Market List page:

⛳️ The Networking:

If you look in the Networking tab, now we have the marketList API call, for now it's ok the process!

And after a few minutes, you decide to go to the About page:

⛳️ The About page:

⛳️ The Networking:

Aaand after that, you decide to go back to the Market List page (yes, again):

⛳️ The Market List page:

⛳️ The Networking:

Now, we have a little problem! If you look in the Networking tab we have two marketList call's! But, if you remember we opened the Market List page once and when we came back we made the same marketList call!

This can be a problem, because if we think we have a large application with many user acesses, many API Calls, the performance will be poor and the user experience too! Because we'll have unnecessary repeated API calls, as they have already been called once.

We have many options to solve this problem! For example, in this example project I solved using State Management with NGXS, you can see the project and Networking here: Angular CRUD Market List. But we have many other options too, what I would like to show you here is a small solution!

Buuut, we can solve this using RxJs Operators and a small framework, let's see how we can do it!

🎯 The Solution

Now, we know the problem and let's see how we can improve it and turn our application better!

🧩 What we are need:

To do that we'll need to make some things, like below:

Create a model to Store the API's requests in an array
Create the marketList observable, listOfAvailableRequests array and the request marketList identifier to store in the array (this is optional)
Create the structure to make the marketList call api
Create the structure to save the request if it doesn't exist in the array
Structure to validate the API's requests already in the array
Use shareReplay RxJs operator

Now, let's implement it step by step

🧩 Create the Model:

First, we'll create a observables array model, with two parameters, like below:



import {Observable} from "rxjs";

export interface RequestCached{
  requestIdentifier: string,
  storedObservable: Observable<any>,
}

🧩 Create the martketListRequest observable, listOfAvailableRequests array:

In this example, we'll create some variables to use in your service for the API Request, the list requests and the API identifier (Just to pass for the API url):



export class MarketService {

  private martketListRequest$: Observable<Card[]>
  private listOfAvailableRequests: RequestCached[] = [];
  private readonly marketListIdetifier: string = 'marketList';

  constructor(
      private _httpClient: HttpClient
  ) { }

  ....
}

🧩 Create the structure to do the marketList call api:

Basically here we'll create the request structure and use the shareReplay RxJs operator



import {Observable, shareReplay} from 'rxjs';

export class MarketService {
  ...

  private makeMarketListRequest(): void {

    this.marketItem$ = this._httpClient
      .get<Card[]>('marketList')
      .pipe(
        shareReplay(1),
      )
  }

  ....
}

You can se more about the shareReplay here

🧩 Create the structure to save the request if it doesn't exist in the array:

A simple structure to save the request in the listOfAvailableRequests array



export class MarketService {
  ...

  private pushNewRequestToStoreList(requestIdentifier: string, requestObservable: Observable<Card[]>): void {
    this.listOfAvailableRequests.push({
      identifier: requestIdentifier,
      storedObservable: requestObservable,
    });
  }

  ....
}

And finally, our structure will be like below:



export class MarketService {

  private martketListRequest$: Observable<Card[]>
  private listOfAvailableRequests: RequestCached[] = [];
  private readonly marketListIdetifier: string = 'marketList';

  constructor(
      private _httpClient: HttpClient
  ) { }

  getMovies(): Observable<Card[]> {

    let requestStoredReady: RequestCached | undefined;

    if (!this.listOfAvailableRequests.length){

      this.makeMarketListRequest();
      this.pushNewRequestToStoreList(this.marketListIdetifier, this.martketListRequest$);
    } else {

      requestStoredReady = this.listOfAvailableRequests.find((requestItemData: RequestCached) => requestItemData.identifier === this.marketListIdetifier);

      if (!!requestStoredReady){

        this.martketListRequest$ = requestStoredReady.observableCached;
      } else {

        this.makeMarketListRequest();
        this.pushNewRequestToStoreList(this.marketListIdetifier, this.martketListRequest$);
      }
    }

    return this.martketListRequest$;
  }

  private makeMarketListRequest(): void {

    this.martketListRequest$ = this._httpClient
      .get<Card[]>('marketList')
      .pipe(
        tap(response => console.log(response)),
        shareReplay(1)
      )
  }

  private pushNewRequestToStoreList(requestIdentifier: string, requestObservable: Observable<Card[]>): void {
    this.listOfAvailableRequests.push({
      identifier: requestIdentifier,
      observableCached: requestObservable,
    });
  }
}

🎯 Testing

Now, we can go to the home, market list page, about page and go back to the market list page and we will have only a marketList API call, as you can see below:

⛳️ Navigated to the Market List page:

⛳️ Navigated to the About page:

⛳️ Navigated to the Market List page:

⛳️ Networking at the end of all navigation:

🎯 Conclusion

That's can be very useful when we have a big application with a few API calls, as we can the "observables cache" and they will be available to us whenever we want!

You can find, fork and see the project here. I hope you enjoyed it, learned something and that it helps you in some way!

Anything just leave a comment and let's talk!

And if you like it, please, give a start:

⭐️ Star Angular CRUD on GitHub ⭐️

Let's understand and make our API requests professional with HTTPInterceptor like a Pro

Renan Ferro — Mon, 08 Jan 2024 13:51:11 +0000

Hey guys, how are you today?!

It's 2024, let's make this year wonderful and do a lot of some cool things!

Today I'd like to share and talk about a something interesting and it can do your application and development time better!

So let's see and learning something cool!

👾 The problem

When we have an application consuming an API we basically have this structure:

In this example we have a Github News Application consuming an API

import {environment} from "../../environments/environment";

....

export class GithubNewsService {

  constructor(
    private _httpClient: HttpClient
  ) { }

  getGithubNews(): Observable<GithubNews[]> {
    return this._httpClient
      .get<GithubNews[]>(`${environment.apiGithubNews}/getNews`);
  }

  saveNewGithubNews(news: GithubNews): Observable<GithubNews[]> {
    return this._httpClient
      .post<GithubNews>(`${environment.apiGithubNews}/saveNews`, news);
  }
}

If you nice, we have a bit of duplication in our code. In the getGithubNews and saveNewGithubNews methods we need to pass the APIU url, which we pass using the environment.apiGithubNews.

But let's imagine this application becomes increasingly large with countless services consuming the same API url. And this way that we are using it in the future could cause us some problems, because imagine that one day it becomes necessary to change the variable that was previously apiGithubNews and now has another name, perhaps something like apiGenericNews we would need changing the name in all files generates work and we could possibly break the application, if we lave somewhere without changing!

And I can say, we can resolve this like a pro and with only a file! Let's see this!

👩‍🎨 The solution

Angular offer for us a lot of really and powerfull things, and one of these is the HTTPInterceptor.

🧩 HTTPInterceptor

In a nutshell, with Interceptors we can transform a flow of events by transforming the request before passing it on, calling next.handle() and applying the logic we want!

So, thinking about our "problem" we can put the API url of the request in our HTTPInterceptor, with this we can remove the environment.apiGithubNews from our GithubNewsService and we'll only have one place to change the environment.apiGithubNews, if this ever happens in the future this will change!

This makes our code a little cleaner and easier to apply future changes.

Now, let's work!

🧩 Structuring the Solution

Let's see and apply the structure for the solution.

➾ Generate the HTTPInterceptor file:

First, let's generate the HTTPInterceptor, with Angular CLI we just need put the generate command to generate the file, like below:

ng generate interceptor interceptors/set-domain

➾ Importing the HTTPInterceptor file:

Let's import the our HTTPInterceptor in our app.module.ts inside the providers, so basically the structure will be:

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { SetDomainInterceptor } from './interceptors/set-domain.interceptor';
...

@NgModule({
  ....
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: SetDomainInterceptor,
      multi: true,
    },
  ],
  ...
})
export class AppModule { }

➾ Structuring the `SetDomainInterceptor`:

As we saw above, we need to take the request flow, apply the logic we want and return the update request with next.handle(), so basically the structure will be like below:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';

@Injectable()
export class SetDomainInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(httpRequest: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    const requestStructureUpdated: HttpRequest<any> = httpRequest
        .clone({
          url: `${ environment.urlApi }/${ httpRequest.url }`,
          setHeaders: {
            'Content-Type': 'application/json'
          }
        });

    return next.handle(requestStructureUpdated);
  }
}

Basically, we take the request and create a clone of it, passing the API url with environment.apiGithubNews, after that we concatenate the rest of the request URL with ${ httpRequest.url } and we also apply the 'Content-Type': 'application /json'.

Now in our service structure, we can remove the environment.apiGithubNews and have just the API url path, so the new structure will look like this:

...

export class GithubNewsService {

  constructor(
    private _httpClient: HttpClient
  ) { }

  getGithubNews(): Observable<GithubNews[]> {
    return this._httpClient
      .get<GithubNews[]>('getNews');
  }

  saveNewGithubNews(news: GithubNews): Observable<GithubNews[]> {
    return this._httpClient
      .post<GithubNews>('saveNews', news);
  }
}

Really cool and interesting, right?!

Now with this we can apply and passa whatever we want in all requests in our application, having only one place to do this and keeping our code easy to apply future changes.

We have many possibilities and I hope that with this new possibility you learn something and help you!

I hope you enjoyed today's article!

If know of any other way, have any comments or anything else, please leave a comment and let's talk!

See you soon 😁😁🤘🤘🤘

Let's Implement a Really Cool Loading Animation with Only CSS or Sass 👩‍🎨👨‍🎨

Renan Ferro — Fri, 24 Nov 2023 14:42:53 +0000

Hey guys, how are you?!

I'm thinking about creating some small, direct articles to talk/implement/show something cool, like:

An interesting Javascript thing
A cool CSS animation
An interesting Angular tip

And other things in a simple, demonstrative and direct way! So let's try it and see how it goes!

So, let's start it!

🎨 Loading Animation

First, we need to create the css or sass file. I'll show how we can implement animation with css and sass.

So please create the css or sass file and import it into your project!

The animation will look like below:

The animations are not cool in the gif because it is not in high quality and my tool broke the gif a little.

Now, let's implement it!

🧩 The HTML Balls Structure:

Basically we need a div and three span with the ball selector, so the structure will be like below:



<div class="content-balls">
  <span class="ball-0"></span>
  <span class="ball-1"></span>
  <span class="ball-2"></span>
</div>

👩‍🎨 CSS Implementation:

First, we will implement it with just css. So, we will implement it in css:

The content style of the balls (To center the balls)
The style of balls (Called ball-0, ball-1, ball-2)
Keyframe animation (Called animatedBall to make ball transitions)



.content-balls {
    position: relative;
    text-align: center;
    padding: 1rem 0;
}

.ball-0 {
    background-color: #dc3545;
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0s;
}

.ball-1 {
    background-color: #0dcaf0;
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0.25s;
}

.ball-2 {
    background-color: #ffc107;
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}

@keyframes animatedBall {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(50%);
    }
    50% {
      transform: translateY(70%);
    }
    75% {
      transform: translateY(-50%);
    }
    100% {
      transform: translateY(0);
    }
}

👨‍🎨 SASS Implementation:

With sass we can improve the code structure and do the same thing with less code (Sass is really cool, if you don't know it, please learn it!)

Then, the structure will be as below:



@for $item from 0 through 2 {
  .ball-#{$item} {
    padding: .4rem;
    border-radius: 50%;
    margin: 0 .25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: #{$item * .25}s;
  }
}

.content-balls {
    position: relative;
    text-align: center;
    padding: 1rem 0;
}

@keyframes animatedBall {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50%);
  }
  50%{
    transform: translateY(70%);
  }
  75% {
    transform: translateY(-50%);
  }
  100%{
    transform: translateY(0);
  }
}

🧠 Understanding the block's of code:

Let's look and understand some interesting parts of the codes.

🎯 Balls Structure:

Let's understand some interesting properties in the .ball-* class structure:

Using CSS:



.ball-* {
    padding: 0.4rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: 0s; // This property has variations
}

Using SASS:

To optimize our development we can use @for from sass, which is an excellent option because all of our ball classes share the same properties:



@for $item from 0 through 2 {
  .ball-#{$item} {
    padding: .4rem;
    border-radius: 50%;
    margin: 0 .25rem;
    display: inline-block;
    animation: animatedBall 1s ease-in;
    animation-iteration-count: infinite;
    animation-delay: #{$item * .25}s;
  }
}

animation-iteration-count: Property so that the animation is infinite, it does not end.
animation-delay: Important property, you can see that each class has a type of delay, this causes each ball to be animated after a certain time in relation to the other.

🎯 Transition Structure:



@keyframes animatedBall {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50%);
  }
  50%{
    transform: translateY(70%);
  }
  75% {
    transform: translateY(-50%);
  }
  100%{
    transform: translateY(0);
  }
}

Here is the core of the animation, we transition the balls in the Y shape making them go from bottom to top using @keyframes and the animation percentage.

And now we have our wonderful animation, now we can use it anywhere, making our website more beautiful and with a better user experience!

Even though the animation is simple, it's always cool to do some to practice our creativity.

You can see them working on my website, take a look at how they look: Live Demo

I hope you liked it and that this animation helps you or inspires you to create others!

If you have any questions, suggestions or anything else, please leave a comment!

See you soon 😁🤘

Github Actions: Let's Understand and Create an Interesting Workflow for our Projects

Renan Ferro — Tue, 14 Nov 2023 13:56:50 +0000

Hello everyone, how are you guys?!

We had Hacktoberfest a few days ago and it was really cool, I saw a lot of new people and a lot of cool community projects!

Probably if you participated and if you saw something really cool too: many people are using GitHub Actions in their repositories.

Whether you've heard of it or not, let's talk a little about Github Actions and see how powerful it is!

🧨 Github Actions

In a nutshell, Github Actions is a powerful way for us to automate and execute custom workflows on our projects directly from the Github repository because it is a continuous integration and continuous delivery (CI/CD) platform.

✴️ Github Actions Components

We can configure workflows so that Actions are called when an event occurs, for example:

When we push for the develop branch we want the Action to automatically the merge into the main branch (Spoiler: We'll do an Action like that today 😁😁😁).

✴️ Workflows:

It's an automated process created by us to execute as many of works as we want.

✴️ Events:

Events are activities in the repository to start the workflow process.

✴️ Jobs:

Jobs are like a set of instructions that will be executed in our workflow. Each step is a shell script that will execute the appropriate action.

✴️ Actions:

Actions is a custom application for the Github Actions platform that can perform a complex task that frequently needs to be performed.

✴️ Runners:

A runner is like a server that will run our workflows when they are triggered through our events.

Now we have a little knowledge about Github Actions. Let's create our own Github Action!

I recommend that you read and study the Github Action Documentation , the documentations are the best place to learn everything!

✳️ Creating the Our Workflow:

1: In your repository create the .github directory, like below:

2: Now, create the workflows directory to store our workflows files:

3: Inside that, let's create our fist workflow file, called github-actions.yml:

✴️ Creating the our Workflow structure:

1: First, inside the github-actions.yml let's create a name and the event structure:

name: Merge Develop branch to Main
on:
  push:
    branches:
      - 'develop'

2: Now, we need to specify the jobs for the Workflow (the merge steps, for example) with some structures, such as the job name, the server to be executed, as follows:

name: Merge Develop branch to Main
on:
  push:
    branches:
      - 'develop'
jobs:
  merge-develop-to-main:
    runs-on: ubuntu-latest

3: Now, let's enter the merge structure for the action:

name: Merge Develop branch to Main
on:
  push:
    branches:
      - 'develop'
jobs:
  merge-develop-to-main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@main

      - run: echo "✅ Starting process to merge Develop into Main on the ${{ github.repository }}."
      - name: Merge develop -> main
        run: |
          git fetch --unshallow
          git checkout main
          git pull
          git merge develop -m "Github Actions - Auto-merge Develop to Main"
          git push
      - run: echo "📣 This job's status is ${{ job.status }}."

✏️ Understanding the structure:

📌 Jobs structure

jobs:
  merge-develop-to-main:

It's the name of the jobs, we can see this in the Actions tab of the Github repository, as below:

📌 Steps
Basically here we put the instructions for the action, as we want to merge the development branch into main, so we need to specify the process!

And noow, we can see the Workflows working like a charm:

You can see a Workflow structure like that here: Weather App Workflows

What have we done?!

Now, when we push ours to the develop branch, we don't need to merge into the main branch. It's a small example of what we can do with Github Actions because there are many options about what we can do!

Remember that the main aim is to automate repetitive processes in our projects!

And also remember, in this action created by us, the merge is done automatically to the main branch, so be careful not to push broken things and break the project!

That's all guys!

Hope this makes you feel a bit more comfortable with Github Actions and their possibilities!

Feel free to reach out to me if you have any questions!

and obviously I hope you enjoyed it 🤟💪🤟💪