Alexa Drake

Designing a website without Javascript

9.29.2018

The look and feel of the internet has changed a lot since I started using it, something like 20 years ago; the librarian at my elementary school taught us how to cite webpages and promptly warned us about relying on web-based sources, as there was a good chance it was full of bad information (which I think we could all use a reminder of every now and again, but I digress). Now, static websites are few and far between and frames as we knew them are nowhere to be found; content is loaded into modals instead of in new pages (we didn't have tabs back then, either!) or in the same page.

I'm not even going to get into streaming...

A lot of what we recognize as the internet today comes from one thing: Javascript. Whether we as developers love the language or think it's crap would rather program in other langauges, Javascript is here to stay*. It's the de facto language behind the modern internet. Unlike HTML, it's Turing complete and it allows pages to be modified after they're initially loaded by the browser (essentially replacing Flash for that sort of thing). And we've gotten a lot of good things out of it, like streaming content and, one could argue, modals. But it's also why advertisements animate and move with me as I scroll over a website. And it's one of the reasons that webpages might take longer to load.

And frameworks like bootstrap make web design easy. Need your website to look good on a bunch of different screens of different sizes and across browsers? Use bootstrap. That's what it's for.

But I hate those ads that follow me and animate and don't load until I'm already scrolling through content, which then moves around to accommodate the advertisement. So I, and some of the people that I know, use NoScript, which blocks scripts from running as I browse. And breaks a surprising number of websites.

So I decided, when it came time to start working on my own website, that I'd make the whole thing without Javascript (and by extension, no bootstrap). I'm not doing anything fancy with my website (as you can tell by looking at it), but I wanted it to look nice and also be responsive (look nice on any size screen, including on mobile). This meant I had to learn to write CSS (Cascading Style Sheets, the language that tells the browser how to render a the html of a website). I've used css in the past for simple things like coloring text or setting dimension-limits for images and the like, but making a whole website responsive was new to me.

Getting the layout looking how I wanted it at one screen-size was easy enough: it largely consisted of trial and error. Though things like the horizontal layout of the navigation menu (how it's to the left of the content of each page) required learning a little bit about absolute vs. relative positioning--no big deal. Once it looked good enough on one screen, it was just a matter of determining at what screen-width the layout should change and adding @media only screen and ([conditions]) { [css-code] } sections to the .css file my website was loading. These act like conditional branches: if the [conditions] are met, use the styling defined within the brackets.

Awesome!

You can see all of the code for this website, including the css here. I use similar techniques for handling the layout of this website too (even though it is not JS-free).

*: There are other languages I'd rather use, but sometimes Javascript is the tool for the job, and it would be unwise to use another language just because of preferences.