Home E-Learning How To Code SpaceHey The Retro Myspace Web site

How To Code SpaceHey The Retro Myspace Web site

How To Code SpaceHey The Retro Myspace Web site

This 19-Year-Old Programmer Coded Myspace Back To Life — Take A Look

In honor of Codecademy’s eleventh anniversary, we’re wanting again on the 2000s web sites and software program that influenced our founders to construct Codecademy — and impressed a era to be taught to code. Discover different enjoyable deep dives into early aughts web matters right here.

Within the early aughts, whereas youngsters have been busy copying HTML/CSS snippets for his or her Myspace structure and deciding which mates earned a spot of their “High 8,” Anton Röhm was only a toddler. Now, the 20-year-old from Germany is the programmer behind the totally functioning Myspace re-creation, referred to as SpaceHey.

Anton constructed SpaceHey for enjoyable in the course of the pandemic, and the web site took off on TikTok and Twitter with individuals claiming, “Myspace is again!” From the unassuming fonts to the primitive running a blog function, Anton took further care to seize the essence of the 2000s and make a convincing Myspace dupe.

“I used to be fascinated by Myspace, and I went down a rabbit gap with Wikipedia and archive.org,” Anton says. “I assumed Myspace was fairly thrilling, however sadly, I had by no means tried it.”

SpaceHey’s 500,000-plus group is a mixture of former Myspace customers absorbing the nostalgia, in addition to Gen Zers who’re eager to leap on one other Y2K development.

Constructing SpaceHey has given Anton a crash course in sustaining an internet site: “Since I launched SpaceHey in 2020, I have been working nonstop on it, like full-time,” Anton says. “The principle work proper now could be holding the servers up and operating, as a result of they’re at all times underneath a heavy load.”

Right here, Anton shares how he coded SpaceHey, the distinctive methods individuals are utilizing HTML/CSS on the positioning, and his idea about why this retro platform is making a comeback.

How’d you be taught to code?

“I began once I was round like 13 or so, as a result of I used to be at all times fascinated by computer systems and needed to have my very own web site. I began with WordPress and simply created WordPress blogs, and tried out various things with hundreds of plugins. However at one level, I felt like I hit a wall.

I assumed, Okay, I wish to do that, however there is no plugin to do it, so I Googled the best way to create my very own plugin. I needed to know PHP to create a WordPress plugin, however I did not know what PHP was, so I regarded into it. Then I needed to output textual content. How do I do this? I must know HTML. What’s HTML?

So I by no means actually thought to myself, Now I wish to begin studying to code. It simply occurred, and I Googled my means via it.”

How did you code SpaceHey?

“I began with simply recreating the Myspace homepage with plain HTML and CSS — it was non-functional, however simply the design. When that was accomplished, I used PHP, as a result of that is the first programming language I used, and that is the one I do know one of the best. I needed to get it began as shortly as potential.

I began to make the homepage purposeful, with all of the hyperlinks, and the signup kind. I made the entire authentication system, constructed the database, and all that stuff. SpaceHey is written in plain PHP with no frameworks, plain HTML and CSS, and JavaScript. I take advantage of a little bit of jQuery for the messenger, however that is it.”

What kind of analysis did you do to precisely recreate Myspace’s design aesthetic and options?

“Primarily screenshots, previous YouTube movies, display recordings, and archive.org, which has some Myspace pages archive. However aside from the homepage, I couldn’t actually discover screenshots for the entire options Myspace had. So a lot of the pages I designed myself and thought, Okay, how might it have regarded like and felt like again then? I used to be simply making an attempt it out — and I form of bought it proper.”

Anton SpaceHey profile
Anton’s SpaceHey profile.

Can individuals make customized layouts with CSS like you can on Myspace?

“That is one of many essential facets! I felt that Twitter and Instagram restricted how I categorical my creativity, as a result of each profile mainly appears the identical, so I needed to convey layouts again.

SpaceHey Layouts page
Similar to the previous MySpace, customizable layouts are an enormous deal on SpaceHey.

