DEV Community: Guilherme Moraes

How to have your portfolio up-to-date with your published articles

Guilherme Moraes — Thu, 28 Mar 2024 21:00:00 +0000

Let's use the public dev.to API to query the last articles. Take a look at how it looks: link.

TL;DR: Using dev.to public API endpoint https://dev.to/api/articles?username=${your_username} will give you a JSON array with enough information to integrate it into your website. This article demonstrates the step-by-step process of ensuring your portfolio remains dynamic and up-to-date with your most recent content and a fancy card to show your links. You can check the code in this link

The Scenario

You have a portfolio website showcasing your work, but manually updating it with your latest articles becomes tedious and time-consuming. Enter the dev.to public API to automate this process and keep your portfolio fresh with minimal effort and it's reactions and comments always up-to-date.

Getting Started

Of course, I'll not only throw a concept to you, and let you find out how to use it, let's create a card to show the articles into a website using vanilla HTML, CSS and JS.

The structure

To make things easier, I'll put the HTML and CSS right below, using the pretty plum color, same I had used in my own portfolio.

<!-- HTML -->
<html lang="en">
  <body>
    <ul id="wrapper"></ul>
  </body>
</html>

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

#wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  justify-content: center;
  max-width: 600px;
  margin: auto;
}

.item {
  list-style: none;
}

.item a {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  color: white;
  background-color: rgba(73, 33, 59, 0.9);
  transition: background-color;
  border-radius: 4px;
}

.item a:hover {
  background-color: rgba(73, 33, 59, 0.95);
}

Good, now let's add some magic into it.

/* JavaScript */
const wrapperEle = document.querySelector("#wrapper");

fetch("https://dev.to/api/articles?username=guimoraes")
  .then((res) => res.json())
  .then((articles) => {
    articles.forEach((article) => {
      const itemEle = document.createElement("li");

      itemEle.classList.add("item");
      const anchorEle = document.createElement("a");

      anchorEle.innerText = article.title;
      anchorEle.href = article.url;

      itemEle.appendChild(anchorEle);
      wrapperEle.appendChild(itemEle);
    });
  });

Ok, but what's this code doing?
The step-by-step process is the following.

First, we save the ul tag in a variable to reuse it in the future to attach the items inside of it;

Second, the reason for all of it fetch the articles from dev.to API endpoint. While this returns a JS Promise, we need to use the method then to work with asynchronous code, so let's first parse JSON response into native JavaScript objects, and we are ready to work with the articles already.

At this stage, we have an array of objects with useful values like "title, "URL", etc. Let's use these values to create a link card that sends the user to the article itself from our portfolio.

Third, we will use the array method forEach to create an element for each article in that array. Using document.createElement method will allow us to create a new element inside the loop, so we will create two elements, first a li element, because we are creating an unordered list (ul) to wrap the content up, so the children of a list should be a list item, and an anchor element with a hyperlink to the article.

Last, but not least, let's use the method appendChild to append the anchor inside the list item, and the list item inside the unordered list.

And our result is

Great, so that's it, right? No, please, copy a link and a title is too simple

Next step, add metadata to the card.

Each article has some really important metadata that's great to show more about your article and the people interacting with it.

Let's select some data to add to the card.

For this tutorial, I'll pick only two keys of the article object, the reading_time_minutes, and positive_reactions_count to add to the card.

Let's change the CSS a bit.

Remove the underline from the wrapper
Add a title element.
add a metadata wrapper to change the flex-direction of its children to row.

/* CSS */
.item a {
  text-decoration: none;
}

.item a .title {
  text-decoration: underline;
}

.item a .metadata-wrapper {
  display: flex;
  gap: 12px;
}

Now the javascript.
It's basically the same structure from the initial.

const titleEle = document.createElement("p");
titleEle.classList.add("title");
titleEle.innerText = article.title;

const metadataWrapperEle = document.createElement("section");
metadataWrapperEle.classList.add("metadata-wrapper");

const thumbsUpEle = document.createElement("p");
thumbsUpEle.innerText = "thumbs up: " + article.positive_reactions_count;
const clockEle = document.createElement("p");
clockEle.innerText = "time to read: " + article.reading_time_minutes;

metadataWrapperEle.appendChild(thumbsUpEle);
metadataWrapperEle.appendChild(clockEle);

anchorEle.href = article.url;

anchorEle.appendChild(titleEle);
anchorEle.appendChild(metadataWrapperEle);

Result

** Final code: https://codepen.io/guiimoraes/pen/GRLMKep**

