James Stone's Blog

The other AI bubble

Mon, 16 Feb 2026 00:00:00 GMT

import Detail from "../../components/Detail.astro"; Excuse my click baity title. I mean the AI Filter Bubble. As the memory features of AI apps are getting smartera larger context window, I have recently found it harder to convice AI to not always recommend [nix](https://jamesst.one/tag/nix)! Ok that [example](https://chatgpt.com/share/69931fce-8be8-8002-bca2-dfeb7732be45) is specific to me. It has clearly remembered my love for it. But it got me thinking we are just making another [filter bubble](https://en.wikipedia.org/wiki/Filter_bubble). It's social media all over.
Whilst _I_ don't think there is anything wrong with nix. Sometimes it doesn't hurt to hear other minoritywell at least less popular [lispy](https://guix.gnu.org/) opinions.

A no backend future

Thu, 12 Feb 2026 00:00:00 GMT

A typical web tech stack is a frontend , backend and db

My prediction is the future for many ( not all) apps will be an LLM dynamically built frontend, using something like this https://tambo.co/blog/posts/introducing-tambo-generative-ui or MCP UI

Plus a DB that has strict permissions (think postgres RLS) and validation (check constraints etc)

]]>

Web Transport

Wed, 04 Feb 2026 00:00:00 GMT

There is a new (to me) way to communicate between the browser and server - Web Transport. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API) | Technology | Intended Use | Direction | Other Limitations | MDN | |--------------------------|---------------------------------------------------------------------|------------------------------------------|--------------------------------------------------|----------------------------------------------------------------------------| | Web Transport | Real-time, Bidirectional, can have sub streams | Server ↔ Client | HTTP/3 only. Secure context. No Safari (for now) | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API) | | WebSocket | Real-time, Bidirectional communication over a single TCP connection | Server ↔ Client | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) | | SSE (Server-Sent Events) | One way stream of data from server | Server → Client | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) | | Web Push | Low frequncy updates, push notifications. | Server → Browser's Server → Browser | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) | | WebRTC | Real-time communication (audio, video, data) between browsers | Client A ↔ Client B ( could be a server) | | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) | Web Transport fills a similar niche as Web Sockets. But it has a neat potential advantage over it. It allows multiple streams to be created on the same connection - crucially, each stream does not stall the connection. This solves a problem with Web Sockets where each message is sequentially processed. So if you send a large message followed by lots of small messages, the client has to wait for the large message. { /* ```mermaid graph TD subgraph "WebSocket: is a single stream" direction TB SA[LARGE\n\nMessage] SA --> SB[Small Message 1] SB --> SC[Small Message 2] end style SA fill:#ff9,stroke:#333,stroke-width:2px ``` */ } In Web Transport, multiple independent streams can be created, allowing simultaneous processing of different message types. { /* ```mermaid graph TD subgraph "Web Transport: Multiple streams, one connection" subgraph "Stream 1" direction TB MA[LARGE\n\nMessage] end subgraph "Stream 2" direction TB MB[Small Message 1] MB --> MC[Small Message 2] end end style MA fill:#ff9,stroke:#333,stroke-width:2px ``` */ } # example use case Picture a collaborative document editor where multiple users are working together: - Small cursor position updates (high frequency, need low latency) - Text changes/edits (medium-sized messages) - Document metadata (larger messages like version history) With Web Transport, all these can flow independently on the same connection, so cursor movements remain responsive even when large document changes are being processed. Unlike WebSockets, one user's large edit won't stall another user's cursor position updates. A prior solution was to open multiple WebSocket connections, one for each type of message. But this has a large overhead. --- Also of note is the Background Synchronization API [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API) although that is not really supported and is **not** triggerable from the server.

Satisfying TS

Wed, 28 Jan 2026 00:00:00 GMT

I see as used a lot in TypeScript, and it is one of my pet hates. It throws away type checking by asserting “I know better than the compiler”, which is often not true.

A common case is filtering a discriminated union array down to one variant. Say you have a chat app, people reach for an assertion like this:

type UpdateNewMessage = { type: "UpdateNewMessage"; text: string };
type UpdateUserJoined = { type: "UpdateUserJoined"; username: string };

type Update = UpdateNewMessage | UpdateUserJoined;

const allUpdates: Update[] = getUpdates();

const newMessageUpdates = allUpdates.filter(
  (update) => update.type === "UpdateNewMessage",
) as UpdateNewMessage[];

This compiles, but you have forced the array to be a UpdateNewMessage[] even if your filter is wrong.

Instead, use a type predicate to let the compiler narrow safely:

type UpdateNewMessage = { type: "UpdateNewMessage"; text: string };
type UpdateUserJoined = { type: "UpdateUserJoined"; username: string };

type Update = UpdateNewMessage | UpdateUserJoined;

function isUpdateNewMessage(update: Update): update is UpdateNewMessage {
  return update.type === "UpdateNewMessage";
}

const newMessageUpdates = allUpdates.filter(isUpdateNewMessage);
// inferred as UpdateNewMessage[]

The predicate keeps the check in one place, and you keep full type safety without a cast. These functions can live alongside your type declarations so your runtime checks stay aligned with your types.

Much more satisfying :D

More details: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates

]]>

Scroll padding top

Wed, 28 Jan 2026 00:00:00 GMT

When you have a sticky header, clicking an anchor link can cause the target element to be hidden behind the header. TIL scroll-padding-top solves this by adding an offset to the scroll position.

I think a screenshot best describes the problem:

here I have made set the header background’s opacity to 50% so you can see when you click the anchor the header obscures the target element.

On this site, I use it in the Nav.astro component to ensure that the header height is accounted for when scrolling to a fragment:

