D00k

Migrating from Github to Sourcehut

Dook — Sun, 28 Dec 2025 22:22:36 EST

Earlier this year, I began migrating off of Github. My reasons are fairly simple and probably obvious for many people aware of the platform. With Microsoft’s participation in the genocide of Palestinians, I no longer want to be a user of their products nor do I want my projects to be associated with their platform.

All active development this year has been on Sourcehut, having had an account for several years now (their irc bouncer/client is a great product that I was happy to pay for) it was a simple decision to move there when I no longer wanted to be on Github.

In the coming months I will be moving the rest of my projects over. Some will remain maintained to a degree, my ipod themes for example I plan to continue to monitor the issues section as it has historically been the most common place for issues to get reported. All future projects will be on Sourcehut only.

One major part of this migration is my website. Currently it is hosted on Github Pages, and has been for over 4 years now. While I could use Sourcehut’s website hosting, I’ve decided to migrate to a VPS. More than likely Netcup, or something similarly renewable-powered. I must note that I am rather sceptical of Netcup’s renewable energy claims as they lack any details, while they are verified by the Green Web Foundation their database similarly lacks information of any sort on provider’s energy sources.

Moving to a VPS will allow me to move all my subdomains under one roof, which has been a goal of mine for a while now. However I’ll need time to set up and get ready, so I’m unsure of how soon this will happen. The transfer will likely be unnoticeable (fingers crossed).

Dook

A new way to theme the Quickscreen in Rockbox

Dook — 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.

Re-designing my site, one more time

Dook — 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

Celebrating a Year of d00k.net

Dook — 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

Dook — 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)

Leaving Spotify for Freer Pastures

Dook — 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.

Extreme Web Optimizations, without Compromising Style

Dook — 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.

D00k

Migrating from Github to Sourcehut

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

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

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

Leaving Spotify for Freer Pastures

Why leave?

Where to?

How it has changed how I listen

What’s next?

Further Reading

Extreme Web Optimizations, without Compromising Style

Limitations

Fonts

Optimising SVGs

Images

CSS Compression

Conclusion