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-directionof 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! 👋
Top comments (0)