dev.to API: How to Turn DEV Posts into Postcards 📫

I gain a lot from the DEV community. Whether it's useful tips, project ideas or just learning from other people's experiences. It's the only place I know that offers an equal platform for bloggers and programmers of all abilities, blended in a way that makes accessing interesting and relevant content seem simple.

But for it to exist, the community relies on users who are active in sharing content that's new and engaging. This isn't an easy thing to do, and after almost 2 years as a member, it took until February before I felt confident enough to post publicly. However, once it was done, the positive reaction I received gave me the encouragement to write reflectively more often.

Whilst my work involves tech, I'm not a developer. In fact, the majority of my professional network sits within education, making it less likely for colleagues or peers to encounter (or follow links to) the DEV site. So as I continued to write, it felt increasingly important to find a way of sharing content more flexibly, and one that reaches the broadest possible audience. Twitter helps, but how can DEV content be disguised to appear less 'technical'?

Answer: The dev.to API. 🎉

But there's a catch. As far as I'm aware, the dev.to API is still experimental. Nevertheless, despite no official documentation, posts from other users provided enough information to test it out.

By adding a username parameter to the base URL (e.g. https://dev.to/api/articles?username=devteam), the API returns a JSON file containing metadata related to the articles from a specified user. After 'fetching' the data with a basic fetch() method, it's then available to manipulate with JavaScript and add to the DOM.

The snippet below shows how this works, printing the JSON to the console:

    <script>
        fetch('https://dev.to/api/articles?username=devteam')
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {
            console.log(myJson)
        });
    </script>

For me, this offers a perfect solution for adding DEV content to other sites (including my own), with extra flexibility for defining how it appears. For example, the CodePen below shows how each article can be presented as an individual card, styled in a way that matches the containing site. But also by using CSS Grid for the target div, any amount of posts can be added to the page whilst keeping the layout responsive.

If you'd like to see how the API can be used to create a blog section of a portfolio website, please visit danharding.co.uk or feel free to play with the CodePen.

And if you have any feedback, I'm always interested to hear it! 👨🏻‍💻