DEV Community

Cover image for Get DEV.to Articles Using DEV API - The Missing Piece of Code
Tina Huynh
Tina Huynh

Posted on

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!

fetch statement

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.

postman

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.

Getting articles from api

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.

Finished product

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"
Enter fullscreen mode Exit fullscreen mode

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.

published date formatting

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

create articles

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.

articles in html

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

Happy coding!

Discussion (3)

Collapse
capz profile image
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

Collapse
tmchuynh profile image
Tina Huynh Author

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

Collapse
dannyengelman profile image
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>
Enter fullscreen mode Exit fullscreen mode

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