DEV Community

Cover image for API: How to Turn DEV Posts into Postcards ๐Ÿ“ซ
Dan Harding
Dan Harding

Posted on 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 API. ๐ŸŽ‰

But there's a catch. As far as I'm aware, the 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., 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:

        .then(function(response) {
            return response.json();
        .then(function(myJson) {
Enter fullscreen mode Exit fullscreen mode

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 or feel free to play with the CodePen.

And if you have any feedback, I'm always interested to hear it! ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Top comments (6)

picocreator profile image
Eugene Cheah • Edited

Next step: Make it physical - integrate with and send them out in hardcopies as physical postcards haha.

Reminded by

lukewduncan profile image
Luke Duncan

Dude awesome work!

johnkazer profile image
John Kazer

Thanks, very useful :-)

dotnetcoreblog profile image

I did something very similar for my company website a week ago, but I didn't style them very well. But this part has made me want to take another whack at it.

ctg123 profile image
Chaance T. Graves

Hey Dan,

This is legit! Would like to see how the progress is made with this.

karaluton profile image
Kara Luton

Hey Dan, I tried doing this but am getting a CORS error in my console. Do I need to add the API key somewhere and if so where?