DEV Community: Vitor Ferreira

How did I made a circle withing another circle

Vitor Ferreira — Thu, 21 Dec 2023 15:44:51 +0000

In our recent sprint, biGENIUS design team embarked on an exciting journey to enhance user interaction by introducing a sleek stepper view, complete with eye-catching stepper elements. Picture this: a single circle adorned with a numerical indicator and a stylish outer border—cool, right?

Now, the challenge was to bring this vision to life using CSS. Here's the breakdown of my approach:

Firstly, the color scheme and border of the stepper are intricately tied to its current status—whether it's active or not. While various methods, including different SVGs, crossed my mind, I opted for a more elegant solution: leveraging the power of pure CSS.

And so, the question arose: how to achieve this visually appealing effect? Let's dive into the process, starting with the creation of the circle containing the numerical identifier—seemingly simple, yet a crucial step in realizing the desired aesthetic.

<div class="stepper-step__number">1</div>

.stepper-step__number {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  color: #f3f3f3;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: #44a5d8;
}

The outcome:

Now, onto the more challenging aspect—the creation of that elusive white inner circle.

My initial pondering led me down the path of considering another circle element with a simple white border, nested within the outer circle. However, I realized I was unnecessarily complicating the process.

It dawned on me: why not employ the subtle power of box-shadow to achieve the desired effect? The solution revealed itself through the use of a pseudo-element, a moment of coding clarity that filled me with a sense of pride. This revelation became the driving force behind sharing my experience in this post, a testament to the joy of overcoming coding challenges and discovering elegant solutions.

<div class="stepper-step__number active">2</div>

.stepper-step__number.active {
  position: relative;
}

.stepper-step__number.active::after {
  content: '';
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
}

I am so proud of myself

If you want to try it, check it out on stackblitz

Would you have done this differently?
Tell me how on the comments
(probably with tailwind this could be done with some simple things right?)

Using browser Speech Synthesis capabilities (on an Angular App)

Vitor Ferreira — Sat, 10 Jun 2023 22:05:49 +0000

Guess what?
I've been traveling around Germany! But here's the kicker: instead of diligently learning Deutsch like a responsible adult, I've decided to take a shortcut and create my own app to handle everything for me. Genius or madness? We'll see!

So, the first obstacle I encountered was the pronunciation of those tongue-twisting German words. Seriously, they sound like a bunch of cats having a karaoke session. But fear not, for my app comes to the rescue! Not only does it provide translations, but it also teaches me how to pronounce those words correctly. I'll be mastering German like a pro in no time, or at least pretending to while giggling at my own attempts..

For that, and to have it working offline, I went for the browser capabilities and Web Speech API

I decided to go all-in and use Angular for this app. Why? Well, let's just say I have a soft spot for Angular's sleekness and charm. But hey, don't fret if you're not an Angular enthusiast like me! The beauty of this project is that it's written in good ol' JavaScript, so you can take this linguistic journey with any framework you fancy. It's a choose-your-own-adventure kind of deal!

First step: just created a service to handle this:

export class SpeechService {
  synthesis = window.speechSynthesis;

  start(text: string, rate = 1) {
    const textToSpeech = new SpeechSynthesisUtterance(text);
    textToSpeech.lang = "de-DE";
    textToSpeech.text = text;
    textToSpeech.rate = rate;

    const voice = speechSynthesis.getVoices().filter((voice) => {
      return voice.name === "Google Deutsch";
    })[0];
    textToSpeech.voice = voice;

    this.synthesis.speak(textToSpeech);
  }
}

The bad part of that from my experience, this only work properly (with a correct accent) in Chrome ...
To see what voices are available, you can check here

And it's used for this part (I only care about Deutsch):

    const voice = speechSynthesis.getVoices().filter((voice) => {
      return voice.name === "Google Deutsch";
    })[0];

To use this, I have a simple component that calls this service

@Component({
  selector: 'app-speech',
  standalone: true,
  template: `
  <form class="speech-form" [formGroup]="formGroup">
    <label style="margin-bottom: 10px">Please Insert German Word</label>
    <input formControlName="text" style="margin-bottom: 20px" />
    <button
      style="margin-bottom: 20px"
      (click)="handleButtonStartClick($event, 1)"
    >
      Say It
    </button>
    <button (click)="handleButtonStartClick($event, 0.4)">Say It Slowly</button>
  </form>
  `,
  styleUrls: ['./speech.component.css'],
  imports: [ReactiveFormsModule],
})
export class SpeechComponent {
  formGroup = new FormGroup({
    text: new FormControl('', [Validators.required]),
  });

  constructor(private speechService: SpeechService) {}

  handleButtonStartClick(e: Event, speed: number) {
    e.preventDefault();
    if (!!this.formGroup.controls?.text?.value) {
      this.speechService.start(this.formGroup.controls.text.value, speed);
    }
  }
}

