"Yikes,"
...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:
1) 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!)
3) 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!
Happy Franken-coding, noobs!
Question for all:
How did you get started on your journey as a developer?
What made you a better developer?
Top comments (25)
My first experience with code was Geocities. HTML and CSS, but then I wanted to find out how to make really cool things. I tried to reverse-engineer complicated server-driven websites by downloading their HTML source. I tried sooooo hard and couldn't figure it out.
Eventually I found out about PHP. I still wound up losing interest in programming for about a decade, but I finally came back.
When I came back I was still making table-based layouts 😱
glitch.com is trying to make this kind of process as magical as possible. @anildash and co are doing cool things.
Yes!! Reverse-engineering things is what I do professionally. 😹
But it's so time-consuming and convoluted, especially at an enterprise-level.
I embarassingly went into my web development degree thinking table-layouts were still a thing.
2014 . Jesus.
Thank you for the links! I'll definitely check them out.
Also, I just listened to your interview on Learn To Code With Me Podcast! It's what inspired me to finally write here today.
I should probably go back to work....😅
Awesome!
I really need to do more podcasts.
This was why, back when people actually banged out HTML in their favorite, wholly text-oriented browser of choice, you could embed <!-- stolen from > notations.
That is, if you weren't so concerned with squeezing every last bit of "nonsense" out of your page so that it would render acceptably quickly on your shiny, new 56Kbps MODEM. =)
A 10 year old me just cared about cursor sparkles, man. hahaha
I'm just gonna go over to this corner, grab a rocking-chair and a warm sweater and complain about kids being on my lawn. =)
I use view-source to copy pages for the NetKoTH competition my 2600 group hosts.
You tag the site with your team name and reupload on the compromised server (OWASP VMs)
The index pages are normally quite simple, but they are a good start to analyzing the site structure.
Good luck at figuring out ASP.net setups though
I just looked up the details of NetKoTH. That sounds amazing.
Welcome to one-stop-shop frameworks: where you need an actual rosetta stone to figure out how to do one. stinkin'. thing.
We can just let the inevitable AIs coalesce the framework ecosystem into something usable
since kid I'm always curious and questioning myself how something ( tech things) are done, back then I was crazy to know how people made Nintendo and specially the mortal kombat game, then in high school, I went to a prefessional school, and start to study programming, when I wrote my first Pascal program mannn I fell in love with, after Learn some PHP and Js and Finally have internet on home I got nuts, like all the time searching how things are done e trying out stuff and that has been doing good for me, working as webdev by day and studying computer science by night :)
Great post, Cat! I always say to the n00bs turn off the autocomplete. dont cp paste the codes, but type it. to, when you learn something, even if its simple, teach another people that dont know it yet. ASK! if you dont dont know something, ask! there's no stupid question. And have a nice side project and keep improving it with your new skills.
Franken-coding is one of the most fun ways to learn! Like you, my early knowledge of HTML, JS, and Perl came from finding neat features and figuring out how to modify them for my own totally cool '90s AOL webpage. I remember typing up a list of all the HTML tags I knew and printing it out for a friend so she could make a webpage too (and she did!). I discovered CSS when I was trying to understand how some sites had links that weren't underlined. Sounds so basic now, but at the time it was incredibly exciting.
When you discover
text-decoration: none;your whole UI design world changes instantly. 🤣Should have called this "Franken-code 'Till You Maken-code."
Dangnabit missed opportunity right there. 😤
Amazing article. I found that taking lines of code from different sources and applying it to my projects actually helped me to understand what I was doing and how it worked, even making my own adjustments in the process. I don't feel too bad anymore about doing that
I'm glad you enjoyed it!
That's exactly how I feel about it. I felt so awkward not being able to make anything from scratch (and I still do). I'm learning to let go and own my process.
Cannibalization: consumes code, gives +1 to intelligence, +1 to wisdom, -1 to charisma.
+10 to { { your Hogwarts House here } } for your clever analogy.
I agree, but I'm not sure a lot of it can be considered stealing... It's like taking sand and making a sand castle then claiming the next person stole your sand castle idea.
This brings to mind this comic:
nedroidcomics.tumblr.com/post/4187...