Javascript on mm-dev

Vanilla JS

Fri, 05 Apr 2024 12:18:03 +0100

Toolchain

I enjoy using plain/vanilla JS where possible. For my own projects I try to avoid the sprawl and long build times of NPM.

I do like to split my code up into separate modules though, and to be able to benefit from bundling/minification etc, for which I use esbuild. I also want to be able to use SCSS and JSDoc for type annotations. So I do allow myself some minimal tooling (the cone and Flake).

My setup looks like this…

esbuild - Download a build

JS bundler
Combine separate modules into a single JS file, minifying/compressing if required
Tree shaker
Avoid bloat by making sure only those modules/functions which are used get added

I use esbuild for most JS projects, so I installed a standalone build which can be run from anywhere — but it can also be installed using npm or other methods.

SASS - How to Install SASS

Compiler and bundler
Converts SASS/SCSS files into CSS

JSDoc - Documentation

Automated documentation creation
HTML docs for your methods, classes and variables will be created based on your code comments
Type annotations
Comments in your code can tell JSDoc which data types your code expects

Type annotations you provide (in specially-formatted comments) will be used to automatically create detailed documentation for your project.

Docs are created as HTML files, with lots of clickable cross-references. The files can be styled based on a templating system and CSS styling.

Lots of modern editors/IDEs will also use your type annotations to provide type hints and draw attention to potential problems eg if you try to pass an argument of the wrong type you’ll get a warning.

Example of Project Setup Using Tmux/Vim

I usually write a simple bash script for most projects. I’ll run this script when I want to start a session of working on a specific project.

Below is an example build script (for my ‘Pipe Dream’ game) which does the following:

Enters the project directory
Uses tmux to open a few window panes/splits:
- esbuild watching for changes to JS
- SASS watching for changes to CSS
- JSDoc watching the src directory (in reality I’d often skip this and run it manually on-demand, as it can be slow)
- git status, pane left open for commits etc
- A simple Python server so I can test the app in a browser
Opens a vim session with the relevant source files ready for editing

#!/bin/bash

# Open a JS project using esbuild, SASS and vim

work_dir="$HOME"/pipe-dream/

'tmux' \
    new-window -c "$work_dir" "esbuild src/main.js --outfile=www/js/pipe-dream.js --target=es6 --bundle --minify --sourcemap --global-name=PIPEDREAM --format=iife --watch" \; \
    split-window -c "$work_dir" "sass --watch src/scss/:www/css/" \; \
    split-window -c "$work_dir" "jsdoc src/ -c jsdoc.config" \; \
    split-window -c "$work_dir" "git status; bash -i" \; \
    split-window -c "$work_dir" "python -m http.server --directory www/" \; \
    select-layout even-vertical \; \
    new-window -c "$work_dir" "vim -S vim.Session" \; \

Vim Configuration

I’m one of those Vim people. People say its codebase is bloated but in use it always feels crisp and fast to me. Because of the way you manipulate text objects and leap around the page it somehow feels efficient on low-powered/slow devices, and works particularly well with e-ink devices.

Some people argue that they’re faster while using Vim than they are in other code editors. I’m not sure if I’m faster (I might be), but I’m from the school of thought that if your bottleneck when writing code is your typing speed, that might not be a good thing.

More importantly for me, I like the way Vim makes you think about text, as beautifully described in this classic stackoverflow answer ‘Your problem with Vim is that you don’t grok vi’.

I don’t like my coding environment to be too noisy or intrusive, but there are some powerful IDE features available nowadays and I don’t want to cut off my nose to spite my face.

Below is some info on some Vim plugins I use to help with JS development.

coc-nvim - Code of Conquer project repo

Although the ’nvim’ stands for Neovim (the popular Vim fork), COC also works very well in modern versions of normal Vim. This plugin allows VSCode-type IDE features, being based on the Language Server Protocol standard.

Very simply, a language server is a tool which understands a specific language, and can be used by your editor/IDE to analyse and give feedback on your code as you write it. It can do things like:

Syntax highlighting
Code completion
Draw attention to errors and give warnings about code
Help when refactoring code

COC isn’t a language server itself but it allows you to install and maintain whichever servers you need for the languages you use.

For example the language server I use for JS is coc-tsserver. The ’ts’ stands for TypeScript but it works very well with standard JS too. Along with the benefits mentioned above, this language server allows you to use type-checking, like TypeScript but without the compilation step. It also provides documentation and hints on using standard built-in JS methods.

You annotate your code by providing special comments in JSDoc syntax. When these comments/annotations are present, COC and the language server give you lots of hints while writing code, and warn you if you try to provide arguments of the wrong type.

Here is an example (from the official docs) showing what the JSDoc syntax looks like:

/** Class representing a point. */
class Point {
    /**
     * Create a point.
     * @param {number} x - The x value.
     * @param {number} y - The y value.
     */
    constructor(x, y) {
        // ...
    }

    /**
     * Get the x value.
     * @return {number} The x value.
     */
    getX() {
        // ...
    }

    /**
     * Get the y value.
     * @return {number} The y value.
     */
    getY() {
        // ...
    }

    /**
     * Convert a string containing two comma-separated numbers into a point.
     * @param {string} str - The string containing two comma-separated numbers.
     * @return {Point} A Point object.
     */
    static fromString(str) {
        // ...
    }
}

