tercmd

Creating a Community Board with HTMX & Express

tercmd — Sun, 21 Jan 2024 09:48:13 GMT

Step 1. Basic app

We create a folder for our application. Then we cd into the folder and run npm init -y.

Then we install express and hbs using npm or any other Node package manager.

npm init -y
npm install express hbs --save

Create index.js with the following contents:

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

app.set('view engine', 'hbs');
app.use(express.static('static'));
app.use(express.urlencoded({ extended: true })); // support encoded bodies
app.get('/', (req, res) => {
    res.render("index");
})

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

Create two folders called views and static in the root of your application directory.

The views folder contains the templates used for rendering the application.
The static folder contains static files like images, CSS, etc.

Create a file called index.hbs in the views folder with this content:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Community Boardtitle>
    <script src="https://unpkg.com/htmx.org">script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.11/css/pico.min.css">
head>
<body class="container" hx-boost="true">
    <nav>
        <ul>
            <li>Homeli>
            <li><a href="/about">Abouta>li>
            <li><a href="/submit">Submita>li>
        ul>
    nav>
body>
html>

This loads htmx and PicoCSS (a classless styling framework) from a CDN. In production, this is not recommended and should be loaded from your origin, but for this demo it should be okay.

Start the server using node index.js (this script is compatible with Bun too)

💡

Every time the index.js file is changed, you must restart the server with the above command. However, changing the templates does not require a server restart.

If you load this page, you should see this:

Step 2. Listing articles

Create a file in the views directory with the name articles.hbs with this content:

