Monday December 21, 2020 By David Quintanilla
Supercharge Your Learning By Having Fun — Smashing Magazine

About The Creator

Jhey makes superior issues for superior folks! He’s an online developer with nearly 10 years of expertise. Working with and for names similar to Eurostar, Uber, …
More about

Within the product-focused world of improvement, it may be straightforward to overlook the enjoyment of constructing for the sake of constructing. By dropping the ‘Why’ and ‘How’, and focusing as a substitute on the ‘What’ of bizarre, great concepts, you’ll be able to nurture a completely totally different facet to your talent units.

I’m typically requested the place the concepts come from. How do I do know the issues I do? Having ten years of expertise in improvement helps, however what supercharged my studying was pushing myself to construct the issues that got here into my head, nevertheless uncommon. I developed an urge for food for constructing issues that aren’t ‘the norm.’ With that mindset, each thought turns into a chance to attempt one thing new.

One in all my most important mantras is to make studying enjoyable. It’s one thing folks have come to know me by. Tuggable SVG light bulbs with GreenSock, Vincent van Git, Useless machines with React… a lot extra in addition to. You’ll be able to learn the docs, you’ll be able to comply with the tutorials, however wouldn’t you be extra motivated by attempting to make one thing distinctive, one thing nobody else has seen earlier than?

Right here’s how having enjoyable can supercharge your studying. Throw a document on, decide a temper, and let’s get to it.

