Sirius Planner 0.1 Released

I’m happy to announce Sirius Planner, a task planner app that I’ve been working on in recent weeks. I’ve just released an alpha demo to a small number of people. Check out the features in the video below:

Video tutorial showing features and limitations of Sirius Planner 0.1.

Sirius Planner is a calendar-based task planner that lets you:

  • Create and manage tasks
  • Prioritise tasks on a particular day via drag & drop
  • Move tasks to different days via drag & drop
  • Focus on tasks in a day, week, or 5-week period
  • Tag tasks

This project is still in its early stages, but already has most of the core features in place. If this is something you think could be useful to you, please get in touch.

Securing PowerShellGet on a Windows EC2 Instance

I’ve been doing some work with security on AWS recently, and part of that involved running security assessments using Amazon Inspector to identify vulnerabilities at network and host level.

If I launch a fresh EC2 instance right now using the Microsoft Windows Server 2019 Base AMI and run a host-level assessment, the report lists a vulnerability related to the PowerShellGet module:

Microsoft Security Response Center’s entry about this vulnerability explains a little more about it:

“A security feature bypass vulnerability exists in the PowerShellGet V2 module. An attacker who successfully exploited this vulnerability could bypass WDAC (Windows Defender Application Control) policy and execute arbitrary code on a policy locked-down machine.

“An attacker must have administrator privileges to create a configuration that includes installing PowerShellGet V2 module onto a machine from the PowerShell Gallery. The WDAC policy must be configured to allow the module to run. After this is done, PowerShell script can be injected and run fully trusted, allowing the attacker arbitrary code execution on the machine.”

— CVE-2020-16886 at MSRC

The same page says that this vulnerability was fixed in PowerShellGet v. 2.2.5. So why do we have this problem? Here’s why:

PS C:\Users\Administrator> Get-Module PowerShellGet -ListAvailable


    Directory: C:\Program Files\WindowsPowerShell\Modules


