A list of small things I learn every day, documented primarily for myself.
The ubiquitous format for writing text on the internet, Markdown, gets its name from Markup—as in Hyper Text Markup Language (HTML).
The idea was that in the early days of blogs, writing HTML Markup was complicated and the opposite of that complexity must be named Markdown.
I never made this connection in all the years I’ve been using Markdown.
This—OWNS_VEHICLE—style is referred to as “screaming 🐍 snake case.”
The Speculation Rules API allows you to improve page navigation on your websites by prefetching and prerendering web pages proactively with just a few lines of code.
In practice, this means that when a user hovers over a link (to click it), the next web page is already loaded and rendered, providing a faster, SPA-like loading experience.
I added it to my website today. You can see it in action by opening the network tab and hovering over a link in this website without clicking it.
This website uses Hugo, so I added it to my head.html partial template:
<!-- Speculation Rules for instant navigation -->
{{- /* Only enable this in production */}}
{{- if hugo.IsProduction | or (eq site.Params.env "production") }}
<script type="speculationrules">
{
// Prefetch and prerender all internal pages but wait 200ms (moderate eagerness) after hover
"prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }],
"prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
}
</script>
<script>
// Fallback for browsers that don't support the Speculation Rules API
if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('speculationrules')) {
// Track preloaded URLs to avoid duplicate requests
const preloadedUrls = {};
function pointerenterHandler() {
if (!this.href) return; // Skip if no href
if (!this.href.startsWith(location.origin)) return; // Skip external links
if (preloadedUrls[this.href]) return; // Skip duplicates
preloadedUrls[this.href] = true; // Mark as preloaded
const prefetcher = document.createElement('link');
const supportsPrefetch = prefetcher.relList && prefetcher.relList.supports && prefetcher.relList.supports('prefetch'); // Check if browser supports prefetch
prefetcher.as = supportsPrefetch ? 'document' : 'fetch'; // Set as document or fetch (older browsers)
prefetcher.rel = supportsPrefetch ? 'prefetch' : 'preload'; // Set as prefetch or preload (older browsers)
prefetcher.href = this.href;
document.head.appendChild(prefetcher); // Add to head
}
document.addEventListener('DOMContentLoaded', function () {
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
const saveData = conn && conn.saveData;
const isVerySlow = conn && /(^|-)2g($|-)/.test(String(conn.effectiveType || ''));
if (saveData || isVerySlow) return; // Skip for data saver and slow connections
document.querySelectorAll('a[href^="/"]').forEach(function (item) {
item.addEventListener('pointerenter', pointerenterHandler, { passive: true }); // Add event listener when pointer enters link area
});
});
}
</script>
{{- end }}
DocuSeal has an excellent blog post that covers this API. The code I shared above just tweaks it a little bit.
The omitempty option in the Go standard library’s encoding/json package omits boolean fields with false values.
The “omitempty” option specifies that the field should be omitted from the encoding if the field has an empty value, defined as false, 0, a nil pointer, a nil interface value, and any array, slice, map, or string of length zero.
This means that if you use the omitempty option on a boolean field, the field is omitted when it is false:
type AppConfig struct {
FlagValue bool `json:"flag_value,omitempty"`
}
func main() {
ac, _ := json.Marshal(AppConfig{true})
fmt.Println(string(ac))
ac, _ = json.Marshal(AppConfig{false})
fmt.Println(string(ac))
}
{"flag_value":true}
{}
Which is unexpected, because you expect the second line to be {"flag_value":false}.
To fix this, you can use a pointer to a boolean instead:
type AppConfig struct {
FlagValue *bool `json:"flag_value,omitempty"`
}
func main() {
fv := true
ac, _ := json.Marshal(AppConfig{&fv})
fmt.Println(string(ac))
fv = false
ac, _ = json.Marshal(AppConfig{&fv})
fmt.Println(string(ac))
}
{"flag_value":true}
{"flag_value":false}
To differentiate between unset and zero values for any data type, use pointers.
The relatively new :has() pseudo-class can be combined with the next-sibling + combinator for some nifty CSS selections. I used this selection today:
.post-content blockquote p:last-of-type:not(:has(+ footer)) {
margin-bottom: 0;
}
Which can be read as, “select the last paragraph element within blockquote elements within elements with class post-content which are not followed by a footer element.”
There’s a “pour one out” 🫗 emoji?!
There has been since 2021?!
I’m using this all the time now.
When combining multiple jq filters, you can use jq’s inbuilt pipe | operator instead of shell pipes.
i.e., instead of this:
curl 'https://jsonplaceholder.typicode.com/users' | jq \
'.[]' | jq 'select(.address.city == "South Christy")' | jq '{name, username, email}'
You can do this:
curl 'https://jsonplaceholder.typicode.com/users' | jq \
'.[] | select(.address.city == "South Christy") | {name, username, email}'
You can escape Markdown code blocks by using four backticks (````) instead of three.
> Prevent Go Programs from Exiting
This _can be prevented_ by wrapping your code with a **channel**:
```go
c := make(chan bool) // creates a new channel
// your code goes here
<-c // perpetually waits for the channel to receive data
```
The above code block documents a Markdown code block. Very meta. It is created use four backticks:
````markdown
My working with CSS is mostly trying every value for a property until it does what I want it to do. This ignorance has only increased with free access to GitHub Copilot in my IDE, where I conveniently delegate CSS specifics to the AI.
But today, I found the BEST interactive tutorial about Flexbox. Even a quick look can help you intuitively understand how to use the Flexbox properly. Very good, very recommend.
To prevent Front Matter CMS from including specific files and folders, you can provide the paths to be excluded in excludePaths under frontMatter.content.pageFolders:
{
"frontMatter.content.pageFolders": [
{
"title": "Posts",
"path": "[[workspace]]/content/posts",
"previewPath": "posts",
"contentTypes": ["Post (default)"],
"excludePaths": [
"_*.*" // Exclude all files starting with an underscore
]
}
]
}
I use this to exclude _index.md files from Front Matter.
You can use channels to prevent Go programs from exiting.
I have found this to be useful when running Go + Wasm on the browser where I run into errors like:
wasm_exec.js:378 Uncaught Error: bad callback: Go program has already exited
This can be prevented by wrapping your code with a channel:
c := make(chan bool) // creates a new channel
// your code goes here
<-c // perpetually waits for the channel to receive data