D00k

A new way to theme the Quickscreen in Rockbox

Wed, 24 Jul 2024 14:48:28 EST

For the past year, I’ve been working on a major redesign of Themify, my user-customisable Rockbox theme. It’s proven to be my most ambitious Rockbox project yet, aiming to create a level of user-experience unseen before in any other UI theme. However, one of the major improvements in this rebuild has been the overhauling of Rockbox’s Quickscreen.

What is the Quickscreen?

For the unfamiliar, Rockbox lets users choose up to four settings to be accessible from a screen known as the Quickscreen. By default, information on the Quickscreen is drawn by Rockbox in a plain manner. This isn’t something that can be changed, and so theme creators have recently begun to try working around it. Since Yuuiko’s Infomatrix, several themes have begun bringing more visual information to the Quickscreen. Often themes might show sliders for volume and brightness, or indicators for certain feature’s status. However, the actual Quickscreen items however have largely remained out of reach.

Theorizing a path to custom Quickscreens

During Adwaitapod 3.0’s development, I began to theorize a method of creating custom Quickscreens. Theme creators are no strangers to using hacks and tricks to get around the limitations of the theme engine, and I adapted some of these to make the first prototype a reality.

Themes in Rockbox are constructed using Viewports with contents. Viewports are essentially a C struct that you provide coordinates, dimensions and information like a font. The theme engine has a few different kinds of viewports, but the important one here is the “menu” viewport. This is a mandatory inclusion in every theme, essentially drawing the main interface of Rockbox. It’s within this viewport that the default Quickscreen is drawn.

Typically default viewports can be suppressed using a 1px wide viewport, essentially making it so small that the contents don’t appear. However on the Quickscreen, this caused Rockbox to hard crash, something which could cause major issues on a user’s device. To solve this, I ended up creating the smallest possible font I could, and fine tuned the viewport size until it didn’t crash anymore. This could then be hidden using colour to blend it into a solid backdrop.

I was then left with a (nearly) blank canvas to create my own Quickscreen on. However, I discovered a major limitation that prevented this being a feasible implementation for current themes.

The Problem

Rockbox’s large number of settings and options are made available to themes via strings. These strings can be called upon via a tag in a theme’s code that displays the output of a given setting. This includes features like the user’s Quicksettings, which are accessible via “qs top”, “qs right” etc.

The issue is however, is that these strings only output the name of the setting saved to each Quicksetting slot. To be feature-compliant with the default Quickscreen, a theme would need to be able to display the value of those settings.

But this is not something that was technically possible in the Rockbox theme engine. There’s no string available for Quicksetting values, nor any way to recursively find the values using the Quicksetting’s strings. It was clear that in order to make these improvements feasible, I would need to expand the Rockbox theming engine.

Working in Rockbox’s codebase

While I had come up with a potential in my mind before looking at the codebase, once I actually got hands on with understanding how the theme engine works it proved to be not the best solution. There was a moment at the start of my attempts where I got rather chastised for what was quite frankly brainless code, however once the person realised that I had no idea what I was doing they were quick to begin explaining to me where I went wrong and how memory in C works.

This was a rather pivotal moment on my journey as I realised that in order to succeed I needed to be smart rather than just brute forcing my way to a solution. My original attempts involved copying how the settings strings worked, and basically running it again to get the Quickscreen item’s values. This eventually worked, but the values got mangled somewhere between my code and the display output. After taking a month off, one day the solution came to me out of nowhere: just copy what the default Quickscreen does.

The default Quickscreen’s solution is quite simple. Simply searching up the settings list for the Quickscreen item, then either returning it’s value with a function or simply turning the pointer into a string and returning that. I got results very quickly using this method, not to mention stable ones too (which were not common in my previous attempts).

The final result

My merge request ended up with 8 new tags for the theme engine. I broke down what was needed into a simple formula: take the four directions the Quicksettings are mapped to on the controls (Top, Bottom, Left and Right) and assign a single character representation (T, B, L and R). Then assign the title of the Quicksetting to the uppercase characters, and the value of the Quicksetting to the lowercase characters. Finally prefix with the letter Q to annunciate it’s relation to the Quickscreen.

It results in a large number of tags, but allows the code to be easily read at a glance. See a small example below of the left Quicksetting tags in use.

# Left Button
%Vl(Quicksetting_Title,45,130,100,18,3)%QL
%Vl(Quickscreen_Value,45,149,100,16,4)%Ql

The Quickscreen tags being used in Themify 2.

Wrap up and thanks

My original merge request proved to be rather lengthy, mostly out of fear of adding too much code outside my tags. However major thanks to Chris on the Rockbox team who came up with a brilliantly clever change that turned my code into a small function that the tags could call on. He also helped to get the merge request approved and added to the main repository.

This side quest has proved to be a big lesson for me in many parts of programming. I think the biggest thing I’ve gotten out of it is properly using git as I develop my projects, keeping track of every change made to the codebase rather than only updating every few months. I have some more changes to work on in the coming future to improve the quality of life for Rockbox users in the years to come, not to mention adding these new Quickscreen features to my current themes.

Prepping for Travel

Thu, 11 Jan 2024 23:01:03 EST

Currently I’m preparing to leave for a week long trip to Tokyo! This was pretty spontaneous, we found out very late that we would be getting a month off over the new year in college. Me and friend were looking at getting away somewhere, and found some flights to Japan for an incredibly low price that was too good to not go for. And so here I am now!

A lot of my prep has been pretty simple, filling out some forms and getting my documentation ready. But on the other hand I’ve been setting myself up for a long flight, as well as my camera setup for the 5 days we’ll be in Tokyo.

I’ve got a ton of movies downloaded for the flights there and back, featuring some appropriate selections like Tokyo Drift and Shin Godzilla (I saw Godzilla Minus One last week and it’s incredible, highly recommend seeing). Especially threw in Killers of the Flower Moon as I can’t think of another time when I’ll be sitting down and bored for over 3 and half hours.

I also want to bring my Kobo with me for more relaxing entertainment. I have some books I need to continue, like David Graeber’s The Dawn of Everything and Don Norman’s Emotional Design (though I’m not sure how I feel about it yet). But I was also recommended some fiction in V.E Schwab’s Villains series by a friend.

Choosing a camera to bring was pretty difficult for me. I wanted to bring my Sony DSC-S85, as I bought it for travel, however it’s limited on storage (roughly 128mb!) and the battery is very poor on it. The alternative was a very hard to control point and shoot, or my expensive and a little bit boring Sony a6000 mirrorless. My friend ended up commissioning me to do a photoshoot of them out in Tokyo, so I used it as a chance to buy some upgrades to the S85. I started with a new battery alongside a quick charger, then attempted to buy some more storage. I say attempted because I discovered afterwards that the “Pro” memory sticks weren’t supported by my model, despite being identical. Thankfully, I can lower the resolution to get about 130 photos out of the 128mb of storage, and my friend is bringing their laptop so I’ll be able to offload my photos if I need more space (which is likely to happen).

I still have a bit more prep to do. I’ve lost a decent amount of my Japanese in memory over the past few years, so I’d like to write up a few pages in my notebooks with guides on numbers, common phrases I may encounter etc. My hiragana and katakana recognition is currently around 50%, so I should probably get that up a bit too.

We don’t really have a plan down, nor have we booked tickets to go to any big tourist spots. I think the plan is just to have a good time, enjoy the food and see what happens! I have some things I want to try pick up in second hand shops over there like a gameboy camera and a famicom disk, and of course a bunch of souvenirs for myself and my friends who are big fans of Ghibli movies and such!

Only a couple of days to go, can’t wait! - Dook

Year Review 2023

Sun, 31 Dec 2023 13:54:08 EST

It’s that time of year again! Kind of incredible in a way, it doesn’t feel like it’s been that long since I wrote last year’s review. And what a crazy year it’s been, despite a lot of chaos and changes I feel incredibly accomplished with what I managed to achieve and create over the past 12 months.

The past couple of years have been marked by bad health for me, and thankfully I’ve felt pretty good and have been on the mend in 2023. Surprisingly, this was actually one of the only goals for this year that I got to! I was so intensely focused on design and programming this year that I never got around to working on art, unfortunately there wasn’t a Rebble Hackathon this year so I never got around to making more watchfaces for my pebble.

