MySpace to SpaceHey: How HTML/CSS Have Shaped Social Media
In the early 2000s, I can remember sitting in our designated computer room with my older sister watching her copy, cut, and Yahoo search “how to insert image into myspace layout?” for hours. Eventually, her end product was to her satisfaction, and for the next week, she was doing it all over again. Her layouts started as different iterations of the default given layout and soon became “DIV” (which makes sense now) layouts. They were small compact and centered on the page. The coding was a lot more complex looking, I was just there cheering her on. Once I was finally old enough to have my own MySpace profile I started to dip my fingers into this confusing and satisfying process, you know between updating my top 8. Fast forward to 20-something years later MySpace is a fossil and no longer understood. Here I am now applying HTML, CSS, and JavaScript once again.
As I’m wrapping up phase 1 of the software engineering program with Flatiron School, I’ve chosen the topic of HTML/CSS for many reasons. For starters, it was almost familiar and a little easier to grasp than other topics. I was never a MySpace layout master by any means, but I do believe that the creative freedom of the social media platform opened a lot of curiosity for me. So How has HTML/CSS evolved from the MySpace era?
HTML5 vs HTML4.01
The standard HTML version in today’s world is HTML5, but at the launch of MySpace in 2003 the HTML version was HTML4.01. It was 1999 when the latest and greatest HTML4.01 was implemented over HTML3.2 and was the standard for about 15 years. HTML4.01 aimed to standardize and formalize the HTML language. It was a major step towards establishing HTML as a stable and well-documented specification, making it easier for developers to create consistent web content. Some of HTML4.01’s features were as follows:
Form Elements, which expanded the capabilities of web forms and made it easier to create interactive user interfaces. It introduced many new input types like, <input type=”password”>, <input type=”checkbox”>, <input type=”radio”>, and <label>.
Tables, improved table markup by introducing features like colspan and rowspan for allowing for more complex table layouts. Colspan is used to merge cells horizontally (across columns), while rowspan is used to merge cells vertically (down through rows) within an HTML table, and they can be used in conjunction with each other.
Frames, HTML4.01 brought framesets and the <iframe> element, which allowed for the creation of multi-pane layouts. Frames have fallen out of modern web development, but they were a significant feature at the time. The HTML5 <div> element, combined with CSS Grid Layout, is now used to create multi-pane layouts without using frames or iframes.
Styling and Presentation, HTML 4.01 supporrted the inagration of cascading style sheets (CSS)! In modern web development, this is one of the biggest leaps HTML 4.01 could have given us. This allowed for greater control over the visual design of web pages and improved consistency in styling.
Scripting and Events, the ability to attach scripts to HTML elements using attributes or “Event handlers” like onclick and onmouseover, enabling basic interactivity on web pages. That is still very much used today.
On that note, HTML4.01 was an important transitional phase in the growth of web development. It introduced many improvements over HTML3.2, it also laid the groundwork for newer HTML versions, including HTML5! That has brought even more advanced features and capabilities to the web. Some of the improvements within HTML5 are:
Semantic Elements, HTML5 introduced new semantic elements such as <header>, <nav>, <section>, <article>, and <footer>, for a few examples. These elements provide a clearer structure to web content, making it easier for search engines to understand.
Audio and Video Support, support of audio and video elements (<audio> and <video>), eliminating the need for third-party plugins like Flash or QuickTime. This allows for better multimedia integration and improved performance.
Canvas, the <canvas> element, enables dynamic rendering of 2D graphics and animations directly in the browser. This is very useful for interactive web applications and games.
Geolocation API, allows web applications to access a user’s location with their permission. This feature is useful for location-based services.
Improved Error Handling, HTML5 has stricter error handling rules, this helps ensure consistent rendering of web content across different browsers and encourages authors to write cleaner, standard-compliant code.
Form Enhancements, new input types, and attributes for forms, making it easier to create user-friendly and semantically meaningful forms. To include <input type=”date”>, <input type=”email”>, and <input type=”url”>.
In summary, HTML5 is a huge advancement over HTML4 it introduced a range of features and enhancements that improve web development capabilities. Things like reducing dependency on plugins and support for multimedia, accessibility, local storage, improved security, and overall user experiences. Providing more standardized ways to structure web content. These improvements have made HTML5 the foundation of modern web development.
CSS
A rundown on CSS (cascading style sheets) in 1996 CSS1 was introduced as a separate tool used for web styling and presentation. It defined fonts, colors, padding, and margins. Fast forward a few years CSS2 came along as an extension to CSS1, with the advancements for media-specific stylesheets. Now it’s the late 1990s and around the early 2000s, web browsers can support CSS more consistently, and is now it being worked into HTML 4.01. These versions complemented each other well enough that CSS2 is now standard. The elements <div>, and <span> within HTML 4.01 could be targeted by CSS for styling structured layouts! Now the current version of CSS, CSS3 came to be in the 2010s. This new version wasn’t released together but in smaller parts that eventually made the final product. The new features include rounded corners, gradients, shadows, animations, and transitions. This really improved the interactivity of webpages. This iteration of CSS was adopted into HTML5. The history shows that CSS moves with prevailing versions of HTML and it only makes sense that it would.
Anyway, that is just a few comparisons of the state of the web then vs. the web now. Now back to MySpace and how it was free enough to allow creativity in the form of anything that could be expressed in HTML. Now that the “fun” MySpace is retired. A newer social media platform with similar freedoms exists called “SpaceHey”. I used this platform to create a simple MySpace-like profile, and this is how it went.
Starting off SpaceHey was showing a lot of similarities to MySpace and it was almost nostalgic. I dug a little deeper into this new platform and turns out that SpaceHey was launched in 2020 by Anton Röhm. While his main goal was to keep things as close to MySpace as he could. The use of Javascript is not accepted here.
Now this code snippet only provides CSS but we know that HTML and CSS work hand in hand. This styles the HTML structure that lives within this platform’s codebase. However, it does allow HTML in the form of embedded content for an example.
“<iframe style=”border-radius:12px” src=”https://open.spotify.com/embed/artist/0L8ExT028jH3ddEcZwqJJ5?utm_source=generator" width=”100%” height=”352" frameBorder=”0" allowfullscreen=”” allow=”autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture” loading=”lazy”></iframe>”
This isn’t the total “freedom” but even with this prebuilt code, you can still manipulate it a little! Plus this audio player is a lot more aesthetically pleasing than the old standard MySpace one.
The use of HTML is limited on this platform, they even give you a list of what is allowed.
<img>, <a> ,<div>, <table>, <tbody>, <caption>, <strike>, <tr>, <td> ,<th> <br> ,<p> ,<b> ,<strong>, <i>, <u> ,<em> ,<span>, <sup>, <sub> ,<time>, <ol> ,<ul>, <li> ,<blockquote>, <del> ,<mark>, <pre> ,<code> ,<hr>, <h1> <h2>, <h3> ,<h4>, <h5> ,<h6> ,<big> ,<small> ,<font>, <center>, <blink> <marquee> ,<details> ,<summary> ,<section>, <aside> ,<style>, and <picture>.
This website does not allow JavaScript due to being a potential harm to the social media site. The reasoning behind the limiting is actually a pretty good one. Cross-site scripting (XSS) or in this case, Samy, was a computer bug that was created by Samy Kamkar. A bored teenage boy in 2004 (peek MySpace days) who wanted to up his friend’s list. Long story short, he built a code in a web browser with relaxed security. The bug added the line “but most of all, Samy is my hero” on the targeted user profile and sent a friend request to Samy himself (not knowing). This put Myspace offline for a little while. The site did properly filter JavaScript signs for the most part but with the relaxed security measures from both Myspace and web browsers at the time, it was a combination that made the site very susceptible to XSS. All in all, I can’t blame Anton for his decision. In conclusion to this passage and blast into the past. The web, HTML, CSS, and social media have evolved with us for the better!
