Log on Dave Lage

Neovim LspAttach Autocommand

Fri, 28 Mar 2025 23:34:42 -0400

Neovim LspAttach autocommand

An example LspAttach autocommand I use for Neovim. Adds some keybinds but configure as desired.

We run on LspAttach commands.

local group = vim.api.nvim_create_augroup("LspMappings", { clear = true })
vim.api.nvim_create_autocmd("LspAttach", {
	group = group,
	callback = function(args)
		local opts = { buffer = args.buf, silent = true }

		set(n, "gd", function() vim.lsp.buf.definition({}) end, opts)
		set(n, "K", vim.lsp.buf.hover, opts)
		set(n, "<c-s-K>", vim.lsp.buf.signature_help, opts)
		set(n, "gD", function() vim.lsp.buf.implementation({}) end, opts)
		set(n, "1gD", function() vim.lsp.buf.type_definition({}) end, opts)
		set(n, "gr", function() vim.lsp.buf.references() end, opts)

		set(n, "<c-]>", function() vim.lsp.buf.declaration({}) end, opts)

		set(n, "<Leader>re", vim.lsp.buf.rename, opts)
		set(n, "<Leader>ca", vim.lsp.buf.code_action, opts)
		set(n, "<Leader>ih", function()
            -- toggles inlay hints
			vim.lsp.inlay_hint.enable(not vim.lsp.inlay_hint.is_enabled())
		end, opts)

		-- diagnostics
		set(n, "<Leader>di", vim.diagnostic.open_float, opts)
		set(n, "<Leader>k", function()
			vim.diagnostic.jump({ float = true, count = -1 })
		end, opts)
		set(n, "<Leader>j", function()
			vim.diagnostic.jump({ float = true, count = 1 })
		end, opts)
	end,
})

Neovim LSP 0.11

Fri, 28 Mar 2025 00:00:00 +0000

Neovim LSP 0.11

In Neovim LSP 0.11 they added more support for LSP. This enables you to have native support for your LSP’s without requiring any plugins.

vim.lsp.config['lua_ls'] = {
    cmd = { 'lua-language-server' },
    filetypes = { 'lua' },
    root_markers = {
      '.luarc.json',
      '.luarc.jsonc',
      '.luacheckrc',
      '.stylua.toml',
      'stylua.toml',
      'selene.toml',
      'selene.yml',
      '.git',
    }
}

And then you start enable it to autostart when it runs the filetype and finds the root_marker.

vim.lsp.enable("lua_ls")

Now lua language server will be available when it matches the configuration

Streaming chat scroll to bottom with React

Wed, 13 Nov 2024 00:00:00 +0000

Streaming chat scroll to bottom with React

Let’s say you’re making a chat application. You are? Great. And we’re streaming text from tokens as they are generated from the server.

But the text scrolls off the page!

Let’s scroll into view

We can fix this by using scrollIntoView on the element we want to view.

const element = document.querySelector("#my-element");
element.scrollIntoView();

By default this scrolls to the top, left are at 0, 0 for the element relative to the viewport.

WebFinger response as application/json using Cloudflare Sites

Mon, 16 Sep 2024 16:00:58 -0400

WebFinger response as application/json using Cloudflare Sites

Transform rules

Go to the rules part of your site on Cloudflare. We’ll want to add a response header to modify the Content-Type.

Rules -> Transform Rules -> Modify Response Header

Cloudflare rule 1

And then we update the Content-Type to application/json

Cloudflare rule 2

Then you should be able to get the JSON to load in your browser as opposed to it downloading it.

Add WebFinger to Your Site

Mon, 16 Sep 2024 15:39:19 -0400

Add WebFinger to your site

Add WebFinger to your site

WebFinger lets other services discover information about your site or identity across the internet. It’s a key component of federated networks like Mastodon and essential for cross-site interactions.

WebFinger is used to discover information about people or other entities on the Internet that are identified by a URI using standard Hypertext Transfer Protocol (HTTP) methods over a secure transport.

Change GTK font

Fri, 19 Jul 2024 19:21:58 -0400

Change GTK font

GTK Logo

GTK has a setting for the font name. This can be a huge component across all GTK applications. Try alternative fonts in your GTK applications.

Suggested on modern GTK is through the gsettings command. GTK 3.0+ which should cover most applications. Otherwise, through the settings.ini in the appropriate GTK 2.0 configuration directory.

Set the font-name. And the base font size.

gsettings set org.gnome.desktop.interface font-name "Monospace, 13"

This will change the font immediately in the GTK applications. Check to see if it’s working in your GTK applications like Firefox.

DWM to DWL

Wed, 17 Jul 2024 12:37:44 -0400

DWM to DWL

DWM to DWL
- Issues I ran into

DWM is a simple window manager for Linux. Moving to Wayland you can not use DWM because DWM is X based. DWL is a similar application in the same spirit. A simple window manager.

Issues I ran into

Terminal

Make sure your terminal is using Wayland. foot or alacritty are one if you are having issues.

Fetch images into Uint8Array/UInt8Buffer for WASM web applications

Mon, 01 Jul 2024 14:29:35 -0400

Fetch images into Uint8Array/UInt8Buffer for WASM web applications

When using WASM, we may want to load an image into WASM flow. One way to get an image into WASM is getting a Uint8Array version. In Rust, we can represent this as a slice &[u8]. We can then use this to load the image using the image crate for example.

To do this in the browser we have 2 main options.

WASM Heap Allocated Never Cleared

Fri, 26 Jan 2024 15:39:36 -0500

WASM Heap allocated never cleared

WASM Heap allocated never cleared
- Dropping memory
- Allocator freed pages

Dropping memory

Make sure your code is dropping memory. WASM lets you reallocate memory, so you need to drop the memory in your code.

struct X(u32);

impl X {
    fn drop(self) {}
}

