Get DEV.to Articles Using DEV API - The Missing Piece of Code
Tags: api, javascript, beginners, showdev
Published: 2022-04-30 20:47:55

## Table of Contents (TOC) <a name ="TOC"></a>
0. [Why this tutortial is different](#why-this-tutorial-is-different)
1. [Getting ALL your articles from DEV API](#getting-all-your-articles-from-dev-api)
2. [Populating your site with your articles](#populating-your-site-with-your-articles)
3. [Formatting your site](#formatting-your-site)
4. [Helpful links](#helpful-links)

### Why this tutorial is different
[Back to TOC](#TOC)

Yes, there are a lot of tutorials and step-by-step guides on the internet explaining how to use [DEV API](https://developers.forem.com/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](https://tmchuynh.me/), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnjm6dalh329wlqdd24i.png)

But let's go through everything...

### Getting ALL Your Articles from DEV API
[Back to TOC](#TOC)

Looking at the `fetch` statement above and running it through [Postman](https://www.postman.com/), you will see that you get all the information within your article from the API call.

![postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbh1aip4wmbnc752m2ye.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xor9ni905ir772kw2ha.png)

### Populating your site with your articles
[Back to TOC](#TOC)

At the end of my formatting, this is how my blog articles look on my [website](http://tmchuynh.me/). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gymqw34stpe0m3d4312q.png)

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.

![published date formatting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie1wcs98e6w6spl14u89.png)
 
At the end, the entire code to get each article went like this:

![create articles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bijp6hkuvuvhxumavwmg.png)

### Formatting your site
[Back to TOC](#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l29oyilf0e5v8eqyzvm8.png)

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

{% embed https://dev.to/tmchuynh/filtering-display-cards-590f %}

Happy coding!