Forem: GreggHume

Yaak blank screen fix with app shortcut (Ubuntu)

GreggHume — Tue, 03 Mar 2026 16:03:17 +0000

I made a script for Ubuntu users that installs Yaak the right way so you can get passed the blank screen. This might work for other distros.

Steps

Download Yaak AppImage from here: https://yaak.app/download
Open your terminal, cd into your downloads folder.
Copy the script below, change the APP_NAME in the script to your yaak app image file name in your downloads folder
Paste the whole script into your terminal and press enter
Search yaak in your applications and open it

What the script does?

It creates an app shortcut with the appropriate ENV so the app runs on your machine. You can always change the env for one of the other ones if you are on Wayland.

Script

#!/bin/bash

# Change this if your image has a different name
APP_NAME="yaak_2026.2.4_amd64.AppImage"

# 1. Configuration
TARGET_DIR="$HOME/Applications"
ICON_DIR="$HOME/.local/share/icons"
SHORTCUT_PATH="$HOME/.local/share/applications/yaak.desktop"

# 2. Setup folders
mkdir -p "$TARGET_DIR" "$ICON_DIR"

# 3. Copy AppImage (so it stays in Downloads too)
if [ -f "$HOME/Downloads/$APP_NAME" ]; then
    cp "$HOME/Downloads/$APP_NAME" "$TARGET_DIR/yaak.AppImage"
    chmod +x "$TARGET_DIR/yaak.AppImage"
    echo "AppImage copied to $TARGET_DIR"
else
    echo "Error: $APP_NAME not found in Downloads."
    exit 1
fi

# 4. Extract and move your specific High-DPI icon
echo "Extracting High-DPI icon..."
cd "$TARGET_DIR"
# Extracting specifically from the path you found
./yaak.AppImage --appimage-extract "usr/share/icons/hicolor/256x256@2/apps/yaak-app.png" > /dev/null 2>&1

if [ -f "squashfs-root/usr/share/icons/hicolor/256x256@2/apps/yaak-app.png" ]; then
    cp "squashfs-root/usr/share/icons/hicolor/256x256@2/apps/yaak-app.png" "$ICON_DIR/yaak-app.png"
    echo "Icon successfully installed to $ICON_DIR"
fi

# Clean up extraction artifacts
rm -rf squashfs-root

# 5. Create the Shortcut with Absolute Paths
cat <<EOT > "$SHORTCUT_PATH"
[Desktop Entry]
Type=Application
Name=Yaak
Comment=Modern API Client
Exec=env WEBKIT_DISABLE_COMPOSITING_MODE=1 $TARGET_DIR/yaak.AppImage
Icon=$ICON_DIR/yaak-app.png
Terminal=false
Categories=Development;
EOT

# 6. Finalize
chmod +x "$SHORTCUT_PATH"
update-desktop-database ~/.local/share/applications/

echo "------------------------------------------------"
echo "Yaak is ready! Search for 'Yaak' in your menu."

Once run yaak should be installed, you can find it when searching app and it should run better than when installing the app image via the app center.

AWS S3 Change Url, Proxy Url, Map to Domain in 2024

GreggHume — Fri, 22 Nov 2024 08:31:23 +0000

It is not hard to map your ugly s3 url to your domain so you can have nice urls to share with your customers.

I will take you to this
https://files.utickets.co.za/media_wHIuV57H_i5XWqS3KN.jpg

from this
https://s3.eu-west-2.amazonaws.com/files.utickets.co.za/media_wHIuV57H_i5XWqS3KN.jpg

https://files.utickets.co.za.s3.eu-west-2.amazonaws.com/media_wHIuV57H_i5XWqS3KN.jpg

Its easy so dont stress. Get it working and then you can refine from there. I recommend you experiment with a new bucket.

Steps Outline

create a bucket with your domain in the name
add the usual bucket policy to make your files accessible
add the usual cors permissions to make your bucket files accessible
add a cname dns entry into your domain manager

Steps

1: Your bucket name needs to have your domain in it, for example your bucket name can be "yoursite.com", "assets.yoursite.com", "files.yoursite.com", "cdn.yoursite.com" - whatever you want.