I did however manage to make a very strong portfolio of work for college, and got an offer to study Interaction Design (originally I intended to study Product Design) I started studying in September, and despite the high amount of work and stress, I’ve been having a blast. Unfortunately this took a hit to my free time, which put a halt on personal projects, but hopefully this should get better next year.

With that, lets take a look over everything I did in 2023, as well as some of my favourite things from the year!

Changes

Compared to the past few years, the changes to my setup have been pretty minimal this year. I think I’m finally settling into the hardware and software that suits me best which makes me pretty happy to see.

Audio Hardware

The biggest changes to my setup this year were on the audio end. During the summer, I was contacted by someone who was throwing some stuff out and wondered if I wanted a pair of speakers. I said yes before I even saw them, but damn are they gorgeous. They needed a bit of repair to the speaker cone, and are a little grubby, but all in all sound so good.

I decided to treat myself a little a spent 100 euro on a second-hand Yamaha amplifier on ebay to power them, and it’s easily the best purchase of the year. It sounds great, paired with it’s gorgeous design it’s so fun to have in my workstation. I have it hooked up to my laptop, iPod as well as some loose aux cables that lets me hook my phone or other things into it.

iPod Upgrade

After having the parts for a year and a half, I finally modded my iPod replacing the dying battery and adding flash storage. While I was at it I also added a haptic feedback module from an iPhone to replace the click piezo speaker, though this mod was a little unsuccessful as I didn’t use a good glue for the job. This has made my iPod actually useful, though I’ve yet to switch to fully using it day to day.

New Camera

A fun purchase this year was a Sony DSC-S85 digital camera from 2001! I’ve been interested in Sony’s floppy-based Mavica camera line for a while, and I was in the market for a cheap yet fun camera for travelling. The Mavicas were a candidate, however I was apprehensive about the maintenance required by a disc drive in the long run. That’s when I stumbled across the parallel line of cameras Sony produced which used Memory Stick media instead, and knew immediately that I should get one.

I ended up purchasing mine on ebay for about 30 euro off an older man, it came with it’s complete box and even a travel bag! And let me tell you, the camera is such a blast to use. The photos are surprisingly high quality, and you have a large amount of control over focus. It can even shot GIFs and video!

Favourite Things

It’s been a bit of a bad year for content for me. I didn’t engage much with manga or games like I have in other years, it’s been a bit of a bad habit of mine to focus on personal projects instead of just relaxing. It has however been a good music year for me, I’ve discovered some incredible music and also expanded my tastes a lot more. I also watched a lot more movies this year, as well as rewatched some of favourite older series like Adventure Time.

Music

âˆ˜ Favourite Artist & Album - Hozier, Unreal Unearth - It’s been an incredible year for Hozier. His third album, Unreal Unearth, launched this August to immediate success. The album is largely inspired by Dante’s Inferno, with songs directly referencing parts of the iconic poem. Arguably it’s Hozier at his best, with a clear and focused emotional narrative that follows through the album from start to finish. Executed to perfection with a high level of polish, it’s a massive achievement for him. I recently saw one of his last shows on this year’s leg of the tour, and it was just as incredible live. If you can, listen to the entire album in one sitting!

Manga

âˆ˜ Red Cat Ramen - I’ve read basically no manga this year, I think I burned out that motivation last year, but the one exception has been Red Cat Ramen. A new serial that started this year on Jump’s online platform, the manga follows a Ramen shop ran entirely by cats and the human they just employed to help out with tasks they cannot do. It’s a novel and enjoyable slice of life series that takes it slow and keeps things wholesome. Already slated for an anime adaptation for 2024, I highly recommend checking it out if you like manga!

Projects

A lot of time on personal projects this year was spent honing skills I picked up in 2022. I did however dip my toes into some new things like writing GTK apps for Linux, and creating an icon system from scratch. I also began to do logo commissions, which was a great learning experience and helped my skills to grow a lot this year. You can check out the full project list from this year in the design section of my site.

Website Redesign

My massive summer project and something I did not expect to do this year, I spent two months rebuilding and redesigning my site from the ground up. This was definitely a necessary project, and it’s left me with a far better website than I had before. A massive part of this redesign was making it fully functional on older browsers, something which I’ll cover in a new blogpost in the new year. If you’re interested in the changes made though, have a look at my previous post: Re-designing my site, one more time

Adwaitapod

Easily my biggest piece of work to date, adwaitapod’s rebuild this year was a monumentous undertaking. I set out to update my original iPod theme to be far more performant, better designed and crammed full with even more features than before. The resulting theme has been a massive success, recently crossing 18 and a half thousand downloads and amassing a fantastic userbase. I’m incredibly proud of what I’ve achieved with adwaitapod this year, and hope to take that energy forward to more iPod projects next year.

Beryl Logo Design

In May I reached out to Sam on fedi after seeing his post looking for someone to help design a logo for his new markdown-based to-do list software called Beryl. After some chatting, we had a clear vision for what the logo should look like and following ideation and experimentation we settled on a design we both liked a lot. It’s going to be an exciting year for the Beryl project, and I can’t help but be proud to see the logo! I highly recommend checking out the project’s site!

Looking towards 2024

This coming year I’d like to focus on honing the skills I have a lot more. Themify’s next update is deep in development already, and is shaping up to be a project which will define the year for me. I’m working with some friends on some exciting new ventures outside of my online life, which I think will help push me as a designer and help me realise my path a bit better. I also hope to travel a lot more next year, and have some exciting trips planned already!

Another thing I’d like to do is to use this site more, I started more than a few blog posts the past few months but have a habit of making them incredibly long. Expect a lot more short blog posts going forward!

Conclusion

All in all, it’s been a rollercoaster of a year. I’ve achieved a heck of a lot and looking forward to doing even more next year. Here’s to next year!

-Â Dook

September Update

Sat, 30 Sep 2023 18:41:28 EST

It’s been a while, huh? I had been intending to update this every month this year, but unfortunately life had other ideas and I got fairly busy.

Some major projects have been completed during the summer. Adwaitapod 3.0 was released, and is now pretty much stable and bug-free. This update has really brought the project to where I envisioned it from the start, and brings so much to the table for iPods. I pushed the limits of what Rockbox’s theming engine can do, which was difficult, but the results have been worth it. I still have a promo push I want to do for this project, with a friend of mine making up a small trailer for it, and a dedicated website ready to go alongside it. I want to experiment with doing publicity for my themes, hopefully it can save a few more devices from landfill.

After that, I got to redesigning and rebuilding my website. A massive undertaking, with a goal to make it more efficient and better designed. It’s also now the smallest it’s ever been, with the homepage sitting at a tiny 43kB (which includes fonts and a png image!). The css file is 3.33kB, which I’m really proud of since I managed to cram so much into it. The wiki has been massively expanded, and now is a lot better organised. There’s been a bunch of big changes, I really recommend checking it all out and also reading the blog post about it!

There’s been a bunch more stuff completed this summer, but things will also be slowing down a lot now sadly. I recently started back up in college after a two year break, I’m now doing a bachelor of arts in Interaction Design, something that is far more catered towards my interests and focuses with design as a tool. It’s pretty full on, so my free time is practically non-existent now which is disappointing. But I aim to slowly get to work on stuff when I can!

Until next time, whenever that may be - Dook

Re-designing my site, one more time

Sat, 02 Sep 2023 14:52:19 EST

Firstly, I’m so sorry for anyone subscribed to my RSS feed that just got spammed. I made some big changes to the site, but I’m confident this will be the final time.

Secondly, I went and did it. At the end of my first-year celebration post in March, I talked about changing some core parts of this site. Namely new static site generation (SSG) and fixing the janky CSS. Quite frankly, I thought that would be all that was needed, but over the past few months I’ve grown less and less satisfied with everything. Since March I’ve barely used the site, even though I wanted to add stuff to it. I also was growing quite dissatisfied with the aesthetic appearance, I don’t think the old design was terrible, but I felt like it was missing something important. At it’s core it lacked concept and identity, and figuring that out gave me the drive I needed to finally do this.

