How to have your portfolio up-to-date with your published articles
Tags: webdev, javascript, portfolio, tutorial
Published: 2024-03-28 21:00:00

Let's use the public dev.to API to query the last articles. Take a look at how it looks: [link](https://dev.to/api/articles?username=guimoraes).

> 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](https://codepen.io/guiimoraes/pen/GRLMKep)

## 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 -->
<html lang="en">
  <body>
    <ul id="wrapper"></ul>
  </body>
</html>
```
```css
/* 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.

```JS
/* 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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) the articles from dev.to API endpoint. While this returns a [JS Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), we need to use the method [then](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) to create an element for each article in that array. Using [document.createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) method will allow us to create a new element inside the loop, so we will create two elements, first a [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) element, because we are creating an unordered list ([ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)) to wrap the content up, so the children of a list should be a list item, and an [anchor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) element with a hyperlink to the article.

Last, but not least, let's use the method [appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to append the anchor inside the list item, and the list item inside the unordered list.

### And our result is

![two square elements one the article "Why { ...defaultValues, ...newValues } can hide a bug", and the second the article "O guia de estudos que eu usei e sempre passo pra frente (javascript)"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk5arvrn3lagg1rkmrxk.png)


## 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
/* 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.
```js
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

![Same image as before, but with the metadata for positive_reactions_count and reading_time_minutes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi03lvwx17wcn4h1qw53.png)

** 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! 👋