Space Haven is a RimWorld inspired spaceship colony sim, you can find it on steam here. While the main goal is to explore the space and gather ressources, trading is also a valuable feature in the game to progress the game.

With Space Haven Manager, I built a small webapp that allows you to manage trading prices. It turns out to be helpful to estimate costs for a new spaceship, for example, or to just get a feeling how good a deal from a trader actually is.

From a technical perspective, AlpineJS is used as a thin layer around events and state management. For persistance, I'm using the Local Storage API. Testing is done via playwright and some automatic accessibility checks are done via axe-core. The tests are run on every push to the repository via GitHub Actions, this ensures consistent quality.

You can try it out and find the manager here: https://fschoenfeldt.de/project_manager/

Hey guys, welcome back to Part III of my mini-app-cli-ish image compression series! If you haven't read part Part II, you can do so here. By the way, ghost added image compression to their core so your images will be compressed automatically by default!

Anyway, I'll continue this tutorial series because I'm starting a new Fotohaecker Project from scratch with Elixir & Phoenix Framework and I need a compression CLI to process users photo uploads.

Updating our dependencies

Because my last post is a bit old, we first want to check for dependency updates. For this, I find two libraries very useful: npm-check-updates and  npm-check. The first one is more popular but the second has a graphical User-Interface - so you decide!

npm-check-updates: ncu

npm-check: npm-check (note, I added the -u flag to skip unused dependencies warnings, as we haven't actually used mozjpeg etc., yet.)

Into compression

Compression model

Now, lets get started with the actual compression of our images. It's triggered by the CLI command node run.js foo.jpg --compress [compression-level] and evaluated in our code src/cli-controller.js:18~25.

We can start adding the imagemin calls right in the controller but I'd much rather prefer a model for this. First, let's download a sample image to compress and place it into  /images/test.jpg. Also, add a ./src/compression-model.js :

"use strict";

const imagemin = require("imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const fs = require("fs");

module.exports.compress = async (options) => {
  const { sourcePath } = options;
  // Check if file exists
  fs.promises
    .access(sourcePath)
    .then(compressImage(options))
    .catch((err) => console.error(err));
};

const compressImage = async ({ sourcePath, destinationPath }) => {
  const compressed_image = await imagemin([sourcePath], {
    destination: destinationPath,
    plugins: [imageminMozjpeg()],
  });

  console.debug(compressed_image);
};

Note the following things:

• with fs.promises.access, we check if the sourcePath-File exists. Technically, we're introducing race-conditions with that but that's fine for me.
• We're passing options to our  compressImage function but only use sourcePath & destinationPath for now.
• imagemin is asynchronous so our compressImage function needs to be async aswell to call await imagemin. We'll come to that later.
• Finally, we're printing out the result of imagemin with console.debug().

updating our CLI controller

Then, we want to expand our CLI with a parameter that determines the destination to save the compressed image as. Our CLI will look like this then: node run.js [sourceFile] [desinationFile] [--compress] [compression-level]. With this, we'll also refactor our code a bit so missing parameters are catched earlier:

"use strict";

const compressionModel = require("./compression-model.js");

// function that decides what do do
// remember the syntax: `node run.js [sourceFile] [desinationFile] [--compress/--resize] [compression-level]`
module.exports.pass = async (args) => {
  const errors = await checkArgsForErrors(args);

  if (errors) {
    console.error(errors);
  } else {
    const [sourcePath, destinationPath, command, ...options] = args;
    // only run this if args where provided
    switch (command) {
      case "--compress": // fall-through to case "compress"
      case "compress":
        compressionModel.compress({
          sourcePath: sourcePath,
          destinationPath: destinationPath,
          options: options,
        });
        break;
      case "--resize": // fall-through to case "resize"
      case "resize":
        console.log(`** Insert resizing here, using options ${options} **`);
        break;
      default:
        console.log(
          `${command} is not a valid action, either use --resize or --compress.`
        );
    }
  }
};

const checkArgsForErrors = async (args) => {
  let errors = "";
  if (args.length < 1) {
    // warning the user that he did not provide a source file. !TODO we might want to print out our apps syntax here.
    errors += `You did not provide a source file. `;
  }
  if (args.length < 2) {
    // warning the user that he did not provide a destination file. !TODO we might want to print out our apps syntax here.
    errors += `You did not provide a destination file. `;
  }
  if (args.length < 3) {
    // warning the user that he did not provide an action
    errors += ` You didn't provide an action, such as --compress or --resize. `;
  }

  return errors;
};

Note the following things:

• As imagemin is asynchronous (That means that we have to wait for imagemin to finish processing our image before we can actually say that it succeeded and furthermore process it), we also needed to change all functions upstream to be async. You can find a nice article about asynchronous concepts on MDN
• I added a checkArgsForErrors function that adds up errors that might occur. When we start resizing, we can also move the check if the source file exists here
• With const [sourcePath, destinationPath, command, ...options] = args;, args are destructured into more meaningful variables that we can use in the switch.

Make sure to also update the controller function call in run.js:9~12:

// function to handle user input, args is the array containing the arguments
const handleCliInput = async (args) => {
  await controller.pass(args);
};

Run it!

You can now run our CLI with node run.js ./images/test.jpg ./images/compressed/test.jpg --compress

If the source file can't be found, our CLI will print out an error just like this:

Wrapping it up

Today, we refactored our cli-controller and added an asynchronous compression-model that takes different options to pass it to imagemin.

If you want to clone the project, you can: https://github.com/fschoenfeldt/ghost-compression

Thanks for checking out my guide series for writing an image compression app with NodeJS. If you have any questions, feel free to contact me via https://fschoenfeldt.de - Part IV is coming, very soon! x

Photo by Tim Mossholder on Unsplash

I'm still working on Fotohäcker and it just had an update! You can now customize and edit your account:

• Change you profile picture & profile cover
• Change your email address & password

Also it had a lot of changes under the hood, now having almost 400 commits:

• Automated testing with jest & playwright
• ESM modules
• Big refactoring of the code

Stay tuned for more features, and the source code, coming soon!

Cheers x fred

If you're interested in photography, or if you're a (web-)designer looking for photography/image materials that are License Free (CC0), you surely came across unsplash.com.

I'm having a profile on unsplash for some years now and I'm contributing photos once a month or so. And they're very good performing! So if you're interested, check out my profile!

Unsplash is such an awesome website! It started as a small community, evolving over years to one of the best ressources for license free photography. The community is open-minded and dedicated to bringing the best photos to everyone. They even have an own Slack channel for critique and suggestions.

If you want to see all of my most viewed (and best performing photos), have a look here: https://unsplash.com/collections/9586076/most-viewed

As I said, use them for anything you like, they're in the CC0 License.

Happy new year guys! :) For today, I want to show you something different from my portfolio.

Even if I'm mainly a web developer now, back in the days, I used to do a lot of graphical work. From Photoshop to Illustrator and even a little bit Cinema 4D (now I really much prefer Blender).

Below I added some experiments from back in the days :)

