Franken-code 'Till You Make It.

Published Jun 06, 2018Last updated Dec 03, 2018

...echoed in your brain chamber as you read the title.

Let me preface this article with this tidbit:

Like many young, budding designers and developers in the late 90's - early 2000's, I had a Myspace profile, a Livejournal, and even Geocities-based domain.

Back then, Javascript-based trailing cursor sparkles, Perl-based guestbooks, and HTML iframes dominated the indie "webmaster" scene.

I hacked and slashed my way around everyone else's sites to make my own places on the web a little more visually appealing.

Right-click -> "Page source" || "Inspect" were --and still are-- my friends.

I recently visited didthanoskill.me and was curious as to how it determines your fate.

It was so simply coded in Javascript. I broke the illusion to my non-tech friends.

(They didn't care.)

It brought me back to the days when I saw something I liked on someone's Myspace profile or blog, scoured their source code, and stole it for myself.

I cut, pasted, and combined snippets of CSS from your profile. I traced the tags of visitor counters and redirected URL to count my own visitors. I saw that you had a crosshair cursor and trailing sparkles. I found cursor: crosshair, and the script you used for the sparkles.

It worked.

"How. Dare. You."

Admittedly, there were a few times I was caught, but that was only when I didn't change much of the code at all.

Many lessons have been learned since then.

With the knowledge of how HTML and CSS came together, I could bend and meld the UI as I pleased.

By (live and public) trial-and-error, I learned to discern which div classes I needed to manipulate.

Through my crimes, I have learned the importance and the technical aspects of UI design and development.

Recalling this process helped especially at the time when I was earning my degree in web development.

Recalling this process today puts me at an advantage at work: I know what I need to find to get the job done.

I'm not saying to actually STEAL code and make someone else's app your own by only changing the author's name.

I'm saying you should steal the code and find out how it works.

From dissecting another's source code, you can learn what certain pieces of the app mean and how a seasoned developer wrote their code.

You can be inspired by their product.

You can be better-informed about standardization.

Like a Katamari ball (TL;DR: a ball created and grown by running over random things),

you continue to collect this information, and eventually recall all of it and apply it to your own experience.

Franken-coding strangely increases your sleuthing skills

I am still guilty of this. I tried Franken-coding my first Bootstrap layout.
It was terrible, but it ultimately worked to my advantage.

I was able to find the sections I needed to learn how to create a better layout simply because I reviewed the code I stole directly from documentation.

Documentation and Stackoverflow foraging are essential to becoming a better developer.

(Even if the community is filled with know-it-all jerks.)

When on the hunt, I committed to memory very important keywords and tags:

For instance, I needed to change the typeface of the entire page. I have to look for the <style type="text/css"> tag within the <head> section. Then, I'd search for the body { element and the font: or font-family: selector within the CSS.

(Back then, CSS was commonly on the same page as the content. Yikes, again.)

When I was on didthanoskill.me, I found the source code for the logic written to determine your fate by searching for the <script> tag.

Don't be afraid to do this, noob dev.

There is no shame in copy-pasting for the sake of learning!

Here's one way to do it:

Set up your localhost environment or sign up for a CodePen account. 2) Fire up SublimeText or your favorite text editor (mine was Notepad for awhile!)
Start out small: find and fork a reasonably-sized project on GitHub or play with it directly on CodePen (just don't commit to master, you jerk).

Eventually, from this experience, you can contribute to open source code projects!

...or skip everything I just listed and contribute anyway!