Re-thinking the process

From the start, I had three central goals I wanted to achieve. Each would both limit and influence the other, but getting a balance would be possible. The first and biggest for me was compatibility, the old design quite frankly was not usable on older browsers thanks to css variables and other modern features. To achieve this, I set NetSurf as the target browser for this new design. This presented some challenges, since NetSurf doesn’t have full coverage of css and html (even pre css3 and html5 specs).

Which leads into the second goal: design. This site has always been built around the idea that good design on the web doesn’t need to cost an arm and a leg, and this time I wanted to really prove that. I knew that overall, the communication of content and navigation could do with a boost. But also that I wanted to push the core identity of the site using just design. To best accomplish this, I decided to ditch the vibrant colour-based design of the old version in favour of a greyscale, shape-focused identity.

Lastly, the final goal was speed. I’ve always put a ridiculous amount of time into improving the speed, namely load times, of the website. This was almost always done by hand, and I knew it frankly wasn’t as efficient as it could be. I set out on this redesign aiming to improving almost everything, from images and fonts to css and html.

Altogether, I feel each of these goals represent a different kind aspect of accessibility on the web. Accessibility on the web is often thought of as the interaction between a site and users with disabilities, however I would argue that this term can also extend to the ability for all users to access your site in the first place. Keeping a website consistent across all connection speeds, devices and browsers, means greater power to the visitor.

Visual Language

The first problem I attempted to tackle was the visual design language. I took a deeper look at the content of my old site, as well as things I had to hack in along the way, and I quickly realised the content had many different contexts on the site that wasn’t well communicated.

I good example of context being communicated on sites would be codeblocks, the containers commonly used to display lines of code on a webpage. These almost always have a CSS styling to differentiate the content inside from the rest of the text on the page, without it there would be clear confusion. On my old site, there were many confusing cases like this. There was no distinction between content types.

I started by sketching some ideas out in inkscape for what different content types I would need to make, as well as how they could be styled. Which directly lead into prototyping these ideas on the site. I ended up with a large range of what I’m calling “Content Widgets”, which can be viewed together on the test page.

These widgets have made life incredibly easier when working on content, and also provided a much simpler model to reference when designing. They’ve made the vision of my content-rich wiki possible, while making the user experience of the website far better than it was before.

One of the core ideas I wanted to express in the site was the use of abstract shapes instead of logos and wordmarks. These ended up being called “Pieces”, and have served as the central pillar of the strong identity the site now holds. I want to experiment more with these in the future, and attempt to integrate them even further into the website.

Static Site Generation

At the end of my last blog post, I spoke about getting rid of Hugo in favour of a python-based SSG. I had gotten really frustrated with Hugo at that point, and the large amount of hacks I had to employ to make simple pages proved too much. I was certain the solution was held in making my own SSG, or using a more customisable one.

Then in June, right as I was thinking of starting this move, LOW TECH MAGAZINE launched their website rebuild in a blog post. Marie and Roel put a incredible amount of work into moving their site from a Python static site generator to Hugo. You can probably see where this is going already, but LOW TECH MAGAZINE’s main site is run on solar power and efficiency is of huge importance, so to make their decision they ran some tests. You can see the results in the footnotes of the post, but Hugo was far faster at generation.

This motivated me to try Hugo one last time.

I was driven largely by the fact that I already had knowledge of using Hugo, so I could jump right in rather than learning a whole new system. This let me see the possibilities of Hugo almost immediately. See, Hugo is canonically used for Blogs and blog-type sites, the idea being you make up a bunch of templates and then all you have to do is write content (while Hugo handles absolutely everything else). Trying to use Hugo in this automation-first way was where I fell on the old site. What I needed to do instead was use Hugo like an assistant, making use of the best of both worlds.

Which is essentially what I’ve done. I stripped the entire site back to sheer basics, each page simply passes on the content from my markdown files and generates a page. It does add the head, header and footer, and the rss feed is automatically generated, but that’s it. Every page on the site is now essentially hand-written. This allows me a huge amount of control over how pages are laid out, and also facilitates pages having different kinds of content together. I wanted this feature especially in my wiki, the old site was a plain and hard to navigate grid of boxes that linked to pages, whereas now it can be far more interesting and full of information.

The only major downside to this all has been the new dependency on shortcodes. Shortcodes in Hugo are custom markup syntax that controls how the content inside is rendered, and is used to create all the content widgets and other things like images. These have to be manually written out each and every time, and while I’ve tried to design them to be less tedious, it’s still some friction I’d like to try eliminate in the future.

But the final results are something I’ve proud of, I’ve got a far greater understanding of the generation of the site now alongside far greater control of everything, which will go a long way.

‘Old School’ HTML and CSS

Slight tangent, but I first learned to make websites about ten years ago now in a weekend coding club of sorts. Back then one of my most vivid memories about it all is how new HTML5 was, since then it feels like the web space has grown and expanded a lot. This time period incidentally lines up with when NetSurf was majorly worked on last, or at least from what I can tell. In a sense, my target for the HTML and CSS portion of the redesign is roughly a browser from 10 years ago.

This meant that in order to make a responsive site for all devices, I couldn’t rely on flex boxes, grid layouts, calc values and other incredible useful modern features. But ultimately, these constraints led beautifully into the design of the site, contributing to much simpler layouts and better thought out features. From what I can tell as well, NetSurf’s implementation of HTML and CSS is very literal. Where some syntax may pass in modern browsers, it wouldn’t in NetSurf, something which I feel made me a better web designer by helping me understand what I was doing better.

I did have to take several liberties here and there. For example I used clamp values for things like the font size of page titles and window padding in order to preserve the layout properly on screens with very small resolutions. These have respective fallbacks to be used if necessary. Alongside that, there’s some features like :hover and :active selectors that I use which NetSurf hasn’t implemented (yet?), as well as fit-content widths, z-index and font-family. These ultimately mean that my site isn’t entirely targetting NetSurf, however these features are essential in my eyes to the user experience and design of the site, so exceptions were made.

As challenges go, aiming for a less-modern set of HTML and CSS managed to result in better decisions and more solid web design, something I really didn’t expect going into this.

Making things small

And now for my favourite part: making everything as small as humanly possible.

There’s always the same two offenders when it comes to web pages being too large, custom fonts and images. In the past, I’ve tried various different methods to wrangle and control these issues, with decent success. However this time I knew I could do a better job.

Fonts

I decided to use keep using the two fonts I have always used with this site, Barlow for headers and League Spartan for content. I made a couple of changes, going for the next weight down for Barlow since black was unreadable at smaller sizes, and then swapping out the variable font of League Spartan for a non-variable (in order to improve compatibility with older browsers).

While my old font optimisations were doing manually, using FontForge, this time I gave a tool Thomasorus recommended to me called glyphhanger. Essentially it’s a font subsetting tool (removing unused characters), but most interestingly it can automatically crawl a given website and subset your font based on the content of said website. Even better, you can tell glyphhanger what font-family to look out for and it will only crawl text set to that font! What this means is that using glyphhanger will give you a set of fonts that only contain the characters used in your site, the epitome of optimisation!

The results really speak for themselves: ~19kB total for both fonts loaded. This is in comparison to a roughly 28kB total on the old site! (League Spartan alone being 16kB). I expect the total number to fluctuate up a bit as I add more content to the site, but I really cannot complain at the results.

Images

If I was to discuss this in it’s totality, it would be far, far too long. But to cut it short: I did a lot of research, which I plan to cover on the web wiki really soon.

Cutting down images as small as I can has been a rather big obsession on this site. I’ve spent countless hours testing and trying different things. Ultimately, my goal has always been the same: get the size down, but don’t compromise the information inside. This time round, I’ve decided to be far more experimental.

Through my research I found that jpg is still the king of full colour images, providing decently small file sizes with little to no loss in visual information in return for a slight loss in quality. However, thanks to some inspiration from TenDigit’s new redesign of their site, I decided to incorporate low-colour images into the site. You’ll find these as furniture to pages, photos with no real impact on the delivery of the content, purely for aesthetics. These are coloured using the site’s greyscale theme, typically with between 3 and 8 colours. It’s here that png really excels, producing images with filesizes far smaller than I could achieve with jpg at the same quality and sharpness.