Conclusion

By using the dev.to public API, you can automate the process of keeping your portfolio up-to-date with your latest articles, and their last metadata. This not only saves time but also ensures that your portfolio remains dynamic and reflective of your current work.

Let's keep our portfolios fresh and engaging together! 👨‍💻✨

Check out my links

Website: https://www.guimoraes.dev/
Linkedin: https://www.linkedin.com/in/guimoraesdev/

If you find any error or just want to say hi, leave a comment below.
See ya! 👋

Why { ...defaultValues, ...newValues } can hide a bug

Guilherme Moraes — Fri, 22 Mar 2024 14:39:10 +0000

Using the spread operator to create a new object using other objects is not unusual, but what happens if both objects have the same key?

TL;DR: This article explores a common issue with the spread operator in JavaScript when merging objects with overlapping keys and potentially falsy values. It explains how the spread operator can override default values with null or falsy values, leading to unexpected behavior. The article offers two solutions: a simpler one that directly checks and assigns values based on truthiness and a more scalable approach using Object.entries and Object.fromEntries to filter out falsy values before merging.

The scenario

You are creating a new object in Javascript with default values and want to update it with new values from another object.

Knowing that JavaScript has spread operator since ES6, you use the following structure.

const defaultValues = {
    foo: "Bar",
    number: 30,
    fruit: "banana"
}

const newValues = {
    foo: "Baz",
    number: 40,
}

const outputValues = {
    ...defaultValues,
    ...newValues
}

What is the expected output?

You are right if you say that the newValues object will update the outputValues object.

// { foo: "Baz", number: 40, fruit: "banana" }

Great, so it's done, right?!
Hmm... maybe not

The issue

When using the spread operator to create a new object, we are not making any validation about the values coming from the newValues object, which can cause some weird results.

The possible problem

If you need to have the defaultValuesobject to be replaced only by truthy Javascript values, you have a bug in the previous code.

Given the same last scenario, but a different object newValues.

const defaultValues = {
    foo: "Bar",
    number: 30,
    fruit: "banana"
}

const newValues = {
    foo: "Baz",
    number: 40,
    fruit: null
}

const outputValues = {
    ...defaultValues,
    ...newValues
}

What is the expected output?
If you expect to have fruit: "banana" think twice.

The final value will be fruit: null.

Why? 👀

Based on the spread operator MDN definition

Overriding properties
When one object is spread into another object, or when multiple objects are spread into one object, and properties with identical names are encountered, the property takes the last value assigned while remaining in the position it was originally set.

This means that the spread operator does not validate if the value is or isn't a truth value.

And how do we solve it?

Well, there's the simple, non-scalable solution and the more complex, but scalable solution. Let's discuss each of them.

Simpler solution

Let's create a simple validation for the fruit key.
Getting back to the last scenario, but with a change in the fruit value.

const defaultValues = {
    foo: "Bar",
    number: 30,
    fruit: "banana"
}

const newValues = {
    foo: "Baz",
    number: 40,
    fruit: null
}

const outputValues = {
    ...defaultValues,
    ...newValues,
    fruit: newValues.fruit || defaultValues.fruit
}

Ok, it can work in a few validations but is not scalable at all, so let's create a validation for each value in the newValues object.

Scalable solution

To make it scalable for whatever the object size, let's use the methods entries from Object, to parse the values.
Using this method, we will have an array of [key, value], that we can use the arrays method filter to check if the second element is truth.

Object.entries(newValues).filter(item => Boolean(item[1]))
// [ ['foo', 'Baz'], ['number', 40] ]

Perfect, now we have validations for falsy values in the object, but I need an object, not an array, genius.

Calm down, there's another Object method so solve it, the fromEntries method.
From MDN: "The Object.fromEntries() static method transforms a list of key-value pairs into an object.", and that's the magic, take a look.

const defaultValues = {
    foo: "Bar",
    number: 30,
    fruit: "banana"
}

const newValues = {
    foo: "Baz",
    number: 40,
    fruit: null
}

const outputValues = {
    ...defaultValues,
    ...Object.fromEntries(
        Object.entries(newValues)
            .filter(item => Boolean(item[1]))
        ),
}

What is the expected output?
Yes, you're right, now the output is the same as the simpler solution, but you can use in bigger objects.
The final value is: {foo: 'Baz', number: 40, fruit: 'banana'}.

Conclusion