fn main() {
    let x = X(10);

    // Usually x goes out of scope and would get dropped.
    // But we can drop it here to profile memory.
    // Remember the allocation of WASM happens in chunks so
    // we want to see if we be deallocating appropriately for reuse 
    // by watching if a memory growth happens
    x.drop();
}

Allocator freed pages

Some allocators can be optimized to not return freed pages to the WebAssembly engine/operating system. Make sure your allocator is reallocating appropriate to your needs. Rust default allocator allows reuse of memory with WebAssembly, for example.

Fine-tuning BLIP Using PEFT

Mon, 22 Jan 2024 23:55:17 -0500

Fine-tuning BLIP using PEFT

BLIP is a good model for image captioning. Has a good architecture for this task. We can fine-tune this model to have it learn domain specific captioning.

PEFT

Hugging face has a PEFT library which allows us to hook into other models and capture Linear or Conv2D layers. We can use this to fine-tune the BLIP model with the attention and convolution layers.

Dependencies and environment

python -m venv venv
source ./venv/bin/activate # linux
call ./venv/scripts/Activate.bat  # windows?

Install our dependencies

pip install transformers peft datasets

Install PyTorch

Use the PyTorch instructions for your machine: Get started — PyTorch

Stable diffusion pipeline from video

Mon, 22 Jan 2024 23:15:11 -0500

Stable diffusion pipeline from video

The major purpose is utilizing videos in Stable Diffusion: first, we need to extract images by using FFmpeg. During image extraction, issues such as blurriness or unrelated content could arise. We have the following solutions:

Capturing frames

1. Keyframes

Keyframes help solidify the frames according to the video creator for when to bring the video together. Ideally these won’t have bad encoded frames and also limit the number of frames we capture.

Alloc_error_web_worker

Tue, 09 Jan 2024 03:44:33 -0500

Alloc_error when using Web Worker

Using Rust WASM you may run into panics. The suggested crate is to use console_error_panic_hook to see the panic with a helpful backtrace.

Even with using this crate it may continue to panic with RuntimeError: unreachable executed without the backtrace. I spent some time trying to identify the issue but no matter how I set up the crate it would continue with this error.

I broke out the code that was running into a separate wasm-bindgen-test crate test. This allows you to run your WASM tests in the browser. Then ran the associated code in the test. This finally gave me a backtrace in the code with an interesting bug. An alloc_error. Like the following:

Dedicated Worker Global Scope

Thu, 14 Dec 2023 22:35:27 -0500

Dedicated Worker Global Scope

With DedicatedWorkerGlobalScope it gives you direct interaction with both sides of worker/main thread.

main.js

const worker = new Worker("/worker.js");
worker.postMessage("hello from main");

// now we can listen for messages from the DedicatedWorkerGlobalScope

// note we are adding the event listener to the worker
worker.addEventListener("message", (e) => {
  console.log("message from worker", e.data);
});

worker.js

onmessage = (e) => {
  console.log("message from main", e.data);
  // note we are using self here
  self.postMessage("hello from worker");
};

Error: null pointer passed to rust

Thu, 14 Dec 2023 22:03:42 -0500

Error: null pointer passed to rust

Working with WASM and rust and finding this error.

Error: null pointer passed to rust

And a snippet of the code

#[wasm_bindgen]
impl Something {
    pub fn x(a: self) {

    }

    pub fn y(a: self) {

    }
}

With the JavaScript side:

const something = new Something();

something.x();
// null pointer here
something.y();

Well what’s happening is the first method is eating the value x(self) and then y(self) has no pointer.

React Suspense for Static Site Generation

Thu, 14 Sep 2023 11:31:51 -0400

React Suspense for static site generation

React Suspense for static site generation

In 18.2 of React there is an addition of Suspense. This allows an interface for handling async data sources and interactions for smoother interface management and also handling concurrent rendering.

For static site generation we can use these new suspense functionality to process data and create static HTML pages. For my usage I want to use React as a templating language. Then we can use data (ex. JSON) to populate our template.

Make particle emissions masks using abstract shapes in Godot 4

Sat, 22 Jul 2023 14:08:40 -0400

Make particle emissions masks using abstract shapes in Godot 4

We can use emissions masks to create emissions shapes to spawn particles. This allows us to create custom areas for spawning particles. Useful for spawning inside rooms or in shapes like cones.

Particles in a cone shape

To do this we need a mask to generate. You can use any image that has transparent pixels so your sprites.

Why Arch Linux

Tue, 04 Jul 2023 07:49:53 -0400

Why Arch Linux

Why Arch Linux
- Gentoo
- Fedora/CentOS
- Debian
- Ubuntu
- Arch Linux
- Conclusion

I moved to Arch Linux in 2020. This was after trying various Linux distros. Starting with Gentoo, and into Fedora, CentOS, Ubuntu, and Debian. These distros are all generally good for different reasons.

Gentoo

Gentoo was my first Linux distro. Known as a more difficult distribution. You will need to compile every software when using the Portage system. There seems to be some binary distributions available, but this is not the main way of installing software. This can mean installing can take many hours of heavy CPU work to get many things installed and running.

Cole Pulice - If I Don't See You in the Future I'll See You in the Pasture

Fri, 30 Jun 2023 18:33:11 -0400

Cole Pulice — If I Don’t See You in the Future, I’ll See You in the Pasture

7038634357 – Square Heart

Fri, 30 Jun 2023 18:26:53 -0400

7038634357 – Square Heart

Neo Gibson records, performs, and produces under the alias 7038634357. Their music is characterized by its formal precision, melodic structure, and an idiosyncratic emotional tenor. Up until this point, it has been primarily self-released on small-batch CD-R’s and performed in intimate settings. Synthesized and recorded entirely on their computer, Neo Seven is their first vinyl record, and perhaps their seventh release depending on where you begin amidst their prolific and fluid output.

Recommended environments for machine learning on Arch Linux with Python

Tue, 20 Jun 2023 12:42:32 -0400

Recommended environments for machine learning on Arch Linux with Python