This likely wont be the end however, as I continue to perform more detailed research into this topic.

CSS

It’s fair to say I truly poured over the css for the site as part of this rebuild. Before, it was quite a mess and rested at around 5-6kBs in size. During the process of designing the stylesheet, I realised that a 3kB css file was within the realm of the possibility in the design. I spent many, many days simple combing over the file to see what miniscule changes or efficiencies could be eked out of it. Several times it did in fact dip under 3kBs, but in the end I made some small additions to improve user experience that leaves the final size of the CSS at 3.36kBs. I’m still really proud of this, if I didn’t include WOFF files for the fonts, then I’d have easily made it to 3kBs flat.

Conclusion

For a long time, I’ve sought to make my personal website an example of my philosophy that good design on the web doesn’t need to come at a cost of performance or user experience. I think I can finally say that with this redesign, I have finally achieved this goal.

Alongside this, I’ve finally become excited again about actually using this website. When friction builds up in the system, you will inevitably stop using it, and now with it gone I can finally begin expressing this site even further than before.

I want to thank all the people who have been following me along building this site, as well as it’s redesign. And for all my friends for providing incredible feedback and advice.

Here’s to d00k.net, and this design lasting a little bit longer than the last one!

- Dook

April Update

Sun, 30 Apr 2023 15:11:13 EST

What a fast month! It’s hard to believe it’s already the end of April. I haven’t been working on too many projects this month, but the ones I have been working on were pretty important.

The biggest project this month has been the next update to my iPod UI project: adwaitapod. This has been a major undertaking, rewriting the entire thing from scratch. But it’s been worthwhile. The massive gains made with compression, efficiency and so on have made enough room to add a wide range of new features and still come in smaller than the last version of adwaitapod. I took the chance to take a proper design-orientated approach, rather than simply copying the GNOME desktop design, I used their principles to interpret the user experience of an iPod and make it as user friendly as possible. I’m immensely happy with the results so far. The last few things to do involve writing documentation and creating some promo materials, which I’ve commissioned a friend to help with. All things going well, adwaitapod 3.0 should be out next month!

I also completed my first paid work this month! I reached out to Sam on fedi after they made a post looking for a designer to make a logo for their project Beyrl. I was mostly interested in using it as a chance to gain experience working with a client and designing icons/branding, but we were both very happy with the results! I’ll put together a proper page for this project after I deliver the end product.

A major milestone this month was the submission of my final college portfolio. I’m still looking to complete my degree in Design, so hopefully by this September I’ll be back in college again.

Lastly, some small changes and updates to the site this month. The colourscheme was changed slightly to be less yellow, and improve reading contrast. I also updated the Bee Encyclopedia with the newly captured Early Mining Bee, we’re in peak bee season right now so I’m hoping to capture some more species that I haven’t managed to yet!

Things have been slowing down (thankfully) but hopefully sometime next month I’ll begin my migration over to a better SSG, I also have a few websites to design and build for friends over the summer that I’m very much looking forward to! Till next month - Dook.

March Update

Fri, 31 Mar 2023 19:15:47 EST

I think this month has been one of my most productive in a really long time! A good chunk of time was spent completing and releasing my latest UI theme for Rockbox, Themify. It’s so far been received incredibly well, and has even reached my own goal of using design to convince people to use old devices.

Once I finished Themify, I set my eyes on the original UI theme I made called adwaitapod, based on GNOME’s design principals. I decided to remake it entirely from scratch, since I’d learned so much in the last year that it was just easier to rewrite it all. This time I approached everything much smarter, the new version is about 65% smaller while having new features and performing much better. I just need to focus on some font issues in the github repo, fix a few bugs and work on the dark theme and then I can release it to the world!

Alongside everything else, I was approached recently to design an original user interface for a project. I’ve spent some time creating an icon set, which I plan to open source soon, as well as brainstorming other parts of the interface. I haven’t had a chance yet to design on a proper scale like this, so it’s been very exciting and interesting having free reign as the sole designer on this part.

Lastly, my website turned a year old in March! I put together a blog post where I discussed how the site came to be, as well as the changes it went through during the year. I also took the last paragraph to think about where I want to website to go next, something I hope to work on really soon!

That’s all for now, I have another 2 weeks to cram some projects in before I need to finish my final portfolio for college entry. Once that’s done I plan on taking a break for the rest of the month to refresh and get ready for the rest of the year. Till then! - Dook.

Celebrating a Year of d00k.net

Tue, 28 Mar 2023 19:14:28 EST

This article was written in March 2023 and, since August 2023, is no longer an accurate reflection of the current site.

This time a year ago, d00k.net opened for the first time. The dates are a bit fuzzy, the domain was purchased in early March around my birthday, but I consider the site’s first real day to be when it was added to the XXIVV Webring on March 22nd. Dates aside, in just this one year the site has changed a lot. I tended to work on it sporadically, for reasons I’ll get to later, and it’s visual language, style and purpose has grown and changed as well over the past 12 months. I want to take this post to look over some of these changes, as well as take a look at where I want the site to go over the next year.

Purpose

I started d00k.net mostly just out of a desire to have a website. I’d spent the last year surfing the web more, and webrings like the XXIIVV webring dragged me in easily. The idea of a personal wiki or site really shouldn’t have been that radical for me, but I’ve really only started using the internet properly in the past maybe 5 or 6 years? These sites made me realise how a website could help me, to motivate me to create and share work but also to help me get better idea of who I was and how everything I do and love links back to me. It sounds a bit strange trying to describe, but I know the results have shown for themselves that this really worked.

Going forward, I can see it’s purpose changing to being more outward. I make a lot of guides, or well get rather annoyed when I don’t and forget how to do or use something. I’d love to put a lot more of these guides together both for myself and others, overall just fleshing out the Knowledge wiki to be properly useful.

Design

Being a designer, my instant goal was of course to make a website that looked good. But having been introduced to concepts like frugal computing and the smol web, I had a greater inspiration to build a website that both looked good and ran as small as I could possibly make it. But we’ll get into that specific rabbit hole in a bit.

The first iteration of my own d00k.net was admittedly a design failure. I had been struggling with grasping Hugo, and used Lizbeth Poirer’s ritualdust.com as a references to work from. Through her site I was brought to thomasorus.com whose notes on web development, and the site itself, were incredibly helpful. I was really inspired by the theming both sites did, and attempted something similar. The end result was.. definitely something. At the time I thought it was cool, but I honestly have no clue how I put up with it for so long. It had to change.

The redesign, which you’re looking at now (hopefully), didn’t start from scratch as much as it took the old design and made it actually palatable. Specifically, I took the colour scheme from the most usable section, the journal, and made it the site-wide theme. To make each section it’s own however, I made the header bar theme-able and made a new range of colours for it. I was inspired by a technique I found on He Can Jog’s site of tiny gifs as a sort of repeating texture for backgrounds which really took the new design to the next level.

I also began to create a unique visual language for thumbnails on the site, almost entirely by accident. So when redesigning the entire style, I thought I’d lean in on this a lot more, which is how the frontpage came to look like it has. I’m immensely proud of these, even if they are rather small, it’s something I’d love to replicate more throughout the site in the future.

Making the site small

Like a lot of people with websites, whenever I did any work with the site I tried to improve the size or efficiency of assets and the like. From the start, I followed Rekka Bellum’s guide for image optimisation, eventually tweaking it for example to output images in 720px wide. If I stopped there, it probably would’ve been fine. My site doesn’t run any javascript, it isn’t some electron nightmare hog etc. But if there’s room for save even a kilobyte, I’ll take it.

Some changes were small, like streamlining my css and compressing the file, but some were a lot bigger and some were just downright ridiculous of me. Once I began using SVGs a lot more, I tried reducing their size by hand, and while this worked pretty well, I eventually started using Oh My SVG which is absolute magic and beats me everytime at downsizing SVGs. The real insanity came with fonts.

