Five things I would tell 7th grade me about web development
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.)
You don’t have to cram design into your markup anymore
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:
- <font> - Probably used the most, this controlled typography. The most basic of CSS makes such control significantly easier
- <b>, <i>, <u> - These elements bolded, italicized, and underlined texts, respectively. Still slightly shrouded in controversy, it’s considered best practice to use <strong> for bold and <em> for italics depending on the contextual usage. Underlines should always just live in CSS.
- <table> for design work - Yes, we used to shove our website design, content and all, into a table to position elements. Controlling if a sidebar was on the left or right meant copying its entire contents from one actual table column into another. Tables eventually regained their proper status to just hold tabular data as CSS makes positioning elements 1,000 times easier.
I know you want Lycos to find your website, but it’s different now
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.
Code has History and you can preserve it
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.
Sweet child, you don’t have to hit ‘Refresh’ to view code changes
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.
This is all still a fraction of a much larger list
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.)
References / Further Reading
The latest from Integrity
Adaptation is the New Competitive Advantage
There is no question that change is the new constant. While this creates incredible challenges, it also represents tremendous ma...
Headless WordPress Site to JAMstack on Netlify
What benefits did we see when building this site into a headless experience?