httpsterio's ramblings and articles

Building Jypeli executables on Windows and Mac

2025-04-15T00:00:00Z

Table of Content

Intro
Building for Windows
2.1. Visual Studio
2.2. dotnet build
2.3. Jetbrains Rider
Building for MacOS
3.1. dotnet publish
3.2. Bundling manually
3.3. Bundling script
3.4. Removing the app from quarantine
Final thoughts

Jypeli is the University of Jyväskylä’s fork of Microsoft’s XNA, released way back in 2010. It’s still used to teach the Programming 1 course at the university, which is why I ended up making a game with it in 2020.

Having spent a few weeks going through all of the game projects I’ve been a part of, I found myself updating my Jypeli game CueBit five years later.

This post isn’t going to be a primer on how to get started with Jypeli, the official materials and Programming 1 course are better than anything I could write.

Rather, I thought I’d show how I managed to build self-contained single file executables for Jypeli games on both Windows and MacOS. The official material doesn’t really touch on that and it’s more focused on getting the project set up and doing stuff with the engine itself.

Building for Windows

Jypeli can be built with Visual Studio, .NET SDK with the dotnet build console command. or with JetBrains Rider.

I recommend Rider, but will walk through all of the options.

Visual Studio

In order to use Jypeli with Visual Studio, you must already have the .NET 8.0 SDK installed, but in case you don’t have it, grab it from https://dotnet.microsoft.com/en-us/download.

If you don’t mind a bazillion dll-files being included with your final project, doing a regular build in Visual Studio should produce a working exe in a folder of files. You should find it roughly in bin/Release/net8.0/win-x64/. Just zip up the whole folder and that’s that.

The user will need to install the .NET 8.0.15 runtime to be able to play the game.

Visual Studio also has the possibility to publish the game, but in my experience it breaks easily. You need to disable trimming by creating a property group in your .csproj file like so

<PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <RuntimeIdentifier>win-x64</RuntimeIdentifier>
  <PublishTrimmed>false</PublishTrimmed>
  <SelfContained>true</SelfContained>
</PropertyGroup>

If you go with this option, your game will end up in bin/Release/net8.0/win-x64/publish/. The SelfContained directive includes the .NET runtime in the published file, which will likely double or triple the game size, but it’ll run more reliably without any extra installs required. You can also add

<PublishSingleFile>true</PublishSingleFile>

in the property group to create a single exe without all the adjacent files, but I didn’t manage to get it to work.

If you have a .ico icon, you should also add it to the property group above like so:

<ApplicationIcon>path/to/icon.ico</ApplicationIcon>

dotnet build

If you prefer the terminal or just want to script things, the dotnet CLI gets the job done. You’ll need the .NET 8 SDK installed, and your project should already be targeting .NET 8.0.

To build a self-contained Windows version:

dotnet publish -c Release -r win-x64 --self-contained true /p:PublishSingleFile=true /p:PublishTrimmed=false

What that does:

-c Release builds in Release mode
-r win-x64 targets Windows 64-bit
--self-contained true means the .NET runtime is bundled in
PublishSingleFile=true tries to spit out one .exe
PublishTrimmed=false avoids breaking stuff by removing unused code (which Jypeli really doesn’t like)

You’ll find the result in bin/Release/net8.0/win-x64/publish/.

If everything works, you get a single .exe you can send around. In practice, it’s hit-or-miss—Jypeli’s native dependencies sometimes force extra files in. Still, the folder’s pretty tidy and runs out of the box.

If PublishSingleFile refuses to cooperate (which it might), just leave it out or set it to false and ship the full folder. Less elegant, but it works.

Icons and other settings in your .csproj will be included, so make sure you’ve set those up as well.

Jetbrains Rider

Rider is my go-to for Jypeli projects. It’s fast, doesn’t get in the way, and makes building executables pretty painless. You’ll need the .NET 8.0 or .NET 10 SDK installed first. You should obviously also grab the Rider non-commercial version from their website.

Rider will also read your .csproj, so make sure it’s set up correctly.

To build a self-contained Windows .exe, set up a publish configuration:

In the top menu, go to Run → Edit Configurations
Click the + button and select .NET: Publish to Folder
Fill in the options:
- Target location: /path/to/your/build/folder or wherever you want the final build
- Configuration: Release | Any CPU
- Target framework: net8.0
- Target runtime: win-x64
- Enable ReadyToRun compilation: true
- Trim unused assemblies: false → The game won’t run if you set this to true.
- Produce single file: true
- Include native libraries for self-extract: true
- Include all content for self-extract: true
- Delete existing files: optional, but setting it to true keeps the folder clean. Will delete your files if you’re not careful.

Once saved, just run the config and you’ll get a single .exe in your target folder.
You can delete the .pdb, the .exe will work standalone.

This has the .NET runtime bundled, so the file size will be considerable, but at least it’s a single .exe that will run on most Windows machines!

Building for MacOS

Building a Jypeli for Mac is relatively simple. There’s just one massive caveat—signing and notarisation require a paid Apple developer license.

It’s not the end of the world, you can still build and distribute your app for free. Your users just have to jump through a few hoops if you’re not going to shell out the $99 a year for the developer license.

Apple is pretty anal when it comes to unsigned applications, meaning that the executables get a quarantine parameter added. To the end user this shows up as a warning that the app can be malicious or even corrupted with a suggestion to delete it. Not ideal!

Let’s look at the building and bundling first though!

dotnet publish

Install the .NET 8.0 SDK from https://dotnet.microsoft.com/en-us/download. Make sure you’re grabbing the correct one for your architechture, either arm64 or x64. Then open up the terminal and navigate to your project folder.

If you’re using an Apple Silicon based Mac, run this command:

dotnet publish -c Release -r osx-arm64 --self-contained true /p:PublishSingleFile=false /p:IncludeNativeLibrariesForSelfExtract=true

if you’re on an older Intel based Mac, replace the osx-arm64 with osx-x64. This will work with Mac’s running MacOS 10.12 Sierra or later.

This should create a folder /bin/Release/net8.0/osx-arm64/publish with a ton of files. Try to execute the $GameName executable file in the directory. You should see your terminal pop up and the game window starting.

You could zip this up and share with your users, but it isn’t the most user friendly format to run. So, let’s make an app bundle from it!

Bundling manually

An app bundle, aka yourgame.app is actually just a collection of nested folders with some metadata. It looks like this:

MyApp.app
├── Contents
│   ├── MacOS
│   │   └── MyApp               # Main executable file
│   ├── Resources
│   │   └── icon.icns           # App icon
│   └── Info.plist              # App metadata and configuration

So, to get started, let’s create the folder structure.

You can make the folders manually by hand, remember to name the topmost folder with the .app extension and use right click to “show package contents” to get inside the app bundle. Or you can use this oneliner:

mkdir -p MyApp.app/Contents/{MacOS,Resources} && touch MyApp.app/Contents/Info.plist

Move every file from the /bin/Release/net8.0/osx-arm64/publish inside the MyApp.app/Contents/MacOS folder.

For the icon, you’ll need a 1024x1024 pixel sized png image. Then run this command

mkdir -p icon.iconset && sips -z 512 512 your-icon.png --out icon.iconset/icon_512x512.png && cp your-icon.png icon.iconset/icon_512x512@2x.png && iconutil -c icns icon.iconset -o icon.icns && rm -rf icon.iconset

This will take your-icon.png, create a downscaled 512x512 png and copy your icon to a 512x512@2 retina version of the icon and create an icns file from both of the images.

Now, move the created icon.icns into the MyApp.app/Contents/Resources folder.

Lastly, we’ll fill in the info.plist.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleName</key>
    <string>${APP_NAME}</string>
    <key>CFBundleExecutable</key>
    <string>${APP_NAME}</string>
    <key>CFBundleIdentifier</key>
    <string>com.${PUBLISHER}.${APP_NAME}</string>
    <key>CFBundleVersion</key>
    <string>1.0.1</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleIconFile</key>
    <string>icon</string>
</dict>
</plist>

Fill in the ${APP_NAME} fields with your app name as well as com.${PUBLISHER}.${APP_NAME}, your publisher name.

The last field, <string>icon</string> refers to your app icon. Make sure the value iconis changed to whatever you named your icns file as without the icns extension.

You know what? You should have a fully functional app bundle now! Just drag the created MyApp.app to your Applications/ folder and you’re good to go! Check out the part on removing the app from the quarantine at the end though!

Bundling script

I also made a simple script to automate the creationg of the app bundle. If you’re doing multiple builds, it’ll get tedious creating the bundle by hand every time so a script like this will save some serious time!

Save the following as build.sh in the same folder as your .sln file. Change the “MyApp” to whatever your game is called and “YourName” to a single publisher name you want to use.

#!/bin/bash

# Set app name
APP_NAME="MyApp"

# Set up publisher name
PUBLISHER="YourName"

# Set up app directory
APP_DIR="release/${APP_NAME}.app"

# 1. Build the project
dotnet publish -c Release -r osx-arm64 --self-contained true /p:PublishSingleFile=false /p:IncludeNativeLibrariesForSelfExtract=true

# 2. Clean up any existing .app
rm -rf "$APP_DIR"

# 3. Create .app structure
mkdir -p "$APP_DIR/Contents/MacOS"
mkdir -p "$APP_DIR/Contents/Resources"

# 4. Move published files into MacOS directory
cp -R "bin/Release/net8.0/osx-arm64/publish/"* "$APP_DIR/Contents/MacOS/"

# 5. Copy icon to Resources
cp "bin/Release/net8.0/osx-arm64/publish/Content/app.icns" "$APP_DIR/Contents/Resources/"

# Copy the rest of Content (excluding app.icns) to MacOS/Content
mkdir -p "$APP_DIR/Contents/MacOS/Content"
rsync -a --exclude="app.icns" "bin/Release/net8.0/osx-arm64/publish/Content/" "$APP_DIR/Contents/MacOS/Content/"

