The Absolute One Best Trick to Becoming an Awesome Software Developer
Tags: javascript, webdev, frontend, backend
Published: 2021-06-28 03:39:43

---
title: The Absolute One Best Trick to Becoming an Awesome Software Developer
published: true
description: 
tags: javascript, webdevelopment, frontend, backend
//cover_image: https://direct_url_to_image.jpg
---

As a software developer, how many times have you done this:

1. Thought of some exciting idea for a software project,
2. Started working obsessively on building it out, finding the perfect tooling, the perfect patterns, the perfect packages,
3. Then life happens and you get distracted just long enough to lose your momentum, or you realize you simply bit off more than you could chew.

Or maybe you're a new dev and have thought about diving into some of the great open source out there to learn by experience, but then you do just that and discover that trying to decipher the design principles and absorb all of the new concepts is utterly overwhelming.

Software development is often severely esoteric. Most people never really get good at it, and many just quit early on. Regardless of whether you're (1) a new dev who had the perseverance to get the fundamentals down, or (2) an experienced dev who can't seem to finish a personal project, I'm about to give you the best "life hack" to quickly grow your skills in a rock-solid and intentional way while also establishing a portfolio to showcase your talent.

## Micro-projects

You're obviously not going to get better at software development without doing it. We get better by doing. However, most of us just try to go too damn hard on personal projects with grandiose intentions, but then fizzle out without enough time or motivation or prerequisite knowledge available. The solution here—and maybe the *secret*—is to pick small, manageable projects that you can easily complete in a week, a few days, or even a few hours.

Micro-projects focus on a discrete and specific feature scope—a video carousel React component or a page scraping service or a serverless Python function—allowing *you* to focus on learning or perfecting a few concepts with a shorter time commitment, which helps ensure that you don't lose steam before the project is complete while giving you that gratification of having created something real.

In fact, I'd recommend trying *mini*, *micro*, ***and*** *nano* projects. What tf is the difference here? In the software world, examples are always useful. Here are some such projects I've worked on recently that both illustrate this difference while also allowing me to shamelessly plug some of my own work:

1. ###[Doubly-Linked List](https://codepen.io/HoraceShmorace/pen/xxRjoEe)
**size: nano
time to complete: < 1 hour**

    No one should ever need a Linked or Doubly-Linked List in JavaScript (seriously, not ever, nor any of those other "classical" data structures), but it's the kind of exercise that *always* comes up in job interviews. So I decided to just get ahead of it and whip up proof that I know what these things are. Creating the `DoublyLinkedList` class—and the `LinkedList` class it extends—took all of 40 minutes, tops.

1. ###[Side Scroller w/ Sticky Headers + Snap Points](https://codepen.io/HoraceShmorace/pen/bZXeKd)
**size: nano
time to complete: 2 hours**

    An example "widget" in HTML and CSS (no JS) that scrolls horizontally through slides with sticky vertical headers and snap points. I know... what? Click the link to find out. As an aside, we could rather easily turn this into a carousel and add an infinite, repeating scroll with just a trivial amount of JavaScript.

2. ###[React Stopwatch](https://codepen.io/HoraceShmorace/pen/LYWKexo)
**size: micro
time to complete: 3 days**

    After completing a coding challenge to create a clock in vanilla JS and CSS—which I did in record time (accidental puns FTW)—I was inspired to do something else with clocks. I landed on coding a stopwatch in React and SCSS with most of features of a real, fully functioning stopwatch. One new concept I stumbled across here was conical gradients in CSS and the arithmetic necessary to create the precisely-spaced tick marks around the clock face.

3. ###[Particle Soup](https://codepen.io/HoraceShmorace/pen/ewNXyr)
**size: micro
time to complete: 3-4 days**

    Having trouble coming up with a project idea? Find someone else's project that inspires you, fork it, and make it better. That's what I did when I took this vanilla JS project on Codepen and made it into a streamlined micro React app with sliders to control the various effects. I was able to learn a ton about drawing and animating objects using Canvas.

4. ###[Image Flex](https://github.com/HoraceShmorace/Image-Flex)
**size: mini
time to complete: 1 week**

    A robust, secure image resizing service easily deployable to resize, optimize, and cache images on "the edge," on the fly, built on AWS Serverless technologies. You can read my write up on this fully open source software [here](https://dev.to/horaceshmorace/an-open-source-and-completely-serverless-image-resizing-service-in-aws-589b).

The trick here is to *check your appetite before you order*. Be realistic about how much time and energy you have to devote to some project. Pick projects that focus on learning specific skills in which you're interested and/or ones that will make for impressive portfolio examples. Then, do a lot of them.
 
As devs, we always imagine—even *fantasize about*—doing some expansive, impressive, impactful project that garners lots of praise and recognition. Github stars might as well be "self worth points." Very few of us have the actual time to do anything substantial. What we *can* do is reduce the size and scope of a project down to something manageable, while still creating something of value. I'll play myself out with a list of free "code playgrounds" to create and run your mini, micro, and nano front-end and Node.js projects:

1. [Codepen](https://codepen.io/HoraceShmorace)
1. [Glitch](https://glitch.com/)
1. [JSFiddle](https://jsfiddle.net/)
1. [JSBin](https://jsbin.com/)
1. [Plunkr](http://plnkr.co/)
1. [Replit](https://replit.com/)
1. [Runkit](https://runkit.com/HoraceShmorace)

Of course, for professional open source, share your code (and follow me) on [Github](https://github.com/HoraceShmorace)!