DEV Community: Yanaiara Oliveira

Como o Figma Virou Parte do Meu Dia a Dia no Front-End

Yanaiara Oliveira — Wed, 04 Dec 2024 12:44:17 +0000

Quem trabalha com front-end sabe o quanto o design está presente em tudo que a gente faz. Transformar aquelas ideias e layouts em algo funcional e bonito é quase uma arte, mas nem sempre a comunicação entre design e desenvolvimento flui como deveria. Era assim comigo até que o Figma entrou na minha rotina e mudou tudo.

Agora ele faz parte do meu dia a dia e virou uma ferramenta que eu realmente confio, porque não só facilita o meu trabalho, mas também me ajuda a entregar projetos muito mais alinhados.

De onde tudo começou

Antes do Figma, as coisas eram meio caóticas. Eu recebia designs em PDFs, imagens soltas ou arquivos que precisavam de ferramentas específicas pra abrir. Era aquela correria pra descobrir qual fonte foi usada, medir os espaçamentos ou perguntar o tom exato daquela cor. Hoje, com o Figma, tudo isso está na palma da mão.

Consigo acessar os arquivos com todas as especificações organizadas: medidas, fontes, cores… tudo ali, sem mistério. É como se a distância entre design e código tivesse desaparecido.

Os plugins que salvam a vida

Uma das coisas que mais me ajudou nessa transição foram os plugins. Eles tornam o Figma ainda mais funcional pra quem trabalha com desenvolvimento. Alguns dos que uso direto são:

- Autoflow: ideal pra visualizar os fluxos de navegação e entender melhor como as telas se conectam.
- Iconify: perfeito pra achar ícones direto no Figma e já encaixá-los no design.
- Stark: uma mão na roda pra checar contraste e acessibilidade (porque inclusão sempre está no radar, né?).

Esses plugins agilizam tanto meu trabalho que eu fico pensando como não usei isso antes.

Como o Figma conversa com o meu código

Pra mim, o Figma é mais do que uma ferramenta de design, é quase um tradutor entre o que está na tela e o que vai pro código. Quando vou criar um componente no Angular, por exemplo, uso o Figma pra validar interações, testar estados e já ter certeza de que o que estou construindo vai funcionar como o esperado.

Outro ponto que mudou muito foi o handoff entre design e desenvolvimento. Seja recebendo o layout de outra pessoa ou finalizando algo que eu mesma desenhei, o Figma deixa tudo claro e organizado. É como se ele antecipasse aquelas dúvidas que antes precisavam de várias mensagens e reuniões pra resolver.

Minha dica pra quem é dev

Se você trabalha com front-end e ainda não incorporou o Figma na sua rotina, sério, dá uma chance. Ele não é só uma ferramenta de design, é um parceiro de trabalho que facilita demais a nossa vida. Você vai perceber como o processo fica mais fluido e as entregas, mais assertivas.

E se você já usa, bora trocar ideia! Adoro descobrir como outras pessoas estão usando o Figma no dia a dia pra aprender ainda mais.

What’s Your Profession? And How Often Do You Exercise?

Yanaiara Oliveira — Wed, 27 Nov 2024 11:49:06 +0000

You know those moments when life hits you with a wake-up call that makes everything else stop? That’s exactly what happened to me recently when I was diagnosed with a herniated disc. But what struck me the most wasn’t the physical pain—it was the first question my doctor asked: “What’s your profession? And how often do you exercise?”

In that moment, I felt exposed. Admitting to him—and to myself—that I’d been neglecting my physical health was tough. It wasn’t just about the diagnosis; it was about realizing how I’d been treating myself. The truth is, I had been putting my body on the back burner while prioritizing everything that felt “urgent.”

The Wake-Up Call

If I’m honest, I always had excuses. “I don’t have time to exercise.” “Work is too busy.” “I’ll get to it later.” Sound familiar? But when the doctor asked me that simple question, I realized how much those excuses were costing me—not just my health, but also my well-being and even my productivity.

He explained that the issue wasn’t just the herniated disc; it was my lifestyle. Sitting for long hours, skipping breaks, and being glued to my desk were all contributing factors. What hit me the hardest was when he said that taking care of your body isn’t just about avoiding problems—it’s about living better, with more energy and joy for the things you love.

The Cost of Neglect

What I didn’t realize before was how much ignoring my body was affecting my ability to work and function. The constant aches, the fatigue, and even my lack of focus on simple tasks were all warning signs I’d been brushing aside. It’s ironic—while I thought I was “saving time” by skipping exercise, I was actually losing more than I could imagine.

