npm install make-me-a-dev

Where does originality come from? If (like me) you're starting out in web development, you may be wondering how some developers seem to come up with brilliant ideas on a regular basis. Or maybe you're just wondering how you can create some dazzling and creative design to show off your skills.

The good news? It isn't magic. The bad news? There also isn't a magical shortcut to get you from beginner to expert in a few short months. Or even years.

But there is a concept that help you understand the creative process as you work to develop your skillset. After all, creativity—as much as we like to romanticize it—isn't a divine gift bestowed upon a select few.

Creativity is remix. And modern development itself is based upon this powerful concept.

Everything is Remix

Remix is the process of creating something new by copying, transforming, and combining ideas. Kirby Ferguson has a fantastic video essay, Everything is a Remix, that traces how all of our greatest thoughts, inventions, and works of art are the result of bringing together the ideas of others.

To go back even further, the Ancient Greek and Roman academies were often situated around imitatio: copying the works of great orators to learn their tricks. In other words—and stop me if you've heard this before—you have to learn the rules before you can break them.

So, fellow novice developer, if you're feeling anxious and un-creative as you slog through your fifteenth tutorial project, try to remember: we all have to learn to copy before we learn to innovate. Even the best artists and authors, at one point, were creating derivative work based on what they loved. Think of it as building a vocabulary in the domain of your (eventual) expertise.

You Have to Build a Lot of To Do Apps Before...

At the beginning we copy so that we can learn the principles at the basis of programming. Without understanding the use of variables or the convenience of looping, we might be able to identify the kinds of applications we want to develop, but we'll have no idea how their pieces fit together.

Resources like freecodecamp.org are great for this kind of practice, letting us first learn the basics and then begin applying them to simulated projects. Similarly, Frontend Mentor and Frontend Practice are based around literally copying other designs to learn principles of web development.

Rather than being dismissive of this stage, it's important to consider the usefulness of learning to emulate others' designs and coding styles. It isn't meant to be a stopping point, but in order to learn the foundations of the field, we need to be familiar with what others have made. Not to simply copy it, but to understand what we like and dislike about particular strategies.

Once we can accurately copy the work of those who inspire us, we can push further.

Make it Your Own

On an episode of the Code Newbie, Danny Thompson shared this advice for overcoming some of the pitfalls of early development life. After following a tutorial and making some component or web application, go back and make it again.

But instead of following the same step-by-step process, change the focus slightly and attempt to work from memory. Change the topic, or the product being "sold." There's no shame in going back to the resource to figure something out, but we begin to pick up speed in development when we engage with the second component of remix: transforming materials.

And we reach this stage much sooner than we think. Taking up the 30 Days of JavaScript challenge, it's easy to follow along as Wes Bos guides you through the varied projects. The first challenge involves creating a virtual drum kit that plays sounds based on key-presses. It's an interesting look at data-attributes on html tags and the <audio> tag itself.

But it's also a laboratory. After completing the tutorial and seeing how the pieces fit together, I decided that I wanted to go back and make another personalized version. I thought about making a soundboard that would play audio clips from a podcast I helped create. But instead of being solely based on key-presses, I wanted the sound clips to activate with mouse clicks as well so that the app could function on mobile devices.

While there are some fantastic resources that encourage this kind of transformation, the trick here is that you can't follow a recipe. You have to think about how you can change something you've copied. The good news is that this doesn't have to be a massive, polished change. Even doing something as simple as altering the color scheme or the CSS styling paradigm (using CSS Grid instead of Flexbox, or trying out SASS) has massive value.

In short, no one's judging you at this stage. Break the things you code and marvel at how weird you can make them. Doing this kind of work starts to produce a massive result in terms of our feelings toward coding. It's empowering to follow a tutorial and make something that's functional. But when you start putting your own spin on a design, it really becomes your own.

Yet, while transforming the things we love is powerful, it's still not the true height of remix.

npm init -heckYeah

What is Notion? Well, it's a web application that lets us take notes. Oh, but it also kind of works like Excel and you can build spreadsheets. But those spreadsheets can also be displayed as Kanban boards to help with productivity. And you can also publish note pages or databases directly to the web as live websites. And it lets us work collaboratively with others!

In short, Notion is a combination of a lot of other tools and technologies that already existed. Much of the power of Notion as a tool comes from the way it has packaged together all of these different affordances. And if you examine whatever might be your favorite application, you're going to see something similar.

Many of the most innovative ideas out there come from smashing together other ideas that we love. There's no magic conjuring involved, but that also doesn't lessen the impact of these designs. At some point, we make the transition from copying and transforming materials to combining them together. We make mashups.

And this is where we see how programming is so firmly tied to remix. At some point, if you're pursuing JavaScript as a development language, you're going to come across references to npm or yarn, (or ruby's gems or python's pip) and articles are going to start discussing packages and package managers.

Because coding is so complex and involves solving often-similar problems, the development community itself has oriented itself around tools that help us do what we need to do with as little friction as possible. Do you want to convert markdown text files into html? There's a package for that. Do you want to automatically resize and serve responsive images on your site? There's a package for that too.

npm is actually the inspiration for this article, because while it took me a bit of time to wrap my head around the utility of npm, its elegance struck like an epiphany. Because npm is the epitome of remix.

npm init -y is a beautiful command. It leaves behind a simple package.json file in its wake, but that file is almost magical. It lets you add, update, and remove entire worlds of functionality to your code by typing the the name of a package and the version you want to include. Run npm install in the directory and it takes care of the rest.

It's a perfect little map of all the people and ideas that came before you to help you build the application you want to create. Even if you're a solo-developer, you're not alone if you're working with npm and packages, because you're in conversation with the ideas of so many other developers.

Learning and Remixing

It can be intimidating starting out in programming, especially if you've come to it from another path or career. There's a lot of technical knowledge to master and the landscape changes rapidly. But you don't have to go it alone. In fact, I don't think you could if you tried. Development is about taking ideas and combining them together. It's communication, and it defies all the stereotypes of the coder as loner sitting in isolation staring at a screen.

Yeah, there's a lot of looking at screens, but there's also a lot of community baked into it. I've been fortunate to stumble into some literal coding communities that have been welcoming and insightful. And while I'm still doing a heck of a lot of copying, being able to look ahead and see the kind of work that developers do makes me excited to push forward and start transforming my code and combining it with the amazing work of other fantastic devs.

So if you're feeling lost or a little overwhelmed, remember that everyone starts with the basics. Everyone copies. And everything really is a remix.