DEV Community: Ste Griffiths

F1 Wow Dashboard - on Uno

Ste Griffiths — Fri, 05 Dec 2025 20:32:51 +0000

This is a submission for the AI Challenge for Cross-Platform Apps - WOW Factor

What I Built

I love Formula 1, and all kinds of mission control dashboard and visualisations. So I built an F1 track dashboard with a rotating 3D car! 🏎️

Rotating 3D car wireframe
Animated track list
Data bindings of track name, total laps
Lap counter
Name customisation
Custom Splash Screen

Demo

Here's a video of my app running on Windows:

Or check out the web assembly version of F1 Wow in your browser. (I had to disable 3D model animation on WASM for performance reasons)

Cross-Platform Magic

I was mainly targeting Windows, but I was pleased to see how it worked in WASM with no extra work! My 3D renderer is CPU-intensive, so I decided to disable this in the web version for better performance.

I'd love to test this out on Android (but I don't have one) or iOS (but I don't have a Mac to build on! 😅)

You can find the source for my UnoWowApp on GitHub.

Windows/Desktop

It runs on Windows:

Web

And you can try it on the web:

Interactive Features

3D Car Wireframe

Originally I wanted a fully textured HD car render, but I didn't know how to do this, and out of the ways I researched, SkiaSharp was the best cross-platform option. To make a hardware accelerated 3D render, I think I would have needed platform dependent code, so I didn't go that way.

Claude Sonnet 4.5 in GHCP helped me write the Simple3DRenderer and I applied some tweaks after reading the code and learning about how it worked. This was a fun part of the experience as I've never worked with 3D rendering before!

Fancy Animated List

I built a radial effect on the circuit list, so when you move the mouse, the tracks change size depending on how close the cursor is:

Name Entry

This is kind of a basic one, but I used a text entry field to allow you to type in the driver name to get a custom greeting.

Lap Counter

Press the Plus button in the top right to count laps, and when it passes the max laps for your chosen track, it loops back to one.

The Wow Factor

I think the combination of the background, 3D render, track list, and F1 styling creates a big overall impression. I like looking at this dashboard and I hope you do too.

I completed the finesse of the app with a custom splash screen and icon to go with the F1 theme.

It's been 10 years since I coded for Windows desktop, and my first time writing cross-platform. This was a fun experience! Thanks for checking out my entry, and let me know what you think 😁🏎️

Credits and Inspiration

Inspiration

Resources

Converting an ancient Angular 11 app to Vue 3 with GitHub CoPilot

Ste Griffiths — Wed, 22 Oct 2025 00:00:00 +0000

Every week Dependabot sends me security advisories about my most vulnerable, out of date GitHub repos, and every week that Age of Mythology Board Game Helper I once wrote in Angular tops the list by a mile. How many packages are in the Angular ecosystem?? How can there be so many and so vulnerable??

I still want the app to exist. But I want the warnings to stop.

I briefly tried upgrading it to a newer Angular version but that was a nightmare, and it wouldn’t solve the long term problem when new versions were later deemed to be vulnerable.

I wanted to rewrite it from Angular, which I don’t know or use at all, into a tech I know and enjoy, like Vue 3. This sounded like a lot of drone work though so I got Claude involved.

The LLM rewrite

I moved the angular app into a new subdir of the project, fittingly called angular and made a new empty dir for vue.

I used VS Code with GitHub CoPilot, with Claude Sonnet 4.5 selected, in Agent mode.

My initial prompt was pretty simple:

Look at this Angular app. We are going to rewrite it in Vue 3. Keep it as simple as possible. The vue app does not need any unit testing. You will init the Vue app in the /vue dir, imitating the angular app in /angular. Please make a plan before starting.

#file:app.module.ts #file:main.ts #file:index.html

It had some trouble figuring out what I’d done with the file dirs even though I explained it. I also have a perennial issue with GHCP failing to read results from terminal the first time, so I have to close all the magic terminals and tell it to try again.

In the end I ran one or two commands on Claude’s behalf (I copied out the commands it had printed to the Agent panel) to stand up the Vue project.

Course correction with GHCP

I’m learning that when GHCP is waiting for input or authorisation to run a terminal command, I can interject. Like sometimes my npm version is wrong, and it’s about to go off on a wild tangent working around it, so I just say:

I’ve installed node 22.20.0 and run the npm create and npm i commands for you, please check the content of the Vue directory then continue

Other times it guesses super wrong on the source of an error, e.g.:

The issue is that the file uses “smart quotes” (curly apostrophes) in some strings which TypeScript is misinterpreting. Let me check the actual content by running type-check to see what the error really is:npm run type-check 2>&1 | head -50The issue is with the apostrophes. It looks like when I copied the text, some apostrophes became smart quotes (‘ instead of ‘). Let me check the exact character:sed -n '63p' /d/git/aom-bg/vue/src/data/allUnitsData.ts | od -c | head -3

And while it’s waiting to run sed, I, a smol brain developer, interject:

No mate, some of the unit specialText entries contain apostrophes and you need to escape those

In fairness, I don’t find any of this that strange, as many actual real human devs also love to overcomplicate solutions while missing the obvious (myself included).

I think it’s been documented that Claude’s long declarations of victory are annoying. It will give you a looooong markdown report to prove that it’s finished its checklist and koded everyfing to spek.

Unforunately, if it tried to npm run dev and couldn’t get access to the output, it will declare victory even when it doesn’t build or run. So I did have to make it check its work and fix the actual errors:

Please run npm run build and check output for errors. Please don’t declare victory any more, that’s a waste of tokens

[N.b. it looks like I say “Please” to LLMs a lot. This is only partly due to my concern for appeasing our future robot overlords]

After this fix it was done-ish…

The cleanup

To keep it brief, here are the major shortfalls from Claude’s side:

It copied some CSS into scoped styles where they didn’t need to be, and transcribed them wrong, changing 8.5rem to 10rem, for example. It also made up some colour codes that don’t exist in the original. I don’t really understand why.
In general, LLMs have poor knowledge of the Tachyons CSS library, which I use for everything, so they tend to reinvent/duplicate some of its CSS classes, and hallucinate others.
It didn’t clean up all the “Welcome” cruft that comes with a standard Vue boilerplate project.
It inexplicably abstracted the name “Age of Mythology” from static text into a variable… just in case I ever wanted to change it.

These are all pretty minor and I was happy.

I think in future I am going to get LLMs to read the Tachyons Table of Styles to avoid misunderstandings.

Performance

Now we’re done with LLM talk and squarely into Angular vs Vue territory.

With both variants built for production and shipped via Netlify:

Tech	Lighthouse	HTML Size	CSS Size	JS Size	Total
Angular	74/100/100	201B	10.5kB	116.34kB*	127.05kB
Vue 3	98/100/100	70B	40B†	37.8kB	37.91kB

*Angular split the JS into three files, Vue only one. Vue did some route splitting, so that additional JS was downloaded on another route (/unit/something) when needed.

†This is slightly unfair, beacuse Angular uses scoped styles, which I rationalised for the Vue development, moving them into a common stylesheet. This likely reduced class size, specificity of name, and duplication.

Development file size without packages:

Angular: 582 kB
Vue: 209 kB

I am not measuring with packages because I don’t have the patience or disk space for an npm install on a 5-year old Angular project.

Results

The new shiny Vue version is now live at https://aom.netlify.app and you can click around it right now.

I like it. It feels snappy and it looks the same as before. ⚔

If you want to check out the final PR porting to Vue, you can do so.

We talked frontend frameworks the other day at work, and it strikes me that frontend is now just a lot more portable in the age of LLMs, when they’re this quick and capable at a total rewrite.

Let’s remember to use AI thoughtfully, weighing its positives and negatives, accepting economic value where it’s real, and keeping those human brains exercised and working! 🧠🏋️

Keeping an ASP.Net Core/6/7/8 app alive in IIS

Ste Griffiths — Mon, 11 Dec 2023 00:00:00 +0000

There are three things you have to do.

First, install the ‘Application Initialization’ IIS feature on the server! This caught me out.

Next, configure your applicationInitialization settings in web.config or IIS:

  <system.webServer>
    <applicationInitialization doAppInitAfterRestart="true">
      <add initializationPage="/some-route" hostName="hostname.example.com" />
    </applicationInitialization>
  </system.webServer>

The hostname property doesn’t need a scheme (like https://); just the raw hostname.

I believe the initializationPage can be the root route (/) but it might be best to specify a page/file name. The docs say the default value is "" but that doesn’t mean it would work…

Lastly, in the Application Pool settings for the target app pool, in Advanced Settings, set Start Mode to AlwaysRunning and the Idle Time-out to 0.

See the excellent Hangfire docs for Making ASP.NET Core application always running on IIS. The only part not covered there is installing the server role! 😩

Have fun out there ☔

Accessing getters or actions from another Vuex module

Ste Griffiths — Fri, 07 Jul 2023 00:00:00 +0000

This is a cheatsheet. Say you have multiple named modules in your Vuex store and you need to access something from more than one of them at a time, or they need to talk to each other. How do we do that?

For these demos, imagine a store with modules called trees, seasons, and weather:

import trees from "./modules/trees";
import seasons from "./modules/seasons";
import weather from "./modules/weather";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    trees,
    seasons,
    weather,
  },
});

