How To: Add Dev.to Posts to Your Portfolio
Tags: tutorial
Published: 2020-11-21 14:32:08

Thanks to the [Dev.to API](https://docs.dev.to/api/), it's easier than ever to keep your portfolio updated with your latest and greatest posts from [Dev.to](https://dev.to/). This post will go over how I made use of the API on [my portfolio.](https://bit.ly/2ItHlgx) 

This article assumes you know how to use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).

![https://media.giphy.com/media/13NKbbVWMt6nFm/giphy.gif](https://media.giphy.com/media/13NKbbVWMt6nFm/giphy.gif)

**Dev.to API Endpoint**
The first (and only) thing that we need from the [Dev.to](http://dev.to) API docs is the appropriate endpoint to get our articles. The endpoint that we need is the following:

[https://dev.to/api/articles?username=antdp425](https://dev.to/api/articles?username=antdp425)
(Replace "antdp425" with your Dev.to username)

If we only want to retrieve the last *x* articles, we can simply change the endpoint to the following:

[https://dev.to/api/articles?username=antdp425&per_page=6](https://dev.to/api/articles?username=antdp425&per_page=6)
(Replace "antdp425" with your Dev.to username and replace "6" with however many articles you  want to retrieve — the default is 30 if you do not include "per_page=yourNumber")

**HTML**
In our HTML file we'll need to:

- have a place we want to append our blog posts to after retrieving them, for me its *blog_cards*
- link our Javascript file, for me its *index.js*

```html
<body>
<!-- Other HTML is above this -->
	<section class="blogs">
	<!-- We will use blog_cards in our index.js file -->
	  <div class="blog_cards"></div>
	</section>
<script src="index.js"></script>
</body>
```

**Javascript**

In our Javascript file we'll need to:

- select the area of our HTML we want to add the blogs to, for me its *blog_cards*
- use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to get the data from the [Dev.to](http://dev.to) API about our blog posts
- create a function that creates a card for each blog post

After performing a fetch and getting our array of objects, each object (each blog) will have the following info for us to use:

```json
{
  "type_of": "article",
  "id": 194541,
  "title": "There's a new DEV theme in town for all you 10x hackers out there (plus one actually useful new feature)",
  "description": "",
  "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--74Bl23tz--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--xU8cbIK4--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/8a39dzf3oovzc2snl7iv.png",
  "readable_publish_date": "Oct 24",
  "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--SeMxdKIa--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--xU8cbIK4--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/8a39dzf3oovzc2snl7iv.png",
  "tag_list": [
    "meta",
    "changelog",
    "css",
    "ux"
  ],
  "tags": "meta, changelog, css, ux",
  "slug": "there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
  "path": "/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
  "url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
  "canonical_url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
  "comments_count": 37,
  "public_reactions_count": 142,
  "collection_id": null,
  "created_at": "2019-10-24T13:41:29Z",
  "edited_at": "2019-10-24T13:56:35Z",
  "crossposted_at": null,
  "published_at": "2019-10-24T13:52:17Z",
  "last_comment_at": "2019-10-25T08:12:43Z",
  "published_timestamp": "2019-10-24T13:52:17Z",
  "user": {
    "name": "Ben Halpern",
    "username": "ben",
    "twitter_username": "bendhalpern",
    "github_username": "benhalpern",
    "website_url": "http://benhalpern.com",
    "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--Y1sq1tFG--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png",
    "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--DcW51A6v--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png"
  },
  "organization": {
    "name": "The DEV Team",
    "username": "devteam",
    "slug": "devteam",
    "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--0kDBq1Ne--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/organization/profile_image/1/0213bbaa-d5a1-4d25-9e7a-10c30b455af0.png",
    "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--8tTU-XkZ--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/organization/profile_image/1/0213bbaa-d5a1-4d25-9e7a-10c30b455af0.png"
  }
}
```

Here is what our *index.js* file looks like:

```jsx
// selecting the blog section of our HTML
let blogSection = document.querySelector(".blog_cards");

// using fetch to get our blog posts
fetch("https://dev.to/api/articles?username=antdp425&per_page=6")
  .then((response) => response.json())
  .then((data) => {
		// at this point, data is an array of objects (our blogs) that we can
		// loop through and create cards for each blog
    data.forEach((blog) => (blogSection.innerHTML += createBlogCard(blog)));
  });

// our function to create a card for each blog post
function createBlogCard(blog) {
  console.log(blog);
  return `
   <div class="blog_card">
   <a target="_blank" href="${blog.url}">
      <img src="${blog.social_image}" alt="" class="blog_image">
      <h2 class="blog_title">
      ${blog.title}
      </h2>          
      </a>
   </div>
   `;
}
```

Here is the final product, with my CSS (not included in this post):

![https://i.imgur.com/3G9v5cB.png](https://i.imgur.com/3G9v5cB.png)

Overall, this was pretty easy to set up and I look forward to making more use of the API in the near future. 

One thing to note is that the blogs will not update immediately on your portfolio, but should within 24 hours.

As always, if you have any issues or questions, refer to the docs:
[Dev.to API](https://docs.dev.to/api/#operation/getArticles)
[MDN — Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.