Why I built my new website as a single html document

A few notes around my new portfolio page.

Image for post
Image for post
Photo by Sarah Dorweiler on Unsplash

A little backstory

I built my old portfolio website with Vue.js, so I can learn more about the framework. After a while I got tired of maintaining dependencies, CLIs, builds and decided I would try out something new for my new website — I would throw out every bit of tech I didn’t need and use only the essentials.

One document

What is the minimum? For my needs, it’s a page that hosts info about me and my work. Project pages could either link directly to the projects themselves or to articles here on Medium.

The happy strangeness of this decision

  • One page means that I could inline all of the CSS and javascript, even the SVG images into a single HTML document. Why would I make them as separate files and make network requests to them if only one page is going to use the code?
  • For me, coding all of the site inside one document was very cathartic. No external complexity or boilerplate to worry about. Just the basic web tech we all know and love. When was the last time you created a new document and started by writing <html> inside it?
  • A single document is something very portable. Not that you would, but you could actually send this website to someone over email or IM and they could open it — no local server required, not even an internet connection — it natively works offline!
  • Inline SVG images allowed me to directly select the geometry inside them with CSS and manipulate them.
  • With whitespaces removed, the document is just over 48 kilobytes. Think of all the bits saved from going across the network!

The happiest of all

With all of the external complexity gone (data binding, components talking to each other, builds and deploys) I now had more mental bandwidth to focus on the details and be more playful and experimental with the page.

Web standards

The last time I wrote I a website from scratch with just native web technologies I had to think about certain browsers not supporting display: inline-block, because I was using that to build the layout. Yeah, it was long ago.

  • With CSS Grid and the grid-area property, I could position most of my layout pieces with a single, semantic line of code. Not that you couldn’t do that using a framework, too — the point is that in today’s web you don’t need a framework to do it.
  • For a project like this, I think there is nothing wrong with being a little verbose with Javascript. It’s okay to use document.querySelector() more frequently and it’s okay to have 7 if() statements inside a single function. Nobody is going to get hurt by doing this and everything will be okay.

Performance

It’s pointless to compare extremes. For this simple page, the native web will probably always be faster. For more elaborate pages and web apps, more elaborate tools will yield better results. It is worth reminding ourselves, however, that while it is tempting and maybe even fun to go for the sledgehammer, more often than not it is not worth the lift.

Image for post
Image for post
New (Left) — Old (Right)

In conclusion

It’s easy to get caught up in all the great tools that exist today. I think however that we forget the greatest tool of all — the native web. Sometimes that is all we need. 🚀

Written by

Product designer from the East EU

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store