There is a button to allows it to speak, and other that is set to say it slowly (0.4 speed), and believe me, to understand **Deutsch **words, I need it.

If you want to test it, just for it here on stackblitz

In the real app, it also have SpeechRecognition capabilities, maybe in the future I can share it as well.

Tell me what you thing, and if you find it interesting fell free to fork it and try it yourself.

Sharing styles between apps inside Nx workspace

Vitor Ferreira — Tue, 02 Jun 2020 10:11:14 +0000

In my current job we have decided to make the change into Nx workspace and with that we decided to create our very own Design System.

But I didn't want to maintain the same styles in more than one application.

Creating a lib for styles

The best solution for my case was to create a lib named ui for the styles:



nx generate @nrwl/angular:library ui

Then I moved the sass files into the library:

The problem now, is the @import in all the scss files.
How to make them recognize the correct files?
On angular.json on every project the path will have to be included.



"projects": {
    "ds-project": {
        "projectType": "application",
        ...
        "architect": {
            "build": {
                ...
                "stylePreprocessorOptions": {
                    "includePaths": [ "libs/ui/src/lib/styles" ]
                },
                "extractCss": true,
                ...

Now you can import the mixins on the scss files of your project just like if they were still part of the project:



@import "mixins/list_mixin";
@import "variables";

@include list_layout;

Even the base style, like font-family are importable.

Inside the style.scss of the project to became the global styles (for this case the module contains the global styles).



// styles.scss
/* You can add global styles to this file, and also import other style files */

@import 'module';

Conclusion

This solves easily a problem that could be an issue and I was somehow afraid to tackle, that is having global scss files shared between applications and easily maintainable with only one source of truth (the library).

If you have any suggestion of how I could do this differently, please share your ideas.

Dockerize Angular app and deploy on OpenShift

Vitor Ferreira — Sun, 03 May 2020 20:57:27 +0000

I've been experimenting with several tools and would like to share my latest experience:
Deploy an Angular application created with SSR inside a Nwrl Nx workspace, and then dockerize it and deploy on RedHat OpenShift.

Why use Angular with SSR?
I wanted to try to have a 100% lighthouse audit application, and despite my Angular experience, never worked on an angular project using server side rendering, so, building a personal website, was a good opportunity to experiment and have that 100% on performance.

Why chose RedHat OpenShift?
Simple, I like the red hat that the girls that promote the service use, and I have used AWS and Azure solutions. Also very important, they have a free option.

First Step (assuming the application already exist), creating the Dockerfile

### STAGE 1: Build ###
FROM node:lts-alpine AS build

#### make the 'app' folder the current working directory
WORKDIR /usr/src/app

#### copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

#### install angular cli
RUN npm install -g @angular/cli

#### install project dependencies
RUN npm install

#### copy things
COPY . .

#### generate build --prod
RUN npm run build:ssr

### STAGE 2: Run ###
FROM nginxinc/nginx-unprivileged

#### copy nginx conf
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf

#### copy artifact build from the 'build environment'
COPY --from=build /usr/src/app/dist/vitorspace/browser /usr/share/nginx/html

#### don't know what this is, but seems cool and techy
CMD ["nginx", "-g", "daemon off;"]

Remarks:
Had to use nginxinc/nginx-unprivileged due to problems on OpenShift with nginx permissions (thank you random stranger on stackoverflow that suggested it).

On package.json the script for build:ssr is
"build:ssr": "ng build --prod vitorspace && ng run vitorspace:server:production", remember, this is an angular application with server side rendering.

The nginx.conf configuration (I am trying a lighthouse 100% angular application, so I needed that):

server {
    listen 0.0.0.0:8080;
    listen [::]:8080;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    gunzip on;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

Second Step - sending docker image to dockerhub

You need a dockerhub account

Build the image
docker build -t vitorspace-image .

Run the image to test it
docker run --name vitorspace-container -d -p 8888:80 vitorspace-image

browser it http://localhost:8888/

Commit image
docker commit 21737e7ab73b vitorstick/vitorspace:v1

Tag image
docker tag vitorspace-image vitorstick/vitorspace

Push image
docker push vitorstick/vitorspace

Third Step - publishing it on RedHat OpenShift

Assuming you already have a account

Create OpenShift Project

Chose Workload Option and Select Container Image

Don't forget the docker image path, and then just say what will be your application path

On the bottom of the same form, on Advanced Options, just pick the Create a route to the application and you will have an url to try and share your application.

Conclusions

OpenShift have a lot of options, about pods, configurations, and a lot of other things, but honestly I am a developer, not a devops, and spending a lot of time changing yaml files does not bring me any joy, and that's what I really liked in OpenShift, it's super easy to use (after doing it the first time)

The main reason for me to create and share this article, was the pain I felt doing some of this things for the first time, and like me, maybe I can help some of you.

If you have any suggestion about anything, please share.