As a self-taught front-end developer while also freelancing in technology research, learning to code has been a sloooow burn. Looking back on some code from a year ago, when I first started learning modern JavaScript, I can confidently say that a year ago my code was a cluster-f***. The process of refactoring the code a year later really highlighted how much I learned and help me deal with imposter syndrome

TL;DR

I had three key wins that helped me feel more confident:

I know more than I thought I did, like applying the MVC pattern to code and how to structure code clearly
I can figure out my own solution by using tools I'm not familiar with like pug and Node by reading documentation and doing research
I overcame my fear of Webpack

The project I'm refactoring is called Remixoji. Remixoji was a vanilla JavaScript webapp I was building to learn about modern JavaScript. With Remixoji, I ended up in a rabbit hole of learning how to manipulate Canvas and SVG elements and the DOM in general. Remixoji takes different aspects of emojis to create a new emoji

Remixoji enables users to takes different aspects of emojis from Twitter's open source emojis to create new emojis. — Remixoji enables users to takes different aspects of emojis from Twitter's open source emojis to create new emojis

I knew then that the code was pretty poorly written, but I had not yet learn how to make it better, so it never went into production.

Old code where basically everything ran from a single file: [Github Gist]

New code with everything neatly structured: [Github Repo]

Remixoji [Live site]

What I learned by refactoring Remixoji

1. Using Class syntax with MVC pattern

When refactoring the code I put relevant functions (including event handlers) and variables into logical classes using the ES6+ Class syntax with a simple MVC setup. This gave me the opportunity to better understand the MVC pattern and also to write Classes from scratch

Old index.html file

<html>
    <!-- DOM elements -->
    <script>
        /* a whole bunch of functions not in any particular order */
    </script>
</html>

New script.js file structure, split out from index.html

class EmojiPart {
    // This class ensures consistency of an EmojiPart object
  constructor(type, id) {
      this.type = type;
      this.id = id;
  }
}

class Remix {
    // Remix is the model which takes care of the data for the app
    constructor() {...}
    addPart(part) {...}
    removePart(partType) {...}
    removeAllParts() {...}
}

class View {
    // The view takes care of displaying the app based on the data from the model
    constructor() {...}
    displayRemix(remix) {...}
    updateSVGDownloadURL() {...}
    // more methods...
}

class App {
    // App is the controller which tells the model to update in response to user input
    // App also providers a handler for Remix that tells View to update based on Remix data
    constructor() {...}
    handleAddPart = (partID, partType) => {...}
    handleUpdateVivew = () => {...}
    // more methods...
}

Win #1

My original code had no real structure or pattern, but a year later I can apply MVC using Classes! 🙋🏻‍♀️

2. Using build scripts and Pug to generate HTML

My Remixoji scripts from one year ago inserted SVGs into the DOM on the client side. It would fetch a JSON file that listed all the SVGs that needed to be inserted and then get each SVG and insert it into the DOM. This approach was unnecessary since the SVGs I'm using do not change—they can be part of the static HTML

Client-side only to insert SVGs — Previously my code dynamically inserted SVGs on the client-side using JavaScript; there was no build process

Using Pug I was able to build an html page with all the SVGs inserted. With the pug package and a short script I got node to dynamically pass in the SVGs inline to the pug template via the list of SVG files listed in the original JSON file I had used before refactoring

For each of the SVG files listed in the JSON, the script pulled in the file data, and pushed it to the pug template so it can be inserted as inline SVGs. By building the HTML page with all the SVGs already in it I also cut out a lot of the client-side JavaScript that I was using for fetching and DOM manipulation

Using a build process to insert SVGs — When refactoring I dynamically inserted SVGs inline during the build process

Win #2

I didn't know much about Pug and I didn't know how to use it in Node, nor would I consider myself a Node expert, but was able to read the documentation and do some googling to create a unique solution for this project. Win! 🙋🏻‍♀️

3. Rolling my own webpack config

I had read up a bit about webpack through React tutorials, but never wrote my own. Refactoring Remixoji is a great opportunity to write a basic webpack.config.js file because:

I needed to transpile my script.js file to ES5 using Babel so it would work for most users; not just people running the latest and greatest browser versions
I wanted to minify my script.js and style.css files to improve performance for the user

I got the basics setup to compile my ES6 JavaScript to ES5 and to minify, but there's still more to learn in terms of fine tuning webpack.config.js such as working with different types of sourcemaps

Win #3

6 months ago I was so intimidated by Webpack that I metaphorically hid under the sheets. I went so far as to use Gulp instead, but during my refactoring of Remixoji I decided it was time to start reading their Getting Started and Documentation. While I can improve my Webpack setup, getting started is such a win! 🙋🏻‍♀️

Conclusion

Refactoring Remixoji was a great learning experience, and it also meant I finally got to put some old code in production in an efficient, structured, and performant way. What was once an html file with a HUGE script section that did everything client-side became a project that builds a performant webapp without any frameworks that most users can use on their desktop and mobile devices

Blog

Refactoring code from a year ago helped me with my imposter syndrome

Nancy