Recommended environments for machine learning on Arch Linux with Python
- Anaconda
- Docker/Podman
- Cog
- Distrobox
- Considerations - venv

machine-learning-python-environment poster image of a cyborg cyber face with a neural network on it

Arch Linux runs a rolling release. This gets you the most up-to-date packages. This also means you may need to update certain drivers or libraries to new versions.

Using Warp's query to handle GET array key values

Thu, 08 Jun 2023 14:38:36 -0400

Using Warp’s query to handle GET array key values

Using Warp’s query to handle GET array key values
- Using Warp’s query
- Test result

Note: Generally it’s not a valid format. Avoid using the same key to pass array like values.

Warp will parse your query string into a data structure using serialization. We will use this to parse into Vec<(String, String)> which allows us to have 2 of the same key. Then we’d need to parse this down more but gets us the flexibility if we just need to pass it on or if this format is the appropriate format. We could also use other formats like into a struct and then using other serde libraries for parsing that down if you need more control over the data structure.

How to Add Model Tensors to Tensorboard Histogram

Mon, 08 May 2023 16:42:18 -0400

How to add model tensors to TensorBoard histogram

TensorBoard supports histograms, which you can use to showcase your tensors. Helpful to see the change in the weights over the training.

To get the tensors from your model you can check the network.state_dict() for the named tensor. Then we can save that tensor into the histogram.

from torch.utils.tensorboard import SummaryWriter

sw = SummaryWriter()

network = CNN()
dataloader = ["sample data"]

for batch in dataloader:
    network.train()

    for param_tensor in network.state_dict():
        sw.add_histogram(param_tensor, network.state_dict()[param_tensor], global_step=global_step)

This will save a bucketed version of the tensors. See arguments for add_histogram for more info.

Finding the location of objects in a selection group for fabric.js

Wed, 30 Nov 2022 13:12:50 -0500

Finding the location of objects in a selection for fabric.js

abstract image of shapes on a canvas

Selections are just groups. In fabric.js < 6, the objects are moved from the canvas into the selection group. This causes typical object position to be relative to the selection instead of the position on the canvas.

To find the location of objects, we can use the obj.calcTransformMatrix(). This is the true position of the object on the canvas.

Tauri - Save Files

Tue, 18 Oct 2022 19:42:35 -0400

Tauri — Save Files

Tauri has a save interface for saving files to the file system. Because of security, you will need to go through this route to handle downloading things that are inside the browser side. Like generating something on the canvas and then exporting it.

To save you can use the JS API save dialog from Tauri, and then write the file to the disk.

import { save } from "@tauri-apps/api/dialog";

const saveImage = async (dataUrl) => {
  const suggestedFilename = "image.png";

  // Save into the default downloads directory, like in the browser
  const filePath = await save({
    defaultPath: (await downloadsDir()) + "/" + suggestedFilename,
  });

  // Now we can write the file to the disk
  await writeBinaryFile(file, await fetch(dataUrl).then((res) => res.blob()));
};

// then something like

saveImage(canvas.toDataURL());

Possibly there will be APIs that allow this to happen through the <a href="x" download="image.png"></a> browser interface in the future.

Neovim 0.8 release notes and highlights

Fri, 30 Sep 2022 00:00:00 +0000

Neovim 0.8

Release notes

v0.8.0

Highlights

Tree-sitter and highlights

Highlight names now support @ and . in names, so you can prefix your plugin and segment your names by . and @.

highlight @boo.normal guifg=#000000 guibg=#ffffff
highlight link Normal @boo.normal

With Tree-sitter now setting these variables.

@tag
@text
@keyword
@function

See others with :hi @<Tab>

`set cmdheight=0`

New option, allows you to collapse your vim cmd line to 0 when not used. Considered experimental.

Azure DevOps Pipelines API Object Moved Curl

Fri, 09 Sep 2022 15:09:01 -0400

Azure DevOps Pipelines API, Object Moved error

Using curl you may find documentation to use Authorization: Basic $PAT to pass your personal access token (PAT).

Let’s say we want to trigger a pipeline run. This is the version you may see around. This does not work and causes a Object Moved page to be loaded with a tag. The link basically logs you into Azure DevOps.

curl --request POST --header "Content-Type: application/json" \
	--header "Authorization: Basic $AZURE_RELEASE_TRIGGER_TOKEN" \
	--data '{ resources: { repositories: { self: { refName: "refs/heads/master" } } } }' \
	"https://dev.azure.com/{organization}/{project}/_apis/pipelines/{pipelineId}/runs?api-version=6.0-preview.1"

The issue is it’s not logging you in properly through the PAT. This could be a PAT error or due to invalid authorization format. What works though is if you use the user option for curl, passing your PAT as a password (empty username).

nvim-dap — Getting Started

Mon, 18 Jul 2022 16:35:03 -0400

`nvim-dap` — Getting started

nvim-dap implements a client for the Debug Adapter Protocol. This allows a client to control a debugger over a documented API. That allows us to control the debugger from inside neovim, being able to set breakpoints, evaluate runtime values of variables, and much more.

We’ll work through setting up nvim-dap. It is expected your debugger is installed and accessible from a terminal. Some documented installation of popular debuggers is available on the nvim-dap Debug-Adapter-Installation

BOO Neovim colorscheme

Mon, 18 Jul 2022 14:05:05 -0400

BOO

BOO is a Neovim colorscheme built using Lua, Tree-sitter, and LSP.

BOO colorscheme

Newest addition for 0.5 is 3 new themes to the previous theme, sunset_cloud

Themes

`sunset_cloud`

sunset_cloud screenshot

`radioactive_waste`

radioactive_waste screenshot

`forest_stream`

forest_stream screenshot

`crimson_moonlight`

crimson_moonlight screenshot

Please check out the boo-colorscheme-nvim README for more install and usage info. Thank you.

Overwatch 2— First Beta

Tue, 03 May 2022 13:23:52 -0400

Overwatch 2— First Beta

