DEV Community: Thaísa Vieira

It's dangerous to go alone! Take this.

Thaísa Vieira — Thu, 26 Dec 2024 04:28:31 +0000

I want to talk about GitAnimals which is an incredible project that allows you to grow pets through GitHub activity, it keeps you motivated to commit to using cute and funny pets.

I’m a late ’90s kid who was always passionate about virtual pets, during my childhood and teenage years I had a lot of Tamagotchi (and I got so sad when they died) and I spent a lot of hours with games like Neopets, if you’d like to have a bit of this nostalgic feeling while studying/working GitAnimals it’s a great choice! Would you like to meet to learn more about this project?

Starting to grow your pets is simple, you can easily do it by going to the GitAnimals homepage and clicking on “Have Pet”, the bottom will direct you to your GitHub account asking for authorization to access your public data. After accepting, you will be redirected to the GitAnimals website for customization. You can buy pets with commit points or get a new random one when you accumulate 30 commits.

As you can see on the project homepage you can add your pets to your GitHub profile, be it just your main pet or all your pets in "Farm" mode and it’s important to highlight that you have more than 50 options of pets and you can see them all at their GitHub Documentation. As a cat person, I chose a Galchi Cat cause it looks like my old companion Nina who crossed the rainbow bridge recently but they even had special pets for commemorative dates, slimes, and pets with slack tags (Penguin Linux with a Penguin Linux is so good and I hope to get one pretty soon). Now, it’s your time to go and choose your favorite pet!
If you like this project idea, create your pets and share them with our community, give a star to their repository, and if you have any ideas or want to make it even better read the docs and contact them.

May cute virtual pets help you on your journey!

Frontend Challenge (CSS Art): Retro gaming console

Thaísa Vieira — Sat, 03 Aug 2024 12:42:14 +0000

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Inspiration

When I was 4 or 5 years old my mother bought me a Super Nintendo 98 with a few games like Super Mario World, The Lion King, Top Gear, Mortal Kombat, Castlevania: Dracula X, Jurassic Park III, Contra III, Mario Paint, Donkey Kong Country, Samurai Shadown... Also, my mother was my gaming partner, like me, she started to love video games. Many years after, when I was in my 20s one of my eight cats needed an expensive surgery and we had to sell the console and the games to cost a treatment. It's a pity but we had to do it for a better cause. Since my childhood, I have kept in touch with a few other games and consoles but Super Nintendo was always my favorite. Also, it's important to add that with time my gaming sessions were getting shorter and shorter, other responsibilities were demanding more time.
Recently, on my birthday, my boyfriend had the incredible idea of giving me a Miyoo Mini Plus, a compact and portable handheld gaming console, that I can carry everywhere and enjoy a cozy relaxing time during my lunchtime at work, for example. So, MM+ has been my recreation partner and was the first thing I thought about when I saw this challenge, I hope you enjoy it!

Demo

CodePen embed link:

Journey

While learning CSS, as a beginner, my focus was to understand how the properties work and use them to build what I needed to, with this in mind, the first time I saw CSS Art I was shocked, at how it was even possible. So, to practice, I started to do daily challenges from CSSBattles, and it improved my skills in drawing various kinds of shapes. I'm proud to understand what everything does and even make it cleaner.

CSS Battles: 100% match at daily target (28/06/2024)

Thaísa Vieira — Sat, 29 Jun 2024 02:23:40 +0000

It has been a while since I've used some minutes from my side job to solve daily targets from CSSBattles, it's quite relaxing and fun drawing those different and colorful designs. Usually, I have less than thirty minutes to complete the challenge and today I got a 100% match.

Here's the source code:

<div class='container'>
  <div class=rectangle-1></div>
  <div class='rectangle-2'></div>
  <div class='rectangle-3'></div>
  <div class='rectangle-4'></div>
</div>
<style>
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  .container {
    width: 100%;
    height: 100%;
    background-color: #6592CF;
  }

.rectangle-1, .rectangle-2, .rectangle-3, .rectangle-4{
    background-color:#243D83;
    position: relative;
}

.rectangle-2,.rectangle-4{
    width:110px;
    height:150px;
}

.rectangle-1{
  width:280px;
  height:90px;
  left:60px;
}
  .rectangle-2{
    top:60px;
    left:60px;
  }
  .rectangle-3{
    width:60px;
    height:90px;
    bottom:30px;
    left:170px;
  }
  .rectangle-4{
    left:230px;
    bottom:180px;
  }