2: Copy and paste or set your own bucket permissions that you want. Here is the Bucket policy for public accessibility, swop out bucket name for your bucket name (the files.yoursite.com parts):

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::files.yoursite.com/*"
        }
    ]
}

3: Copy and paste the Cross-origin resource sharing (CORS) or set/use your own:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

4: In your domain manager where you manage your website domain DNS etc you will need to add a cname record that will map your custom url to s3's url.

I get the s3 url by uploading an image into the bucket and then viewing the image and copying its url.

The url will look like this (not exactly what we expect)
https://s3.eu-west-2.amazonaws.com/files.utickets.co.za/media_wHIuV57H_i5XWqS3KN.jpg

You can actually cut and paste your bucket name to the front of the url and it works:
https://files.utickets.co.za.s3.eu-west-2.amazonaws.com/media_wHIuV57H_i5XWqS3KN.jpg

Then in your DNS manager add your cname entry like so:
host: files.yoursite.com
value: files.yoursite.co.za.s3.eu-west-2.amazonaws.com

Save it and wait for it to take affect. Now you have beautiful urls.

If you try and view your bucket files through your new url and it throws a permission error, this is because your permission policy or cors might be blocking it, you will need to try the open policies I have given and then work from there.

Thanks for reading! I hope this helped.

Prevent body from scrolling when a modal is open : css solution

GreggHume — Tue, 10 Sep 2024 22:48:03 +0000

The latest solution is to use css. We were graced with the overscroll-behavior property. But it is worth noting it only seems to work if there is a scroll bar on the element you are applying it to, otherwise it seems to have no effect.

If you want to prevent scrolling from bleeding through to other divs you use:

overscroll-behavior: contain;

or if you are using tailwind, the class is overscroll-contain

You can see its support here (it has full browser support):
https://caniuse.com/css-overscroll-behavior

More on overscroll here:
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Also see this stackoverflow discussion that has been discussing this top since 2012 and is still going.

Svelte 5: Slot / children example

GreggHume — Wed, 21 Aug 2024 13:17:16 +0000

Svelte 5 has deprecated the slot tag. So now you have to use children, but its not clear how to do this.

Here is an example of how to use the slot / children in the layout component.

<script lang="ts">
  let { children } = $props();
</script>

{@render children()}

Before doing this you will see errors like:
"Using <slot> to render parent content is deprecated. Use {@render ...} tags instead"

Whatsapp Webhook Setup and Nodejs Code Example

GreggHume — Tue, 18 Jun 2024 13:56:43 +0000

Solution

If you are getting a validation error the problem is not with ngrok, localtunnel or whatever proxy you are using, its with your webhook code.

Your webhook needs to be a POST and a GET because meta dashboard does a GET for url validation but when the webhook is fired they do POSTs.

Here is the webhook code:

  // this is a GET and POST endpoint
  async whatsapp(ctx) {
    const token = "secret"; // same secret you type in the secret input in the whatsapp dashboard

    // these params are sent when you do the 
    // callback url validation in the dashboard
    const mode = ctx.request.query['hub.mode'];
    const challenge = ctx.request.query['hub.challenge'];
    const verify_token = ctx.request.query['hub.verify_token'];

    // confirms with whatsapp webhook/callback url is good (only happens once)
    if (mode === "subscribe" && verify_token === token) {
     return ctx.send(challenge, 200);
    }

    // handle webhook post data (type taken from attached repo in article, see below)
    const body = ctx.request.body as WebhookObject;

    // do some stuff here

    // then reply to whatsapp with status 200 otherwise it will
    // repeatedly send the webhook for same messages
    ctx.send(200)
  }

Types

If you want the types for what is returned from the webhook then copy and paste them from this repo, the author did a great job at typing, although it is a little outdated:
https://github.com/WhatsApp/WhatsApp-Nodejs-SDK/blob/main/src/types/webhooks.ts

Error (you may have encountered)

"The callback URL or verify token couldn't be validated. Please verify the provided information or try again later."

Once you have your code correct and your webhook endpoint is set to GET and POST, then your webhook will verify.

Fun tip (vscode built in proxy)

In vscode there is a tab in your terminal/console that says 'ports', you click on there and then you click on add port and type in your server port, it creates a tunnel/proxy for you the same as ngrok or localtunnel would:

Vite: How to bundle / group chunks together

GreggHume — Fri, 14 Jun 2024 08:28:51 +0000

If you use a library like Svelte or Vue you might have noticed that Vite and Rollupjs create tons of tiny js files - in my case causing the browser to have to download 72 js files for one web page - some files being less then 1kb.

There is a way to group chunks in your vite.config, its manual but it can help you.

First a screenshot of the problem:
Every function or component in my codebase ends up being its own chunk, even commonly use ones

I want to group some of my imports or modules in my codebase into one chunk to reduce the amount of files / script tags vite and rollup create. Here is an example of the vite config on how to achieve this:



// vite.config.ts

// modules I want to group (by file path)
const group_chunks = [
  "src/constants.ts",

  "src/lib/utils/util_fetch.ts",
  "src/lib/utils/util_date_get_time.ts",
  "src/lib/utils/util_price_to_rands.ts",
  "src/lib/utils/util_date_to_friendly_date.ts",

  "flowbite-svelte/dist/typography/A.svelte",
  "flowbite-svelte/dist/typography/Button.svelte",
  "flowbite-svelte/dist/toast/Toast.svelte",

  "svelte-hero-icons/dist/Icon.svelte",

  "src/lib/components/logo.svelte",
  "src/lib/components/form/input.svelte",
  "src/lib/components/form/field.svelte",
  "src/lib/components/clickToCopy.svelte",
  "src/lib/components/header/header.svelte",
  "src/lib/components/general/loader.svelte",
]


export default defineConfig({
  // ...other config stuff

  // how to group chunks
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          const is_group_chunk = group_chunks.some(partialPath => id.includes(partialPath));

          if (is_group_chunk) {
            return "general" // this will create a chunk called general
          }
        },
      },
    },
  },
});

This reduces all those chunks into one chunk called general:

Result

In this case i have reduced 15 trips to the server down to 1. This is especially helpful on mobile when my burger menu was taking a long time to become functional because its script was loading last because rollup didnt know its importance - now that its in the general chunk, it loads in faster.

Lighthouse Score

In terms of lighthouse the performance is around the same although i am now getting a warning about unused javascript in my general file I am happy to suffer that warning considering the users experience has improved.

Automate

You could put all common assets in a common folder and update the vite config to see if the file is in that folder and automatically add it to a grouped chunk. Minor tweak to the code.

If you are really smart you could make a plugin that allows you to add comments to your imports that tells vite what chunk to group that import into - this is how webpack used to work.

Example of how webpack allowed chunk naming in code:



const Login = import( /* webpackChunkName: "login" */ '../views/LoginView.vue'),