At the start, the site used 3 fonts (text, headers and links). I eventually changed my main font to League Spartan Variable, keeping Barlow as the header font and CMRDD as the link font. Each was equally as large, but instead of using something like fontsquirrel to reduce their character set, I decided to subset them myself.. manually. I had gotten a bit too comfortable at this point with Fontforge, and thought why not? And don’t get me wrong, it paid off, the site font files are absurdly small now, but I don’t know if it’s totally worth it. One thing I did manage to do was edit and successfully output a variable font from Fontforge, which apparently shouldn’t be possible? I haven’t been able to repeat it again which has been frustrating. I’ve gotten around this by creating a fallback font which just the icons I want to add to the site (like my logo’sðŸ—¦ & ðŸ—§) Since the redesign, I’ve also removed the 3rd font for links, deciding to style them instead.

Currently my main page sits at around 30kb, I think originally it could’ve been something like 140 or 170kb. My main goal has been to keep under a mb for any page, and so far this has been successful. The largest page is one of my photography galleries, around 800kb. Maybe hasn’t been the greatest use of my time, but seeing the total page size gives me a huge grin every time I see it.

What’s next?

My own static site generator. Hugo was alright to start with, I don’t wanna say it’s been bad but it hasn’t been great either. I had to hack together my own shortcodes for images, and I use rawhtml inputs every time I want to add a list of links to a page. Sometimes hugo makes illogical decisions generating pages, that I just cannot wrap my head around, and I’d much rather have an SSG that I can more properly control the output of. I’ve decided at least to use python, whether it’s a home-made job or an existing solution I’m not sure of yet. I do know when I get to it, I plan to do another wash over of the CSS. I threw my styling for bodies of text together mostly on instinct, and it could do with some proper logic and decisions behind it. I also want to add time into the site, since I don’t even track the date right now, but I want to do something cool and unique here.

Maybe next year I’ll have made enough changes to warrant another anniversary post, but I hope not! For everyone who has checked out my site, found it useful, or even just liked it, thank you! I hope for other people who may be considering making a site that d00k.net can inspire you just like other sites inspired me. Thanks for reading, and see you soon.

Dook.

A Look Inside Themify

Tue, 14 Mar 2023 15:12:17 EST

After a few months of working on and off, I finally finished my next Rockbox theme: Themify. Themify does a lot of things I haven’t done yet in Rockbox, I really tried to push myself to create something cool and unique and I think the results definitely speak for themselves! This time, I decided to make a post here going over some of these features and generally looking into the code a bit more for those who are interested in that kind of thing.

UI Re-colouring

Of course, the main feature of Themify is the ability to completely colour-customise the interface to your taste. This is done by taking full advantage of Rockbox’s built in colour settings. Many theme tags support using these user-set default colours, and there’s even ways to make bitmap images be drawn with these too. The goal of Themify was to take these to the extreme

Transparency

One feature of Rockbox theming that has fascinated me for a while is transparent bitmaps. With regular bitmaps, a form of transparent masking is supported (and used fairly often), however Rockbox also supports true transparent bitmaps. I could only find a handful of themes that used this feature in albeit tiny amounts, it’s quite costly in terms of resources, but I felt that the iPod could handle it in larger scales. For Themify, transparent elements provide a vital accent colour for the interface. And thanks to some changes to background drawing, I was able to use it in plenty of places.

The Backgrounds

In recent years, background image switching has become a core part of modern themes. This utilises a layer drawn in the background, where logic is used to display different images per screen. This works great, however even with the best compression you can achieve, each image will come in at around 80Kbs. While this isn’t much, over 5 or 6 images it can begin to threaten the file size of your theme over Rockbox’s theme site’s limits. Instead of taking the standard approach, I decided to try drawing the background elements using theme tags. This involved drawing rectangles in many places and using images to make up for rounded parts, accents and so on. This saved an incredible amount of space and let me use transparent bitmaps far more frivolously.

The player screen's background drawing visualised.

1-bit Bitmaps

One massive space savings was made with icons and other re-coloured UI images. Converting them to 1-bit Bitmaps gave the same result as regular bitmaps, but at a fraction of the size and effort to load. Without this one decision, I don’t think Themify would have performed as well as it did.

Adaptive UI

To keep a clean, consistent UI, I aimed to create various dynamic features that would give users the information they need when it’s needed, and hide it when not. The main place you can see this is with my icon bar for lossless audio, shuffle and repeat indicators. This uses a rather large amount of basic logic to decide what positions icons should be drawn in and when, and the result is well integrated into theme. I think you’d hardly notice what it’s doing unless you knew.

#An example of the logic for one icon positions
%?and(%if(%ps, =, 1),%if(%mm, =, 1),%or(%if(%fc, !=, 4),%if(%fc, !=, 5),%if(%fc, !=, 7),%if(%fc, !=, 11),%if(%fc, !=, 13)))<%xd(statusextra,3)>
%?and(%if(%ps, !=, 1),%if(%mm, >, 1),%or(%if(%fc, !=, 4),%if(%fc, !=, 5),%if(%fc, !=, 7),%if(%fc, !=, 11),%if(%fc, !=, 13)))<%xd(statusextra,3)>
%?and(%if(%ps, !=, 1),%if(%mm, =, 1),%or(%if(%fc, =, 4),%if(%fc, =, 5),%if(%fc, =, 7),%if(%fc, =, 11),%if(%fc, =, 13)))<%xd(statusextra,3)>

I also added automatic line splitting to the song title text and playlist position indicator. The song title is a bit imperfect, I detect the length of the title, and if it fits the necessary parameters then it will be displayed in two lines. I intended for this feature to be smarter, splitting the text in a way that respected words and didnt chop them up, however Rockbox theme files are unable to detect space characters, stopping this feature in it’s tracks.

The Lockscreen

Easily my favourite feature, Themify’s lockscreen is my most impressive yet. Using a full screen transparent bitmap for the background, it looks stunning. I also added the largest analog clock attempted in Rockbox to date. Using the newer image loading logic, I was able to keep at least the hour hand’s code small. I had to compromise with the minute hands since they couldn’t be 1-bit bitmaps, and to have 60 individual hands produced a massive file size. I kept the logic as small as I could however, so the result isn’t actually half bad, especially compared to other attempts at this feature.

#--- Lockscreen Clock ---#
%Vl(Lockscreen,15,40,160,160,-)
%xd(HourHands,%cl)
#
%Vl(Lockscreen,89,40,86,86,-)
%?and(%if(%cM, >=, 0),%if(%cM, <, 5))<%xd(MinuteHands,1)>
%?and(%if(%cM, >=, 5),%if(%cM, <, 10))<%xd(MinuteHands,2)>
%?and(%if(%cM, >=, 10),%if(%cM, <, 15))<%xd(MinuteHands,3)>
%?and(%if(%cM, >=, 15),%if(%cM, <, 20))<%xd(MinuteHands,4)>
%Vl(Lockscreen,89,114,86,86,-)
%?and(%if(%cM, >=, 20),%if(%cM, <, 25))<%xd(MinuteHands,5)>
#... and so on

This implementation also features a fix for an issue that has long plagued Lockscreen designs. When the song switches to the next, if a Lockscreen is open, it will refresh the menu the Lockscreen is drawn over. This creates a glitchy mess, and stops this feature from being any more than a neat tech demo. However, I finally fixed this (literally just before I launched the theme) by drawing a viewport over the main menu whenever a song changes, effectively refreshing the Lockscreen effect.

Final Thoughts

Overall, I’m quite happy and proud of this theme’s outcome. I hope many people will find joy in being able to change their colour scheme to fit themselves, or however they feel, whenever they want. If you enjoy Themify, feel free to send some feedback or suggest improvements in the github discussions!

Links

Themify can be downloaded from the Github, or via Rockbox sources. (The recommended method being the Rockbox Utility app)

February Update

Tue, 28 Feb 2023 19:13:59 EST

Spent the first week of this month completing my portfolio for college entry, but in-between made some big improvements to the site. I simplified the inline links style to be far more visible than they were before, which also led to my stand-alone font for links becoming unnecessary. Getting rid of it has made my home page even smaller now, to just over 30kb.