Needed to write out my opinion on the first Overwatch 2 beta. In response to a post on Reddit

I personally feel lucky to be able to play this beta. No other game is like OW and OW2. I tried a lot of other games, but this is it for me. I hope others will enjoy the game and the developers can make a game they feel proud of.

Testing Fabricjs Mouse Events Using Testing Library

Fri, 01 Apr 2022 15:40:36 -0400

Testing fabric.js mouse events using Testing Library’s fireEvent

When testing fabric.js you may want to trigger events based on inputs to make sure your components or other interactions work properly.

To do this you may have or create a canvas element and then try to run mouse events on that element. The problem is the events should be triggered on the upper canvas element that fabric.js use for interactions. To properly trigger these events use canvas.upperCanvasEl instead of your canvas element.

Using Systemd to Handle Restarts

Wed, 23 Mar 2022 16:53:12 -0400

Using systemd to handle restarts

systemd is a common system daemon that works with running services in linux. A common scenario is wanting services to automatically start on boot or to restart if they crash. Lots of things can happen to computers. You want your service to be resistant to a minimal degree.

Keeping a service up minimally can happen through a simple .service file. I use this pattern to make sure services stay up after restarts of the machine or handling errors in the service which can take it down.

Fabric active selection is a group

Mon, 21 Mar 2022 19:41:58 -0400

Fabric active selection is a group

In fabric when you select objects they get added either as the target object or in a new group containing the selected objects. This generally works fine until you want to get the location of a selected item in a group. Doing object.top or object.left now has changed from the original location to this new location based on the group.

This can be bad if you are trying to get or save the location of all the selected objects.

Using Firejail

Mon, 21 Mar 2022 18:55:03 -0400

Using Firejail

Firejail is a SUID (Set owner User ID up on execution) program that reduces the risk of security breaches by restricting the running environment of untrusted applications using Linux namespaces and seccomp-bpf. It allows a process and all its descendants to have their own private view of the globally shared kernel resources, such as the network stack, process table, mount table.

Firejail gives you a sandbox for your applications to run, limiting the resources it sees and can access. This is useful to limit exposure applications have, to undesired effects by limiting files, network, processes it can see.

Neovim laststatus 3

Thu, 17 Mar 2022 18:25:29 -0400

Neovim laststatus 3

statusline comes at the bottom of each window in Neovim. With laststatus 3 you can now have statusline per neovim instance. Meaning you have 1 statusbar at the bottom showing the current window’s status.

Your browser doesn't support embedded videos, but don't worry, you can download it and watch it with your favorite video player!

feat(statusline): add global statusline #17266

Usage

vimscript

set laststatus=3

lua

Setup playwright for dev and production e2e testing

Tue, 01 Mar 2022 14:30:08 -0500

Setup playwright for dev and production e2e testing

Playwright can help run your tests in browsers and setup tests to run in the browser.

Getting started

Because Playwright uses browsers, it needs to install them. At this point you could skip to installing and using the docker version which installs the browsers for you on an Ubuntu based container.

Incorporating containers

Docker

Production config

This is an example from the docs which I set the base URL for production. Change the baseURL based on the environment you want to test on.

OR Type in Gleam

Wed, 23 Feb 2022 12:18:50 -0500

OR Type in Gleam

I am diving deeper into gleam with making an interface for an Erlang sqlite library and is common to have a OR type.

:ok | {:error, error}

After reading gleam.run/…/custom-types.html#erlang-interop, which suggests blank constructor(?) types are atoms in Erlang.

pub type OkOrError {
   Ok
   Error(String)
}

Which results in the Gleam to Erlang version:

-type ok_or_error() :: ok | {error, binary()}.

The error can be a blank type in the Erlang libraries so is suggested to use the Dynamic type. Then convert the dynamic type into the proper type to handle the type differences appropriately.

Loading image using `fetch` and promises

Thu, 20 Jan 2022 14:11:07 -0500

Loading images using `fetch` and promises

If you use fetch to load images you may want to show them on the page or use them in other applications.

const loadImage = async (url) => {
  return (
    fetch(url)
      // Extract as a blob
      .then((resp) => resp.blob())
      .then((blob) => {
        return URL.createObjectURL(blob);
      })
  );
};

Then you can use the Object URL as you do any other URL.

<img src="placeholder.jpg" id="imageid" />
<script>
  const img = document.querySelector("#imageid");

  loadImage("myimage.jpg").then((url) => {
    img.src = url;
  });
</script>

If you want to use in other cases, you want a fully loaded img element. You probably should wait for the image to be loaded as it can take a period of time to load up the image blob into memory.

Testing Library with Mousetrap

Thu, 30 Dec 2021 20:58:22 -0500

Testing library with Mousetrap

Mousetrap is a library for handling keyboard events. testing-library is a tool to help testing React components. If you use both of these you may find it difficult to trigger mousetrap events inside components. The suggested userEvent.keyboard does not seem to trigger it.

const X = ({ undo }) => {
	useEffect(() => {
		const mt = new Mousetrap();
		mt.bind('ctrl+z', undo)

		return function cleanup() {
			mt.unbind('ctrl+z')
		}
	})
	return <div data-testid="yo"></>
}

test("that undo fires", () => {
  const undo = jest.fn();
  render(<X undo={undo} />);

  userEvent.keyboard("{Ctrl>}z{/Ctrl}");

  expect(undo).toHaveBeenCalled();
});

This test fails as not triggering the event.

Unmount Component Error with React and Jest with Testing Library

Mon, 27 Dec 2021 14:08:04 -0500

Unmount Component Error with React, Jest, and Testing Library

Using the @testing-library/react you can write jsx to test your components.

If you use:

render(
  <>
    <MyComponent />
    <SecondComponent />
  </>
);

You may get an error saying it can’t unmount the component.

Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.

Possibly related to the <></> not properly being a main component for a react tree. Removing or replacing this prevents the error.

Deploy Feature Branches

Sun, 21 Nov 2021 13:59:27 -0500

