On learning HTML and CSS

If you haven't noticed yet, this site is entirely built using only HTML5 and CSS[1]. I'm rather proud of this - the pages are blazing fast to load and only take around 25kb

If we break it down further this is 2kb for the CSS, 17kb for that adorable profile picture, and then the rest is content[2]. Not too shabby!

As part of developing this there were some cool bits that I stumbled across - most of this should be familiar to anyone who's touched web code in the last 5 years but were new to me!

I'm a backend developer through and through - at university[3] we didn't even look at an HTML tag, nevermind something as revolutionary as jQuery![4]

This means that all my exposure was through piece-meal picking at websites when they weren't working quite right, or one of the numerous times I tried to start a personal site and ended up with yet another shitty, bloated, unintelligible wordpress theme - no offence, I just hated not understanding what was going on and not being able to meaningfully change it.

Finally, thanks to GitHub Pages and some spare energy I worked up the impetus to get my shit together.

CSS Grid

Probably the coolest thing I learnt was about CSS grid - it made incredibly intuitive sense! Simply define the grid, name the areas, and voilĂ ! Responsive web design!

There are many, many blogs extolling the virtues of grid[5] and explaining how to use it, but honestly it was so straightforward I couldn't believe it!

Semantic HTML

For a long time I held the belief that HTML was a soup of random tags pulled from a hat, and while that's still largely true I like the direction and push to use semantic tags - at the very least I feel better writing it.

Bash + Sed

It's kinda odd, however I take a rather perverse pleasure in writing bash. Every inscrutable line, all the pipes, the arrays - they all make me feel a little bit like a maverick, a rebel, a rule-breaker. But honestly, who wouldn't want that?[6]

It was far too tempting to re-invent the wheel and write some bash for this site, and since it is based around interpolation of course I had to dig out old memories of using sed. After some liberal application of Stack Overflow I eventually got to this line, which is awful

sed -e "/##$filename##/ {" -e "r $f" -e "d" -e "}" -i {} \;

What the hell is going on with all those options anyways??

[1]You can find the source here
[2]Yes yes, also the header, footer, and navbar - however these are negligible
[3]Not ragging on the university, the CS program is actually really good
[4]Stop it Patrick! You're scaring the other backend developers!
[5]Even Wikipedia is getting in on the action
[6]Citation Required. Also, anyone on a team or anyone who wants to write maintainable, stable, and safe code