At 4pm this afternoon the prime minister of Aotearoa announced that the country was going to be moving into Level 2. For the past month I’ve been staying indoors like many others, and have really enjoyed the stillness.
I am a bit scared about how the next few weeks will be. With everything that has happened my perception of being out in the public and dealing with strangers has completely changed. It’s made me realise just how much I enjoy and appreciate being in my own space, and that this doesn’t mean you have to be completely disconnected either.
Over the past few days I’ve completely rewritten my website and have switched to a new static site generator (Eleventy).
My previous site was a fork of Hunor Karamán’s website, built with Choo and Enoki. I really liked the flat-file structure of the site, but began feeling like things were too abstracted and limited. For example, posts on the site didn’t always play well with screen readers which created an accessibility issue. The site also didn’t scale well to desktop screens, with a massive amount of unused whitespace squishing all content to the lefthand side.
I decided to shop around for different static site generators as potential replacements. There was Jekyll, Hugo, Middleman, Pelican, Zola, Hakyll et al., all of which I have had some prior exposure to. Of all of these, Eleventy seemed like the most “logical” choice - the codebase is easy to read and understand, plus building and serving pages only takes a few seconds. I then paired this with Sam Baldwin and Piper Haywood’s fantastic Portfolio Starter theme, customised to suit my liking (more navigation links, tree-style project pages, and so on). The end result is a site that is cleaner, easier to navigate and scale across different devices.
Otherwise all other infrastructure related to the site remains unchanged. The site is hosted using Vercel (formerly known as ZEIT), with a security certificate issued by Let’s Encrypt and completely serverless. All pages and posts are in Markdown which is rendered into plain HTML, so I can work on the site either on my computer using micro or on my phone using Working Copy.
This process has been a great learning exercise for me. I have been working on the FreeCodeCamp web development course over the past few weeks, so it has been a great opportunity to test my newfound knowledge of HTML, CSS and JS. An area that I am working on further is developing ARIA tags on the site to gain further accessibility for users.
As it turns out, accessibility on the web means much more than simply adding alt text to things
Today I completed the “Applied Accessibility” section on FreeCodeCamp. I had very little prior understanding of accessibility despite having an entire section on this website dedicated to it. While I personally think it is fairly legible and easy to navigate, there are many aspects of this site that are too abstracted for users of screen readers.
I had no idea that semantic HTML was a thing! Now upon having studied this it makes complete sense - looking through the source code of a webpage and seeing div tags everywhere makes difficult to read even from a development standpoint. It is logical for accessibility to extend to things like labels for forms, buttons, and even using CSS to display graphical information to screen-readers as a table.
This course has now made me seriously reconsider how I approach web development. I don’t want to exclude users from navigating and using my site, especially if it’s because I’ve cut corners in how I am writing my HTML + CSS. The WCAG is very comprehensive in this regard, and I think it is best for me to make this approach of making with accessibility in mind as standard practice from now on.
The lockdown has meant that I’ve been able to dig deeper into the discography of a few artists lately.
One artist in particular that I’ve been listening to a lot is JPEGMAFIA. I’ve been a big listener of his for the past few years and his last album All My Heroes Are Cornballs was my AOTY last year. His level of production is truly off the wall, like a scratched Playstation One disc that’s been uploaded via Tor and spat out the other side. His use of a Ridge Racer 4 sample in BALD! is one such example, and results in songs that are like nothing else ever done before in my opinion.
I don’t think his comparison to Death Grips is fair. While I understand that his earlier work had production that sounds somewhat like a Death Grips record (the song Baby I’m Bleeding is a good example), JPEGMAFIA’s lyrics are highly political, full of clever wordplay and excellent delivery. You get the impression that this is a person who truly cares about his craft, but doesn’t give a damn at the same time. He is genuinely doing it for the music and is making it how he wants - just looking at some of his song titles is a testament to this.
Personally I find his music and artistry incredibly refreshing and inspiring. I think this kind of mindset translates into all arenas of life, and it gives me a renewed sense of motivation towards my own ongoing projects.
I had no idea the true power and depth of CSS until today - the possibilities seem endless!
text: While my prior understanding of CSS had been centred on navigating stylesheets and things related to HTML formatting, I had no idea about how it can actively draw, manipulate and animate elements on a webpage.
I am still getting my head around how to “draw” things using CSS. Pseudo classes are a great concept, but I have only just managed to grasp the basic use of them. I also still haven’t quite figured out how content strings in CSS work - what do they actually do and why do I need them?
It’s clear that the relationship between HTML and CSS is truly intertwined and layered. With a creative mindset and hardwork one could make some really cool shit with just these two things alone.
I’m now partway through the Response Web Design course on FreeCodeCamp (what I am using to structure my studies). It’ll be all about applied accessibility in web design tomorrow, so I’m looking forward to it! I have a very small understanding of the WCAG and ARIA tags for HTML but definitely need to brush up here.
My last blog post talked about how I wish to learn how to crawl before attempting to run with regards to front end development. I have gained a very rough knowledge of HTML, CSS and JS over the years through tinkering, but have never learnt the fundamental concepts and terms associated with these technologies. No structure or formal training whatsoever.
There are two things I plan on doing to rectify this. The first is going through the full stack development course on FreeCodeCamp, one that has been recommended and mentioned by many on the web including designer Eduoard Urcades. The second is going through the basics on MDN, using this to create my own cookbook or glossary of concepts and terms that are fundamental to web development.
I realise that much of this is going to be fairly standard rote learning and memorising. Because of this, I intend on treating the learn like a school course with set hours throughout the day. And just like a school, I will be using a physical book to build my glossary as I am progressing through the FCC course.
With lockdown here in New Zealand extended until at least mid-May, it’s all the more reason for me to spend my time productively. Tomorrow I will set everything up and work for two hours (typical of a university lecture).
Yesterday I had the opportunity to speak with Piper Haywood, a designer and front-end developer based in the UK who makes up one half of the design studio SB-PH. Piper has been running digital coffee sessions for the past month as people across the globe are isolated and affected by Covid-19. Having come across her work with Sam Baldwin before and wanted to get some advice on how a creative might start learning to program, I signed up for a session!
My conversation with Piper was awesome. Talking to someone who also came from a visual arts background was especially helpful insofar as the conversation was not solely centred on the technical aspects of programming. I have spoken to CS graduates before for advice on how someone like myself can get started, what resources I should look into and books to read etc. While this was helpful in its own way, much of what I was trying to do in taking this approach felt a bit pedestrian and prescribed. At the same time I have been trying to run before I knew how to crawl - I don’t know the proper terminology surrounding many things like HTML, CSS and JS, nor do I understand how certain things function or perform. I have been trying to build fully polished things having had little foundational knowledge.
However, despite not having the technical knowledge that a fresh CS graduate might possess, there was one asset that I did have and they lacked. Piper remarked on how having a creative background can be a huge strength when programming and building things, particularly when it comes to problem solving. Where the typical CS approach might be more of a linear A-to-B method, being able to think creatively can start to open up some truly unique ways of working. The technical know-how, while also important, is what Piper described as rote-knowledge - something black and white that just takes continued practice to build up.
Having had this discussion and reflection, it has given me a renewed push towards learning and making. The first step for me is picking up the terms and concepts associated with programming, particularly in front-end technologies, and consistent practice + play!
Part of this consistency is writing down and keeping a record of whatever I am doing. I used to do this religiously in art school and it really worked well for me, so I think it’s about time to pick that up again.