Use VS Code anywhere

I am a big fan of VS Code. When I am working on a project I normally work between Micro and VSC, but have found VSC to be fantastic for anything web related. Despite it being built on top of Electron (which has a stereotype of being bloated and slow), Microsoft has clearly done a lot of work in optimising the speed and performance of this editor. In my opinion it has completely superceeded its predecessors like Atom and Brackets, both of which are also built using Electron.

Last night a stumbled upon code-server, a program that allows one to run VSC on essentially any device with a web browser. VSC is rendered and run on your own server, allowing it to do all of the heavy lifting (test, compiling of code etc) and giving you access to a full IDE from any device (even a phone!). This would have many benefits for developers, including saving battery power on their portable machines if they are on-the-go, using public computers to access work remotely and unifying all dev work into a centralised environment.

Development on a phone using this method would still be a bit cumbersome, as typing on a touchscreen would be much harder compared to a physical keyboard for longer dev sessions. However, on a device like an iPad which has more screen realestate and supports Bluetooth keyboards it would make for a nifty portable dev environment!

I am going to try testing out deploying my own code-server instance and will update this post after giving it a go!

(UPDATE 9/8/2020) - After having used code-server for a few weeks now, I think this would be excellent for any developing working from machine to machine. I personally don’t really need this as I normally am just using my own machine, but I’m still glad this exists!


Notion, supercharged

I spent the day today creating a database of designers from around the world on Notion, a personal wiki/info management software.

I’ve used Notion before for managing notes and files, but found it was a bit cumbersome when trying to share content or pages. While it was possible, there was no way to map custom memorable domains to pages (instead it would be default Notion links with a large generated string as the URL). If I wanted to share something with someone I would have to send them the link, which would then need to be pinned or bookmarked if used as a reference.

Enter the magic of Cloudflare Workers. With a bit of Javascript that is deployed serverlessly, I am able to map Notion pages to any domains I own! No more having to juggle long URLs, people just need one simple link.

Cloudflare does all of the heavy lifting. Essentially, their servers read and scrape any content that you have published publically on Notion. It then reformats this as HTML and publishes it behind a domain of your choosing! Since all traffic goed through Notion and Cloudflare, everything is encrypted and secured at every level.

Alter this JS script to add your own domain or subdomain, then paste the script in Cloudflare and deploy!

I hope you found this little hack useful!

May the road rise to meet you,


A new role

Mars the Rabbit in her house

I am due to begin a new role as a highschool teacher in a few weeks time.

This will be my first ever time formally teaching in a secondary school. Prior to this all experience I had was just training as part of my Teaching Qualification programme, first at Lynfield College and then at Auckland Grammar School.

I’m really looking forward to teaching. While I am nervous about getting started I feel as though I have a lot to give and make. Over the next few weeks I intend on preparing myself as much as I can, as well as generating teaching resources that myself and others can use.

I’m excited to share what is to come with you all.

From my elbow to yours,


Obsidian - an external rhizomatic brain

Earlier this week I started using Obsidian, an offline tool similar to Roam that links and networks ideas.

Obsidian on a glossary of design terms page

I have used a variety of tools in the past for note-taking. I’ve used Standard Notes, Left, and plain notebooks to keep a record of knowledge and things that I need to remember. Without recording information in some form, I find that I am constantly forgetting things that I’ve learnt and that recall is very difficult.

Obsidian in graph mode, showing connections like a spider web

Enter Obsidian. Like Roam, it utilises the Zettelkasten method of note-taking. Notes and thoughts are structured laterally and making connections between things is actively encouraged. The way this operates is much like how HTML documents function, only there is also an added visual graph that allows for more of a rhizomatic navigation of ideas.

Obsidian files all stored locally as Markdown documents

I am currently using this tool to record and gather information on web development and design terminology. There are already links starting to open up between the two, and potential links that I wouldn’t have otherwise thought of unless I’d seen the two ideas side-by-side. This is quite possibly the most creative form of information management that I’ve ever come across, one that I intend on using for my own projects.


The snail goes back to making

Mars the Rabbit looking into the camera

Life has been busy.

I am always looking for new and different ways of improving my life, both the quality of it and how to better myself in terms of character and skill for the future. I’ve been so dead-set in getting myself stronger so that I can have a better job, have more money, own more things and so on. One of my greatest fears is to become complacent and set in my ways.

However, the danger of being so strung up about constant improvement and renewal is forgetting what you already have. In my case, this has been the skills that I have already picked up and worked hard on while at university. I have neglected my creative practice for the longest time, in part because of how things ended up when I finished (will cover this in more detail some other time) and a general disillusionment with academia at large. After I had graduated I didn’t want anthing to do with that world anymore, and as a result took to doing different things and just trying to enjoy my life as I left all the heavy shit behind.

Despite all this, only recently have I realised that I really miss making things. Some of my favourite memories are of making different things just for fun and experimentation, not for a presentation or audience but just the process was all that mattered for me. Whether that was performing for the camera or out to the silent void that is the Internet, these are some of my most special moments.

After what I would consider to have been an extended hiatus, I have gone back to making things again. I don’t really have a plan with any of it yet, but I have thought about revisiting things that I have already worked with to try and mine them for new meaning. My little Thinkpad isn’t really built for image editing and video, but that’s precisely what I’ve been doing over the last few weeks. It’s a gentle process of trying out different things but not pushing the machine too hard to risk overheating/kernel failure!

I’ve abandoned using the Adobe Creative Suite for my work. I now consider it malware insofar as it traps users into contracts and requiring the payment of cancellation fees, uses a tonne of local resources just to install and remove their apps, and requires a constant Internet connection to phone home to Adobe servers (if it cannot do this every 7 days you are locked out of the CC Suite). While their software has now become the industry standard, I don’t think an individual like me really needs something as convoluted as this. Now, I hop between a mixture of Kdenlive, Krita, Dotgrid and Inkscape (all free and open source software!)

At the moment I’ve been trying to make a video using my notes and scraps from the past month during lockdown. Not sure where it’s headed but it’s getting me excited in any case.

From my screen to yours,

Status report

Many big developments as of late.

Sophie and I have moved into our new place. This is the first time I’ve ever felt that there’s been a space that has been truly ours and a result of what we’ve worked for.

Interior view of our place

The sense of responsibility over ones space is awesome. We have been able to furnish and organise all of our contents exactly how we want, with no worry of what others will think because it doesn’t matter! I feel as though a great sense of potential lies before us in this house, and of what the future holds in general.

Being back at work has proved to be mostly fine. I still wish I was spending more time at home working on my own projects but I shouldn’t complain - I am thankful to have work and it’s been good to see my co-workers again. Not much progress on my programming practice either but am hoping to work on this over the next few weeks.


Back at it

I went back to work this week, and it has been absolutely hectic so far.

Before Level 2 went into effect I guessed that people would react one of two ways:

One, that they would be afraid to venture out and continue to stay at home where possible, or

Two, that everyone would go back out en masse and rush to the mall, park, KFC and so on.

It seems the latter has turned out to be result of this shift. I wonder how long it will be until the lockdown will feel like a distant memory. At the same time, I can’t help but feel we have so much more to learn from this and are still incredibly unprepared.


Moving into Level 2 - my thoughts

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.


New stack

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.

Screenshot of my old site, with massive whitespace on the righthand side
My old website - look at all that unused space!

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.


On Accessibility

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.