After that, I began to work on a new iPod theme called Themify. I made it mostly to showcase some features of Rockbox I found that would let users fully customise the UI’s colourscheme. The beta was shared on my Ko-Fi here, and some people have shown support which has been really nice. At the same time, I’ve been working on a commission I received to port a previous Rockbox theme of mine to a touch-screen device which has been a lot of fun.

This month I also started learning a few different programming languages including Uxntal, Python and bits of GTK for making a desktop app. I started learning Uxntal after getting an idea for a virtual pet synthesizer in a dream, so far compudanzas’ uxn book has been extremely useful and makes uxn appear quite inviting, even as a relative beginner with programming. On the other hand GTK has been a nightmare to figure out, but I seem to make progress in big leaps at once. It’s been quite enjoyable working on apps and software that I want or need.

Hopefully by the end of March I should have an update with a bunch of finished projects!

January Update

Tue, 31 Jan 2023 19:47:12 EST

Happy new year! I’ve decided this year to use my short journal as a more detailed monthly record. This month was largely focused on my college application. I’m attempting to return to college in September, switching institutions as I do so to be closer to home. This requires a whole new application, portfolio etc which I spent most of this month handling. In my off time I put a decent amount of work into my website, solidifying parts of the website that have been disjointed up until now. I also started a Linux Wiki of various cheatsheets I’ve written over the past year. These were received quite well, and I hope this knowledge will help others learn too. Lastly, this month I was shortlisted and exhibited in The Photographer’s Gallery’s Small File Photo Festival. I’m very proud of this exhibition, combining two of my interests: Photography and Image Compression. I’m hoping this year I’ll be able to move about more and take photos again.

Year Review 2022

Sat, 31 Dec 2022 19:25:18 EST

â€¢ Changes
â€¢ Favourite Things
â€¢ Projects
â€¢ The Goal for 2023
â€¢ Conclusion

This year I kept my goals fairly open ended, I had a feeling it wasnâ€™t going to be the most straightforward year and it proved to be the correct assumption. One of my main goals was to get my health back in shape, which was thrown an entire curveball when my kidneys spent over half the year in a state of failure. Iâ€™m on the mend now though thankfully. The second biggest goal was to rebuild my website from scratch, it took several months as well as redesigning the CSS twice, but Iâ€™m quite proud of the final result and especially with how incredibly lightweight I managed to make it. Without a doubt itâ€™s my biggest success this year. The last goal was to learn how to properly program, as well to produce some watchfaces for the Pebble watch. It took until the Rebble Hackathon in November to actually achieve both of these, but I had a lot of fun programming and I hope to keep it up.

Overall I had a lot of time this year, much more than even in 2021, but I feel I really put as much of it as I could to use and created some great things.

Changes

Hardware

âš¬ Sold my Motorola and got a Pixel 3a so I could use LineageOS.
âš¬ Bought a Kobo Libra 2 ereader.
âš¬ Got an old iPod Classic Gen 5.
âš¬ Bought a cheap Pebble Time Steel which has become my daily driver watch.
âš¬ Got a Mechanical Keyboard.

Software

âš¬ Switched to LineageOS on my phone.
âš¬ Started using Cmus in the terminal for my offline music.
âš¬ Learned how to use SSH and SFTP.
âš¬ Sorta learned how to use IRC.
âš¬ Installed KOReader on my Kobo.
âš¬ Learned how to make Bash Scripts.

Online

âˆ˜ Switched Mastodon Instance - Moved over to post.lurk.org in August this year, and Iâ€™m so glad I did. I had been on a very beginner instance previously, and quite frankly it was nowhere near as fun as lurk is to me now. It took a few months to really feel settled in, but Iâ€™m very happy with how everything is going.- Website - Aside from just remaking it, I started to use my website a heck of a lot more, and it really helped drive me forward in my goals this year as well motivating me to create more. I wrote a couple of blog posts and shared one on HN which got some nice discussion about the pros and cons of music streaming platforms.

âˆ˜ De-Platforming - I also moved away from using some platforms this year, for example reddit and snapchat which I only used to keep track of news or in snapchat’s case people I didnâ€™t really know anymore. I also sorted my instagram to be exclusively people Iâ€™m friends with or wish to keep in contact with. Discord has also become much the same, only using it every so often to chat with friends.

Favourite Things

In terms of content this year I had a rather large shift compared to last year. I didnâ€™t engage too much in surfing websites, or at least as much as I had in previous years. On the other hand, my music listening felt far more focused and Iâ€™ve managed to detail some of my top albums I listened to this year. I also read an absolutely ginormous amount of manga, on top of the monthly and weekly serials I read, I managed to finish 55 different Manga. I got into some series I had always wanted to read but could never find the time, and I really experienced some brilliant stories (as well as some bad ones) through it.

Music

âˆ˜ Favourite Artist - Snail Mail - Hoo boy. Iâ€™ve been a fan of Lindsey Jordanâ€™s music for a good few years now, her ability to write a great single is incredibly, but this year I found myself listening to her albumâ€™s Lush and Valentine a LOT. Valentine deserves serious praise for both Lindseyâ€™s singing and songwriting skills, the album opens on a powerful note and finishes on with an emotional serenade, the songs inbetween creating a seamless transitions between both tones. There was a point this year that I played Valentine at least once a day! Absolutely cannot wait for her to go on tour again and see Snail Mail play live.

âˆ˜ Favourite Album - How It Ends by TOLEDO - Released at the end of September, TOLEDOâ€™s first album How It Ends takes a departure from their previous EPs and singleâ€™s tones. The biographical nature of this album takes a hold from the start, Soda Can creating an incredibly visual and narrative experience that continues throughout the rest of the 40 minute album. It has a very unique feeling to it all, one that I find a little hard to describe, but I think it can be best described as a very personal album, for both Dan and Jordan, their history and relationship that blends extremely well with their existing sound.

Manga

âˆ˜ Top Manga - NausicaÃ¤ of the Valley of the Wind - I slept on this for far, far too long. For the longest time I thought the manga was nothing more than a predecessor to film. Had I known my timelines, Iâ€™d have know that the manga continued for over a decade after the filmâ€™s release. This is reflected in the mangaâ€™s story, the contents of the film are an abstraction of various plot points that occur in the mangaâ€™s first book. The remaining four books craft a tale that is quite frankly unmatched in manga. It develops both Nausicaa and the world to a point far beyond the scope of the film, and builds an exceptional hero out of her. I rarely say this, but it is truly a must read. This manga is so good it took one of my favourite ghibli movies and made it even better. 10/10

âˆ˜ Top Serial - Blue Period - Once again Blue Period had an exceptional year of chapters. Finishing off the second year arc, Yamaguchi Tsubasa produced some excellent progression of both the story as well as characters. Almost every chapter this year had me feeling that it was ten times better than the last one, which is an impressive feat to still be pulling off this far into itâ€™s serial. We see Yatora progress a lot as character as well, and itâ€™s honestly quite incredible how close to reality Blue Periodâ€™s depiction of college is. College isnâ€™t a common setting in manga, however this mangaâ€™s dedication to using it as the storyâ€™s driving force is commendable as well. Worth keeping an eye on next year for sure.

Projects

I spent a lot of time this year on things I didnâ€™t expect to work on, but they were definitely time well spent on. My pursuit of a better UX on my iPod drove me down a rabbit hole of theming and customising iPods, which has since branched out into a lot of different projects taking up my time. Most of these projects however have proved quite useful for my college entry portfolio.

Website Optimisations

My main goal when rebuilding my website from scratch this year was to make a website that had great design, but was also fast. This led to what I can only describe as an obsession with compression and filesize savings. I went as far as manually editing my font files to remove unneeded glyphs and even removing all spaces in my CSS file. But it was well worth it, the homepage now comes in at just under 48kb! I wrote up a blog post detailing all the techniques I learned which you can find here.

iPod Projects