See the Pen [Superstar DJ v3.0 w/ ScrollTrigger 😎 (Scroll to scratch!)](https://codepen.io/smashingmag/pen/NWRKMQm) by @jh3y.

See the Pen Superstar DJ v3.0 w/ ScrollTrigger 😎 (Scroll to scratch!) by @jh3y.

Wanting To Be taught

There’s a massive caveat to all the pieces I’m about to say: if you happen to’re not motivated to study, you gained’t study. Even when you already know it’s one thing it is advisable to study. The necessity is optionally available, however the need just isn’t. Odds are that if you happen to don’t need to do one thing, you’re not going to do it. In any case, most of you studying this are probably out of faculty now. You’re not obligated to arrange for that examination or get that grade. You may have your personal free will.

Usually, studying is pushed by some purpose or goal. An excessive instance could be the purpose of paying your payments. “I have to study X for my job, to maintain my job and pay my payments”. This text isn’t about these situations. It’s in regards to the instances when it’s not mandatory. (You’ll be able to solely rebuild your portfolio so many instances, in any case.)

I’ve to return fairly a bit to consider how I turned out to be writing this text. I wasn’t at all times an extracurricular learner or perhaps a artistic coder. I truly began out as a middleware developer. I completed my levels, received my job, and I used to be blissful doing the eight-hour day and leaving it there. It wasn’t till in the direction of the tip of my first position that I met the “front-end” and began dabbling in it.

The very first thing I bear in mind making was a fundamental Trello clone. It was a chance to check out HTML5 “Drag and Drop” and the contenteditable attribute. It was very fundamental and you can create duties and transfer them about. I put it in a jsfiddle or jsbin and shared it. Some colleagues thought it was cool, and that was that. Sadly, I’ve misplaced that demo now, however right here’s a fast recreation from reminiscence.

See the Pen [HTML5 Drag & Drop Task Board](https://codepen.io/smashingmag/pen/dypbOww) by @jh3y.

See the Pen HTML5 Drag & Drop Task Board by @jh3y.

Quick ahead just a little and CSS animation and 3D transforms have been on my radar. Actually, 3D CSS and animation have been a few of the first issues I frolicked enjoying with. One factor I began with was creating a set of loading spinners. If I had a number of moments, I’d mess about with totally different properties and see what I might make whereas including them to a file on a regular basis. Later, I’d turn it all into a GitHub project.

A sample was rising of me eager to make issues. And when a chance to attempt one thing got here alongside, I’d pair that with an thought and see what occurred. Additional changes to that Trello clone received priceless suggestions once I posted it on Hacker Information. That spurred me to create new variations of it. I haven’t touched it for a number of years, nevertheless it still lives over on Github.

A number of facet tasks and a while after that got here to a winking bear demo, which I posted on CodePen. CodePen was new to me at this level.

See the Pen [Gricssly bear](https://codepen.io/smashingmag/pen/jOMNyOB) by @jh3y.

See the Pen Gricssly bear by @jh3y.

The following day, I used to be on a consumer web site and somebody mentioned, “I noticed your pen on the entrance web page of CodePen! Good!”. I mentioned “Thanks!”, however I had no thought what that meant till I went and checked. And there was the winking bear! This was a catalyst for my “playfulness” with code, the place the sample flipped. I went from “I need to study X, so how do I match it into Y” to “I need to make Y, can I study X to do it?”.

That’s what motivates me and makes studying enjoyable. It might be just right for you, too! As a substitute of the considered studying X being the driving power, it’s the considered making Y. The very fact you’re studying new abilities is a bonus. As my abilities have developed, the power to make my demos increasingly “playful” is noticeable. However it all started from making issues for the sake of constructing issues and studying one thing. “How would you do this?” and never “How are you going to study that?”. As your abilities develop, you can also turn out to be extra playful together with your code. And the 2 will complement one another.

Playful Coding

The place do all of the concepts come from? Effectively, it’s a superb query. We will’t power creativity, however there are issues I can recommend that may assist persuade it to look.

Doc All the things

Get a pocket book, begin a Trello board, open a Notion account. Discover a option to take notes of your concepts. No thought is a foul thought. Repeat. No thought is a foul thought. I write down each little spark that comes into my head. That’s why I’d recommend a digital answer you’ll be able to set up in your cellphone. You by no means know while you’ll have an thought, and will probably be annoying the following day when you’ll be able to’t bear in mind it. Belief me, I’ve been there.

Listed here are 5 random issues from my “Record” that every one set off one thing for me:

  • Purple and white toadstools;
  • Not possible checkbox spin-off;
  • Peter Griffin blinds in CSS;
  • Energy-up display screen bear glare big parallax from the sport documentary;
  • Bread Array slice/splice cartoon.

A few of that may make sense. A few of it won’t. The vital factor is to put in writing down key phrases that set off ideas of one thing I need to make. I can inform you the primary thought is a Procreate drawing, and the fourth is from a present I watched on Netflix. There was a component within the present the place a personality’s face nearly parallaxes on the display screen. I assumed it could make an amusing Twitch overlay if I could make it. On the record they go.

One other answer I’ve lately adopted and would additionally recommend, hold notebooks dotted about. One by the facet of the mattress is nice! It means you don’t must get off the bed to put in writing down that concept you simply had. Your note-taking needn’t be restricted to concepts both. Doc your processes and different issues as you go. You’ll discover that scribbling issues down can typically spark new concepts.

Sparking Concepts

That results in “The place?”. The place are you able to seize an thought from? The reply right here may be very cliché: wherever! The extra I discuss it with folks, the extra it appears like an intuition you refine. Plucking concepts out of nothing is one thing you practice your thoughts to do over time.

To kickstart issues, right here’s a listing of locations you’ll be able to go to start out:


CodePen is a superb useful resource. Have a browse, see what persons are making. May you make one thing comparable? Somebody created an Elephant with CSS, are you able to create a Giraffe? CodePen does a weekly immediate by way of e mail difficult you to make one thing. There can be a theme or sure standards and you may comply with the tags to see what persons are making. After which there’s the Spark, CodePen’s e-newsletter which can often be stuffed with cool issues. There are a great deal of nice demos on the location, folks giving suggestions. It’s an inspiring place.

See the Pen [Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG)](https://codepen.io/smashingmag/pen/NWRKdxd) by @jh3y.

See the Pen Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG) by @jh3y.
Media (TV, Books, Movie)

You will get a number of concepts from the media. Seen a cool TV advert? Are you able to recreate a part of it? How in regards to the opening credit of a movie? Plenty of issues pop up that may spark just a little creativity. Books are one other nice useful resource — fiction and nonfiction. I created this HSL slider after studying Refactoring UI:

See the Pen [HSL Slider w/ React + CSS vars 🤓🎨](https://codepen.io/smashingmag/pen/zYKONBJ) by @jh3y.

See the Pen HSL Slider w/ React + CSS vars 🤓🎨 by @jh3y.

And that is from the closing credit of the Netflix sequence, “Love, Demise, and Robots”:

See the Pen [Love, Death & Robots outro w/ GSAP 🤓](https://codepen.io/smashingmag/pen/rNMBjqo) by @jh3y.

See the Pen Love, Death & Robots outro w/ GSAP 🤓 by @jh3y.

Join newsletters that curiosity you. You don’t must learn them on a regular basis, however they’re there for you. I’ve already talked about the CodePen one. Codrops is one other nice one for seeing a wide range of demos. In addition they do an “Superior Demos Roundup”. CSS Tricks is one other with nice reads and assets. Or, in fact, the Smashing newsletter.

This demo beneath was created resulting from a problem set within the ViewBox e-newsletter. And the thought was itself impressed by the movie Males in Black which I’d occurred to observe twice that week.

See the Pen [Orion’s Galaxy v2](https://codepen.io/smashingmag/pen/eYdOgdr) by @jh3y.

See the Pen Orion’s Galaxy v2 by @jh3y.

I really like this one. Muzli is a browser extension that fills your “New Tab” display screen with design inspiration. Have a flick through this when opening a brand new tab and also you’re sure to search out some concepts. In addition they do a roundup for varied issues over on Medium. I’ve typically picked up concepts from trying by means of these. Comparable to this demo impressed 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 😅](https://codepen.io/smashingmag/pen/ZEpzLBx) by @jh3y.

See the Pen Code name: RamBear 😅 by @jh3y.
Information & Seasonal

Present information and seasonal occasions are positive to get concepts firing. How about spooky demos for Halloween? I made this bear having an X-Ray due to a CodePen problem set for Halloween.

See the Pen [Bear gets an X-Ray w/ CSS Variables 🐻🔍 #CodepenChallenge](https://codepen.io/smashingmag/pen/ZEpzLLo) by @jh3y.

See the Pen Bear gets an X-Ray w/ CSS Variables 🐻🔍 #CodepenChallenge by @jh3y.

Or bear in mind when all the pieces was cake? Yeah? I considered making a 3D cake that you can work together with and it kinda went from there. My again catalog is filled with demos that relate to present occasions.

See the Pen [CSS is cake 🍰 (Tap the slices! 👇)](https://codepen.io/smashingmag/pen/WNGeRpO) by @jh3y.

See the Pen CSS is cake 🍰 (Tap the slices! 👇) by @jh3y.

Dribble is a superb web site for testing different folks’s artistic work, and it might spark some concepts of your personal. It’s commonplace to see folks recreating issues they’ve seen on Dribbble. That mentioned, if you happen to do recreation, please credit score the unique work. It’s not “inspiration” if you happen to take the unique, recreate it, and take the credit score. You’re taking the chance from others to find work from the unique writer.


I’m not a giant Reddit person myself. However, you’ll be able to generally discover attention-grabbing animations and issues in varied sub-Reddits. /r/oddlysatisfying has had the occasional animation that I’ve recreated. This cubes animation was one thing I wished to recreate. On the similar time, I wished to attempt GreenSock. So I paired the 2 and it was the primary time I used GreenSock. Actually, attempt trying to find “oddlysatisfying cubes”.

See the Pen [Cubed 😅](https://codepen.io/smashingmag/pen/LYRPxWo) by @jh3y.

See the Pen Cubed 😅 by @jh3y.

Years later, I’ve revisited this to construct it another way. That allowed me to place a spin on it.

See the Pen [Infinite Color Cubes](https://codepen.io/smashingmag/pen/JjRPEwP) by @jh3y.

See the Pen Infinite Color Cubes by @jh3y.

You probably have a Twitter account, comply with individuals who curiosity and encourage. They could possibly be in a totally totally different discipline, however their work could nicely spark concepts for you. There are some unbelievable accounts on the market. One account that springs to thoughts is @beesandbombs. They add actual cool animations that usually have optical illusions inside them. I’ve typically thought “I’ll make that,” after which proceeded to attempt a way of constructing it whether or not or not it’s CSS, HTML5 Canvas, and so forth. It’s an effective way to coach to work on the finer particulars.

Wherever Else

I might hold itemizing sources of inspiration, however it may be totally different for everybody. These are those that work for me. However contemplate something. Stuff you see in your travels, conversations, or issues round the home.

Turning Concepts Into Demos And Initiatives

You’ve received your concepts. However, there’s no rush to make them. You don’t must make all the pieces you word down. Actually, odds are you’ll by no means have time to make all the pieces. That’s one thing it’s a must to take care of. It’s one thing I struggled with the higher I received at documenting my concepts.

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 happen to browse my CodePen history it’s like a timeline for what I’ve been studying and exploring, pushed by concepts and inspiration. The considered making one thing, not studying one thing. I don’t often have time to look again at outdated demos however this text has prompted that. It’s attention-grabbing to look again and bear in mind what drove what.

For instance, I wished to create Masonry layouts, so I realized the method for it utilizing flex. I wished to create star fields, so I realized HTML5 Canvas rendering methods. Actually, I bear in mind studying the latter within 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 problem. I’d seen a bit about SVG filters however not had something I wished to attempt them out on. I wished to make a lava lamp with CSS and it was an ideal alternative.

Make for the sake of constructing. Don’t overthink it. Be pushed by the thought as a result of you’ll study issues. You’ll in all probability study much more issues than you ever anticipated. It could actually and can strengthen your capability to rise to a problem or change context on the drop of a hat. These are abilities that may actually empower your profession as a developer.

Doc your concepts and while you need to make them, go for it! In case your first focus is the “How” or the “Why”, that concept may stick round in your record for a while.

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

I make a number of ‘whimsical’ issues and I’m typically requested, “Why?”, “Is there any sensible use for this?”, and so forth. Don’t dwell on that facet of issues. You’re making one thing since you need to. Making one thing unconventional could be extra enjoyable than following “Construct a TODO app 101”. There’s a time and a spot for the 101s, however I need you to get pleasure from studying. Acquire an urge for food for creating great issues that none of us have ever seen.

Work on the concepts that spark pleasure for you. Don’t let the “How?” distract you. Give attention to the “What?”. The purpose is to get the thought, then discover a option to make it. If it means studying one thing new — nice. If you are able to do it with one thing already in your toolbelt — superior. Let the concepts information you. The number of your tasks can typically problem you to make use of instruments you already know in several methods. You’ll be able to decide up new methods from tackling issues others won’t have even seen. It offers you a capability to suppose “Outdoors of the field”.

Let’s additionally deal with the concept that these items aren’t ‘helpful’. I don’t imagine that is ever the case. A serious instance for me is CSS artwork. “Why do that with CSS? Use a picture like SVG”. Don’t purchase into that. By drawing one thing with CSS, you stage up your abilities by creating attention-grabbing shapes, studying the stacking index, and a lot extra. The cool factor with CSS artwork, particularly, is that each creation tends to yield a special downside. Sure, you gained’t be dropping that 1000 strains of CSS right into a manufacturing web site anytime quickly and also you’ll use a picture. However, did the picture train you the right way to use clip-path or be a wizard with border-radius?

For instance, a demo of mine is “The unattainable checkbox”. It’s a toggle that while you toggle on, a bear turns off. The extra you flip it on, the angrier the bear will get. If I had centered on the “How?” then that demo could by no means have come to life. As a substitute, I sketched out what I assumed may appear to be. After which determined I used to be going to make use of React and GreenSock along 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 thought of “How?” deter you from the “What?”. Additionally, by no means query the “Why?” Make cool issues and you’ll study from them, little question.

Make, Make, Make

Begin writing down your concepts and making issues for the sake of constructing issues. That’s my recommendation if you wish to stage up and add some playfulness to your code.

What you study will discover its means again into your work. As a latest instance, I put collectively an eBook on CSS animations. I might’ve created each demo with a crimson sq., however that’s not very partaking. As a substitute, the ebook has animated bunnies, racecars and UFOs to assist the information stick. As a substitute of attempting to recollect what the crimson sq. was doing and the way. It’s “Bear in mind we made the bunnies all soar at totally different instances utilizing 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.

That is the main level. Being playful together with your code and what may seem to be “lateral” studying could be a big driving consider evolving your abilities. It won’t be noticeable directly, however each time you make some new whimsical factor, you’re leveling up!

Seize a pocket book, obtain a note-taking app (Notion, Trello, Hold), and begin documenting your concepts. Coaching your self to put in writing down concepts. Nevertheless massive, nevertheless small, write them down. Create concepts from issues that curiosity you. Hoard inspiration. Join newsletters. They don’t must be tech-related. Give muz.li a attempt. Learn a ebook, watch a movie. Bookmark Dribbble, maybe.

And when the second strikes, begin making! Battle with the “How”? Attempt totally different strategies, take a look at how others do issues, attain out to folks on-line. Each step teaches you one thing new. In addition to, isn’t enjoyable value having for its personal sake anyway?

Smashing Editorial
(fb, ra, yk, il)

Source link