Now, I understand that movement and productivity go hand in hand. It’s not about spending hours at the gym; it’s about finding small ways to incorporate movement into your day. Even the smallest steps can unlock energy you didn’t know you had.

And You? How Are You Taking Care of Yourself?

I know life can be hectic, and it may feel impossible to add one more thing to your day. But trust me, taking care of your body isn't a luxury—it’s a necessity.

💡 Do you know the different units of measurement in CSS? px, em, rem, vh, and vw! 💡

Yanaiara Oliveira — Sat, 09 Nov 2024 13:35:30 +0000

💡 For those working in front-end development, understanding these units makes all the difference in creating responsive layouts that adapt to any screen. Let's take a quick look at the main ones:

👉 px (Pixels)
The well-known "pixel" is a fixed, absolute unit, meaning it doesn’t change. It’s great when you need an exact size and want the element to appear the same on any device. Example: font-size: 16px;

👉 em
Here’s where things get interesting! The em unit is relative, meaning its value depends on the font size of the parent element. This makes em super useful for flexible layouts. Example: if the base size is 16px, then 2em would be 32px. Everything depends on the context! 😊

👉 rem (Root EM)
Similar to em, but instead of relying on the parent element, it uses the font size of the root element (the ). This helps maintain consistent sizes across the site. If has font-size: 16px, then 1rem will always be 16px.

👉 vh (Viewport Height)
This unit is based on the height of the screen (viewport). 1vh represents 1% of the visible screen height. It’s great for defining elements that occupy a specific portion of the window's height, like a banner that covers the full screen (height: 100vh;).

👉 vw (Viewport Width)
Similar to vh, but based on screen width. 1vw equals 1% of the screen width, and it’s commonly used for elements that should take up the full window width (width: 100vw;).

Quick Summary:
px: For fixed and specific sizes.
em: When you want the element to be flexible and context-dependent.
rem: For consistent global sizes (like font sizes).
vh and vw: For elements that need to adjust to screen size, like full-screen layouts.
These units are the secret to building interfaces that adapt to various devices. 🌐

CSS #Frontend #WebDev #ResponsiveDesign #DevTips #CSSUnits #WebDevelopment

💡 Você conhece as diferentes unidades de medida em CSS? px, em, rem, vh e vw! 💡

Yanaiara Oliveira — Sat, 09 Nov 2024 11:56:48 +0000

Para quem trabalha com desenvolvimento front-end, entender essas unidades faz toda a diferença para criar layouts responsivos e que se adaptam a qualquer tela. Vamos dar uma olhada rápida nas principais:

👉 px (Pixels)
O famoso "pixel" é uma unidade fixa e absoluta, ou seja, não muda. Ele é ótimo quando você precisa de um tamanho exato e quer que o elemento fique igualzinho em qualquer dispositivo. Exemplo: font-size: 16px;

👉 em
Aqui as coisas começam a ficar interessantes! O em é uma unidade relativa, ou seja, seu valor depende do tamanho da fonte do elemento pai. Isso faz com que o em seja super útil para criar layouts flexíveis. Exemplo: se o tamanho base é 16px, 2em será 32px. Tudo depende do contexto! 😊

👉 rem (Root EM)
O rem é parecido com o em, mas ao invés de se basear no elemento pai, ele usa o tamanho da fonte do elemento raiz (o ). Isso ajuda a manter tamanhos consistentes pelo site. Se o tem font-size: 16px, então 1rem sempre vai ser 16px.

👉** vh (Viewport Height)**
Essa unidade é baseada na altura da tela (viewport). 1vh representa 1% da altura visível da tela. É ótima para definir elementos que ocupem uma parte específica da altura da janela, como um banner que cubra a tela inteira (height: 100vh;).

👉 vw (Viewport Width)
Parecida com o vh, mas baseada na largura da tela. 1vw equivale a 1% da largura da tela, e é muito usada para criar elementos que ocupem toda a largura da janela (width: 100vw;).

Resumo de quando usar:

px: Para tamanhos fixos e específicos.
em: Quando você quer que o elemento seja flexível e dependa do contexto.
rem: Para manter uma consistência global (como em tamanhos de fonte).
vh e vw: Para elementos que precisam se ajustar ao tamanho da tela, como layouts full-screen.
Essas unidades são o segredo para criar interfaces que se adaptam a diferentes dispositivos.

CSS #Frontend #WebDev #DesignResponsivo #DicasDeDev #UnidadesCSS #DesenvolvimentoWeb

🚀 5 Browser Extensions That Will Boost Your Development

Yanaiara Oliveira — Mon, 04 Nov 2024 22:38:24 +0000