I will post some more experiments made with another software. I did a lot with Photoshop for Heroic Recordings (Heroic) for some years. Stay tuned :)

Hey guys, welcome back to Part II of my mini-image-compression app series :-) - If you haven't read Part I, you can do so right now, its only a three minutes read.

Last time, we created a simple cli-controller to just handle the userinput and print it back into the console:

We can now use this functionality to forward it to imagemin/pngquant to compress our images.

The Commands/Syntax

Lets think about which commands we could need for our app to do the hard work for us - in this fashion: node run.js %arg%:

• [filename/*] --resize [%/px] just resizes the image and overwrites the original one
  • [%/px] is an optional parameter where we can specify the output width relative (%) or absolute (px) to the original photo. Default is 1080p width
• [filename/*] --compress [quality] determines which file type is in the input and then just compresses the images, overwriting the original one
  • [quality] just passed the according argument to imgmin/pngquant, we may need to process this argument for the libraries. Default is 70~85% quality, we'll see what's suitable

I didn't had this in mind

To process multiple arguments (especially more than two) we need to update our run.js to handle more than two arguments:

// run.js
"use strict";

// define controller to keep run.js clean
const controller = require("./src/cli-controller.js");

// grab user input with destructuring, saving it into args
const [,, ...args] = process.argv;

// function to handle user input, args is the array containing the arguments
const handleCliInput = (args) => {
  controller.helloWorld(args);
}

// run the handleCliInput function with the entered args
handleCliInput(args);

• const [,, ...args] = process.argv simply passed all input after run.js into the args array. Read more about destructuring on MDN if you're not sure what it does.
• const handleCliInput = (args) => { /* ... */ } I didn't explain this in the last article, but this is a special way to assign a function - called arrow function. You could also do the classic const handleCliInput = function(args) { /* ... */ } expression. Read more about arrow functions on MDN.

Time to destruct!1

Destructuring is so cool, now try it out to confirm that it works by running, for example: node run.js my_cat.jpg --resize 50%

As you can see, args is an array containing all the arguments the user inputs. Cool!

The game of controllers

We want to update our controller to handle the user input properly:

// cli-controller.js
"use strict";

// define the function as a module, so we can import it in the run.js
module.exports.helloWorld = (args) => {
  console.log(`You entered: ${args}`);
}

// function that decides what do do
// remember the syntax: --(node run.js) FILENAME ARGUMENT--
module.exports.pass = (args) => {
  if(args.length > 0) { // only run this if args where provided
    console.log(`You provided the file ${args[0]}`);
    // !TODO check if file exists
    if(args.length > 1) {
      // if provided, run specific command (like --compress)
      console.log(`You requested to do >> ${args[1]} <<`);
      switch(args[1]) {
        case "--compress": // fall-through to case "compress"
        case "compress":
          if(args[2])
            console.log(`** Insert compressing here, using ${args[2]} **`); // !TODO insert compression via model here
          else
            console.log(`** Insert compressing here, using default level **`); // !TODO insert compression via model here
          break;
        case "--resize": // fall-through to case "resize"
        case "resize":
          if(args[2])
            console.log(`** Insert resizing here, using ${args[2]} **`); // !TODO insert resizing via model here
          else
            console.log(`** Insert resizing here **`); // !TODO insert resizing via model here
          break;
        default:
          console.log(`${args[1]} is not a valid parameter.`);
      }
    }
  } else {
    // warning the user that he did not provide a file. !TODO we might want to print out our apps syntax here.
    console.log(`You did not provide a file`);
  }
}

