Good afternoon, readers, I hope you are having as good a day as I am. Today I started playing "Midnight Suns" (PS5) and so far, it's a heck of a lot of fun. Yesterday was one of those days that was so good, I almost got a bit paranoid that something bad was going to happen. (It didn't - the day ended great.) I hope it's a sign of how good the week will be. As a quick aside, there will be no <Code><Br> this week - it will return next week. See you then!

Cally - Calendar Component

First up is a cute (can you call a web component cute???) little web component that displays calendars and allows the user to select a date, or a range of dates. It's easy to use, for example, show a single calendar and allow for one date:

<calendar-date>
  <calendar-month></calendar-month>
</calendar-date>

Or - show multiple calendars and allow for a range:

<style>
  .grid {
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
  }
</style>
<calendar-range months="2">
  <div class="grid">
    <calendar-month></calendar-month>
    <calendar-month offset="1"></calendar-month>
  </div>
</calendar-range>

Cally was created by Nick Williams and can be installed via a script tag or npm install if you wish. It is important to note that, "The aim is not to give you a full date picker, instead only the lower-level building blocks that allow you to build your own.", which means outside of displaying the calendar and letting you select a date (or range), it doesn't do much else. I wish it would support form participation, but you can grab the value with JavaScript by just getting the value.

To show that, and the component in action, I whipped up a quick CodePen:

See the Pen Cally by Raymond Camden (@cfjedimaster) on CodePen.

As I said, it renders very well and is quick to use, so check it out: Cally

Files and the Web Platform

In various ways, web developers have had some way to work with user files for quite some time. But as the web platform has expanded, so have those options. Scott Vandehey wrote up a great guide on those features named "The Many, Confusing File System APIs".

His article covers all the various options, helps explain the differences, and even offers up a PDF guide (if you're willing to sign up for a newsletter).

Embed the Sky...

Sorry for the overly dramatic subtitle there. I've gone back and forth about my opinion of Bluesky. For a while, I was considering dropping it, but Threads has really turned into... I don't know. Threads feels more very "shiny", but also a bit "lifeless", whereas Bluesky feels a bit more like how Twitter used to be. While I don't post a lot there, I do spend more time there than I used to. (If you want, you can find me at raymondcamden.com.)

Vincent Will created a nice little web component named bsky-embed that lets you embed a user's posts, a feed, or search, quickly and easily.

After loading in the script tag, you can then embed a profile like so:

<bsky-embed
    username="vincentwill.com"
    mode="dark"
    limit="5"
  >
</bsky-embed>

You can see it in action below:

See the Pen bsky-embed by Raymond Camden (@cfjedimaster) on CodePen.

One More Thing...

Let's end as I've done the past few weeks with a music video you may enjoy. Or not. Either way, give it a listen?