:root {
  --header-height: 3rem;
  scroll-padding-top: var(--header-height);
}

nav {
  height: var(--header-height);
  position: sticky;
  top: 0;
}

This ensures that when a user navigates to an anchor, the top of the content is aligned with the bottom of the sticky navigation bar rather than being obscured by it.

eg:

Live demo: My 2026 posts

More details: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-top

]]>

PC cattle

Tue, 27 Jan 2026 00:00:00 GMT

No, I am not talking about politically correct cattle, but rather the idea of treating your personal computer as cattle.

I have always liked the idea of treating servers as cattle, not pets. By this, I mean having all configuration defined as code.

Increasingly, I think it makes sense to treat your personal computer as cattle too - particularly with the rise of agents. For servers, the main advantages are that you can destroy, deploy and scale them without thought.

This is also a nice feature for personal computers, though traditionally it hasn’t been that important. You normally only have one PC.

However, I think LLMs and agents start to change this equation.

In the era of agents, by treating your personal computer as ~~cattle~~ code, you get a few benefits:

You can scale it as many times as you want - think of all those parallel agents you can run!
Your agents can help configure your computer - and when they stuff it up, you can just roll back to a previous version
You can set up tests on your personal computer to make sure it works.are the right services running, are the tools installed, does the system still boot and behave as expected? All automatically when you make changes or update your setup. This also helps your agents catch their mistakes.
You can (re)deploy your computer anywhere you want, destroy it whenever you want, and share the exact same environment with others.

To turn your servers into cattle, you may use terraform, containers, k8s, a combination of these or anyother tool, my personal favourite though is Nix. I live for that immuatbility. Though for personal computers in my mind it really only makes sense to use Nix (or I guess GNU Guix). That’s because it actually is designed for that.

]]>

How I use agents

Sun, 25 Jan 2026 00:00:00 GMT

import Detail from "../../components/Detail.astro";

Like many people, I have found AILLM agents to be increasingly useful.

Like people, some of the biggest power ups I have found are to give the agent a good environment. It works best when it: - has access to an **LSP** to allow it to quickly check type errors or just any error really. - can quickly run **lint** checks - has an existing **test** suite that it can incrementally add new tests for - in particular, I have found integration tests to be the most useful, that way you can let the agent go wild and not get bogged down by a particular implementation. It should not be scared to change - **Web dev tip**: Give it a browser it can use in the integration tests. - has a working **formatter** The beautiful thing is most agents auto run tests, code formatter and linters after every change. ----- {

My 2 cents above is based on my experience "vibe coding""vibe coding", I also haven't truly been 100% vibe coding... I still look at the code it writes and then based on that either:

completely undo the change and ask it to have another go, maybe slightly tweaking my prompt
give it a follow up prompt.

though I think starting fresh seems to get better results.
So I have been "vibe coding" an app to help me keep track of my running niggles/ injuries.

} The agents really came alive when I made them write some integration tests, using an actual browser. eg: ```ts import { test, expect } from "@playwright/test"; test("homepage loads just added diagnosis", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Current Diagnoses"); await expect(page.locator("diag 1")).toBeVisible(); }); ```

Markdown Code Fences with Multiple Backticks or Tildes

Thu, 22 Jan 2026 00:00:00 GMT

