danawoodman

Allow photo album AND the camera

On Android devices, if you want to create a file input that prompts the user to either choose an image from their photo album or take a picture with their camera, you'll need this basically undocumented capture attribute added to your input's accept property:

<input type="file" accept="image/*;capture=camera" />

danawoodman

Deploying Cloudflare Workers via Cloudflare Pages in a Turborepo monorepo

Whew, what a mouthful.

Cloudflare Workers is an excellent platform for deploying a variety of applications but it has some limitations compared to Cloudflare's other product, Pages.

Pages gives you git integration which gives you auto-deploying via git push as well as pull request preview deployment links so you can test out features before pushing to production.

However, it's not super clear how to deploy a bare worker to Cloudflare Pages as Pages is more tailored right now for apps (SvelteKit, Astro, Next, etc), that is why I wrote up this little guide.

danawoodman

Get bun.lock files to work with Cloudflare Workers CI

As of the time of this writing, Cloudflare Workers CI does not work with the newer text-based bun.lock file and instead requires a bun.lockb file to build your app via their CI system.

This usually manifests itself with the following error when trying to deploy your apps using a bun.lock file:

13:48:54.691	Initializing build environment...
13:49:02.821	Success: Finished initializing build environment
13:49:03.776	Cloning repository...

danawoodman

Release golang apps using Github Actions

Want to release a new binary on Github for every new git tag (e.g. v1.2.7)? Here is a simple Github Actions yaml config file that should get you started.

This script will automatically checkout your code, setup the correct version of go as defined in your go.mod file and build your go binary (in this case using a Makefile default target), then upload it to a new Github Release.

# .github/workflows/release.yml
name: Build and release Go Project

danawoodman

React "Hello World" Examples

Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.

They will hopefully get you over the initial learning curve of the hard parts of React (JSX, props vs. state, lifecycle events, etc).

Usage

You will want to create an index.html file and copy/paste the contents of 1-base.html and then create a scripts.js file and copy/paste the contents of one of the examples into it.

danawoodman

Using Golang templ with the Echo framework

templ is a great view framework but there is no clear documentation (as of writing) showing how to use it with the Echo web framework. This short guide should show you how to set it up:

Install dependencies

Install templ and echo:

go get github.com/a-h/templ

danawoodman

Rust-like "results" for TypeScript projects

Handling errors in JavaScript/TypeScript kinda sucks. throwing breaks the control flow, is not "discoverable" (e.g. impossible to really know what will happen in error states), and it is generally more tricky to get well typed error responses.

Taking inspiration from Rust's Result type, we can implement something similar in TypeScript with a minimal amount of code and no dependencies. It's not as robust as Rust's of course, but it has been very useful for me on a variety of large projects.

Implementation

Save the following TypeScript in your project and import it to use the various result utils:

danawoodman

Serving embedded static files with Echo (Golang)

For a project I'm working on, I need to ship a single server binary with all static files embedded and use that for the frontend of the server. The backend has a variety of routes which the frontend calls.

The frontend is a SvelteKit static app built to ./frontend/build. Here is the Echo configuration to get these files serving at the root of the web server:

danawoodman

Start a web page in kiosk mode on a Raspberry Pi

Install dependencies

Start by installing chromium and unclutter which will hide the cursor on the screen:

sudo apt install -y -no-install-recommends chromium-browser unclutter

danawoodman

var fs = require('fs');
var PDFDocument = require('pdfkit');

var pdf = new PDFDocument({
  size: 'LEGAL', // See other page sizes here: https://github.com/devongovett/pdfkit/blob/d95b826475dd325fb29ef007a9c1bf7a527e9808/lib/page.coffee#L69
  info: {
    Title: 'Tile of File Here',
    Author: 'Some Author',
  }
});