DEV Community 👩‍💻👨‍💻

Cover image for Embed your posts anywhere!🥳
kapeel kokane
kapeel kokane

Posted on

Embed your posts anywhere!🥳

Hey People of Dev!

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

I had a similar requirement where I was thinking of embedding my top 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" />
Enter fullscreen mode Exit fullscreen mode

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:

Hope that helped!

Top comments (7)

steveblue profile image
Stephen Belovarich • Edited on

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

kokaneka profile image
kapeel kokane Author

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

webreflection profile image
Andrea Giammarchi • Edited on

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

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

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:

patricnox profile image

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

milesq profile image
Miłosz Wiśniewski

something like that could be a web component ;)

kokaneka profile image
kapeel kokane Author

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

gixxerblade profile image
Steve Clark 🤷‍♀️

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

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!