Myspace was well-known for the customized structure. In SpaceHey, you’re allowed to insert customized HTML and CSS into your profile, and you’ll simply paste no matter you need — in fact, it is filtered to exclude issues that may very well be dangerous, like no JavaScript, or no iframes*. You’ll be able to mainly go wild and make your individual profile your individual house. I even have a structure part proper on SpaceHey the place individuals can create layouts and share them with others, so when you don’t know the best way to code, you’ll be able to simply copy the snippets from there.”

*Whereas these languages aren’t innately harmful, limiting the positioning to only HTML/CSS prevents issues like cross-site scripting (XSS), which is a vulnerability that happens when an online software returns unsanitized enter to the entrance finish of an software.

On this case, a malicious actor would inject dangerous code on their internet web page to execute when an individual goes to their profile, explains Nik Stern, Curriculum Developer at Codecademy. We even have a course on Defending Node Functions from SQL Injection, XSS, & CSRF Assaults that explains the best way to defend your websites from cyberattacks.

What are some methods individuals are customizing their profiles?

“If you give the individuals the chance to code their very own layouts and their very own profiles, they’re going to be extremely artistic. They’re creating profiles now that I by no means thought was potential with simply CSS and HTML.

For instance, I’ve discovered profiles that mimic the aesthetics of Home windows XP and Home windows working programs. They’ve a boot-up display whenever you have a look at a web page, with out JavaScript — it is simply CSS with the startup sound from YouTube embedded. One lady created a structure utilizing simply CSS with a ton of Polaroid photos surrounding the web page, a wooden background, a pocket book within the center, and a handwriting font — it’s unbelievable. It is loopy what they will do with simply so little code.”

Cristiana SpaceHey layout
A structure {that a} SpaceHey member created utilizing simply CSS.

In addition to the nostalgia, why do you assume individuals are nonetheless so connected to Myspace?

“It is the exact opposite of recent social media, as a result of there are no algorithms to check content material, there is no feed or ‘for you web page,’ and it is solely web-based, so there are not any notifications or information to maintain your consideration for hours.

I feel that is the principle motive why individuals wish to really feel nostalgic — and that’s working rather well. Folks simply go on it, make actual connections with individuals, touch upon their pages, create pages with their very own code. After they’re accomplished, they log off and log again within the subsequent day. It is a a lot more healthy expertise, in my view.”

Do you wish to pursue internet growth as a profession?

Net growth is admittedly fascinating to me, however alternatively, what I’ve realized with SpaceHey is that it is a lot extra with server administration and DevOps, which can also be actually thrilling. I am not sure what path I wish to select, however proper now I’ve to do every thing alone for SpaceHey. It is actually enjoyable to be taught all of the facets, with shoppers, the back-end servers, the caching — every thing.”

What’s your plan for the way forward for SpaceHey?

“Presently, a lot of the SpaceHey prices are coming from my very own pocket. The servers are sadly getting increasingly costly because the person base grows. I haven’t got an enormous funds to throw AWS [Amazon Web Services] or one thing at it.

So what I am doing proper now to assist the prices is I’ve a store the place individuals can order SpaceHey stickers, and I will mail them — they usually pays any quantity they need, be it 9 or 90 euros, I do not care.

Alternatively, that is not practically sufficient to maintain it operating for the foreseeable future, so I am wanting into sponsorships or placing a small advert on the homepage or one thing like that. However it’s actually onerous to search out firms to do that with out wanting to trace every thing — as a result of I actually don’t love all of the personalised ads. I do not need that on SpaceHey.”

Wish to relive your Myspace days or simply decide up some new coding expertise? Discover ways to use code to customise an online web page (or simply make a cool Myspace structure) with our programs Study HTML and Study CSS — you is perhaps shocked by how a lot you bear in mind. If you wish to perceive what it takes to make an internet site dynamic and responsive, take a look at our beginner-friendly Study JavaScript course. Make sure you take a look at the remainder of our Net Improvement programs to learn the way code powers essentially the most iconic web sites and apps on the web.

Net Improvement Programs & Tutorials | Codecademy

Net Improvement is the observe of growing web sites and internet apps that dwell on the web. Whether or not you’re all for front-end, back-end, or going full-stack, the content material in our Net Improvement area will make it easier to get there.