DEV Community: Dan Harding

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

Dan Harding — Thu, 09 May 2019 18:28:48 +0000

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! 👨🏻‍💻

Code-it Notes: Create Your Own! 📝

Dan Harding — Mon, 08 Apr 2019 21:10:17 +0000

A few weeks ago, I prototyped an idea to help me better understand the JavaScript methods I always seemed to forget.

The idea was simple. Create Post-it note like summaries that could be refered to whenever I needed them. An explaination on one side and an example on the other. I love MDN and W3Schools, but putting something into your own words always seems better when trying to decipher how a piece of code works.

Feedback from the original dev.to post was reassuringly positive, but as I'd created the notes in Google Slides, designing new topics soon became time consuming. Post-it notes are meant to be quick, and this certainly wasn't.

Benjamin Faught • Mar 23 '19

Simple, concise, and effective. Put these on the web please.🙏 They deserve their own site. 💯

Following a few encouraging comments, it felt worthwhile to spend some time thinking about how to recreate the notes in a more flexible format. Releasing the Google Slides deck would be the easiest way, but the same problems would still exist. I'd also experimented with Instagram (see below), but images containing text have poor accessibility and don't allow for further editing (although swiping between each side worked really well). Back to the drawing board.

The solution came thanks to the dev.to markdown editor's use of Liquid tags. By building a template in CodePen and embedding it here on dev.to, anybody would be able to fork the pen, remix and share their creation back to the community (or anywhere else for that matter). What's more, the #explainlikeimfive hashtag seemed a perfect fit for what I was trying to achieve. Take a coding concept, boil it down to its simplest form and give an example. That's it! 👌

An added bonus is that you get to tinker with a bit of code whilst making a Code-it. There's CSS Grid, clip paths, variables, media queries, transitions, basic JavaScript and more. Don't like it? Rip it up and edit it until you do.

So, if you're interested in creating your own Code-it note, here are the instructions:

How to Create Your Own Code-it Note

Fork the pen.
Decide on a topic for your Code-it. Remember, the smaller the better (e.g. a single JavaScript method, CSS property etc).
Research the topic and edit your pen.
Once you've finished, write a new dev.to post, tag it with #explainlikeimfive and embed your new pen.
Take pride in improving your own knowledge whilst also creating a community resource for other people to benefit from!

The pen includes a link to the FontAwesome CDN, so feel free to use their library of free icons to illustrate your creations.

If you have any feedback, or would like to offer suggestions about how the template code could be improved, I'd love to hear it.

Code-it® Notes 📝 for JavaScript

Dan Harding — Sun, 17 Mar 2019 14:48:30 +0000

Everybody loves a Post-it note. For organising, taking messages, even project planning. Their versatility makes them perfect for tasks that only require bitesize pieces of information. They're big enough to scribble a few words on, but too small for more than a couple of sentences.

And it's no surprise that digital stickies have become a popular feature of notetaking apps too. Padlet, Google Jamboard and Trello all use their own versions. Breaking down big ideas into smaller, managable chunks makes the most difficult challenges somehow more achievable.

I prefer to study by taking detailed handwritten notes, but this makes finding specific reminders frustrating. Particularly when it comes to JavaScript. I revisit the same tutorials, each time taking notes, only to still have trouble remembering how different data types and methods work later on.

So to try and solve this problem, I've decided to combine the Post-it format with a consistent note taking style; Code-it notes!

