About The

Jhey makes awesome things for awesome people! He’s a web developer with almost 10 years of experience. Working with and for names such as Eurostar, Uber, … More about Jhey

Playfulness In Code: Supercharge Your Learning By Having Fun

        In the product-focused world of development, it can be easy to forget the joy of making for the sake of making. By dropping the ‘Why’ and ‘How’, and focusing instead on the ‘What’ of weird, wonderful ideas, you can nurture a totally different side to your skill sets.

        I’m often asked where the ideas come from. How do I know the things I do? Having ten years of experience in development helps, but what supercharged my learning was pushing myself to build the things that came into my head, however unusual. I developed an appetite for building things that aren’t ‘the norm.’ With that mindset, every idea becomes an opportunity to try something new.

        One of my main mantras is to make learning fun. It’s something people have come to know me by. November 10, 2020

        Anywhere Else

        I could keep listing sources of inspiration, but it can be different for everyone. These are the ones that work for me. But consider anything. Things you see on your travels, conversations, or things around the house.

        Turning Ideas Into Demos And Projects

        You’ve got your ideas. But, there’s no rush to make them. You don’t have to make everything you note down. In fact, odds are you’ll never have time to make everything. That’s something you have to deal with. It’s something I struggled with the better I got at documenting my ideas.

        See the Pen [LEGO Cyber Truck w/ three.js 😅🚙](https://codepen.io/smashingmag/pen/xxEKgrB) by @jh3y.

        See the Pen LEGO Cyber Truck w/ three.js 😅🚙 by @jh3y.

        If you browse my CodePen history it’s like a timeline for what I’ve been learning and exploring, driven by ideas and inspiration. The thought of making something, not learning something. I don’t usually have time to look back at old demos but this article has prompted that. It’s interesting to look back and remember what drove what.

        For example, I wanted to create Masonry layouts, so I learned the technique for it using flex. I wanted to create star fields, so I learned HTML5 Canvas rendering techniques. In fact, I remember learning the latter in the mornings over breakfast.

        See the Pen [Randomly generated CSS lava lamp 💡 #CodePenChallenge](https://codepen.io/smashingmag/pen/yLaBgoK) by @jh3y.

        See the Pen Randomly generated CSS lava lamp 💡 #CodePenChallenge by @jh3y.

        This lava lamp was prompted by a CodePen challenge. I’d seen a bit about SVG filters but not had anything I wanted to try them out on. I wanted to make a lava lamp with CSS and it was a perfect opportunity.

        Make for the sake of making. Don’t overthink it. Be driven by the idea because you will learn things. You’ll probably learn a lot more things than you ever expected. It can and will strengthen your ability to rise to a challenge or switch context at the drop of a hat. These are skills that can really empower your career as a developer.

        Document your ideas and when you want to make them, go for it! If your first focus is the “How” or the “Why”, that idea might stick around on your list for some time.

        Don’t Dwell On The ‘Why’ And ‘How’

        I make a lot of ‘whimsical’ things and I am often asked, “Why?”, “Is there any practical use for this?”, and so on. Don’t dwell on that side of things. You’re making something because you want to. Making something unconventional can be more fun than following “Build a TODO app 101”. There’s a time and a place for the 101s, but I want you to enjoy learning. Gain an appetite for creating wonderful things that none of us have ever seen.

        Work on the ideas that spark joy for you. Don’t let the “How?” distract you. Focus on the “What?”. The goal is to get the idea, then find a way to make it. If it means learning something new — great. If you can do it with something already in your toolbelt — awesome. Let the ideas guide you. The variety of your projects can often challenge you to use tools you already know in different ways. You can pick up new techniques from tackling problems others might not have even seen. It gives you an ability to think “Outside of the box”.

        Let’s also address the idea that these things aren’t ‘useful’. I don’t believe this is ever the case. A major example for me is CSS art. “Why do this with CSS? Use an image like SVG”. Don’t buy into that. By drawing something with CSS, you level up your skills by creating interesting shapes, learning the stacking index, and so much more. The cool thing with CSS art, in particular, is that every creation tends to yield a different problem. Yes, you won’t be dropping that 1000 lines of CSS into a production site anytime soon and you’ll use an image. But, did the image teach you how to use clip-path or be a wizard with border-radius?

        For example, a demo of mine is “The impossible checkbox”. It’s a toggle that when you toggle on, a bear turns off. The more you turn it on, the angrier the bear gets. If I had focused on the “How?” then that demo may never have come to life. Instead, I sketched out what I thought might look like. And then decided I was going to use React and GreenSock together with SVG.

        See the Pen [Impossible Checkbox v2 🐻](https://codepen.io/smashingmag/pen/bGwbgoW) by @jh3y.

        See the Pen Impossible Checkbox v2 🐻 by @jh3y.

        Don’t let the idea of “How?” deter you from the “What?”. Also, never question the “Why?” Make cool things and you will learn from them, no doubt.

        Make, Make, Make

        Start writing down your ideas and making things for the sake of making things. That’s my advice if you want to level up and add some playfulness to your code.

        What you learn will find its way back into your work. As a recent example, I put together an eBook on CSS animations. I could’ve created every demo with a red square, but that’s not very engaging. Instead, the book has animated bunnies, racecars and UFOs to help the knowledge stick. Instead of trying to remember what the red square was doing and how. It’s “Remember we made the bunnies all jump at different times using animation-delay”.

        See the Pen [Bouncing Bunnies (animation-delay lesson) 😎](https://codepen.io/smashingmag/pen/rNMBjGZ) by @jh3y.

        See the Pen Bouncing Bunnies (animation-delay lesson) 😎 by @jh3y.

        This is the major point. Being playful with your code and what might seem like “lateral” learning can be a huge driving factor in evolving your skills. It might not be noticeable at once, but every time you make some new whimsical thing, you’re leveling up!

        Grab a notebook, download a note-taking app (Notion, Trello, Keep), and start documenting your ideas. Training yourself to write down ideas. However big, however small, write them down. Create ideas from things that interest you. Hoard inspiration. Sign up for newsletters. They don’t have to be tech-related. Give muz.li a try. Read a book, watch a film. Bookmark Dribbble, perhaps.

        And when the moment strikes, start making! Struggle with the “How”? Try different methods, check out how others do things, reach out to people online. Every step teaches you something new. Besides, isn’t fun worth having for its own sake anyway?

        Smashing Editorial (fb, ra, yk, il)