# 6. Create Info.plist
cat > "$APP_DIR/Contents/Info.plist" <<EOF
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleName</key>
    <string>${APP_NAME}</string>
    <key>CFBundleExecutable</key>
    <string>${APP_NAME}</string>
    <key>CFBundleIdentifier</key>
    <string>com.${PUBLISHER}$.${APP_NAME}</string>
    <key>CFBundleVersion</key>
    <string>1.0.1</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleIconFile</key>
    <string>icon</string>
</dict>
</plist>
EOF

# 7. Rename main binary to match app name
mv "$APP_DIR/Contents/MacOS/${APP_NAME}" "$APP_DIR/Contents/MacOS/${APP_NAME}"

echo "✅ ${APP_NAME}.app created at $APP_DIR/"

# 8. Cleanup bin directory
rm -rf "bin"
echo "🧹 Cleaned up build artifacts."

The script assumes your icon.icnsis located in your Jypeli Contents directory and is set to always output it in your .csproj like so:

<ItemGroup>
  <None Include="Content\icon.icns" CopyToOutputDirectory="Always" />
</ItemGroup>

Next, run the following command to allow executing the script and then run the script.

chmod +x build.sh
./build.sh

In short, fill out the two variable names at the start of the script and make sure your icns is output by the build. Run the script and you’ll have the finished executable in your release/ directory, next to your .sln file.

Removing the app from quarantine

Assuming you’re not signing and notarising the app, Apple will flag the app stopping your players from starting the game.

The fix is literally one single terminal command.

xattr -rd com.apple.quarantine /path/to/MyApp.app

Instead of typing the path to the app, it’s also possible to write out the start of the command and then dragging the app file into the terminal window. The path will automatically added to the command. After hitting enter, the file will be removed from quarantine and should be executable by the players!

Final thoughts

There you have it. As you can see, you have a few options when it comes to building your Jypeli games for distribution. There are some caveats with each option, but hopefully I showed you how to exercise your options should you choose one.

Happy gaming!

Generating content driven CSS with Eleventy

2025-04-11T00:00:00Z

If you’ve ever taken a peek at my content stream, you’ll know that I use an assortment of colours to denote post categories.

It took me a while to nail down how to achieve it. Creating the feature was surprisingly simple though once I had an understanding of the data cascade and how to utilize template files.

The first version used hard-coded templates for each post type. The second version loaded different post types dynamically based on category. Third version inlined dynamically created classes (which meant a lot of duplicated inline CSS) and my latest iteration now creates the classes needed on the fly and everything only gets created once.

I’ll demonstrate how I did it.

Directory data files

Eleventy has a handy thing called Directory data files^[1]. They’re JSON or JS files that can either compute or apply static values to the files in your directories.

My content is separated into sub-folders. I have a src/content/$content-type layout for my categories, $content-type being my folders for the categories like articles or projects.

If you create a folder-name.json file inside the similarily named directory, you can use that json file to prepopulate your YAML front matter. This means, you don’t have to type category: article for every post you have. It’s pretty nice. This is what my projects.json looks like:

{
  "layout": "post",
  "category": "project",
  "permalink": "//project/{{ title | slugify }}/index.html",
  "theme": ["blue", "light"]
}

So, this means that every post that is in src/content/projects/ will get the specified layout, category, permalink and theme automatically set in the front matter for each post.

n.b. remember the data cascade^[2]. If you set a value in your front matter in both the directory data file as well as the front matter in your layouts, the directory file will override the values. Use eleventyComputed to override the directory data file values.

CSS Variables

In the JSON example above, I set a key value pair called theme with an array as the value. This means that in my layouts I can use either theme[0] and theme[1] or post.data.theme[0] and post.data.theme[1] to access the values set. You could have more values or just one. If you’re using just one, you don’t need an array, you can simply give it a string value as well.

In my case, the colour blue and light are definied as a CSS variables and I’m only using colours I’ve already named and defined in the CSS like so:

:root {
  --colour-dark: #0c0c0c;
  --colour-light: #F3F3F3;
  --colour-red: #e5633e;
  --colour-turquoise: #1ed397;
  --colour-green: #59D376;
  --colour-yellow: #fdb320 ;
  --colour-tangerine: #f18b2f;
  --colour-orange: #f79f28;
  --colour-blue: #1E29F9;
  --colour-purple: #4f0eb8;
}

Now, for the fun parts!

Template file as CSS and dynamic CSS

The cool thing about Eleventy is the way you can manipulate data and files. CSS is just text and template files are just text as well. As long as you’re properly formatting your templates, you can use any template language Eleventy supports to slurp up all of the data you need and generate files based on that.

I’m using Nunjucks files as that’s what I’m most familiar with, but I’d recommend going with .11ty.js files for their flexibility.

I made a themes.css.11ty.js file and it looks like this:

themes.css.11ty.js

module.exports = class {
  data() {
    return {
      permalink: "/assets/css/themes.css",
      eleventyExcludeFromCollections: true,
    };
  }

  render({ collections }) {
    const seen = new Set();
    const themeValues = [];

    for (const post of collections.posts) {
      const theme = post.data.theme;
      if (Array.isArray(theme)) {
        const key = theme.join("-");
        if (!seen.has(key)) {
          seen.add(key);
          themeValues.push(theme);
        }
      }
    }

    return themeValues.map(theme => {
      return `
.theme-${theme[0]} {
  border-color: var(--color-${theme[0]});
  color: var(--color-${theme[1]});
  background-color: var(--color-${theme[0]});
}

.theme-${theme[0]}:hover,
.theme-${theme[0]}:focus-within {
  border-color: var(--color-${theme[1]});
  box-shadow: 0.75rem -0.75rem 0 0 var(--color-dark), -0.75rem 0.75rem 0 0 var(--color-${theme[0]});
}

.theme-${theme[0]}::selection {
  color: var(--color-${theme[0]});
  background-color: var(--color-${theme[1]});
}

.theme-${theme[0]}-post-tag {
  color: var(--color-${theme[0]});
  background: var(--color-${theme[1]});
}
      `.trim();
    }).join("\n\n");
  }
};

themes.css.njk

---
permalink: "/assets/css/themes.css"
eleventyExcludeFromCollections: true
---
{% set seenThemes = [] %}
{% set uniqueThemes = [] %}

{% for post in collections.posts %}
  {% if post.data.theme %}
    {% set key = post.data.theme | join('-') %}
    {% if not (key in seenThemes) %}
      {% set seenThemes = seenThemes.concat([key]) %}
      {% set uniqueThemes = uniqueThemes.concat([post.data.theme]) %}
    {% endif %}
  {% endif %}
{% endfor %}
{% for theme in uniqueThemes %}

.theme-{{ theme[0] }} {
  colour: var(--colour-{{ theme[1] }});
  background-colour: var(--colour-{{ theme[0] }});
}

.theme-{{ theme[0] }}:hover {
  border-colour: var(--colour-{{ theme[1] }});
  box-shadow: 1rem var(--colour-{{ theme[0] }});
}

{% endfor %}

In short what the snippet above does:

Create a file called themes.css
Store the theme keys and values
Loop through the collections.posts and store each unique theme
For each unique theme, create a theme-$name class and use the theme[0] and theme[1] values for CSS

This will render out to a regular CSS file with all of your themes as their own classes, but you could even take it one step further.

You could even use a {% if theme[1] == "dark" %} block to create separate CSS for those themes that work with dark colours and those that work with light colours for example. Or you could randomize the colour values to create a random assortment of themes on each build!

Using the CSS

Now it’s time to actually use the CSS we just created.

First off, you’ll want to include the created file. I also have added a hashing function to cache bust the file between builds.

  {% set assetHash = global.random() %}
  <link rel="stylesheet" href="/assets/css/themes.css?{{ assetHash }}" />

In my Nunjucks template I can now access the CSS classes like so

<article class="{% if post.data.theme %}theme-{{ post.data.theme[0] }}{% endif %}"></article>

So in the case of my projects, we’re checking if the project file returns a theme value and then we add the theme-blue class to the article.

Remember that if you’re not using themes for all of the content, you’ll need a higher specifity in your classes to override the defaults. My articles have a fallback theme and only if I have set a custom theme in the post, will we be using that.

End words

Eleventy can really be such a delight to work with and it’s stuff like this that keeps me coming back to it all the time.

Hopefully my sort-of tutorial inspires you to experiment with using data and templates to create dynamic CSS on the fly. I’m excited to see what you all come up with!

Ta ta and farewell!

Notes

Wheel woes

2025-01-23T00:00:00Z

I had a tiny mishap with the car. When I went to pick up my wife from work last friday, all was well.

We didn’t get far from the lot when the ride started to feel a tiny bit bumpy. The roads are filled with snow and ice so I didn’t think too much about it, it’s normal to feel a bit bumpy. Still, I kept following the situation. Once we hit a better cleared patch of road and the ride still felt bumpy, I knew something was off and thus, we pulled over.

The sad, flat situation

Damn, a flat. The time was nearing midnight, it was dark and cold. I didn’t want to damage the car or the rims so we had to leave the car in the parking lot we’d pulled into. Luckily, my parents lived a few minutes walk from where we’d stopped so I popped over, borrowed their car for the night and went home.

The following morning, it’s saturday. All of the tire shops are closed on the weekend it seems and even if I managed to buy a tire, we’d need someone to install it on the old rim. Anyways, the car was parked on an extremely slippery parking lot that was on an not-so-insignificant sideways incline, which also meant that changing the tire there wasn’t an option.

We had to tow.

In my eternal wisdom, I’ve always paid for the second cheapest insurance which comes with 24/7 free roadside assitance, including tows. The third cheapest would’ve also covered arson and moose accidents.

I called up the insurance company and within an hour the tow guy arrives. He agrees that changing into the crappy mini spare tire is a bit hazardous as it’s too slippery to jack the car up. He also happens to know that my local go-to tire shop actually does have on-call service on weekends. So, the car gets towed there.

