By
I’m going to let you in on a secret: I’ve kinda been building websites since middle school. I wanted a way to post my comics and fanart online, but I also really wanted to control how I presented my work. Many grade schoolers are now getting classes about code through school or a bevy of specialty learning and tutorial websites. In the late 90’s, I had to rely on a 56K connection to our home phone line and hogging the family PC from everyone else. (This is where you get to guess how dang old I am.)
Web development is a field that moves incredibly fast, to the point that I didn’t really trust any classes that existed for it as I grew up. The majority of my learning is self-taught, so in the interest of Time Since Middle School, here’s a small collection of how developing websites when I first got into it has changed. (I’ll repeat - this is a small list, as the web has exploded with possibilities over the years that would take a small seminar to teach Middle School Me about.)
HTML is the document that delivered websites to me in middle school. Controlling the style and design of your website often mixed with the document structure itself. Your <p> tags that held paragraphs would be wrapped in a <font> element if you need it increase or decrease the size, change color, or underline it. Over time, this made style-based changes very messy.
The ability to separate document structure from aesthetic design makes all kinds of sense now, but when I first learned about websites, CSS didn’t have as much muscle as it does now (and the muscles it did have didn’t always have consistent support across browsers)
The number of obsolete and misused HTML elements from Middle School Me to Now Me is too long for this article, but here’s a short summary of things I had to frequently rely on before:
Google is used as a verb now in casual conversation, but was not the search engine giant that Middle School Me used. Instead it was a combination of Lycos and Yahoo, and the workings of Search Engine Optimization were baffling to me.
No worries though - <meta> elements existed back then as they do now, giving search engines information about what was in my website. However, the elements used for good SEO have changed dramatically. Middle School Me agonized over what words should go into the keywords attribute of a <meta> element that I put dutifully into the top of all my HTML files, all while also signing up for various webrings related to my site’s content (but that’s REALLY dating myself).
Today, websites are crawled based on the actual content of the page that humans themselves are reading and not so much by a list of comma-separated words in the source code (among numerous other factors). Many of these changes by search engines were due to nefarious practices termed black hat SEO: some sites would abuse meta tags by stuffing them with keywords that had little to no relation to the actual content of the page.
I went through several layouts for my middle school website. If there was one I was particularly fond of, I made sure to set up a nice new folder called “Awesome_Website_v_2” with the year tagged on the end. This method continued through my first web development job during high school and college (but we used actual client names instead and stored files on a separate in-house server).
Today, the concept of Source Control, also known as Version Control, creates a much saner and more reliable way to manage your code. There’s a multitude of softwares to choose from to help you manage your code base and its history. Our choice at Integrity is Git, which I learned within my first 2 weeks of working here. Multiple devs can pull down a copy of a website or application's code from one location, then create their own local branch for whatever feature or fix they might be working on. When finished, code can be sent back up to a service such as Github.com or Bitbucket.org for safe storage, review, and eventual addition to the site’s production code.
It’s gettin’ harder to determine which item would make Middle School Me's brain explode from over-information the most. Code editing in-browser is probably the highest ranking. Middle School Me diligently kept an Internet Explorer or Netscape Navigator window open and hit the Reload/Refresh button after every code edit to see if changes were successful.
Every modern browser has some form of a code inspector built in. My preference is Chrome DevTools - I can check page load times, view CSS properties, change an HTML element on the fly and hundreds of other nerdy dev possibilities. Not only that, but tools such as BrowserSync can be included in a project that will literally reload the page when I save my file. Middle School Me would have had so much more time for video games with these tools.
As I pass this information on to Middle School Me and see her eyes enlarge with wonder, the most mind-blowing part is this list of differences only scrapes the surface of development practices that didn’t exist when I started learning. Smart devices, animations, lazy loading, open-sourced Content Management Systems, hosting that scales based on traffic. If I were to try to impart all of this on Middle School Me, she would probably get discouraged and give up.
That’s why I saved the greatest improvement for last: connectivity. The ability to learn and grow today as a web developer is astounding - from open-source tools/software with abundant documentation, to live streamed tech conferences, to free in-browser code lessons, to accessible social media platforms of respected and brilliant developers, to a chat program that lets me pester my dev bros in Florida if I get stuck. It’s improved so vastly, and will continue, complete with all kinds of gifs. (And yes, I had those in middle school – they were mostly video game sprites.)
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid
.jpg)