Today I learned that Markdown code fences can use any number of backticks (`) or tildes (~) as long as the number is at least three. The closing fence must have at least as many characters as the opening one.

This is especially handy for nesting code blocks that contain backticks, such as when documenting Markdown itself.

For example, to include triple backticks in a code block, you can use four tildes:

````

This is a code block with ```

````

Which renders as:

This is a code block with ```

From: https://susam.net/nested-code-fences.html

]]>

Jetstar Pain

Wed, 21 Jan 2026 00:00:00 GMT

Something I thought that was already illegal…

Not including compulsory fees in the total cost.

How do you pay without the fee?

]]>

Comeback

Sat, 17 Jan 2026 00:00:00 GMT

import Detail from "../../components/Detail.astro"; Inspired by my brother'sBen's blogecology [blog](https://bencology.bearblog.dev/) I decided to dust off my old blog. I have pulled in my old blog's posts, from pre-2020. All of which are full of cringe! I have also pulled in some of my TIL notes, which were in a separate repo before but will now live here.

Why Multi page apps are exciting again

Sat, 17 Jan 2026 00:00:00 GMT

One thing that really excites me in the browser world right now is the renewed focus on multi-page applications (MPAs).

For a long time, single-page applications (SPAs) felt like the only viable way to achieve certain features and performance characteristics. If you wanted fast navigation or polished page transitions, an SPA was basically the ~~default~~only choice.

Some of the classic advantages of SPAs included:

fast page loading after the initial load
smooth page transitions and navigation effects

But the interesting thing is that these features are no longer exclusive to SPAs.

New browser features are leveling the playing field

Compression

Soon, browsers will be able to use super smart compression based on pages you’ve already loaded. Instead of re-downloading large chunks of repeated HTML (headers, navigation, layout, etc.), servers can send much smaller diffs.

If you want to dig deeper into this, check out:

This directly chips away at one of the historical weaknesses of MPAs: having to reload the entire document on every navigation.

Native prefetching and prerendering

Another area where SPAs used to dominate was preloading.

Previously, only SPAs could easily preload the next page using JavaScript. For example, on link hover you might start loading the next page’s data, then instantly render it on click and refresh it in the background.

Now, browsers offer a native alternative via the Speculation Rules API | MDN.

Instead of custom JavaScript logic, you can declaratively tell the browser what kinds of pages should be prefetched or prerendered:

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "and": [
            { "href_matches": "/*" },
            { "not": { "href_matches": "/logout" } },
            { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
            { "not": { "selector_matches": ".no-prerender" } },
            { "not": { "selector_matches": "[rel~=nofollow]" } }
          ]
        }
      }
    ],
    "prefetch": [
      {
        "urls": ["next.html", "next2.html"],
        "requires": ["anonymous-client-ip-when-cross-origin"],
        "referrer_policy": "no-referrer"
      }
    ]
  }
</script>

This gives MPAs many of the same preloading capabilities that previously required an SPA and a client-side router.

Page transitions

Finally, although I think page transitions can be a gimmick, for a long time smooth transitions were another feature that only an SPA could provide.

That’s changing with the introduction of View Transitions. With cross document view transitions, MPAs can now animate between full page navigations in a way that previously required client-side rendering.

]]>

Borked systemd units

Tue, 09 Dec 2025 00:00:00 GMT

Previously when I have been debugging systemd services I have used: systemctl status --failed to get me all of the failed services

However that, as in my case today, did not return any failures, yet I knew a service was not working.

It turned out the service was not working as it had a bad setting:

❯ systemctl status home-manager-james.service
○ home-manager-james.service
     Loaded: bad-setting (Reason: Unit home-manager-james.service has a bad unit file setting.)
     Active: inactive (dead)

dec 09 13:53:44 darter hm-activate-james[1569]: Creating home file links in /home/james
dec 09 13:53:44 darter hm-activate-james[1569]: Activating onFilesChange
dec 09 13:53:44 darter hm-activate-james[1569]: Activating reloadSystemd
dec 09 13:53:44 darter systemd[1]: User systemd daemon not running. Skipping reload.
dec 09 13:53:44 darter systemd[1]: home-manager-james.service: Deactivated successfully.
dec 09 13:53:44 darter systemd[1]: Finished Home Manager environment for james.
dec 09 13:53:44 darter systemd[1]: home-manager-james.service: Consumed 804ms CPU time, 66.9M memory peak, 112.7M read from disk.
dec 09 13:56:16 darter systemd[1]: home-manager-james.service: Service has no ExecStart=, ExecStop=, or SuccessAction=. Refusing.
dec 09 14:01:26 darter systemd[1]: home-manager-james.service: Service has no ExecStart=, ExecStop=, or SuccessAction=. Refusing.
dec 09 14:02:36 darter systemd[1]: home-manager-james.service: Service has no ExecStart=, ExecStop=, or SuccessAction=. Refusing.

I am still not sure how to identify these services without directly checking their status, like I did above.

]]>

Using network in a nix build

Tue, 30 Sep 2025 00:00:00 GMT

You can not normally use network in a nix build, as it is not sandboxed and is therefore a source of non reproducibility.

However, with lib.fetchers.withNormalizedHash you can use the network so long as you provide a hash

A simplified (by me) example from: nixkpgs

{
  addDockerImageToNixStore = let
        defaultArchitecture = pkgs.go.GOARCH;
    in
    lib.fetchers.withNormalizedHash { } (
      { imageName
      , imageDigest
      , outputHash
      , outputHashAlgo
      , os ? "linux"
      , arch ? defaultArchitecture
      , tlsVerify ? true
      , name ? imageName
      }: pkgs.runCommand name
        {
          inherit imageDigest;
          impureEnvVars = lib.fetchers.proxyImpureEnvVars;

          inherit outputHash outputHashAlgo;
          outputHashMode = "nar";

          nativeBuildInputs = [ pkgs.skopeo pkgs.umoci ];
          SSL_CERT_FILE = "${pkgs.cacert.out}/etc/ssl/certs/ca-bundle.crt";
          sourceURL = "docker://${imageName}@${imageDigest}";
        }
        ''
          tmp="$(mktemp -d)"
          skopeo \
           --insecure-policy \
           --tmpdir="$TMPDIR" \
           --override-os "${os}" \
           --override-arch "${arch}" \
           copy \
           --src-tls-verify="${lib.boolToString tlsVerify}" \
           "$sourceURL" "oci://$tmp:latest" \
           | cat
           umoci raw unpack --rootless --image "$tmp" "$out"
        ''
    );
}

]]>

Git ting a good version from git

Thu, 10 Jul 2025 00:00:00 GMT

Not so much a TIL but I keep forgetting this form of git describe

So writing it down so I don’t forget it again…

git describe --tags

]]>

Container sidecar shells

Wed, 18 Jun 2025 00:00:00 GMT

Having tools in a container might sometimes be useful for different debugging. Just exec into it and start the diagnostics. With a distroless/minimized image, it’s not that easy. What we can do instead is attach a sidecar container:

docker run \
  --rm \
  -it \
  --pid=container:<container id> \
  --net=container:<container id> \
  --cap-add sys_admin \
  alpine \
  sh

from: Minimal containers using Nix

This starts an Alpine container that attaches to the same PID and network namespaces, giving you visibility into what’s running inside the original container.

To make this easier, you can define a Bash function:

sidecar-sh() {
  local target_container="$1"
  local container_id
  container_id=$(docker inspect --format '{{.Id}}' "$target_container")

  docker run --rm -it \
    --pid=container:"$container_id" \
    --net=container:"$container_id" \
    --cap-add sys_admin \
    alpine sh
}

]]>

Good programmers

Fri, 07 Mar 2025 00:00:00 GMT

Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.

Linus Torvalds

I actually think this can be generalised:

Most good Xers do X not because they expect to get paid or get adulation by the public, but because it is fun to X.

]]>

IKEAs restaurant

Wed, 29 Jan 2025 00:00:00 GMT

IKEA is the 6th largest restaurant in the world by number of customers. In 2017 there were 700 million people who ate an IKEA. Roughly 10 percent of the world.

From podcast

]]>

DDL Postgres Macros

Wed, 29 Jan 2025 00:00:00 GMT

In postgres you may find yourself repeating common operations on all your tables. For example adding an audit log, created times, modified user etc.

This can be tedious to add everywhere. Instead, you can create a postgres “macro” to update your DDL for you

Example

Created

CREATE OR REPLACE FUNCTION public.add_created_columns(
    table_type regclass
) RETURNS void
    LANGUAGE plpgsql
    SET search_path TO ''
AS $_$
declare
    statement text = format($$
        alter table %1$s
            add column created_user int references public."user"(id) not null,
            add column created_at   timestamptz not null default current_timestamp;
        $$,
        $1);
begin
    execute statement;
end;
$_$;

Usage

To use the add_created_columns macro, you simply call it by passing the table name as a parameter. Here’s an example of how to use it:

SELECT public.add_created_columns('public.orders'),
       public.add_created_columns('public.products');

This will modify the specified table by adding the created_user and created_at columns as defined in the macro.

Modified

To add similar columns for tracking modifications, you can create a new macro called add_modified_columns. Here’s an example:

Note: this also adds a trigger to keep the modified at up to date.

   create or replace function update_modified_at()
    returns trigger as $$
begin
    new.modified_at = current_timestamp;
    return new;
end;
$$ language plpgsql;


CREATE OR REPLACE FUNCTION public.add_modified_columns(
table_type regclass
) RETURNS void
LANGUAGE plpgsql
SET search_path TO ''
AS $_$
declare
statement text = format($$
        alter table %1$s
            add column modified_user int references public."user"(id) not null,
            add column modified_at timestamptz not null default current_timestamp;

        create trigger update_modified_at_trigger
            before update on %1$s
            for each row
            execute function update_modified_at();
        $$,
        $1);

begin
execute statement;
end;
$_$;

Usage

To use the add_modified_columns macro, you can call it similarly as follows:

SELECT public.add_modified_columns('public.orders'),
       public.add_modified_columns('public.products');

This will modify the specified table by adding the modified_user and modified_at columns.

]]>

Push to repo in GitHub Actions

Tue, 10 Dec 2024 00:00:00 GMT

I wanted to have a GitHub Action step push back to the repo it is running in.

For that you need the write permission. which can be added like so:

permissions:
  contents: write

from: git - Push to origin from GitHub action - Stack Overflow

eg in: add write permission · jamesmstone/chess@d0a3250 · GitHub

name: Push commit
on: push
permissions:
  contents: write
jobs:
  report:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Create report file
        run: date +%s > report.txt
      - name: Commit report
        run: |
          git config --global user.name 'Your Name'
          git config --global user.email 'your-username@users.noreply.github.com'
          git commit -am "Automated report"
          git push

It it discussed on the github blog: GitHub Actions: Control permissions for GITHUB_TOKEN - GitHub Changelog

and here is the docs: Automatic token authentication - GitHub Docs

]]>

Find sqlite dbs

Mon, 25 Nov 2024 00:00:00 GMT

Lots of applications use sqlite dbs. It can be useful to try and find them all. For this you can use the following command

find . -type f -exec sh -c 'head -c 16 "$1" 2>/dev/null | grep -q "^SQLite format" && echo "$1"' _ {} \;

as all sqlite files start with the header string: “SQLite format 3\000” , see: Database File Format

it can then be helpful to get the size of each result

find . -type f -exec sh -c 'head -c 16 "$1" 2>/dev/null | grep -q "^SQLite format" && echo "$1 $(stat -c%s "$1" | numfmt --to=iec)"' _ {} \;

]]>

Adding auto complete in bash

Thu, 29 Aug 2024 00:00:00 GMT

in bash code completions are setup using the complete command

you can print all current system completion s using complete -p

]]>

Decision making

Thu, 15 Aug 2024 00:00:00 GMT

if you’re unsure what to do, always choose the option that makes the better story.

Someone via geo wizard YouTube

]]>

Searching scrollback in Alacritty

Tue, 30 Jul 2024 00:00:00 GMT

I use Alacritty as my terminal emulator. To be honest I am not sure why… it gets out of my way and seems to be fast enough

Anyway, I wanted to be able to search the scrollback buffer.

That is quite trivial in alacritty., although as I haven’t read the manual I struggled to find it.

ctrl+f , as I first tried, does not work, but ctrl+shift+f does.

Search

Search allows you to find anything in Alacritty’s scrollback buffer. You can search forward using Ctrl Shift f (Command f on macOS) and backward using Ctrl Shift b (Command b on macOS).

From GitHub Feature page viewed at cacdb5b

There is also a Vi mode , with standard vi search

]]>

Blood types

Fri, 26 Jan 2024 00:00:00 GMT

I was aware humans have different blood types. A B AB O and you can be positive or negative.

However, I was not aware that A B AB O are actually groups of blood types. There are actually 45 known human blood types. See more. But new ones keep getting discovered!

]]>

Interactively debug a sh script

Wed, 16 Aug 2023 00:00:00 GMT

My common (ba)sh script setup is a bit like this:

# By default, in a pipeline of commands, the exit status of the pipeline is determined by
# the exit status of the last command in the pipeline. This changes that to fail if any command fails
set -o pipefail

# stop on exit
set -o errexit

# trace , print all commands before running.
set -x

Another approach that I just thought of that is useful is to enter an interactive shell should a command fail. eg


may_fail || bash

This is particularly useful when in a loop and subshell:


find "$root_directory" -type d | while read -r dir; do
    {
      cd "$dir"
      may_fail || bash # explore current state if this fails.
    }
done

It allows the loop to pause until you’re ready to continue by pressing Ctrl + d, or you can exit entirely using Ctrl + c.

]]>

AWK from and to pattern matches

Sat, 13 May 2023 00:00:00 GMT

when using awk to parse a file I was aware it uses this basic structure:

pattern { action }

seq 1 10 | awk '/2/{print $0}'

Outputs

and if you omit an action it defaults to print $0 ie print the whole matching line.

I was not aware however you can have multiple pattern seperated by , and it will match from the first pattern until the last pattern

Relevant excerpt from the man page:

A pattern may consist of two patterns separated by a comma; in this case, the action is performed for all lines from an occurrence of the first pattern though an occurrence of the second

Example

 seq 1 10 | awk '/2/,/8/'

Outputs

Discovered from: https://www.reddit.com/r/bash/comments/12z9snv/comment/jhrlrg2/

]]>

Swimming pool depth

Sat, 13 May 2023 00:00:00 GMT

In the men’s 100-meter breaststroke final at the 2024 French Olympics, no swimmer finished better time then Tokyo Olympics race from 3 years earlier.

In the women’s 400 freestyle, three former world record holders failed to reach their personal bests, and Katie Ledecky did not break 4 minutes.

The swimming pool at Paris La Défense Arena is 2.15 meters deep, below the recommended 3 meters by World Aquatics but above the previous minimum of 2 meters.

Shallower pools may cause “wavy” or choppy water, affecting performance, especially in breaststroke.

From: Yahoo Sports

However, Kyle Chalmers swam the world’s fastest time in the 100m freestyle. however as he was not swimming the first leg of the race it does not count. From: https://www.tyla.com/news/kyle-chalmers-olympics-relay-world-record-545320-20240729

]]>

ESM HTTP imports

Thu, 22 Dec 2022 00:00:00 GMT

When using all modern versions of JS you can use esm modules.

What I did not realise is you can import modules at runtime over http(s).

To help with this there are a range of CDNs that host the whole of NPM designed for ESM.

Some examples include:

https://esm.sh/
https://esm.run/ - from: https://www.jsdelivr.com/

Example

import { version, verify } from "https://esm.run/jsonwebtoken-esm";

console.log(version); // "8.5.1" at time of writing.
const token =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwic2NvcGVzIjpbImEiLCJiIl0sImlhdCI6MTUxNjIzOTAyMn0.RYe2h0fD7XqWDxSepytntccG5-EfrdGmVmqwfhi36O0";
const decoded = verify(token, "your-256-bit-secret");
console.log(decoded);

]]>

Alias plpgsql variables

Thu, 24 Nov 2022 00:00:00 GMT

Inside plpgsql function you can often get naming conflicts between input parameters and column / table names

My previous modus operandi was to qualify the input param using the function name. For example:

Schema

create table data.user (
  id serial primary key;
  name text not null;
  birth_date date not null;
);

Options

Qualify using function name

create function age( "user" int ) returns int as
$$
  declare
    user_id alias for "user";
    --  user_id alias for $1; -- alternative
  begin
    select age(current_date, birth_date) from data.user where id = age.user ;
  end;
$$ language plpgsql;

ALIAS

But you can also use ALIAS FOR:

create function age( "user" int ) returns int as
$$
  declare
    user_id alias for "user";
    --  user_id alias for $1; -- alternative
  begin
    select age(current_date, birth_date) from data.user where id = user_id ;
  end;
$$ language plpgsql;

Aside: For a function that only does a single select a SQL language function is more appropriate.

]]>

React get a components prop types

Thu, 24 Nov 2022 00:00:00 GMT

When using TS with React you may want to get the types of another component.

const MyButton: React.FC<{
  value: string;
  onChange: (newValue: string) => void;
}> = () => {
  return <button value={value} onchange={onChange} />;
};
type ButtonProps = React.ComponentProps<typeof MyButton>;

// equivalent:

type ButtonProps = { value: string; onChange: (newValue: string) => void };

This can be particularly useful when using an external library that does not expose the types for a component.

]]>

Spotify playlist to Dropbox - Version 2

Wed, 04 Feb 2015 00:00:00 GMT

This is a post about an IFTTT recipe I made. Not sure what IFTTT is ?

Unfortunately for sometime now version 1 of these recipes hasn’t been working. Now that I have some more time on my hands I have decided to fix it.

Improvements

It now works again!
Its quicker than version 1
Works more reliably.

Disadvantages

Only works for the first 100 songs in playlists with more the 100 songs

Technical differences between versions

	Version 1	Version 2
Backend	- Yahoo Pipes	- PHP ( I now know PHP :D ) - Memcache
APIs used	- Last Fm - Soundcloud - Spotify (Unofficial through webpage scrapping)	- Last Fm - Soundcloud - Spotify (Official)

Upgrading to new version

Nothing should need to be changed when upgrading from the previous version.

Using New Version

What this recipe does

These recipes download the songs in your Spotify Playlist via Last.fm Free Music and Soundcloud downloadable tracks. The tracks at these sites have been submitted by the artist and been marked as free and downloadable for the public.

Recipes

What’s the difference? Download only exact matches only does steps 1 to 3 of *How it Works *Below. As such it is very limiting (it only gets the exact song).

Download only exact matches (source Last.fm Free Music)

Save to box

Save to dropbox

Save to google drive

save to skydrive

Download all (Source Last.fm Free Music and Soundcloud)

Save to box

Save to dropbox

Save to google drive

save to skydrive

Set up Instructions

In Spotify right click on your playlist and select *Copy Spotify URI

How to Copy Spotify URI
- Then go to the desired recipe (links above)
- In the URL field paste your *Spotify URI *after the “=” sign
Paste the Spotify URI after the ”=” sign
- In order for the script to work the feed url you just completed in step 3 needs to be loaded once ( without IFTTT) so copy the complete feed url from IFTTT and paste it into your browser

How it works

The script checks your Spotify playlist
Then song by song it checks to see if the song is available legally for free from Last.fm
If it is the script tells IFTTT to add it to your Dropbox or equivalent.
If it isn’t the script searches Soundcloud for the songs title and artist and then downloads the first downloadable song. This is why remixed version are often downloaded.

Other IFTTT recipes

I made a post about how I use IFTTT -interested?
My Public IFTTT Profile

Help

Need help? Have a suggestion? Please leave a comment

Note: I’m still working on the Download all (Source Last.fm Free Music and Soundcloud) version Soundcloud API issues so for now the Download all version is working like the exact version, but that is soon to change.

]]>

Cloud HQ

Sun, 25 May 2014 00:00:00 GMT

Cloud HQ - How I (automatically) sync all my files across the web.

What it is

Simply - Cloud HQ is an online service that allows you to sync your files across multiple file storing services.

Supported Services

Cloud HQ Supported Services as of 23/5/14

Cloud HQ currently supports the following syncing services:

Google Drive
Gmail
Dropbox
Box
Evernote
Onedrive
Onedrive Pro
Share Point
WebDAV
Basecamp Classic
Basecamp
Sugar Sync
Egnyte
Yandex Disk
Microsoft Onenote (maybe soon)
Salesforce (maybe soon)

Chrome Extension

I was incredibly surprised by how helpful the chrome extension is.

The extension not only allows you to follow what files it has just synced, but in google drive it also allows you to open a file from any of your connected services.

Referral Link

If you are interested you can get an extended trial by using this link https://cloudHQ.net?r=9u4p - plus you also get to help me!

]]>

My Fitbit channel for IFTTT

Sun, 09 Feb 2014 00:00:00 GMT

UPDATE 21/5/14: IFTTT has just released an official fitbit channel. So I recommend everyone uses that. As a result I will discontinue my version at the end of this month. Thanks to everyone who tried and particularly those who tested my fitbit channel. I currently have plans for a 3rd party Snapchat Channel. So keep posted :)

My Fitbit channel for IFTTTis ~~being~~ made - ~~sorry to get your hopes up :/~~ and i need some people to test it

Status

As we speak I’m currently coding a 3rd party IFTTT channel for Fitbit. It will work by pretending to be a wordpress blog. So unfortunately this channel would prevent the use of the WordPress channel I’m hoping to get the IFTTT channel out in ~~about a month~~ a week or so ( but that depends on how much help I get :P ) The first version will only have actions. A future version may be made that has triggers as well.

However, as I don’t really have a use for that ( I don’t own a fitbit) it depends on if I get a fitbit - please see below

Speaking of which if you can donate/ find this project helpful or would like to increase your chance of getting triggers. Please help me buy a fitbit?

How you can help

I am after some alpha/beta testers for the fitbit channel Update: anyone interested please go here and leave a comment on the post with any feedback
I’m curious about the legal requirements with holding medical/fitness data about individuals from all over the world. Obviously I wouldn’t keep the data for longer then I would be required to. So if you have an expertise in this area please contact me by leaving a comment.
Buy me a fitbit. I don’t have the money for one - I’m just a kid

Want to keep updated?

]]>

A New Design

Sun, 22 Dec 2013 00:00:00 GMT

I did it! - I finally got round to designing my own version of the site.

The new design is live now, so please let me know what you think (nothing is perfect the first time). Hopefully there are no bugs, but if you see any please let me know by leaving a comment.

Enjoy the new design.

]]>

The Best Blogs Ever

Mon, 16 Dec 2013 00:00:00 GMT

Ok you got me these may not be the best blogs ever, however these are the blogs I’m obsessed with and read every post of.

For all the websites, I have grouped them by category and added their Alexa rank (as of 26th Nov 13) along side the site.

Tech

General

Lifehacker AUS
- Alexa Rank: 14,003
Lifehacker USA
- Alexa Rank: 504
The Buffer Blog
- Alexa Rank: 1,526
IFTTT Blog
- Alexa Rank: 5,464
Kinja: How I Work
- Alexa Rank, not relevant as this is a tag from Kinja Blogs by Gawker

Web development

Codrops
- Alexa Rank: 1,403 Note: rank for the entire site tympanus.net
CSS Tricks
- Alexa Rank: 1,051
Smashing Magazine
- Alexa Rank: 944
David Walsh
- Alexa Rank: 4,526
Lea Verou
- Alexa Rank: 54,903
Web Designer Wall
- Alexa Rank: 7,992

Web inspiration

One Page Mania
- Alexa Rank: 108,629
Awwwards
- Alexa Rank: 2,733

Humour

Cracked
- Alexa Rank: 653
Explosm
- Alexa Rank: 3,933
The Oatmeal
- Alexa Rank: 2739
xkcd
- Alexa Rank: 1,924
- What If xkcd

Maybe your blog or site?

What blogs / sites are you obsessed with?

]]>

The Ultimate Free Music Setup

Fri, 06 Dec 2013 00:00:00 GMT

How to get the ultimate free music setup - ok maybe it’s not the ultimate setup, but it’s still pretty cool

Features: Continuous free, legal and unlimited, personally recommended songs that support the artist. - sorry the ended up being a mouthfull

The System

Get an account for each service / download the software
- Dropbox
- IFTTT
- Spotify
- Blockify - windows only or potentially Smutefy
- Last Fm
Link them all together
- Spotify to Last.fm
  - open up Spotify preferences
  - tick scrobble to Last.Fm and enter your Last.Fm details
- Last.fm to IFTTT to Dropbox
- Dropbox to Blockify to Spotify
  - Open up Blockify then choose your Dropbox music folder by going Options -> Set Folder

Extra points

Sync your new Dropbox music folder to your mobile device using an app like MusicDropNPLay for Android or Tunebox for iOS.

Auto-capture phone thief

Mon, 25 Nov 2013 00:00:00 GMT

Lockwatch Anti-Theft is an android app that takes a photo using the front facing camera when your passcode is incorrectly entered. It then sends that photo along with the phones’ current GPS location to your email account.

Lockwatch by default has a nice feature enabled to prevent false alarms. This means Lockwatch will give you 10 seconds to type in the correct password before it sends the alert. If you type in the correct password, the alert will be cancelled and you will not receive an e-mail.

Extra Points

Want the photo to automatically be added to your dropbox. Using IFTTT you can. If you follow the steps above and have the email address be a gmail one. You can use the IFTTT recipe below:

Other IFTTT recipes

I recently made a post about how I use IFTTT -interested?
My Public IFTTT Profile

Help

Need help? Have a suggestion? Please leave a comment

]]>

My Awesome Stuff List

Fri, 22 Nov 2013 00:00:00 GMT

Not a bucket list - just a lot like one :P

Adrenaline

bungee jump
skydive

Travel

Visit every continent
- ~~Australiasia~~
- Africa
- ~~Asia~~
- ~~Europe~~ - fun fact: only continent without an “a” and every other has at least 2
- North America
- South America
- Antartica
Visit the 7 natural wonders of the world -as decided be me :)
- Grand Canyon
- ~~Great Barrier Reef~~
- Harbor of Rio de Janeiro
- visit Mount Everest base camp
- See the Aurora
  - Australis
  - Borealis
- Victoria Falls
Swim in every ocean
- ~~Pacific~~
- ~~Indian~~
- Atlantic
- Southern
- Arctic

Fitness

Run a marathon
Run a triathlon
100 consecutive pushups
200 consecutive situps

Cool stuff to dream of mastering

Awesome shuffle card
Walking hand stand
Flip
Song on guitar
Solve a Rubix cube

Other items

Go without Internet for a month
Go without a computer for a month
Die with a smile on my face - yeah im odd
Break a world record – suggestions?? what world record should I attempt?

]]>

Update: Spotify playlist to Dropbox

Mon, 11 Nov 2013 00:00:00 GMT

How to update to the latest version of this IFTTT Recipe

Issue Resolved:

Steps to implement fix:

In your IFTTT recipe change the URL field to http://ifttt.jamesstone.com.au/?type=&uri= making sure to change:

?type= to either ?type=full or ?type=exact
&uri= to &uri= with your spotify playlist URI appended - example http://ifttt.jamesstone.com.au/?type=full&uri=spotify:user:spotify:playlist:4hOKQuZbraPDIfaGbM3lKI (Top 100 songs on Spotify)

~~This is a post detailing an issue with the Spotify playlist to Dropbox recipe~~

Issue

~~The rss file that is generated by yahoo pipes takes to long to load and IFTTT often timesout.~~

Solution

~~Slowly being developed.Provide a Cache for IFTTT so when IFTTT loads the rss file it doses’t time out.~~

How you can help

~~Keep me posted on any future bugs by leaving a comment~~
~~If you know any PHP and are willing to help please leave a comment (I know almost none)~~

~~I’m after some PHP code that for an rss file on request:~~
- ~~Checks for previous cache of the file~~
- ~~If previous cache found:~~
  - ~~send current cached file ( would be slightly old)~~
  - ~~then once sent “cached version”~~
  - ~~get current rss version and update the cache~~
- ~~If previous cache not found:~~
  - ~~get current rss cache~~
  - ~~send current rss file~~
  - ~~then once sent loads “live version” to cache~~

Note:

~~The recipes still work, however they aren’t trigger as frequently as they should be.~~

]]>

Google celebrates your birthday

Fri, 08 Nov 2013 00:00:00 GMT

Thanks Google. What a cool personalised Google birthday doodle.

After visiting Google’s homepage on my birthday I got a pleasant surprise. Google now celebrates your birthday with a doodle.
To get a personalise Google Doodle on your birthday you have to be signed in and obviously it has to be your birthday.

]]>

Spotify playlist to Dropbox

Wed, 06 Nov 2013 00:00:00 GMT

New Version now available

This is a post about an IFTTT recipe I made. Not sure what IFTTT is?

What this recipe does

Recipes

What’s the difference? Download only exact matches only does steps 1 to 3 of *How it Works *Below. As such it is very limiting (it only gets the exact song).

Download only exact matches (source Last.fm Free Music)

Save to box

Save to dropbox

Save to google drive

save to skydrive

Download all (Source Last.fm Free Music and Soundcloud)

Save to box

Save to dropbox

Save to google drive

save to skydrive

Set up Instructions

In Spotify right click on your playlist and select *Copy Spotify URI * then go to the desired recipe
- How to Copy Spotify URI
- Then go to the desired recipe (links above)
- In the URL field paste your *Spotify URI *after the = sign ( or you can leave it as spotify:user:spotify:playlist:4hOKQuZbraPDIfaGbM3lKI for Top 100 tracks currently on Spotify playlist )
- Paste the Spotify URI after the = sign

How it works

Yahoo pipes checks your spotify playlist
Then song by song it checks to see if the song is available legally for free from Last.fm
If it is Yahoo Pipes tells IFTTT to add it to your dropbox or equivilent.
If it isn’t Yahoo Pipes searches Soundcloud for the songs title and artist and then downloads the first downloadable song. This is why remixed version are often downloaded.

Update: Issues

~~The recipes will still work, however the recipes aren’t triggered as frequently as they should be. [Details]~~

Fixed [Details]

Other IFTTT recipes

I recently made a post about how I use IFTTT -interested?
My Public IFTTT Profile

Help

Need help? Have a suggestion? Please leave a comment

]]>

How I use IFTTT

Wed, 06 Nov 2013 00:00:00 GMT

After reading Aaron Francis‘ blog post about how he uses Evernote and IFTTT I felt inspired to make this post about how I use IFTTT.

At present I have 22 IFTTT recipes. Here are some of my favourite.

Lots of my school related recipes are:

Sync my Services

Auto post

I try to keep my auto posting recipes to a minimum. I do this, as I hate browsing through a social network and seeing posts that have obviously been auto posted. Anyway here are my auto posting recipes:

Update my Facebook Status “Happy New Year” every year on the 1st of Jan at midnight
Update my Facebook Status “Merry Christmas” every year on the 25th of Dec at 11:22 am

Public Recipes

You can view all my public recipes here

How do you use IFTTT? What are your favourite IFTTT recipes?

]]>

Why you should use IFTTT?

Tue, 05 Nov 2013 00:00:00 GMT

IFTTT is an amazing tool. It has made my life online so much easier- are you sold?

So why should you use IFTTT.

But what is IFTTT?

IFTTT is a service that lets you create powerful connections [between your online accounts] with one simple statement: If This Then That (Image Via: IFTTT)

So basically, IFTTT allows you to connect your online services via their API‘s. These connections are called recipes which are made from the phrase IF THIS THEN THAT.

Still don’t get it?

Sorry that’s my fault. It’s a hard concept to explain. I think an example will help.

IFTTT allows you to:

There are an infinite number of possibilities.
UPDATE: I have since made a post about how I use IFTTT. That post can be found here

The Services IFTTT support are called channels. Currently there are 72 channels with more regularly being added. To view them all you can click here

So why use IFTTT

Pretty simply - It will make your life easier.

]]>

Why I blog? aka Welcome

Mon, 04 Nov 2013 00:00:00 GMT

Welcome to my Blog :)

A little about me

Name: James Stone
Age: 17
Job: Student
Location: Australia

I wasn’t really sure what my first post, my intro post, should talk about. So I have decided to mention why I’m blogging.

I have decided to start blogging for a few reasons but I guess the main reason is my online presence.

Online Presence

Growing up the number of times I have heard the media, school, speakers etc talk about our online image. Particularly about stories where people have lost jobs or failed to get them over their poor digital image. And like most kids my age I’m sick of hearing their message about why we shouldn’t post anything stupid online as it stays “forever”. I disagree with this message. I think they should instead be teaching us how to market ourselves online, to create the best possible digital image.

I think their message is scaring us from contributing to the public web (at least its scaring me!). However I also think that rather than not posting anything online and having a neutral online presence it’s important to have a positive one. So I have decided to take their advice one step further. Rather than not being stupid online, I will try and standout by having a strong positive online presence, that can be used to market myself.

Future Job?

Another key reason why I’m going to blog is for a future job.

At the moment I’m not really sure what job I would like to have. However, I’m leaning towards a career in IT likely one that involves web development. As such I’ve noticed many blogs and portfolio sites of those in the industry where they display all their works. So I’m also planning on using this as a blog as a place to showcase my creations.

Credit where its due

As this is the opening post on this blog, I think it’s important to give credit to the blogs current design. The theme, Decode, is created by Scott Smith. (Edit: 16th Mar 2017, this isn’t actively maintained in the same compacity) However, I’m keen to create my own theme – I just haven’t had the chance yet

I hope you enjoy reading this blog as much as I have so far enjoyed creating it

James

]]>

James Stone's Blog

The other AI bubble

A no backend future

Web Transport

Satisfying TS

Scroll padding top

PC cattle

How I use agents

Markdown Code Fences with Multiple Backticks or Tildes

Jetstar Pain

Comeback

Why Multi page apps are exciting again

New browser features are leveling the playing field

Compression

Native prefetching and prerendering

Page transitions

Borked systemd units

Using network in a nix build

Git ting a good version from git

Container sidecar shells

Good programmers

IKEAs restaurant

DDL Postgres Macros

Example

Created

Usage

Modified

Usage

Push to repo in GitHub Actions

Find sqlite dbs

Adding auto complete in bash

Decision making

Searching scrollback in Alacritty

Blood types

Interactively debug a sh script

AWK from and to pattern matches

Example

Swimming pool depth

ESM HTTP imports

Example

Alias plpgsql variables

Schema

Options

Qualify using function name

ALIAS

React get a components prop types

Spotify playlist to Dropbox - Version 2

Improvements

Disadvantages

Technical differences between versions

Upgrading to new version

Using New Version

What this recipe does

Recipes

Download only exact matches (source Last.fm Free Music)

Download all (Source Last.fm Free Music and Soundcloud)

Set up Instructions

How it works

Other IFTTT recipes

Help

Cloud HQ

What it is

Supported Services

Chrome Extension

Referral Link

My Fitbit channel for IFTTT

Status

How you can help

Want to keep updated?

A New Design

The Best Blogs Ever

Tech

General

Web development

Web inspiration

Humour

The Ultimate Free Music Setup

The System

Extra points

Further Reading