An hour later I get a call from Janne at Rengasnuora, he happens to have two almost unused fitting tires for 150 €. This is including the weekend on-call service, changing the tires and the price of 'em. Pretty nice considering that a new pair of similar ones would’ve cost me 300 € and normally the changing costs around 50 € in itself. I could’ve also just bought one of the tires but, the other rear tire was about 14 years old at this point and it’s important to have similar tires on both sides of the axle, especially with our winter conditions.

All in all, this whole episode cost me 150 € and took about two hours of my saturday. I expected a lot worse. If you ever happen to find yourself in tire need (hehe) of a set of wheels in central Finland, you should call up Janne. ⭐⭐⭐⭐⭐

Oh, the cause of the flat was a screw on the road. Shit happens, I guess.

Beware of the productivity illusion

2025-01-08T00:00:00Z

I set out to write a simple “New Year, new me” type of blog post. Bish bash bosh, done and dusted, right? Nope!

After booting up VS Code, I remembered seeing on Robb’s Lens website that my RSS feed was missing the proper meta tag. While looking up how to correctly set it up I fell into the trap.

I can reveal now that I didn’t write that blog post, not a single word. I did however fix my RSS and added two additional feeds that are fully validated, so now you can subscribe to my nonexistant content with Atom, RSS and JSON feeds :D. I also created a new Eleventy filter for my website and did some CSS tidying as I found some broken behavior with images.

Ironically, this post was written on my phone at 10 a.m. after shutting off my desktop PC and giving up for the night (day, morning w/e, sleep patterns are a scam by Big Sleep™).

The thing about this type of “productivity” is that it’s not very productive at all. I didn’t accomplish the task I set out to do. I did get a lot of things done, but I didn’t work on anything I actually needed to do. I didn’t even really have the opportunity to make a choice at any point, I kinda just slipped into gear of working on unrelated semi-adjacent issues. This is pretty common with ADHD and really quite annoying.

I don’t like not having the option to choose, I don’t want to get swept away because I can’t decide what to focus on.

If this resonated with you or you have suggestions on what I could try, please feel free to shoot me a message!

Family gatherings

2024-07-17T00:00:00Z

I’m usually not a fan of big family gatherings. You know the type, every aunt and their neighbour is invited to some tiny town half-way across the country and then you sit there trying to small talk about the most inane topics. Usually it’s some kid is getting christened or an uncle turns 80 years old. Dunno.

I don’t mind the extended family, cousins, uncles and whatnot. They’re alright people, but I’m not really close with them either and we share nothing in common apart from being distantly related.

Today we met up with my cousin and his family. I haven’t seen them in a decade and to my surprise, it was alright. The kids are more grown up and we could actually chat. The kids also brought their partners who seemed like decent fellows so that’s nice.

Driving for four hours to hang out and grill a bit isn’t still fun and I’m absolutely knackered, but expectations were at least exceeded.

Wedding stress

2024-07-15T00:00:00Z

You know what’s funny? When I got married two years ago, I had a lovely old time. Me and the wife put the wedding together mostly entirely by ourselves.

We did get a bit of help from my family, mainly with setting up the venue, running the kitchen (making coffee in other words) and cleaning up the venue the following day.

It was very stress-free and simple. We had no expectations for our family, they kinda just helped with whatever they felt like. There wasn’t a ton to do.

So you can guess my surprise when being the bestman for my brother turns out to be quite the opposite of easy or relaxing. There’s a lot more coordination and planning to be done, I have more tasks than I had at my own wedding. I still haven’t written the speech and it’s less than a week away!

It kinda makes sense why this is stressing me out. I don’t have a clear picture of the upcoming wedding as it’s not my own. I don’t know what to expect and therefore I can’t plan anything ahead, I don’t know what’s to be expected as I can’t read anyone’s mind.

My wife also said something very similar to me just today, so I guess I’m not alone with the feeling. Luckily, in less than a weeks time it’s over and I can finally relax. But, before that I do have a ton of things to do.

The interweb sucks

2024-07-08T00:00:00Z

Intro

The internet annoys the hecc out of me. Almost on the daily, I’m bemoaning the endlessly enshittificated^[1] websites and AI slop^[2] shoved at me through every crack and crevice possible. It might just be nostalgia talking, but it feels like things used to be better.

A decade or two ago, we had a good thing going. Forums used to be a thing; you could literally find a bunch of people nerding out on stuff like Final Fantasy lore (R.I.P. FFFin) and rhythm games, or you could just jump in a random IRC channel and make new friends.

People created these tiny little tribes left and right, and the door tended to be wide open. Come on in, be yourself.

Even social media back then felt more authentic. Facebook actually showed you what your twice-removed aunt did over the weekend, and you could listen to the shitty 64kbps mp3 that the weird Midwest emo punk band you follow on MySpace just released.

Simpler times.

When did it go wrong?

When did it go wrong? I don’t know exactly when, but sometime in the past decade, I’ve started to feel increasingly anxious when I’m online.

A big part of it is the feeling of having lost my tribe.

Facebook, Reddit, Discord, and the like slurped every little independent site up. Communities moved to bigger platforms where they didn’t have to worry about hosting, and it was easier to gain new users as you had access a metric tonne of other users already using the service.

Forums closed, IRC channels dried up, and slowly but surely, your buddies didn’t come in online anymore. I felt less inclined to participate myself as well, exacerbating the problem ironically.

Centralization

In itself, I don’t think the centralization wasn’t the main issue. New communities could and would pop up on these bigger platforms.

For me, it felt like all these communities had lost their personality. Flair, charm, je ne sais quoi, whatever you want to call it. They went from being the homeowners to being renters. New rules, new management, and the keys to the kingdom had been handed over.

This also meant that users (like me) could afford to be lazy. Why scour the deep plunges of the interwebs when Reddit had n+1 different subcommunities to peruse?

When you mix lazy users, homogenised communities with profit-seeking big corporations, and engagement optimising algorithms, you get a massive turd.

Websites are built to suck

Anyone who has talked with me for more than two minutes knows that I’m as anti-capitalistic and anti-establishment as they come. Which is why I’m sad when every website I’m visiting is:

riddled with ads,
trying to sell me stuff,
harvesting every tidbit of my existence to sell to someone else.

Usually it’s some unholy amalgamation of all the above.

Case in point, you could amuse or depress yourself with User Inyerface^[3], how-i-experience-web-today^[4] or Cookie Consent Speedrun^[5]

I don’t mind the European Union. I think they mainly aim to do good things. But if we look at GDPR and cookie consent laws, and how these seemingly good ideas have manifested themselves into a huge shitshow in terms of implementation, I can’t help but feel doubly sad.

no human curation 4 u

I respect people who curate stuff. The Librarian type is cool. In every community I’ve been part of, there’s always been that quiet person who squirrels away every bit of useful information into some archive for the greater good.

Another type would be The Tastemaker. People who trawled through copious amounts of content to pick the shiniest gems to share with you. I’ve done my fair bit myself as well, rather successfully, if I might add.

“Fuck that!” said every online media platform, I guess. Why spend time and effort (read: money) curating when they could just surface the SEO spamming sites or those who spend the biggest of bucks to push their unrelated advertised content?

Instead of showing me content I actually want, I’m offered content that either riles me up^[6] or earns them the most money. Whatever the content, I’m not coming out on top; my needs aren’t met.

To make matters even worse, now we have to deal with this lazily produced AI shit, aka. slop. It’s not even human-generated SEO spam, where a human has spent an iota of thought into what and how they should spam. Let’s just remove the human from the production side of things and push slop to the masses.

I am Jack’s triply sad occipital lobe.

Why not remove the human entirely from the equation? Soon, Windows’ Copilot™ AI will browse the internet for me (I’ll have no choice in this) and summarise everything that’s pertinent (what Satya Nadella allows me to know), and ChatGPT will have hallucinated some mind-altering facts I’ll base my whole new life on in a sick game of Chinese whispers. I’ll have learnt nothing; my opinions are decided for me, and my serotonin-starved brains are left begging for more.

Pls Google, can I haz some more cat pictures?^[7] The internet is dead^[8].

Thank dog for the Indieweb

Luckily, there’s still a tiny sliver of hope. There are people working on more independent, isolated, but connected, online tools and websites. People like Adam^[9] are creating their own communities and allowing people some semblance of control over their online presence.

There’s the fediverse^[10] with its’ mainstream alternatives like Mastodon, Pixelfeed, Lemmy, etc. and there are also people like Robb^[11] doing their part in stopping LLMs from slurping up every bit of data from the internet.

There’s people like Jeremy^[12] who are much more adept at sharing their thoughts on complex issues than I am.

And obviously, there’s me. I just want to make silly^[13] things^[14] online. I just hope that that counts for something.

Notes

https://www.ft.com/content/6fb1602d-a08b-4a8c-bac0-047b7d64aba5 ↩︎
https://simonwillison.net/2024/May/8/slop/ ↩︎
https://userinyerface.com ↩︎
https://how-i-experience-web-today.com/detail ↩︎
https://cookieconsentspeed.run ↩︎
https://lens.monash.edu/@politics-society/2022/05/30/1384596/facebook-and-the-unconscionability-of-outrage-algorithms ↩︎
https://www.youtube.com/watch?v=vNxEQdntdFo ↩︎
https://theconversation.com/the-dead-internet-theory-makes-eerie-claims-about-an-ai-run-web-the-truth-is-more-sinister-229609 ↩︎
https://omg.lol ↩︎
https://www.theverge.com/24063290/fediverse-explained-activitypub-social-media-open-protocol ↩︎
https://rknight.me/blog/perplexity-ai-is-lying-about-its-user-agent/ ↩︎
https://adactio.com/journal/21241 ↩︎
https://hevonen.httpster.io ↩︎
https://mainstreamsheep.bandcamp.com ↩︎

Symbol film review

2024-06-26T00:00:00Z

Intro