Hey, devs! 👋 If you're like me and love finding new ways to optimize your workflow, these tips are for you. I've picked the 5 browser extensions that I use daily and that really make a difference in my development process. Let’s dive in!

1. React Developer Tools ⚛️
If you work with React, this extension is a game-changer. It lets you explore the component tree, view props, hooks, and children in a clear way. It's a must-have for debugging and understanding what's happening in your app. Trust me, you won't want to code without it!

2. Light House 🚦
Want to know how healthy your website is? Light House is perfect for analyzing performance, accessibility, SEO, and best practices. It's like getting a full check-up for your page with just one click. Perfect for those who aim to improve user experience consistently.

3. GoFullPage 📸
Ever needed to take a full-page screenshot and ended up piecing together multiple images? With GoFullPage, that's a thing of the past! One click, and you get the full screenshot, all set. Super convenient!

4. ColorZilla 🎨
This one’s for all the design lovers! ColorZilla is the go-to eyedropper tool that lets you pick any color from a webpage and create custom palettes. See a color you like? It’s yours in seconds.

5. WhatFont 🅰️
Have you ever wondered, “What font is that?” while browsing? WhatFont has you covered. It helps you find out font names, sizes, weights, and more by simply hovering over the text. Quick and effective!

These are the extensions that are part of my dev survival kit and truly make my day-to-day work easier. Which of these do you already use or feel like trying out? Better yet, do you have another must-have extension that should be on this list? Drop it in the comments! Let’s share knowledge and keep learning together. 🚀💬

Angular vs. ReactJS: Which One Should You Pick for Your Next Project?

Yanaiara Oliveira — Thu, 24 Oct 2024 18:34:09 +0000

If you're deep in the front-end dev world, you've probably faced the classic dilemma: Angular or ReactJS? 🤔 Both are super popular and have their own perks. In this post, I'm going to compare the key advantages of each to help you decide which one to go with for your next project. Let’s dive in!

🅰️ Why Angular is Awesome

1. 🏗 Complete Architecture
Angular is like an all-in-one kit that comes with everything you need to start a project: routing, dependency injection, testing tools, and even HTTP request handling. It's perfect for devs who like everything organized right from the start and don’t want to spend time setting up.

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
  return this.http.get('https://api.example.com/data');
}

2. 💻 TypeScript Built-In
Angular and TypeScript are inseparable. And trust me, that’s a huge win! With static typing, your code becomes more secure, and you can avoid those sneaky bugs that show up at runtime. Plus, TypeScript’s autocomplete is a game-changer!

3. ⚙️ Powerful CLI
The Angular CLI is every dev's best friend. Need to create a component? A service? A module? Just run the right command, and boom, it’s done. Oh, and it takes care of production optimizations too, so no headaches there.

ng generate component my-component

4. 🛠 Native Dependency Injection
Angular’s dependency injection is super smooth. It means that instead of dealing with messy integrations or workarounds, you can split and organize your code easily and efficiently.

@Injectable({
  providedIn: 'root',
})
export class MyService {}

5. 🔄 Regular Updates and LTS
The Angular team doesn’t play around. They provide regular updates and long-term support (LTS), so if you're working on a big, long-term project, Angular might be your best bet for stability

⚛️ Why ReactJS is So Popular

1. 🌿 Flexibility is the Name of the Game
If you love customizing everything, React is your go-to! It’s more of a library focused solely on the UI (View), so you get the freedom to choose your own tools and libraries for everything else. More flexibility than that? Only an Olympic gymnast! 🤸‍♀️

function MyComponent() {
  return <h1>Hello, React!</h1>;
}

2. 🔥 Huge (and Super Active) Community
The React community never sleeps. The ecosystem is massive, packed with libraries and plugins to solve just about any issue you might face. And the best part? The documentation and tutorials are always up to date, so you’ll never feel stuck.

3. 🚀 Ninja-Like Performance with Virtual DOM
React’s Virtual DOM is the secret sauce behind its speed. It handles updates super efficiently, making it ideal for dynamic interfaces with frequent state changes. If performance is a priority, React’s got you covered.

4. 🎣 Hooks: A New Way to Manage State
With Hooks, React changed the game. Now you can manage state and component lifecycles in a simple, elegant way—no need for classes, and your code stays clean.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

5. 📱 React Native: A Bonus for Mobile Apps
Thinking about going mobile? React Native is a big plus. It lets you use your React knowledge to build native apps for iOS and Android. A huge win for versatility!

So, Which One Should You Choose?

At the end of the day, both are awesome and will help you build amazing projects. The key is to understand your project’s needs and your team’s workflow.

And you, which one do you prefer? Let’s chat in the comments and share some experiences! 🚀