Deploy feature branches

Showcasing Gitlab CI, Nginx, lego.

If you use pull requests or merge requests as part of your workflow; making and deploying feature branches can be helpful for sharing testable versions.

For this example lets take a look at deploying a web app to a web-server, with Lets Encrypt on a wildcard certificate.

A static typescript-based web app. Need to install dependencies on the build server, run tests, build app. Need to point the domain to the feature distribution on a web-server.

Linode Wildcard Certificate DNS with lego

Sat, 20 Nov 2021 23:55:53 -0500

Linode Wildcard Certificate DNS

To get a wildcard LetsEncrypt certificate you need DNS authentication.

Requirements:

go-acme/lego: Let’s Encrypt client and ACME library written in Go

I would suggest downloading a release for your operating system as not wildly distributed yet.

Using lego, which has built in Linode capability to automatically add the correct DNS to authenticate your domain.

You need to make a personal access token. To get a token go to your account dropdown, login & authentication, Create a Personal Access Token. You need read and write permissions for the domains.

Cloudflare A Record DNS for Cloudflare Pages

Fri, 19 Nov 2021 23:52:50 -0500

Cloudflare A record DNS for Cloudflare Pages

A Records are not recommended for the pages platform due to the distributed nature. The suggested process is to set a CNAME your root domain to your pages.dev address.

If you want to use Cloudflare DNS with Cloudflare Pages it can be tricky to get working due to 2 different systems needing to work.

Cloudflare DNS needs to point to your pages URL.

You need to point a CNAME the root domain to your pages.dev URL. If you are moving nameservers it may take some time for this to process.

Use Vale on Neovim

Fri, 05 Nov 2021 22:56:00 -0400

Use Vale on Neovim

Showing warnings from Vale inside Neovim using EFM-langserver

Vale is a command-line tool that brings code-like linting to prose. Very fast and works well with markup.

Update: June 26th 2022, Use nvim-lint.

To use Vale with Neovim you will need to be able to run vale, process, and show the errors. A few plugins that can support this nvim-lint (builtin support), ale. As well as LSP servers EFM-langserver or null-ls.

Glorious Mouse O/D/I/N Configure on Linux with Ratbag & Piper

Tue, 09 Mar 2021 16:48:39 -0500

Glorious Mouse O/D/I/N Configure on Linux with Ratbag & Piper

Glorious Mouse comes with configuration software for the LED and DPIs. This is a windows only application, so users of linix will need another tool. Ratbag is a daemon for configuring these mice. Piper is a GUI for configuring.

piper

Note: Currently there is no image (404) but this is working.

Note: Currently only the 3rd option works as it is not able to change the profile in Piper

Gitlab Runner Cache using Linode Object Storage

Mon, 04 Jan 2021 23:46:14 -0500

Gitlab Runner Cache using Linode Object Storage

Linode offers 250 GB of object storage for $5 a month. Using this creates a cache for use in Gitlab Runner. This allows proper access to a cache when running your own runners.

Setup Linode Object Storage

First need to set up your Linode Object Storage. Using this setup, the base $5/month price, and you get 250 GB of storage.

https://cloud.linode.com/object-storage/buckets

Setup Linode Object Storage Bucket

Make a bucket for the cache.

Simple SVG Icon Shadow Effect

Sun, 27 Dec 2020 00:00:00 +0000

If you want to have shadows on your SVG icons, the options can be tough to apply. They require injecting shadows into the SVG logic, making it tough to work with third party icons.

The solution I found is to

Duplicate the icon.
Embed the SVG into the HTML to allow for CSS styling.

We can then use any SVG and layer them. And then we can use native CSS styling.

Rebuild Font Cache on Linux

Tue, 29 Sep 2020 11:08:00 -0400

Rebuild Font Cache on Linux

Rebuild Font Cache on Linux
- Help docs
- Rebuild

When you add fonts, for instance to your ~/.fonts folder, you’ll need to force rebuild the font cache.

Help docs

fc-cache --help
Build font information caches in [dirs]
(all directories in font configuration by default).
    -f, --force              scan directories with apparently valid caches
    -v, --verbose            display status information while busy

Rebuild

We can force it to re scan the valid caches to find our new fonts.

Use Lua files to configure Neovim

Mon, 07 Sep 2020 16:49:14 -0400

Use Lua files to configure Neovim

Using plugins with Neovim tend to have a considerable amount of lua.

You can add your lua config to vimscript in Neovim using:

lua <<EOF
require('module')
EOF

lua require('module')

Use a file to setup your config

Lua looks up files based on a list of paths. Neovim is setup to use ~/.config/nvim/ as your lookup directory. This allows us to use the pattern of lookup that uses ~/.config/nvim/lua/my_config.lua to match for require('my_config').

Map Capslock to Escape on Linux

Fri, 14 Aug 2020 11:32:44 -0400

Map Capslock to Escape on Linux

If you do VIM you may want to remap your escape key to capslock. I personally never use capslock but it is easier to reach than ESC.

X Keyboard Extension

If you use X11/Xorg you should have XKeyboard installed. This gives you access to the setxkbmap program.

setxkbmap

setxkbmap -option caps:escape

Note: setxkbmap only sets the current xorg session.

If you want it to set on starting xorg (startx) then you should put it in your startup scripts for xorg.

Best of Last Week - Aug 07 2020

Thu, 06 Aug 2020 12:35:42 -0400

Best of Last Week

Previous week of Aug 07, 2020

Music

F12 - Loouuies, Edamame

Forwardism - Rival Consoles

Water (FJK Remix) - Little Dragon

Neovim 0.5 LSP with ElixirLS

Sat, 01 Aug 2020 20:44:25 -0400

Neovim 0.5 LSP with ElixirLS

Neovim 0.5 comes with a built in LSP client. This allows you to access LS Language Servers which services the LSP, Language Server Protocol.

Elixir has a Language Server that is built on the shoulders of other analytic services.