Each note explains a single topic (e.g. a JavaScript method) in simple, non-jargon language, with an annotated example on the back. Every time I study something new, I'll create a note, share it online and steadily build a resource that will grow into a handy reference library. I'm starting with JavaScript (as that's what I need to revise most), but hope to cover HTML and CSS too.

If you'd like to use Code-it notes, I'll be sharing them via Instagram initially and building the collection as a Google Slides presentation. To get started, the first 3 have been embedded here on dev.to.

If you have any feedback, or would like to request a topic, I'd be interested to hear it! 👨‍💻

Abstract: The Art of CSS Grid

Dan Harding — Mon, 11 Mar 2019 22:28:08 +0000

This article is based on a presentation given at MozFest 2018. The full slide deck can be found at tinyurl.com/mozfestslides.

I watch a lot of Netflix. And as with most streaming services, once the series you originally signed up for is finished, you inevitably start searching for other programmes that look kind of interesting. Over the years, this has led to me discovering some of my favourite shows and it's also how I stumbled across Abstract: The Art of Design.

Episode 1 begins with Christoph Niemann. An illustrator, artist and author whose work you may already recognise. It spans almost every genre, from augmented reality magazine covers to National Geographic expeditions. But what does it have in common with learning to code? At this point, not much.

As you get into the episode, Christoph begins to explain his creative process and the importance of abstraction. Although his portfolio includes some intricately detailed work, he stresses that art rarely requires a lot of information. In fact, unneccessary detail often weakens the original idea. He demonstrates this with the 'Abstract-o-meter'.

The concept of love illustrated via Christoph Niemann's 'Abstract-o-meter'.

Christoph has gone to some fairly extrodinary lengths to prove his theory, repeatedly breaking complex images into simple blocks of colour whilst somehow retaining their identity. His tribute to New York in I Lego NY and a tiled underpass in Berlin are 2 standout examples. But it was his next comment that sparked an idea of how abstraction might offer a more creative route into coding.

My journey into frontend development is similar to most, consisting of endless video tutorials, occasional quizzes and small projects. After a while this gets incredibly tedious, so what if there's a different way? Something that encourages imagination, places an emphasis on making and evidences learning? With the help of some unwitting MozFest attendees, I decided to test this theory.

I pitched a 1 hour workshop, something I'd never done before, and to my surprise was accepted. The idea was to substitute Christoph's example with characters from popular films, cartoons and TV series to see if they could be recognised without first seeing the original. If it worked, I would use the abstract images to teach 1 aspect of frontend development; a fundamental concept that has applications in the real world. The session would be called "Creative Coding with CSS Grid".

The 3 stages of Bart Simpson according to Christoph Niemann's ‘Abstract-o-meter’.

Thanks to a project by David Stoll, a quick Google search returned some perfect pixelated examples. To help translate David's creations into CSS and HTML, a series of worksheets would explain the basic syntax and provide step-by-step instructions on how to 'build' each character with a choice of offline or online tools. The session was advertised as beginner friendly, requiring little or no previous coding knowledge.

After changing rooms to accomodate the extra attendees, the same explanation was given and the theory again tested. With most people recognising the characters, we quickly moved onto a warm up exercise and finally the worksheets. Most opted to live code the examples, with experienced developers happily working alongside code newbies to solve each miniature puzzle.

// Detect dark theme var iframe = document.getElementById('tweet-1056527808145616896-74'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1056527808145616896&theme=dark" }

Having whet their appetite, the final step was to demonstrate some real life examples of CSS Grid and show how creating an 8-bit Bart Simpson is no different than building a layout for the web. The feedback was overwhelmingly positive, and it was rewarding to see people leaving the session with a newfound enthusiasm for creative coding.

// Detect dark theme var iframe = document.getElementById('tweet-1056513631184150528-617'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1056513631184150528&theme=dark" }

Want to try the worksheets for yourself? A teacher's pack can be found at tinyurl.com/mozfestgridworksheets. All materials are produced as open educational resources and licensed under CC BY-SA 4.0.

Have fun! 🎨

Zines as Open Educational Resources for Code Newbies

Dan Harding — Sat, 23 Feb 2019 21:12:31 +0000

Creating open educational resources (OER) is a great way to test or refresh your knowledge whilst helping others to learn.

At October's MozFest, I was fortunate enough to stop by Éléonore and Malwine's zine display. I'd missed their session, but the mini magazines they had inspired demonstrated how any subject, from complicated data science to city guides, could be broken down into bitesize indie publications. All you needed was a piece of paper, pen and a topic to share.

Fast forward a few months and after a couple of test runs, creating something related to coding seemed like a neat idea. Repurposing existing resources had worked well, and designing them digitally meant they could be quickly adapted or updated whilst also sharing them online.

Staying true to the 'zine ethos' meant avoiding heavyweight DTP tools, learning curves or the need for a degree in graphic design (although you can probably create some awesome zines if you did). Google Slides, PowerPoint or any other package that allows you to combine basic shapes, text and colour is all you need.

What's more, adding an open license to your work (e.g. Creative Commons) gives others the opportunity to remix or develop your idea into something they can make their own. Especially if it's published in a format that's readily editable. Everybody wins!

From speaking with more experienced developers, it's easy to forget how hard it can be to learn so many new things all at the same time. But even as a beginner, I was still able to produce an introductory guide to CSS Grid that covers some of its basic principles. And that's the beauty of zines, they are for newbies and experts alike.

Here's the end result:

From there, the slides could be quickly pasted into a printable template (see below) and recorded as a gif or video (although watch out for accessibility issues).

// Detect dark theme var iframe = document.getElementById('tweet-1099409959270391810-974'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1099409959270391810&theme=dark" }

Think you can explain a coding topic as a zine? Then give it a try!

Here are some resources you might find helpful:

A Google Slides zine template (File → Make a copy...)
Royalty free images from Unsplash (be kind and credit your sources)
Royalty free icons from Noun Project (ditto)
An open license, available from creativecommons.org

You'll also need:

A printer
A pair of scissors

And if this zine has whet your appetite for more CSS Grid, I highly recommend you check out Wes Bos' free course, Jen Simmons' Layout Land or Rachel Andrew's Grid by Example. 💯👌