Sometimes the help is a little noisy though…

I love the functionality, but for me it’s a bit over-eager, eg if I’m half-way through typing a word I don’t need a popup telling me the word doesn’t exist.

coc-nvim does also provide a small symbol at the start of each line where it detects an error or wants to warn about something. So I like to leave the symbol visible, but hide the info popups by default. I add a keyboard shortcut so I can show/hide the explanation of the error/warning when I want to.

To stop the popups:

// In ~/.vim/coc-settings.json

{
  ...
  "diagnostic.enableMessage": "jump",
  ...
}

To add the show/hide keyboard shortcuts to Vim:

" In ~/.vimrc

nmap <silent> gh <Plug>(coc-float-hide)
nmap <silent> gl <Plug>(coc-diagnostic-info)

Prettier

This opinionated code formatter formats your code according to some fairly strict rules and has few configurable options (ie it’s their way or the highway).

I think most people find at least some of the rules disagreeable, but the point of this kind of tool is that it does a ‘decent, not perfect’ job, but provides a standard for formatting and removes the need for discussing, disagreement and wasted time.

I found it a little annoying at first but then got over myself and prefer now to use it whenever possible.

Pipe Dream (Web Game)

Wed, 15 Nov 2023 16:04:45 +0000

Pipe Dream is a game you can play in your browser here.

You don’t need to log in or install anything and of course there are no ads/tracking.

The game is about as simple as it gets. There are loads of blobs floating about — avoid some of them and eat the others.

To control the player move your mouse pointer (or drag your finger) over the control area - a rectangle on the right or bottom of the screen (depending on which way around your display is oriented)
When you hit one of the avoid blobs you lose health.
Each level gives you a different amount of time to complete it
To complete a level, eat all the edible blobs before you run out of time, or health

dontdillydally (Web App)

Tue, 10 Oct 2023 13:17:52 +0100

dontdillydally helps you track time and money.

Aimed at the self-employed
Focused on simplicity and ease of use

As this is a web app you don’t need to install it, just go to dontdillydally.app to start using it immediately in your browser.

How to Use

Tap the bird at any time in the app to see the built-in guide

On the left-hand side of the app you will see icons which you can tap to change which section you’re on or perform other functions.

Tap below to expand each section and learn more about it:

Expand all

Worksheet

This is the page you’ll use the most, it’s where you enter your hours worked and any money coming in or going out.

A worksheet is made of entries. An entry is one of the following:

time spent on a specific job
money spent on something (expenses)
money coming in (income)

To add an entry, just tap on the date where you want to add it

Each entry can have a client and/or a job selected. If you do this you’ll then be able to get a report showing you how many hours you worked on that job/client, or how much money you made or spent.

You can also add Notes to an entry.

All data fields in an entry are optional, add as much or as little info as you like.

By default when you add a new entry it will be a time entry, and show a clock icon next to it.
If you tap the clock, the icon changes to a credit card and the entry becomes a money entry.
To enter an expense, set the value of a money entry to something negative eg -100.00 means you spent 100.

Worksheet: Time entry

Reports

Here you can get a clear view of everything entered into an entire worksheet, or narrow down on a specific job or client:

Choose a date range from within your worksheet
Choose a specfic client or job
Look at only money in/out (hide hours)
Look at only hours worked (hide money)

Then you’ll be able to see:

How much time you’ve spent
How much you’ve earned
A list of all worksheet entries matching your selection showing eg time, monetary values, notes

Reports: 'BendyStraw' job selection
Reports: 'BendyStraw' job results

Jobs and Clients

Jobs and Clients can be created and edited here, including:

A name for the job or client
Colours (foreground and background) used to represent the job or client in the app

Settings

The other icons perform actions immediately without changing the page:

Expand all

Minimise/maximise menu

Toggles whether the menu is minimised or maximised.


Minimised	Show only icons
Maximised	Show icons + text labels

WebDAV sync

This is an experimental feature to sync your data to a WebDAV server so you can keep several devices in sync.

It’s a work-in-progress and not really recommended for most users at this point.

Download data as file

Tap this to download all of your data and settings in a file. It will usually end up in your main Downloads folder.

Upload data file

If you have a file you previously downloaded you can bring that data back into the app with this button.

When importing the data you will be given the option to Merge or Overwrite your current data.

Email data to a preconfigured address

You need to set an email address in Settings for this option to work. Your device also needs to know what to do with mailto: links.

Wipe your data

Completely wipe all of your data and start fresh.

Data Storage

Automatically saved continually while you work The bird’s eye spins when changes are being saved, this is intentionally kept subtle but can be disabled in settings
Your data is stored inside your browser and stays on your device, it never travels over the internet (unless you decide to send it via email) and is not stored on any servers
Data uses a simple JSON format, it can be exported/imported as a file to move it between devices

Jumble Art Portfolio

Mon, 01 Jan 0001 00:00:00 +0000

Jumble is all of my art, all piled up on the metaphorical scrapheap where the modern world seems to have put art :)

Just messing, this was actually a fun project where I got to learn a lot of 3D stuff that was new to me, and build some familiarity with Three.js (which is really nice). I also dipped my toe in to WASM modules for the first time and worked with Rapier physics engine.

Full write-up COMING SOON!

Paintings falling into pile
Zoomed-out pile
Pile close-up