I got into iPods early in the year as part of my move towards owning my music collection. However the UX in both the stock OS and RockboxOS felt clunky and quite hard to read at times, and none of the existing themes met my standards so I set out to make my own theme adwaitapod. Unfortunately the Rockbox theming language is pretty user unfriendly especially to beginners, and with only basic documentation to go on it took months to just get familiar with how things worked. This led me to start writing a book for new users to learn how to make a theme from scratch with no prior knowledge, in doing so I also decided to start making syntax-highlighting for the language from scratch. I hope to finish this project early next year.

Pebble Watchface

Iâ€™ve wanted to make a watchface for the pebble for a while, however my programming knowledge has been non-existent. I spent a few months trying to read up on programming in C, but when I heard about the rebble hackathon I knew I had to make something for it. In the space of two weeks in November, I learned how to make a watchface from scratch in C and during the two days of the hackathon produced my first watchface: Time Twist Pop! Iâ€™m very proud of it, and have been wearing it everyday since. Thereâ€™s still some stuff to finish off with the project next year, but thatâ€™ll come soon.

The Goal for 2023

Once again, I’m keeping my goals for the coming year pretty open-ended. I plan to keep up bandcamp buying this year, as well producing some more pebble watchfaces during hackathons. I have some projects from 2022 that need finishing, as well as preparing a portfolio to college but once I finish all that it’ll be onto new things. My main goal for 2023 is art, I intend to go back to the basics and relearn everything with my sights set on getting comfortable drawing as well creating a style for myself that I enjoy. I have no clue how this will go, as my health will really put the brakes on this if I can’t draw, but nonetheless I’m excited. I also hope to do some stuff with self hosting and hosting my own gemini server soon! So keep an eye out here!

Conclusion

This post has really gone on long enough, to wrap up: it’s been a year with plenty of highs and lows but I feel incredibly accomplished and proud of how I spent the year. Here’s to another year, see you soon!

-Dook.

Leaving Spotify for Freer Pastures

Wed, 30 Nov 2022 17:10:26 EST

Over the past year, I’ve slowly worked on moving my listening activities away from Spotify and towards a setup where I have much more control over how I listen. As people will be checking out their Spotify Unwrapped, I thought it’d be a great time to talk about my thoughts on the platform and why I’m moving away from it.

Why leave?

Don’t get me wrong, Spotify is pretty great. Being able to listen to just about whatever I want, whenever I want and in decent quality is a great privilege. In recent years, there’s been less and less songs that aren’t available on the platform. And at face value, the price you pay is certainly worth the massive library of music available at your fingers. I quite frankly wouldn’t have a music taste if it wasn’t for Spotify, being able to listen to recommended playlists and such have introduced me to artists and bands that I never would’ve come across without it. However as time moves on, the way I listen to music has changed considerably to something that is less compatible with Spotify’s formula.

Generally, Spotify’s main focuses are user playlists and recommendations. You make a playlist, you listen to it, Spotify plays you some recommended songs which you add to your playlist, eventually moving onto another playlist and the cycle repeats. If you don’t pay for premium this is even worse, in playlists it’ll just throw songs in and you have no control. This persists even for playlists you didn’t make. For most people, this is probably fine, I imagine the majority of people using Spotify aren’t diehard music-heads, but simply those looking for a bit of control over the background noise in their lives. But for me, this makes dropping to the free-tier of Spotify an impossibility.

To top it all off, as I mentioned, the way I listen to music has changed in recent years. I find I greatly prefer albums over everything else. The cohesive linearity of a good album is a much better experience than a jumbled mess of songs that happen to give me dopamine at a specific time. And this singular preference feels in juxtaposition to Spotify’s focus on playlists and recommendations. Just recently, Adele had to convince them to change the play button in albums from shuffling, since the button was clearly built around playlists. At the same time, Spotify still has not added lossless audio to the platform. They’re the last major music streaming platform to not have it, and while rumours have bounced around for years about it’s impending arrival, there’s still no sign of it to come. As a music streaming platform, it clearly is targetted towards more casual listeners (of both music and podcasts) and simply isn’t as suited to me anymore.

Where to?

I think a lot of people would probably look at my distaste of Spotify and recommend another, more suitable, streaming platform like Apple music or Pandora. However, I thought to truly have control over how I listen, I should start buying and collecting my music. I already spend a set amount of money each year on a Spotify Premium subscription, but I realised with the same amount I could buy an album every month and actually own it.

This lead to me starting my bandcamp buyin’ page, every month buying an album from Bandcamp with a few rules. The main rule is I wouldn’t more than one album from an artist in a year, I also made sure to buy during a Bandcamp Friday if there was one on. At the end of the year, I plan to write a short review on each of them. I bought a few CDs as well whenever I spotted good sales or older music for cheap in charity shops. Overall, I went from owning just a couple of CDs, to having around 20 albums in both digital and physical formats. I couldn’t be happier, and surprisingly Bandcamp has also introduced me to a lot of music I hadn’t ever found on Spotify. Some of these, like TOLEDO have quickly become favourites of mine! I think this really shows that Bandcamp can easily be enjoyable and fresh for those that like finding new music.

How it has changed how I listen

At first, I didn’t expect thigs to change too much, I’ve still kept my Spotify subscription this year, and put in around 30,000 minutes of listening on the platform. But as my collection grew, I found myself listening more and more offline with my music. This has been especially useful during times without power throughout the year, we had about 7 or 8 maintenance days this year and I was able to keep my 4 year old Lenovo going for around 6 hours of work using Cmus for music. I tried several graphical music players, but the simplicity of Cmus really beat the rest for me.

One other big change was purchasing an iPod classic 5th gen in April. Having portable music on a separate device is really appealing to me, simply for giving my smartphone one less job. But having a build in DAC, as well as great support for modding and customising, was a top selling point. I’ve since loaded it up with Rockbox, mostly so I can use custom themes and Flac formats. Not being too pleased with most of the themes available, I set out to make my own inspired by the Gnome desktop’s adwaitapod design language. The end result, adwaitapod is jam packed with features, and gives me everything I could want from a music player UI. I also have a bunch of physical mods ready to add to it soon, like flash storage, a larger battery as well as a Taptic engine from an iPhone to replace the click speaker.

iPod running Rockbox and adwaitapod

What’s next?

Going forward, I want to continue on this path for sure. Next year I’ll be doing bandcamp buyin’ again, and continuing to collect my favourite music off Spotify. For music I can’t buy off the platform, there’s plenty of methods usable to collect this that I won’t go into here, but a quick search online should give you answers. And hopefully by this time next year I’ll be in a position where I’m happy enough to cancel my Spotify Premium and hop off the platform for once and for all.

November Update

Fri, 25 Nov 2022 20:05:31 EST

What a wild month! I started the month updating a finishing off my adwaitapod theme for rockbox. I also spent the past 3 weeks learning to program in C, building up to the Rebble Hackathon last weekend where I put together my watchface design, Time Twist Pop and released it! It was incredibly frustrating at times, since I really have very little experience programming. However, by the end of the weekend I was getting into the zone and pumping out some really good stuff and was having a blast! Really looking forward to making more with C in the future!

Autumn Update

Sun, 09 Oct 2022 13:27:32 EST

It’s a crazy couple of months for me, but I finally found some time to tend to the website. First thing I did was get to finalising it’s design, the way it had been before was overly garish and pretty difficult to look at on some pages, the new style is far better in this regard. I also took the time to go absolutely overboard on optimising every possible thing I could, making each pretty tiny for what it is, I made a writeup on everything I did here.

I also managed to find a new home on mastodon during this time at Lurk! It’s a great community. A few new projects have been started as well; an accessible version of my ipod them after some user feedback, as well as a book for other people looking into making their own themes. Currently everything I’m doing is building up for my portfolio to switch colleges with next year, so I’m gonna be busy for the the next few months!

Extreme Web Optimizations, without Compromising Style

Wed, 05 Oct 2022 15:50:41 EST

Over the past 10 months, I’ve worked on and off tweaking my site to get it closer to how I want it to look and perform. The main goal was simple: make a site that looks good, and loads fast. A quick solution would’ve been to keep the css to a minimum, use browser defaults for fonts etc. However that would’ve made my vision of a styled site difficult if not impossible. This pushed me to seek gains elsewhere as much as I could.

Limitations

