Changelog

Since my last log I have made a few changes.

• Smaller components: You may have noticed that a lot of the components on my pages have shrunk. The design was too “in your face” and the amount of actual content on a page was sparse.
• Better mobile experience: The mobile experience is significantly improved, and there is pagination for my logs and blog page. I unintentionally forgot to response-ify my project page so that’s on my list of next steps.
• Pagination!
• In progress home page design: I designed a brand new home page! I wanted to create something a bit more personal and indicate my personal and career goals. The design may be altered as I start to implement it, but here’s how it is looking. (I use Inkscape for all my mockups).
• More sensible typography sizing: I picked more sensible font sizes and text spacing. The next-sibling css selector is very helpful for styling headers in relation to one another. For example, I may want to have different spacing between a header when its before
• Code blocks expand: Codeblocks on hover now expand to fit all the content. I find it really annoying to scroll on very long horizontal code blocks and loved this idea.

Future plans

Site performance

• Resize large images and convert to WebP using hugo. My current home screen image is 12mb 🤯

SEO

• Add title tags to main page
• Add meta descriptions to each page
• Add site favicon and custom name

Responsiveness

• Make the journey page responsive. All I need to do is switch to CSS Grid and add some breakpoints.
• On mobile change the journeys list from a horizontal card to a vertical one so the font size can stay consistent

Miscellaenous

• I have to rework how I’m styling and displaying SVGs. I have not found a clean way of doing it yet while maintaing control of styling after the fact.
• Add a link to bring you back from a log to the journey it belongs to
• Add a site footer
• Add an image gallery under each log to make the column more interesting

Battling Dart Sass and Hugo

I recently had been battling Syncthing conflicts between my desktop and laptop. Since the semester started, I’ve been coding on my laptop almost exclusively. I must have accidentally commited to my version control on my desktop with outstanding changes on my laptop, which effectively erased a bunch of work I had done.

Then a few days ago while I was developing the mobile layout, all of a sudden my hugo build stopped working. I suspected was residual issues from syncthing, but I could not figure it out.

Error: Error building site: TOCSS-DART: failed to transform "scss/main.scss" (text/x-scss): got 
unexpected EOF when executing "dart-sass-embedded". The user running hugo must have read and
 execute permissions on this program. With execute permissions only, this error is thrown.

I had seen this error before, which was resolved by either

1. Installing the --extended snap for hugo
2. Use the dart-sass-embedded snap instead of the bundled NodeSass (which has been deprecated for several years)

When it comes to coding issues, I am the most fallible link in the chain. My code not compiling has almost always been due to me being stupid. I figured that somehow my project structure had its file permissions badly altered by Syncthing. I am not the most comfortable when it comes to linux permissions, but in attempting to address my issues I ended up learning a lot about how to manipulate permissions recursively. I used

I have fallen into false confidence about the reliability of code written by others, since surely code published online doesn’t have any issues. I didn’t take my own advice from my blog about Multiplicative time. I, again, debugged for several hours and wanted to pull my hair out.

As a last resort I posted on the Hugo discourse.

Apparently there was an upstream change that broke dart-sass-embedded at the exact moment I ran sudo apt upgrade. Just my luck. On the flip side, hopefully my struggle saved some other developers the trouble. I really have to stop “rage coding”.