goat; sampler; 2024 CSS Survey Results

Today’s Drop is as diverse as all the random candy buckets folks will be reaching into tonight. From Bluesky’s powerful command-line interface to terminal-based visualization tools and the evolving landscape of CSS, the topics swing between emerging technologies and fundamental web development shifts.

TL;DR

(This is an AI-generated summary of today’s Drop using Ollama + a llama 3.2 custom model.)

• Bluesky’s goat CLI tool enables direct interaction with ATproto networks, offering powerful features like handle resolution and content backup capabilities (https://github.com/bluesky-social/indigo/tree/main/cmd/goat)
• Sampler provides terminal-based visualization of shell command outputs through YAML configuration, making it ideal for monitoring system metrics without heavy infrastructure (https://github.com/sqshq/sampler)
• The 2024 CSS Survey reveals a significant shift from “CSS Classic” to “New CSS,” highlighting powerful features like container queries, the :has() selector, and modern subgrids (https://2024.stateofcss.com/en-US/)

goat

For various reasons, lots of folks are coming to or coming back to Bluesky in droves. So, we’ll cover more Bsky and ATproto topics over the coming months.

Today, we go deep within the main Bluesky Golang GH to check out goat, the “Go AT protocol CLI tool”. It provides straightforward tooling to get, well, anything from an ATproto network (the Drop also has a modest number of posts involving all thigns ATproto).

There are plenty of examples in the repo, but we’ll reproduce a few, here, that do not require authentication. If you do setup app credentials for goat, then you can use the tool to perform backups of your Bluesky content (handy!).

Handles like hrbrmstr.dev are nice, but many/most ATproto operations require did (an identfier), and one thing you may find yourself doing quite a bit with goat is translating handles to dids:

$ goat resolve hrbrmstr.dev
{
  "id": "did:plc:hgyzg2hn6zxpqokmp5c2xrdo",
  "alsoKnownAs": [
    "at://hrbrmstr.dev"
  ],
  "verificationMethod": [
    {
      "id": "did:plc:hgyzg2hn6zxpqokmp5c2xrdo#atproto",
      "type": "Multikey",
      "controller": "did:plc:hgyzg2hn6zxpqokmp5c2xrdo",
      "publicKeyMultibase": "zQ3shdEbHZ352g6vNpye35z1Ax893GJ8SPc5R8hpVySK6L1U3"
    }
  ],
  "service": [
    {
      "id": "#atproto_pds",
      "type": "AtprotoPersonalDataServer",
      "serviceEndpoint": "https://porcini.us-east.host.bsky.network"
    }
  ]
}\

It does some of that work under the hood for us, so we just use a handle to, say, get a list of everything someone had “done” in the network:

$ goat 
goat ls hrbrmstr.dev | head -5
app.bsky.actor.profile  self    bafyreid72tjjir7tm4lqqr5osbmfao45tabxunb73q5memddshbtlvzh4m
app.bsky.feed.like      3l7ooox6cah2d   bafyreifq4gvhebpgbnkdvjcmfmtvihys6ibvdeq4sgr4yww5agoaiswkye
app.bsky.feed.like      3l7oi7pmdxf2c   bafyreibhixkwdjtpwwfjkohun7donnxlu3b5yixdbcitrlu3qf37wwzjhi
app.bsky.feed.like      3l7l64rmw6i26   bafyreigkysj72ubqk23dkzelvwgywjpntovksbkd6yz7ccuftxdfwvrjb4
app.bsky.feed.like      3l7kyaiz65g2z   bafyreifdb4crpunvfczzltivwg6va7sdjy6wb2xudrdj34movsboldwgdy

Let’s check out that first “like”:

$ goat get at://hrbrmstr.dev/app.bsky.feed.like/3l7ooox6cah2d
{
  "$type": "app.bsky.feed.like",
  "createdAt": "2024-10-29T22:32:41.606Z",
  "subject": {
    "cid": "bafyreia23f57dosy22ucljws2cknh2ozpauste46yikay63rfdhkfqqzdq",
    "uri": "at://did:plc:rqcdegxr22bnmi5c2bsrji3m/app.bsky.feed.post/3l7oebhjqii2t"
  }
}

$ goat get at://did:plc:rqcdegxr22bnmi5c2bsrji3m/app.bsky.feed.post/3l7oebhjqii2t
{
  "$type": "app.bsky.feed.post",
  "createdAt": "2024-10-29T19:26:11.488Z",
  "langs": [
    "en",
    "hy"
  ],
  "text": "Just curious… if you’re new to Bluesky (new account, or tuning in after a long hibernation period) - what brought you here? \n\nAlso hi, welcome, I am so friggin excited to see old and new friends on here. My feed is looking v promising, let’s keep the data convos going! 🤩"
}

It installs clean and fast, and is a really nice way to interact with Bluesky without having to fire up a browser.

sampler

Full disclosure: I did not give this a test, but have had firsthand accounts of it being fun and useful.

Sampler is a terminal-based tool for visualizing shell command output through a straightforward YAML configuration systemÏ It excels at monitoring dynamic processes like database changes, message queue depths, and deployment status directly in your terminal without requiring complex monitoring infrastructure.

It works by executing configured shell commands at specified intervals and rendering their output using various visualization components. You can monitor local or remote systems, with support for interactive shells and PTY modes for more complex scenarios.

Sampler offers several visualization types:

• Runcharts display time-series data with optional legends and statistics, ideal for tracking response times or resource usage over time.
• Sparklines provide compact line graphs perfect for monitoring system metrics like CPU usage.
• Barcharts excel at comparing multiple values simultaneously, such as network traffic across different protocols.
• Gauges show progress or completion metrics with customizable min/max values.
• Textboxes display raw command output, useful for logs or status information.
• Asciiboxes render large text in various styles, commonly used for clocks or prominent metrics.

It also includes a robust triggering system that can execute actions based on metric conditions. These triggers support visual alerts, sound notifications, and custom shell commands.

I can see Sampler being useful in dev environments wher setting up full monitoring stacks might be excessive. It’s also pretty spiffy that it operates without external dependencies beyond the shell commands it executes.

I hope to kick the tyres on it soon!

2024 CSS Survey Results

I remain solidly behind my “folks should know HTML/CSS/JS” mantra, so we’re going to take a short journy into the middle child in that trio, today.

The folks behind the annual “CSS Survey” have their 2024 readout up and here are the highlights:

2024 marks a pivotal transition in CSS development, characterized by a shift from “CSS Classic” to “New CSS”. This evolution represents a fundamental change in how web developers approach styling and layout.

Traditional CSS development relied heavily on external tooling, preprocessors, and methodologies to compensate for language limitations. This often meant maintaining complex build processes and depending on JavaScript for advanced functionality.

Container queries enable components to adapt based on their parent container’s size rather than viewport dimensions. This allows for truly modular design where elements can respond to their immediate context. Container queries use specific length units (cqw, cqh, cqi, cqb) and support fallback mechanisms for older browsers.

The :has() selector introduces relational selection capabilities, allowing styles to be applied based on descendant or sibling elements. This powerful feature eliminates many JavaScript-based workarounds and enables sophisticated parent-child styling relationships. For example, you can now style a parent element differently if it contains specific child elements or if those children meet certain conditions.

Modern CSS subgrids allows grid items to inherit and align with their parent grid’s tracks. This solves complex layout challenges by enabling precise alignment across nested grid structures. Unlike nested grids, subgrids maintain connection with their parent grid, ensuring consistent sizing and spacing. The feature supports both one-dimensional (rows or columns only) and two-dimensional implementations.

This new CSS paradigm reduces dependency on external tools and JavaScript solutions. Developers can now handle complex layouts, responsive design, and interactive styling directly through CSS, leading to cleaner, more maintainable codebases. The transition represents a significant step toward more powerful, native web development capabilities.

There are tons of details I’ve left out, including links to solid CSS resources to help folks keep up with the fast-paced changes in CSS-land.

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 ☮️