But you won’t be able to boot Neovim 0.5 and connect automatically to the LS. You need to configure Neovim to connect to your LS.

Install `nvim-lspconfig`

To connect to your LS, Neovim 0.5 has a plugin to configure the LSP client in Neovim.

argument error, :erlang.byte_size

Sun, 28 Jun 2020 00:00:00 +0000

`argument error, :erlang.byte_size`

This error comes when you don’t pass a binary to Elixir string operators.

  def remove_hash("#" <> _ = channel)  do
   	channel
  end

If you do:

remove_hash('#rockerboo')

you’ll get an error.

** (ArgumentError) argument error
    :erlang.byte_size('#rockerboo')

Needs to be:

remove_hash("#rockerboo")

iex(1)> :erlang.byte_size('rockerboo')
** (ArgumentError) argument error
    :erlang.byte_size('rockerboo')
iex(1)> :erlang.byte_size("rockerboo")
9

Zoom to Middle of fabric.js Canvas

Sat, 06 Jun 2020 00:00:00 +0000

Zoom to Middle of fabric.js Canvas

If you are working with mapping software, zooming is usually done to the middle of the viewport. By default zoom will use the top left as the origin.

First we’ll need to find the center of the canvas.

const center = canvas.getCenter();

const centerPoint = new fabric.Point(center.left, center.top);

Then we can zoom to the point.

canvas.zoomToPoint(centerPoint, 2);
canvas.requestRenderAll();

TypeScript as a Solo Developer

Sat, 23 May 2020 10:53:40 -0400

TypeScript as a Solo Developer

Deciding on whether to jump into using TypeScript or using vanilla JavaScript can be difficult. TypeScript requires more definition to your code, which can take more time. Vanilla JavaScript has no static analysis which can make bugs come up more often in production. What opportunities for value are available using TypeScript over JavaScript?

Code-based Self-Documentation

Documentation can be a struggle to keep up with as a solo developer. Speeding around the code-base keeping things updated can be a struggle.

100vw Is Bait

Wed, 20 May 2020 11:03:29 -0400

100vw Is Bait

If you want something to fit across the viewport, using 100vw would make sense. It stretches across the screen and responds to all screen size changes.

The problems comes when you have the screen need to scroll vertically. Most websites work this way so it starts to have problems. The scroll bar now takes viewport space without it reflecting on the vw variable.

The work around for 100vw is to use a lower vw, 94vw maybe. You need to account for all screens scrollbar size so it starts to fall apart.

IntrinsicAttributes Error for Invalid Props

Sat, 15 Feb 2020 00:00:00 +0000

IntrinsicAttributes Error for Invalid Props

<Button onClick={() => setX(true)}>X</Button>

Type '{ children: ReactNode; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any> & Pick<RefAttributes<any>, never> & { theme?: object | undefined; } & { ...; }'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & RefAttributes<any> & Pick<RefAttributes<any>, never> & { theme?: object | undefined; } & { ...; }'.

This is suggesting that your props are not validating in TypeScript.

Map/Reduce Tuples to Tuples in Typescript

Sat, 08 Feb 2020 20:40:47 -0500

Map/Reduce Tuples to Tuples in Typescript

If you use map/reduce to process your Tuples, you will find it errors out in Typescript.

type Point = [number, number];

const point: Point = [0, 1];

const shifted: Point = point.map(a => a + 1);

You will need to cast your result as a type.

const shifted: Point = point.map<Point>(a => a + 1);

This method allows you to check the result as a Point. The type checks properly.

const shifted: Point = point.map(a => a + 1) as Point;

Casting the result as a Tuple also works.

UI Animation Speed

Mon, 13 Jan 2020 15:50:19 -0500

UI Animation Speed

In fighting games, the fastest move is usually 3 frames. Fighting games run at 60fps. Each frame is 16.667ms. So the fastest move is 50ms. Estimated response time is around 140-250ms.

50ms 100ms 150ms 200ms 250ms

  1    2     3     4     5

Tight animations should be between 50-150ms. 150-250ms will be still tight but be pretty slow to the user. With UI, each action has a anticipated event. Animations should be <150ms for events that should be instant. 250ms if they should be immediate. Higher may be with fade outs but will start to impede on your UX.

MIT's Browser Climate Change Simulation

Tue, 17 Dec 2019 11:06:26 -0500

MIT’s Browser Climate Change Simulation

En-ROADS is a transparent, freely-available policy simulation model that provides policymakers, educators, businesses, the media, and the public with the ability to explore, for themselves, the likely consequences of energy, economic growth, land use, and other policies and uncertainties, with the goal of improving their understanding.

climateinteractive.org/tools/...

1.9*C

This was my attempt. I think it balances my assumptions of the future with the target goals.

Currying Order?

Mon, 16 Dec 2019 19:39:42 -0500

Currying Order?

2 rules of functional programming is 1 parameter and each function must return something. Using this, currying helps to bridge the gap allowing multiple parameters.

const add = x => y => x + y
add(1)(2)

So what order should be used?

const find = people => person => people.filter(p => p === person)

const find = person => people => people.filter(p => p === person)

find(people)(person)
find(person)(people)

Now if we start to use them we get some curry properties.

const findPerson = find(people)

findPerson(person)

const findPerson = find(person)

findPerson(people)

That’s where I am at now. What is a better option?

Storybook: Component Story Format

Mon, 09 Dec 2019 11:23:12 -0500

Storybook: Component Story Format

This new format for your stories makes it a lot less horrible. No more hassling with storiesOf API. Now you can format your stories as ES Modules.

Component Story Format (CSF)

import MyComponent from './MyComponent.js'

export default {
	title: 'MyComponent'
}

export const normal = () => <MyComponent />

Testing

Because they are ES Modules, implementing the components, we can use them also for testing.

import { render } from '@testing-library/react'
import { normal } from './MyComponent.stories.js'

test('MyComponent renders', () => {
	expect(render(normal())).toMatchSnapshot()
})