You need to catch any case that your app should do. I didn't do any verification of the user input yet, and we may want to let the libraries do it themselves, so they just throw an error. I've used switch to decide between the arguments, if you've never heard about switch, you can read about it on the MDN here. But does it work?

Wrapping it up

Today, we learned how to write a controller that decides between user input and then runs the according command. Later, we will attach those console.log's with proper functionality. I'm not so happy with the structure yet and it doesn't really meets the DRY (don't repeat yourself) standard of programming, but for now it'll work.

If you want to clone the project, you can: https://github.com/fschoenfeldt/ghost-compression

Thanks for checking out the start of my guide series for writing a (ghost) image compression app with NodeJS. If you have any questions, feel free to contact me via https://fschoenfeldt.de - Part III is coming, very soon! x

Cover-Image by NeONBRAND on Unsplash

With my new blog, I quickly ran into the issue of very, very big files, I mean look at this:

Those images are almost exclusively from one (upcoming) blog post. So I have to reduce the size of the images, otherwise I will squeeze all your data volume out once you read the article. :-D

I have done image-compression in the past with my project fotohaecker (link), so I know exactly what to do:

• Scan all the photo files (no matter if png or jpeg)
• Resize them to 1080p (1920x1080px) maximum
• Re-compress them with imagemin(-mozjpeg) and pngquant
• (optional) Backup the original photos to a backup location

I would then run the script on my server, it would resize and compress my images and your data is saved. Yay!

Prerequisites

1. I'm using Ubuntu (Linux), but you can use MacOS or Windows aswell :)
2. NodeJS, of course.
3. imagemin, imagemin-mozjpeg, and pngquant (later on)

Preperation & Installing the dependencies

1. Create the directory of our project:

mkdir ghost-compression && cd ghost-compression

We create the subdirectory "ghost compression" in our current folder, and then move into it.

2. Initialize the package.json

npm init

This is used to organize our project, just enter any information you like here. :-)

3. Install the first dependencies

npm install imagemin imagemin-mozjpeg pngquant

This installs the three mentioned dependencies into our project and requires them as a dependency in our package.json

Starting to code

Alright, now to the fun part: coding! :-D

The App (barebones)

We create a run.js just like this:

"use strict";

// define controller to keep run.js clean
const controller = require("./src/cli-controller.js");

// function to handle user input, it needs 1-2 parameters to work
const handleCliInput = (arg1, arg2) => {
  controller.helloWorld(arg1);
}

handleCliInput(process.argv[2], process.argv[3]);

Explanation:

• handleCliInput redirects the request to the controller (covered below)
• process.argv is an array that contains the userinput after the run.js

The Controller (barebones)

Don't try to run the app yet, it wont work. We need a cli-controller.js to handle all the hard work and keep our app.js clean, so create a new subfolder src and in there, a cli-controller.js:

"use strict";

// define the function as a module, so we can import it in the run.js
module.exports.helloWorld = (arg) => {
  console.log(`You entered: ${arg}`);
}

Explanation:

• helloWorld gets exported to the module.exports object, so we can import it in the run.js. It just logs the argument, you give to it.

Verifying the folder structure

Just to make sure we did everything right, verify your folder structure:

Testing the first result yay!

So, we got a barebones version of our tool running now. Great! Try it out with:
node run.js %your-message%

So, what now?

Today, we've learned how to create a tiny NodeJS starter, to get image compression running with ghost. Once it's finished, you can use it of course to compress anything that's jpg/png.

If you want to clone the project, you can: https://github.com/fschoenfeldt/ghost-compression

Thanks for checking out the start of my guide series for writing a (ghost) image compression app with NodeJS. If you have any questions, feel free to contact me via https://fschoenfeldt.de - Part II is coming, very soon! x

Cover-Image by Tomas Sobek on Unsplash

Introduction

While most people don't care about proper structuring of their articles (or even documentations) Markdown makes it super easy to do so. Even the Ghost Android app (the content-management-system this blog runs on) supports markdown and proper preview of an article.

Getting Started

Check out this markdown page for a quick introduction into markdown.

If you don't want to wait, fire up a markdown cheat sheet and some online markdown editor to try markdown out.

The Syntax

The syntax of markdown is fairly easy, just look above on the official page or the cheat sheet. The goal of markdown is to give you an easy way of writing text, but also make it readable as itself.

So, what now?

Use markdown in your personal projects for documentation e.g. README.md with better structure than a plain text file. You can also generate static pages with markdown (I might write another article about that).

Hope you like it x Fred