Hitoshi Matsumoto is a Japanese comedy legend most well known for his work in Gaki no Tsukai^[1] and as the boke^[2] of the comedy duo Downtown. His second film, Symbol, is definitely a weird one to say the least.

After finishing the movie, I shouldn’t have been surprised to learn that not only did Matsumoto star as the main character in the film, he also wrote and directed it himself.

Hitoshi Matsumoto's character, trapped in the white room, waking up for the first time.

Plot

Symbol has two separate storylines that seemingly have very little to do with each other. The film starts out in Mexico, where we follow the day of an middle-aged lucha libre^[3] wrestler called Escargot Man and his family as they prepare for Escargot Man’s upcoming fight.

Escargot Man is giving Tequila Joe the big no-no.

In the other storyline, the main character, simply called The Man, wakes up in a bare, white, room with the walls covered in thousands of little peculiar looking switches.

Pressing one of the switches, the protagonist learns that each of them do a different thing. One switch might give him a pair of chopsticks, another chucks a bonsai-tree at him. Each press results in escalating madness.

A plan starts to formulate.

Without giving too much of the plot away, the storylines do eventually converge in an unexpected fashion.

Production and writing

The scenes in Mexico look quite good production-wise, despite suffering from the yellow and orange colour grading trope. The writing and acting is more based on realism and there’s an understated humor and wit to it. It reminds me a bit of Quentin Dupieux’s Rubber^[4] The milieu in Mexico is run-down and grimy as we follow the family’s anxious preparations for the upcoming fight.

You can count the lines of dialogue with the fingers on your two hands and still have a few to spare, there isn’t a need for lengthy exchanges as the cinematography does most of the talking.

Adriana Fricke as Karen in Symbol.

On the other hand, the scenes with Matsumoto in the white room are almost from an entirely different film. The colors are bright, light and pastel, the mood is almost sterile and clinical as we look at the main character trying to make sense of his surroundings. Almost like studing a lab rat.

The Matsumoto scenes are aided by CGI that isn’t looking too stellar by modern standards but if we consider that the film came out NaN years ago, I think it’s aged just fine. The film is easy on the eye in general.

Matsumoto’s character is very vocal and outspoken compared to his Mexican counterparts, despite being all alone in the room. He reacts loudly to his surroundings and his pleas and cries cannot be taken seriously at all. The delivery of every joke and beat is perfect. There’s just enough—but not too much—pause between the action and reaction and it’s obvious that there’s a comedy legend behind the movie.

I think the pacing of the movie works well. It’s not a super slow burner but it’s not filled to the brim with action either. Both storylines progresses and keep viewer engaged well enough. It’s definitely attempting to out-weird the viewer and much of its’ charm comes from the WTF factor of the events. But that’s how I like my movies anyways.

Final conclusions

Symbol isn’t a film I’d recommend to everyone, It’s definitely made for the acquired taste. On the other hand, if you enjoy the occasional juvenile joke, physical comedy and absurd and surreal films in general, Symbol is an excellent film in its’ genre.

I was thoroughly entertained and glad I ended up watching the movie.

score: 87 / 100

Notes

Team Gaki website with some subbed episodes to watch. ↩︎
In manzai comedy, a traditional Japanese form of stand-up comedy, the “boke” is the role of the funny man who makes foolish or absurd statements and actions, which are then corrected or criticized by the “tsukkomi,” the straight man. ↩︎
Lucha libre wrestlers, also known as luchadores, are Mexican professional wrestlers known for their high-flying maneuvers, colorful masks, and theatrical, acrobatic style of wrestling. ↩︎
Quentin Dupieux’s Rubber movie on IMDb https://www.imdb.com/title/tt1612774/ ↩︎

Casiopea's debut album review

2024-06-21T00:00:00Z

Intro

During the COVID lockdowns, me and the wife got into a habit of playing Scrabble or doing puzzles whilst listening to random albums from YouTube.

I had previously listened quite a bit to some 80s’ cheesy Japanese citypop music, which is why I wasn’t surprised when most of my algorithmic frontpage was mainly that. There was a few channels like Xerf Xpec and Kuma’s Campfire that posted a lot of mixtapes and full albums from artists I’d never hear of before.

That’s where I heard Casiopea the first time. It was a bit cheesy at first but after having a few of their albums in the background while playing Scrabble, I grew into it. Four years later, Casiopea comprises of roughly 90% of the music I listen to. It’s hands down my favourite band.

In an effort to spread the love, I’ll try to write a review of each of their albums. I think it’s only fitting to with their debut album, Casiopea from 1979. If you’ve been on the same side of YouTube as I have, you’ll most likely recognize the iconic album cover with the Lola T290 and March 74S racecars.

About the album

This is Casiopea’s debut album, confusingly also called Casiopea. It was originally released as an LP record in 1979 and later in 1986 as CD as well. Casiopea had already formed back in 1976 and they competed twice in Yamaha’s amateur band contest, EastWest '76 and '77. In 1979 they managed to get signed to Alfa records which ended up being the label they’ve released a majority of their albums on.

Funnily enough, in EastWest '77 one of the judges, Yoshihiro Naruse, would years later end up becoming Casiopea’s main basist.

Originally Casiopea consisted of Issei Noro (guitar), Tetsuo Sakurai (bass), Hidehiko Koike (keys) and Tohru Suzuki (drums) but Koike and Suzuki left the band before the first album and were replaced by Minoru Mukaiya (keys) and Takashi Sasaki (drums) respectively.

This album is also one of the rare albums featuring additional studio band members. In this case, we have brothers Randy and Michael Brecker playing the brass section with David Sanborn.

There’s five main versions of this album. The original 32XA-104 CD and ALR-6017 LP, VRCL-2201/2221 DSD remastered version, 96khz 24bit hi-res FLAC digital version and last year a new alternative mix from 2000 called TOCT-24364, the so-called Millenium edition, was discovered as well.

The source recordings for all versions is the same, but the mixing differs a bit between the albums.

Tracklist

1. Time Limit

Time Limit is the perfect track to get you started on your Casiopea journey. It begins with some simple but groovy drum beats and builds up with some horns until it drops into a jivy bass groove with the brass supporting. We get to enjoy some funky Rhodes solos by Mukaiya.

The guitar tone on Noro’s guitar riffs drows a bit with the faster picking. Mix wise you can hear the age of the album, in both good and bad. Considering that the guitarist Noro is also the band leader, there’s actually very little guitar in the first track.

In the middle section when we get into the second “chorus” we get some solos from the two saxophones and trumpet with the rest of the band offering a driving backing to improvise over. In my opinion the brass stands out a bit too much and I’m really not that keen on saxophones in general, which luckily isn’t a reoccuring instrument in Casiopea’s discography.

Sasaki offers some very interesting synopations with his drum beats and you can hear how technical his playing is with all the little flourishes here and there.

Sakurai’s deep bass tones support the drums beautifully and the riffs are kept interesting throughout the track.

Overall, a great start for the album!

2. Tears Of The Star

Tears Of The Star is a slower track built around some synths and keys playing a forlorn melody. It is followed with some very careful drumming and some steel-stringed acoustic guitar that add some interest.

After this the track returns back to the simple melody from the start with the bass playing the main melody and we have some Rhodes organs in the backing adding little flourishes. This slowly builds into some sad and epic strings as the song crescendoes with some bigger piano chords. After the crescendo we return back to beginning, except on a slightly less somber note.

The song is beautiful and wonderfully moody. Maybe not the easiest Casiopea track to start with but it’ll grown on you after a few listens.

3. Space Road

Space Road is a classic that Casiopea has re-recorded on several of their albums. This might be my favourite song on the whole album as it embodies all the best parts of Casiopea’s later production in such a tight composition.

The whole vibe of the track is very cosmic and otherworldly. The first minute is a build up with faster percussions combined slower drone like keyboard melodies and a moving bass pattern that builds into a beautiful ensemble of sounds when the guitar comes to bind it all together.

The break around 2 minutes just adds intensity to the groove as it attempts to bring it down but then it keeps on going until we reach a short breakdown where Noro gets to bring in an intensive guitar solo. The guitar sound and choice of notes is simply just perfection.

Mukaiya plays some faster keyboard runs that transform into an almost sinister pre-chorus that evolves back into the main section of the song with another great guitar solo that carries through the rest of the song.

Out of every track on this album, I think this is the best song to showcase Sasaki’s technical forté as he plays some incredibly difficult drum patterns that almost make you question your own sense of rhythm. If the rest of the band couldn’t keep up with the technical drums, I’d almost call it overplaying the drums but as such it fits perfectly. Just listen to those hats!

Space Road is simply a beautiful journey from start to finish with some incredibly skilled writing and execution. This might be my first choice as a track to introduce someone to Casiopea.

4. Midnight Rendezvous

Another classic that has been released half a dozen of times. The version of Midnight Rendezvous on this album is still one of my favourites though.

We’re off to a great start with the swinging off-beat drums and bouncing bassline and after a quick build-up Noro introduces his catchy guitar riff that will evoke a very Noir mood. This mood transforms as we reach the chorus and the string section comes in to add some colour to this dark and murky track.

In the mid-section we get a great little blues organ solo from Mukaiya that carries to another great solo by Noro. We return to another beautiful chorus before the song starts looping the verse as it fades into nothingness.

I especially like this album’s version as it’s the only one with the string section in the chorus. Casiopea doesn’t really use strings and in this version the strings elevate the song into a whole new place where the later versions don’t go at all.

5. Far Away

For some reason, this is the least memorable song of the whole album. For a long time I didn’t even remember that it existed.

The riff that’s playing right from the start somehow doesn’t fit the rest of the album perhaps. It has a bit of a RHCP feel to it. The pacing of the song also feels a bit funny and it feels like it doesn’t really know where to go or what the main catch is.

It’s not a bad song by any means, it just kinda stands out from the rest and at the same time, doesn’t stand out at all?

6. Swallow