Thats it,
I hope this helped and good luck

Payfast API: Easy Nodejs signature and headers function

GreggHume — Tue, 11 Jun 2024 13:54:25 +0000

Lets be real, Payfast API is confusing and their documentation is too.

If you want a nice reusable function that creates the signature and request headers for you please use this.

This will help you get less "Merchant authorization failed." and data discrepancy errors.

import crypto from "crypto"

function createPayfastHeaders(data) {
  // remember live and sandbox merchant_id and passphrase are different
  const merchant_id = "your_merchant_id"
  const passphrase = "your_pass_phrase"

  data = {
    ...data,
    passphrase,
  }

  const headers = {
    "merchant-id": merchant_id,
    "version": "v1",
    "timestamp": (new Date()).toISOString().split('.')[0],
    "signature": ""
  }

  const req_headers = new Headers()
  Object.keys(headers).forEach(key => {
    req_headers.append(key, headers[key])
  })

  const signature_data = {...data, ...headers}
  let signature_uri = "";
  Object.keys(signature_data).sort().forEach(key => {
    if (key !== "signature") {
      signature_uri += `${key}=${encodeURIComponent(signature_data[key]).replace(/%20/g, '+')}&`
    }
  });

  // Remove the last '&'
  signature_uri = signature_uri.substring(0, signature_uri.length - 1);

  const signature = crypto.createHash("md5").update(signature_uri).digest("hex");
  req_headers.set("signature", signature)
  req_headers.append("Content-Type", "application/json") // <- important

  return req_headers
}

Example on how to use it:

async function createRefund(payment_id, refund_params) {
  const headers = createPayfastHeaders(refund_params)

  const url = `https://api.payfast.co.za/refunds/${payment_id}?testing=true`; // <- add testing true for sandbox testing
  const response = await fetch(url, {
    method: "POST",
    headers: headers,
    body: JSON.stringify(refund_params)
  });

  return await response.json();
}

const refund = await createRefund("2120314", {
  amount: 1000,
  reason: "stock",
  notify_buyer: 0
});

Documentation:
https://developers.payfast.co.za/api#refund-create

CSS: Fix a div center on the page

GreggHume — Fri, 02 Feb 2024 13:01:23 +0000

Sometimes you need to fix an element that you want to stay within the bounds of a container. Or you want to center the fixed element.

The best way to do this is have the fixed div that does the floating and then have a normal div inside that does the centering.

The magic touch is the pointer-events which makes sure the overlaying fixed div does not cover clickable content and get in the way of the cursor.

<div class="fixed">
  <div class="container">
   <div class="toast">A notification that shows up</div>
  </div>
</div>

.fixed {
 position: fixed;
 top: 32px;
 left: 0;
 right: 0;
 pointer-events: none; // so this div does block clicks on content underneath it
}