In conclusion, while the spread operator in JavaScript offers a convenient way to merge objects, it can lead to unexpected behavior when dealing with overlapping keys and potentially falsy values. The issue arises because the spread operator does not discriminate based on the truthiness of merged values. This can result in undesired outcomes, such as overriding default values with null or other falsy values.

Check out my links

Website: https://www.guimoraes.dev/
Linkedin: https://www.linkedin.com/in/guimoraesdev/

If you find any error or just want to say hi, let a comment below.
See ya! 👋

O guia de estudos que eu usei e sempre passo pra frente (javascript)

Guilherme Moraes — Tue, 18 Aug 2020 19:56:41 +0000

Meu Guia de estudos (javascript)

Sempre que alguém me pergunta como começar a estudar programação me vem uma série de perguntas

O que tu já sabe?
Sabe a área que tu quer seguir?
Sabe quais áreas tem dentro de programação?
Já criou uma base sólida do básico?

Todas essas perguntas (e muitas outras) são essenciais pra começar a criar uma lista do que estudar

Maaaas...

Acredito que uma pessoa que se interessou a te fazer essa pergunta e mostra interesse no assunto, pode ser uma oportunidade de tu apresentar a ela a nova carreira e fazer essa de uma forma menos penosa

Então...

Vou começar me apresentando rápidamente.
Me chamo Guilherme, começei no meu primeiro emprego como dev em 2019 e sou desenvolvedor full-stack pleno, com foco em desenvolvimento front-end (2020). Posso contar mais sobre mim em outro post, o foco aqui é em novos devs.

Acredito que o que vou passar aqui pode servir pra qualquer um em início de carreira (dev JS), então vamos lá

O que eu acho que seria o ideal pra tu estudar

Vou dividir esse post por tema e uns locais que tu pode aprender (pagos e gratuitos).
Por favor, leiam até o final e não usem isso como a única verdade absoluta, tem um monte de conteúdo na internet e provavelmente muita gente que mandariam outros links
Um abraço e bons estudos
Obs.: Não ouve qualquer patrocínio dos cursos pagos aqui listados os coloquei por gostar bastante da plaaforma e metodos de ensino. Vale procurar por outros reviews antes de tomarem a decisão de compra-los, não me responsabilizo por nada.

A Base

Frameworks e ferramentas

Agora vamos partir pros frameworks, mas atenção não é porque tem esse monte de conteúdo aí em cima que tu só pode iniciar um framework quando finalizar eles, programação é um estudo constante e nunca deixe de estudar a base.

Vamos lá!
Existem muitos frameworks e libs no mercado e eu vou apresentar alguns

Front-end: ReactJS, VueJS, Angular
Back-end: ExpressJS, AdonisJS

Esse é um assunto bem vasto e eu quero aprofundar em alguns posts específicos daqui pra frente, por isso eu vou deixar alguns conteúdos de consulta e início da sua busca por mais conhecimento (até alguma libs úteis de React no final)

Pra começar... documentações oficiais

Sério, nunca subestime a doc oficial de uma lib/framework
Afinal de contas, ela é a oficial e foi criada pela galera que criou a parada. Você verá que apenas linkando a documentação oficial já terá uma enorme quantidade de conteúdo para estudo.
Irei listar as docs oficiais e logo abaixo uma série de criadores de conteúdo que falam sobre eles e outros assuntos.

JavaScript

NodeJS

É runtime que permite executar JS fora de um navegador web. (a grosso modo)

Typescript

Um superset que adiciona tipagem ao JavaScript, é extremamente poderoso e torna suas aplicações ainda mais escaláveis, merece estar no seu radar.

Gerenciadores de pacotes

Gerenciadores de pacotes nos permitem adicionar novas dependencias ao nosso projeto que já foram criadas por outros devs e nos poupam muito tempo, além disso, elas gerenciam as versões dos pacotes para que atendam as mais diversas libs que utilizem diversas versões

NPM
YARN

Front-end

ReactJS

Uma das maiores(se não a maior) bibliotecas para criação de SPA(single page aplication[en]/aplicação de página única[ptBR]) e desenvolvimento front-end.

VueJS

Framework JavaScript mais recente a ganhar fama e ser amplamente utilizado pelo mercado de desenvolvimento front-end.

Angular

Um dos maiores e mais completos Frameworks para desenvolvimento front-end do mercado, já está a muitos anos sendo usado e está bem consolidado na sua proposta.

SASS

Lib para adicionar superpoderes ao CSS (sloghan deles mesmos haha), resolve alguns problemas antigos do CSS puro e melhora a sintaxe.

Styled-components

