Get DEV.to Articles Using DEV API - The Missing Piece of Code

Table of Contents (TOC)

1. Why this tutortial is different
2. Getting ALL your articles from DEV API
3. Populating your site with your articles
4. Formatting your site
5. Helpful links

Why this tutorial is different

Back to TOC

Yes, there are a lot of tutorials and step-by-step guides on the internet explaining how to use DEV API, which is great! I love developers helping developers. I fully support it and wouldn't have it any other way. Many of us wouldn't be here today if not for the love, encouragement, and support from our peers and those who have walked ahead of us.

BUT, many of these tutorials, like countless of others in various topics, leave out key differences you may be looking for.

When I was looking to transfer my articles from DEV.to into my personal website, I wanted not only the recent section of articles but ALL the articles I have ever written. Not the first 20, 30, or 40 articles, but everything. Point blank, period. And that was the difference that I saw in the countless of tutorials that was missing.

The key difference was &state=all. That's it!

But let's go through everything...

Getting ALL Your Articles from DEV API

Back to TOC

Looking at the fetch statement above and running it through Postman, you will see that you get all the information within your article from the API call.

You store ${username} as a variable username above getArticle to be called within the fetch statement. It is your DEV username.

Here you can also set up the rest of your blog page. For example document.title.

Populating your site with your articles

Back to TOC

At the end of my formatting, this is how my blog articles look on my website. I like the idea of having basic information of published date, title, and reading time for users to know the topic, how recent the article was posted, and how long it will take them to read the article.

If you do want to display the published date, there are multiple choices within the API:

created_at: "2022-03-31T04:15:28Z"
.
.
.
published_at: "2022-04-05T16:05:20Z"
published_timestamp: "2022-04-05T16:05:20Z"
readable_publish_date: "Apr 5"

I personally would stay away from created_at since you may publish an article you left drafted for x amount of days or weeks even. Therefore, that date may not always be accurate.

But since the published_timestamp was in year, month, day format and had other data attached that I did not want to utilize, I did have to do some formatting.

At the end, the entire code to get each article went like this:

Formatting your site

Back to TOC

And with some basic styling to place the articles into a grid layout using flex, justify-content, align-content, etc., each article gets put into the website perfectly.

If you are interested in the filter button I implemented, here's an article I posted earlier

Filtering Display Cards

Tina Huynh ・ Apr 28 '22

#showdev #webdev #beginners #javascript

Happy coding!

Comments

[Danny Engelman]

You can use a Web Component, and execute

<script src="https://dev-to-posts.github.io/element.js"></script>

<dev-to-posts user="tmchuynh"></dev-to-posts>

See: <dev-to-posts> Source & Documentation

[Leroy]

Nice article, I didn't even know there was an api! One tip; if you just convert the date stamp to a date object then you can use the browsers ability to format the date in the format of the users browser and locale configuration. Things like toShortDateString() take a lot of the complexities away

[Tina Huynh]

Ooo I didn't think of that! Thanks for the tip :D