.container {
 max-width: 1200px;
 width: 100%;
 margin: 0 auto;
}

.toast {
 pointer-events: all; // so you can click on the toast to close it
}

Strapi: Update user via api

GreggHume — Tue, 19 Sep 2023 18:07:56 +0000

To update a user via the api you can do the following:

// route as PUT
localhost:1337/api/users/1

// body
{
  "firstname": "Mat",
  "lastname": "OD"
}

// response
{
  "id": 1,
  "username": "matod",
  "email": "test@test.com",
  "provider": "local",
  "confirmed": true,
  "blocked": false,
  "createdAt": "2023-09-18T13:25:52.248Z",
  "updatedAt": "2023-09-19T18:07:03.885Z",
  "firstname": "Mat",
  "lastname": "OD",
  "role": {
    "id": 4,
    "name": "Organiser",
    "description": "Organisers permissions",
    "type": "organiser",
    "createdAt": "2023-09-19T17:12:57.632Z",
    "updatedAt": "2023-09-19T17:12:57.632Z"
  }
}

A note, as of writing this "populate: *" param does not work if you want to get back component or related data.

Strapi: Create user via api

GreggHume — Tue, 19 Sep 2023 17:51:04 +0000

The functionality to create a user via api in Strapi 4 is already built in.
Its just that the route is different to the usual api routes.

Route to hit as POST:

// route to POST to
localhost:1337/api/auth/local/register

// body data to send
{
   "email": "test1@test3.com",
   "username": "test2",
   "password": "123456",
   "firstname": "Grey", // custom field (see below config)
   "lastname": "Joy", // custom field (see below config)
   "organisers": [1] // id or ids of a relation field (mine is called organisers)
}

// returns
{
  "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwiaWF0IjoxNjk1MTQ1NDA3LCJleHAiOjE2OTc3Mzc0MDd9.9aUrYF4Ws1WCTDXHTFMU_7WUs0i5iLeqPdwubHM62mc",
  "user": {
    "id": 4,
    "username": "test2",
    "email": "test1@test3.com",
    "provider": "local",
    "confirmed": true,
    "blocked": false,
    "createdAt": "2023-09-19T17:43:27.406Z",
    "updatedAt": "2023-09-19T17:43:27.406Z",
    "firstname": "Grey",
    "lastname": "Joy",
    "role": {
      "id": 3,
      "name": "Customer",
      "description": "a logged in customer",
      "type": "customer",
      "createdAt": "2023-09-19T09:51:22.756Z",
      "updatedAt": "2023-09-19T09:51:22.756Z"
    }
  }
}

If you added custom fields to your user you will need to enable them by adding a file to the config folder:

// ./config/plugins.js

module.exports = ({ env }) => ({
  "users-permissions": {
    config: {
      register: {
        // put the name of your added fields here
        allowedFields: ["firstname", "lastname", "organisers"],
      },
    },
  }
});

Reference:
https://docs.strapi.io/dev-docs/plugins/users-permissions#registration

Anyone else get bored of coding? How do you stay excited?

GreggHume — Mon, 07 Aug 2023 14:58:51 +0000

I am 35, I have been coding for 15 years and i am finding it boring now. How do you get past these slumps? Are slumps becoming more common? Please share your thoughts.

Nextjs: How to check device serverside or know if mobile

GreggHume — Mon, 17 Jul 2023 08:55:58 +0000

I have different components that I render on Mobile vs Desktop. I like to dynamically import components depending on the device type to reduce the bundle size / unused code.

Here is a function that I use in production:

export const getServerSideProps = async (context) => {
  // util code is in the codeblock below this one
  const {isMobile} = utilServerSideDeviceDetection(context)

  return {
   isMobile,
   ...yourotherdata
  }
}

/* 
 paste this function into a file somewhere and import it 
 into a page where you need it, as seen above
*/
export const utilServerSideDeviceDetection = (context)=> {
  const isServer = !!context.req
  const userAgent: string = isServer
    ? context.req.headers['user-agent']
    : navigator.userAgent
  const isLine = /\bLine\//i.test(userAgent) || false
  const isMobile = /(iPad|iPhone|Android|Mobile)/i.test(userAgent) || false
  const rules = [
    'WebView',
    '(iPhone|iPod|iPad)(?!.*Safari/)',
    'Android.*(wv|.0.0.0)'
  ]

  const regex = new RegExp(`(${rules.join('|')})`, 'ig')
  const isInApp = Boolean(userAgent.match(regex))

  return {
    isMobile,
    isLine,
    isInApp,
    userAgent
  }
}