This song is one of the more fast paced songs with a lot of drive behind it. It starts with some faster paced drums with some insane tom fills and lovely hi-hat work. The guitar plays a catchy slow melody while the bass dances around it with insane precision.

The track never really slows down as the chorus simply builds into a very space invaders type of synth solo while Sakurai hammers that bass of his with way too many strings.

As seems to be tradition, after the keyboard solo, Noro starts his mind bending minute long improvised solo. At 2:58 we also get a fun section where both Noro and Mukaiya plays these runs in perfect sync.

The only respite from this absolutely high energy jam is ironically the drum solo around 3:23 where Sasaki gets to play in absolute silence from the rest of the band.

Swallow is a banger that is filled to the brim with tiny little fills and riffs from every member of the band. Sasaki especially goes absolutely nuts on the drums for the whole duration of the track. For me, this is peak Casiopea.

7. Dream Hill

Dream Hill is one of the slower tracks again. It’s also one of the rare tracks where we have vocals provided by Issei Noro. If you’re not allergic to cheesy early 80s’ Japanese music, you might find this track very bittersweet and beautiful.

It’s a very fitting track before we transition into the last jam on the release.

8. Black Joke

Again, a very iconic Casiopea track. It starts off with a very mysterious arpeggiating guitar that sets the mood perfectly as we transition into a more laidback beat with some funky call-and-response between the guitar and brass sections.

If you’ve heard Casiopea’s Mint Jams album, this track definitely comes very close to the mood and sound of the Mint Jams songs. The whole mood of the track oscillates between mysterious and almost cheery, it keeps you guessing.

Sakurai has some serious bass slaps in this track and I think the moving bassline during the verses sounds absolutely delightful.

This song also hilights how well the band plays together, all the little breaks and flourishes when they all come together just works beautifully.

Towards the end the intro motif repeats into what becomes the ending, a perfect ending for the album.

Final conclusions

Casiopea’s debut album is funny in the sense that it’s not that reflective of where their sound will evolve to over the years but on the other hand, retrospectively you can absolutely see where they came from.

The song writing and performance is simply stellar but the mixing is clearly very dated. I wouldn’t say that it’s bad but it’s also very obviously not a great mix either.

I think as a whole it definitely stands the test of time and it’s also a very approachable album when it comes to fusion jazz music and that makes it an easy starting point to get into Casiopea’s discography. I might be biased, but I do strongly recommend checking the album out. Even if you’re not a fan of jazz, Casiopea is so much more than that!

The album can be found on most streaming platforms these days. Happy listenings!

score: 95 / 100

Summogon

2024-04-15T00:00:00Z

Screenshot from the game

Summogon is the latest game me, Marko and Roni have worked on.

It’s a dark and ominous card puzzle game that we made during last year’s Ludum Dare 55. It’s pretty short and can be played in less than 10 minutes, but most likely the puzzles will take a little while longer to figure out.

To date, this is easily the best ranked game we’ve made. Out of 2194 games, Summogon had an overall rank of 324th, but our audio was ranked 8th! That means in terms of audio, we were in the top 0.32% which is absolutely insane.

It was my first time writing any non-rhythmic music. The backing track has three different variations that loop depending on the progress in game, growing more sinister as the player gets towards the end.

I recommend playing the game to really get in the mood of the soundscape, but if you’re impatient and just want to hear the music, the main track is also up on my SoundCloud.

Marko and Roni also made Flicker of Lumina between Summogon and Kantelemania, which is worth mentioning as it’s a very good game!

Webfonts and layout shifting

2024-01-29T00:00:00Z

In this article, I’ll outline why and how I matched my fallback font’s dimensions with my webfont’s settings to diminish the layout shifting.

If you don’t want to read my ramblings, you should skip to the TL;DR

Preamble

In my quest for the coveted “four-hundos”, aka. a perfect Lighthouse score, I’ve always ended up studying and fixing arcane issues I’ve never encountered before. This time around, I scored an abominable 95/100 for performance. The issue was the teeny-tiny amount of CLS, cumulative layout shift.

In my case, the layout shift was caused by my webfont, Vollkorn. When using webfonts, fonts that are not included in the user’s OS or device by default, you’ll encounter what’s called either FOUT or FOIT depending on how font-display is configured.

FOUT & FOIT

FOUT stands for Flash of Unstyled Text and FOIT means Flash of Invisible Text. So, either the user is briefly show the content in a fallback font the user has or the text will be entirely invisible until the webfont has loaded. Neither is ideal, but with FOUT, the time to interactive is shorter, which is always better.

If neither temporarily unstyled or invisible text are viable options, the third option would be use font-display optional. This would mean that the browser will use the font only if the user already has the font when drawing the view. So, if the user has the font installed or cached, it’ll get used and otherwise it’ll just default to the fallback font. During the first page load, users will see the text in the fallback font and when they reload or navigate to another page on the site, the webfont will have downloaded and that will get used instead of the fallback.

I’m not a fan of optional, I would rather just use the system font stack instead of having the first pageload in a completely different font from the rest of the pages.

Not all fonts are equal

I had set Vollkorn as the main body typeface and serif as the fallback with the font-display swap option. It should default to Times New Roman on most devices and after the browser has downloaded Vollkorn, it’ll replace Times New Roman with Vollkorn. Users on my page would have a brief moment of FOUT.

My issue specifically stemmed from the fact that 16pt in one font doesn’t equal 16pt in another font. Space between letters and words in two fonts can be different, letters can have a different width as well as the ascenders and descenders can vary in size. A whole lot of variables.

Vollkorn in black and Times New Roman in red overlaid

Before Vollkorn is loaded and displayed, the page is laid out with Times New Roman and they reserve a different amount of space on the screen. One font might occupy two lines whereas the other font could fit in just one. When swapping between the fonts, the content jumps.

We need to match our webfont and fallback font so that they occupy roughly the same space on the page.

The solution

After sifting through the web.dev articles on CLS, Adam helpfully directed me to this article on Smashing Magazine by Barry Pollard. The article is more in-depth than anything I could ever write, it’s definitely worth a read!

In the article, Barry links to two resources that eventually helped me solve my issues! The first one is Font style matcher by Monica Dinculescu and Automatic font matching by Malte Ubl.

If the webfont in question is on Google Fonts, Malte’s tool will automatically give you a fallback font-face CSS rule with the size-adjust, ascent-override and fallback font set.

In the case that the font isn’t available on Google Fonts, Monica’s tool comes in handy as it’s relatively easy to eyeball the dimensions with it.

Vollkorn on the left, Times New Roman with the corrections on the right

As illustrated in the picture above, it’s not perfect even with the corrections applied. We can see that the second paragraph isn’t perfectly aligned and with longer bouts of text, the content will still jump. It’s still infinitely better than the alternative of not matching the fonts.

My font configuration looks roughly like this