</style>

And that's the result I got:

Since I started looking for other users' solutions I've seen them using properties like box-shadow, as you can see in the video below:

It's important to note that while my solution got almost 800 characters, others who used box-shadow had 200 characters maximum, so my goal for the next week will be to learn how to use box-shadow for drawing shapes and improve my daily target performance.

The CSSBattle site is user-friendly and the code output has the advantage of showing the difference between what you are building and what you need/would like to achieve (target). Also, they provide the hex codes for the colors present in the project and the functionality to share the results on Twitter. Would you like to join?

Let's talk about CSSBattles

Thaísa Vieira — Wed, 26 Jun 2024 21:22:53 +0000

Recently I discovered a great website to exercise my CSS skills in a different way daily. CSSBattle offers every day a different "target", a design you should make as close as possible with CSS. I highly recommend it cause it helps me to get more familiar with CSS proprieties like margin, padding, display, and more.
Would you like to join and/or share your results with me? I'm always looking for new ways of doing the target cause sometimes I think I did it the hard way.

HackerRank Challenges

Thaísa Vieira — Sat, 22 Jun 2024 03:00:36 +0000

I'm trying other websites to exercises DSA and I started with HackerRank, 10 days of JavaScript. In this journey my focus is to spend the necessary time to think, search and solve the problems, without being so fixed with deliver challenges in the right days.

Also, I'd like some help with a basic problem with loop:
10 Days of JavaScript - Day 2 (In the link you can check the problem and the see the complete code).
The main problem is to complete the vowelsAndConsonants function that print each vowel in on a new line in the same order as it appeared and after do the same thing for consonants too.

What I did was start with an array storing the vowels and separe in two parts, vowels and not vowels.
In the for loop I started a counter that started at zero, was smaller than the size of the string that the user would provide and the step would be i = i + 1. Then I ask console.log to display the string entered by the user within the function conditions according to the for loop.

function vowelsAndConsonants(s) {
    let vowels = ['a', 'e', 'i', 'o','u'];

    for(let i=0; i<s.lenght; i++){
    if(vowels.includes(s[i]))
    console.log(s[i]);
    }


    for(let i=0;i<s.lenght;i++){
    if(!vowels.includes(s[i]))
    console.log(s[i]); 
    }

}

input:

javascriptloops

my output:

~ no response on stdout ~

expected output:

a
a
i
o
o
j
v
s
c
r
p
t
l
p
s

In the exercise itself there is a main function that calls the function vowelsAndConsonants and captures what the user types.
But I'm not understanding what I'm doing wrong for my output don't return anything. Someone can help me?

Frontend Challenge: June Edition

Thaísa Vieira — Sat, 08 Jun 2024 13:22:40 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

Brazil, almost in its entirety, is located in the Southern Hemisphere, which means that in June temperatures begin to drop. So it's time to take the covers out of the closet, rediscover your winter clothes, and start dreaming about typical dishes. When I think about this season the first thing that comes to mind is the hot chocolate that my mother makes every year. This drink has a sentimental flavor, it is the comfort of winter and I would like to share it.

Demo

Here it is, a mug of chocolate. Unfortunately, it has already been waiting for you for a while while you finished a game of chess with your cat and it is no longer warm.

Journey

When the DEV Community released the first frontend challenge I was so excited about contributing and participating but at the time I had no experience with CSS art, so I started searching about the topic and found CSSBattle. I joined some challenges last month to learn how to use CSS proprieties to draw shapes. I struggled at first, like everything we start learning but it worthed and I'm proud of my everyday results. As you can see, there's no smoke in this "hot" chocolate cause I don't know yet how to do it, of course, there are a lot of tutorials but due to the submission, I wasn't about to take the time and learn how to do it. If I have done a hot chocolate for today it will be a copied hot chocolate mug and this isn't the way I like to deceive my learning progress.

Soon, I'll take time to learn how to do hot chocolate and other things with vapor or the same logic used. Also, I'd like to add the chess table and the cat (of course).

To finish, I'd like to thank all de DEV members for making this community a safe space to learn and share many things.

NFT Preview Card Component Challenge from Frontend Mentor

Thaísa Vieira — Wed, 01 May 2024 23:00:45 +0000

Have you ever heard about Frontend Mentor? It's a website where you can improve your coding skills by building real-world projects professionally designed to help students of all levels practice HTML, CSS, and JavaScript. Also, since you made the challenge as close as the desired design you can use all the tools you like. Learning a new library? Testing your knowledge in fundamentals? Frontend Mentor is the right place to challenge yourself.
While in my studies I always keep something in mind:

