Embed your dev.to posts anywhere!🥳

Hey People of Dev!

Do you have a requirement of embedding your dev.to posts in your web-site or any other site?

I had a similar requirement where I was thinking of embedding my top dev.to posts in my personal github-pages web site. I could not find any that would suit my requirement. So I went ahead and have built my own solution.

A react component that accepts a dev username and all that is needed to do is call the react component in your page like so:

<DevArticles username="comscience" />

And done! 🎉

You have a beautifully laid out row of your dev articles as shown in this codepen below:

Do play around with it and suggest improvements. Here are some I was thinking:

• ability to limit the number of articles
• ability to limit the number of rows
• ability to sort by max comments and hearts etc.

If you liked that article, you might also like:

Article No Longer Available

Hope that helped!
Cheers!

Comments

[Stephen Belovarich]

That’s rad, except why wouldn’t you code this with custom elements to make it work with any framework or no framework scenario?

[kapeel kokane]

Yup. I was thinking of creating a web component. I will give it a shot.

[Andrea Giammarchi]

of course every other framework user would ask a version that works in there too ...

<!-- ... while this would work everywhere ... -->
<dev-articles username="comscience"></dev-articles>

This component is an excellent use case for Custom Elements.

customElements.define('dev-articles', class extends HTMLElement {
  static get observedAttributes() { return ['username']; }
  attributeChangedCallback(key, _, value) {
    // do whatever you like in here 👍
  }
});

Let's use the right tool for the job 👋

P.S. I've made a uce version which is based on Custom Elements, so you can have a look in there too: codepen.io/WebReflection/pen/GRpXq...

[PatricNox]

That's cool, you should create a vue version as well!

[Miłosz Wiśniewski]

something like that could be a web component ;)

[kapeel kokane]

Yes. Have a plan to do that as well. Let's see.

[Steve Clark 🤷‍♀️]

I did something similar except using graphql and creating a new page with the users post instead of linking back to dev.to. Like a blog of all posts.