Embed Dev.to blog post with vanilla-JS
Tags: javascript, portfolio, html, css
Published: 2020-12-05 06:43:43

Easiest guide to embed Dev.to blog post to your personal website using Javascript.
>
Recently, I started writing blog and also working on my portfolio. Portfolio is best way to showcase your Project, Technical blogs and more.. 
I'm working on portfolio site and hosting it using Github and Netlify. **No Framework**
It's static site, and I didn't want to manually update HTML every time I write blog, So here's solution I find out.
*<small>Codepen at the end</small>*
>

## Let's Start 🤘

First thing I need is API to get data from Dev.to, I googled little bit and find the API.
`https://dev.to/api/articles?username=`
We don't need to give any other *key:value* just your username.

#### Here's the HTML
<small>clean simple and small</small>
![HTML syntex](https://dev-to-uploads.s3.amazonaws.com/i/lwii1wzw1abpsq2gzg5t.jpeg)
                 
*******

#### Working with JS
1. Initial Declaration
![Initial Decleration](https://dev-to-uploads.s3.amazonaws.com/i/qwnnibavgtjo0qxitpwd.jpeg)
`blogPos` is div where we want to show all our blog data.
You should assign your Dev.to `username`

2. Creating helper functions

![Helper function](https://dev-to-uploads.s3.amazonaws.com/i/lzgggfzox69w6j0oj24w.jpeg)

We are going to create few HTML elements using javascript. To create element we have method `document.createElement()`. 
`createNode()`- creating element.
`append()`- append element.
It's not necessary to create this function, I create them to make code simpler.
Create ul for list of elements.
```
const ul = createNode('ul');
ul.classList.add("blog-feed");
```

#### Important Part

![js-1](https://dev-to-uploads.s3.amazonaws.com/i/drbdh2y2a4h3cpq42rli.png)
I create `buildURL()` function for API url with our username. It is assign to finalURL. This is our `buildURL()`
```
function buildURL(userName) {
  return `${api}username=${userName}`;
}
```
Now fetch, fetches and we get response in object with series of methods. There are different methods, here we use JSON as we want to handle our data as JSON object.

**Why I use `posts.length = 5`?**
Basic: Want to limit number of post we want to show.
Suppose you have 10-15 blog post, the fetch API will get every one of them. You can change how many post you want to show.

**`posts.forEach()`**
For every post we are going to create elements. <small> Look,at that clean code🤩 PS: Still room for improvement.</small>

*******
![Final Piece](https://dev-to-uploads.s3.amazonaws.com/i/we1g471gsipxsh8cwznw.png)

`a.target = 'blank` - to open blog link in new tab.
`p.classList.add()` - to add class to p tag.
`a.href = post.url` - giving post url link to a:href tag.
`a.innerText = 'post.title'` - post title to a tag inner text.
`p.innerText = 'post.description'` post description to paragraph.
You can add more thing, like publish date, time, #tags, public reactions. So here I add public reactions.

`small.innerText = '💕 ' + post.public_reactions_count;`
Now appending part,
li <- h2 <- a
li <- p
li <- small and
ul <- li
```
append(h2, a);
append(li, h2);
append(li, p);
append(li, small);
append(ul, li);
```
**`append(blogPos, ul)`** - Adding this list to div element.
*******
<small>**One thing** Always create error handle. I didn't create error handler here.<small>

> ## Here's the pen
>
{% codepen https://codepen.io/vaishnav21/pen/ExgKjzq default-tab=js,result %}

>
Hope this article helped you. If you have any suggestions or find any mistake please write to me.😃
>