"You can't cross the sea merely by standing and staring at the water" - Rabindranath Tagore

So, that is why Frontend Mentor is important in my weekly study schedule.

About the challenge

The NFT Preview Card Component is a challenge with HTML and CSS only, very indicated for newbies and beginners who want to test their skills with semantic HTML and flexbox CSS, also it's has a very important detail with a hover effect in the product image that will be discussed forward.

For this challenge, the goal is to build this preview card component and get it as close to the design as possible.

Desktop design:
Mobile design:
Active state design:

It's important to remember that the Sketch and Figma design file access can be unlocked with Frontend Mentor PRO (clicking on this link you can read more about it), these files contain things like the size of padding, margins, fonts, and image. Unfortunately, I don't have the PRO, so everything I have done was with the PerfectPixel extension from Chrome/Brave.

My first step, as always, was to divide the design into smaller parts:

For building this, I use simple things like Paint but the most important idea is to "see" those blocks, avoiding the anxiety of coding without thinking.

The first thing we have is a container, which will be our main section. Inside this container, we will have an image, a title, a subtitle, a price, and a "countdown" in a row, a single line, a profile image, and the name of the author with some text in a row. The hover effect is present in the "product" image, title, and in the author's name.

Note that to position the elements like the container, price, countdown, and profile image with the author's name we will use the flexbox propriety.

Here we have the HTML structure:

<body>
  <main>
    <div class="container">
      <picture class="product">
        <a href="#" class="image-link"><img src="./src/images/image-equilibrium.jpg" alt="Equilibrium ilustrated" class = "image"></a>
      </picture>
      <h1 class="title">Equilibrium #3429</h1>

      <h2 class="description">Our Equilibrium collection promotes balance and calm.</h2>

      <div class="relevant-data">
        <p class="price"> <img src="src/images/icon-ethereum.svg" alt="Ethereum icon"> 0.041 ETH</p>
        <p class="time-left"> <img src="src/images/icon-clock.svg" alt="Clock icon">3 days left</p>
      </div>
      <hr>
      <footer>
        <picture>
          <img src="src/images/image-avatar.png" alt="Author profile picture" class="profile-picture">
        </picture>
        <p class="author">Creation of <span>Jules Wyvern</span></p>
      </footer>

  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://github.com/thaisavieira">Thaísa Vieira</a>.
  </div>
  </main>

</body>

Before we go to the CSS structure let's declare some variables on a separate file called variables.css:

:root{
    --primary-soft: hsl(215, 51%, 70%);
    --primary-medium:hsl(178, 100%, 50%);

    --neutral-dark:hsl(217, 54%, 11%);
    --neutral-dark-medium:hsl(216, 50%, 16%);
    --neutral-soft:hsl(215,32%,27%);
    --white: hsl(0, 0%, 100%);
}

When we download a new project/challenge on Frontend Mentor we already have some other variable names, like:

- Very dark blue (main BG): hsl(217, 54%, 11%)
- Very dark blue (card BG): hsl(216, 50%, 16%)
- Very dark blue (line): hsl(215, 32%, 27%)
- White: hsl(0, 0%, 100%)

But if Frontend Mentor gives some variables names, why create other ones? The main idea is, in case the designer/client wants to change colors it'll be easier.

And the CSS struture:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body {
    font-family: "Outfit", sans-serif;
    background-color: var(--neutral-dark);
}