@font-face {
  font-family: "Vollkorn";
  src: url("/fonts/vollkorn.woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "serif-fallback";
  size-adjust: 108.28%;
  ascent-override: 103%;
  src: local("Times New Roman");
}

body {
  font-family: "Vollkorn", "serif-fallback";
}

With these fixes, we have a solid 100 for performance on Lighthouse!

TL;DR

Use Font style matcher or Automatic font matching to match your fallback font’s sizing settings with your webfont. Create a font-face rule for the fallback with the settings applied and set your fallback font as an explicit fallback for your webfont.

Finishing words

Fonts are hard. You can always dig deeper and learn new things about them. At the same time, that’s also why it’s so rewarding to spend a day or two to squash out the bugs and squeeze out every last bit of performance. Earlier, I wrote an article on subsetting fonts, which I recommend checking out!

If this post resonated with you or helped you out in any fashion, please tell me on Mastodon! Thank you so much for reading this far!

Temporarily Abled

2024-01-04T00:00:00Z

Yesterday I was playing badminton with my friend. I won 4 out of 5 games. I might be fat, but overall I’m not in a terrible shape as I’ve been going to the gym and tried to work on my health lately.

Today at about 17:10 I felt a jolt in my back.

Despite my past background in sports, my recent-ish fitness craze and attempts at building a healthy lifestyle, I too am only temporarily abled. Today was a grim reminder of this.

For about ten minutes, I tried to stretch my back. Slowly, my posture sank and I couldn’t stand up straight. I shouted for my wife, but she couldn’t hear me. I had to call her on my phone, despite her being in the next room. I couldn’t walk, I had to lean on the bed with both hands.

For the next 20 minutes, we tried to get me into a chair, into the bed, on to the floor, anywhere really. I couldn’t move. Every tiny rotation on my spine felt like I being stabbed. For 20 minutes, I was stuck leaning on the bed.

Yesterday, I was bouncing around the court, today I couldn’t sit without swearing and crying in pain. Eventually, after pushing through the pain, I managed to get in the chair. Sitting was painful as well, my spine compressed on itself and no position I was in gave any relief. The EMT’s arrived just after 18:05 and I got some temporary relief from a muscle relaxant shot.

This isn’t the first time I’ve had issues with what appears to be sciatica, but it was definitely the first time I’ve been fully incapacitated by it. I’m only 32 years old, in my mind I’m still young. I exercise and try to lead a healthy and active lifestyle. In reality I’m overweight, I smoke and I’m too sedentary.

Depending on the statistics and definitions, roughly 1 in 4 lives with some type of disability. Unless you die an instant death in a freak accident, you will with a 100% certainty be disabled at some point in your life. I know it’s cheesy, but one shouldn’t take their health and a functioning body for granted.

I’m not scared of death, but I am scared shitless of living in pain and disabled. Maybe the fear will ease as I get older, I do not know. For now, the only thing I can do, is to work harder on maintaining my health. When I do start showing my age and the eventual health issues start to creep up, I want to minimize any ill effects of my own doing.

Currently my shitty lifestyle decisions outweighs the good decisions manyfold. Lifting heavy weights for a couple of hours a week doesn’t offset sitting at a desk for 14 hours a day, doing the occasional leg presses doesn’t compensate for never going on a jog.

I don’t plan on ending up stuck with a bad back because I felt lazy or didn’t want to do something mildly uncomfortable. Fuck that.

In with the new, out with the old

2024-01-01T00:00:00Z

Time for a site refresh

After three and a half years exactly, I think it was time to rewrite my site. I know, I know, it’s basically a meme at this point, webdevs rewriting their personal site and never updating it after that. But, my skills, needs and wants have changed over time and I felt like my site was keeping me from creating content and I felt it was justified in recreating it.

This is a pretty long blog post, you’ve been warned!

The previous site

The previous version of this site had been based on a fork of Mike Riethmuller’s Supermaya Eleventy starter project. Eleventy was still pretty new at the time and there weren’t a ton of starter projects available. Supermaya kinda hit the sweet spot for me, being just enough fleshed out to get me going, but at the same it didn’t get too much in the way, which is why I originally picked it.

Supermaya was by no means perfect. I found a handful of layout issues, some markup errors with regards to accessibility and even a few bugs related to images. That’s all to be expected. Supermaya also shipped with integrations for a CMS called KeystoneJS, which I effectively tore out. I also removed stuff related to inlining CSS above the fold as headless browsers don’t tend to play nicely with WSL and I wanted to simplify the site so that it’d be easier to get an actual understanding of how it all works. After a couple of days, I had my site up and running and over the next week, I kept optimizing and fixing things.

After some point, Mike stopped supporting and updating the site and my pull requests didn’t get merged. As it’s FOSS, I have no expectations of the sorts anyways. I personally didn’t need anything from him either but as a starter template, I’d consider it archived and maybe not the best way forward. Eventually the site broke with the latest Node.js LTS version and upgrading it ended up really hacky. I did finally manage to migrate it to Eleventy 2.0 and Node.js 18, but after all my fixes and edits, the code started to be cumbersome to maintain.

The biggest issue for me personally though was the fact that Mike has some very specific way of writing CSS layouts and I didn’t fully ever understand it. There was a lot of really elegant solutions and you could easily tell that Mike’s way of working was miles ahead of what I’m personally capable of. My code isn’t really maintainable or future proof as I’m kinda mixing two paradigms. So, I decided to start anew.

Experimentations

Before rebuilding my site, I personally went through some life events. We got married with my wife just over a year ago and I needed to write up a photo gallery website for our wedding photos. I built the site from scratch with Eleventy and bash and made a starter project out of it, which is available here! This was actually a really fun and teaching project, although generating json with bash the way I did it is literally the silliest way and shouldn’t be replicated.

I also needed to build a couple of other sites and found an Eleventy starter by Rong Ying, which I then forked into another starter project that can be found here. This was my first time experimenting with Tailwind and while I don’t love it, it does solve a lot of issues I had with creating layouts and I’ve opted to use it in my other projects since. I managed to find a handful of bugs in Rong Ying’s starter and I migrated the original project from Liquid to Nunjucks. I spent a good while on re-learning about templating, pagination and Liquid/NJK filters and functions.

Time for a redo

As I’ve said earlier, my previous websites had some issues that I wanted to avoid this time around. I’m under no illusion that this site would be the last one I’d ever make, but I would like for the content to be portable more easily and manageable for a longer while. I’m planning on generating, storing and displaying multiple kinds of data within one website and utilize this data in multiple ways.

Things I’m trying to avoid are

baking content and data into the markup code, these should be kept separate
inheriting too much code I don’t fully understand myself.

Originally, I planned on writing my new site from scratch with Eleventy and Tailwind and stealing solutions from different templates and projects to solve each individual function. After too much mulling about and planning without actually doing anything, I came across Lene Saile’s Eleventy Excellent starter project and just simply went with that as a base.

Lene’s starter does a lot of very smart things, which at times make my life a lot easier and solve issues I couldn’t figure out myself and occasionally bites myself in the ass. After starting to work with the starter template I was contemplating a few times if I should abandon it and go with my original plan, but I decided to stick it out. And I’m glad I did.

The starter project is very well structured and every feature and config is implemented in a way that’s quite easy to just replace or rip out entirely if I would choose to. Most of the “black magic” isn’t done on the layout end of things and it comes with very little CSS so there isn’t any major paradigms I need to grok, so I feel this is a pretty safe base to start building on.

As always, there’s a handful of bugs to fix, most of which are of my own making. I think that’s okay though. I’m not aiming for perfection and I don’t mind the site being published in a half-finished state as long as it’s usable. I’d rather just keep on occasionally working on it and at least have something presentable released.

For the future

I don’t have a publicly documented laundry list of things I’ve planned for the site, I’m just going to go with the flow and work on whatever inspires me. I’m trying to track the evolution of the site on the Changelog page. My main focus for now is simply to start writing more.

Ideally, I’d get webmentions and comments integrated soon-ish, simply to encourage interaction and possibly garner some kind of readership. Despite working in marketing, I don’t really want to push my content though, that’s not within the raison d’etre so I can’t say I’m too bothered. I would like to indiewebify my online presence a bit more, but it’s still a world I don’t fully understand. That’s the way forward though in my opinion.

If you, dear reader, encounter some weird bugs or simply want to say ‘hi’, you should send me a message on Mastodon :) Have a great start of the year, cheers!

Subset fonts with Python 3 and FontTools

2023-05-09T00:00:00Z

TL;DR

pip3 install fonttools brotli

pyftsubset YOURFONT.woff2 --output-file=YOURFONT-subset.woff2 --text-file=characters.txt --flavor=woff2 --layout-features=kern

Forewords

I’m an avid fan of the static site generator Eleventy. In fact, this site was built with it (and the lovely starter project Supermaya by Mike Riethmuller). While trying to get my site to raise in the ranks on the Eleventy Leaderboards, I did my darnedest to optimize every aspect of the site. One of the things I did was to subset the fonts I use on the site. In this brief guide, I’ll share why and how I went about it.

What is font subsetting and why should I care?

Isn’t it just irritating when pages take ages to load? Even more annoying is when a page seems to have loaded but the proper fonts come in with a delay and the text jumps around. This is because the browser has to download the font files before it can render the text properly. Larger fonts take a longer time to download than a small font, even if the larger font is only used for a few characters.

Subsetting a font means removing all of the extra symbols and characters from the font file that you don’t need and generating a new, subsetted font file with just the necessary characters. This new font file is much smaller than the original and will download faster. If you want to take people with slower internet speeds into consideration or you want to make your site more green, optimising your site’s overall data footprint is undoubtedly beneficial.

What are my options?

There’s mainly two proper ways of subsetting a font. The first one would be to use an online tool like Font Squirrel’s Webfont Generator. It’s a brilliant tool, but it doesn’t support woff2 fonts, for instance, and doesn’t offer much additional assistance.

Alternatively, you could use a command line tool such as Glyphhanger by Zach Leatherman or FontTools directly. Glyphhanger uses FontTools under the hood and provides some fun extra features like the ability to scan web pages for used characters and to gather all the used characters and symbols automatically.

Glyphhanger is a great tool, but it’s a bit of a hassle to install and use. I’ve had some issues with it in the past, so I personally prefer to use FontTools directly. Glyphhanger uses a Chromium webdriver to scan web pages for used characters and I’ve had trouble with running webdriver based tools on WSL, hence me going the FontTools route. Less dependencies, less things to break.

If you’re on MacOS and want to have a go with Glyphhanger, I can strongly recommend Sara Soueidan’s article How I set up Glyphhanger on MacOS for optimizing and converting font files for the Web. It’s a great article even if you’re not a Mac user.

I’m sold! Let’s do it!

You’ll need two things—A terminal emulator and Python3.

1. Make sure you have python3 installed

If you’re using a Mac or Linux, you can open your default terminal and type which python3 and if you see something like /usr/bin/python3 or similar, you’re good to go. If not, go and install it.

If you’re on Windows, you’ll most likely need to install Python3. You can download it from python.org. Make sure to check the box that says “Add Python 3.x to PATH” during the installation.

Now, you’re ready to install FontTools.

2. Installing FontTools and Brotli

You can install FontTools by opening your terminal and typing pip3 install fonttools brotli. If you get an error message, you might need to install pip3 or use pip instead. If you’re on Windows, you might need to use py -m pip install fonttools brotli. Brotli is required when processing woff2 files, FontTools will throw an error if you don’t have it installed.

If you’re using Ubuntu on WSL, you might also have to install pycryptodomex, websockets, mutagen and zopfli with pip3 install pycryptodomex websockets mutagen zopfli

3. Create a file with the characters you want to keep

Create a basic .txt file and inside the file, list all the characters you’re going to use on your website. My list of characters looks like this:

1234567890!"#%&/()=?``´@£$€{[]}\~^'*-–—_.,:;<>|’½§qwertyuiopåasdfghjklöäzxcvbnmæøQWERTYUIOPÅASDFGHJKLÖÄZXCVBNMÆØéáíçñëèāÉÁÍÇÑËÈĀ

Save the file as characters.txt in the same folder as your font files.

Notice, how you have to add both the lowercase and the uppercase variants of each letter. Any characters you don’t list here will be removed from the font file, so try to be as thorough as possible.

4. Figure out which features you want to keep

Your font most likely comes with a kerning table, which is a table that tells the browser how much space to put between each character. Most fonts come with a bunch of other features you might or might not want to keep. I’m using Inter as an example and it comes with a whopping 35 OpenType features like symbols for cardinal numbers, fraction numbers etc. I don’t need any of those, but you might. So, it’s a good idea to check which options are available for your font. I personally prefer to use FontDrop! to inspect the font before I start subsetting it.

You can also use the command pyftsubset YOURFONT.woff2 --layout-features=? to list all the available features.

Make note of the features you want to keep and write them up somewhere. I’m going to keep only the kerning so I’m just going to write kern.

5. Subset the font