{{#each articles}}
<article>
    <h1>{{this.name}}h1>
    <p>{{this.description}}p>
article>
{{/each}}

Then we get the list of articles (using a database query). For this example, I am using a simple object to store articles, however a database could be added in later.

var articles = [
    {
        "name": "Live GitHub Status (for GNOME Wayland)",
        "description": "I had this cool idea to show the currently focused application on my system as part of my GitHub status."
    },
    // ...
];

We define a path to return a rendered list of articles in our Express server:

app.get('/articles/list', (req, res) => {
    res.render("articles", {articles: articles});
})

And in index.hbs, we add a div that will fetch the articles and swap the returned HTML into itself.

<div hx-get="/articles/list" hx-trigger="load" hx-swap="outerHTML" aria-busy="true">Loading articles...div>

Step 3. About page

On the about page, we follow similar steps as the index page.

Step 4. Submitting posts

We create a file called submit.hbs in the views directory.

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit a Posttitle>
    <script src="https://unpkg.com/htmx.org">script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.11/css/pico.min.css">
head>
<body class="container" hx-boost="true">
    <nav>
      <ul>
        <li><a href="/">Homea>li>
        <li><a href="/about">Abouta>li>
        <li>Submitli>
      ul>
    nav>

    <form action="/submit" hx-post="/submit" method="post">
      <input type="text" name="title" placeholder="Title" />
      <input type="text" name="description" placeholder="Description" />
      <input type="submit" value="Submit" />
    form>
  body>
html>

We add this page to a /submit path (using a GET request, POST is used for the form action)

app.get('/submit', (req, res) => {
    res.render("submit");
})

Then we configure a path on our server to add to the list of articles, returning a message Post submitted!

app.post('/submit', (req, res) => {
    articles.unshift({name: req.body.title, description: req.body.description});
    res.send('Post submitted!
');
})

💡

As this is a simple response, I've not created a template for it. Also, this code is purely for adding to the beginning of the articles object. This should be replaced with database queries.

Then a user can submit posts.

That's it! If you have any feedback, please leave a comment. Click the ❤️ if you liked this.

Creating file system routing in Bun

tercmd — Mon, 15 Jan 2024 07:31:56 GMT

Bun has a built-in web server. However, handling requests with that web server is very rudimentary. So, I wanted to to create a simpler file-based routing system.

Initial approach

My initial approach was to require every file in the pages folder as a module.

While this worked for basic cases, it did not work for URLs with nested levels like /js/intro.

Slightly better approach

I then thought to replace any / with a specific character or set of characters like _____. However, if a user uses _____ in their path, this would return the equivalent but with /. Running a separate script to import all pages also didn't look clean.

The solution

I opened Bun's website and saw that they have an example called "File system routing". The example showed me that this was exactly what I wanted.

My final code looked like this:

const router = new Bun.FileSystemRouter({
  style: "nextjs",
  dir: "./pages/",
});

Bun.serve({
  fetch(req) {
    let match = router.match(req);
    let page = require(match.filePath);
    return new (page)(req, match.query, match.params);
  },
});

Live GitHub Status (for GNOME Wayland)

tercmd — Thu, 14 Dec 2023 00:00:00 GMT

I had this cool idea to show the currently focused application on my system (i use gnome on ubuntu btw) as part of my GitHub status.

Implementation

I first went into GitHub settings and created a PAT (NOT fine-grained) with the user scope.

Then, I found a command on GitHub to get the focused window class under Wayland in GNOME (e.g. firefox, Code, Org.gnome.Software) and passed that into os.popen()

I then used GPT to generate Python code to send the GraphQL API request (although similar code for TS/JS is available in this GitHub repo)

I also added some code to map an application name to an emoji with fallbacks.

Just wrap that in a while True: loop and you’re done—

Almost, there are a few things missing:

adding more user friendly names for apps like Org.gnome.Software (Ubuntu Software), but that’s something for a future point in time.
clear status after some time

The Code

https://gist.github.com/terminalcommandnewsletter/c0530f2a832463391af118ee4b766bae

What's Phishing Like In 2023?

tercmd — Sun, 19 Nov 2023 00:00:00 GMT

I found a phishing filter (here) which can be used in content blockers (as well as adblockers) like uBlock Origin. I wanted to analyze the phishing links — and this is the analysis.

Popular Web Hosts

Who are the web hosts (and website builders) that are used the most often in the phishing websites examined?

Google for Firebase Hosting, with 2,428 unique websites ¹.
Weebly (a free website builder), with 2,239 websites. ²
r2.dev, with 1,286 entries.
This refers to the R2 file storage offered by Cloudflare®.
crazydomains.com (with their Sitebeat website builder), with 1,164 websites.
Interestingly, the domains I tested seemed to redirect to global_errors.sitebeat.crazydomains.com with a “Coming Soon” page (which is also in the filter list)
workers.dev (Cloudflare Workers), with 759 entries
Cloudflare Workers is a service which allows a user to run JavaScript on their edge nodes. I presume these could be proxies or returning hardcoded HTML. However, the code isn’t visible so that’s just speculation.

Just these 5 domains cover 66% of recognized hosting providers.

Dynamic DNS

Dynamic DNS is a service where a fixed hostname maps to a dynamic IP address (like a home IP address) that updates regularly.

DuckDNS, with 138 entries.
DynDNS, with 20 entries.
ddns.net and ddnss.eu, with 1 entry each.

Documents

This category consists of platforms that host documents, spreadsheets and presentations.

Google Docs, with 1,296 entries.
This includes 74 forms, 10 documents, 6 drawings, and 1,206 presentations.
Almost all presentations contain “/pub?” with some data as URL parameters. I’m not too sure what this does.
In addition, Google Drive has 9 entries.
Many of the URLs seem to be taken down, either by the owner or by Google.
telegra.ph, with 3 entries.
notion.site, with 2 entries.

Forms

This consists of tools that allow users to build forms.

Microsoft Forms, with 62 forms.
forms.app, with 24 forms.
Google Forms (forms.gle), with 15 forms.
JotForm, with 11 forms.
formstack.com and hsforms.com, with 7 forms each.

Scripts

There are 102 entries for “script.google.com” (Google Apps Script) which link to macros and running the script, sometimes with parameters to track the user that clicks.

Government

There are 4 government domains, none of which seem inherently malicious. The entire domain is blocked by the phishing filter.
I’m not listing these domains here because the pattern is what matters, not an individual country.

IP Addresses

98 unique IP(v4) addresses (with 441 entries) exist in the phishing filter list.

(For the below information, ipinfo.io was used as a source)

Top ASNs

ASNs (Autonomous System Numbers) are the organizations that own a block(s) of IP addresses to provide services to their customers (hosting providers, ISPs, some VPNs)

“AS132203 Tencent Building, Kejizhongyi Avenue” with 46 IP addresses.
“AS14061 DigitalOcean, LLC” and “AS16276 OVH SAS” with 5 IP addresses each.
“AS396982 Google LLC” with 4 IP addresses.

Top Cities

Singapore with 40 IP addresses.
Santa Clara (California, US) with 9 IP addresses.
Beauharnois (Quebec, Canada) with 4 IP addresses.

Link Shorteners

TinyURL, with 176 entries.
Bitly, with 161 entries.
Twitter’s link shortener (t.co) with 160 entries.
s.id with 115 entries.
t.ly with 33 entries.

IPFS

IPFS is a Web3 technology that allows decentralized hosting of files. These are not directly accessible in a browser, but through gateways like those from Cloudflare, ipfs.io and others.

When I saw the numbers for IPFS, I was genuinely surprised.

From Cloudflare IPFS alone, there are 5,380 entries. ³ (I also want to point out that BleepingComputer has an article about Cloudflare’s IPFS gateway being used for phishing attacks, showing its prominence.)
ipfs.io with 990 entries.
nftstorage.link with 805 entries.
dweb.link with 416 entries.
Infura IPFS with 366 entries.

Evasion Methods

These are methods used such that the domain seems innocent but leads to another website (not including link shorteners).

VKontakte, with 39 entries – this uses an “away” page that redirects to another website (an account on VKontakte is required).
google.com, with 22 entries⁴ with 13 URLs having the path “/url?q=[insert a url-encoded url here]” and 9 entries using AMP to have a Google domain, but with a phishing page. They’re having their cake and eating it too.
translate.goog (Google Translate for websites), with 15 entries.
accounts.google.com, with 8 URLs, all of which contain “continue=” and “followup=” with URLs as the values. This redirects the user after they’re signed in.

Uncategorized

There are 6,593 uncategorized domains.

3058 domains use a “.com” TLD.
437 domains use a “.top” TLD.
217 domains use a “.br” TLD.
200 domains use a “.net” TLD.
186 domains use a “.pl” TLD.
176 domains use a “.xyz” TLD.
108 domains use a “.org” TLD.

The Big Picture

The filter list has more than 2,100 entries for both firebaseapp.com and web.app, due to the data sources of the filter list including both domains. Websites on both domains have been filtered down to just one, leading to the lower number. ↩
Weebly has two domains which are weebly.com and weeblysite.com for hosted websites, in which none of the entries are duplicates. ↩
This is across two domains (cf-ipfs.com and cloudflare-ipfs.com) with duplicate addresses removed. ↩︎
There were 23 entries, but one of them was a search, so that’s been excluded. ↩

GPT-4 Isn't 95.2% Worse Now

tercmd — Thu, 27 Jul 2023 00:00:00 GMT

A paper from Stanford & Berkeley University being spread around as proof that “GPT-4 is getting dumber” makes no sense.

Here’s the study: “How Is ChatGPT’s Behavior Changing over Time?”

Let me start off by saying that other users have experienced that it does feel inferior and I don’t doubt that. But quoting a 95.2% drop (in that ONE example) is unfair.

Let’s address each of the tasks tested for (solving math problems, answering sensitive/dangerous questions, generating code and visual reasoning)

Solving Math Problems

The paper does state that GPT didn’t provide steps in the June version (even with Chain-of-Thought prompting), so perhaps that’s where it failed. This does indicate that it’s worse in some sense, but math is also one of the weak points for AI.

Answering Sensitive/Dangerous Questions

The rate of answering such questions is something that OpenAI wants to reduce (and so it has). GPT-3.5 did have an increased answer rate in June, which suggests filtering does need to be improved. But answering these (or not) doesn’t mean models are getting dumber.

Generating Code

This section showed GPT-4’s executable code rate reducing, due to the model adding three backticks before the code, thus making it not directly executable.

This wasn’t fair in my opinion since most users use ChatGPT’s web interface, so the model is expected to add code tags to add syntax highlighting and separate it from other model output (if any).

Visual Reasoning

This section just shows both models increasing in rates.

Conclusion

So, people using the findings of the paper as “GPT-4 is getting dumber” doesn’t make sense at all. (And in case you’re wondering, the “97.6% to 2.4%” prime number example is very, very widespread)

Monitoring a Hacker News Post

tercmd — Thu, 25 May 2023 00:00:00 GMT

I posted a link to my repo regarding AI context lengths to Hacker News under the Show HN category and wanted to see its position in the listing every now and then.

API

Fortunately, Hacker News has an API which you can send a request to for it to respond back with a list of posts. This was a Show HN post, so I needed the /v0/showstories.json API. I implemented simple Python code to request that path and get the index of the post. After this, I calculate a page number by dividing the post index by 30.

Message Design?

Slack offers something called Block Kit, which allows you to build detailed messages. I tried a few designs and settled on a regular message. Regardless, if I do need to redesign it, I can just add blocks.

I first went with a button “View Post in List”.

This led to some issues.

I eventually added a link that does the same thing, which doesn’t show any errors and works well.

“View Post in List” Link

This is a link to the specific page on HN with an anchor tag of the post ID. This results in the page scrolling to the very post being tracked.

Monitoring my GitHub repo

tercmd — Mon, 15 May 2023 06:30:00 GMT

The Problem

Three weeks ago, I randomly got an issue on my latest GitHub repo. A few days later, I got another one. I felt like I wanted a way to know about issues, PRs, or any other repo activity as soon as it comes in. So, I thought to automate it with Slack.

GitHub Actions?

My first thought was to use a GitHub Action. So, I spent a few hours tinkering with a GitHub Action on a test repo to check if it works. In the end, I arrived at a result that worked decently. Although, workflow execution logs are public, allowing anyone to see who and what triggered it.

Why is that a problem?

Because, if a user stars and unstars the repo, it would be visible in the logs. Same for if a user watches and unwatches the repo.

So, that never made it to the final repo.

Zapier?

Then, I told ChatGPT (funny, considering the repo) about the issue and it suggested platforms like Zapier. So, I signed up for a Zapier account, oAuth’d into Slack and GitHub, and set up my Zap. I wouldn’t get notifications for every star, but that’s a small compromise.

The only problem the Free plan offers 100 — in this case, uncontrollable — Zap executions per month. That means, at any point, Slack notifications for that month will just stop.

So, I didn’t go the Zapier route.

GitHub integration for Slack

I was looking for a solution and found a GitHub repo integrations/slack. This was a repo by GitHub about their integration for Slack.

Adding it is simple:

Visit slack.github.com
Click Add to Slack
Add the integration to your workspace, and then add it to a channel
Use this command: /subscribe [repo] [optional additional events to subscribe to]

So, I added the integration, subscribed to the repo (linking it to the channel).

When I made a commit, I get a notification like this:

A few days later, as I switched my phone on, I got a Slack notification.

So, I replied to the message using Slack itself.

(I later moved to Discord, with their tailor-made webhook integration for GitHub which provides me more data than the Slack integration did)