main{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.container{
    width: 35rem;
    height: 58rem;
    border-radius: 1.5rem;
    background-color: var(--neutral-dark-medium);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    gap: 2rem;
}


.title{
    font-size: 2.3rem;
    font-weight: 400;
    color: var(--white);
    cursor: pointer;
}

.description{
    font-size: 1.8rem;
    letter-spacing: 0.15rem;
    font-weight: 400;
    color: var(--primary-soft);

}


.relevant-data{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.price{
    color: var(--primary-medium);
    font-weight: 500;
    font-size: 1.6rem;
    display: flex;
    align-self: baseline;
    gap: 0.5rem;

}

.time-left{
    color: var(--primary-soft);
    font-size: 1.6rem;
    display: flex;
    align-self: baseline;
    gap: 0.5rem;
}

hr{
    border-color: var(primary-soft);
}

footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    color: var(--primary-soft);
    font-size: 1.6rem;

}

footer span{
    color: var(--white);
    cursor: pointer;
}

.profile-picture{
    height: 2.6rem;
}

.attribution {
    font-size: 1.1rem;
    text-align: center;
    padding-top: 2rem;
    color: var(--white);
  }

  .attribution a {
    color: var(--cyan);
  }

And now, it's time to focus on the active state parts.

The hover effect

The hover effect is made by the :hover CSS selector and is used to select elements when you mouse over them and the element responds with transition effects. That's a great way to enhance the user experience. Here's a CodePen example.

First, we will look again at the title and the author's name.

Product title

      <h1 class="title">Equilibrium #3429</h1>

Author's name

        <p class="author">Creation of <span>Jules Wyvern</span></p>

The hover effect:

 .title:hover, footer span:hover{
    color: var(--primary-medium);
}

The :hover pseudo-class is triggered when the user hovers over the element with the pointer and it changes the appearance of the element while it is being used. This is a pretty simple part (note that I used the word simple and not easy!).

About the Equilibrium image effect

Now, let's look at the class .image-link. When the user hovers over the Equilibrium image it changes to image opacity, adds a background color, and shows an icon on top of the product image, so it's a little bit more complex than our last case.

To divide this task into smaller parts I asked some questions myself:

Question 1: What's the content I wanna to insert?
Answer 1: The view icon.
Question 2: Is the icon the only thing I need to add?
Answer 2: No, I need to change the background color too.
Question 3: How do I need to it show up in the design? What'll happen to the original image?
Answer 3: I need the original image "stay behind", to appear and disappear smoothly when the user hovers over the element.

Starting with basic styles:
(Attention to specificity!)

.container .image-link{
    position: relative;
    display: flex;
    cursor: pointer;
}

.container .image-link .image{
    width: 100%;
    border-radius: 1rem;
}

Let's analyze these proprieties.
In the "first div", we have the position: relative which allows the element to change the position, accepting values as top, bottom, left... Also, we have the display: flex propriety to align the element. Now, when we look at the "second div" we are talking about the inner part, the image itself, so we will need the image covering all the div (.image-link) width and a border radius for rounding corners of the image.

To create the effect we want we will need:

.container .image-link::before;
container .image-link:hover::before;
.container .image-link::after;
container .image-link:hover::after.

Are you familiar with pseudo-elements? You can check a short and useful explanation on CSS-Tricks and also try to play a bit with this project on CodePen, it may help to understand what each property do.

Starting with .container .image-link::before:

.container .image-link::before{
    content: '';
    background-color: var(--primary-medium);
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: 0.3s ease-in-out;
}

.container .image-link:hover::before{
    opacity: 0.4;
    border-radius: 1rem;
}

So in this part, we have our element .image-link and we want to add the color when the user hovers and disappears slowly after it.
We start with .container .image-link::before where we had the content property which is used with ::before and ::after pseudoelements to generate content in an element, in our case, we only want a new color. Properties like height and width are used to adjust the size of the new background color on the image.link div. Now, it's important to understand the main idea with the opacity, on the W3 website it's possible to see some practical examples of how opacity numbers can affect an image. For our situation, an opacity of 0 will give us an image transparent but when we see the .container .image-link:hover::before we have an opacity: 0.4; which means that we will be able to see the image but with a little bit of transparency. The lower the value, the more transparent.

Now, let's work on the most difficult part for me, the icon hover.

{
    content: '';
    background: url(../images/icon-view.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.3s ease-in-out;
}

.container .image-link:hover::after{
    opacity: 1;
}

Before we start it's important to review your folder paths, an error on the URL background can make you burn some nerves no need. If you're facing something like the icon only pops up locally but when you deploy on GitHub Pages it disappears, it's quite sure the URL is the problem.
When we work with .image-link::after we have the content + background responsible for adding the image, also proprieties like background-position and background-repeat are important for letting our project with a single image well positioned, like the design. And to finish we had our opacity and transition, one for working with transparency and the other for letting things smooth.

It's my first time writing such a "long" post like this talking about my experience (with strong points, doubts, and difficulties) and I'd like to know if it is possible to make it clearer and how to make it even better.

Also, you can check the project here:

Repository: https://github.com/thaisavieira/nft-preview-card-component
Live website: https://thaisavieira.github.io/nft-preview-card-component/
Frontend Mentor profile: https://www.frontendmentor.io/profile/thaisavieira

My experience on the Public Speaking Challenge

Thaísa Vieira — Fri, 26 Apr 2024 00:22:39 +0000

Last year I discovered the DEV Community and since then this has been my favorite place to learn, share my learning journey, participate in challenges, and meet new people. I love to spend time in #discussion, debating about something, on "Welcome Thread" and moderating some novices and beginners posts too. On April 1st, @bekahhw from Virtual Coffee made a post inviting anyone in the community to join a challenge of Public Speaking. The main idea was to choose a topic, develop a well-structured and engaging talk, and present it at the end of the month, all the process was guided by the community with tips and tasks for each week. I loved the idea and was so excited about it.
For the first week, I've chosen my topic, I'd like to talk a bit about Linux and open-source projects. Things like studying OS, testing a new distro on my desktop, and completely diving into the OSSU (Open Source Society University) influenced my choices directly.
Then, I had to face one of my biggest difficulties, writing an outline with an introduction, development, and conclusion. For this presentation, each participant had 5-10 minutes to a lighting talk and I was afraid of writing something so superficial without connection or with big jumps between subtopics. As a non-native English speaker, I made an immersive month to get even more used to the language, listen to more music, watching even more videos (especially with my boyfriend whose have helped me so much with this and our long talks about OS and Kernels).
In the last week, the focus was on delivering and I did my best to don't get nervous and just try to face this as a normal talk. I have to admit that I loved to spend time creating a slide presentation like I did a lot in my Physics Bachelor for countless experiments and projects.
I have searched a lot about the Virtual Coffee community and I loved the main idea of mutual support and the meeting styles. Also, I'm on the waiting list and I hope to be in the Lightning Talks in the next year and join more and more challengers.
As how I promised, here's my presentation video:

I love this experience and I'll surely continue with this.
For now, I can't deliver such a good webcam image quality but I'll improve it very soon.
Also, feel free to connect with me, I'd love to extend the conversation or to receive some feedback.

Public Speaking Challenge

Thaísa Vieira — Tue, 23 Apr 2024 03:51:32 +0000

So, I'm refining my talk with a draft that contains an intro, main development, and conclusion. Also, I recorded myself speaking a short introduction (less than 2 minutes) and it was terrifying!
For the next and final step, I'd like some tips to record my presentation, I'd like to use a presentation and a webcam and my first thought was about using Google Meet for it but the record option now is just for premium users. Any tips? I'm afraid I can't deliver the best audio for the presentation too.

Don't know what I'm talking about? Check this out: Public Speaking Challenge. Let's do it together!

The only way to improve is to start!

I'm ready to dive into #PublicSpeakingChallenge

Thaísa Vieira — Fri, 05 Apr 2024 12:54:18 +0000

Hello, World!

I met this amazing project on April 2nd and immediately started to think about what kind of theme I should bring.
First of all, watching the previous editions of Lighting Talks I found a great range of topics and so many interested people I'd love to talk more about the matter they have brought.
For this edition, I'd like to invite more people to join such a great experience to challenge themselves, like me. I'm terrible at public speaking, especially when I'm talking about tech cause I feel so small and everything I say sounds wrong in my head. By now, I'd like to overcome this by bringing a brief introduction to what Linux is and what it isn't, what is Kernel, why the comparisons with Windows and Mac are strange and meaningless, the importance of open source, and how we end up using it daily without even being aware of it.

Is this topic a good choice for the challenge?

If you don't know what I'm talking about you can find more information in this post.

Productive tools to track your focus

Thaísa Vieira — Wed, 20 Mar 2024 02:15:21 +0000

As a self-taught student, I must use all my efforts to keep my mind without distractions to keep good progress while studying. Lately, I've been using the Pomodoro technique and it has become a hobby to know some websites of this productive tool. What's your favorite one? I'd like to know some websites to allow the user to see your focus progress and make some interactions with others inside the platform.

PS.: Unfortunately, I have been having trouble with LifeAt, frequently, the timer stops and I lose track of my progress.

Please, share your favorite Pomodoro website and tell me why you love it!

Spending a cozy time with Flexbox Froggy

Thaísa Vieira — Wed, 06 Mar 2024 01:12:05 +0000

Actually, I'm a CS student focused on web development with a full-time job. Sometimes, it's pretty hard to arrive home after long eight hours working in customer service and sit in front of a PC and study or even stay awake. In an attempt to relax my thoughts but keep my studying progress, I'm spending time playing Flexbox Froggy, a cozy game to practice flexbox skills. I'm pretty recommend it!