You have all the tools installed, your font in an woff2, otf or ttf format and a list of characters you want to keep. Now, it’s time to subset the font. Open your terminal and navigate to the folder where your font files are. Then, run the following command:

pyftsubset YOURFONT.woff2 --output-file=YOURFONT-subset.woff2 --text-file=characters.txt --flavor=woff2 --layout-features=kern

Remember to replace YOURFONT with the actual name of the font you’re using and replace kern with the features you want to keep. If you want to keep multiple features, separate them with a comma like this: --layout-features=kern,liga. If you simply want to keep all of the layout features, you can also just type --layout-features=* instead.

Afterwords

There you have it. Personally, I managed to reduce my font load from 472kb to 46kb, which reduced my frontpage’s loadsize by a whopping 84.8%.

If you want to learn more about FontTools, you can check out the official documentation. If you want to learn more about subsetting fonts, I can recommend this article by Zach Leatherman.

Thanks for reading! If you enjoyed this tutorial, holler at me on Mastodon @sami@social.lol or you can shoot me an email firstname@websitename.

Take care, stay happy and keep being brilliant!

Kantelemania

2023-02-05T00:00:00Z

Screenshot from the game

After doing a few Ludum Dare games with the gang, we thought we’d try out Global Game Jam for a change.

Having done [X-ED OUT] earlier, we wanted to do another game that gets increasingly difficult with time and that’s basically a “play until you fail” type of survival game.

We thought about the theme and diversifiers for a while, and came up with a Kalevala inspired rhythm game.

The actual gameplay is very simple—hit the corresponding arrow or WASD key according to the arrows on the screen. Missing an arrow or pressing the wrong one will drop the hype meter. When the hype meter drops to zero, it’s game over.

[X-ED OUT]

2022-10-03T00:00:00Z

[X-ED OUT] is the second Ludum Dare game we made with Marko and Roni. This time, my wife also joined us!

Screenshot from the game

The game is quite simple. Turn around in your turret and aim at aliens. Clearing a wave of enemies lets you pick up XP from the ground, leveling up the turret. Rinse and repeat until defeat.

We had a lot of fun making it and the game was also quite well received! Out of 2420 games, we had an overall placement of 185th, fun was ranked 73rd and audio was 68th. It was the first time our gang had broken into the top 100 in any category.

It’s really a quite fun game! Shoot some aliens and try to survive, I dare you!

Hello there

2022-09-04T00:00:00Z

So, I’m finally back after a break. As I have ADHD, I tend to drop things and hyperfocus on only certain aspects in my life. I’ve always been like this but it took me a long while to realize that it’s even happening.

If our home needs cleaning (it always does), I might spend a few days just doing the laundry without touching any of our dishes. If our dishes needs doing, I’ll wash them over a couple of days but not take out the trash. The same pattern happens with almost everything I do and it’s not great really.

For the past few weeks I’ve been bogged down with tiny tasks at work. Time-wise, they don’t amount to that much but just the mere existence of these tasks cause me the inability to further any other tasks in my life.

We had our wedding last month, which means I haven’t really gotten much else done this whole past year haha. Apart from that, I’ve just enjoyed some quiet time, playing video games, making a tiny bit of music and working on some other smaller side projects. One of which is the wedding photos website, which I’m rather proud of actually!

Now that I’m back in working mode, I’ll try to keep my head above the water and work on my website amongst other things and build that into more of a routine. Maybe it’ll help?

Anyways, this was just a quick check-in. I’m still alive and well. Life is good as Vesku would always say.

New site, who dis?

2020-06-07T00:00:00Z

I’ve noticed during the past few years that I seem to follow a certain pattern. When I’m looking for work, I’ll set up a new personal website / online portfolio and work on it for a few weeks. Then I get hired, the site gets neglected and I always kinda wait for the inspiration to write more. And nobody came.
During the last five-six years, I’ve abandoned at least the same amount of personal websites after the first few weeks and left them in various states of disarray.

There has also been a lot of talk about how walled gardens and social media giants are rapidly killing off personal websites. Why go through the trouble to run a personal website, when you can have a personal Facebook page and promptly be dropped off by the algorithm faster than Google kills a product? Why don’t you post your articles on Medium and get them paywalled. How about posting your thoughts on Reddit or Twitter and get moderated or attacked by an angry mob to whom you cannot explain your inoffensive joke on a satisfactory level within the 280 character limit and get publicly lynched and ruined? Yeah, uh. It’s a shitshow these days.

I’ve always agreed on some level that social media is most likely not very healthy for the human psyche and the way they also shape our societal cultures feels very unwelcome to me. Reddit and Twitter for example have been great breeding grounds for newly accepted publicly open racism as you can hide behind an anonymous moniker. Despite that, I’ve been on (and still am) on most commonly used social media platforms up until recently.

I stopped using Reddit for a few years after finding it very toxic and a great waste of my time. Only just recently did I join back again and that’s only to moderate a music production subreddit that I’ve run with a few friends for some years, that’ll be the extent of my participation there. On Facebook on the other hand, I’ve only kept my account on the off-chance I need to get in touch with people I can’t message anywhere else.

All of this dissatisfaction is amplified by the fact that, while I’m quite open and provide basically every detail of my life freely, I do not want my information to be used for some $BIG_CORP9000’s gain and profit. I don’t want to be spied on, as I hate the strategies the current online businesses and product startups have adopted as their path to profitability. Farming and selling user data to create extremely accurate predictive models of human behaviour. I hate the future these types of tools are indicative of.

Then came Google with their AMP project. My personal and literal anti-Christ, were I a man of the cloth. Google wants to take all the good things about the internet, like decentralization, net neutrality, fair discovery and the possibility to create crazy-ass personal websites? AMP was the last straw for me.

As there has been a few threads on Hacker News about taking ownership of your own content, I finally decided to take the plunge and dedicate myself to write on my own site. Maybe there’s still hope with the rise of indie web mentality, the resurrection of RSS feeds and a general welcome of the good ol’ hacker ethos of showing a huge middle finger to everyone who tells us to get back in line.

The past few years my social media usage has mostly been observing others and less about partaking in it myself. I feel that social media is very ephemeral in nature and doesn’t encourage longer write-ups that require more thought and deliver artefacts of great consideration and personal insight. My thoughts have more value, at least to me, than a random small social commentary or joke doomed to be forever lost in the tides of time.

I’ve set up a RSS Feed and welcome anyone to subscribe, if my innermost thoughts are of interest to you. This will be the dedicated central hub for creations, be it artistic or intrinsic in nature, of my personal handwork.

I’ll open up on the technical aspects on how I’ve built this bastion of mine on a later date, you’ll just have to subscribe or check back on a later date if you want to read about it ;)

CueBit

2020-04-23T00:00:00Z

Screenshot from the game

CueBit is my first solo game ever. I made it as the final project for my university programming project.

It’s a simple pool game with some decent enough physics, custom sound design and retro graphics. It’s not the prettiest, most featureful pool game, but it works relatively well! It’s built with C# and a fork of MonoGame called Jypeli, maintained by the University of Jyväskylä.

For the graphics —they’re stunning, I know—I built Aseprite from the source code and the audio was made with my trusty copy of FL Studio.

Building it for Windows in this day and age was a bit of a chore, but I got it up and running. I managed to port it to the latest .Net runtime and latest version of Jypeli. I also added some quality of life updates to the messaging system. The comments and code is mainly in Finnish so it might not be the clearest project, but I’ll try to translate it, it’s only about 800 LOC in total.

Anyways, feel free to grab the release from the GitHub down below and give the game a go!

I, Love, Robot

2018-04-23T00:00:00Z

Screenshot from the game

I, Love, Robot was the first of many games I got to make with my old friend Marko and his university classmate Roni.

This game is all about helping robots date. You, as a system administrator, have to figure out which kind of messages each robot is partial to and zap any unseemly dad jokes or boring anecdotes about sports etc.

It’s a fun little game jam game, You can play it in the browser even!

Embracing music genres

2015-06-22T00:00:00Z

Lately, I’ve seen so many rants about “why do you need to categorize music” and “genres don’t matter”. And to be honest, you don’t need to, and they don’t matter.

But they help. And I’ll tell you why.

Have you ever heard a song that is simply amazing, unlike anything you’ve experienced before? It resonates with you, and you just have to keep listening to it on repeat. Wouldn’t it be incredible to find more music that excites you in the same way? I know I’d appreciate it.

Here’s where it gets tricky. People often see genres as a way to pigeonhole songs into separate bins. They try to assign each song to a specific genre, while in reality, it doesn’t work that way. The way I see it, all songs take influences from various styles and tracks. Unless you’re the creator of something entirely new that sets the benchmark for a wholly new genre, you most likely combined a few genres and created some fusion music that may or may not be original.

Genres should be treated as labels. Combine the labels, and you get a genre that might represent the style. Instead of saying,

“No, this isn’t psytrance; this is twilight,”

you might say,

“Yeah, I think this psytrance has some strong night psy and full-on influences, so I guess this falls under twilight.”

I personally find this useful when trying to describe music to other people. Especially in the creative business, being able to use your words to recreate an experience from another medium is crucial. You can’t usually sell work just on its merits; you need to explain why it’s exceptional. If you can’t, you don’t understand it well enough yourself.

The two biggest problems I see with genres are that they evolve and get misused. Genre names get misused partly because the definition of a genre might change over time, and people try to ride the mainstream bandwagon, misusing the genres on purpose.

Take Beatport’s House category, for example. Half of the tunes in the top list aren’t even close to house as a genre. Instead, they use it as a catch-all term for anything with a 4x4 beat. If I were to look for music that genuinely falls under the house category, like Jacking House, Disco House, or French House, I’d most likely find zero tracks. However, if I wanted big room EDM-influenced tracks or some future music with a 4x4 beat, that would be labeled as house.

This is just one example of misuse. The same happens for techno—a genre you’ve probably heard a billion times. But have you ever actually heard a real techno tune? No, DJ Mangoo’s Eurodancer doesn’t count. This misunderstanding is partially because people who look at genres from the outside don’t know enough about the styles to assess them appropriately. It’s similar to when your mom calls all game consoles Nintendos, right?