Any getter from a component

The easy part. You can mapGetters from one or more different modules in the computed section of a component:

import { mapGetters } from "vuex";

export default {
  name: "MyComponent",
  ...
  computed: {
    ...mapGetters("trees", ["isEvergreen"]),
    ...mapGetters("seasons", [
      "isTropicalSeason",
      "isRainySeason",
    ]),
    ...
  }

Here we map the trees.isEvergreen, seasons.isTropicalSeason, and seasons.isRainySeason getters.

The first param to mapGetters is module name, the second is an array of getter names, all as strings.

Any getter from an action

The first param of every action is the whole store, and it is normal to destructure this using braces to access the members you need, which can include getters (for same module) and rootGetters (for accessing any module):

// An action:
async tryTreeGrowth({ commit, rootGetters }, sapling) {
  const growingConditions = await getGrowingConditions(
    rootGetters["weather/getWeeklyWeather"],
    rootGetters["seasons/getSeason"],
    sapling
  );
  if (growingConditions > 0.5)
    commit("DO_GROWTH", sapling);
},

Any getter from another getter

If you’re doing this, it’s probably a mistake. You should probably abstract this “one level up” in your component or action; grabbing the various values you need from each module and combining them there.

However, there is a way. On a getter, there are four fixed parameters (they don’t use destructuring like actions do): (state, getters, rootState, rootGetters). If you don’t need to use one or more of them, you can “throw them away” by using a variable name that’s a number of underscores. This will stop eslint/prettier complaining about unused variables.

// Getter in the weather module:
isWeatherSeasonal(_, getters, __, rootGetters) {
  return (getters.isRainy && rootGetters["seasons/isRainySeason"])
    || (getters.isDry && rootGetters["seasons/isDrySeason"])
}

We have _ in place of state, and __ in place of rootState, because neither of those is used in the function.

Any action from another action

When you destructure the store as a parameter of an action, you can grab the dispatch method. Dispatch allows you to call any action from any module, using a name with a slash, as long as you pass a third parameter (options) with { root: true }:

// Action in the weather module:
resetClimate({ dispatch }) {
  // Also reset climate in the 'seasons' module
  dispatch("seasons/resetClimate", null, { root: true });
},

In the example code above, the action takes no input, it’s just a “do this”.

Alright, have fun out there 🦥🍒

Wrap a callback-based JS library with Promises

Ste Griffiths — Thu, 13 Apr 2023 00:00:00 +0000

I’ve been integrating the Microsoft Cognitive Services Text-to-speech thingy, to make a little web API that can speak Vietnamese.

Take a look at this sample code for using the microsoft-cognitiveservices-speech-sdk npm package (I’ve snipped some stuff for brevity):

var sdk = require("microsoft-cognitiveservices-speech-sdk");

// This example requires environment variables named "SPEECH_KEY" and "SPEECH_REGION"
const speechConfig = sdk.SpeechConfig.fromSubscription(process.env.SPEECH_KEY, process.env.SPEECH_REGION);
const audioConfig = sdk.AudioConfig.fromAudioFileOutput("audio.wav");

// The language of the voice that speaks.
speechConfig.speechSynthesisVoiceName = "en-US-JennyNeural"; 

// Create the speech synthesizer.
var synthesizer = new sdk.SpeechSynthesizer(speechConfig, audioConfig);
var text = "You have selected Microsoft Sam as the Computer's default voice.";

// Start the synthesizer and wait for a result.
synthesizer.speakTextAsync(text,
  function (result) {
    if (result.reason === sdk.ResultReason.SynthesizingAudioCompleted) {
      console.log("Synthesis finished.");
    } else {
      console.error("Speech synthesis canceled, " + result.errorDetails);
    }
    synthesizer.close();
    synthesizer = null;
  },
  function (err) {
    console.trace("err - " + err);
    synthesizer.close();
    synthesizer = null;
  }
);

console.log("Now synthesizing to: " + audioFile);

The problem

The example synthesizer object only produces values in its callbacks.

If you wrap this code sample in a speak(text) function, then it will return before the values you want are “ready”. You can’t directly return the outcome; you’d have to either match its old-school vibes and pass a cb callback argument, or if you were hoisting it into express, perhaps you’d pass in the express response object so that your speak function can directly return a web response.

Rubbish solutions!!

ObviouslY we want to wrap it in a Promise so that we can provide a dead simple awaitable interface for an async route handler to use:

app.get("/create/:text", async (req, res) => {
  const result = await speak(req.params.text);
  return res.json(result);
});

Trading callbacks for a Promise

But how do we get a Promise out of this mess?

Wrap the insides of the new function in return new Promise((resolve, reject) => { ... }
Anywhere you want to return a success, invoke resolve(someResponseObject)
Anywhere you want to handle an error, invoke reject(someErrorObject)

That’s it! Your new method is then-able and async!

export const speak = (text) => {
  return new Promise((resolve, reject) => {
    const audioFileName = "audio.wav";

    if (!process.env.SPEECH_KEY || !process.env.SPEECH_REGION)
    {
      const resultModel = {
        "Status" : "Error",
        "Error" : "Unable to connect to speech server"
      }
      reject(resultModel);
    }

    try {
      // Connect SDK
      const speechConfig = sdk.SpeechConfig.fromSubscription(
        process.env.SPEECH_KEY,
        process.env.SPEECH_REGION
      );
      const audioConfig = sdk.AudioConfig.fromAudioFileOutput(audioFileName);

      speechConfig.speechSynthesisVoiceName = "en-US-JennyNeural"; 

      // Create the speech synthesizer.
      var synthesizer = new sdk.SpeechSynthesizer(speechConfig, audioConfig);

      synthesizer.speakTextAsync(
        text,
        function (result) {
          synthesizer.close();
          synthesizer = null;
          const resultModel = {
            "Status" : "OK",
            "Text" : text,
            "Audio" : audioFileName,
            "ResultID" : result.resultId
          }
          resolve(resultModel);
        },
        function (err) {
          synthesizer.close();
          synthesizer = null;
          const resultModel = {
            "Status" : "Error",
            "Error" : err
          }
          reject(resultModel);
        }
      );
    } catch (error) {
      const resultModel = {
        "Status" : "Error",
        "Error" : error
      }
      reject(resultModel);
    }
  });
};

Isn’t that cool?

As usual, I basically got this all from the great Promise examples on MDN.

I wish you growth and harmony this summertime 🌼

Is .Net imitating Node.js?

Ste Griffiths — Fri, 01 Jul 2022 00:00:00 +0000

Recently .Net has had big changes inside and out. On the inside, the “my first program” in C# and .Net is a lot shorter than it was. And on the outside, .Net is now on a yearly major version release schedule.

This is a bit of a personal theory incoming, but I think it all bears out in reality… hear me out…

What is Node.js like? 🧐

It’s quick to get started 🏎

Your boilerplate web API project with express in Node.js is a very simple thing:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

…and anyone with a bit of JavaScript can jump into a new Glitch project, read a few docs, and write a live web API in minutes.

You can make powerful web projects very quickly 💪

For years Node.js has been letting hacker types throw together amazing web projects in a short time [citation needed].

Speaking from personal experience, if I wanted to

...then I can knock that together in Node in 1 or 2 hours. These are things that would take at least a day of fiddling in .Net.

In fairness, some of this is down to npm vs nuget package ecosystems. But it’s a chicken-egg thing. The more users you have in the ecosystem, the more high quality packages you have, the more devs you attract, 🔁...

It’s always relentlessly updating 📦📦📦

NodeJS version schedule will make your head spin. You thought you were up to date because you just got onto NodeJS 12. I mean, it sounds like a big number. GUESS AGAIN!

The NodeJS release cadence features a new major version number every six months!

Importantly, even-numbered versions get Long-Term Support (LTS)

So don’t even bother with the odd ones.

Example:

Node.js 19 comes out this November and is supported til June 2023 (8 months total)
Node.js 20 comes out April 2023 and gets 3 whole years of support, til April 2026.

Why would .Net want to change? 🤔

Here’s a bit of guesswork:

Starting a new .Net project means loads of boilerplate and some instant turn-offs
It’s hard for beginners to build things in .Net
People (who?) like the easy setup Node projects
JavaScript ecosystem has a reputation for being the “it” thing (probably mistakenly)
Someone at Microsoft thinks imitating the Node.js way would be a good idea

What would it look like to copy these attributes? 📋

Well maybe you would:

Make empty projects simpler ✅

The new “hello world” console app has gone from 11 lines to 1 (and while it used to feature six keywords, using, namespace, class, static, void, and string, it now features… none)

Your most basic web API project has gone from 22 lines to 4 (and from looking like a birds nest to looking like understandable code)

This article, .Net 6 Minimal APIs vs Node JS covers it way better than I want to.

Release more often 🚀

Meet the new .Net release schedule:

Major version release every 12 months
Even-numbered versions are LTS for 3 years

Sounds familiar.

Not quite the same frightening clip as Node maintains, but we had .Net Framework 4.x for… (checks watch)… 12 years – so this is a real leap.

Why is this maybe a good or not so good idea 🎭

Copying Node.js in 2021/2, as if it’s the hotness, feels like an anachronism ten years out of place. Like saying “we should be getting into DVDs!” in 2012.

Nonetheless – what they’re imitating might be good ideas, regardless of time and provenance:

Regular rather than irregular release schedule, which allows downstream consumers to make predictable decisions
Easier, more accessible language features for newbies means more devs, more packages, more community (as mentioned previously).

Wrapping up 🍬

This article has ignored a whole category of other design leanings to do with running .Net on Linux and the cloud and stuff. But I wanted to focus on just these two things.

So, that’s my headcanon about why MS is doing these things with .Net. I hope you enjoyed it. What do you think?

A Palace of Palettes with Appwrite

Ste Griffiths — Thu, 12 May 2022 20:42:55 +0000

Overview of My Submission

My submission for the Appwrite Hackathon is Palace, a palette organising playground for people dealing with colour at palatial scale 😎🤪

This is borne out of my need for a tool to let me import, tweak, and export lots of palettes. And I thought it would be a great opportunity to try out the auth and database features of Appwrite for this hackathon!

The Appwrite features it uses are:

Anonymous sessions
Accounts
Database

I can tell I've only scratched the surface, as there's a lot of backend support in Appwrite too, which was just outside the scope of this project.

But it was great to be able to add server-backed save features for relatively little effort.

Submission Category:

Web2 Wizards

Link to Code

SteGriff / palace

Palette Ace

palace

Palette Ace - Build, curate, and export colour palettes

Resources

Appwrite http://134.122.50.123/console
Demo todo with vue
Built from Ste's Vue3 starter
Kinopio board (private)

Dev

Install dependencies with npm i
Run with npm run start

Prod

Build for prod with npm run build
Deploy to e.g. Netlify with the output from build directory

View on GitHub

Additional Resources / Info

I wrote about the creation process in a previous post, but the tall and short of it is:

Built with my Vue3 starter and Pinia
Made lots of use of the great Appwrite demo-todo-with-vue
Used packages like vue3-colorpicker and colord
Deployed the backend on DigitalOcean with the Appwrite one-click droplet
Deployed the UI on Netlify

Challenges

I wanted Palace to have import/export to JSON and CSS, but didn't have time inside the hackathon. Those will come later 😊

AI had to use a spare domain to get the backend talking to the frontend over HTTPS; that was an unexpected challenge but it worked eventually.

Palace has one really big bug which is that data isn't isolated per user... everyone can edit everyone's data 😅... I set everything up as I thought I should in appwrite, and manually set permissions with user:$userId but still, the data leaks. Maybe somebody will comment and tell me what I did wrong!

Thanks for reading my entry -- happy hacking 😊

Walking Appwrite - Starting my Appwrite project

Ste Griffiths — Tue, 19 Apr 2022 00:00:00 +0000

I saw this Appwrite hackathon on dev.to and I guess I was taken in by the big numbers or the promise of a free t-shirt, but one way or another I thought “I could do that!” and so now I’m doing that.

While developing my current project I realised I could use a tool that lets you manage palettes at scale. A lot of the existing things out there let you work with one palette at a time in a very arty, considered way – I need to create, update, and delete palettes with a broad view. I want to import and export lots of JSON. And export CSS too. So this seemed like an opportunity to build that, and get rewarded at the same time.

It’s called ‘palace’ (palette ace, see).

Starting up Appwrite

Appwrite is a backend-as-a-service, and it’s delivered as a Docker… crate? Is that what they’re called? I played with Docker one time but I’m not confident with it, plus, I want to create an app that’s Truly Live On The Internet and I’m not gonna go through exposing my local PC and opening firewall holes, etc.

Appwrite is a one-click app on DigitalOcean. So, it seemed like a chance to try out DigitalOcean. I splashed $5 prepayment on a “small droplet” for a month – the hackathon deadline is a month away anyway. Nice.

Suddenly the amount of new information and details to remember was proliferating rapidly, bees circling my head, seeking a place to nest. I put the bees to bed in a tidy new Kinopio space (pictured) as it helps me group and organise details and useful links.

I’ve gotta say the one-click experience on DO was really easy. And after it comes up, you get a big button to take you to your Appwrite dashboard. It gets a public IPv4 address (a rare commodity!) and you can assign a custom domain if you want.

Looking at Appwrite features, I thought the instant account management would be fun to use. Accounts and auth are always a bit of a pain so this seems like a handy feature to leverage.

The thing that struck me right away was “Anonymous Sessions”. I love tools with anonymous sessions! You can just get to trying it without creating an account, and then promote your account into a real one later.

Frontend

I’m learning Vue3 with the Composition API, <script setup>, Typescript, etc. Appwrite provide a useful sample project called demo-todo-with-vue, so I keep the readme open in one tab and a GitHub Dev window of the source code open in another.

The most useful thing here was their api.js wrapper around the API. It made it simpler to understand how to use the underlying Appwrite library.

I had some trouble picking a good colour picker, and settled on vue3-colorpicker, but I had to do some CSS hacks to get it to display where I wanted.

Also troublesome was the npm color package, which doesn’t play nice with Typescript – fortunately someone made colord to solve this problem.

Lastly, I realised pretty quick I need some global state management. I usually steer away from a redux store unless it’s absolutely necessary, because of all the extra code you have to write. To my pleasant surprise, pinia (the replacement for Vuex as of Vue3) is simpler than it’s predecessor, and they’ve completely done away with Mutations, which were gross. So I’m really happy. Using it is a breeze! 🎑

I have a test instance on Netlify… URL secret for now 🙂

Progress

So far, I’ve got it to get or create an anonymous session, and I’ve investigated saving data back to Appwrite. I didn’t enjoy Appwrite’s interface for setting up “collection attributes” (database columns) - it is a pretty painful click-and-wait web UI. I can’t imagine architecting a large database with that tool, I guess (hope) there is some kind of bulk interface where you can upload a YAML or something.

I’m not sure whether I want to use the traditional “records” concept for each palette, or whether to store the user’s entire app state into an unstructured document and just sync that. The latter seems easier to acheive because my CRUD operations aren’t as clearly defined as in the trivial todo app sample.

So, I’ve got some technical choices to make and some work to do. But I’m having fun 😄 See you later!

Super-powered Wikis are Categorical, not Hierarchical!

Ste Griffiths — Wed, 01 Dec 2021 00:00:00 +0000

When we build corporate Wikis and shared knowledge bases, it's tempting to try to neatly arrange every page into a master hierarchy, or tree:

Products
  Software
    AcmeQuery
      Setup
      Environments
      Deployment
Techniques
  Project Setup
Tools
  DeploymentWidget

It’s a nice idea, but you will quickly run into one of the following problems:

Not every article has exactly one place where it should live
Users might not feel confident to add new knowledge if they can’t find the right place for it to live
“Designed” hierarchies represent a fixed-in-time purpose in a changing domain

What are the goals for your wiki?

Here are my guesses:

Easy to contribute to
Easy to find what you’re looking for
Comprehensive of your contributors’ combined knowledge

How can we acheive these things?

Consider the world’s largest wiki…

Wikipedia. Your corporate wiki will not grow to the size of Wikipedia. But we can learn lessons there about large-scale organisation of information.

When you go on Wikipedia, do you see pages in folders and subfolders? Do you “drill down” to the page you’re looking for? Probably not; it’s driven by Searchability and Categorisation.

Look at this footer from the Wikipedia article for FileMaker, a popular low-code platform:

The page is in 12 different categories. If the site were a hierarchy, where would you put ‘FileMaker’?

Home -> Technology -> Computing -> Computer Data -> Databases -> Desktop database application development tools ?
Home -> Technology -> Software -> Software by operating system -> Cross-platform software ?

(n.b. these navs aren’t contrived; they’re taken from actual category navigation)

It belongs in both of these places and more.

So, the flexible, usable, discoverable solution for this page is that you can find it using any of the above, or by title, or by page content.

You will end up with pages that could live in two or more places: An analysis of entities that are used by multiple apps or have multiple representations; A supporting tool that you use to do various things; A setup or technique guide that applies to several areas; A glossary that allows cross-team communication; infrastructure stuff; environment stuff; shared features; third-party integrations, etc., etc.

What this means for us

Folksonomy is an idea whereby your “folk” create and organise tags in a grassroots way. It can empower them to create content without fear of miscategorisation, and to own and organise the content as a team.

My personal opinion is that hierarchies set in stone by forerunners and bosses are more likely to inhibit new submissions.

Remember that most wikis allow you to freely move, rename, and recategorise content. It’s digital jazz, man. 🎷

Summary

My gold standard for super-powered internal wikis is this:

A wiki is a “big pile of pages”
Anyone can make a page at any time if they think they know something that other people don’t know
Try your best to give pages good titles which are searchable
Try your best to apply relevant tags that you’ve seen around the place, and invent new tags when necessary, on new and existing content
Add ‘See Also’ links between related pages (perhaps your software can do this automagically)
Give visitors a “jumping off point” on Home, where they can go quickly to high-quality, highly-connected articles.

Next time

Someone once said to me “If you want to write a wiki page, fine, but you’ll be responsible for keeping the (entire) wiki up-to-date!”. I think this misassumption is why said person had never contributed to their wiki.

I’ve got news for you – beautiful and freeing – wikis don’t need to be up-to-date!

But that’s for another time.

Happy tagging 🌱📃✨

Very Alternative Search Engines

Ste Griffiths — Thu, 16 Sep 2021 00:00:00 +0000

I think a lot of you already know about the usual alternatives to Google like Ecosia (the search engine that plants trees) and DuckDuckGo (the search engine that doesn’t track you).

I’d like to explore some very alternative search engines that I’ve found recently.

These are good when you’re looking for niche results that are too hard to find with the usual suspects.

In no particular order:

Mojeek

https://www.mojeek.com/

Mojeek is UK based, human-centric, tracking-free, and they have their own crawler (contrast to DDG which piggy-backs off crawlers like Yandex)

It seems fine. It finds this site so I’m happy 😁

MillionShort

https://millionshort.com/

Search the web without the top n websites (where n is 100 to 1 million). Super useful when you want to find something that’s not on Pinterest, Amazon, Buzzfeed, or one of the other Big Content Walled Gardens.

You also get more filtering tools after search, like Date and Location, and you can re-introduce domains one-by-one if you think they may have relevant results.

This helped me find the Common mistakes in English site after I lost it for a few years.

Marginalia Search

https://search.marginalia.nu/

Just found this one today and it prompted this post. It has its own crawler, called Edge (lol).

“The search engine calculates a score that aggressively favors text-heavy websites, and punishes those that have too many modern web design features.”

However it does that, I’m pretty sure it excludes this website. Which is weird because it’s pretty text heavy and not that modern, and Marginalia happens to include a few WordPress sites (which seem to be a counterexample of the above).

I searched for “yamaha pss a50 fix” and it returned one result, which was some poor .inf file from somewhere.

Widening the net to “yamaha pss a50”, we get results from sandsoftwaresound.net (no complaints from me) but this site is excluded. I repeated the experiment with some other niche search terms which historically drive traffic to this blog and didn’t see myself. No offence taken, just… curious 😅

Wrap up 🗞

Isn’t it weird that all three of these begin with ‘M’??

Anyway, more niche search engines are a good thing! Tools for the job, fighting back against monopolies and hegemonies. That’s good stuff.

Have you got any suggestions? Lmk in the comments! 👇

Get hi-res twemoji SVGs by URL

Ste Griffiths — Thu, 09 Sep 2021 00:00:00 +0000

Yo, just a quick one. If you want to get high quality renders of twitter emoji (twemoji), you can get the SVGs by codepoint with a URL like this: https://twitter.github.io/twemoji/v/13.1.0/svg/1f439.svg

To help you find codepoints, Emojipedia has a page, Every Emoji by Codepoint.

You need to lowercase any letters in the name.
If an emoji is a combination of multiple points, separate them with a dash.

E.g. For Woman Technologist (no skin colour), convert U+1F469, U+200D, U+1F4BB to 1f469-200d-1f4bb.svg

Also, check out the directory listing on GitHub: https://github.com/twitter/twemoji/tree/gh-pages/v/13.1.0/svg

Don’t hotlink to these images, there are CDNs for that, as explained on the project readme. This is just a handy way to download an SVG so you can render it into an icon or use it in Inkscape, etc.

Lastly, technically, these are CC-BY 4.0, so attribution is required 🙄🙄

Have fun 🐦

Copy rich HTML with the native Clipboard API 📋

Ste Griffiths — Thu, 08 Jul 2021 15:57:15 +0000

The relatively new Clipboard API in browsers lets you load up the user’s clipboard as though they’d copied something themselves.

Copying text or images is fairly well documented, but examples writing rich text (as HTML) are harder to come by.

At time of writing, this is implemented in Chrome 86+ and in Safari. I got the content for this post from the Glitch project created by dsleeps at Google.

How to copy rich text HTML onto the Clipboard API

This sample assumes you have a <div class="js-output"></div> which contains your HTML to copy.

I’ll cut right to it:

try {
  const content = document.getElementsByClassName('js-output')[0].innerHTML;
  const blobInput = new Blob([content], {type: 'text/html'});
  const clipboardItemInput = new ClipboardItem({'text/html' : blobInput});
  navigator.clipboard.write([clipboardItemInput]);
} catch(e) {
  // Handle error with user feedback - "Copy failed!" kind of thing
  console.log(e);
}

Key things:

Get the HTML string (I’m using innerHTML of an element for this)
Create a new Blob.
- Param one must be an Array-like or a USVString value. So we wrap our HTML content in an array.
- Param two is an options object, where we set the MIME type.
Create a ClipboardItem around the blob, specifying MIME type again
Finally, write the ClipboardItem to the clipboard API.

Demo

I have a quickly-made Vue app with a ‘Copy to Clipboard’ button at https://stegriff.github.io/deployment-complete/. Source repo at https://github.com/stegriff/deployment-complete.

I hope this tutorial helps you! What will you make? 📋