Lib pra te ajudar a unir os poderes de CSS e JS, conhecido por CSS-in-JS.

Back-end

ExpressJS

Framework back-end em Node leve e simples de ser usado.

AdonisJS

Framework back-end com mais 'opinião' e que lhe tras mais ferramentas e confiabilidade em seus projetos.

Sequelize

ORM são ferramentas que auxiliam noi tratamento e gerenciamento de SQL aos bancos de dados

Docker

É uma plataforma open-source cuja finalidade é criar ambientes isolados para aplicações e serviços

Bcrypt

JWT

Patterns ou princípios

Padrões e princípios são muito antigos em programação e são as coisas que menos mudam. Existem muitos padrões na área de programação (muitos mesmo)
Vou adicionar aqui alguns que eu gosto bastante e que me ajudam muito a resolver problemas e escolher soluções no dia-a-dia

S.O.L.I.D - wikipedia

Princípios S.O.L.I.D, por Mariana Azevedo

Factory - wikipedia

[Factory Method](https://refactoring.guru/pt-br/design-patterns/factory-method}

KISS - wikipedia

Simplificar Não é Estupidez, é Engenhosidade, por Rafael Souza

DRY - wikipedia

DRY - Don't Repeat Yourself - Não se repita

Teste! Teste tudo, TU-DO!

Existem vááárias libs de testes, mas vou deixar duas muito difundidas e uma delas com um canal focado e completíssimo

Jest
Cypress

Semana Agilizei

Dicas:

Seguir alguns blogs

william Justen, William Oliveira, Felipe Fialho, Gabs Ferreira

Acompanhar devs pela Twitch

Quem sabe eu não serei o próximo rsrs
Marco Bruno, Código Falado, Glaucia Lemos, Toramaru08

Acompanhar devs pelo YouTube

Alura, BrazilJS, CollabCode, Codigo Fonte TV, Dev Ed (en), DevPleno, AkitaOnRails, FilipeDeschamps, Glaucia Lemos, Google Webmasters (en), Programador a Bordo, ProgramadorBR, Rocketseat, Training Center

Github! Nele tu pode ver os projetos opensource das pessoas e controlar as versões dos seus próprios, também serve como uma rede social

Nesse link tu já consegue ver muitos livros gratuitos: Free programming books pt_BR

Nesse link tem guia de outra pessoa que ta bem legal e é gratuito: Carreira front-end o guia

Esse também é legal: Guia de estudos desenvolvedor front-end iniciante

E esse: Do zero a heroi do front-end parte 1

E esse: Do zero a heroi do front-end parte 2

Esse também: Guia front-end

Esse roadmap também é bem daora: front-end

Pra finalizar, tem uns livros que eu comprei e gostei bastante, tu pode achar eles aqui
https://www.casadocodigo.com.br

O universo da programação: Um guia de carreira em desenvolvimento de software

Conselhos que eu gostaria de ter recebido no início da carreira

Finalizando

Muitos dos conteúdos que eu reuní durante o passar dos tempos foi de front-end, pois esse é meu foco, mas acredito que tenha deixado bons conceitos e bases para qualquer um que queria iniciar no desenvolvimento web
Um abraço
Críticas construtivas são muitíssimo bem vindas e adições serão mais ainda
I'm sorry about my Portuguese
Flws!

DEV Community: Guilherme Moraes

How to have your portfolio up-to-date with your published articles

The Scenario

Getting Started

The structure

And our result is

Great, so that's it, right? No, please, copy a link and a title is too simple

Next step, add metadata to the card.

Let's select some data to add to the card.

Result

Conclusion

Why { ...defaultValues, ...newValues } can hide a bug

The scenario

The issue

Why? 👀

And how do we solve it?

Simpler solution

Scalable solution

Conclusion

O guia de estudos que eu usei e sempre passo pra frente (javascript)

Meu Guia de estudos (javascript)

Maaaas...

Então...

O que eu acho que seria o ideal pra tu estudar

A Base

HTML5/CSS3, semântica e acessibilidade

Metodologias CSS (BEM, RSCSS, ITCSS)

Lógica de programação/Algoritmos

JavaScript

Git/GitHub

Frameworks e ferramentas

Pra começar... documentações oficiais

JavaScript

Gerenciadores de pacotes

Front-end

Back-end

Patterns ou princípios

Teste! Teste tudo, TU-DO!

Dicas:

Seguir alguns blogs

Acompanhar devs pela Twitch

Acompanhar devs pelo YouTube

Finalizando