One of the major limitations I set was to not use media queries for layouts. While there’s nothing wrong in particular with using them, I felt that flexboxes and calculated variables did a much better job in far less lines of css. This does make the site header look a little unusual on mobile devices, however it’s grown on me much more than I thought it would to the point that it doesn’t bother me. Another big limitation was not using Javascript, however due to the simplicity of my site, it wasn’t going to be a problem.

Fonts

In other projects this year, I’ve messed around with combining and editing fonts in FontForge and when it came to look at the fonts for the site, I returned to it once more. Tools like Fontsquirrel’s webfont generator are great for optimising fonts quickly, but I had a feeling I could make the filesizes even smaller.

The reason I originally thought of using FontForge here was because of issues with default fonts on other systems. In my site logo, I have two unicode ‘whiskers’ on either side, however one of the only fonts that even has this character is Symbola. On Firefox Desktop, Symbola is a default font and is automatically used to display characters that aren’t in the supplied font. However, on other browsers I found this wasn’t the case and my characters would show blank boxes. The temporary solution was just throwing Symbola in with the rest, but at a whopping 2.2mb? It wasn’t gonna be permanent. So I went and copied what I did when I made single file Latin+CJK fonts for Rockbox, and transplanted the characters into Lunchtype22 for the title. I did a full writeup on how to do this, which you can find here

When it came to thinning down the character selection of the fonts, FontForge made it pretty easy to pick and choose what stayed and what went. I kept a very minimal range of basic Latin characters, symbols and numbers. In the future I have the option to add some of these back on if they’re needed. Tweaking the export settings saved some extra space as well. All in all, these optimisations helped reduce the combined font’s filesizes from several MBs to just under 38KBs.

Optimising SVGs

SVGs are always some of the smallest resources you can use, but there’s also plenty of room to make optimisations with them. For making simple icons, like my RSS icons, I found dotgrid from hundred rabbits to be a fantastic editor that exports good svgs to work with. You’ll still want to tweak and edit the file to fit your usecase, but overall the easiest to use for icons. For other svg images, I use Inkscape. But I was only able to get usable files if I exported using their Optimised Svg output, with most options turned on. On top of all these, removing xml declarations, version attributes and other stuff not needed or read by browsers helps to trim even just a kilobyte or two off your files, which adds up.

Images

Easily the largest part of any webpage, images became a tricky problem early on. One of the main parts of my site is the Gallery section holding all my photography, and having up to 10 images per page would take forever to load. The first step I took was to match the resolution of the images to their displayed max-width, 720px. I also made a separate folder for section lists images which display at 400px wide, saving loading times for those pages. After doing some searching, I found Rekka Bellums’s guide for optimising images. I took their ImageMagick script and changed it a little to suit my needs, getting rid of colorspace setting and reducing the quality to 80% in order to keep file sizes low. I’ve yet to create a good workflow for optimising gifs, using some web tools in the meantime as I don’t tend to work with gifs much at all.

CSS Compression

One of the last optimisations I made was to compress the css. It was really only worth doing after I finalised everything, as it makes reading the raw css file pretty difficult (though I do have to scroll less now which is nice). I reduced all functions to a single line, as well as removing any space that wasn’t strictly necessary. This saved me over a KB. A lot of functions like borders, margins, text-decorations etc. also have shorthand ways of writing them which reduces overall bloat. I wouldn’t recommend the compression step for most use cases, but for simple static sites that wont be used by many, it’s such a simple and quick way to save a few KBs.

Conclusion

In the end, I managed to keep even the largest page under 800KBs. For comparison, the most minimal page is the homepage, coming in at just 48KBs. It was probably all in all more work than it was worth, but I’m glad with the results. Thankfully wont be having any more urges to tweak and optimise the site when I know there’s very little left on the table to save.

Year Review 2021

Fri, 18 Feb 2022 10:52:41 EST

At a glance, this year has been a bit of a writeoff for me. I was diagnosed with Crohn’s earlier in the year and I’ve spent most of the rest recovering, going so far to drop out of college on medical leave. My high risk to covid has left me isolating in my home for a large amount of time as well. Both have hampered my ability to do much physical things, but allowed me to read and research more than I could before.

Changes

Hardware

âš¬ Added a shelf to my desk to allow me to use my computer standing.
âš¬ Bought a Pebble Time watch.
âš¬ Repaired my Ds Lite and replaced it’s shell with a snazzy Lime one.
âš¬ Swapped my Thinkpad’s old Hard-drive for a new SSD.

Software

âš¬ Ditched Windows for Fedora Linux. Best choice of the year right here.
âš¬ Went full Free Open Source Software on my phone.
âš¬ Began using RSS feeds to compile my favourite sites and blogs in one place.
âš¬ Started my blog!.
âš¬ Joined Mastodon.

Favourite things

Music

âˆ˜ Favourite Artist - Mkgee - Most listened artist of the year for me, fantastic producer though his bandcamp is missing his latest album sadly.

Podcasts

â¬© Fall of Civilisations podcast - Fantastically engaging podcast that paints the fall of many civilisations in a concise, historical narrative.

Websites

â¬© Hundred Rabbits - A site covering Rek and Devine’s artist collective. I’ve spent so many hours reading on this site, with so many adventures, knowledge and projects to read about, it really is a treasure trove.

â¬© Ritual dust - the personal site of Lizbeth Poirier, there’s a wide range of content to be found on it. From beautiful art, to recipes and the fabulously depthful folklore section that is an absolute joy to read, especially with the site’s fantastic design.

Youtube

â¬© Disrupt - Disrupt’s tv-imitation aids greatly to it’s flowing narrative and visual style. The stories they cover are fascinating, and the videos themselves are incredibly well produced like nothing else I’ve seen on the platform.

â¬© Not Just Bikes - this channel has fast become a favourite on Hacker News, where I first came across it. The highly informative videos make you rethink the old, pedestrian-unfriendly infrastructure so many countries continue to use.

Manga

â¬© Lore Olympus - There’s not much not to love about Lore Olympus. It’s style is vivid and easy to read, and it’s story engaging, really making you look forward for the next chapter.

Going Forward

The goal for 2022 is to get my health back into shape and sharpen my mind. I’d like to focus my time learning to properly program in a way that will actually be useful to me. The first project of the new year will likely be a rebuilding of this site, I’m unhappy hosting the site on github pages, not mention the code being an absolute mess. But I’ve got a clear vision of what I want to do this time, which makes it a lot easier to plan for. After that I plan to dabble in some C for the Pebble and make some watchfaces for a challenge.

Conclusion

This hasn’t been the best year ever, but I’m feeling more hopeful for next year! I’ve still got several months of free time left on leave so I’m eager to make the most of it. Here’s to a happy new year!

D00k

A new way to theme the Quickscreen in Rockbox

What is the Quickscreen?

Theorizing a path to custom Quickscreens

The Problem

Working in Rockbox’s codebase

The final result

Wrap up and thanks

Prepping for Travel

Year Review 2023

Changes

Audio Hardware

iPod Upgrade

New Camera

Favourite Things

Music

Manga

Projects

Website Redesign

Adwaitapod

Beryl Logo Design

Looking towards 2024

Conclusion

September Update

Re-designing my site, one more time

Re-thinking the process

Visual Language

Static Site Generation

‘Old School’ HTML and CSS

Making things small

Fonts

Images

CSS

Conclusion

April Update

March Update

Celebrating a Year of d00k.net

Purpose

Design

Making the site small

What’s next?

A Look Inside Themify

UI Re-colouring

Transparency

The Backgrounds

1-bit Bitmaps

Adaptive UI

The Lockscreen

Final Thoughts

Links

February Update

January Update

Year Review 2022

Table of Contents

Changes

Hardware

Software

Online

Favourite Things

Music

Manga

Projects

Website Optimisations

iPod Projects

Pebble Watchface

The Goal for 2023

Conclusion

Leaving Spotify for Freer Pastures

Why leave?

Where to?

How it has changed how I listen

What’s next?

Further Reading

November Update

Autumn Update

Extreme Web Optimizations, without Compromising Style

Limitations

Fonts

Optimising SVGs

Images