Playfulness In Code: Supercharge Your Learning By Having Fun
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Start with a free demo —
Check the frontend report!
Take a break with a 3D game built on Netlify!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. Tuggable SVG light bulbs with GreenSock, Vincent van Git, Useless machines with React… plenty more besides. You can read the docs, you can follow the tutorials, but wouldn’t you be more motivated by trying to make something unique, something no one else has seen before?
Here’s how having fun can supercharge your learning. Throw a record on, pick a mood, and let’s get to it.
See the Pen Superstar DJ v3.0 w/ ScrollTrigger 😎 (Scroll to scratch!) by @jh3y.
Wanting To Learn
There is a big caveat to everything I’m about to say: if you’re not motivated to learn, you won’t learn. Even if you know it’s something you need to learn. The need is optional, but the want is not. Odds are that if you don’t want to do something, you’re not going to do it. After all, most of you reading this are likely out of school now. You’re not obligated to prepare for that exam or get that grade. You have your own free will.
In most cases, learning is driven by some goal or target. An extreme example would be the goal of paying your bills. “I must learn X for my job, to keep my job and pay my bills”. This article isn’t about those scenarios. It’s about the times when it’s not necessary. (You can only rebuild your portfolio so many times, after all.)
I have to go back quite a bit to think about how I turned out to be writing this article. I wasn’t always an extracurricular learner or even a creative coder. I actually started out as a middleware developer. I finished my degrees, got my job, and I was happy doing the eight-hour day and leaving it there. It wasn’t until towards the end of my first role that I met the “front-end” and started dabbling in it.
The first thing I remember making was a basic Trello clone. It was an opportunity to try out HTML5 “Drag and Drop” and the contenteditable attribute. It was very basic and you could create tasks and move them about. I put it in a jsfiddle or jsbin and shared it. Some colleagues thought it was cool, and that was that. Unfortunately, I’ve lost that demo now, but here’s a quick recreation from memory.
See the Pen HTML5 Drag & Drop Task Board by @jh3y.
Fast forward a little and CSS animation and 3D transforms were on my radar. In fact, 3D CSS and animation were some of the first things I spent time playing with. One thing I started with was creating a collection of loading spinners. If I had a few moments, I’d mess about with different properties and see what I could make while adding them to a file all the time. Later, I’d turn it all into a GitHub project.
A pattern was emerging of me wanting to make things. And when an opportunity to try something came along, I’d pair that with an idea and see what happened. Further adjustments to that Trello clone got valuable feedback when I posted it on Hacker News. That spurred me to create new versions of it. I haven’t touched it for a few years, but it still lives over on Github.
A few side projects and some time after that came to a winking bear demo, which I posted on CodePen. CodePen was new to me at this point.
See the Pen Gricssly bear by @jh3y.
The next day, I was on a client site and someone said, “I saw your pen on the front page of CodePen! Nice!”. I said “Thanks!”, but I had no idea what that meant until I went and checked. And there was the winking bear! This was a catalyst for my “playfulness” with code, where the pattern flipped. I went from “I want to learn X, so how do I fit it into Y” to “I want to make Y, can I learn X to do it?”.
That’s what motivates me and makes learning fun. It could work for you, too! Instead of the thought of learning X being the driving force, it’s the thought of making Y. The fact you’re learning new skills is a bonus. As my skills have developed, the ability to make my demos more and more “playful” is noticeable. But it all began from making things for the sake of making things and learning something. “How would you do that?” and not “How can you learn that?”. As your skills develop, you too can become more playful with your code. And the two will complement each other.
Playful Coding
Where do all the ideas come from? Well, it’s a good question. We can’t force creativity, but there are things I can suggest that might help convince it to appear.
Document Everything
Get a notebook, start a Trello board, open a Notion account. Find a way to take notes of your ideas. No idea is a bad idea. Repeat. No idea is a bad idea. I write down every little spark that comes into my head. That’s why I’d suggest a digital solution you can install on your phone. You never know when you’ll have an idea, and it will be annoying the next day when you can’t remember it. Trust me, I’ve been there.
Here are five random things from my “List” that all trigger something for me:
- Red and white toadstools;
- Impossible checkbox spin-off;
- Peter Griffin blinds in CSS;
- Power-up screen bear glare huge parallax from the game documentary;
- Bread Array slice/splice cartoon.
Some of that might make sense. Some of it might not. The important thing is to write down keywords that trigger thoughts of something I want to make. I can tell you the first idea is a Procreate drawing, and the fourth is from a show I watched on Netflix. There was a part in the show where a character’s face almost parallaxes on the screen. I thought it would make an amusing Twitch overlay if I can make it. On the list they go.
Another solution I’ve recently adopted and would also suggest, keep notebooks dotted about. One by the side of the bed is great! It means you don’t need to get out of bed to write down that idea you just had. Your note-taking needn’t be limited to ideas either. Document your processes and other things as you go. You’ll find that scribbling things down can often spark new ideas.
Sparking Ideas
That leads to “Where?”. Where can you grab an idea from? The answer here is very cliché: anywhere! The more I speak about it with people, the more it feels like an instinct you refine. Plucking ideas out of nothing is something you train your mind to do over time.
To kickstart things, here’s a list of places you can go to start:
CodePen
CodePen is a great resource. Have a browse, see what people are making. Could you make something similar? Someone created an Elephant with CSS, can you create a Giraffe? CodePen does a weekly prompt via email challenging you to make something. There will be a theme or certain criteria and you can follow the tags to see what people are making. And then there’s the Spark, CodePen’s newsletter which will usually be full of cool things. There are loads of great demos on the site, people giving feedback. It’s an inspiring place.
See the Pen Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG) by @jh3y.
Media (TV, Books, Film)
You can get a lot of ideas from the media. Seen a cool TV advert? Can you recreate part of it? How about the opening credits of a film? Lots of things pop up that can spark a little creativity. Books are another great resource — fiction and nonfiction. I created this HSL slider after reading Refactoring UI:
See the Pen HSL Slider w/ React + CSS vars 🤓🎨 by @jh3y.
And this is from the closing credits of the Netflix series, “Love, Death, and Robots”:
See the Pen Love, Death & Robots outro w/ GSAP 🤓 by @jh3y.
Newsletters
Sign up for newsletters that interest you. You don’t have to read them all the time, but they’re there for you. I’ve already mentioned the CodePen one. Codrops is another great one for seeing a variety of demos. They also do an “Awesome Demos Roundup”. CSS Tricks is another with great reads and resources. Or, of course, the Smashing newsletter.
This demo below was created due to a challenge set in the ViewBox newsletter. And the idea was itself inspired by the film Men in Black which I’d happened to watch twice that week.
See the Pen Orion’s Galaxy v2 by @jh3y.
Muzli
I love this one. Muzli is a browser extension that fills your “New Tab” screen with design inspiration. Have a browse through this when opening a new tab and you’re bound to find some ideas. They also do a roundup for various things over on Medium. I’ve often picked up ideas from looking through these. Such as this demo inspired by this roundup. RamBear was a recreation of this Dribbble shot from “Gigantic” with a bear spin on it.
See the Pen Code name: RamBear 😅 by @jh3y.
News & Seasonal
Current news and seasonal events are sure to get ideas firing. How about spooky demos for Halloween? I made this bear having an X-Ray because of a CodePen challenge set for Halloween.
See the Pen Bear gets an X-Ray w/ CSS Variables 🐻🔍 #CodepenChallenge by @jh3y.
Or remember when everything was cake? Yeah? I thought about making a 3D cake that you could interact with and it kinda went from there. My back catalog is full of demos that relate to current events.
See the Pen CSS is cake 🍰 (Tap the slices! 👇) by @jh3y.
Dribbble
Dribble is a great site for checking out other people’s creative work, and it could spark some ideas of your own. It’s not unusual to see people recreating things they’ve seen on Dribbble. That said, if you do recreation, please credit the original work. It’s not “inspiration” if you take the original, recreate it, and take the credit. You take the opportunity from others to discover work from the original author.
I’m not a big Reddit user myself. But, you can sometimes find interesting animations and things in various sub-Reddits. /r/oddlysatisfying has had the occasional animation that I’ve recreated. This cubes animation was something I wanted to recreate. At the same time, I wanted to try GreenSock. So I paired the two and it was the first time I used GreenSock. Honestly, try searching for “oddlysatisfying cubes”.
Years later, I’ve revisited this to build it in a different way. That allowed me to put a spin on it.
See the Pen Infinite Color Cubes by @jh3y.
If you have a Twitter account, follow people who interest and inspire. They could be in a completely different field, but their work may well spark ideas for you. There are some fantastic accounts out there. One account that springs to mind is @beesandbombs. They upload real cool animations that often have optical illusions within them. I’ve often thought “I’ll make that,” and then proceeded to try some way of making it whether it be CSS, HTML5 Canvas, and so on. It’s a great way to train to work on the finer details.
— dave (@beesandbombs) 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 😅🚙 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 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 🐻 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) 😎 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?
Further Reading
- CSS min() All The Things
- SVG Coding Examples: Useful Recipes For Writing Vectors By Hand
- How To Manage Dangerous Actions In User Interfaces
- Embracing Introversion In UX
(fb, ra, yk, il, mrn)