Jest ES Modules

Fri, 06 Dec 2019 13:25:22 -0500

Jest ES Modules

Jest uses a custom require to import their modules. This means they will need to properly add support for ES Modules. At this time we will still need to use babel-jest to convert ES Modules to work with Jest.

Add `mjs` to `moduleFileExtensions`

"moduleFileExtensions": [
	...,
	"mjs"
]

Add `babel-jest` transform for `.mjs` files

This overrides the default babel-jest transform for relevant files. If you need .js or other files transformed, make sure to update this regex.

Powershell Stopwatch

Wed, 04 Dec 2019 14:46:25 -0500

PowerShell Stopwatch

One component of metrics you can take is measuring how long your scripts take to run. I have a few scripts for powershell and wanted to have a line tell me how long it took.

Start

$sw = [Diagnostics.Stopwatch]::StartNew()

Toss this at the start. Setting the $sw variable to refer to at the end of the script.

Stop

$sw.Stop()

Output

Then output the elapsed time.

$elapsed = $sw.Elapsed.TotalSeconds

Write-Host "Ran $elapsed seconds"

Full

$sw = [Diagnostics.Stopwatch]::StartNew()

...

$sw.Stop()

$elapsed = $sw.Elapsed.TotalSeconds

Write-Host "Ran $elapsed seconds"

CSS: Text Decoration Thickness

Sun, 01 Dec 2019 01:13:58 -0500

Text Decoration Thickness

Adjust how big the “decoration” is.

I think the best one should be the default, but for legacy reasons it’s not. It’s …

font-weight: 900

text-decoration-thickness: from-font

font-weight: 100

text-decoration-thickness: from-font

font-weight: 400

text-decoration-thickness: from-font

If the font file includes information about a preferred thickness, use that value. If the font file doesn’t include this information, behave as if auto was set, with the browser choosing an appropriate thickness.

Making custom highlighting styles in Hugo with Chroma

Sat, 30 Nov 2019 20:19:52 -0500

Making custom highlighting styles in Hugo with Chroma

Hugo uses Chroma for syntax highlighting. Hugo has a {{ < highlight > }} shortcode.

Custom Styles

For this site I made some custom styles. To do this, we need to change the highlighter to use classes.

markup:
  highlight:
    noClasses: false

Generate CSS

hugo gen chromastyles --style swapoff > syntax.css

This gives you a baseline style to work with. The classes are fairly straight forward. Using the browser inspect tool, you’ll find it easy to see the class to target.

Permaculture Books

Sat, 30 Nov 2019 19:44:22 -0500

Permaculture Books

Some books I liked in the permaculture mindset.

One Straw Revolution

After running from society, decides to do things differently than things have been done.

Restoration Agriculture

Unapologetic to the problems of current agriculture, taking a data-centric approach to productivity.

Sepp Holzer’s Permaculture

Shows a lot of slope permaculture, working with connected systems, working with nature.

The Resilient Farm and Homestead

Whole farm with detail and images. Simular to Sepp but a little more modern.

Favicons in Hugo

Sat, 30 Nov 2019 13:02:58 -0500

Favicons in Hugo

Favicons are necessary to giving your site perspective in the tab bar as well as in other interfaces. But they can be annoying to work with as you need to make and update multiple sizes. I am pretty lazy and would like to automate this.

First we’ll define the sizes we want for the main favicons. 16, 32, 48 are the most common. Set in your site config file.

Error: Not Supported

Sat, 30 Nov 2019 10:46:27 -0500

Error: Not Supported

Node 12.x

If you are working with Node.js 12.x which adds full ESModule support, you may find you run into this error. This occurs using async dynamic ESModule loading (which is recommended to load ESModules .mjs into CommonJS .cjs code).

`x.cjs`

import('./myESModule.mjs').then(({ addRow }) => {
	addRow('rockerBOO')
})

Node 13.2

What I would suggest is upgrading to Node.js 13.2, which has much better error messages. (sort-of)

TypeError: Invalid host defined options
    at module.exports (./webpack.config.cjs:3:33)

TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
    at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:35:9)

How to fix?

Not sure yet. I think some of the tooling surrounding node.js is a little outdated and making it very complicated to integrate ESModules into their configuration process. For instance, right now, Webpack only supports CommonJS modules as it loads all config files (or all js files) through require.

Web Components: Spotify Embed

Wed, 27 Nov 2019 10:15:30 -0500

Web Components: Spotify Embed

On this site, I wanted to embed Spotify playlists. Spotify has code to allow you to embed those playlists.

<spotify-embed embedwidth=“640” embedheight=“480” playlistid=“1GLEmw6QgsqrZPYUBl8QHi”

<iframe
	src="https://open.spotify.com/embed/playlist/1GLEmw6QgsqrZPYUBl8QHi"
	width="300"
	height="380"
	frameborder="0"
	allowtransparency="true"
	allow="encrypted-media"
></iframe>

Web Components

If we want to programatically update or generate the embed we can use JavaScript. Web Components allows us to use templates to render a embed.

`<spotify-embed>` Component

<spotify-embed
	playlistid="1GLEmw6QgsqrZPYUBl8QHi"
	embedwidth="300"
	embedheight="380"
></spotify-embed>

Template

<template id="spotify-embed-template">
	<iframe></iframe>
</template>

HTML Element

class SpotifyEmbed extends HTMLElement {...}
window.customElements.define('spotify-embed', SpotifyEmbed);

Then you load the template in the new HTML element and inject the new attributes.

JavaScript Pipeline Operators (Proposal)

Sat, 23 Nov 2019 11:40:28 -0500

JavaScript Pipeline Operators

Pipeline Operators

This proposal introduces a new operator |> similar to F#, OCaml, Elixir, Elm, Julia, Hack, and LiveScript, as well as UNIX pipes. It’s a backwards-compatible way of streamlining chained function calls in a readable, functional manner, and provides a practical alternative to extending built-in prototypes.