ModuleType Version    Name                                ExportedCommands
---------- -------    ----                                ----------------
Script     1.0.0.1    PowerShellGet                       {Install-Module, Find-Module, Save-Module, Upda...


PS C:\Users\Administrator>

That AMI came with PowerShellGet 1.0.0.1, but we need version 2.2.5. We can install it by running a Powershell session in Administrator mode, and running the following commands (from the Installing PowershellGet documentation) and agreeing to install the NuGet provider:

Install-Module -Name PowerShellGet -Force
Update-Module -Name PowerShellGet

This results in the new 2.2.5 version being installed alongside the older 1.0.0.1 one:

A Powershell session showing how we started with PowerShellGet 1.0.0.1, installed a more recent version, and now have the new 2.2.5 version alongside the old one.

I don’t know enough to be able to say whether having that version 1.0.0.1 around still poses any kind of risk, but it seems to be enough for Amazon Inspector which no longer reports any vulnerability after installing version 2.2.5:

If you’re really paranoid, check out this Stack Overflow question for ways to get rid of the old version manually. I haven’t actually tried this, so be careful.

The Sixth Anniversary

It’s been six years since Gigi Labs was launched. That’s a long time for any blog, and a third of my overall 18-year presence on the web.

In terms of content, Gigi Labs has slowed down but gone in some interesting directions. That’s mainly because of the way things generally turned out over the past year, including:

  • I spoke at a couple of conferences
  • I earned a couple of certifications
  • I gave up on Windows and have completely switched to using Linux at home
  • I’ve been doing more management and architecture than actual development
  • COVID19 means I have more time but less motivation to do development-related stuff in my spare time
  • I have continued writing long blog articles professionally in my free time
  • Getting really tired of WordPress as a blogging platform
  • Picking up a little gaming once again
My RedisGraph talk at RedisConf 2020

Here is a summary of some of the more interesting things I wrote over the past year:

Over the coming year, I’m not expecting to focus very much on writing new articles at Gigi Labs, for a number of reasons:

  • In most cases, anything I can write about software development, architecture or management is already covered somewhere on the web. I don’t want to contribute to information overload on the internet.
  • I don’t really want to write about management. There are far too many people blogging about management who think their particular experiences are universal wisdom that needs to be shared with the world.
  • Writing high-quality technical articles is very time-consuming and provides little reward.

I’ve always enjoyed sharing knowledge on the web – for free – and that’s not quite going to change. But just to make the best use of my own time, I’ll write some new content only when I feel it’s worth my time, i.e. when it’s something unique, fun, or even something existing that I can tell in a more concise and accessible manner (e.g. the C# Asynchronous Programming series). My old blog, Programmer’s Ranch, as well as Tania Rascia’s blog are good examples of the direction in which I’d like to take Gigi Labs.

Another thing that I think will change is Gigi Labs’ role as both my blog and my personal portfolio. I’m currently developing a new website which will keep track of my projects, websites, talks and other contributions, while Gigi Labs will go back to being just my creative outlet.

Filter List As You Type with React

A common piece of functionality in many user interfaces is to allow users to filter a list interactively by typing into a text field. In fact, I wrote an article showing how to do this in WPF almost seven years ago.

I’m currently learning React, and I feel this is a good exercise to get the hang of several basic concepts. I am sharing this in case it helps anyone, but my React knowledge is quite limited so I don’t expect anyone to take this as some kind of best practice. I welcome feedback on any possible improvements.

Although this article is quite basic, it covers several topics including controlled components, state manipulation, and keys. I’m not getting into the details of one-way binding and JSX, and just assuming you’re already familiar with them.

Preparing the React Application

The first thing to do is create a new React application. Simply follow the instructions in “Getting Started with React“.

Remove everything from src/App.css, and remove the <header> element from src/App.js as well as the logo import so that you are left with just this:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

If you’re using Visual Studio Code, you can use Ctrl+` (Control backtick) to bring up an integrated terminal. Either way, run npm start from a terminal. You should see an empty page because we just removed everything from it.

Showing a List of Fruit

If we’re going to filter a list, the first thing we need is to show a list. This is easy enough to achieve:

function App() {

  const fruit = ['apple', 'banana', 'orange', 'grapefruit',
    'mango', 'strawberry', 'peach', 'apricot'];

  return (
    <div className="App">
      <ul>
      {fruit.map(f => <li>{f}</li>)}
      </ul>
    </div>
  );
}

We’ve just got an array of strings representing different fruit, and we’re using the JavaScript map() function to render each item within a list.

The list is rendered, but we get a warning about a missing key.

If you save the file, the browser should automatically reload and display the list of fruit as shown above. However, if you open the browser’s developer tools, you’ll notice a warning about some missing key.

When rendering a list of items, React needs each item to be given a unique key to keep track of changes and know when it needs to re-render. This is done by adding a key attribute and binding it to something, as shown below.

      {fruit.map(f => <li key={f}>{f}</li>)}

In our case, we can simply use the name of the fruit itself, but typically you will want to use a unique ID rather than the display string.

State and Controlled Components

The next thing we need is to take input from a text field. We can show a text field by simply adding it to the JSX:

    <div className="App">
      <p>
        Type to filter the list:
        <input id="filter"
          name="filter"
          type="text"
        />
      </p>
      <ul>
      {fruit.map(f => <li key={f}>{f}</li>)}
      </ul>
    </div>

If we want to use the value of the text field (i.e. whatever the user is typing), then we need to link it to the component state. To get to this point, we’ll first introduce the useState() hook as follows:

import React, { useState } from 'react';
import './App.css';

function App() {

  const fruit = ['apple', 'banana', 'orange', 'grapefruit',
    'mango', 'strawberry', 'peach', 'apricot'];

  const [filter, setFilter] = useState('');

  // ...

useState() is simply a function that helps us work with component state, which is where we store any view-related data such as the filter text in our particular eample. Its purpose and functionality might be confusing at first glance, especially because the name is not particularly clear.

Basically, it takes an initial state as a parameter (an empty string in the case of the filter text), and returns an array of two items: the current state of a particular variable, and a function that can assign its value. These roughly correspond to a getter and a setter, except that the getter is the actual value rather than a function (whereas the setter is indeed a function).

We use destructuring to extract these two into separate variables. What’s interesting is that we don’t really need to implement anything more than what you see here: even the setFilter() function is given to us and we don’t need to define it.

Now that we have a way to get and set the filter text within the component’s state, we can update the input field to use this functionality:

        <input id="filter"
          name="filter"
          type="text"
          value={filter}
          onChange={event => setFilter(event.target.value)}
        />

Specifically, we use the current value of filter (from component state) to set the value attribute of the input field, and provide a React event (note the casing which distinguishes it from the onchange DOM event) that updates the component state whenever the value in the input field changes.

In this way, the filter text value in the DOM (input field) is always in sync with the component state, meaning that we can use the value in component state without ever having to touch the DOM directly. This is called a controlled component.

If you’re using the React Developer Tools extension for Chrome, you can see the state value being updated even though we haven’t implemented the list filtering functionality yet:

The component state reflects the value of the input field in the DOM.

Filtering the List

Since it is now easy to retrieve and manipulate the value of the filter text, filtering the list simply becomes a matter of using the JavaScript filter() function when rendering the list:

      <ul>
      {fruit.filter(f => f.includes(filter) || filter === '')
            .map(f => <li key={f}>{f}</li>)}
      </ul>

Each time a user types in the input field, this changes the state of the component, which causes React to re-render it. The list is updated accordingly in real-time:

Note that this filtering is case sensitive, so it won’t work as expected if you type uppercase characters. I didn’t include this level of detail to keep things as concise as possible, but it is easy to adapt this to handle case insensitive filtering.

Complete Code

If you followed the instructions so far, your src/App.js should look like this:

import React, { useState } from 'react';
import './App.css';

function App() {

  const fruit = ['apple', 'banana', 'orange', 'grapefruit',
    'mango', 'strawberry', 'peach', 'apricot'];

  const [filter, setFilter] = useState('');

  return (
    <div className="App">
      <p>
        Type to filter the list:
        <input id="filter"
          name="filter"
          type="text"
          value={filter}
          onChange={event => setFilter(event.target.value)}
        />
      </p>
      <ul>
      {fruit.filter(f => f.includes(filter) || filter === '')
            .map(f => <li key={f}>{f}</li>)}
      </ul>
    </div>
  );
}

export default App;

Summary

You should take away the following from this article:

  • When rendering lists of items, make sure to give each item a unique key.
  • The state of a component contains view-related data.
  • React hooks are simply functions providing ways to access state and life cycle.
  • useState() lets you get and set the value of a variable within state, and also provide an initial value.
  • A controlled component manages input fields (DOM elements) by linking their value to the React component state. This is done by binding an input field’s value to the component state, while at the same time using events to update the value in the component state when the value in the DOM changes.
  • State changes cause a React component to re-render.

Resizing Images and Creating Thumbnails with ImageMagick

My first website, Dino’s Ultima Page, turned 18 years old last week. As a website about games, it’s got hundreds of images, mostly screenshots or other images of in-game objects and people. I spent a lot of time manually making thumbnails for most of the larger images, so that pages would load quickly and larger screenshots would be loaded only when requested.

Now, hopefully a little wiser, I know that such things can be automated. I recently showed how to extract regions of an image using ImageMagick, and this software, which I’m growing to love more and more, is also capable of resizing images (among many other operations).

Resizing a Single Image

Many of the games I remember from the early 1990s ran at a resolution of 320×200. Although they would often be scaled up during gameplay, taking a screenshot (in DOSBox, for instance) results in an image that is 320 pixels wide and 200 pixels high.

A screenshot from Dark Sun: Shattered Lands.

For an image that I’d like to display on a website, the size is a little annoying. It’s too small to make out much of the details, but possibly slightly too large to use as a thumbnail. I’d like to scale it down to create a thumbnail, but then link to a scaled up version of the image.

Using ImageMagick, it’s pretty easy to resize an image. Assuming the image above is called dsun_003.png, we can create the smaller and larger version as follows:

convert dsun_003.png -resize 640x400 dsun_003-large.png
convert dsun_003.png -resize 200x125 dsun_003-small.png

We call the convert command, passing the following as arguments:

  • The name of the original image we’d like to resize
  • The -resize parameter, followed by the new size
  • The name of the output file where the resized image will be saved

Note that I intentionally chose the new image sizes such that the aspect ratio is preserved (which is usually what you want). If you need to change the aspect ratio, check the Resizing documentation for more advanced examples.

This leaves us with a nice thumbnail and a larger image where we can savour the graphics of 1993:

The original image (top-left), the thumbnail (bottom-left) and the larger image (right).

Resizing all images in a Folder

If we can resize a single image from the terminal, then we should be able to automate this process for a large number of images in a folder, saving a lot of time that would otherwise be spent clicking stuff in an image editor.

For instance, I have a few screenshots from King’s Quest 6 in a folder called kq6. Each image has a size of 640×440 and is of type .png.

Six screenshots of King’s Quest 6.

I’d like to resize all images in this folder regardless of how many there are. I can achieve this using a loop in bash:

for filename in $1/*.png; do
    convert $filename -resize 320x220 "$1/$(basename "$filename" .png)-sm.png"
done

Actually, the trickiest part of this is to extract the filename without the extension. That’s the part where we’re using basename, which takes the filename as the first argument, and the suffix to trim off as the second. This solution works where we know the image type a priori and all images in the folder are the same type.

You’ll also note the use of $1. That’s simply the first argument to the script, so that we can use the same script in different places, just passing the name of the folder as an argument. In fact, after saving the script as resizeall.sh and giving it execute permissions, let’s call it on our kq6 folder:

./resizeall.sh kq6

This has the effect of creating smaller versions of all the images in the folder, which have the same name except for a -sm suffix before the file extension:

We’ve generated smaller versions of each image in the folder.

Conclusion

We’ve seen again that ImageMagick is really handy for image manipulation, and the ability to do things from the terminal makes it really easy to automate operations on large numbers of images. In this case, we found it was really easy to resize game screenshots to create thumbnails and larger images to display on a website.

"You don't learn to walk by following rules. You learn by doing, and by falling over." — Richard Branson