Drop #505 (2024-07-25): Toss Up Thursday

Remote Zed For All!; Gopengraph; teenie weenie git

A hodgepodge of items, today, as this has been a pretty cool week in terms of updates and new finds on the internets.


TL;DR

(This is an AI-generated summary of today’s Drop using Sonnet via Perplexity.)


Remote Zed For All!

I’m really counting on Zed to help challenge Microsoft’s dominance in the GUI editor/faux-IDE space. I still have no idea how the Zed folks are gonna make some coin, but that’s on them to figure out.

They released an update on the 24th that brought remote development/editing with Zed to all. After adding a remote server with cmd-shift-p remote (here’s what it looks like after adding one):

You connect to it, and a new Zed window appears. If zed is not installed remotely, it’ll do that for you and then start the zed server:

+ /home/bob/.local/bin/zed -v
sh: 1: /home/bob/.local/bin/zed: not found
+ bash
+ curl -sSL https://zed.dev/install.sh
Downloading Zed
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   566  100   566    0     0    352      0  0:00:01  0:00:01 --:--:--   352
100 54.4M  100 54.4M    0     0  16.5M      0  0:00:03  0:00:03 --:--:-- 53.6M
To run Zed from your terminal, you must add ~/.local/bin to your PATH
Run:
   echo 'export PATH=$HOME/.local/bin:$PATH' >> ~/.bashrc
   source ~/.bashrc
To run Zed now, '~/.local/bin/zed'
+ /home/bob/.local/bin/zed --dev-server-token LONG_LONG_TOKEN_STRING
zed (pid 3209157) connected!

⏵ Task `Install zed over ssh` finished successfully
⏵ Command: 'ssh hetzner-01'

The experience is not as clean as the one in VS Code, and Zed’s infrastructure is also acting as a broker for the zed-to-zed connections, as they note:

[Your local system] and the remote machine will communicate via https://collab.zed.dev/, so you will need outbound internet access on the remote machine.

That’s the same broker that lets you collaborate with others on a project in your editor session.

And, they do not handle remote directories with >100K files in them (neither does ext4, for that matter, at least without hacks like sudo tune2fs -E "hash_alg=tea" $FILESYSTEM).

The section header shows the session I fired up just after doing the above setup.


Gopengraph

(NOTE: you can skip the first two paragraphs of background setup if you just want to get to the tool being covered. There’s a [light] politics ref in it, but I wanted to include it as it’s emblematic of how I end up with a gajillion tiny, disconnected projects each year.)

After the U.S. GOP veep candidate was announced at the RNC the other week, an intrepid, indie investigative journalist had an amusing post on Bluesky, suggesting that the “menswear guy” (I have no idea) do a thread called “JD pants”, with it being him just him making fun of Vance’s pants.

I LOL’d and was saddened to learn, shortly thereafter, that some clever individual registered jdpants.com on the 17th, and has done nothing with it, save stand up an Apache server. Such a waste. However, jd-pants.com was available, and it seemed like a good way to have an outlet to both dunk on the wannabe veep, whilst also dropping some legit information on his horribad stances/policies.

Not wanting to let a new opportunity to [re]learn something go to waste, I decided to set the site up with Eleventy and a basic blog template. The bare bones one I cloned — while clean and minimal — turned out not have open graph (OG) tags. I’m somewhat obsessed with OG tags, and decided to rectify that deficiency.

I’m not super familiar with Liquid templates, and the thing I cloned is liquid-based (Eleventy supports a bonkers number of template languages, as we’ve noted in previous Drops), so there was some trial and error involved, and I needed to check to make sure the OG tags were being applied with each change. The browser extensions I reviewed to help with that either did not work with localhost sites well, or shunted the localhost content remotely (why?) to make it work.

Since I did not need a visual review, just validation the fields were set the right way, I came across go-opengraph, which is both a Go module and CLI tool for working with OG tags.

With it, you can just see the opengraph tags for any website in plaintext:

$ opengraph "https://kamalaharris.com/"
locale: en_US
locale:alternate: es_MX
type: website
title: Kamala Harris for President
description: Together, we can finish the job for the American people. Are you with us? Join our campaign to re-elect Kamala Harris today!
url: https://kamalaharris.com/es/
site_name: Kamala Harris for President: Official Campaign Website
image: https://kamalaharris.com/wp-content/uploads/2024/07/ActBlue-meta_KDH_A-logo_Blue3_de8008.png
image:width: 1920
image:height: 1080
image:type: image/png

or, it can output JSON:

$ opengraph -json "https://kamalaharris.com/" | jq -c
[{"Property":"locale","Content":"en_US","Prefix":"og"},{"Property":"locale:alternate","Content":"es_MX","Prefix":"og"},{"Property":"type","Content":"website","Prefix":"og"},{"Property":"title","Content":"Kamala Harris for President","Prefix":"og"},{"Property":"description","Content":"Together, we can finish the job for the American people. Are you with us? Join our campaign to re-elect Kamala Harris today!","Prefix":"og"},{"Property":"url","Content":"https://kamalaharris.com/es/","Prefix":"og"},{"Property":"site_name","Content":"Kamala Harris for President: Official Campaign Website","Prefix":"og"},{"Property":"image","Content":"https://kamalaharris.com/wp-content/uploads/2024/07/ActBlue-meta_KDH_A-logo_Blue3_de8008.png","Prefix":"og"},{"Property":"image:width","Content":"1920","Prefix":"og"},{"Property":"image:height","Content":"1080","Prefix":"og"},{"Property":"image:type","Content":"image/png","Prefix":"og"}]

I wrote a small Zsh function to grab the active tab in Safari Technology Preview (as I think I’m going to have to ditch all Chromium browsers soon):

og88() {
  opengraph $(osascript -e 'tell application "Safari Technology Preview" to return URL of front document')
}

# (the `88` in there as the dev web server for Eleventy starts on `8080`)

and periodically used that command to check the OG tags on each hack iteration.

It’s a great little utility that I might use to monitor OG tags for various sites.


teenie weenie git

Not too shabby

While I’m pretty happy with my move to Codeberg for social coding, one never knows when something on the internet will just go away.

Yes, I have multiple backup copies of all my remote repos on all collaborative coding sites I’ve ever signed up for, but, sometimes it’s nice to have a web-accessible view of them.

There are many ways to have a web view of a git repo, but I’m also tired of running servers that can get pwnd (Gitea and Gitlab both have at least annual CVEs assigned).

One of the recent newcomers on the block is Itsy Gitsy. Before reading further, you can check out a demo, but you should def come back, as this project is more than meets the eye.

From the README, “Itsy-Gitsy spiders across a collection of Git repositories, passes a subset of their contents through user-defined input templates, and generates a set of output files. In standard usage, the input templates describe a website layout, and the output is a static website suitable for browsing locally, or hosting on a web server.”

It goes on a bit, and this is the super cool part:

Since the output is static text files, Itsy-Gitsy can generate more than just websites. With custom templates, it can render your Git repositories as plain text, CSV, LaTeX, org-mode, Markdown, TOML, or whatever format you desire.

😲

I’m going to leave you in the hands of the README, as it is quite verbose, well-organized, and very comprehensive. You can tell the author has done quite a bit of slow-brain noodling on this idea, and I’m hoping it catches some serious traction.

My own trial run of it went smoothly.

Make sure to check out the CSV and mdbook examples, too.


FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.