tc39/proposal-pipeline-operator

const multiply = a => b => a * b
const divide = a => b => a / b
const add = a => b => a + b

// add(5)(divide(multiply(1)(2))(2))

const result = multiply(1)(2) 
|> divide(2) 
|> add(5)

The format is similar to chaining with objects but allows similar functionality with immutable, functional programming.

HTTP Headers for the Responsible Developer Stefan Judis

Tue, 19 Nov 2019 20:42:13 -0500

HTTP Headers for the Responsible Developer

To build inclusive websites, developers have to consider accessibility, performance and user flows. Crafted source code forms the foundation for thought-through UIs, but it’s not only about the code. Let’s have a look at HTTP, and to be specific, its headers that can have a direct impact on user experience.

Stefan Judis HTTP Headers for the Responsible Developer

Most of these are HTTP Header updates to help with better security and performance.

Hugo OpenGraph Twitter Cards

Sat, 16 Nov 2019 13:47:11 -0500

OpenGraph and Twitter Cards on Hugo

Hugo OpenGraph Twitter

When your site is shared on social media, they use meta details from the page that is shared. Facebook uses OpenGraph and Twitter has their cards. This meta data is used to show embedded content inline.

To include this in a Hugo site you’ll want to add it to the front-matter. Both use the same variables, and this pattern allows good accessibility to necessary data.

The Man Who Planted Trees

Sat, 16 Nov 2019 12:28:48 -0500

The Man Who Planted Trees

The Man Who Planted Trees (French title “L’homme qui plantait des arbres”) is an allegorical tale by French author Jean Giono, 1953. Adapted to this animated short by Frédéric Back, 1987.

Github Star Showcase

Sat, 16 Nov 2019 08:50:41 -0500

Github Star Showcase

Some recently seen projects on Github that I liked.

react-adaptive-hooks

Deliver experiences best suited to a user’s device and network constraints

GoogleChromeLabs/react-adaptive-hooks github.com/GoogleChromeLabs/...

Allows you to access effective states of the device you’re running on. Network, ‘Lite Mode’, CPU Cores, Memory.

react-screenshot-test

A dead simple library to screenshot test React components

fwouts/react-screenshot-test github.com/fwouts/...

react-screenshot-test.png

dat.gui

dat.gui is a lightweight controller library for JavaScript.

dataarts/dat.gui github.com/dataarts/dat.gui

dat.gui gives a simple GUI for changing JavaScript variables. This is great for small projects where you want to allow customization but don’t want to build out a whole GUI for it.

New Design

Fri, 15 Nov 2019 09:43:16 -0500

New Design

Been wanting to redesign my site for a while now. The old design was specifically one page, JavaScript free. The new page is also mostly JavaScript free.

This new design is more of breaking free of the constraints. Semantically described, it does a much better job of housing the information across.

I have also added all my current content released. Will be adding more as we go.

1275 Photos CC 2.0 Licensed
55 Nature Videos CC 2.0 Licensed
Over 60 code repositories MIT Licensed

Also have detailed descriptions of my projects, with room for more projects.

Log on Dave Lage

Neovim LspAttach Autocommand

Neovim LspAttach autocommand

Neovim LSP 0.11

Neovim LSP 0.11

Streaming chat scroll to bottom with React

Streaming chat scroll to bottom with React

Let’s scroll into view

WebFinger response as application/json using Cloudflare Sites

WebFinger response as application/json using Cloudflare Sites

Transform rules

Add WebFinger to Your Site

Add WebFinger to your site

Change GTK font

Change GTK font

DWM to DWL

DWM to DWL

Issues I ran into

Terminal

Fetch images into Uint8Array/UInt8Buffer for WASM web applications

Fetch images into Uint8Array/UInt8Buffer for WASM web applications

WASM Heap Allocated Never Cleared

WASM Heap allocated never cleared

Dropping memory

Allocator freed pages

Fine-tuning BLIP Using PEFT

Fine-tuning BLIP using PEFT

PEFT

Dependencies and environment

Install our dependencies

Install PyTorch

Stable diffusion pipeline from video

Stable diffusion pipeline from video

Capturing frames

1. Keyframes

Alloc_error_web_worker

Alloc_error when using Web Worker

Dedicated Worker Global Scope

Dedicated Worker Global Scope

Links

Error: null pointer passed to rust

Error: null pointer passed to rust

React Suspense for Static Site Generation

React Suspense for static site generation

Make particle emissions masks using abstract shapes in Godot 4

Make particle emissions masks using abstract shapes in Godot 4

Why Arch Linux

Why Arch Linux

Gentoo

Cole Pulice - If I Don't See You in the Future I'll See You in the Pasture

Cole Pulice — If I Don’t See You in the Future, I’ll See You in the Pasture

7038634357 – Square Heart

7038634357 – Square Heart

Recommended environments for machine learning on Arch Linux with Python

Recommended environments for machine learning on Arch Linux with Python

Using Warp's query to handle GET array key values

Using Warp’s query to handle GET array key values

How to Add Model Tensors to Tensorboard Histogram

How to add model tensors to TensorBoard histogram

Finding the location of objects in a selection group for fabric.js

Finding the location of objects in a selection for fabric.js

Tauri - Save Files

Tauri — Save Files

Neovim 0.8 release notes and highlights

Neovim 0.8

Release notes

Highlights

Tree-sitter and highlights

set cmdheight=0

Azure DevOps Pipelines API Object Moved Curl

Azure DevOps Pipelines API, Object Moved error

nvim-dap — Getting Started

nvim-dap — Getting started

BOO Neovim colorscheme

BOO

Themes

sunset_cloud

radioactive_waste

forest_stream

crimson_moonlight

`set cmdheight=0`

`nvim-dap` — Getting started

`sunset_cloud`

`radioactive_waste`

`forest_stream`

`crimson_moonlight`

Loading images using `fetch` and promises

Install `nvim-lspconfig`

`argument error, :erlang.byte_size`