Another issue with categorization is how styles evolve. Deep house ten years ago meant something entirely different from what it means today. That’s because people heard “house” (aka big room stuff) and, when they created more relaxed and melodic tracks with deeper basslines, labeled it as deep house. They used their previously false knowledge to create new false genres, which furthered the confusion.

It doesn’t help that this mostly happens in more mainstream genres, causing the false names to gain momentum and the adoption of these genre names to become more popular. Thus, it never stops.

This doesn’t mean that genres are inherently bad. We should use them as tags, and analyze the music we like, trying to pinpoint what separates and connects them. This helps us explore and discover new and exciting music, while making conversations about music and its various styles more descriptive and meaningful. Embracing genres as a tool for understanding and communication can open up a world of possibilities for music lovers everywhere.

Don't waste your money on preground coffee

2015-06-09T00:00:00Z

OK. Coffee is pretty popular here in Finland. It’s actually so popular that Finland is ranked either as the first or second in terms of coffee consumption per capita depending on which stats you look at.

We drink coffee, we depend on it. And as always these days, hipsters want to resurrect everything that is a niche or different. Beer microbreweries, vinyl records and beards, you name it. The same happened to coffee. We’ve seen a great spurt of new independent microroasteries appearing left and right, roasting expensive speciality coffee.

And that’s great! It means I don’t have to go out on my way to get a good cup of joe around here these days. But there are some people who don’t understand the concept of quality coffee. People who take their Pumpkin Spice with a dozen pumps of syrup or people who pre-grind their coffee at the store.

I think it’s perfectly acceptable to buy the “regular” coffee from the grocery store, pay some 8€ per kilogram or so and enjoy that. I do that too. Hell, I’d go broke if I’d only drink speciality coffee. I’m not an eliltist, if you enjoy your coffee, it’s good coffee.

But what I DON’T get, are people who buy speciality coffee for a premium price (40€/kg or more) and grind it in the store. Ok, if you plan on cycling home in 10 minutes and prepare all the coffee you just bought at once, it’d be okay. But if you end up with beans you grinded more than half an hour ago, you fucked up.

‘But it was just roasted yesterday’

No, you fucked up. I would rather drink coffee that was roasted a year ago but grinded just before brewing than letting my freshly roasted beans get stale. Why would you pay 5x the price for coffee you’re gonna let go bad? Stick with your Keurig or capsule coffees, you’ll get your moneys worth.

Less is lost with whole roasted beans than grinded beans. The difference is huge. I can easily drink a cup that was roasted several months ago and stored in an airtight jar and say that it’s delicious. Not so much for that super expensive Geisha pregrounded coffee that costed an arm and a leg.

If you truly want to enjoy good coffee at home, you NEED to invest in a grinder. No, your smoothie blender isn’t good enough nor is that crappy piece of an excuse coffee grinder with metal blades. Get any burr grinder, like the Hario Minimill you can snatch for $22. It’ll beat your $100 electric grinder any day.

If you’re not grinding your expensive beans yourself just before brewing, you’re either dumb, under false assumption that it’s okay or just generally okay with throwing your money in /dev/null. Stop it.

Fastest MEAN stack install on Ubuntu

2015-06-07T00:00:00Z

Fastest MEAN Stack Install on Ubuntu

This article is from 11 years ago, so it’s likely not to work or be the recommended method of achieving the desired end result.

If you’re looking for a server stack that’s more JavaScript-friendly than your everyday LAMP stack, MEAN (MongoDB, Express.js, AngularJS, and Node.js) is a great option to consider. This stack is mostly written in JS and integrates nicely with modern JavaScript tools like Grunt, making it a natural choice for web developers who want to bring the backend closer to the frontend.

The best part? Installing MEAN is surprisingly easy, even for command line noobs like me. Here’s how to set it up in just a few minutes.

Step 1: Create your project directory and download Node.js.

First, you’ll need to create a directory for your project. You can do this by running the following command:

mkdir myproject && cd myproject

Next, you need to download Node.js and npm. You can do this by running the following command:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Nodesource’s Node is more up to speed than the default package from apt-get.

Node.js is used to run JavaScript on the serverside, while npm is the package manager for Node.js applications, scripts, and tools. To install the necessary dependencies locally to the project, you can create a package.json file by running the following command:

npm init -y

This will create a package.json file in the project directory with some default values. You can then install the required packages by running the following command:

Step 2: Install MongoDB

Next, you’ll need to install MongoDB, which is the database for your project. You can do this by running the following command:

apt-get install mongodb

MongoDB is a NoSQL database, which means it handles certain tasks better than other databases, like MySQL. Depending on the project, you might want to swap this out for some other DB system. One nice feature of MongoDB is that the database files are formatted pretty much like JSON, which can be handy.

Step 3: Install Yeoman

You’ll need Yeoman to generate your project. Yeoman is a scaffolding tool that helps you get started with new projects by generating boilerplate code, installing dependencies, and more. You can download Yeoman through npm by running the following command:

npm install -g yo

The “-g” flag is for a global install of the tool. Once you’ve installed Yeoman, you can install the MEAN.JS generator by running the following command:

npm install -g generator-meanjs

Step 4: Generate Your Project

Now that you have all the necessary tools installed, you can generate your MEAN.JS project by running the following command:

yo meanjs

The Yeoman generator will ask you a few questions about your app. Fill in the info (or just hit enter), and once the installer is done, run the following command to start your MEAN server:

grunt

And that’s it! Your brand new MEAN server should now be visible on either http://localhost:3000 or http://YOUR-IP:3000. Enjoy!

Stranded in Jyväskylä

2015-02-26T00:00:00Z

Screenshot from the game

Stranded in Jyväskylä is a point-and-click set in the city of Jyväskylä, Finland.

We made this during the 2015 Global Game Jam and I’ll be the first to admit that it was a disaster.

There’s roughly five minutes of gameplay in total and it’s not very engaging. I only worked on the music so I can’t really say anything other than we didn’t really know what kinda game we were doing and all of the time just went into… something?

The game is up on Github if you’re so inclined. I wouldn’t be.

Parallax

2015-02-18T00:00:00Z

During my studies at the university of applied sciences, I completed an elective minor in video game production worth 19 ECTS study credits or roughly 500 hours. A majority of the time was spent working as teams producing a game.

Paradogs logo featuring a snazzy doggo with a parachute

Our team was called Paradogs and the game is called Parallax. The Paradogs team consisted of two programmers, a graphics artist, a game designer and myself. I was in charge of project management, communications, sound design and music.

We had a website, marketing material and some cool email addresses like sami@parado.gs

The intro features some bleak cityscapes

Parallax is a platformer game with a creatively stylized main character (a white box) that you have to navigate through a myriad of traps and precision requiring rooms. Although there isn’t a whole ton of content, we’re very proud of this little demo we made.

There’s a short gameplay video up on YouTube showing a bit of the first level.

We spent the last night before ending the course building our whole presentation inside the actual game. Instead of doing a boring old PowerPoint post-mortem of the project, we had an interactive presentation/game hybrid. No sleeps were had, but it was worth it as we scored full marks with our game.

I just recently dug up the source code and lo and behold, it still compiles with Unity 4.7.2! So, I put the code up on GitHub with a Windows build as well.

If you do happen to check it out, I’d love to hear what you think of it!

Snakes etc. On A Plain

2014-01-24T00:00:00Z

Screenshot from the game

Snakes etc. On A Plain is the second game jam game I’ve been a part of building and it’s also possibly one of the most fun ones!

The game is a local co-op platformer where each player controls an animal character while being able to swap which animal the other player is playing. Each animal has a different movement mechanic and all of them are required to clear different parts of the levels.

The game is fun, fast paced and chaotic.

It’s built with Python 2.7, pyglet 1.2 and py2exe. I also set up a Github action that can build a Windows executable on each tagged release. Mac and Linux builds should be fairly straightforward to build, I included some of the Python libraries in the Git repo so you can use pip to install them.

Pandan Puuhapeli

2013-04-24T00:00:00Z

Screenshot from the game

Pandan Puuhapeli (Panda’s activity game) was the second year group project I did during my studies at the University of applied sciences.

The game’s audience is roughly first graders (7 ish years of age) and it consists of a series of educational mini games. It’s made with Flash and ActionScript 2.

For a long time after finishing the project, I wasn’t really happy with the end result. The team worked quite well together, but we struggled to come up with any good ideas to go on. The idea of an educational game for kids was kinda a safe option that nobody really felt that passionate about.

12 years later—has it really been that long?—, I’m actually quite proud of it. It’s a solid game that actually looks and sounds better than a lot of actually publicly funded edutainment games made around that time. I could definitely see the game being played on some iPad in a dentist’s waiting room.

The game is entirely in Finnish, I don’t recommend it unless you’re somewhat fluent in the language. It also needs Newgrounds’ flash emulator or something similar, Ruffle.rs doesn’t emulate it properly.

Student Life Simulator

2013-02-19T00:00:00Z

We made Student Life Simulator during my first game jam ever, way back in 2013.

I didn’t know anybody there and had next to zero gamedev experience, but I’d already worked with music and audio for a few years so I got teamed up with some people needing a sound and game designer.

After some brainstorming and sketching the first evening, we had a solid idea locked in and started working. The end result was chaotic. In a good way.

Can you keep up with the hectic student life?

The goal of Student Life Simulator is to not die. Simple enough, just keep your heart rate under 200 and you’re golden.

Oh and don’t forget to cook food, take out the trash, do the dishes, fill out benefit applications, answer the door and keep yourself intoxicated enough to not hate life. Failing at any of these tasks will raise your heart rate faster than eating a metric ton of salmiakki will.

In short, you have to play six simultaneous minigames for as long as possible. It’s quite fun! The code and release version is up on GitHub!