Ryan Trimble, UX/UI Developer

Things I Like

Tue, 16 Dec 2025 12:00:00 GMT

I'm feeling pretty bad about web development (like, in general) lately. There is a lot happening that makes all of this a whole lot less fun in my opinion. I've drafted quite a few angry posts that haven't been finished and will never be published.

Instead of stewing in that negative energy, I wanted to remind myself of what I do like about web development.

I Like Accessibility

My first web developer position was at a local college, where I learned a lot about accessibility. A majority of my time was spent checking out various components of the site, testing them, and learning how to make them more accessible. That experience made me understand the importance of accessibility in web development.

Although it's generally a good idea to follow established patterns, there is a fun challenge in crafting user interfaces with accessibility in mind. Accessibility really makes you stop and consider all the different ways a user might interact with a design, and how best to prepare.

This involves a lot:

Color contrast, typography, and readability
Semantic HTML and information hierarchy
Testing how screenreaders might interpret things
Navigating sites without a mouse
... so much more!

I truly believe there's a good balance to be found in providing fun user experiences, designed to be accessible, with results that benefit everyone.

If it's designed well, but not accessible - it's not designed well.

I Like Animations

I'm a fan of animation in many forms, unfortunately I don't have the skills to create cartoons. I do have the skills to create web animations, at least.

The animation capabilities of CSS and animation libraries such as GSAP (GreenSock Animation Platform) are super fun to explore. One of my favorite workshops I participated in was about animating SVGs, with instructor Cassie Evans.

Some animation may conflict with accessibility, but I feel like there is always room to add non-intrusive micro-animations on interactions to make them a tad more enjoyable. Animation may improve perceived performance of sites, as well as inform users while something happens in the background.

See the Pen <a href="https://codepen.io/mrtrimble/pen/dyRZwVW">User Interaction Animation</a> by Ryan Trimble ( <a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

I Like Building Stuff

As much as I enjoy building complete websites or applications, I think I have more fun building tools and libraries that may be used in any type of project.

At a previous position, I contributed to our company's in-house design system, which was used in several of our projects. I built tools like skellyCSS (now skelly-wc), just a tiny library to quickly add skeleton screens into projects.

I really like building custom components. Like components that nail functionality and are reusable. Digging into the small details of a single component, providing the right functionality, making it accessible - it's where I thrive, I think.

I feel I have a more difficult time working in third-party component libraries than I do creating components from scratch. This is most likely due to some personal standards that never feel met when perusing docs of an off-the-shelf component library. My problem, not theirs.

Personally, I love the idea of using native web components to make reusable user interfaces, with zero dependencies and can be used everywhere.

If I had to pick a reactive JavaScript framework to build components with, it would be Vue. Vue's single file component structure works well with my mental model for what a component needs: a template, script, and styling.

I Like Learning Stuff

I love learning new things and luckily, with web development, there is an endless amount of things to learn about.

My favorite thing to do is just pick a topic and do a deep dive, try to figure out how it plays a part of the web. A lot of the time, I start a project to build and use whatever thing that happens to be. I never really finish the project, but I do learn a lot about the thing, which is the actual goal.

Also, the web evolves fast: CSS becomes more powerful all the time, new tools for building static websites or new ways to render server-side. I love finding creative solutions to various types of problems, please keep sharing how you "solved it" on your blogs!

I Like Optimizing

I never really consider something "finished" and strive to make things better. In a variety of ways:

Faster website and web application performance
Enhancing semantics for accessibility and search engines
Updating styles towards more modern CSS

I also like tinkering with tools to help with optimizing things! For example, Vite is one of my favorite tools as it is crazy fast and has a great ecosystem for optimizing compiled code.

I Like Semantic Markup

There are over one hundred different HTML tags that are highly capable in structuring documents and templates.

Semantic markup is helpful in lots of different ways, especially for accessibility. I'd say the primary benefit is information hierarchy, helping users understand the flow of a document easily.

If I find myself reaching for a generic <div> or <span>, I tend to revisit the code and see if there is possibly a more applicable HTML element to handle it.

I Like Styling

Of the many, many, many aspects of web development, CSS is my absolute favorite. CSS provides an infinite canvas to create anything and without a doubt is the best design tool available.

Admittedly, I took a long time to fully understand how JavaScript works and would often find various ways to avoid it, instead reaching for CSS-only solutions. Back then, this was probably not the best approach, however nowadays CSS is so powerful I find it weird developers aren't using it more effectively.

CSS really checks off all the boxes of "things I like" -

CSS helps with accessibility and semantics
CSS provides enjoyable and memorable user experiences
CSS has a lot to learn and is always improving
CSS enables me to endlessly create

I love getting to share my excitement for CSS here on my blog and over on CSS-Tricks.

CSS has taken me places as well, I flew halfway across the world to attend CSS Day in Amsterdam. Still one of the best trips; it didn't even feel like a conference, as everyone was also there because they also love CSS.

I Like the Web

As disappointing as things have been lately, I still really enjoy working on the web.

I find it fantastic that there is such a low barrier for entry to writing your first lines of code. There are so many resources available to help folks learn, build, and create on the web.

Hopefully, as "hype" dies down about certain technologies, I'll be able to return to a point where I'm more excited about the web again.

Taking things into my own hands, Part 2: Electric Boogaloo

Sat, 29 Nov 2025 12:00:00 GMT

Last year I checked out Coolify, which I determined to be a rad self-hosting solution, however I never actually committed to making the switch away from Netlify.

There were a few reasons:

Netlify makes things super easy
Lack of confidence (on my part)
Laziness (also on my part)

Earlier this year, I decided to take things into my own hands a bit more, and I'm happy to say I've finally made the switch.

That's right! The website you are looking at right now is hosted on a Coolify instance, running on a virtual private server (VPS) in Ashburn, VA.

It's not just Coolify I switched to; as described in my blog post discussing self-hosted applications, I'm also self-hosting a Gitea server on my network area storage (NAS) server. Now I manage my website's git repo on my own hardware and deploy my site to Coolify. This circumvents a need for GitHub, giving me a lot more control over my entire deployment pipeline.

What is Coolify, again?

In case you didn't read the original post, Coolify is an open-source, self-hostable, "Netlify-in-a-box" type application. Developers are able to set up an instance and deploy all sorts of websites and applications.

Coolify works a lot like Netlify, connecting to git repositories to easily deploy things. Coolify works with many different services, databases, and even backend APIs, which is rad.

VPS Hosting

To host the Coolify instance, I set up a virtual private server through Hetzner. As far as I can tell, Hetzner is a great choice for this, especially as they have a 1-click installer to configure Coolify.

Also, the price isn't bad either at $9.99 per month, with $2 per month backups.

I was a chump paying for Netlify's Pro plan, which was around $20 per month (on a legacy plan). Actually, I don't mind paying for services I use and I was a big fan of Netlify for a long time.

Netlify is following the lead of AI companies and began charging based on "token" usage. I'm not a fan of token-based anything - it all feels a bit like a ploy to squeeze users for more money.

Now things are a bit cheaper and I have even more functionality should I need it.

Cloudflare DNS

I'm routing my site through Cloudflare now, as they have a couple of great features for handling domains:

Automatic SSL - this was something that Netlify provides and I don't like to manage certificates.
AI prevention - Cloudflare has the capability to prevent AI bots from crawling and scraping my site's content.

I know Cloudflare had some uptime issues recently, but they are a powerhouse of the internet and are generally reliable.

How I'm handling emails

One of the best things about Netlify is Netlify Forms. Probably the easiest way of processing forms I've ever used, as all you really need to do is add a netlify attribute to <form> elements.

I came across Resend as I was setting up notifications for my Coolify instance. Resend is an email-by-API tool that is only slightly more work than adding an attribute, and determined it would work just as well for my contact form.

Using Astro, I created an Action to listen for form submit events to send submissions my way.

// example action

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { Resend } from 'resend';

export const server = {
  contact: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string(),
      email: z.string(),
      message: z.string(),
    }),
    handler: async function (input) {
      const resend = new Resend(import.meta.env.RESEND_API_KEY);

      const { data, error } = await resend.emails.send({
        from: `[Contact Form] ${input.name} <from@domain.com>`,
        to: ['recipient@domain.com'],
        subject: `Contact Submission`,
        html: `
          <h1>Contact Submission</h1>
          <p><strong>Name:</strong> ${input.name}</p>
          <p><strong>Email:</strong> ${input.email}</p>
          <p><strong>Message:</strong></p>
          <div>
            ${input.message}
          </div>
        `,
      });

      // success/error handling

    }
  }),
  //... other actions...

Resend's free tier allows 3,000 emails per month, which is good enough for my needs. Honestly, I don't get a whole lot of form submissions, usually just spam.

I thought about scrapping the contact form altogether, as it's not super useful, but I do like to provide it as an option.

What about Analytics?

I've been using Plausible analytics for a while now and I would still recommend it, especially as they have a self-hostable, "community" version. However, I decided to switch things up and found another open-source analytics tool called Umami, which I was able to deploy on my Coolify instance right alongside my website.

Based on the few days I've had it running, Umami seems easy-to-use and understand. I don't really do much in-depth assessment of my website's analytics, I mostly just like to see where my site is being linked from.

Anything else?

I fixed a bug that was preventing folks from signing my website's guestbook, so now that should be working again - feel free to leave your mark and remember to be nice to me!

In Conclusion...

I know I'm still a ways away from fully detaching myself from big tech entirely, but I'm trying.

I'm not a fan of the current trends and priorities of companies I became dependent on. So, rather than sitting back and accepting all these force-fed features, I'm slowly carving out my own slice of the Internet.

Uploading Some Old Posts

Mon, 22 Sep 2025 12:00:00 GMT

Just wanted to pop a quick note on here to say that my former employer shut down their development blog, which had some articles I wrote prior to launching my own personal blog.

Here's the articles I wrote:

Animated Scroll Effects - published May 18th, 2022, I wrote about how to replicate an animation effect using GSAP!
Building an Online Store with Platform UI and Hugo - published June 16th, 2022, a how-to guide on building an online store using our CSS framework (Platform UI) and the static site generator Hugo.
Recreating the Spotify "Like" Button - published August 11th, 2022, a co-worker nerd-sniped me into rebuilding the Spotify Like button using CSS animations.
RIMdev Radio: Building with Astro - published October 12th, 2022, wrote about one of my initial experiments with Astro and a dev-team playlist.
Automatically Import Components in Astro MDX - published November 17th, 2023, explained how to set up automatically imported components for MDX files in Astro.

I've also forked the entire blog, with all articles as originally posted, here.

The articles are probably a bit out of date, but want to preserve things for sentimental value. I truly enjoyed my time at Ritter and miss my team a lot!

My Strong Interests Profile

Sun, 03 Aug 2025 12:00:00 GMT

Back in High School, I remember taking career assessment tests that were supposed to help us figure out what the hell we wanted to do with our lives. I don't recall ever appreciating the results, I wanted to do something cool like go to space or be a rock star, but these damn tests always said I'd end up working with computers in some capacity.

In hindsight, obviously the results were accurate, but I also don't think it was hard to predict that kids growing up in the '90s would end up using computers in their day jobs later in life.

Recently, I took the the Strong Interest Inventory Profile, available on Career Assessment Site, at the suggestion of my therapist. Mainly just to check in and see if my interests are really lining up with the types of things I'm doing professionally.

The assessment is about $65 and only takes about 45 minutes to complete. The test is not about skills or abilities, just interests, and the goal is to help guide you towards making decisions for jobs or furthering education.

The Results

General Occupational Themes

According to the assessment, general occupational themes are six broad interest patterns used to describe a person's "work personality."

My top ranking occupational themes include:

Artistic
Conventional
Social

Artistic personality types find interest in self-expression, art appreciation, communication, and culture. Work activities may include composing music, performing, writing, or creating visual art. Potential skills include creativity, musical ability, artistic expression, and find value in beauty, originality, independence, and imagination.

Conventional personality types enjoy organizaiton, data management, accounting, investing, and information systems. Work activities may include setting up procedures and systems, organizing and keeping records, and developing computer applications. Potential skills include ability to work with numbers, data analysis, finances, and attention to detail, and find value in accuracy, stability, and efficiency.

Social personality types are interested in people, teamwork, helping, and community service. These folks work in fields of teaching, caring for people, counseling, or training other employees. People skills are important, verbal ability, listening, showing an understanding, and find value in cooperation, generosity, and service to others.

Basic Interest Scales

The assessment's "basic interest scales" specify the types of work activities or projects that are personally motivating and rewarding.

My Top 5 Interest Areas:

Research
Programming & Information Systems
Office Management
Writing & Mass Communication
Teaching & Education

Selected Career Fields

Based on interests, the assessment provides some selected career fields as suggestions.

The career fields suggested for me are:

Graphic Artist
Calligraphy
Web site design
Film and video production
Cartooning
Music librarian

I did not know calligraphy is a career.

Reflections

Lately, I'm feeling that I'm not headed in the right direction or like I haven't quite figured out where exactly I fit in, based on my personality, skills, and interests.

I was drawn to the web as a medium and a platform as it's a super interesting intersection for art and technology, and those two interests present heavily in the results of my assessment. This may also explain why I'm so interested in Design Systems.

I don't generally care for tests that think they can pidgeon-hole me into some broad categorizations, but I mean this feels pretty accurate.

I've a tendency to blame myself for... well most things, this assessment helps me realize that the disconnect I feel may not actually be my own fault, which is relieving to understand.

Troubleshooting my emotions

Thu, 19 Jun 2025 12:00:00 GMT

Like many folks, I struggle with mental health issues: depression, anxiety, and ADHD. I've been on an anti-depressant for some time, and while it seems to keep me going, I still can't help but feel I'm not quite the person I could be. I feel these issues prevent me from doing things I enjoy doing, making decisions, and advocating for myself and my beliefs.

I'm just beginning my mental health journey, but have already learned quite a bit about the way I think. My therapist has me journaling, trying to recognize cognitive distortions in my thought patterns. I'm noticing how often I manage to point the finger at myself as the problem, whether justified or not.

Another of my tasks was to create a list of ten things I honestly like about myself, which was daunting. I'm not super confident, a frequent self-doubter with a penchant for self-deprecation, which ultimately leads to not liking myself very much at all.

Here's where I arrived:

I am curious
I am a problem-solver
I am good with technology
I am empathetic
I am hard-working
I am creative
I am open-minded
I am courteous
I am inventive
My pets like me

This list became my "positive self-talk script," which I'm reading to myself daily. The idea behind a positive self-talk script is to replace negative thoughts with positive ones, reading daily in order to help retain and reinforce that positivity towards yourself.

It's all rather awkward and uncomfortable for me, but like, in a good way. I'm finally taking care of myself, and I hope you are doing the same.

Taking things into my own hands

Sun, 18 May 2025 12:00:00 GMT

Earlier this year, I purchased myself a new toy: a network area storage device (NAS), the Synology DiskStation DS423+.

The main purpose of a NAS is as a storage hub for your network, where you're able to easily share and collaborate on files between devices on your network. The fun part of an always-connected device with tons of storage is self-hosting all-the-things.

System Information

Here are the specs of my NAS:

Make: Synology
Model: DiskStation DS423+
Bays: 4x HDD, 2x NVMe
CPU: 2.0 GHz Intel Celeron J4125 Quad-Core
Drives:
- 4x SeaGate IronWolf - 8TB
- 2x Synology NVMe M.2 2280 - 400GB
- RAID5
- Total Capacity: 24TB
RAM:
- 2GB (onboard)
- 16GB Timetec 16GB DDR4 2666MHz PC4-21300 (installed)

Remote Access

I've enabled remote access to my NAS, and many of these applications, through the use of dynamic DNS and reverse-proxy addresses.

Synology includes a dynamic DNS (DDNS) service within the operating system of the DiskStation. If you aren't familiar with DDNS, it's a service that assigns a human-readable domain name to a dynamically updated IP address. The service runs on the device and informs an outside DNS provider of the current external IP address of the device.

I purchased a personal domain name for my NAS and set it up to use Cloudflare nameservers. Cloudflare makes it easy to manage DNS records. Here, I can create a CNAME records for any subdomain I want and point it towards the DDNS address of the NAS. Then I can add reverse proxy rules pointing the subdomains to different services running on the NAS side.

Now, I'm able to access any applications I need from outside my network!

Applications

I've been having a lot of fun checking out all the self-hostable open-source projects out there. I have lots of plans for my NAS, but here's a list of the applications and services I've figured out how to get running so far:

ConvertX

ConvertX is a handy tool that allows for converting files of all different kinds into many other formats.

services:
  convertx:
    image: ghcr.io/c4illin/convertx:latest
    container_name: Convertx
    healthcheck:
      test: ['CMD-SHELL', 'nc -z 127.0.0.1 3000 || exit 1']
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    ports:
      - 3522:3000
    environment:
      JWT_SECRET: ${CONVERTX_JWT_SECRET}
      ACCOUNT_REGISTRATION: false #Set To false To Disallow User Registration.
      HTTP_ALLOWED: true #Allow HTTP Connections, Only Set This To true Locally.
      ALLOW_UNAUTHENTICATED: false #Allow Unauthenticated Users To Use The Service, Only Set This To true Locally.
    volumes:
      - /volume1/docker/convertx:/app/data:rw
    restart: on-failure:5

Gitea

Gitea is an open-source code versioning platform, alternative to GitHub. Feature parity is very similar to what GitHub offers, too - including repository management, issue and project tracking, organizations, and much more.

Here's the dockerfile I used to set up Gitea on my NAS:

services:
  db:
    image: postgres:17
    container_name: Gitea-DB
    hostname: gitea-db
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: ['CMD', 'pg_isready', '-q', '-d', 'gitea', '-U', 'giteauser']
      timeout: 45s
      interval: 10s
      retries: 10
    volumes:
      - /volume1/docker/gitea/db:/var/lib/postgresql/data:rw
    environment:
      - POSTGRES_DB=gitea
      - POSTGRES_USER=${GITEA_DB_USER}
      - POSTGRES_PASSWORD=${GITEA_DB_PASS}
    restart: on-failure:5

  web:
    image: gitea/gitea:latest
    container_name: Gitea
    hostname: gitea
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: wget --no-verbose --tries=1 --spider http://localhost:3000/ || exit 1
    ports:
      - 3052:3000
      - 2222:22
    volumes:
      - /volume1/docker/gitea/data:/data
      - /etc/TZ:/etc/TZ:ro
      - /etc/localtime:/etc/localtime:ro
    environment:
      - USER_UID=${PUID}
      - USER_GID=${PGID}
      - GITEA__database__DB_TYPE=postgres
      - GITEA__database__HOST=gitea-db:5432
      - GITEA__database__NAME=gitea
      - GITEA__database__USER=${GITEA_DB_USER}
      - GITEA__database__PASSWD=${GITEA_DB_PASS}
      - ROOT_URL=${GITEA_ROOT_URL}
    restart: on-failure:5

Home Assistant

Home Assistant consolidates home automation services and "Internet-of-Things" (IoT) devices under one roof, replacing Google Home. Control lights, thermostats, robot vaccuums, and whatever else, as it integrates with thousands of devices. You can even replace voice assistants like Google Assistant or Siri!

Here is my Dockerfile for Home Assistant:

services:
  homeassistant:
    image: homeassistant/home-assistant
    container_name: Home-Assistant
    mem_limit: 8g
    cpu_shares: 768
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: curl -f http://localhost:8123/ || exit 1
    restart: on-failure:5
    network_mode: host
    volumes:
      - /volume1/docker/homeassistant:/config:rw
    environment:
      TZ: ${TZ}

Immich

Immich is an open-source photo management application that provides a comparable experience to Google Photos, one of my favorite apps by Google.

Here's the dockerfile:

services:
  immich-redis:
    image: redis
    container_name: Immich-REDIS
    hostname: immich-redis
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: ['CMD-SHELL', 'redis-cli ping || exit 1']
    user: ${PUID}:${PGID}
    environment:
      - TZ=${TZ}
    volumes:
      - /volume1/docker/immich/redis:/data:rw
      - /volume1/Photos/:/photos:rw
    restart: on-failure:5

  immich-db:
    image: ghcr.io/immich-app/postgres:16-vectorchord0.3.0-pgvectors0.2.0
    container_name: Immich-DB
    hostname: immich-db
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: ['CMD', 'pg_isready', '-q', '-d', 'immich', '-U', 'immichuser']
      interval: 10s
      timeout: 5s
      retries: 5
    volumes:
      - /volume1/docker/immich/db:/var/lib/postgresql/data:rw
      - /volume1/Photos/:/photos:rw
    environment:
      - TZ=${TZ}
      - POSTGRES_DB=${IMMICH_DB_NAME}
      - POSTGRES_USER=${IMMICH_DB_USER}
      - POSTGRES_PASSWORD=${IMMICH_DB_PASSWORD}
      - DB_STORAGE_TYPE=${IMMICH_DB_STORAGE_TYPE}
    restart: on-failure:5

  immich-server:
    image: ghcr.io/immich-app/immich-server:release
    container_name: Immich-SERVER
    hostname: immich-server
    user: ${PUID}:${PGID}
    security_opt:
      - no-new-privileges:true
    env_file:
      - stack.env
    ports:
      - 8212:2283
    volumes:
      - /volume1/docker/immich/upload:/usr/src/app/upload:rw
      - /volume1/Photos/:/photos:rw
    restart: on-failure:5
    depends_on:
      immich-redis:
        condition: service_healthy
      immich-db:
        condition: service_started

  immich-machine-learning:
    image: ghcr.io/immich-app/immich-machine-learning:release
    container_name: Immich-LEARNING
    hostname: immich-machine-learning
    user: ${PUID}:${PGID}
    security_opt:
      - no-new-privileges:true
    env_file:
      - stack.env
    volumes:
      - /volume1/docker/immich/upload:/usr/src/app/upload:rw
      - /volume1/docker/immich/cache:/cache:rw
      - /volume1/docker/immich/matplotlib:/matplotlib:rw
      - /volume1/Photos/:/photos:rw
    environment:
      - MPLCONFIGDIR=/matplotlib
    restart: on-failure:5
    depends_on:
      immich-db:
        condition: service_started

Paperless-NGX

Paperless-NGX is rad if you are an organization nerd, like me. This is document organization cranked up to 11. You can organize your files in all kinds of ways, programmatically, with tags, types, correspondents, and many other factors.

Here's how I set it up:

services:
  broker:
    image: redis
    container_name: Paperless-NGX-REDIS
    restart: always
    volumes:
      - /volume1/docker/paperlessngx/redis:/data

  db:
    image: postgres:16
    container_name: Paperless-NGX-DB
    restart: always
    volumes:
      - /volume1/docker/paperlessngx/db:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: ${PAPERLESS_DB_NAME}
      POSTGRES_USER: ${PAPERLESS_DB_USER}
      POSTGRES_PASSWORD: ${PAPERLESS_DB_PASS}

  webserver:
    image: ghcr.io/paperless-ngx/paperless-ngx:latest
    container_name: Paperless-NGX
    restart: always
    depends_on:
      - db
      - broker
    ports:
      - 8777:8000
    volumes:
      - /volume1/docker/paperlessngx/data:/usr/src/paperless/data
      - /volume1/docker/paperlessngx/media:/usr/src/paperless/media
      - /volume1/docker/paperlessngx/export:/usr/src/paperless/export
      - /volume1/docker/paperlessngx/consume:/usr/src/paperless/consume
    environment:
      PAPERLESS_REDIS: redis://broker:6379
      PAPERLESS_DBHOST: db
      USERMAP_UID: ${PUID}
      USERMAP_GID: ${PGID}
      PAPERLESS_TIME_ZONE: ${TZ}
      PAPERLESS_URL: ${PAPERLESS_URL}
      PAPERLESS_CSRF_TRUSTED_ORIGINS: ${PAPERLESS_URL}
      PAPERLESS_ADMIN_USER: ${PAPERLESS_ADMIN_USER}
      PAPERLESS_ADMIN_PASSWORD: ${PAPERLESS_ADMIN_PASS}
      PAPERLESS_OCR_LANGUAGE: ${PAPERLESS_OCR_LANGUAGE}

Pi-hole

Pi-hole is a whole-network advertisement blocker. This thing works as a network DNS server with a hefty blocklist for advertisements. I've found something like two-thirds of DNS requests turn out to be ad requests, so this can save you some bandwidth by blocking annoying shit.

Here's how to set it up:

services:
  pihole:
    image: pihole/pihole
    container_name: Pi-Hole
    network_mode: host
    security_opt:
      - no-new-privileges:false
    restart: on-failure:5
    volumes:
      - /volume1/docker/pihole/dnsmasq.d:/etc/dnsmasq.d:rw
      - /volume1/docker/pihole/pihole:/etc/pihole:rw
    environment:
      FTLCONF_webserver_api_password: ${PIHOLE_PASS}
      FTLCONF_webserver_port: 8080
      FTLCONF_dns_listeningMode: all
      TZ: ${TZ}
      DNSMASQ_USER: pihole #or root NOT recommended to use root.
      PIHOLE_UID: ${PUID}
      PIHOLE_GID: ${PGID}
    cap_add:
      - SYS_TIME
      - SYS_NICE

Plausible

I've been using the cloud version of Plausible for website analytics for a while, however Plausible also provides a community edition that is self-hostable.

services:
  db:
    image: postgres:17-alpine
    container_name: Plausible-DB
    hostname: plausible_db
    security_opt:
      - no-new-privileges:true
    volumes:
      - /volume1/docker/plausible/db:/var/lib/postgresql/data:rw
    environment:
      - POSTGRES_DB=plausible_db
      - POSTGRES_PASSWORD=postgres
    restart: on-failure:5

  events-db:
    image: clickhouse/clickhouse-server:24.12-alpine
    ulimits:
      nofile:
        soft: 262144
        hard: 262144
    container_name: Plausible-EVENTS-DB
    hostname: plausible_events_db
    security_opt:
      - no-new-privileges:true
    user: ${PUID}:${PGID}
    environment:
      CLICKHOUSE_SKIP_USER_SETUP: 1
    volumes:
      - /volume1/docker/plausible/data:/var/lib/clickhouse:rw
      - /volume1/docker/plausible/logs:/var/log/clickhouse-server:rw
    restart: on-failure:5

  plausible:
    image: ghcr.io/plausible/community-edition:latest
    command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh run"
    container_name: Plausible
    hostname: plausible
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: wget --no-verbose --tries=1 --spider http://localhost:8000/ || exit 1
    ports:
      - 9850:8000
    environment:
      DISABLE_REGISTRATION: false # Type in true Instead of false to Disable Registration After Your Initial Registration.
      BASE_URL: ${PLAUSIBLE_BASE_URL}
      SECRET_KEY_BASE: ${PLAUSIBLE_SECRET_KEY_BASE}
      TOTP_VAULT_KEY: ${PLAUSIBLE_TOTP_VAULT_KEY}
      # MAILER_EMAIL: site@example.com
      SMTP_HOST_ADDR: ${SMTP_HOST}
      SMTP_HOST_PORT: ${SMTP_PORT}
      SMTP_USER_NAME: ${SMTP_USER_ADDRESS}
      SMTP_USER_PWD: ${SMTP_PASSWORD}
      MAILER_ADAPTER: Bamboo.Mua
    restart: on-failure:5
    depends_on:
      - db
      - events-db

Penpot

Penpot is an open-source, self-hostable alternative to Figma. As I'm using it, I'm noticing Penpot seems to be more in-line with how CSS works than it's major competitor. For example, Penpot has a grid system that matches grid's use in CSS.

I followed the guide provided by Penpot and got it working with this Dockerfile:

x-flags: &penpot-flags
  PENPOT_FLAGS: disable-email-verification enable-smtp enable-prepl-server disable-secure-session-cookies

x-uri: &penpot-public-uri
  PENPOT_PUBLIC_URI: http://localhost:9001

x-body-size: &penpot-http-body-size
  PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 31457280
  PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE: 367001600

networks:
  penpot:

volumes:
  penpot_postgres_v15:
  penpot_assets:

services:
  penpot-frontend:
    image: 'penpotapp/frontend:${PENPOT_VERSION:-latest}'
    restart: always
    ports:
      - 9001:8080

    volumes:
      - penpot_assets:/opt/data/assets

    depends_on:
      - penpot-backend
      - penpot-exporter

    networks:
      - penpot

    environment:
      <<: [*penpot-flags, *penpot-http-body-size]

  penpot-backend:
    image: 'penpotapp/backend:${PENPOT_VERSION:-latest}'
    restart: always

    volumes:
      - penpot_assets:/opt/data/assets

    depends_on:
      penpot-postgres:
        condition: service_healthy
      penpot-redis:
        condition: service_healthy

    networks:
      - penpot

    environment:
      <<: [*penpot-flags, *penpot-public-uri, *penpot-http-body-size]

      PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot
      PENPOT_DATABASE_USERNAME: ${PENPOT_DB_USER}
      PENPOT_DATABASE_PASSWORD: ${PENPOT_DB_PASS}
      PENPOT_REDIS_URI: redis://penpot-redis/0
      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
      PENPOT_TELEMETRY_ENABLED: true
      PENPOT_TELEMETRY_REFERER: compose
      PENPOT_SMTP_DEFAULT_FROM: ${PENPOT_SMTP_FROM}
      PENPOT_SMTP_DEFAULT_REPLY_TO: ${PENPOT_SMTP_REPLY_TO}
      PENPOT_SMTP_HOST: ${PENPOT_SMTP_HOST:-penpot-mailcatch}
      PENPOT_SMTP_PORT: ${PENPOT_SMTP_PORT:-1025}
      PENPOT_SMTP_USERNAME:
      PENPOT_SMTP_PASSWORD:
      PENPOT_SMTP_TLS: false
      PENPOT_SMTP_SSL: false

  penpot-exporter:
    image: 'penpotapp/exporter:${PENPOT_VERSION:-latest}'
    restart: always

    depends_on:
      penpot-redis:
        condition: service_healthy

    networks:
      - penpot

    environment:
      PENPOT_PUBLIC_URI: http://penpot-frontend:8080
      PENPOT_REDIS_URI: redis://penpot-redis/0

  penpot-postgres:
    image: 'postgres:15'
    restart: always
    stop_signal: SIGINT

    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -U penpot']
      interval: 2s
      timeout: 10s
      retries: 5
      start_period: 2s

    volumes:
      - penpot_postgres_v15:/var/lib/postgresql/data

    networks:
      - penpot

    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=${PENPOT_DB_NAME}
      - POSTGRES_USER=${PENPOT_DB_USER}
      - POSTGRES_PASSWORD=${PENPOT_DB_PASS}

  penpot-redis:
    image: redis:7.2
    restart: always

    healthcheck:
      test: ['CMD-SHELL', 'redis-cli ping | grep PONG']
      interval: 1s
      timeout: 3s
      retries: 5
      start_period: 3s

    networks:
      - penpot

  ## A mailcatch service, used as temporal SMTP server. You can access via HTTP to the
  ## port 1080 for read all emails the penpot platform has sent. Should be only used as a
  ## temporal solution while no real SMTP provider is configured.

  penpot-mailcatch:
    image: sj26/mailcatcher:latest
    restart: always
    expose:
      - '1025'
    ports:
      - '1080:1080'
    networks:
      - penpot

SearXNG

For safe, tracker-free searching, I've installed SearXNG - a meta-search engine application.

services:
  searxng:
    image: searxng/searxng
    container_name: SearXNG
    healthcheck:
      test: ['CMD-SHELL', 'nc -z 127.0.0.1 8080 || exit 1']
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    mem_limit: 8g
    cpu_shares: 2048
    security_opt:
      - no-new-privileges:true
    volumes:
      - /volume1/docker/searxng:/etc/searxng:rw
    restart: on-failure:5
    ports:
      - 5147:8080

SolidInvoice

Sometimes I do work for clients and need to send an invoice, so instead of paying for an infrequently used service, I have installed SolidInvoice.

services:
  db:
    image: postgres:17
    container_name: Solidinvoice-DB
    hostname: solidinvoice-db
    mem_limit: 1g
    cpu_shares: 1024
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: ['CMD', 'pg_isready', '-q', '-d', 'solidinvoice', '-U', 'solidinvoiceuser']
      timeout: 45s
      interval: 10s
      retries: 10
    volumes:
      - /volume1/docker/solidinvoice/db:/var/lib/postgresql/data:rw
    environment:
      POSTGRES_DB: ${SOLIDINVOICE_DB}
      POSTGRES_USER: ${SOLIDINVOICE_DB_USER}
      POSTGRES_PASSWORD: ${SOLIDINVOICE_DB_PASS}
    restart: on-failure:5

  solidinvoice:
    image: solidinvoice/solidinvoice:2.3.5
    container_name: Solidinvoice
    healthcheck:
      test: ['CMD-SHELL', 'nc -z 127.0.0.1 8765 || exit 1']
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    volumes:
      - /volume1/docker/solidinvoice/data:/etc/solidinvoice:rw
    depends_on:
      - db
    ports:
      - 5484:8765
    restart: on-failure:5

Stirling-PDF

Another utility application, Stirling-PDF enables you to do whatever you need with PDF files.

services:
  stirling-pdf:
    container_name: Stirling-PDF
    image: docker.stirlingpdf.com/stirlingtools/stirling-pdf
    mem_limit: 4g
    cpu_shares: 1024
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: timeout 10s bash -c ':> /dev/tcp/127.0.0.1/8080' || exit 1
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    ports:
      - 7890:8080
    volumes:
      - /volume1/docker/stirling/data:/usr/share/tessdata:rw # Required for extra OCR languages
      - /volume1/docker/stirling/config:/configs:rw
      - /volume1/docker/stirling/logs:/logs:rw
    environment:
      PUID: ${PUID}
      PGID: ${PGID}
      DOCKER_ENABLE_SECURITY: true # or false
      SECURITY_ENABLELOGIN: true #or false
      SECURITY_INITIALLOGIN_USERNAME: ${STIRLING_USER}
      SECURITY_INITIALLOGIN_PASSWORD: ${STIRLING_PASS}
      INSTALL_BOOK_AND_ADVANCED_HTML_OPS: false #or true
      SECURITY_CSRFDISABLED: true #or false
      SYSTEM_DEFAULTLOCALE: en_US # or fr_FR or de_DE
      UI_APPNAME: ${STIRLING_APP_NAME}
      UI_HOMEDESCRIPTION: ${STIRLING_APP_DESCRIPTION}
      UI_APPNAMENAVBAR: ${STIRLING_APP_NAME}
      SYSTEM_MAXFILESIZE: ${STIRLING_MAX_FILESIZE} # Set the maximum file size in MB
      METRICS_ENABLED: true
      SYSTEM_GOOGLEVISIBILITY: false # or true
    restart: on-failure:5

Vaultwarden

Vaultwarden is the open-source alternative of Bitwarden, a fantastic password manager. I'm comparing this against Dashlane and it seems to match my needs.

Here's the Dockerfile:

services:
  db:
    image: postgres:17
    container_name: Vaultwarden-DB
    hostname: vaultwarden-db
    security_opt:
      - no-new-privileges:true
    healthcheck:
      test: ['CMD', 'pg_isready', '-q', '-d', 'vaultwarden', '-U', 'vaultwardenuser']
      timeout: 45s
      interval: 10s
      retries: 10
    volumes:
      - /volume1/docker/vaultwarden/db:/var/lib/postgresql/data:rw
    environment:
      POSTGRES_DB: ${VAULTWARDEN_DB_NAME}
      POSTGRES_USER: ${VAULTWARDEN_DB_USER}
      POSTGRES_PASSWORD: ${VAULTWARDEN_DB_PASS}
    restart: on-failure:5

  vaultwarden:
    image: vaultwarden/server:latest
    container_name: Vaultwarden
    hostname: vaultwarden
    security_opt:
      - no-new-privileges:true
    user: ${PUID}:${PGID}
    ports:
      - 4080:4020
    volumes:
      - /volume1/docker/vaultwarden/data:/data:rw
    environment:
      ROCKET_PORT: 4020
      DATABASE_URL: postgresql://vaultwardenuser:vaultwardenpass@vaultwarden-db:5432/vaultwarden
      ADMIN_TOKEN: ${VAULTWARDEN_ADMIN_TOKEN}
      DISABLE_ADMIN_TOKEN: false
      DOMAIN: ${VAULTWARDEN_URL}
      SMTP_HOST: ${SMTP_HOST}
      SMTP_FROM: ${SMTP_USER_ADDRESS}
      SMTP_PORT: ${SMTP_PORT}
      SMTP_SECURITY: starttls
      SMTP_USERNAME: ${SMTP_USER_ADDRESS}
      SMTP_PASSWORD: ${SMTP_PASS}
    restart: on-failure:5
    depends_on:
      db:
        condition: service_started

Synology Apps

The DiskStation DS423+ comes preloaded with a few applications from Synology that work as replacements for cloud application suites like Google Apps.

Synology Drive - This is like Google Drive, complete with web-based office applications.

Reasoning

As the title implies, I want to be more in control of my personal data by relying less on big-tech companies to manage things for me. This is especially true as big-tech continues to shoehorn artificial intelligence and LLMs into all their products and services.

Thankfully, the open-source software community provides folks the ability to take things into their own hands!

Weekly Roundup #39

Sat, 15 Feb 2025 12:00:00 GMT

Interesting Links

?nodefine — a pattern to skip Custom Element definitions

published by Zach Leatherman on 2/14/2025

Zach shares a super clever pattern enables custom element consumers to opt out of automatic definition. Also, <nim-ble> rhymes with Trimble.
AI is Stifling Tech Adoption

published by Vale on 2/13/2025

Vale's essay clicks with me; React seems to be the default option when it comes to code generation, leaving out potentially better, more modern, alternatives.
Tech continues to be political

published by Miriam Suzanne on 2/12/2025

I don't need an agent, I want to maintain my own agency.

Appreciating this article from Mia. Thank you for being here and doing what you do.
CSS Custom Functions are coming … and they are going to be a game changer!

published by Bramus on 2/9/2025

Chrome is experimenting with CSS custom functions, which is quite exciting. Bramus gives a sneak peek of the syntax, it has a return value!
What I learned from migrating a Vue project from Vuex to Pinia

written by Michelle Barker, published on Piccalilli on 2/6/2025

Michelle provides key considerations for planning a large upgrades to your codebase, and digs into migrating from Vuex to Pinia.
Stanislav Petrov

published by Eric W. Bailey on 2/4/2025

I've heard the cliffnotes of this story previously, but a very interesting history lesson from Eric, given how applicable the lesson is nowadays.

From yours truly

I published a few articles over at CSS-Tricks, check 'em out if you like weird topics such as: handwriting SVGs, nesting cascade layers, and build configurations.

Building with AI: Work Hackathon

Sun, 02 Feb 2025 12:00:00 GMT

As a team-building exercise, this was a lot of fun for a group of developers and engineers. I've never participated in a hackathon before, so I was excited to try something new.

The scope of the hackathon was to experiment with AI: use AI powered tools, implement AI into our app, or create new products or features using AI.

We're alotted 2 days of work (lunch provided!) to answer a few questions:

What did you discover?
What's the value to the business?
What next steps would you recommend?

Selecting an AI Model

There's several different AI models to choose from nowadays: GPT, Claude, Gemini - they all do pretty much the same things.

I'm by no means about to claim I understand the technical differences of the models, but the gist of all of them is: you tell AI what you want, and hope that it returns some semblence of the thing you're looking for.

With that in mind, Google's Gemini has a very straightforward node package and API, plus I was born in June, so I chose that one.

Quick note on pricing: it's all very confusing, I imagine that's deliberate. I handled everything using the free tier Gemini provides, though the main benefit of paid tiers is that data sent to Gemini is allegedly not used in training their product.

Building the project

I'm already put off from "chat" user interfaces for AI, so I wanted to do something a bit different. Also, this was a great excuse to try out the Media Capture and Streams API.

I scaffolded the application with Astro as my main framework, opting for Vue to handle the reactive client-side JavaScript bits.

Astro is great for this kind of stuff: I can quickly build endpoints using Actions, wrap the JavaScript up as an Island, as well as server side render things on Netlify.

Vue is my favorite of the popular reactive JavaScript libraries and frameworks, as it's a pleasure to work with, even with Typescript. Also, it's the primary framework we use in our product applications.

The idea is to have the AI extract information from photos, rather than text prompts. Basically, a simplified version of Google Lens. You can find the full project code in the project's GitHub repo.

Creating a Web Cam

The core functionality of my idea revolved around taking photos, so I decided to get that working first. I hadn't really tried doing any kind of media capture before, but it's weirdly fun to work with hardware and code. Like an "A-ha!" moment when the camera turns on.

Resources for building the webcam:

Followed along with Chris Nwamba's Digital Ocean community tutorial, How To Access Front and Rear cameras with JavaScript's getUserMedia(), which got me quite far building things out.
I also checked out Charlie Gerard's project from the Web Dev Challenge episode she had featured on, for some hints on how to turn the data into blobs and how to pass that along to Gemini.
Of course, MDN also has excellent information on the Media Capture and Streams API.

I originally built the web camera component as a Vue single file component for the hackathon project, but later rewrote it as a web component for future use as a web component. Check out the repo for that on GitHub.

Adding AI

Google has an easy to set up node package, installable with:

pnpm install @google/generative-ai

You need an API key, which can be created on the Google AI Studio site. I stored my key in an .env file and named the environment variable GEMINI_API_KEY.

You can quickly get a response from Gemini like so:

import { GoogleGenerativeAI } from '@google/generative-ai';

const key = import.meta.env.GEMINI_API_KEY; // vite
const genAI = new GoogleGenerativeAI(key);
const model = genAI.getGenerativeModel({
  model: 'gemini-1.5-flash',
});

const prompt = 'This is a test, are you there?';

const { reponse } = await model.generateContent(prompt);

console.log({ response });

That will return a very conversational-like response, basically the same as what you get when you ask Gemini a question in the official application. We don't really want that though, as the response will be unpredictable.

Instead, we can tell Gemini exactly the response format we need by passing along response schema.

// Import SchemaType
import { GoogleGenerativeAI, SchemaType } from '@google/generative-ai';

const key = import.meta.env.GEMINI_API_KEY; // vite
const genAI = new GoogleGenerativeAI(key);

// Create a schema object for desired response:
const myResponseSchema = {
  description: 'Part Identification',
  type: SchemaType.OBJECT,
  properties: {
    name: {
      type: SchemaType.STRING,
      description: 'Provide the name of the part in the included photo',
      nullable: false,
    },
    description: {
      type: SchemaType.STRING,
      description: 'Provide a short description of the part in the included photo',
      nullable: false,
    },
    dimensions: {
      type: SchemaType.OBJECT,
      properties: {
        height: {
          type: SchemaType.STRING,
          description: "Provide the part's height in inches",
          nullable: false,
        },
        width: {
          type: SchemaType.STRING,
          description: "Provide the part's width in inches",
          nullable: false,
        },
        depth: {
          type: SchemaType.STRING,
          description: "Provide the part's depth in inches",
        },
      },
    },
    color: {
      type: SchemaType.STRING,
      description: "Provide the part's color in hexadecimal",
    },
    materials: {
      type: SchemaType.ARRAY,
      description: 'Provide a list of part materials',
      items: {
        type: SchemaType.STRING,
      },
    },
  },
  required: ['name', 'description', 'dimensions', 'color', 'materials'],
};

// Include the schema in the model:
const model = genAI.getGenerativeModel({
  model: 'gemini-1.5-flash',
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: myResponseSchema,
  },
});

const { reponse } = await model.generateContent(prompt);

console.log({ response });

We can also send our prompt as an array to Gemini, each item in the array a different part of the prompt. Here I'm sending some prompt instructions as well as the image created by the web camera component:

//... image comes from web camera

const promptInstructions = `
    Examine the part in this photo. 
    
    Provide a name and description of the part. Also provide the dimensions: height, width, and depth in inches. 
    
    Follow the provided JSON schema.
  `;

// passing promptInstructions and image to Gemini:
const { response } = await model.generateContent([promptInstructions, image]);
console.log(response);

If I take a photo of an Xbox controller on my desk, Gemini will return a response such as:

{
  "color": "#FFFFFF",
  "description": "A white wireless controller with black joysticks and buttons. The controller has a directional pad, four face buttons (A, B, X, Y) on the right side, two joysticks, and a share button in the middle. The controller has a glossy finish and a textured grip on the back. It is designed for use with the Xbox Series X and Series S consoles.",
  "dimensions": {
    "depth": "2.5",
    "height": "4",
    "width": "6"
  },
  "materials": ["plastic"],
  "name": "Xbox Wireless Controller"
}

Not gonna lie, this part is pretty cool. It felt very much like working with a backend engineer who can quickly provide whatever you need, in whatever format you need. However, the data in the results still varies widely.

Working with Astro Actions

Once I had worked out both the web cam and the Gemini pieces, I was able to wire up the calls to Gemini as Astro actions.

Actions are basically endpoints we can use to trigger server-side functions. This is how we can snap a photo, submit the photo to Gemini, then dynamically receive a response.

To create actions, add an actions/ folder to the Astro project, and include an index.ts file (index.js if not using Typescript).

Inside the index.ts file, we can define a server to handle our actions. As an example, we can create an action to return a greeting after submitting a form:

//actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  // define actions as properties of server
  getGreeting: defineAction({
    accepts: 'form',
    input: z.object({
      name: z.string(),
    }),
    handler: async input => {
      return `Hello, ${input.name}!`;
    },
  }),
};

One unexpected bit of awesomeness was that Actions work in any type of component, not just Astro components. This allowed me to import actions into Vue components, like so:

<template>
  <!-- Vue Template -->
</template>
<script setup lang="ts">
import { actions } from 'astro:actions';

const handleAction = payload => {
  try {
    const { data, error } = await actions.getGreeting(payload);

    if (error) throw new Error(error);

    if (data) {
      // do stuff!
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

Actions can also be organized into independent files, then imported into the actions/index.ts file. I seperated Actions for Gemini into its own, separate file.

Actions give us a simple way to ideate a bit and extend our application's features easily.

Extending Featureset

Along with detecting and identifying objects, I had planned for a few more features: document scanning, 2D diagram drawings, and even generating 3D models, all based on objects found in the captured photo image.

I added two more Astro actions and different response schemas for each. Adding the document scanner went smoothly, no troubles there.

AI can definitely transcribe text, as I tested it with handwritten messages and it nailed it every time. The part I raised an eyebrow at was when I scanned a paragraph of a book, and it was able to return the entire page the paragraph was in. I don't know how it would have known that, without already knowing the book.

The main problem was when I attempted to have the Gemini return a generated image. The very interesting part is Gemini never even told me it could not handle this through the JavaScript API, instead returned fake links to Imgur pages.

After doing a bit of research, I realized I'd have to configure some sort of Python based backend service, and I didn't really feel like doing that. I opted for the next best thing: asking Gemini to create ASCII art style 2D diagrams of the object found in the photo.

This proved hilarious and nightmare-inducing results. Mainly in the form of this guy:

     _.--"""--._
    .'          `.
   /   O      O   \
  |    \  ^  /    |
  \     `----'     /
   `. _______ .'
     //_____\\
    (( ____ ))
     `-----'

I don't want to imagine AI as having feelings or being human-like in any way, however, I can't help but feel that Gemini was frustrated with my request, as this face was all it would return after a while, with occasional slight variations: sometimes taller, sometimes offscreen, sometimes zoomed in, sometimes happy, sometimes mad.

I also didn't want to imagine what might happen if that face had a third dimension, and well, since the API doesn't support image generation yet - I didn't even attempt to have Gemini generate anything 3D.

My Findings

I have to admit something. I'm not a fan of AI. This might not be news if you follow my blog.

With obvious concerns over energy and environmental damage, as well as widespread copyright abuse and infringement - all of which to give us something we most likely shouldn't trust (given a tendency of inaccurate results, lying, or straight up making things up).

Setting aside all that for now, I understand it's the next big thing™, and many businesses already rushed in headfirst or are likely looking into how to use it in some capacity. I think the hackathon was a decent approach: test the waters and see what we might find.

Seeing the varying levels of success I, myself, had - as well as the other participants in the hackathon (very awesome submissions!) - I still can't say I can trust results provided by artificial intelligence.

Larger AI companies tend to make us believe that these tools might be useful for all the things, however, if you narrow the scope of data these models are training on, you may have much higher success rates with recieving useful results.

This was pointed out by one of my co-workers, who explained how using open source models, such as Llama, may be more cost-effective on our own infrastructure, as well as having a smaller carbon footprint.

Interacting with AI was fine, even fun at times, and can be helpful. You can iterate on ideas quickly, which is nice, but mixed results leave me feeling less-than-confident about trusting what AI tells me. I feel it may have some value, however, I'm not sure that value outweighs the cost our environment is paying.

Personally, I try to be open-minded about many things and enjoy challenging my own beliefs, making sure I've given things a fair shake before fully commiting the belief to the repository in my head. I went into the hackathon with some pre-conceived notions about using artificial intelligence, and for the most part, my views remain unchanged.

If AI companies were able solve some of the larger problems plaguing artificial intelligence, it may be worth a re-visit. The Chinese-backed company behind Deepseek has claimed to create faster, smarter models with a fraction of the overhead compared to OpenAI's GPT. These types of advancements are more exciting to me than the continuous efforts to make faster, more all-encompassing models.

As for hackathons: how do I sign up for the Web Dev Challenge?

Weekly Roundup #38

Sun, 02 Feb 2025 12:00:00 GMT

Interesting Links

Building with AI: Work Hackathon

published by Ryan Trimble on 2/2/2025

I participated in my work's hackathon exploring AI. I had some fun with it, however I'm still not ready to trust AI. Check out how I built my project with Astro, Vue, and Google Gemini.
CSS Nesting: use with caution

written by Andy Bell, published on Piccalilli on 1/30/2025

Andy makes the case for using CSS native nesting with caution; I mostly agree that Sass has done a number on us, though I'd argue for "use responsibly" instead.
The Mistakes of CSS

written by Juan Diego Rodriguez, published on CSS-Tricks on 1/27/2025

Juan thoughtfully comments on the "mistakes" in CSS and the technical debt on fixing these mistakes. If only the CSS Working Group had a time machine!
Container Queries Unleashed

published by Josh W. Comeau on 1/27/2025

Many of Josh's articles include top-notch interactive examples, and this is no different. If you are having trouble understanding container queries, look no further!
Pull Request #3078 of the US Web Design System

Take a look at how an executive order deleted sections focusing on diversity, equity, and inclusivity of the United State's Digital Web Service's design system site.
End of Term Web Archive

Many folks have noticed government websites containing lots of vital information are being purged. I'm glad there are folks out there preserving things, such as Archive.org. Apparently, they run an "end of term" archive as a United States President is ending their term in office. Pretty rad!

Weekly Roundup #37

Sat, 25 Jan 2025 12:00:00 GMT

Interesting Links

A selfish personal argument for releasing code as Open Source

published by Simon Willison on 1/24/2025

During a recent interview, Simon explained how open sourcing code helps make sure he never loses access to code, even if when moving to a new job.
How to build a copy code snippet button and why it matters

published by Salma Alam-Naylor on 1/24/2025

Salma's been coding hands-free and finding code snippets generally difficult to copy and paste without using your hands in some capacity, and provides directions on how to add it to your site.
Accessibility is woke now?

published by Chris Ferdinandi on 1/24/2025

Chris shares concerns over how the United States seems to be shutting down many diversity, equality, and inclusivity programs and what that means for the accessible web. Personally, accessibility will remain a primary goal for me going forward; I consider it part of the job.
Styling a meter element with CSS and SVG

published by Mike Aparicio on 1/23/2025

Mike explains how to transform the <meter> HTML element into a star rating, excellent for rating movies.
CSS attr() gets an upgrade

published by Bramus on 1/20/2025

This is a ridiculously exciting development, giving us a new way to interface our CSS with HTML. Bramus gives a great rundown as per usual, also be sure check out all the exciting features released in the Chrome 133 beta.
6 CSS Snippets Every Front-End Developer Should Know In 2025

published by Adam Argyle on 1/19/2025

Adam wrote up this list of some great features he thinks CSS developers should know going into 2025. I still want CSS developers to know grid.
Music is replacing my self-talk

published by Bob Monsour on 1/15/2025

Bob bestows some excellent advice for us folks with busy minds. Also, his post about playing Poohsticks is adorable.
What's new with dialog

published by Ollie Williams on 1/15/2025

Ollie dives into <dialog> elements in Chrome Canary, looks like there might be HTML-only controls coming soon.
Justified Text: Better Than Expected?

published by Tyler Sticka on 1/15/2025

Tyler examines hyphens, text-wrap and hyphenate-limit-chars to see if we are closer to having decent justified text on the web, and it turns out: maybe!
How to Wait for the sibling-count() and sibling-index() Functions

written by Juan Diego Rodriguez, published on CSS-Tricks on 1/13/2025

My friend Juan over at CSS-Tricks is onto some next-level stuff, explaining newer CSS functions sibling-count() and sibling-index().

Weekly Roundup #36

Sat, 11 Jan 2025 12:00:00 GMT

I'm still settling into my new role, and having a great time! The folks on my team are super nice and helpful, I see a lot of great opportunities for the frontend.

It's an interesting thing; jumping into a new software development team and comparing notes on processes. There are things you see and are like, "Oh, so that's how that should work" or maybe you already tackled a particular problem with your former team, so you have some experience on how to improve something (currently introducing my friend, Vite, to the team).

I'm quite excited, which makes it easy to fall into "Do All the Things!" mode, so I have to keep reminding myself there'll be plenty of time to get things right.

Interesting Links

Stimulation Clicker

created by Neal Agarwal

Neal makes some of the most ridiculous things ever and I love it, definitely check this out for yourself.
The Importance of Investing in Soft Skills in the Age of AI

written by Andy Bell, published on CSS-Tricks on 1/10/2025

Andy makes the case for developing soft skills to stand out against the rising risk of AI competition.
Balancing Text In CSS

published by Ahmad Shadeed on 1/4/2025

Ahmad provides a high-quality explainer on one of the prettier new CSS properties: text-balance.
FTC Catches up to #accessiBe

published by Adrian Roselli on 1/4/2025

Anyone who knows about accessibility overlays probably isn't shocked right now, but also probably feeling a little vindication.
“Simple” Table of Contents Highlighter

published by Christopher Kirk-Nielson on 1/3/2025

Chris breaks down different approaches to a common user interface pattern, each time improving on the concept. I've built one of these before and stopped around the "basic" version.
Media Recap 2024

published by Anh on 1/2/2025

Maybe the most gorgeous Media Recap ever? Anh delivers art and some solid recommendations.
Great .NET Documentation with Astro, Starlight, and MarkdownSnippets

published by Khalid Abuhakmah on 12/31/2024

Khalid always seems to know what problems I am going to run into someday, and has a blog post at the ready.

New Looks for 2025

While touch-and-go for a moment, Lynn Fisher delivered her annual portfolio redesign, and of course it rocks.
Henry Desroches dropped a gothic, bombshell of a redesign as well (don't worry, Henry knows about the date in the footer).

Looking to Learn

If your New Year's resolution involves learning to code, I've got a few links for you to check out:

If you're looking for a great way to learn the basics, my pal Geoff Graham has you covered.
Kevin Powell recently released two courses: HTML for Beginners over on his YouTube channel, as well as Professional CSS on Frontend Masters.
To round out your CSS skills, Andy Bell's Complete CSS is might be your speed.

Weekly Roundup #35

Sat, 28 Dec 2024 12:00:00 GMT

Last Roundup of the year!

I'm still surprised I've managed to keep this routine going, 35 weeks later. I think I might have skipped one week, but otherwise fairly consistent.

Anyway, let's wrap up the year with some great links!

Interesting Links

Yearly Roundup #1

published by Ryan Trimble on 12/29/2024

A lot of things happened at me in 2024, so I figured some personal reflection on the year might be nice.
Jane Ori found my IP Address with CSS

Codepen by Jane Ori on 12/28/2024

Jane continually proves that CSS has a lot more to offer than folks give it credit for, by using it to make an API request and finding the user's IP address. Read more on the process in the repo!
What determines the accessibile name of an element?

published by Kilian Valkhof on 12/26/2024

Kilian provides a lot of good information in this article, explaining what an accessible name is and a few gotchas to look out for. Read in Dutch if you are brave...

...or Dutch.
The WCAG for Content Writers

published by Homer Gaines on 3/16/2024

Accessibility is a team effort, and not just something that only developers need to pay attention to. Homer provides success criteria helpful to content writers.
Pride Versioning

idea by Niki Tonsky

This is basically just semantic versioning, but you feel good about it.

12daysofweb.dev

12 Days of Web series concluded this week, here are the last few days - be sure to check out all the articles!

Day 10: BroadcastChannel API

Guest author, Stephanie Eckles

Did you know you can broadcast data between open tabs if they are from the same origin? Steph explains with an awesome demo: open the page twice in different tabs to try it for yourself.
Day 11: How to Use Baseline Data

Guest author, Rachel Andrew

As a lead of the Baseline initiative, Rachel is the best person to explain what it is and how to use it. We've been using Baseline over at CSS-Tricks for a few weeks now!
Day 12: CSS margin-trim and line height units

Guest author, Jen Simmons

Jen explains a couple of new CSS properties that are sure to make designers happy. I'm quite interested in margin-trim and hope to see it in more browsers soon!

Personal thank you

Thank you to all the folks featured throughout the past 35 issues. Thank you for making awesome stuff to talk about, please keep it up!

Thank you to all the folks who actually read these - I don't do this for an audience, but I know there are a few of you out there and I appreciate you.

Yearly Roundup #1

Sat, 28 Dec 2024 12:00:00 GMT

With only a few days left of 2024, I thought it might be nice to do a bit of a retrospective on the year.

My 2024

Sold our house

Early this year, we sold our house and moved into a new apartment building. I really liked the old place, but it was causing a lot of stress from upkeep and maintenance, not to mention being located in a floodzone as it was right next to a creek.

Weekly Roundups

In April, I posted the first Weekly Roundup to my blog. I wanted to make posting to my site a routine, as well as practice writing and this turned out to be a great way to do that. I do this for myself, really - not you.

Bit of a mental breakdown

My job changed dramatically, and with it my mental state. It's a story that affects many, a larger company came in and took over. Unfortunately the changes were not positive for me, effectively ending many of the things I cared about, leaving me feeling stranded.

Visited Los Angeles

Took a trip out to LA for the first time ever. I really enjoyed the visit and hope to go back at some point. My wife got to meet a friend from New Zealand, and I got to find out if there really was a man behind Winkie's.

Technical Writer for CSS-Tricks

I still can't believe this one! CSS-Tricks was one of my favorite sites while learning all things web development, now I get to help others learn! I'm looking forward to what we'll be able to accomplish with the site in 2025.

Attended Frostapalooza

This was a rad musical event put on by Brad Frost and friends, and a highlight of the year. I got to hangout with my friend Mike and hear some exceptional covers of Pink Floyd, Arcade Fire, and the Yeah Yeah Yeahs.

Redesigned my website

Rebuilt my website with iterative improvements over the previous design. I called it the HD Remaster, like how video game studios re-release the same game with slight improvements.

Sister's wedding

My sister got married and I was the impromptu wedding photographer. I can't say I knew what I was doing most of the time, but I managed to get some great photos that came out quite well.

A new job!

After submitting a countless number of applications and hours of interviewing, I landed a new job at Stratus, as a Senior Frontend Engineer. The job market is incredibly difficult to navigate nowadays and I'm so glad to finally be done with my search.

On to the next one

I think 2025 will be another challenging year, but here's hoping for the best!

Weekly Roundup #34

Sat, 21 Dec 2024 12:00:00 GMT

Next week is Christmas and I am not prepared at all. Honestly, I don't think I was prepared for any holidays this year, they just kind of happened. Now that I've found a new job though, I'm hoping for a somewhat slow 2025 so I can actually enjoy time with the important folks in my life.

Speaking of the new job: I completed my first week! I'd say things are going pretty well so far, I'm already digging into the codebase and pushed my first pull-request. I see lots of great opportunities for growth and I'm itching to do my part.

Alright, now let's get into it!

Interesting Links

The Little Triangle in the Tooltip

written by Juan Diego Roderiguez, published by CSS-Tricks on 12/20/2024

Juan walks us through how to add the little triangle to tooltips in, not one, not two, but four different ways.
A powerful container query

published by Adam Argyle on 12/19/2024

Did you know you could use calc in container queries? I didn't either. Adam figured out this powerful combo while making a CSS carousel.
Every Token is a feature

published by Dave Rupert on 12/19/2024

Interesting observation from Dave on how design tokens can be thought of as features, useful to both design and engineering.
Why I'm excited about text-box-trim as a designer

written by Jason Bradberry, published by Piccalilli on 12/19/2024

Jason gives a typography lesson and explains why the new text-box-trim CSS property will help your buttons.
The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident()

published by Bramus on 12/18/2024

The CSS Working Group recently resolved to adopt a solution for constructing ident values in CSS, these are what we use to name things like container-name and view-transition-name. Bramus proposed this solution and his article explains how this will be beneficial.
Quick and Dirty Colour Palettes using color-mix()

published by Stuart Robinson on 12/9/2024

I love mixing colors with CSS and Stuart provides some awesome tips on mixing colors to build color palettes.

Cool Sites

Super Snowflake Maker
To help get in the festive spirit, Shalanah Dawson created this awesome snowflake maker.

12daysofweb.dev

The 12 Days of Web series continues this week, here are few highlights - be sure to check out all the articles!

Day 5: CSS content-visibility

Guest author, Nathan Knowler

Nathan explains the newly available content-visibility property of CSS, which can hide everything within a wrapper, including content not wrapped inside an HTML tag.
Day 7: CSS box-decoration-break

Guest author, Kilian Valkhof

Kilian shows us how to fix those weird instances where your design is busted thanks to a line wrap using the box-decoration-break property.
Day 9: CSS light-dark()

Guest author, Mayank

Mayank gives a rundown of how the CSS light-dark() function works, allowing you to automatically swap between color-schemes. Bonus points: an easy to implement toggle for your site.

Weekly Roundup #33

Sat, 14 Dec 2024 12:00:00 GMT

On Monday, I start as a Senior Frontend Engineer for STRATUS!

STRATUS creates applications for MEP (metal, electrical, and plumbing) professionals that help in design, fabrication, and installations.

Admittedly, I don't know much about the construction industry, but I didn't know much about the insurance industry when I started my previous position either.

I do know Frontend Development, though, and I'm quite excited to bring my skills to new projects!

I'll miss working with my RIMdev friends, but let's be real, I'll probably bug most of them on occasion anyway.

Ok, now Let's dig into some links!

Interesting Links

Vertical slider fitting the tallest element in pure CSS

published by Christopher Kirk-Nielsen on 12/13/2024

Christopher shares an excellent CSS tip to make equal height, scrollable elements. Timely, I'm experimenting with something that could use this technique!
An overview of JavaScript testing

published by Chris Ferdinandi on 12/10/2024

Chris kicked off a nice series of articles to help get up-to-speed on JavaScript testing. Also, Congratulations to Chris on joining Nebula.tv!
Solved By Modern CSS: Feature Image

published by Ahmad Shadeed on 12/9/2024

Ahmad walks us through how he created the feature image on his website's homepage using modern CSS techniques.
Don't Use aria-label on Static Text Elements

published by Ben Myers on 12/7/2024

Ben clears up some confusion on when to use aria-label and aria-labelledby. I'm a fan of the landmark pattern!
Explaining Design Systems to a Golfer

published by Homer Gaines on 12/7/2024

Lovely recap of how Homer relates design systems to golfing to help his father understand what he does for work.

12daysofweb.dev

I'm a big fan of Steph Eckles' yearly 12 Days of Web series which kicked off this week!

Day 1: calc-size() and interpolate size

Guest author, Kevin Powell

Kevin explains the neat new interpolate-size property and how to use calc-size() CSS function when animating with keywords.
Day 2: Animating Entry Effects

Guest author, Tyler Childs

Tyler gives an overview on @starting-style and transition-behavior: allow-descrete when animating on entry.

Weekly Roundup #32

Sat, 07 Dec 2024 12:00:00 GMT

Folks, big news: I've accepted an offer for a new position! I'll follow-up with more details soon, I'm currently enjoying a bit of R&R until starting.

Job hunting is long and discouraging. I swear, I must have submitted thousands of applications with a very small success rate.

That being said, the few companies and organizations I had the pleasure to interview with were great. I was in the final round more than a few times, but it's a tough market with a lot of skilled folks out there.

I wish I could give a list of tips for folks still looking for a job, but the only suggestion I can muster is: just keep trying.

Interesting Links

HTMHAIL

written by Léonie Watson, published on 12/7/2024

Manuel Matuzović's HTMHell Advent Calendar is back in time for the holiday season and Léonie wrote about an AI encounter that went entirely wrong.
Time for something new

published by Jaime Jones on 12/6/2024

I'm so proud of Jaime, this was an absolutely massive leap and she landed gracefully. I'm looking forward to where her journey leads next!
One of Those “Onboarding” UIs, With Anchor Positioning

published by Ryan Trimble on 12/2/2024

I didn't intend for this article to eat up my November, but I kept thinking of different ways to use CSS anchor positioning. I'm super excited for it, hope you are as well!
Starting off right: Where autofocus shines

written by Kilian Valkhof, published on 12/2/2024

Another brilliant entry in this year's HTMHell Advent Calendar, Kilian helps remind folks that autofocus is a thing and you can actually use it.
Migrating your guestbook from Astro Studio

published by Ryan Trimble on 12/2/2024

Another one from me, apologies for shameless self-promotion (this is my website). You might remember, I wrote about how to make a guestbook using Astro Studio, this is a follow up on how to migrate to a different database.

Cool Sites

The Chrome DevRel team put together the 2024 CSS Wrapped, showcasing all the neat features CSS received this year.
I came across Ambiphone on Bluesky, and it's a lovely little ambient noise generator.
John Allsopp shared a new website where folks can find all available "A Book Apart" books online, Authors Together.

Migrating your guestbook from Astro Studio

Mon, 02 Dec 2024 12:00:00 GMT

Back in March, I wrote an article about creating a guestbook with Astro DB, which is still a fairly popular article!

Astro DB is a libSQL database you can use within your Astro projects, to make development with a database super easy.

You still need to have a hosted libSQL database for production, so Astro themselves had released a service called Astro Studio. Not long after that, Astro decided to shut down Astro Studio in September the same year.

I used Astro Studio in my article, so as it's shutting down, now might be the time to talk about how to migrate to a different service.

Exporting the data

If you previously used Astro Studio, you can still log in using your GitHub login at:

https://studio.astro.build/

Once logged in, select the project you'd like to export. In the project dashboard, choose Settings, then on the General page, click Export Database.

This will export as a .sql file. This is nice if you decide to use another SQL database, as you can typically import the table directly into the database.

I've decided to try out a different database service that I haven't used before, Convex.

Converting to JSON

Convex is not a SQL database, instead more closely resembles Firebase (from what I can tell), as it uses "JSON-like documents" as it's database. Easy enough!

First thing though, we need to convert that data from SQL to JSON.

Not an easy conversion and typically something I would probaby do manually, instead let's make AI do the things I don't want to do, and toss it to ChatGPT.

Surprisingly, ChatGPT understood exactly what I was asking and provided a mostly complete, JSON formatted data structure. I had to prompt it three times total to get the entire output, but it got there! Your mileage may vary!

Setting up Convex

Once logged into Convex, I set up a new project called "guestbook" and created a similarly named table on the database.

Here I selected Add Documents, where I could paste in my JSON to import the data. ChatGPT must have did alright with the conversion, as I now had all my former guestbook data in a Convex database. I got a little confused at first, realizing that I only added the data to the development database - make sure to include it in production as well.

Integrating into Astro

Part of the intention for the HD remaster of my website was to bring in some of my projects, so I had planned on adding the guestbook here at some point. I needed to recreate the functionality of reading and writing to the guestbook, however there isn't a Convex + Astro integration as far as I can tell. We can still accomplish our goal though, and take a look at Astro Actions in the process.

Convex API

First thing to do is read the data and output the entries on an Astro page.

The Convex package can be installed by running:

npm install convex

To initialize Convex, next run:

npx convex dev

This will prompt to create a new project or connect to an existing project, I connected to the project I already set up in the Convex dashboard.

After connecting to the database, Convex will create a /convex/ directory with some generated files inside. This is where we can work on building an API to interact with the database.

I created a file called entries.js as I want to work with guestbook entries. We need to import a couple of things from our Convex installation.

import { query } from './_generated/server';
import { v } from 'convex/values';

query is the method used to query the database.
v is a validator tool, used to make sure data passed in is typed correctly.

Now we can define a get function that queries the database and returns all items from the guestbook table.

import { query } from './_generated/server';
import { v } from 'convex/values';

export const get = query({
  // No arguments necessary here
  args: {},

  // handler is the function run
  // when accessing the GET endpoint
  handler: async ctx => {
    // In context, we can query the `guestbook`
    // table and retrieve all entries
    return await ctx.db.query('guestbook').collect();
  },
});

Now, to use the API!

I created a new file called pages/experiments/guestbook.astro and imported the ConvexHTTPClient, as well as the generated api:

---
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../../convex/_generated/api';
---

The CONVEX_URL in the .env file will be used to instantiate a new instance of the ConvexHTTPClient, to interact with the database from the component.

---
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../../convex/_generated/api';

const client = new ConvexHttpClient(import.meta.env.CONVEX_URL);
---

Using client, we can now query using the generated API endpoint api.entries.get.

---
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../../convex/_generated/api';

const client = new ConvexHttpClient(import.meta.env.CONVEX_URL);
const entries = await client.query(api.entries.get);
---

This returns all the entries in the guestbook table and can now be rendered in the template.

---
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../../convex/_generated/api';

const client = new ConvexHttpClient(import.meta.env.CONVEX_URL);
const entries = await client.query(api.entries.get);
---

{
  entries.length && entries.map(entry => (
    //...Template
  ))
}

Astro Actions

Ok, so now the entries are displaying on the page - what about writing to the guestbook?

We could probably use like a React or Vue component to do this, however Astro has a neat feature for those using server side rendering: Actions.

Actions are a way to run functions server-side, so the idea here is to:

Fill out a form and submit
POST the form data to a server action to handle
The action submits the data to the Convex database

To create an Astro action, we need to create an /actions folder and include an index.ts (I'm sure this could be a .js file instead, I just followed the docs).

We'll add some tools from Astro:

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

defineAction - let's us, well, define actions
z - Astro's type validator of choice, Zod

Actions work by defining them in a server object, each action will have a unique property associated with it:

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  // Defining a `guestbook` action
  guestbook: defineAction({
    //...
  });
}

To set the type of data the action will accept, we can set the accept property to 'form'

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  // Defining a `guestbook` action
  guestbook: defineAction({
    accept: 'form'
  });
}

The input property is used to specify the data passed through the action. We can use z to specify Zod type validations.

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  // Defining a `guestbook` action
  guestbook: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string(),
      message: z.string()
    })
  });
}

Finally, to make the action do something, let's add a handler property, which let's us do something with the input data.

We will want this to be an asynchronous function as we will be making a call to our Convex API to insert data.

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  // Defining a `guestbook` action
  guestbook: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string(),
      message: z.string()
    }),
    handler: async (input) => {
      // Do something! but... what?
    }
  });
}

The action is now in place, but it still doesn't quite do anything yet - let's fix that.

The Convex API currently only has one endpoint, the previously created query. Convex provides a method for creating mutations, enabling data to change - including inserting data to our database.

// Previously created query
export const get = query({
  args: {},
  handler: async ctx => {
    return await ctx.db.query('guestbook').collect();
  },
});

// New mutation endpoint
export const createEntry = mutation({
  //...
});

I've called this function createEntry as it will be used to create a new entry in the database. Similar to our get query function, arguments can be included - this time we want to receive the same items accepted by our Astro action.

// Previously created query
export const get = query({
  args: {},
  handler: async ctx => {
    return await ctx.db.query('guestbook').collect();
  },
});

// New mutation endpoint
export const createEntry = mutation({
  args: {
    name: v.string(),
    message: v.string(),
  },
});

Next, like our Astro action, let's add a handler to do something with the data. What that something is: insert data into the guestbook table.

// Previously created query
export const get = query({
  args: {},
  handler: async ctx => {
    return await ctx.db.query('guestbook').collect();
  },
});

// New mutation endpoint
export const createEntry = mutation({
  args: {
    name: v.string(),
    message: v.string(),
  },
  handler: async (ctx, args) => {
    return await ctx.db.insert('guestbook', {
      name: args.name,
      message: args.message,
    });
  },
});

Now, back in our /actions/index.ts file, we can import and instantiate a new ConvexHTTPClient, as well as import the generated API.

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../convex/_generated/api';

// Instantiate ConvexHTTPClient using the `CONVEX_URL`
// in the `.env` file
const client = new ConvexHttpClient(import.meta.env.CONVEX_URL);

export const server = {
  // Defining a `guestbook` action
  guestbook: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string(),
      message: z.string()
    }),
    handler: async (input) => {
      // Do something! but... what?
    }
  });
}

Now, inside the handler we can use the client's mutate() method to run a Convex mutation. The first parameter is the mutation to run, found on the generated API: api.entries.createEntry. The second parameter is the data to submit.

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../convex/_generated/api';

// Instantiate ConvexHTTPClient using the `CONVEX_URL`
// in the `.env` file
const client = new ConvexHttpClient(import.meta.env.CONVEX_URL);

export const server = {
  // Defining a `guestbook` action
  guestbook: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string(),
      message: z.string()
    }),
    handler: async (input) => {
      return await client.mutation(
        // Mutation defined in `/convex/entries.js`
        api.entries.createEntry,
        // Data to submit
        { name: input.name, message: input.message }
      );
    }
  });
}

Finally, let's add a form to our Astro page and a script to trigger the Astro action when the form is submitted.

---
// guestbook.astro
---

<form method="POST" id="guestbook-form">
  <label for="author">
    Author
    <input id="author" name="name" required />
  </label>
  <label for="content">
    Message
    <textarea id="content" name="message" required></textarea>
  </label>
  <div>
    <button type="submit">Leave your mark</button>
  </div>
</form>

<script>
  // Import Astro actions
  import { actions } from 'astro:actions';
  import { navigate } from 'astro:transitions/client';

  const form = document.querySelector('#guestbook-form');

  form?.addEventListener('submit', async event => {
    event.preventDefault();

    // Capture form data
    const formData = new FormData(form);

    // Trigger the Astro action
    const { error } = await actions.guestbook(formData);

    // If no errors, we can refresh the page
    if (!error) navigate('/experiments/guestbook');
  });
</script>

Including Akismet

In my previous article, I explain a bit on how to add Akismet so that the guestbook does not receive unsolicited spam. The same thing can be done here!

Here is the full file, including the code to implement Akismet:

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../convex/_generated/api';
import { Blog, Client, Comment, Author, CheckResult } from '@cedx/akismet';

const client = new ConvexHttpClient(import.meta.env.CONVEX_URL);

export const server = {
  guestbook: defineAction({
    accept: 'form',
    input: z.object({
      name: z.string(),
      message: z.string(),
    }),
    handler: async function (input) {
      let isValid;
      const blog = new Blog({ url: 'https://ryantrimble.com/' });
      const akismet = new Client(import.meta.env.AKISMET_TOKEN, blog);

      try {
        isValid = await akismet.verifyKey();
      } catch (error) {
        return error;
      }

      if (isValid) {
        if (typeof input.name === 'string' && typeof input.message === 'string') {
          try {
            let author = new Author({
              name: input.name,
            });

            let comment = new Comment({
              author: author,
              content: input.message,
            });

            const result = await akismet.checkComment(comment);

            if (result === CheckResult.ham) {
              return await client.mutation(api.entries.createEntry, {
                name: input.name,
                message: input.message,
              });
            } else {
              throw new Error('This entry has not been submitted.');
            }
          } catch (error) {
            return error;
          }
        }
      }
    },
  }),
};

Wrap up

Although unfortunate to see Astro Studio shutting down, it's easy enough to migrate our data to another service. Feel free to leave a message on the new guestbook, located here on my site!

Weekly Roundup #31

Sat, 30 Nov 2024 12:00:00 GMT

Interesting Links

The engagement is better on Bluesky

published by The Bluesky Team on 11/29/2024

The folks over at Bluesky released this post giving testimonials from several accounts claiming engagement is higher on the growing social network. My personal testimonial is that I have over 2,000 followers for some reasons, way more than ANY other platform.
I wrote a course, but it's so much more than that

published by Andy Bell on 11/29/2024

Andy released a course this week (see "Cool Courses"), here is a personal write up from him explaining the whats and whys. Don't worry, I already checked and there are no Rick-rolls.
Turn off AI features by default (to reduce their climate impact)

published by Hidde de Vries on 11/29/2024

Excellent reminder from Hidde that if you aren't using AI features, consider opting-out of using them totally to help conserve energy. This feels like the digital version of recycling for some reason.
Haunted by my own projects

published by Cassidy Williams on 11/26/2024

Cassidy shares a familiar feeling for folks who build things, maintaining side-projects becoming a chore. I sometimes feel this way, but then realize no one really uses any of my side projects.
Against the Dark Forest

published by Erin Kissane on 11/26/2024

Erin continues her work exploring the Dark Internet Forest, what it is and how it came to be. Fascinating read.
This website is hosted on Bluesky

published by Daniel Mangum on 11/24/2024

Daniel (no relation to Jeff) takes a look at the AT Protocol, discovering how to upload and host a web page. And here I thought Bluesky was just for shitposting.

Cool Courses

Complete CSS - I pre-ordered this and have been eagerly awaiting release. I haven't dug into it quite yet, but I looked through the list of lessons and it's (excitingly) much more than I expected.

In Other News

Over on CSS-Tricks, I wrote a follow up post now that we officially have a new CSS logo!
Vite 6.0 has been released, somehow it's even faster than before (which is crazy).

Weekly Roundup #30

Sat, 23 Nov 2024 12:00:00 GMT

I can't believe Thanksgiving is next week. I hope everyone has a wonderful time doing whatever it is you do, whether you celebrate the holiday with friends and family or don't celebrate at all.

This month has been crazy busy for me. I've got some great updates to share soon!

Interesting Links

Make creative borders with background-clip border-area

published by Jen Simmons on 11/20/2024

Safari's latest technology preview is out and Jen is here to demo an incredibly useful feature: adding a background to a border with background-clip: border-area.
You should write modern CSS, today

published by Jeremias Menichelli on 11/20/2024

This is a sentiment I can always get behind, Jeremias gives straightforward examples of some of the best modern features of CSS. I've gotta look into that @custom-media feature...
The devtools features you wish you had, available in Polypane

published by Kilian Valkhof on 11/19/2024

I promise I don't get paid to keep touting Polypane, it's just that great. Kilian provides a great response, listing out the features you wish you had elsewhere.
Playing with the Gamepad API

published by Alvaro Montoro on 10/24/2024

Neat write up on how to a surprisingly well-supported experimental API by Alvaro, now folks can really add a "Konami code" easter egg to their sites.
Beautiful focus outlines

posted by Thomas Günther on 5/11/2024

Thomas gives a GREAT recommendation here, designing with usability considerations (such as focus rings) can be fun and helpful to folks that need it. Check out the outlines on my site, for example!

Tips & Tricks

I love seeing the fun stuff folks are making with Bluesky integrations, reminiscent of the weird ol' days.

a:\drian created a fantastic Bluesky user search tool (and even included me in the screenshot).
Meanwhile, Dave Bagpuss Forsey built this hilarious SwearSky app that reads all the swears.

In Other News

United States Department of Justice wants Google to sell Chrome. This feels odd, I'm not quite sure who else could maintain Chrome at this point.

Weekly Roundup #29

Sat, 16 Nov 2024 12:00:00 GMT

Interesting Links

Guide to the Node.js exports field

published by Hiroki Osame on 10/15/2024

Hiroki shared this super helpful guide explaining what the export field does in your package.json file. If you are making node packages, you probably want to know how this works (I usually just wing it).
Six Common HTML Myths

published by Dennis Snell on 10/14/2024

Dennis points out all the ways I've been writing HTML incorrectly all this time. A great reminder that some of the habits from the old days are no longer necessary!
Two books, no longer apart.

published by Ethan Marcotte on 11/12/2024

Ethan made two of best resources for responsive design free for everyone. You may remember earlier this year, A Book Apart closed up shop, leaving authors scrambling to figure out what to do with their books. Thanks Ethan, for making these important pieces accessible to everyone!
Carving your space

published by Heather Buchel on 11/12/2024

I'm in a very similar place as Heather and this was helpful to read. The things I care about are rarely the things companies hire for, sometimes leaving me wondering if I'm in the correct field. Heather is correct though, these things are important - even if you have to carve out the space to do it yourself.
Framer Motion is now independent, introducing Motion

published by Matt Perry on 11/12/2024

Another shake up in the world of animation libraries as Motion becomes independent from Framer! Congrats Matt on the achievement!
The br element

published by Heydon Pickering on 11/12/2024

Heydon makes up for skipping the <br> element, but in defense, I don't like this element very much either. It's one of those icky things, if I find myself reaching for <br>, I'll question if there is an alternate approach.
Overflow Clip

published by Ahmad Shadeed on 11/11/2024

Ahmad's interactive articles are incredible and help explain so much, I always learn something! This time I was aware of overflow: clip, but I did not know about overflow-clip-margin which is a super helpful addition.
Don't forget to localize your icons

published by Eric Bailey on 11/11/2024

I haven't had the opportunity to work much with internationalization, but this is absolutely something I would have never thought to do! Luckily Eric has us covered, excellent explanations, and a great reference.
Browsers, Again

published by Tyler Sticka on 11/11/2024

Why is finding a browser so hard? Tyler documents his latest switch to Vivaldi. I'm also trying to find a daily-driver and have been trying Vivaldi, but am overwhelmed by how much you can customize (however not the things I want).
A Friendly Introduction to Container Queries

published by Josh W. Comeau on 11/4/2024

I' ha've often thought of writing an unfriendly introduction to container queries, thankfully Josh is kind enough to cover the friendly version. Everyone, with peace and love: use container queries!
Disability Rights Are Technology Rights

published by Cory Doctorow on 10/24/2024

Cory from the Electronic Frontier Foundation explains what technological self-determination is and the benefits for folks who may require assistive technologies.

Cool Conferences

Aubrey shared a recording of her talk on color in CSS from Drupal Asheville over in the Frontend Horse Discord community!
For even more information on color in CSS, Manuel Matuzović's recorded talk from Beyond Tellerrand is now available!

Tips & Tricks

11ty has a fancy new tool to help import all sorts of stuff: 11ty/eleventy-import
One of the few folks I trust for food tips, Lynn Fisher breaks down her favorite things from a recent trip to Disneyland.

In Other News

The Onion bought Infowars, I'm excited to see what America's finest news source can do with America's most wretched news source.

Weekly Roundup #28

Sat, 09 Nov 2024 12:00:00 GMT

Interesting Links

How a BBC navigation bar component broke depending on which external monitor it was on

published by Josh Tumath on 11/8/2024

Josh explains an incredibly odd bug they ran into over on the BBC's UK site involving multiple monitor setups. True story, most problems we face in Frontend is due to monitors, as such we should work towards abolishing them. Yeah... that'd solve everything.
TIL: Bracket notation during object declaration

published by Jaime Jones on 11/8/2024

Jaime is sharing some wild stuff in her TIL (Today I Learned) series, including this method of using bracket notation in different ways with objects. I told her someday I will come across a use-case for this and happily have a resource for it.
Goodbye, Twitter.

published by Brad Frost on 11/7/2024

Brad shares a common sentiment amongst folks who used Twitter to develop their personal networks over the years, it's an end of an era for sure. This week I watched lots of folks converting to Bluesky, which I hope will fill the Twitter-shaped hole in our lives.
The button element

published by Heydon Pickering on 11/4/2024

Name a more misunderstood element than a button. Heydon does a great job, in their own way, explaining the history of buttons on the web and what they have become. My rule of thumb is "links take you places, buttons do stuff" which handles like most use cases.
Your CSS reset should be layered

published by Mayank on 11/2/2024

I agree with Mayank's title, didn't even need to write the article. However, if you need convincing, you will learn why reading this. Also, checkout Mayank's @acab/reset.css which I tend to use on personal projects (such as this website!).
The details and summary elements are getting an upgrade

published by Stephanie Stimac on 11/1/2024

Stephanie explains current issues when styling the <details> and <summary> elements and some proposed changes coming to help customization easier. As someone who constantly judges himself using these elements, I'm excited to know if I should be using them or not.
An Introduction to Unicode

published by Aleksandr Hovhannisyan on 7/28/2024

This was shared recently on the Frontend Horse Discord and it's a fantastic resource explaining how unicode works!

Cool Conferences

Beyond Tellerrand 2024 was this week, Hidde de Vries and Manuel Matuzović shared their slides.
Chris Coyier released a written version of his conference talk Designing DX

Tips & Tricks

I was SUPER excited for this one when it came through the CSS-Tricks submission desk, check out how you can use clamp on other things, in Fluid Everything Else by Richard Hubbard.
Adam shares one of those "why didn't I think of that"-type tricks by matching aspect-ratio based on the orientation of the device.

In Other News

The nightmare continues, Donald Trump won the U.S. Election this week. I have no words. Luckily Ken White had some in his article "And Yet It Moves" that sort of helps.

Weekly Roundup #27

Sat, 02 Nov 2024 12:00:00 GMT

This past week I went to see Kamala Harris speak at the Farm Show complex in Harrisburg, PA! I've never been to a political rally before, but this year is a bit different.

In case you somehow missed it, Kamala is running for President of the United States in one of the most concerning U.S. Presidential elections I've experienced in my thirty-odd rotations around the sun.

Also, if you really somehow missed this: please, I urge you to pay more attention, how could you have missed this, they are texting every god damned hour.

For my U.S. readers: if this is the only reminder you see, allow me (your humble curator of interesting links) to proudly urge you to do your civic duty this coming Tuesday:

Over on Bluesky, starter packs seem to be a winning strategy for expanding your network quickly. All of a sudden, I've got more followers than I know what to do with!

I created a starter pack for the Frontend Horse community consisting of guests from the Twitch stream and the awesome frequent contributors in our Discord. These folks are some of the best I know and are totally worth a follow! Piccalilli's starter pack called Welcome to Bluesky, web friends will help get you going on Bluesky as well.

Interesting Links

The body element

published by Heydon Pickering on 10/31/2024

Heydon dropped another element explainer, this time talking about the body element. Luckily, they made sure to spice it up with facts about hammerhead sharks and blobfish.
State of CSS 2024 Results

published by Geoff Graham on 10/30/2024

Geoff provides some analysis on interesting bits from the State of CSS 2024 survey. Love to see CSS-Tricks still ranking high!
Clever Polypane Debugging Features I'm Loving by Ryan Trimble

published by Kilian Valkhof on 10/30/2024

Kilian wrote an article about an article I wrote on Polypane (the best browser), so now I'm telling you about it. Hell yeah, I'm keeping this meta going. Thanks, Kilian!
Should masonry be part of CSS grid?

published by Ahmad Shadeed on 10/29/2024

Ahmad explores the options for CSS Masonry with interactive examples. This was super helpful to visualize some use-cases outside of Pinterest.
The design system isn't working for me!

posted by Brad Frost on 10/15/2024

Brad explains situations when the design system may not be working for some and how to communicate changes and decisions.

Tips & Tricks

With the rise in popularity of Bluesky, David Darnes released a web component to easily embed Bluesky posts.

In Other News

Russia is suing Google for all the money, websites: make sure your overflows handle all them zeroes.
Lynn Fisher introduced us to Tater, a rescue pup with stunning eyes.

Weekly Roundup #26

Sun, 27 Oct 2024 12:00:00 GMT

Apologies for the delay this week, my sister got married yesterday and I ended up being the wedding photographer. Congrats to the newly married couple!

I've got something neat cooking up as I've been experimenting with CSS Anchor Positioning for a new article. Anchor positioning might change a lot of the ways we write CSS and feels like a super natural addition. The easiest way to summarize it might be: if position: absolute did what you expect.

Super excited to share more details soon!

Interesting Links

Come to the light-dark() Side

published by Sara Joy on 10/25/2024

Sara explained light mode versus dark mode at the 11ty conference back in May, now she's written the book on it (well, a highly in-depth explainer on CSS-Tricks rather, but let's be real, she could totally write an actual book if she wanted).
How to add custom events to Web Components

published by Chris Ferdinandi on 10/23/2024

Chris released the final part in his YouTube series about building web apps using only JavaScript web components. This time he demonstrates how to add custom events using emit() to extend your components even further.
Delete MD5 Hash from Azure Storage Blob using Azure CLI

published by Chad Peters on 10/23/2024

If you know Chad, you might be wondering what a post from a backend developer is doing on here. The lesson is universal, however: sometimes it's best to stop and read the documentation.
Possible Future CSS: Tree-Counting Functions and Random Values

publihsed by Roma Komarov on 10/22/2024

Once again, Roma is out here breaking minds and prognosticating on the future of CSS. This time explaining the math behind how loops and randomness might work. Do I understand it? Not really. Am I still excited? Absolutely.
ELI5: What is defineModel in Vue?

published by Jaime Jones on 10/21/2024

I was stoked when Evan You described defineModel at the 2023 Vue Conf in New Orleans, however I never got a chance to check it out. Luckily, Jaime is excellent at breaking things down and wrote a whole ELI5 (explain like I'm five) post!
Creating Design System-Friendly Snowflakes with Utility Classes

published by Stu Robinson on 10/21/2024

Stu shares a perfect example of extending a design system through the use of design tokens. Actually, Stu was on a tear and wrote three articles explaining tokens this week, be sure to read all of them on his blog!
Where web components shine

published by Dave Rupert on 10/21/2024

As some folks seem to be confused on when may or may not be the time for a web component, Dave put together a couple lists detailing the good and bad parts. Remember, it's about using the best tool for the job.

Tips & Tricks

Silvestar Bistrović created a neat VSCode extension called Clamp It! that let's you easily clamp() values.

In Good News

I'm excited to checkout Devon Persing's new book, The Accessibility Operations Guidebook, explaining how best to strategize and create accessibility programs.

In Other News

Matt Mullenweg took down bullenweg.com by threatening legal action. Add hostile censorship to the pile, I guess.

Weekly Roundup #25

Sat, 19 Oct 2024 12:00:00 GMT

Another milestone, I can't believe my little Roundup is already 25 years old. Or something. Not much to say this week, but a lot of awesome links!

Interesting Links

The ADHD Handbook

published by Chris Ferdinandi on 10/18/2024

Chris published this last night and it was the first thing I checked out this morning. Great insight as usual, especially as someone trying to navigate ADHD myself.
How should <selectedoption> work?

published by Jake Archibald on 10/18/2024

Jake explains the landscape of a customizable <select> elements and is wondering what things to consider for the currently selected option, providing a few scenarios.
7 == 9

published by Nic Lake on 10/17/2024

Nic celebrates a recent shift in perspective thanks to an angry therapist. As I read this one, I thought of Harrison Ford in Shrinking.
Aria-activedescendant is not focus

published by Sarah Higley on 10/16/2024

Excellent write up by Sarah on what aria-activedescendant even is and when exactly to use it, love learning about this kind of thing!
My solar-powered and self-hosted website

published by Dries Buytaert on 10/15/2024

Dries, founder of Drupal, put together a neat solar-powered website, which is way more interesting than whatever Matt Mullenweg is doing.
I've Been Doing Blockquotes Wrong

published by Michelle Barker on 10/16/2024

This week everyone collectively realized we have been using blockquotes incorrectly this whole time. Michelle reacts to Heydon's latest article... speaking of which...
The blockquote element

published by Heydon Pickering on 10/14/2024

Heydon points out how one of the most boring HTML elements is actually super confusing, while kindly providing semantically correct alternatives. Kudos!
Blockquotes in Screen Readers

updated by Adrian Roselli on 10/14/2024

Following the discussion on blockquotes further, Adrian shared a post from 2023, providing test scenarios for various patterns for screen readers.
Hire HTML and CSS people

published by Robin Rendle on 9/21/2024

Just a straightforward reminder from Robin that bugs and issues stem from not understanding the basics, HTML and CSS.

Tips & Tricks

Chris Swithinbank has a new project aimed at bringing WordPress data into Astro, called DeWP.

In Other News

GSAP and Webflow are joining! I wrote about it over on CSS-Tricks, but check out the official announcement.
𝕏 (the hellscape formerly known as Twitter) continues to freefall from public favor by introducing another dumb "enhancement" to make blocking accounts pointless.

Cool Conferences

Melanie Sumner shared their presentation slides from EmberFest 2024 taking a look at harmful, yet common, user-interface patterns.

Weekly Roundup #24

Sat, 12 Oct 2024 12:00:00 GMT

My personal developer "sweet spot" is the nexus of converting design to code for implementation, which is why I'm a big fan of design systems. These types of roles seem to be much harder to come by, unfortunately, so I'm left figuring out what to do next with my career.

I feel the need to pivot into one of two directions:

User Interface Designer (no code) - these are the folks digging into Figma, making mockups and prototypes rather than scaffolding out some HTML.
Fullstack Developer (more code) - the one who can do it all, getting their hands dirty in the backend and the frontend.

The problem is that I'm interested in design and I enjoy coding and these companies only seem to want one or the other.

So I'm a little lost.

I asked Mastodon if there were any good courses for design specifically, no coding involved, and, while I received a number of likes and shares (indicating this might be something more folks are interested in), only a couple of actual suggestions:

bartekhejnowicz recommended Uxcel as a great way to learn UI/UX design.
Josh "Yoshi" Vickerson reminded me of "Refactoring UI" the book by Adam Wathan and Steve Schoger. I purchased this digitally a while ago and I do enjoy referencing this, especially the component library.

If you have any suggestions, please let me know. Anyway, let's get into this weeks links!

Interesting Links

HTML for people

posted by Blake Watson.

</hgroup>

Blake wonders why more people don't use HTML, this project is to help normies learn HTML. I've often thought it would be good for folks to learn basic programming, so this is an excellent bridge.

I'm okay with me.

posted by Anne Sturdivant on October 10, 2024.

</hgroup>

Lovely post and a great reminder that you are awesome as you are, no need to compare yourself to others. Thanks for the reminder, Annie!

Why GOV.UK's Exit this Page component doesn't use the Escape key

posted by beeps on October 9, 2024.

</hgroup>

beeps talks about the considerations that went into creating a useful "Exit this page" button, and the reasoning behind not using the escape key.

My development philosophy: KISS

posted by Jaime on October 8, 2024.

</hgroup>

Jaime talks abstraction, readability, and taking the time do things correctly as her development philosophies. Also, check out that rad blockquote styling!

Searching for a New CSS Logo

posted by Ryan Trimble on October 8, 2024.

</hgroup>

Earlier this week I wrote about why the CSS-Next community group is working on a new logo for CSS.

How to Test and Improve Carousel Accessibility: A Complete Guide

posted by Florian Schroiff on October 2, 2024.

</hgroup>

Developers hate it, but marketing loves it: carousels. If you must, Florian has an awesome guide to do it accessibly.

HTML Whitespace is Broken

posted by Doug Parker on September 2, 2024.

</hgroup>

Doug maps out all the gotchas with whitespace in HTML, how CSS and content management tools can affect it, and a suggestion on how to fix it going forward.

Tips & Tricks

CSS Space Toggles - Neat trick to add a toggleable, condition based logic to custom properties to your CSS.
Quantity queries using has() selector - Temani demonstrates how to select a specific number of child elements using :has().

In Other News

Hurricane Response Rumors - FEMA put up this page to combat disinformation regarding the recent hurricanes Helene and Milton.
Matt Mullenweg added a dumb checkbox to the WordPress.org login page.
Sara Joy now has a sticker book, and I still have a sticker box.

Cool Conferences

Stop what you are doing, watch Erin Kissane's talk at XOXO Festival, then let's fix the fucking networks!

Weekly Roundup #23

Sat, 05 Oct 2024 12:00:00 GMT

While researching a topic I unintentionally formed an opinion over, I realized I really, really enjoy having my opinion changed.

Changing my mind means I've learned more about the situation, gained missing context, and most importantly, understand the reasoning behind it - and I think that is a good thing.

I hope you learned something this week too, but if not - hopefully you will with this week's interesting links!

Interesting Links

Web Components are Bad, Good, and OK

posted by Chris Coyier on October 3, 2024.

</hgroup>

Chris sums up this crazy debate about web components incredibly well. What a weird argument this has turned out to be.

CSS Anchor Positioning Guide

posted by Juan Diego Rodríguez on October 2, 2024.

</hgroup>

My friend Juan at CSS-Tricks released the ultimate guide to Anchor Positioning. I've already bookmarked this, as I expect to return to it frequently.

The bdo element

posted by Heydon Pickering on October 2, 2024.

</hgroup>

Heydon, I doubt you read this, but... you've really did it this time. There's no reason an article about an HTML element should be a masterpiece, but here we are. Also, I have a very strange definition of "masterpiece."

Doug Engelbart or How We Learned to Stop Commanding and Love the Mouse

posted by Sara Joy on September 30, 2024.

</hgroup>

Sara gives us a history lesson on Apple's influence in user interface design, exploring Doug Engelbart who coined "See and Point" for mouse-driven interfaces.

ELI5: What is a dependency array in React?

posted by Jaime Jones on September 30, 2024.

</hgroup>

I'm pretty sure Jaime wrote this article because I complain about dependency arrays every time I need to touch React. Why are they there? Why is it so easy to cause an infinite loop? Are people who like React OK?

The bdi element

posted by Heydon Pickering on September 30, 2024.

</hgroup>

The first of the two articles released, Heydon was cooking this week. This one is ok, too.

In Other News

Eleventy v3.0.0 was released - Possums, assemble!
Mozilla isn't even trying anymore (but they are looking for fan art).
Bunch of folks left Automattic due to the feud with WP Engine, though some stayed. What a disappointing situation.
Anh released a super spooky update to her personal website, be sure to try the light mode toggle!

Cool Conferences

Vite Conf was this week, whiteboard afficienado Ben Holmes was there!

Weekly Roundup #22

Sat, 28 Sep 2024 12:00:00 GMT

There is a quote from author Mark Twain / normal guy Samuel Clemens:

"Find a job you enjoy doing, and you will never have to work a day in your life."

I really want that to be true.

I love development, especially working with CSS - and yet, I have not quite figured out how to achieve that. Actually, in my current situation, I'm unable to do virtually any of what I enjoy about development. The things I'm passionate about, I'm being asked to ignore for the bottom line.

I don't enjoy that.
I don't want to do that.
Please don't make me do that.
You are killing my passion.

Thankfully, the development communities I find myself in help restore that passion. Revitalizing me with some great links, so let's dig in!

Interesting Links

The b element

posted by Heydon Pickering on September 28, 2024.

</hgroup>

Heydon's article helped me figure out the differences between presentational elements, semantic elements, and chemical elements.

A guide to destructuring in JavaScript

posted by Mat “Wilto” Marquis on September 25, 2024.

</hgroup>

Mat goes all out explaining the various ways you can destructure stuff and things in JavaScript. Turns out there are several ways, weird.

Introducing TODS – a typographic and OpenType default stylesheet

posted by Richard Rutter on September 22, 2024.

</hgroup>

This was shared by Andy on Piccalil.li, but this looks like a great way to kick off a stylesheet with great typographical defaults.

Work is meaningless, and it almost killed my husband

posted by Salma Alam-Naylor on September 22, 2024.

</hgroup>

Salma posted quite the cautionary tale about her husband's health, and how you can't ignore your own health. I'm glad to hear Richard is doing well.

Update CSS variables using range slider

posted by Temani Afif on September 16, 2024.

</hgroup>

This is really neat, Temani gives a great tip on how to tie a range slider to the value of a CSS custom property.

In Other News

The Chrome team introduced interpolate-size as a progressive enhancement, making animating to auto a whole lot easier.
WordPress Matt is pissed at WP Engine, apparently. Personally, I stopped using WordPress years ago as I was too broke to afford hosting.

Weekly Roundup #21

Sat, 21 Sep 2024 12:00:00 GMT

What a week! I released the HD remaster of my website last weekend and received some wonderful feedback, thanks to a supportive community!

Also, I had a new article published over on CSS-Tricks - it's about some small features I love about Polypane.

Anyways, let's get into it!

Interesting Links

Web Components for Password Input Enhancements

posted by Ryan Mulligan on September 20, 2024.

</hgroup>

You gotta love to see well rounded, progressively enhanced, native custom web elements. Great real-world example and use-case, nice work Ryan!

Cache Me Not, Cache Me, Cache Me Not

posted by Hazel Weakly on September 19, 2024.

</hgroup>

Hazel's pissed. And for good reason: caching. So pissed in fact, she made up perfectly understandable terminology to explain how caching should work.

How I build a button component

posted by Andy Bell on September 18, 2024.

</hgroup>

Thanks Andy explaining this one - I mean, yeah - I know how to make a button, obviously, this is just for everyone else's sake... yeah... buttons.

Selling a small front-end web project — what I learned

posted by Alistair Shepherd on September 16, 2024.

</hgroup>

Awesome write-up by Alistair, on the experience of being approached to sell an old side-project you forgot about - every developer's dream. Get that bag, Alistair!

:nth-next-sibling? No need.

posted by Christopher Kirk-Nielson on September 15, 2024.

</hgroup>

Chris exlpains a neat CSS selector technique he figured out that lets you grab any number of elements following a specified element.

/* Nice, Chris! */
li:nth-child(-n + 3 of .el ~ *) { ... }

Open Source Needs to be Financially Symbiotic

posted by Zach Leatherman on September 13, 2024.

</hgroup>

Great post by Zach, explaining the situation with 11ty and how popular open source projects need to be financially secure enough to be maintainable.

In Other News

Microsoft wants to revive the Three Mile Island nuclear power plant to provide power to AI - wait that's like 5 mins away from me...
The folks over at Chrome are requesting feedback on CSS masonry implmentations proposed by the CSS Working Group.
Sophie Koonin added a new theme to her site, and this time: it's garden.

The HD Remaster

Sat, 14 Sep 2024 12:00:00 GMT

For the last few weeks I've been working on the latest iteration of my site, the one you are looking at now!

Yeah, I know, it doesn't seem much different - however, I assure you it was basically rebuilt from the ground up. I didn't really update the "branding" so-to-speak, rather overhauled the code. Cleaned up a lot of styling, updated designs where it seemed appropriate, as well as worked on adding in some new things.

I'm calling it the HD Remaster as it's very much the same website, just enhanced.

The key reasons I decided to change things include:

Previously, I built my website very much for blogging, not expecting to do much else with it. Well, I have plans now and I wanted to make my layouts a bit more flexible for new types of things.
Enhanced accessibility, I focused a lot on making sure my site is highly navigable by keyboard, screen readers, and other assistive devices that handle navigating by focus, headings, landmarks, links.

I've updated every page on the site, made new pages, and included new features!

Updated Pages!

Home Page

My homepage was a bit too repetitive and had more static than dynamic content.

I changed it up a bit this time, hoping to have the homepage a little more lively. I still feature the same sections as before, but more tailored to the section.

I also added a new section, the "published elsewhere" section. The idea here is if I publish articles elsewhere, I can still feature the articles here on my own site.

Now

I've expanded the /now page to show more things.

I'll have a message for folks visiting the page, information on my current roles, as well as all the fun stuff like books, music, movies, and games.

I have some other plans for this page, but I need to make sure it doesn't get too busy.

New Features!

Blog roll

The first blog roll I remember seeing is over on Ben Myer's site and I thought that was rad way to feature the great writing from folks in the dev community.

Also, I love sharing awesome things I've come across, I do it every week in my Weekly Roundup post. Most of those articles happen to come from my RSS reader, as I'm subscribed to some amazing feeds.

It only made sense to put together a blog roll, definitely check it out! If you want to be included, feel free to reach out!

Pagination

I don't think I imagined I would have enough articles to warrant pagination last time I re-built the site. I'd tried blogging before, but it never really stuck.

Turns out, I have written a lot of articles, not even including all the Roundups. So it seemed like a good idea to break up the /blog page as to not load a bunch of articles at once.

Search

Again, didn't think I'd need search previously and also I don't believe Pagefind existed when I built the site before. But now I do and luckily it does.

Pagefind is a super simple way to add search to static sites, you don't have to install any packages and it's all local to your project, so it doesn't need to go out to some third-party service.

Hope you like it!

Websites are never "done," and I've still got more things to do here.

I hope you like the changes, feel free to let me know if you spot anything out of place or whether you like it or absolutely hate it!

Weekly Roundup #20

Sat, 14 Sep 2024 12:00:00 GMT

Happy roundup day, everyone! I'm inches away from releasing the HD remaster of this site, hoping that will get merged sometime this weekend. I was aiming to release it with this Weekly Roundup and not say anything, but it didn't time up unfortunately.

Anyways, lots to talk about this week. Some exciting news, great conferences to check out, a new course, as well as lots of interesting links!

New Course

Andy Bell has a limited pre-order sale up on for his new CSS course coming later this year, Complete CSS. I am most confident with CSS, yet I still preordered this course.

Interesting Links

How unit division works in CSS, and how to use it today

posted by Scott Kellum on September 13, 2024.

</hgroup>

Scott over at Typetura is talking unit division in CSS, which is good, because I didn't know what that was until now. Really neat demo!

Good forms

posted by Dave Rupert on September 13, 2024.

</hgroup>

If you know me, you know I like a good form, in fact I don't like bad forms at all! Good thing Dave put together this great list describing what good forms do.

Exporting top level dynamically generated components

posted by Jaime Jones on September 11, 2024.

</hgroup>

Jaime is cooking up something neat in this article on dynamically generating noodles, I mean components.

The West Just Burns Now

posted by Chris Coyier on September 11, 2024.

</hgroup>

I complain a lot about how Pennsylvania is tropical climate now, but at least I can say we aren't on fire (yet). Chris describes the dire situation over on the west coast.

The audio element

posted by Heydon Pickering on September 10, 2024.

</hgroup>

There are few instances when I see code and be glad there isn't a demo attached, such as this example, Heydon describing the <audio> element with erotic squelching.

A web component for CodePen embeds?

posted by Miriam Suzanne on September 9, 2024.

</hgroup>

Miriam took inspo from David Darnes' <code-pen> web component, and created <embed-pen> to easily embed a CodePen. Soon we will have web components for all aspects of CodePen and I'm here for it.

Going Buildless

posted by Max Böck on September 8, 2024.

</hgroup>

I'm not sure how Max knew exactly what I was doing in 2005, but here he explains how to achieve ~~nirvana~~ buildless workflow.

Adding Google's reCAPTCHA To Your Form

posted by Ted Krueger on September 6, 2024.

</hgroup>

Ted put together a straightforward, simple, quick guide on how to add reCAPTCHA to forms over on our dev team's blog.

In Other News

Whoa, 11ty joined FontAwesome! I'm stoked Zach found a great open-source partner to keep 11ty thriving!
Una Kravets posted on the Chrome Dev blog asking for feedback on, get ready for this, a customizable select element.

Cool Conferences

Inclusive Design 24 took place on September 12, 2024, be sure to check out the 24-hour playlist available on YouTube!
Dave Letory and crew are putting on another awesome State of the Browser today, which I'm watching as I write this actually.

Weekly Roundup #19

Sat, 07 Sep 2024 12:00:00 GMT

I'm about 75% complete on my website refresh, also I'm terrible at estimating. It's was a busy week though, as the job hunt continues and I passed my allergy test. I realize that isn't a pass/fail type of test, but I'm not allergic to anything, so I think that means I scored a 100%. Lots of percentage based jokes today, I'm sorry.

I know what you are really here for though, let's get into it.

Interesting Links

CSS display contents

posted by Ahmad Shadeed on September 4, 2024.

</hgroup>

Do you know what display: contents; does? Yeah, I was in the same boat once too - before I read this one by Ahmad. Check it out if you wanna learn something.

How to Monetize a Blog

posted by Tyler (?).

</hgroup>

Wild one I came across on reddit, love the creativity here, but content warning: insufferable nature of capitalism. Rad stuff. I hope you're monetizing this blog somehow, Tyler (if that is your real name (I genuinely don't know)), get that bag.

The Dev Tools Performance Monitor Panel

posted by Dave Rupert on September 3, 2024.

</hgroup>

Now that I've read this piece on the performance monitor panel, I'm both curious and terrified to check out our applications at work. Great write up Dave!

What is React.js?

posted by Heydon Pickering on September 2, 2024.

</hgroup>

Sadly, it seems Heydon broke the weekly alphabetical HTML article streak - gladly though, as they dropped an absolute banger on Webbed Briefs. The wife and I watched this along with breakfast.

CSS @property and the New Style

posted by Ryan Mulligan on September 2, 2024.

</hgroup>

If you're looking for actual, quality information from someone named Ryan, check out Ryan Mulligan's write up on @property. Demonstrating a neat use-case by making a super rare, shiny call-to-action.

My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART)

posted by Christopher Kirk-Nielsen on September 1, 2024.

</hgroup>

Christopher provides a giggle-worthy headline and timely advice. I'm cooking up the HD remaster of this website, and color themes are on the to-do list.

Weekly Roundup #17

Sat, 24 Aug 2024 12:00:00 GMT

Interesting Links

Basic keyboard shortcut support for focused links

posted by Eric W. Bailey on August 21, 2024.

</hgroup>

Eric has assembled an amazing reference explaining the intricacies of keyboard shortcuts available on focused links, and how different browser engines handle them.

Exposing internal methods on Vue custom elements

posted by Jaime Jones on August 21, 2024.

</hgroup>

If you wrap a Vue component up as a custom element, you may want to use it's methods outside the component, so Jaime is here to explain how!

On the Ground at Frostapalooza

posted by Ryan Trimble on August 21, 2024.

</hgroup>

Last week I talked about heading out to Pittsburgh for Frostapalooza, find out how that went over on CSS-Tricks! Spoiler alert: it was rad.

The article element

posted by Heydon Pickering on August 19, 2024.

</hgroup>

Heydon continues to make it easy for me by ensuring a spot in the weekly roundup, this article on <article> is the latest entry in Heydon's alphabetical journey through HTML.

Some Git Tips

posted by Evan Sheehan on August 19, 2024.

</hgroup>

My friend Evan shares a few git tips he came across recently, I'm bookmarking this as I only have like 3 git commands commited (get it?) to memory.

The State of CSS 2024

posted on August 19, 2024.

</hgroup>

It's that time of year, survey time! This is pretty much the only survey about CSS (that I know of?), so it's a good one to spend a few minutes filling out.

Custom Top and Bottom CSS Container Masks

posted by Andrew Walpole on May 29, 2024.

</hgroup>

This was shared over on Mastodon, Andrew explains how to use masks to create awesome wavy and other custom shapes for webpages.

Weekly Roundup #18

Sat, 24 Aug 2024 12:00:00 GMT

Hey everybody, I hope you had a great week!

I checked out a new branch and began working on a refresh for the personal website. It's not going to be drastically different, but I'm hoping to clean up the styles a bit. Look forward to some new features that I never got around to implementing on this current iteration, such as:

Search!
Pagination!

I think that is it actually. Anyway, here are some amazing links from this past week:

Interesting Links

Introducing `@bramus/style-observer`, a MutationObserver for CSS

posted by Bramus Van Damme on August 31, 2024.

</hgroup>

Interesting new package by Bramus, gives you the ability to watch for CSS style changes and fire a callback. This gives me a few ideas...

Using template refs in Vue 3 with Composition API

posted by Jaime Jones on August 30, 2024.

</hgroup>

Interesting fact: I sometimes get to read Jaime's posts ahead of time, this time I got to suggest the cool little sunglass emoji 😎.

text-box ftw

posted by Adam Argyle on August 29, 2024.

</hgroup>

Adam gives a sneak peek at the text-box property, demoing some neat centering techniques. Check it out in Safari or Chrome Canary!

The aside element

posted by Heydon Pickering on August 28, 2024.

</hgroup>

As a personal <aside>, I'd like to say I'm excited to see how Heydon tackles the <dl> tag. Do you wait to talk about <dd>? or just do them all at once?

The secret inside One Million Checkboxes

posted by eieio on August 28, 2024.

</hgroup>

This is a wild internet story, an example of what is cool about technology, and the power of a small group of Discord users.

Introducing

Fri, 23 Aug 2024 12:00:00 GMT

A while ago, I created a little library at work to make those "skeleton screens" that I'm not sure anyone likes:

Summary: A skeleton screen is used as a placeholder while users wait for a page to load. This progress indicator is used for full page loads and reduces the perception of a long loading time by providing clues for how the page will ultimately look. — Nielsen Norman Group

We named it skellyCSS because... skeletons and CSS, I guess. We still aren't even really using it very much, but it was fun to do and it was the first node package I made myself (for the most part). It's still available on GitHub and npmjs.com if you wanna check it out.

Now I've upgraded (sidegraded?) skellyCSS into skelly-wc (the "wc" stands for web component).

Why web components?

I'm doing a deep dive with Scott Jehl's new course, "Web Components: Demystified" and wanted to build something. So, call it practice.

I remembered this weird little package and thought it'd be fun to redo as a weird little web component.

What does it do?

skelly-wc makes skeleton screens, basically.

There's only one component so far, <skelly-text> which replicates paragraphs. The stunning key features include:

You can tell it how many lines to show.
Change it's color if you'd like.

How does it work?

I've got the full instructions in the repo's README.md file, but let's do it the quick way.

Include the skelly-wc.js file via content delivery network at the end of your document, like so:

     <!-- ... -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@mrtrimble/skelly-wc/dist/skelly-wc.js"
    ></script>
  </body>
</html>

Then you use it wherever you need it.

<p>
  <skelly-text></skelly-text>
</p>

That'll output 5 gray lines in the rough shape of a paragraph.

Earlier I mentioned the two stunning key features of setting the number of lines and changing skelly's color, that works like this:

<p>
  <skelly-text line-count="3" line-color="tomato"> </skelly-text>
</p>

That's right, attributes.

Here's a demo I made on CodePen:

<p class="codepen" data-height="650" data-theme-id="default" data-default-tab="result" data-slug-hash="VwJXQZJ" data-pen-title="skelly-wc" data-user="mrtrimble" data-token="4499796d2b5cb87dda1ed5bb2b1f392c" style="height: 650px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"

<span> See the Pen <a href="https://codepen.io/mrtrimble/pen/VwJXQZJ/4499796d2b5cb87dda1ed5bb2b1f392c">skelly-wc</a> by Ryan Trimble (<a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Weekly Roundup #16

Sat, 17 Aug 2024 12:00:00 GMT

I'm heading to Pittsburgh this weekend for Frostapalooza, Brad Frost's benefit concert-slash-party to celebrate his birthday!

If you are also attending, definitely say hi if you see me — I'm hoping to meet a few online friends in real life for the first time!

Interesting Links

The Area element

posted by Heydon Pickering on August 16, 2024.

</hgroup>

Heydon's posts are teaching my non-existent children the alphabet. This time their talking about a relic from the glory days, <area>. Wow, I haven't thought of this element since I was a non-existent child.

Font with built-in syntax highlighting

posted by Heikki Lotvonen on August 14, 2024.

</hgroup>

Heikki has added to the possible use-cases for color fonts, bringing us to a grand total of one use-case. Kidding of course, this is insanely impressive and I'm excited to give this a go!

50 Docs tips in 50 days

posted by Sarah Rainsberger on August 12, 2024.

</hgroup>

Astro documentation fairy godmother, Sarah Rainsberger, set out on a mission to write 50 technical documentation tips in 50 days and she just wrapped up #50 recently. Also, how cool is it that Sarah uses Starlight for her personal site.

How not to use box shadows

posted by David Gerrells on July 21, 2024.

</hgroup>

David shows us lots of ways not to use a box-shadow, but somehow missed a very important way:

.element {
  box-shadow: 3 3 3 gray;
}

See, you need to specify a unit, otherwise it won't work very well.

Weekly Roundup #15

Sat, 10 Aug 2024 12:00:00 GMT

Interesting Links

CSS Chronicles XLII

posted by Geoff Graham on August 9, 2024.

</hgroup>

Geoff's making it clear that CSS-Tricks is alive, also waitaminute — he's talking about me in there! Like many others, I've been a fan of CSS-Tricks for a long time and I'm super excited to be helping out. Thanks for the kind welcoming, Geoff!

Comparing design systems to find the best qualities

posted by Hidde de Vries on August 9, 2024.

</hgroup>

Hidde chimes in with a friendly perspective shift on the global design system conversation. Rather than jumping directly into implementation, let's pause and figure out the most common attributes and establish a component's meaning. The real global design system is the friend's we've made along the way.

Build an e-commerce site... with a twist

posted by Jason Lengstorf on August 7, 2024.

</hgroup>

Jason does a web dev challenge series over on YouTube, what an awesome format for a show. More importantly, my friend Alex Trost got to participate! Root on Alex while watching the latest episode!

The abbr element

posted by Heydon Pickering on August 7, 2024.

</hgroup>

Heydon appears to be on an alphabetical mission to inform folks on HTML elements. This week's target is <abbr> and he certainly cleared up a few things for me. I'm wondering how Heydon will maintain sanity writing about different headings for 6 weeks straight.

The Sneaky Costs of Scaling Serverless

posted by Zach Leatherman on August 5, 2024.

</hgroup>

Zach did some cost analysis, so you don't have to! Serverless has a cheap barrier for entry, but we've all heard horror stories of developers receiving inexplicably inflated hosting bills. Good things to keep in mind when planning your deployment strategy.

Make kin not nets

posted by Mandy Brown on July 16, 2024.

</hgroup>

Really enjoyed this post by Mandy. I'm quite the social recluse, so networking never feels quite right (this is why LinkedIn is so gross). I feel more reward in maintaining friendships than meeting people for the sake of expanding a contacts list.

Special Shoutouts

I want to send a massive thank you to David Darnes and Sia Karamalegos (who both have awesome domain names) for including my blog in their blogrolls this week!

If you are unfamiliar, blogrolls are a super kind way for authors to share and promote the blogs they follow. I've added "build a blogroll" to my to-do list.

Check out David's blogroll here: https://darn.es/blogroll/

Check out Sia's blogroll here: https://sia.codes/rolls/

Weekly Roundup #14

Sat, 03 Aug 2024 12:00:00 GMT

I had an absolutely stacked week this week, but for good reasons!

One exciting thing is that I'll be helping Geoff Graham out over on CSS-Tricks, providing some updates to out-of-date articles.

You may see some new posts from me over there as well, but don't worry – I'll still be posting interesting links right here each week!

Interesting Links

Public Work

</hgroup>

Really neat idea for a way to search public domain content, the multidirectional scroll is impressively smooth.

The Anchor Element

posted by Heydon Pickering on August 2, 2024.

</hgroup>

I've been adding event listeners to <div>s like a chump, you mean to tell me there's a HTML with navigation built-in? Wow, it even has: focus order built-in, keyboard control built-in, role semantics built-in – Thanks, Heydon, for showing me the way!

Astro Party

posted by Jason Lengstorf on August 2, 2024.

</hgroup>

If you would like to learn how to build websites using Astro (like the very website you are on right now), keep an eye out for Astro Party, a new course by Jason Lengstorf!

Awesome Standalones

posted by David Darnes on July 31, 2024.

</hgroup>

Name a more iconic duo than David Darnes and web components. Oh yeah, maybe Dave Rupert and web components. They are working together now? Name a more iconic trio. Check out the Awesome Standalones project.

A handful of reasons JavaScript won't be available

posted by Andy Bell on July 31, 2024.

</hgroup>

Andy provides us with fifteen excellent reasons why JavaScript might fail, which really makes you stop and think about what we've been doing the past few years.

A new chapter for Porffor

posted by CanadaHonk on July 30, 2024.

</hgroup>

Oliver (CanadaHonk) has been keeping us folks on the Frontend Horse Discord updated on all the awesome news about porffor and excitingly, they get to work on it full-time! Congrats to the goose!

Weekly Roundup #13

Sat, 27 Jul 2024 12:00:00 GMT

This week I returned from Los Angeles and worked on how to find A Book Apart Books now that they have closed up shop.

Interesting Links

Providing Type Definitions for CSS with `@property`

posted by Stephanie Eckles on July 19, 2024.

</hgroup>

Steph provides a deep dive into the @property at-rule, which is now available in all major browsers. The @property helps ensure CSS custom properties are properly used with type definitions. I'm calling this Typestyles.

Fit-to-Width Text: A New Technique

posted by Roma Komarov on July 19, 2024.

</hgroup>

Roma's experiments with CSS are as impressive to read about as they are to experience. Roma has solved the longstanding issues of native, CSS only, fit-to-width text.

TIL: `crypto.randomUUID`

posted by Jaime Jones on July 19, 2024.

</hgroup>

Today I learned that Jaime is sharing what she learns! In this first post of her series, Jaime descibes how to generate a unique identifier with vanilla JavaScript.

CSS Grid Areas

posted by Ahmad Shadeed on July 19, 2024.

</hgroup>

Ahmad is back with a rad interactive article describing how to use CSS Grid Areas. Thank you, Ahmad for these great articles, I find myself using these are resources often.

Day 107: the light-dark() color function

posted by Manuel Matuzović on July 19, 2024.

</hgroup>

For the 107th day of Manuel's 100 day challenge, he's explaining the light-dark() feature. I am super excited to use this in a project! Also, Manuel just released a book, Web Accessibility Cookbook, check it out!

Styling Tables the Modern CSS Way

posted by Michelle Barker on July 18, 2024.

</hgroup>

Over on Piccalilli, Michelle wrote an awesome walkthrough for styling tables using modern techniques. I appreciate the attention to detail here, specifically text alignment in cells.

Dungeons & Dragons taught me how to write alt text

posted by Eric W. Bailey on July 16, 2024.

</hgroup>

What a brilliant connection, writing descriptive alt text from lessons learned playing pen-and-paper roleplaying games. Eric explains how to provide context, tone, and mood when describing your images.

Getting stuck: all the ways position:sticky can fail

posted by Polypane on July 14, 2024.

</hgroup>

postion: sticky is one of those CSS properties that I think I understand, but need a refresher each time I attempt to use it. Thankfully, Kilian provided this awesome primer on the ways you might get stuck with sticky.

Special Shout Out

I met this amazing lady on the plane ride home, Nadina.

Nadina is on a mission to save Hawaiian forests, but the way she goes about it is great, as she's an ally to some great causes.

Nadina makes cremes and lotions distributed in handmade ceramic jars. Check out her site, Nadina's Cremes, to order some!

A Book Apart Books

Tue, 23 Jul 2024 12:00:00 GMT

I have mentioned that I am not much of a book-reader before, and while I am trying to improve that, this means I was never much of a book-buyer either.

Earlier this year, I did manage to snag 20 of the A Book Apart books through their incredible "20 for $100" deal they were running.

Unfortunately, A Book Apart is no longer selling books and I never managed to get a complete collection.

Fortunately, the authors of each book seem to be in control of what happens to their books, meaning their books are potentially still available in some way.

Still Available A Book Apart Books

Here is a list of the books I've found so far:

Books

#1 HTML5 For Web Designers by Jeremy Keith (Free online)
#3 The Elements of Content Strategy by Erin Kissane (Free online)
#4 Responsive Web Design by Ethan Marcotte (Free online)
#6 Mobile First by Luke Wroblewski (Free online)
#7 Design is a Job by Mike Monteiro (For purchase)
#9 Just Enough Research by Erika Hall (For purchase)
#11 On Web Typography by Jason Santa Maria (Free online)
#12 You're My Favorite Client by Mike Monteiro (Free Online)
#15 Responsive Design: Patterns & Principles by Ethan Marcotte (Free online)
#16 Going Responsive by Karen McGrane (Free online)
#17 Git for Humans by David Demaree (For purchase)
#18 Design for Real Life by Eric Meyer and Sara Wachter-Boettcher (For purchase)
#19 Practical SVG by Chris Coyier (Free online)
#20 JavaScript for Web Designers by Mat Marquis (Free online)
#21 Demystifying Public Speaking by Lara Callender Hogan (For purchase)
#23 Accessibility for Everyone by Laura Kalbag (For purchase)
#25 Conversational Design by Erika Hall (For purchase/free)
#27 Flexible Typesetting by Tim Brown (Free online)
#29 Everyday Information Architecture by Lisa Maria Marquis (For purchase)
#30 Resilient Management by Lara Hogan (For purchase)
#33 Design for Cognitive Bias by David Dylan Thomas (For purchase)
#35 Better Onboarding by Krystal Higgins (For purchase)
#41 Leading Content Design by Rachel McConnell (For purchase)
#42 Inclusive Design Communities by Sameera Kapila (For purchase)
#45 Wireframing for Everyone by Michael Angeles, Leon Barnard, and Billy Carlson (For purchase)
#47 You Deserve a Tech Union by Ethan Marcotte (For purchase)
#48 Surviving Change at Work by Vanessa Gennarelli (For purchase)

Briefs

#12 Cultivating Content Design by Beth Dunn (Free online)

Special Note

I've purposefully avoided linking to Amazon, many of these books are available there. I have only linked to pages that either provide the free online version, or have multiple purchase options other than A Book Apart (since they are no longer selling them, duh).

Let me know if I have missed any, I'll keep updating this list as I find more! I wanna see these authors continue to get paid for their work!

Special Thanks

Shout out to Eric Eggert, Jason Cosper, Max Fenton, and Lisa Maria Marquis for contributing to the list!
Alan Dalton is putting together a list of the books as well, check it out!

The Bumpkin's Guide to Surviving Los Angeles

Sun, 21 Jul 2024 12:00:00 GMT

If I were left alone, I probably wouldn't do much of anything (except coding). My best friend and partner, Vickie, prompts me to do more - challenging me to break out of my comfort zone. Many of the amazing things I have done in the past few years was due to her support, strength, and love.

Traveling is one of those things that, without her support, I wouldn't do. I am an anxious homebody and airport security is one of my worst fears. Once I'm on the plane, I am fine, just the lead up is the worst.

Now, if you are a follower of my blog, you may think:

"Ryan, didn't you go to London, New Orleans, and Amsterdam in the same year?"

Why yes, yes I did, and I was terrified to travel those times too. London marked my first trip on a plane ever in my 30 some years of existence.

Flying to the City of Angels

This flight was an interesting one. First off, Pete Buttigieg was a fellow passenger. I wanted to shake his hand, but Vickie advised me not to bother him.

I hoped with the U.S. Secretary of Transportation on board, it would be a smooth flight, however mother nature had other plans. A rather nasty storm belt came through right as we were boarding the flight, we stayed seated in the plane, on the airport tarmac for roughly two hours before taking off.

The flight itself was quite eventful as well. You know how in movies, when a passenger is having a medical emergency, the attendants will ask if anyone is a doctor? That played out right in front of us.

A man in the row ahead passed out mid-conversation with an attendant and she quickly alerted everyone on board. Turns out, the lady in the aisle opposite him was, infact, a doctor and sprung to action immediately. It was both scary seeing the man pass out and awesome seeing the doctor take charge of the situation.

What was supposed to be a 5-hour flight turned into an almost 9-hour flight as we were once again delayed on the tarmac after arriving at Los Angeles International Airport. An Alaskan flight broke down at the gate we were to depart at, then the tug vehicle dispatched to move the plane also broke down.

I almost gave up hope of getting off that plane, but as we stepped off, it really sank in, we finally made it to Los Angeles.

Fear and Anxiety in Los Angeles

I am from a very small town in Pennsylvania, think two streets with an estimated population of about 200 people (according to Wikipedia). It's a small farm town that contrasts heavily against Los Angeles's 30+ arterial thoroughfares, commercial roads, alleyways and population of 3.8 million people.

The trip itself is to celebrate my wife's birthday, we got to meet her good friend from New Zealand and together they are going to see their favorite band in concert. I'm so happy we were able to accomplish this trip as it seems to be one of those once-in-a-lifetime, stars-aligned, kill-three-birds-with-one-stone type situations.

I, on the otherhand, feel out of my depth here. Ashamedly, I am quite afraid of many places in the United States. This country is a powder-keg that could go off at anytime, traveling to Europe feels much safer in comparison.

On top of that, I've heard horror stories about Los Angeles my whole life:

Rude people
Worst traffic imaginable
High crime rates
Egregious homelessness

Though there is definite truth to these claims, I am finding the experience not as bad as expected.

Cool Places to Visit

We decided to stay in Santa Monica for our trip, it's a rather decent part of L.A. county, with easy access to Santa Monica Pier and beach.

Santa Monica Pier

The pier is really nice, especially if you head down early in the morning.

Shops on the pier were just opening up and we managed to get amazing breakfast sandwiches from Pier Burger and iced coffees from the Coffee Bean & Tea Leaf shop.

After that we decided to drive north on California State Route 1, also known as the Pacific Coast Highway, and see some sights. We didn't plan for anywhere in particular, just headed towards Malibu. The drive is beautiful and I would love to have kept going, but we turned back around as our next stop was Disneyland.

Disneyland

I'm not particularly a fan of Disney, with one massive exception: Star Wars. And, even though this was primarily a trip for the wife's birthday, she managed to surprise me with tickets to Disneyland and a reservation to build my own Lightsaber.

After entering the park, the main street is beautiful, though quite crowded. Tons of souvenir shops lining the path until you reach the Walt Disney statue. We were headed for Galaxy's Edge, the Star Wars portion of the theme park.

Everything about Galaxy's Edge is highly detailed to match the look and feel of a location found in the Star Wars universe. It was rad and I got to see the Millenium Falcon in-person.

Only a couple of complaints here:

Signage in Disneyland is awful. I feel like the scheme is that they want you download their app to navigate the park, but I didn't want to do that. There are paper maps, but figuring out where things are is still difficult.
Asking cast members questions really takes the magic out the place. I've never built a lightsaber before, not sure how many people have, so I was a little confused on where to start - asking questions was met with annoyed answers.

Nonetheless, the interactive experience of building a Lightsaber is awesome. The experience starts at Savi's Workshop, a small building where cast members perform, guiding you through the build process. You get to select parts and pieces, even choosing a Kyber Crystal to give color to the Lightsaber's blade. I built a very Sith-inspired Lightsaber, with a red blade.

Griffith Park Observatory

One of the places I am familiar with and was hoping to visit was the Observatory at Griffith Park.

As we climbed the mountain where the Observatory resides, my excitement grew, but was quickly snuffed out due to the parking situation up there. I suppose this is my own fault for not researching ahead, but it turns out the parking seems to be paid street parking, which had cars lined up from the top of the mountain, the whole way down to the bottom.

We saw the Observatory in all it's glory from a neighboring ridge, but we were facing quite a hike to see it in-person, so we kept on driving.

La Brea Tarpits

Another spot I heard about, and luckily quite accessible, is the La Brea Tarpits. These are active pits of liquid asphalt, the crudest of crude oils, that has been capturing animals since the Ice Age. This site is an active paleontological research site, where researchers are working to uncover many fossils in the tar. One room contained 3.5 million fossil specimens.

When we reached the first tar pit, it really just looked like a pond of water. I can totally understand how animals found themselves caught in the pits, mistaking it for a watering hole. The smell is the first clue though, it does not smell great.

The museum at the Tarpits was interesting and informative. Full skeletal remains of Mastodons, giant sloths, sabre-toothed tigers, condors, even Dire Wolves (which I didn't know were a real thing, I was only aware of them from Game of Thrones) and so much more.

The Man Behind Winkie's

This was very much a me thing and I'm not sure I'd recommend it to others, unless you happen to be a fan of director David Lynch's 2001 film, Mulholland Drive.

In the movie, the character of Dan (portrayed by Patrick Fischler) meets his psychiatrist at a restaurant called Winkie's. Dan describes a dream he had of being in the diner and a terrible vision of a man behind Winkie's.

As his psychiatrist pays for their meal, Dan realizes the situation is playing out exactly as it did in his dream. The two men take a walk behind the restaurant to see if there actually is a man back there and... I won't spoil the reveal.

The real-life filming location was a Caesar's restaurant, on West El Segundo Boulevard, and I was determined to see for myself if there really was a man behind Winkie's.

The area is a bit sketchy, but honestly most of L.A. seems sketchy.

The Caeser's restaurant is still standing, though time has taken it's toll. It no longer operates as a restaurant as it's boarded up, but still recognizable from the film. The steps on the corner of the parking lot lead to the back of the building, where the man behind Winkie's should be, and to my relief, was vacant this time.

Tips to Survive L.A.

I'm not an expert on Los Angeles, traveling, or... anything really, so take the following advice lightly as your experience may vary. Here are some things I have learned:

Traffic is fine, rent a car

If you are going to LA, I suggest renting a car for your trip if you can. Of course some spots might have heavier traffic at times, but driving is maybe the easiest way to get around in my opinion.

Public transportation, ride-sharing apps, and electric scooters are totally an option, so don't worry if you don't drive. Prices for Uber and Lyft seem a bit steeper here, though.

If you do decide to drive, you will need to get good at driving around stuff. Street-parked cars, pedestrians, bus stops, and many other random things jump in front of your car at anytime, so stay alert.

If you are reading this and happen to be a resident of Los Angeles county: please use your turn signals, they are the thing that lets other dtivers know you are about to cut them off.

The one caveat to renting a car is parking. Always check if your destination has parking, either on-site or a nearby lot. We have only paid for parking twice so far, which sucks, but a surprising amount of places have free lots. Also, parking spots are SUPER tight here, so consider a smaller rental vehicle. We got a hybrid Toyota with awesome gas-mileage.

Exploring the area by car is actually super fun. We have mostly opt to "avoid highways" when navigating to a location using Google Maps, which gives us a much better feel for the various cities that make up Los Angeles county. There are a lot of really beautiful neighborhoods here, with lush greenery and tall palm trees. One of our best experiences was driving up the Pacific Coast Highway towards Malibu.

If you ever played Grand Theft Auto V, you will recognize a lot of the city.

Research Hotels

If you plan on staying in a hotel, definitely do some research on the area surrounding the hotel. You may not end up with the cheapest rates, but it may be worthwile for your personal safety and security.

Along with making sure a hotel is safe, make sure there is on-site parking in some way.

We have stayed in two hotels on our trip:

Santa Monica Hotel - The first hotel was right next to the Pier, so we had easy access to the beach. Parking was tight and you could hear through the walls, but it was mostly nice.
FOUND Hotel - The second hotel is great and if I were to come back, I would probably opt to stay here again. The one downside is the parking situation, they have a limited parking garage under the building, first come, first serve style. There is also on-street parking and a garage, however it seemed to be a twenty-minute walk away.

We were originally going to stay in a different hotel more towards downtown L.A., however upon looking at reviews, the place seemed rather unsavory.

Ralphs vs. Whole Foods

The two primary grocery stores in Los Angeles are Ralphs and Whole Foods. I'm not about to compare prices, almost certainly Whole Foods will be more expensive, but Ralphs is an experience all on it's own.

I only went to Whole Foods once so far, it reminded me of Wegman's, which is what I'm used to back home. The store was nice and clean, easy to get in and out.

Ralphs on the other hand is wild. There are lots of these stores throughout the area, and are generally open later than Whole Foods - so I managed to go more than once.

Each Ralphs store I went in had similar setups of the entrance being blocked. This requires you enter through the exit and down one of the cashier aisles. It feels like you are breaking some unwritten law.

Don't go to Olive Garden

This is just life advice, really, it is not a good restaurant - however, everything is made better with friends.

It turns out there aren't any Olive Garden restaurants in New Zealand (which is for the best), but the reputation of it being "good" reached our kiwi friends who wanted to give it a try.

Food aside, it was quite fun to hang out and hear other's experiences visiting the country. Also, our waitress was wonderful!

Fast Food is everywhere

L.A. is home to every fast food chain available. You have the normal ones: McDonald's, Burger King, Taco Bell, etc... but there are so many more.

Region specific chains such as In-n-Out, Jack in the Box, El Pollo Loco are everywhere, but the surprising part is how many small business restaurants compete against these larger chains. Maybe my definition of "fast food" is skewed, I consider restaurants with a drive-thru lane to be fast food.

I tried In-n-out, Jack in the Box, and El Pollo Loco.

In-n-out, I ordered their #1 combo - a double cheeseburger with fries. The burger wasn't much to write home about, but the fries are great! They remind me of boardwalk fries.
Jack in the Box currently has a spicy chicken tenders meal promoting the new Deadpool movie. These were pretty decent, though I couldn't quite eat all of them. Jack's curly fries were decent, but were cold by the time I got back to my hotel.
El Pollo Loco was honestly great. It's pretty similar to KFC, but they give you tortillas for some reason, and I really liked their hot sauce. Now, have I been confusing this chain for the fictitious chain, "Los Pollos Hermanos" managed by Gustavo Fring from Vince Gilligan's Breaking Bad? Absolutely.

Taco Trucks

Another option for food, and one of my favorite things about the trip, is all the food trucks.

In Pennsylvania, food trucks aren't the same thing as what happens here. PA Food Trucks are kind of like mobile catering services, where you might invite them to an event or workplace for folks to enjoy.

In Los Angeles, food trucks are conveniently located on many streets. There are a variety of different cuisines available, but Mexican seems to be the most popular as Taco Trucks are most places that we explored.

We ordered from a Taco Truck right outside our hotel one night, it was fantastic!

Returning Home

Today is my last day here in Los Angeles, and while it has been a super interesting trip, I miss my pets a lot. I'll be super happy to see them when we get back to PA.

I'll be catching a flight back to Baltimore early tomorrow morning, hoping for a much smoother flight!

What's cool about Coolify?

Sun, 14 Jul 2024 12:00:00 GMT

I haven't thought about hosting in a long time, as my default solution is Netlify. I've been happily using their services for a few years now, but lately have been wondering about alternatives.

In more recent years I've noticed Netlify become more enterprise, no more "JAMstack", and the layoffs... I feel for the folks affected. From a customer standpoint, I don't see them doing the fun things they used to. Looking at the landscape of similarly functioning hosting providers, it's not much better. In fact, I'd still argue Netlify is the best option between other popular solutions.

Vercel is Netlify's largest competition and if you happen to be a NextJS developer, their vendor-provided-ecosystem certainly has everything you need to work efficiently there. Of course, being a NextJS developer is not a requirement (I am not one), but their products are understandably tailored towards that experience.

All that to say, I haven't really thought about it in a while - until recently, when I came across Coolify on a Mastodon post by Mark Brady.

Wtf is Coolify?

That was my first question when I read the post. It turns out it is a "Netlify-in-a-box" tool. Many of the neat features Netlify makes so easy, all built into one application!

Administrator dashboard to manage projects
Per project deployment configurations
Connects to git repositories for pull request deployments
Automatic SSL certification management though Let's Encrypt
and a bunch more stuff!

Why it is so interesting to me is that it's open-source with a self-hosted version available. Actually, it seems like the self-hosted version is the preferred approach.

I haven't managed my own servers in a while. Before making the career switch to development, I worked as a network engineer who helped manage many different servers for many different things.

When I started coding, I managed a few virtual private servers (VPS) for hosting WordPress and other PHP applications. Once JAMstack became popular though, I haven't a need to concern myself with this part of it, so do I still remember even how to do that?

Well, yeah I do, I worked with this stuff for many years - your experience may vary though, but I promise it's not that difficult. Let me show you!

Setting up a Server

First thing, we need a server. I went with a Digital Ocean droplet. I like Digital Ocean compared to things like Amazon Web Services (AWS), as I find AWS fairly confusing compared to Digital Ocean's user-friendly approach. Researching providers is always a good idea, some tools may provide better pricing options than others as well.

To create a droplet on Digital Ocean, click the Create button in the top navigation, then select Droplet:

On the next page, you will get to select server configuration options. On Coolify's documentation site, you can see the requirements for a Coolify instance:

Debian, RedHat, Arch, Suse, or Raspberry Pi's Raspbian flavors of Linux are supported
AMD64 or ARM64 architectures
Recommended: 2 CPUs, 2GB memory, 30+ GB of storage for Docker images

Now if the words in that list did not mean anything to you, then here is exactly what I selected on the droplet create form:

Region: select the area closest to you, though it shouldn't matter which region you select.
Datacenter: select the datacenter closest to you
Choose an Image: Ubuntu 24.04 (LTS) x64
Droplet Type: Basic
CPU Options: Regular - Disk Type SSD
Server Option: $18/mo option which includes
- 2GB RAM
- 2 CPUs
- 60GB SSD Disk
- 3TB transfer
Backups are optional, if you are launching a production site I'd recommend enabling backups or finding an alternative strategy.
Choose Authentication Method: Password (Enter a strong password, this will be your root user password)
Provide a hostname to identify your server, or just leave the randomly generated name

All other choices are optional, but feel free to customize your server for your needs.

Once all choices have been made, click Create Droplet. You can easily adjust the droplets settings later, if you find your choices don't seem to have enough resources.

After Digital Ocean finishes launching your new server, you can connect to it via the browser by clicking the Console button. You will be presented with the Linux terminal command line interface, this is where we will run commands to set up Coolify!

Installing Coolify

I cannot express how simple this part is, the folks at coolLabs Technologies should be proud of themselves for this one.

On the Linux command line, we can run this command:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

This install script will setup everything we need for Coolify, give it some time, make a coffee - although it is rather fast to complete.

You will know it is finished when you are returned to the command line prompt. I did not encounter any errors running this command, though if you happen to experience issues, double check permissions before running the command again.

You should now be able to browse to the Coolify instance by entering your droplet's public IP address, on port 8000, into your browser.

Setting up a Project

The first time you access the Coolify instance, it will ask you to setup an account. Keep in mind this is not an account through some external service, this is an account to manage the Coolify administrator dashboard. This account is local to your server. I say this as I'm sure some folks may be cautious setting up another account for something.

Once you are in, Coolify will provide a small tutorial to help acclimate you to the dashboard. I followed through these prompts to understand how to use the interface and found it quite helpful.

One thing that sort of confused me was how I set up a project, then inside I needed to create another object, a resource, which is where my application would reside. I didn't quite grasp this initially as I expected a project to equal an application. This is actually cooler as I can independently deploy related parts of an application. There is a few scenarios that came to mind.

One example might be to create various environments for an application. A project might contain resources like:

Production server
Staging Server
Development Server

Alternatively, you could house a full stack application with resources such as:

Frontend interface, like a reactive framework or single page application.
Backend to deliver application endpoints
Database to store data

When setting up a resource, there are a few approaches. I selected the option to deploy from a private repository on GitHub. I wanted to test Coolify out by deploying my personal website through the application.

During this step, I had expected to be able to select the repo from a list of my repositories in order to deploy the application. I was interrupted in this process as Coolify has to set up your GitHub account as a source. This seemed to make sense, so I followed the prompts to connect my GitHub account to the Coolify instance.

After enabling GitHub as a source, I was then able to select my personal website as a project resource. I used all default options and watched in anticipation as it attempted it's deployment.

It failed spectacularly. I don't blame it, I'm not sure why I expected anything different. There are a couple of things to figure out.

For Build Pack, I used the default selection of Nixpacks which is a tool used to build an application as a container (such as a Docker image).

Down in the Build section, I noticed where I could add commands for Install, Build, and Start.

I have been using pnpm lately, so for the installation command, I set it as pnpm install. Similarly for the build command: pnpm build. For the Start command, I did not quite know what to say.

My website is powered by Astro and as I'm currently using Netlify, the lovely Netlify adapter provided by Astro sort of handles that for me. I realized this was one of the first things I would need to sort out to properly deploy my website, but as I was just testing things, I added pnpm start as the start command.

I also ensured that the Base Directory and Publish Directory were both set accordingly:

Base Directory: /
Pubslish Directory: /dist

One more thing, under the Network heading, you need to set the proper port to expose where your application is running. For Astro, they cheekingly use the port of :4321 to signify the takeoff of a new website. With the port set, I could now attempt a re-deploy.

This time I watched in amazement as it actually kind of worked. My website infact did deploy, and as expected it was in development mode. I was running the Astro dev server on my Coolify instance and that felt like progress!

Converting My Website

So, first thing first - I created a new branch of my website's repository, there are a few things I'm going to need to change that I don't necessarily want to affect my actual website. Coolify lets you deploy from specified branches within a selected repository, so I can safely perform some conversions without harming my Netlify hosted site.

Next, I removed the Astro Netlify adapter using pnpm:

pnpm uninstall @astrojs/netlify

Inside astro.config.mjs, I needed to remove references to the Netlify adapter package, so I deleted the line importing it and removed the adapter: netlify() key/value pair from my defineConfig object.

If I were to generate my website as a 100% static website, I wouldn't necessarily need to worry about this part, however I like to take advantage of Astro's server side rendering functionality, but I wasn't clear on how to make that happen without Netlify. The @astrojs/netlify adapter kind of just does things for me without me worrying about that. Astro provides a much more generic adapter integration to run itself as a plain Node application, which also supports server side rendering.

I installed the @astrojs/node adapter by running:

pnpm astro add node

This prompted me to add the adapter to my astro.config.mjs file, which I agreed to.

This still doesn't quite answer what that start command should be, but it has gotten us closer. Checking out the Astro docs site for the Node adapter, you can run the application in standalone mode or as middleware, like if you needed to use Express or Fastify to do some things ahead of rendering a page.

I messed around with the middleware option for a moment, though I could not successully figure it out/ I wasn't too concerned as it wasn't necessary for this particular project, so I switched back to standalone.

Now, we finally have our answer on how to start the site. With the Node adapter in place, running the build command will create the /dist folder containing client and server directories. Inside the server path, is the entry.mjs file which can be used to start the server.

Now to launch the production built version of the website, with server side rendering, I can run:

node ./dist/server/client.js`

And it works!

Two things seem broken though: A missing environment variable and the contact form no longer processes submissions.

Over on my /now page, I have an Astro component that connects to the LastFM API and pulls in my most recently listened to track. On Netlify, I store my API key as an environment variable. And on Coolify, I can do the same thing!

There is an Environment Variables option in the project configuration, I added the same key here matching my Netlify deployment:

A redeploy of the site corrects the bug present on the /now page.

The form processing bit is where the problem of vendor lock-in comes in. I use Netlify's forms feature to process form submissions. I have a few ideas in mind on how to handle this, but for the time being I do not need my test site to submit forms.

Other than the forms, my site was working as intended. Now the only odd thing was the domain. I had been using the randomly generated domain name that Coolify provided to the instance, which looked like this: https://ryan-trimble.174.138.64.40.sslip.io/

This URL address consisted of:

The project name
My droplet's IP addres
and sslip.io - which I hadn't heard of

Turns out, sslip.io is a simple domain name service that returns the site of whatever the embedded IP address is. Now, how would that make it different from just typing in the IP address of the droplet you may be wondering, well that is where the project name in the URL comes in as a subdomain. Coolify is already managing the routing for my server, so I just needed to add a real domain.

Managing Domains

If you, like me, previously used Google as a domain name registrar, you might have to log into Squarespace now to manage your domains.

I own both ryantrimble.com and ryantrimble.dev domains. I like to use the .dev domain to do weird experiments (like the topic of this post), but usually end up forwarding it back to the .com address. So for my purposes, I'm going to use my .dev domain to point to my Digital Ocean droplet, the Coolify instance. These instructions will work for new domains as well, but for existing domains I have a bit of a warning:

We will need to tell our domain name registrar where to point the domain. In this case, I will be telling Squarespace that I want Digital Ocean to be managing the domain name records by using their nameservers. If your existing domain has a more complicated DNS record configuration, I would recommend an alternate approach as this will break those records.

In Squarespace, I clicked Domains, chose the domain I wanted to manage, then DNS in the side navigation. The sidebar navigation expands and provides more options, I selected Domain Nameservers.

Enable custom nameservers, here we will need to enter Digital Ocean's nameserver addresses, provided in their documentation. Their nameservers are:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

After these nameservers are set, we can switch over to the Digital Ocean side to add the domain to our droplet. In the Digital Ocean administration panel, click Networking in the left navigation, then choose the Domains tab within the page.

In the Add a domain input, I entered my domain and my droplet was preselected, as that was my only droplet. Click Add Domain

By default, I saw three DNS records already in place, all NS records directed from the Digital Ocean nameservers.

I wanted my Coolify instance to be accessible from a subdomain, so I added an A record for coolify.ryantrimble.dev that points to my instance. This worked nearly instantly, I was sort of surprised as domain name propagation sometimes takes a while. Browsing to: https://coolify.ryantrimble.dev/ brought me right to the Coolify dashboard.

I made a mistake here, only to realize later (maybe to my benefit) that I did not actually set a DNS record for the plain ryantrimble.dev domain. Had I done this at this point, I believe it would have worked exactly the same as the subdomain I set up first.

Instead, I navigated my way to my project's settings and attempted to add it as the domain there. Navigating to ryantrimble.dev failed to return anything at all and this is when I realized the error.

Back on the Digital Ocean domain management page, I added the naked domain A record using @:

Since I already set the domain within the project on Coolify, things started working almost right away. I think there was a caching issue on my laptop, as it did not load immediately there, but testing on my mobile device yielded my website in all it's glory.

You can try it out yourself by browsing to ryantrimble.dev - you will see my website exactly as it is here (though maybe without this particular post). One thing to note is that I still haven't fixed the forms, so attempting to submit a contact request from that site will fail.

Setting up a Firewall

A very brief note about securing your droplet. If you are using Digital Ocean, they seem to have made Firewall management ridiculously easier than the last time I messed around with these things.

Browse to Networking, then click the Create Firewall button. By default it'll have a very locked down configuration, in fact you won't even be able to browse to your site now if you try.

Within the Inbound Rules section, there should be a pre-defined rule for SSH (port 22). This is necessary for you to be able to actually remotely control your droplet, so do not delete this. Instead, we want to add a couple of rules to enable visitors to view our websites.

I added HTTP and HTTPS (ports 80 and 443) to the Firewall, which now allowed traffic into my server, and the website became accessible again.

Another rule I added, which is totally up to you, is ICMP as that refers to the common networking protocol of ping. If I were to see my website as non-responsive, I can ping ryantrimble.dev in my terminal to see if I get any response, helping debug if it is a browser, network, or connection related issue.

You may need to adjust the firewall for your use-case, but keeping it slim and locked down is a good step towards server security.

My Plan

At this moment, I'm still hosting my website on Netlify. I'm super impressed with Coolify and I think I'm going to make the plunge. I'll obviously need to figure out an alternative to Netlify forms, but that should not be difficult.

Another consideration now is storage space. I was able to host as many websites as I wanted on Netlify, however there is a hard storage limit on my droplet, unless I want to pay more.

I most likely will keep the few client sites I run on Netlify for the time being, or possibly set up a separate Coolify instance for them. I don't want my personal website / experiments affecting my client's sites.

Let me know if you have been enjoying Coolify or are interested to find out more information about it!

Weekly Roundup #12

Sat, 13 Jul 2024 12:00:00 GMT

What a week! Next week is looking pretty stacked as well, as I'm headed off to sunny Los Angeles for a few days. Let me know if you have any suggestions for things to check out, I'm currently planning to find out if there really is a man behind Winkies.

Interesting Links

A custom element smoke test

posted by Nathan Knowler on July 11, 2024.

</hgroup>

Interesting considerations for the "HTML Web Components" conversation, Nathan demonstrates some pitfalls developers may fall into while performing light DOM operations inside web components.

Zoom, zoom, and zoom

posted by Miriam Suzanne on July 9, 2024.

</hgroup>

Mia explains the three types of zoom an author of CSS might contend with, don't tell Mia about my secret fourth zoom (I get really close to my monitor).

Getting to the (shadow)root of Vue 3 custom elements

posted by Jaime Jones on July 6, 2024.

</hgroup>

In case you missed it, last weekend I helped my friend and co-worker, Jaime, launch her new website! This was the first post in her new digs.

Furiosa and the Disability Wasteland

posted by Elsa Sjunneson on June 12, 2024

shared by Stephanie Walter on July 7, 2024.

</hgroup>

Stef Walter shared this awesome piece discussing the parallels of George Miller's film Furiosa to that of folks with disabilities. Consider subscribing to Stef's newsletter and go watch Furiosa, it's rad!

Accessibility Resources

Some fine folks in the Frontend Horse community shared several great resources to dig into accessibility.

Thanks for sharing these great links, Mayank and Sara Joy!

New Website: Jaime Jones

Sat, 06 Jul 2024 12:00:00 GMT

Over the past few weekends, I have been putting together a redesign for my friend Jaime's blog! I'm not like done done with it, there are a few rough edges to smooth out yet - also, I have a couple of fun surprises that I know she will appreciate. All that to say, the website is now live! (with a sick domain name, might I add.)

I have been focusing a lot on building design systems lately, so it was super fun to build off of that knowledge in a bit of a scaled back way. I used lots of modern CSS techniques with the design and I'm quite happy with how it turned out.

For the framework, I used Astro. I am an Astro fanboy, however if you know Jaime, you know know she is big fan of Vue. I think Astro is a great choice for her as she can write posts and experiment with the Vue at the same time.

Over the past few years, Jaime has helped me out so much at work and this was a chance to pay her back!

Weekly Roundup #11

Sat, 06 Jul 2024 12:00:00 GMT

As someone who claims to be an advocate for accessibility, I want to take a moment to shout out Sarah Soueidan's Practical Accessibility course, which I began this week.

I purchased the course when Sarah initially put it on sale, though it was not quite complete yet, so I held off learning until now.

I am maybe like 10% of the way through and I'm learning lots and lots already!

Interesting Links

An alarmingly concise and very hinged summary of what it was like to build this site from scratch

posted by Keenan on July 3, 2024.

</hgroup>

Building your site from scratch is no easy task, but it is one of the best ways to learn! Keenan has made the jump from Squarespace to 11ty and provides a fun and informative write up on that experience.

Forget "show don't tell". Engage, don't show!

posted by Lea Verou on July 3, 2024.

</hgroup>

Lea proposes an alternative to the old saying of "show, don't tell" by explaining how to engage and motivate an audience - whether that be through a blog post, conference talk, or API documentation!

The 3 Types of CSS Utility Classes

posted by James Kerr on July 1, 2024.

</hgroup>

James provides a summary of what he is considering as the three types of utility classes. I tend to think utility classes definitely need more organization, so I'm liking what James is suggesting here.

Notes on implementing dark mode

posted by Brandur on May 23, 2024.

</hgroup>

Great write up by Brandur on how they implemented light, dark, and automatic color-schemes to their blog, including several great tips along the way.

Accessible SVG Forms

posted by Jake Robins on May 13, 2024.

</hgroup>

Came across this via Piccalilli, but it's such a great example of seeing an idea all the way through. Brilliant breakdown of how to implement a neat, SVG map-based user interface while addressing accessibility concerns.

Playing with state

posted by Sarah Higley on November 4, 2019.

</hgroup>

This was shared by Ben over on Mastodon, while explaining how aria-pressed is used on their site. This is an interesting approach to managing state with semantic controls.

Weekly Roundup #10

Sat, 29 Jun 2024 12:00:00 GMT

Interesting Links

Transitioning to Auto Height

posted by Geoff Graham on CSS-Tricks on June 28, 2024.

</hgroup>

Have you all heard of this new resource out there called CSS-Tricks?

This Geoff Graham fellow seems to know what he's talking about too, maybe he should teach a course.

We're so back.

Burned by My Own Hot Take

posted by Tyler Sticka on June 27, 2024.

</hgroup>

Tyler shares thoughtful retrospective on his popular article Seriously, Don't Use Icon Fonts. This influential post certainly helped me understand the pitfalls of icon fonts and how easy solutions aren't always the best. Thank you for sharing your knowledge with us Tyler, apreciate ya!

Figma SDS

released by Figma.

</hgroup>

Simple Design System is a new tool released by Figma to help folks get a jumpstart on build fully integrated design system. This repo demonstrates how Figma design and React can work well together.

In detail: 1.4.11 Non-Text Contrast (User Interface Components)

posted by Eric Eggert on June 23, 2024.

</hgroup>

Excellent article by Eric and great reminder that it's not just text that benefits from high contrast. Eric includes a section questioning whether considerations in the demo is "good design" and delivers a perfect answer.

Flow Charts with CSS Anchor Positioning

posted by Cory Rylan on May 31, 2024.

</hgroup>

Umm, I thought CSS Anchor positioning was for tooltips only, so it's exciting to see it has a second purpose! I've been keeping an eye on this feature, and it's awesome to see possible use-cases for it.

New Challenges

I don't really know how to do things like this, but I wanted to put out into the universe that I'm searching for new opportunities and challenges.

If you read my site, you will get an idea on what I care about:

Web Standards: HTML, CSS, JavaScript, SVG
Best Practices: Accessibility, optimization, responsive design
Creative Design: Web animations, typography, meaningful interaction
Awesome Technology: Site generators, reactive frameworks, bundlers
Knowledgesharing: Blogging and technical writing
Building Stuff: Design systems, websites, web applications

Also, I don't mean to brag, but I've gotten pretty good at compiling lists of awesome links over the past 10 weeks.

If you happen to be reading this and have an open spot on your team, please don't hesitate to reach out, I'd love to find out more!

Weekly Roundup #9

Sat, 22 Jun 2024 12:00:00 GMT

The next part of Better Know a Design System series is actively being written, however it is turning out much longer than expected. I may refactor into smaller posts if I can figure out a sensible way to break it up.

I've been trying, with mild success, to focus myself on more creative endeavors as it usually keeps my mind busy and distracted from other problems. The issue with that (at the moment) is I've got too many ideas cooking in my head.

Next week will be the 10th week in a row for the Weekly Roundups - I'm surprised I have managed to keep going this long without missing a week. I really enjoy doing these, as it gives me time to reflect back on what I have learned and a chance to thank the folks who taught me. I think Ana said it best about these types of things.

Anyway, let's get to the cool stuff!

Interesting Links

Cascading Solar System

posted by Noah Liebman on June 21, 2024.

</hgroup>

Yesterday was the CSS science fair, and Noah brought a rad solar system diaroma. I always thought CSS was out of this world, but Noah has proven it!

The Case for Web Components

posted by David Darnes on June 19, 2024.

</hgroup>

David wrote a book about Web Components! Now I can finally refer to David by saying "David wrote the book on Web Components," and other people will be like, "who are you?"

Against the backdrop

posted by Mayank on June 18, 2024.

</hgroup>

I completely agree with Mayank, working with ::backdrop can be especially annoying when animating <dialog>. Also Mayank, thanks for answering all my questions!

Sticky Header Calendar Grid Prototype

posted by Adam Argyle on June 14, 2024.

</hgroup>

Really neat HTML and CSS powered calendar by Adam that inspired Taylor Beseda to make a more dynamic version. I love seeing the community build off of each others ideas.

Don't Use The Placeholder Attribute

posted by Eric Bailey on June 20, 2018.

</hgroup>

Eric wrote this six years ago, and still stands by it. I remember reading this awesome advice nine years ago, so either Eric is a time traveler or I am bad remembering things (spoiler alert, I am downright awful at remembering things).

Weekly Roundup #8

Sat, 15 Jun 2024 12:00:00 GMT

I have been info-dumping about Design Systems on my blog this week. Sorry. Wait, no I'm not. Well, maybe a little, I don't intend to be spammy.

I talk about design systems a lot at work, as I help develop ours and it's my favorite type of thing to work on - however this topic was seemingly absent from my blog. Shout out to my lead, Kevin, for the recommendation to change that!

I have more things to share about design systems as I continue my series, Better Know a Design System. Thank you to Stephen Colbert for informing about congressional districts all those years ago, and inspiring the title for this blog series.

Oh, and this week I also pushed an update to my /robots.txt file to (hopefully) help prevent AI and LLMs from scraping my website. Checkout the ai.robots.txt repo on GitHub for an up-to-date list of bots to block and instructions for how to block them.

To quote Ethan Marcotte:

i really wish i didn't have to think about any of this — @beep

Interesting Links

We Fucked Up Headings

order fulfilled by Multipage Version Fulfillment Department on June 14, 2024.

</hgroup>

I received my copy of Multipage Version's issue #1, a zine about HTML elements compiled by Mat "Wilto" Marquis. There is some gorgeous art in here from artists in the developer community, I love seeing all the interesting things this community is capable of!

Learn Grid Now, Container Queries Can Wait

posted by Miriam Suzanne on June 13, 2024.

</hgroup>

Mia helps us navigate all these fancy new CSS features coming out and what might be helpful to learn now. I also recommend learning grid as I really 💜 it.

My experience talking at CSS Day 2024

posted by Kevin Powell on June 12, 2024.

</hgroup>

I really enjoyed this write up from Kevin Powell on his experience speaking at CSS Day, very inspiring as someday I, too, hope to hear Kevin speak at CSS Day.

Forgetful Tools

posted by Evan Sheehan on June 11, 2024.

</hgroup>

Interesting and thoughtful write up by Evan, and as a self-described data-hoarder, this definitely gave me some things to consider.

YouTube and Vimeo Web Component

posted by Adrian Roselli on June 10, 2024.

</hgroup>

You love to see useful web components and Adrian shared this great example, with perfect code and no errors whatsoever, for embedding YouTube or Vimeo videos.

Anchor positioning popovers with pseudo elements

posted by Michelle Barker on May 28, 2024.

</hgroup>

If you need just an all around solid example of tooltips using new browser feature popover and CSS anchor positioning, look no further than this example by Michelle.

Better Know a Design System - CSS Frameworks!

Thu, 13 Jun 2024 12:00:00 GMT

Remember when Bootstrap came out and changed the web for bit there?

Well, Bootstrap is a CSS Framework, essentially a distributable stylesheet that contains everything you might need to get your projects up and running quickly.

Third party CSS frameworks like Bootstrap gained so much popularity that websites began looking very similar, leading organizations and developers to differentiate themselves by building their own CSS frameworks as part of their overall design systems.

Arguably, CSS frameworks are design systems for the web - they contain everything the design system outlines, allowing developers to dig right into whatever project they are working on without needing to think much about styling.

A CSS framework may contain one or more of the following parts:

CSS Reset - standardizes default stylings across browsers.
Component Stylings - styles to describe components used within the design system.
Design Tokens - brings in the organization's branding and flair.
Global Styles - styles that have broadest specificity, such as element styles, layouts, spacing, typography.
Utility Classes - small, generally single-use CSS classes that help make minor adjustments to user interfaces.

Scaffolding a Framework

When scaffolding out a CSS framework, think about all the different parts that might need to be included to determine how best to structure the project.

CSS Resets

All major browsers ship with some default styles, though these styles may differ between browsers. This can lead to some unexpected behavior in some browsers, while working fine in others.

CSS resets are a concept to help prevent unwanted style disputes caused by these browser default stylings, resetting the default styles to match consistently across browsers.

Writing your own CSS reset is a viable option, especially if you have very specific needs you are hoping to accomplish. Personally, I like to use a pre-defined CSS reset, though I may make some modifications as necessary.

Three excellent examples of CSS resets:

reset.css - created by Mayank, this is a very modern approach to a CSS reset. I like it as it bakes in light mode / dark mode, uses the CSS where() selector for zero-specificity, and includes a .visually-hidden class, which I generally like to include anyway.
Andy Bell's CSS Reset - Another modern reset by Andy Bell which works well for his projects at Set Studio.
Eric Meyer's CSS Reset - One of the, if not the, original CSS resets.

Components

Component stylings may be found as part of the CSS framework, though an alternative approach may be to contain component stylings within a component library.

I like to include components as part of the CSS framework as it allows for me to be slightly more flexible in how I implement components.

If I don't have a component library available or decide installing the component library may be too much, I can still quickly sketch out the component in HTML, so having the styles included is helpful.

Look forward to a dedicated post on components and building component libraries!

Design Tokens

If you have been following along with the Better Know a Design System series, you'll know we have discussed Design Tokens in-depth already. If you haven't read that post yet, the short summary is:

Design Tokens are variables that contain important values to describe our designs.

Design tokens typically hold brand or theme values which can be used throughout a CSS framework for coloring, spacing, typography, and much more.

Design tokens might also be useful in creating utility classes based on token values, or adding finishing touches onto a component.

Global Styles

The framework's global styles refers to styling that generally has the broadest impact. For these styles, I like to write them as the browser's mentor, not a micromanager.

Types of most useful to include in your global styles might include:

Classless elements - Describes default styles on how common HTML elements look when they have no other classes applied, such as the list elements, block quotes, form inputs, and more.
Layouts - Common layouts used to scaffold websites or applications, may include dynamic layout tools using CSS Flexbox and Grid.
Spacing - Typically a scale providing various, consistent options for applying spacing to elements.
Typography - Touches virtually everything else in the framework, definitely important to configure globally.

As an aside, I use https://utopia.fyi/ to calculate spacing and typographical scales. They have a great Sass package which helps you dynamically generate these scales within your code.

Utilities

Utility classes are generally small, single-use CSS classes that are used to make minor adjustments to a design.

I have a love/hate relationship with utility classes. As a personal preference, I enjoy writing CSS and figuring out ways to make styles more flexible, keeping utility classes to a minimum. That being said, they can come in very handy when necessary.

Too many utility classes can bloat your compiled CSS file, so finding a balance of what is most useful versus what isn't can be difficult. This is why it is important to periodically check in with folks using the design system, determine what is used most and potentially prune some cruft.

One alternate approach to utility classes comes from Andy Bell, who has written about how he utilizes Tailwind as an on-demand utility class generator. While I'm not the biggest fan of Tailwind, this makes a lot of sense to me. Tailwind is very good at being a utility class framework and as it only outputs what you use, you end up with a much cleaner CSS file in the end.

Organizing the Layers

My favorite way to organize CSS is by using CSS Layers.

CSS Layers are a newer feature, so you may need to make sure browser support is available, but they help you organize your code in many different ways.

Let's see how they work:

/* To define a layer, we can use the @layer directive: */

@layer reset;

The above creates a CSS layer named reset - and guess what it might contain? That's right, we can place the contents of our CSS reset within that layer.

We can use multiple layers or even nest layers within other layers! It's layers the whole way down!

The order of precedence when creating layers follows the cascade in general, layers created first will have lower precedence than layers later on in the stylesheet. We can define our layer precedence by declaring all the layers on a single line, such as:

@layer reset, global, utilties, themes;

In this example, reset has the lowest precedence and themes has the highest.

To actually add styles to a layer, you open up the layer similar to how you would define any CSS class:

@layer reset, global, utilities, themes;

@layer reset {
  /* Reset styles go here! */
}

If you happen to be using Sass, you might be writing styles in many different files. One way to implement CSS layers within Sass is by using the meta.load-css function Sass provides to load CSS files directly within layers:

@use 'sass:meta';

@layer reset, global, utilities, themes;

@layer reset {
  @include meta.load-css('path/to/reset.css');
}

@layer global {
  @include meta.load-css('path/to/global.css');
}

@layer utilities {
  @include meta.load-css('path/to/utilities.css');
}

@layer themes {
  @include meta.load-css('path/to/themes.css');
}

The neat bonus that CSS layers provides occurs within browser development tools. When inspecting an element, in the CSS pane you should now be able to view which layer styles originate from, which may help in locating troublesome code or while debugging.

Optimizing and Bundling

Before we talk about using the CSS framework, there are a few things that we can do to optimize the code to provide the lightest bundle possible.

PostCSS is a tool that runs after CSS is compiled, that can host a pipeline of processes to clean up, minify, and more. Similar to Tailwind, there are PostCSS plugins available that can scan your project and deliver a CSS file containing only the styles you used, rather than a heavy file that contains everything.

A newer tool, LightningCSS, also provides some post-build magic to enhance your CSS. LightningCSS reminds me a bit of babel from the JavaScript world, as it can take modern CSS techniques and try to make them more backwards compatible for larger browser support.

To really make everything work together though, we might want to include a bundler tool.

Some bundlers provide everything you need to make your development experience better. Vite is my favorite tool as it is fast, easy to configure, and has support for CSS pre-processors, JavaScript, Typescript, PostCSS, Lightning CSS, and has an excellent developer community. Other options might be Webpack, Gulp, or Parcel.

If configured properly, you can produce a well optimized and organized CSS Framework.

Publishing

Similar to Design Tokens from a previous post, we can publish the CSS Framework to package registries such as npm or an organization's private package registry to make available for developers on your team.

Publishing your CSS framework to a package registry enables developers to easily install the CSS framework into their projects. Content delivery networks unpkg and JSdelivr automatically host packages listed on npm, making dropping the CSS framework into a Codepen easy.

Learn More

Tools Mentioned

Sass
Utopia.fyi - by James Gilyead and Trys Mudford, Clearleft
Tailwind
PostCSS
LightningCSS
Vite
Webpack
Gulp
Parcel

Better Know a Design System - Design Tokens!

Wed, 12 Jun 2024 12:00:00 GMT

In programming, we have the ability to store bits of data as variables, which help us remember certain values, easily make updates, or just happens to contain a constant source of truth. Essentially, this is what Design Tokens are: variables that contain important values to describe our designs - however they aren't just for developers.

Designers and developers can take advantage of design tokens as part of your organization's design system.

Designers work with design tokens in design tools such as Figma, where values stored as tokens can be re-used throughout designs. Tokens can be used within any type of design - print, web, mobile applications, and more. This makes changes and updates to the design easier by simply swapping around tokens.

Developers use design tokens while implementing styles in websites and applications, usually through the use of CSS custom properties, JavaScript variables. Similarly, changes and updates become a lot easier and cascade through designs by modifying tokens.

Design Tokens might hold things related to the organization's branding or style choices based upon shared design principles. Things like colors, fonts, spacing, or whatever else needed to pass along uniformity across projects. Think of design tokens as a single source of truth that can be made available in a variety of formats.

Types of tokens

Tokens can be used in a variety of different ways. Some might be used to store values that need to be available globally, or tokens specific to certain sections, or tokens based on the specific feature being created.

Global tokens

Generic tokens that can be used anywhere within a design. Things like colors, fonts make for great global tokens.

--color-red
--color-orange
--color-yellow

Semantic tokens

Tokens that might be more related to how something works may be considered semantic tokens, named for what the token is used for as well as possible states.

--link-default
--link-hover
--link-focus

Component tokens

Components may have tokens only used within tokens. Usually prefixed with the component it belongs to, these tokens help describe how a component might look, feel, and possibly behave.

--accordion-padding-block
--modal-backdrop-color

Naming design tokens

You know the old adage:

"Naming things is the easiest part of computer science."

That is a joke, of course - while naming things may technically be a simple task, it can be difficult to come up with a meaningful convention to describe tokens. I want to say "keep it simple" but my idea of simple may be different than your idea of simple.

If you are working on a team, it is important to come together and discuss the naming convention for tokens. This helps clear up confusion and hopefully helps set a pattern for how all your tokens can be named.

If you are working by yourself, be clear and concise with how you name your tokens. Document the naming conventions you use to make sure you understand it if you need to come back to it later.

What works for me

I try to limit the number of global design tokens necessary, it is easy for the number of tokens to balloon to something unwieldy. Tokens like colors, fonts, and spacing, the things generally considered globally available, I like to put what they are right up front - literally, as prefixes!

Colors

/* Colors typically begin with `color` */
--color-blue

/* If I have multiple shades of the same color I will tack a weight onto it: */
--color-blue-100
--color-blue-200
--color-blue-300

Fonts

/* I normally restrict font palette into heading and body families */
--font-heading
--font-body

/* For font sizes, I lean towards T-Shirt sizes to name the different levels: */
--font-size-sm
--font-size-md
--font-size-lg

Spacing

/* Similar to font sizes, spacing also gets represented in T-Shirt sizes: */
--spacing-sm
--spacing-md
--spacing-lg

Creating Tokens

So how do we go about creating tokens? Where do these things live?

This entirely depends on where you might be working. If you are a designer building things in Figma, chances are you want your design tokens available there. Similarly, developers may look to their style sheets for design tokens.

Let's explore how to create design tokens in both of these places.

How to create within Figma

Figma features an asset library which can be used to store reusable pieces, such as shapes, components, text styles, and other types of variables, making it the perfect spot to setup design tokens.

You can add to the asset library in a variety of ways, but the simplest method I know of happens when you are setting values for designs. Once you have set the value, click the Styles and variables button, select Libraries in the popup context menu, and click the + plus sign button to add the value to the library.

Now, instead of manually selecting values, we can choose to select a variable from the asset library, representing a design token value.

How to create with CSS

We can utilize CSS custom properties to store design tokens within CSS. We can make globally available design tokens by placing their CSS custom properties within the :root selector:

:root {
  /* Colors */
  --color-blue-100: #f4f8fb;
  --color-blue-200: #54a9fa;
  --color-blue-300: #4178ff;

  /* Font Families */
  --font-heading: 'Whirly Birdie';
  --font-body: system-ui;

  /* Font Sizes */
  --font-size-sm: 0.5rem;
  --font-size-md: 1rem;
  --font-size-lg: 2rem;
}

As you can see, you can manually add design tokens by defining them as custom properties within CSS. Keeping the number of global design tokens to a minimum will help keep this organized, adding lots of tokens may become difficult to work with.

Alternatively, instead of vanilla CSS, you can utilize CSS preprocessors such as Sass to store design tokens as Sass maps or variables for use within your projects.

/* Stored as a Sass Map */
$colors: (100: '#F4F8FB', 200: '#54A9FA', 300: '#4178FF');

$font: ('heading': 'Whirly Birdie', 'body': 'system-ui');

$fontSize: ('sm': '0.5rem', 'md': '1rem', 'lg': '2rem');

Storing design tokens as Sass maps allows you to loop through them later.

Tools for managing Design Tokens

As mentioned, the more you grow your design tokens, the more cumbersome they may become to manage. There are a few tools out there that help with managing design tokens:

Style Dictionary

Style Dictionary is an open source build tool developed by the folks over at Amazon.

This is a neat tool for several reasons:

Design Tokens can be organized in separate JSON formatted files.
Style Dictionary can be wired up as part of your build process, so that tokens can be generated when the project builds.
Tokens can be defined and configured for multiple output formats including: CSS custom properties, Sass variables, JavaScript variables, variables for usage within mobile app development on Android and iOS.

Tokens Studio

Tokens Studio is a plugin for Figma for more advanced control over design tokens.

Token Studio integrates directly into your design files, enabling you to work with tokens. Token Studio also lets your synchronize your design tokens with other services, such as pushing the tokens to a GitHub repository.

Tokens can also be exported from Tokens Studio to be used within your projects.

Zeroheight

Another tool, Zeroheight, is a one-stop-shop for all your design system related needs. This is a cloud based tool for documenting features within your design system.

Zeroheight has a built-in design token manager tool for managing design tokens found in your design system. Tokens can be imported and exported into different formats.

Publishing tokens

To make tokens available to others on the team, or even for public consumption, we need a place to publish them.

Figma's asset library is the perfect place for a designer as that can be made accessible to other designers on the team, but it's not quite as simple for developers.

Instead, a package registry such as npm might make reaching for tokens a bit easier to developers, who can install tokens directly into their projects. Tokens published on npm automatically become available through free content delivery network tools unpkg and JSDelivr, making them even easier to grab for quick prototyping.

Using tokens in projects

Now that we have published our design tokens to a package registry, how might we go about using them in a project?

Node-based projects

If your project is built with Vue, React, or some other framework such as Astro, you can install your design token package directly to your project.

Navigate to your project directory and in the terminal, install your package by running the following command:

npm install --save-dev *your-package-name*

If successful, the package will be included in our package.json file, found in the root of the project.

There are several ways to import tokens for use within projects. If your package builds out to a single CSS file, it can be included in your bundler's main entry (something like a main.js with Vite) file or by importing in your CSS.

In JavaScript, we can import packages directly:

import 'package-name.css';

In CSS, we can load it as an @import statement:

@import url('path/to/package/package-name.css');

By including the CSS file in your project, you can now access tokens in other CSS files:

.card {
	font-size: var(--font-size-md);
}

Learn more

Resources

What are design tokens? - by UXPin
Naming Design Tokens - by Zara Soltani, UX Collective

Tools Mentioned

Better Know a Design System - Discovery!

Tue, 11 Jun 2024 12:00:00 GMT

When a new UX project emerges, a product team may go through a design discovery phase to help navigate the project.

Design discovery helps teams from various angles: understanding users, grokking the problems to solve, and more, all resulting in a shared vision from the team for how that project should come together.

Let's talk about how to utilize design discovery to help build out design systems!

Design Discovery for Design Systems

A crucial skill to have as a design system maintainer is the ability to research and speak your organization's design language. This means researching and identifying common patterns that might make for useful additions to the design system.

This skill is especially true if you find yourself in an evergreen project, tasked with building out a design system for a new project that might not have mockups or design compositions available.

Generally speaking, discovery should be a broader approach, focusing less on the implementation details and more on the common parts.

Everyone involved in a project may contribute to the research and discovery phase, as design discovery is an important step in design system creation and maintenance.

Types of Discovery

Inspiration and discovery comes from various sources, stemming internally from the organization's branding and staff product designers, or researching design system best practices externally online or by browsing other design systems.

Internal Discovery

A common starting point for design discovery is by taking a look at the organization itself - the branding, and who best to understand branding than the staff Product Designer.

Organizations typically hire designers to work on various pieces of media, including print and web, becoming a valuable resource when it comes to discovering your organization's design language. Product designers should be attributed as contributors to a design system, as they are responsible for conceptualizing and describing the look and feel of a product. As a team, Product Designers and design system maintainers work together to ensure designs are being conveyed properly to the product line.

Outside of product designers, there are many other avenues to internally discover or define your organization's design language. Are there any pieces that can be inherited from the organization that may cascade down to the products?

Organizations tend to be deliberate when orchestrating their branding, so extending certain features to their products help create uniformity that design systems are known to deliver.

Choices such as brand colors, selected font families, logos or any other image assets are important to note, even just for the sake of creating a mood board or style tiles. Ultimately recording these bits of data as Design Tokens, which will become available to designers in Figma or developers in code (We'll talk more on Design Tokens throughout this series!).

Another great place to look internally for design discovery is any other products your organization might have within their line-up. Closely inspect each product, breaking down all the parts to understand the design choices, recognizing the patterns and approaches used on completed work.

External Discovery

Design discovery should happen external to the organization too. It is important to hear how others tackle problems, as it can help you determine the best course of action when experiencing similar situations.

The web is an ever-changing platform, so it can be difficult to keep up with the latest and greatest features. That being said, you absolutely do not have to keep up-to-date with everything. Focus research where it matters most to you, whether that be reading books on relevant topics, videos, blog posts, technical documentation, or whatever else. I guarantee you'll manage to learn something new.

Listening to the opinions of others helps us organize our own thoughts, learn about best practices or alternative approaches, as well as exposes us to different mindsets.

Look towards other design system maintainers on how their processes and procedures work to figure out if there are ways to enhance what your own process flow. Check out design systems for other organizations or products and try to recognize what work went into development.

Knowledge Sharing

What is a design system if not a resource, a resource to share what you have learned. While the contents of the design system are generally the main course, you can add even more value by documenting how you got to that point.

Keep a notebook, whether digital or physical, and as you are learning, researching, and developing a design system, jot down the parts that trip you up. Notate the things that did work and what did not work. Keep a running to do list to help you stay on task. Document difficult issues and how you overcame them.

Now you can take those notes and share them with others on your team, or make them publicly available on a personal own blog site, to provide even more value to those who might be developing their own design systems.

The important part is sharing what you learned. Create the resources that you didn't have available to you, ultimately making things easier for yourself (and others!) the next time you need to build a design system.

Learn More

Design Systems 101 - by Dan Mall, Design System University
The Discovery Phase in UX Projects - by Maria Rosala, Nielsen Norman Goup
Navigating the Discovery Phase - by Ashley Jahren and Flo Wen, Spotify Design

Weekly Roundup #7

Sat, 08 Jun 2024 12:00:00 GMT

Hope everyone had a great week!

Personally, I've been living vicariously through the #cssday hashtag on Mastodon.

I had so much fun visiting Amsterdam for CSS Day last year, and while it did not work out this time, I will return!

I miss you CSS Day!

Interesting Links

Parts of a Design System

posted by Ryan Trimble on June 7, 2024.

</hgroup>

Wait, this one is from me! I wrote up a post on the various bits and bobs you might find within a design system. I've got more information to share about design systems, so keep an eye out for more posts soon!

The Dish with Kish

posted by Lynn Fisher on June 7, 2024.

</hgroup>

~Hard~ Awesome work pays off! Lynn Fisher recently had a chance to hangout with the folks at Top Chef and give a rundown of her Top Chef Stats project!

How to build your first Web Component

posted by Chris Ferdinandi on June 5, 2024.

</hgroup>

I can't help it that Chris keeps doing cool stuff! Chris kicked off a new video series on YouTube and is already a pro at thumbnail face.

Cap Unit

posted by Ahmad Shadeed on June 4, 2024.

</hgroup>

Back-to-back weeks for Ahmad! Last week was about the gap property, this week he's letting us know about the cap unit. I didn't know this was a thing, but it'll make icons a whole lot easier.

Let's make a floating button sign up form pattern

posted by Andy Bell on June 4, 2024.

</hgroup>

Classic problems with modern solutions! Andy walks us through how to make a subscribe button float in the air! Well, in CSS at least!

A modern approach to browser support

posted by Richard Rutter on June 4, 2024.

</hgroup>

Richard talks about how Clearleft uses Baseline to determine browser support and how newly available features might be implemented through progressive enhancements.

Frostapalooza

hosted by Brad Frost on August 17, 2024.

</hgroup>

I got tickets to Brad Frost's Frostapalooza! Social anxiety be damned, I'm hoping to see some friends out in Pittsburgh later this year. Consider checking it out!

Parts of a Design System

Fri, 07 Jun 2024 12:00:00 GMT

Design systems are a fun topic for me, because I like design and I like systems.

They can be maintained by the lone dev looking to make their job easier, or are robustly powering multiple websites and applications for organizations all over the place.

Design systems might be a magical nexus point between designers and developers to some, however If you know what a design system is, then this post probably isn't for you.

I want to talk about different parts that may or may not be included in an organization's design system. Give an overview of the types of tools you might find in a design system.

Design System Features

So, what actually makes up a design system?

Well, that is fairly open-ended, as it really comes down to what an organization needs. Maybe just a set of tokens or a handful of components, here and there. Heck, the big organizations might have fully decked out systems with libraries, frameworks, UI kits.

I'm gonna talk about all these pieces!

Accessibility Guidelines

Personally, I believe building accessible user interaces typically enhances the experience for all users. One of my personal mantras is:

"if something is designed well, but not accessible — then it is not designed well."

— Me

In my opinion, design systems should contain guidelines an organization's designers and developers should adhere to, committed to inclusive and accessible experiences for all users.

A great starting point is making sure products are following the Web Content Accessibility Guidelines (WCAG) to meet some sort of compliance standards.

Design systems are an excellent way to promote accessibility and inclusivity.

Encourage products to be developed with accessibility and inclusivity in mind produces better overall user experiences.
Commitment to accessibility helps the organization lead by example.
Meeting Web Content Accessibility Guidelines in order to stay compliant!

Some neat examples of accessibility guidelines can be found in these design systems:

Component Libraries

The contents of a component library might be determined through a design discovery phase, perusing a catalog of products to determine potential reusable patterns. Capturing these patterns into components to make designer and developer work more streamlined.

Once identified and packaged, components can be distributed through package registries (such as npm) or through design kits created for Figma.

Component libraries help reduce overhead of rebuilding the same components over and over and over again. Also, pushing changes to a component will trickle down to any project using it as a dependency.

Updates in one location will cascade to all products utilizing component library.
Designers and Developers no longer need to recreate the same experiences over and over again.
Contributions to the component library will continue as design patterns are identified.

Great examples of component libraries within these design systems:

CSS Frameworks

CSS frameworks are based upon the organization's design principles, accessibility guidelines, and branding.

Custom built CSS frameworks can be used to deploy your organization's style across all projects. This helps to keep styling consistent throughout websites and applications.

CSS resets, layouts, utilities, and more may be included within the design system's CSS Framework.

Core CSS contains all necessary organization styles to easily get projects up and running.
Easy to use with within products, flexible to support organization applications.
Proudly conveys organization branding.

There so many great design system CSS frameworks out there, such as:

Design Principles

Similar to an organization's accessibility guidelines, design principles help to keep designers and developers on the same page about how things should look, feel, or behave.

These core values inform design decisions, instructing how to utilize the design system effectively.

Single source of truth, one location to describe how the organization's designs and styles should be used.

These design systems have been built upon great design principles:

Design Tokens

Bite-sized sets of information containing the values of the organization's brand colors, typography, spacing, and whatever else that might come in handy.

Design tokens can be used within organization projects, delivering branding through the design system.

Delivers tokens in many formats such as CSS custom properties, JavaScript variables, or for use within mobile applications.
Easily installable in projects to bring organization branding to products.

For some ideas on how to implement design tokens, check out these design systems:

Iconography

Icons are used literally everywhere: print, mobile, web. So having easy-to-grab access to any icon in any format necessary might be a useful addition to a design system. Especially if you have organization-specific icons that get re-used often.

As they are used everywhere, Icons might need to be a .png file format for a print design or a scalabale vector graphic (SVG) for something on the web.

Vector graphics are scalable to any resolution.
Sprite sheets might be useful if you want to optimize which icons are used where.
Icon fonts, while heavy, can be an easy way to drop your icons into projects.

Neat iconography can be found in these design systems:

Design Kits

Much of what I focused on above is more developer-focused, however a design system may be used by non-developers also.

Design tools such as Figma provide an excellent way to create design kits, enabling non-devs the ability to quickly mockup a prototype.

These tools help convey design ideas to developers for a distinct feature development pipeline.

Figma is also a great place to work on design discovery, which might happen within a design kit. Identifying the patterns, extracting them into reusable components and publishing to the kit.

Created for use within tools such as Figma, Adobe XD, or Sketch, to quickly iterate on design concepts.
Design discovery can guide what is built into a design kit and overall design system.
Enhances collaboration between designers and developers to translate design into code.

Examples of design kits:

Morale of the Story

Design systems are a great way to organize, collaborate, and iterate upon your organization's design ideas.

Design systems can be as simple or as complex as necessary (though strive for simple, please!) and are a living machine for your organization's design principles, guidelines, tools, and more.

If your organization is not currently utilizing a design system, it may be beneficial towards more efficient design practices by instituting these design system features.

The Internet according to me

Sat, 25 May 2024 12:00:00 GMT

Sometimes I feel like I share the same birthday as the Internet.

I know that isn't true, but my near 36 rotations have seen many milestones for that massive network of computers, the Internet.

Much of my life has involved computers and the Internet.

My first experience with computers was at my elementary school's computer lab, where I played Oregon Trail on old Apple computers. Eventually my family had a computer where I learned all sorts of things on the Internet.

I met friends online. I wrote HTML to make cool pages for my Neopets and created GeoCities websites for the weird little hobbies I had. I discovered music and movies and video games on the Internet.

I "grew up" and began professional life in Information Technology. Working with computers, networking, and just in-general Internet stuff. I eventually made the switch to writing code, creating websites and applications, online, on the Internet.

Honestly, I'm worried about my old friend, the Internet.

A brief 80+ year history

Obviously the Internet was conceived of long before myself. Traces of the Internet span an earnest 80+ year history, emerging around the 1950s as Computer Science gained popularity.

'50s - Computer Science

While Computer Science existed for a while, interest certainly grew in the '40s and '50s (war and innovation, name a better duo), as did the need to make these machines talk to each other. People needed to share what they were learning about these things.

You've probably seen those room-sized computers, typically installed in colleges, government facilities, labs. These puppies were BIG and EXPENSIVE and LOUD to run. So when they ran idle, it was much wasted potential.

Big, expensive, and loud computer, ENIAC. Photo Credit: Wikipedia.

</cite>

</figure>

The logical next step was figuring out how to share these computational resources with other people, to fill that idle time with tasks to perform.

People want to learn.

'60s - Packet Switching

Packet switching, invented by Paul Baran and later iterated upon by Donald Davies, is the concept of bundling up data into packets to be sent and received over digital networks. This process could be performed over the existing telephone line infrastructure of the time.

Now all those huge, expensive, and loud computer machines could communicate on a much larger, wide area network. People would be able to communicate in much different ways.

People learn together.

'70s - ARPANET

Like many good technologies, the United States government got involved.

The US Department of Defense and its Defense Advanced Research Projects Agency (or DARPA) built ARPANET, a large scale interconnected computer network throughout the states.

The character of Donald Anderson, DARPA Chief from the video game Metal Gear Solid (Konami 1998, Sony Playstation). This is the only thing I think about when I see "DARPA" because my brain is broken. Photo Credit: Metal Gear Wiki

</cite>

</figure>

Spoiler: ARPANET is the ancestor to the Internet as we know it.

People build connections.

'80s - DNS and ISP

Just as phonebooks are available to help people lookup phone numbers, computers needed ways to look up another computer.

New protocols were developed, connected devices receive an Internet protocol address (similar to phone numbers). Now, how to make it friendlier? This is what the Domain Name System (DNS) was created to do.

Computer networks, known as domains, would utilize their domain names as a unique way to reference each other. DNS will translate domain names to IP addresses, enabling networks to become more reachable - after all, it's much easier to remember ryantrimble.com than something like 75.2.60.5.

As cool as a network of computers is by itself, it's gonna get so much cooler when real people gain access and actually use it.

People, like the Homebrew Computer Club, built these computer things in their garages. Computers start showing up in more colleges, businesses are bringing in smaller hardware for employee usage. Personal Computing is like a thing.

Legend and co-founder of the Homebrew Computer Club, Gordon French, sitting in front of two computers, photographed in 2013. Photo Credit: Wikipedia

</cite>

</figure>

Internet Service Providers (ISPs) sell access to computer networks. It works by dialing a phone number and placing the phone's handset onto a modem box connected to your computer.

With Internet access, you can do fun things like:

Read research papers

Nobody has really heard of a "website" yet, but it's all about to fall into place.

People innovate with systems.

'90s - World Wide Web

Tim Berners-Lee and CERN invented websites which changed everything forever. I bet you are reading this post on a website right now, in fact!

Personal Computers were shipping with operating systems, network connectivity, and browser applications.

This is when a lot of websites were newly created for everything: governments, corporations, businesses, churches, clubs, libraries, music, art, sports, politics, and even personal use.

I think when folks wax poetic about the weird web, this is what they might be thinking about. People had no idea what was going on: lots of time spent playing, learning, and experimenting during this weird era. You just put stuff out there and hoped the right people saw it.

The Internet expanded very fast thanks to websites.

People create for people.

'00s - Social Media

Folks eventually gathered on certain websites.

Places like Myspace helped folks setup an online presence much quicker than creating a website. Much cheaper than finding website hosting and purchasing a domain name. Much easier than learning how to code.

I wonder if I'm still in anyones top 8. Photo credit: Wikipedia

</cite>

</figure>

People are mostly social creatures, right? Now they have access to virtually anyone, for better or worse. The Internet is a fun, albeit mysterious and scary, but still fun place.

More and more things move online. The Internet becomes the place to socialize and share: ideas, art, videos, and whatever thoughts a person might have.

Oh, also everything is faster too. Those Internet Service Providers are pushing packets around at the fucking speed of light in many places.

People share with communities.

'10s - Capitalism Ruins It

Natural laws govern human nature and all that, of course we figured out a way to squeeze all the money out of this.

We see the rise of eCommerce sites, targeted advertisements popping up due to analytic data gathered from tracking users.

Different social media sites are popular now and they try to eat up all their user's time browsing the Internet. Which turns out, people will spend a lot of time browsing when it's pocket-size and available everywhere.

Corporations create for users.

'20s - Current Hellscape

The Internet is in everything now.

Phones: connected, easy.
Televisions: connected, how fun.
Lightbulbs: connected, um ok.
Cars: connected, that could be dangerous.

We've got these little speaker boxes that listen to us and answer all our questions, but are mostly just used for maybe two commands: connected, the lightbulbs make more sense now at least.

Those targeted advertisements are now showing before, during, and after every news article, online game, and video. Some folks think these ads can read minds, so are our minds connected?

People group up with other like-minded folks. They stop sharing ideas, instead fight over them.

Also, it's not just people browsing, learning, and creating on the Internet anymore. Artificial Intelligence is growing faster than can be sustained. This is another one of those changes everything forever type things.

People tell computers what they want and it returns a rough approximation, no matter the cost. Computers scrape together all the thoughts and ideas and art and expression that people have and its like ✨magic✨.

Computers are creating.

What do we do?

Excellent question.

I've been wracking my brain trying to figure out a conclusion to the post. This topic has been on my mind for a while, but have been thinking about it a lot more recently.

Probably because of a Manifesto for a Humane Web written by Michelle Barker.

Probably because of Henry Desroches' talk at the 11ty Conf on owning your own content and the mission of the IndieWeb.

Probably because there are still awesome people out there creating, learning, and sharing with other people.

So, What do we do? I can't tell you that because I don't know the answer — but I'd love to hear your opinion.

Weekly Roundup #5

Sat, 25 May 2024 12:00:00 GMT

Interesting Links

How Computers Work: The 1s And 0s

posted by Alan W. Smith on March 24, 2024.

</hgroup>

From the creative mind of Alan W. Smith, comes an interactive light switch adventure... Really clever way to demonstrate how the bits all add up!

Add an overlay to a background-image with one line of CSS

posted by Kevin Powell on March 23, 2024.

</hgroup>

Kevin Powell teaches us how to write a super handy, one-line, linear-gradient, .overlay class using the dark arts of border-image properties.

Ten Years of A Single Div

posted by Lynn Fisher on March 22, 2024.

</hgroup>

Lynn Fisher talks about her ten years of being a total badass on the net with A Single Div. Seriously, thank you Lynn for continuing to be an inspiration to this craft.

Ben Myers - Web Developer. Accessibility Advocate. Human T-rex.

posted by Ben Myers on March 22, 2024.

</hgroup>

Check out Ben's updated website, it looks awesome! I contiue to learn a lot from this website in particular, between the incredible articles and literally inspecting the code to see how Ben does things. I highly recommend Ben.

I need your help to make 11ty fully independent and sustainable in 2024

posted by Zach Leatherman on March 21, 2024.

</hgroup>

I can't think of an open source project more deserving than what Zach Leatherman and co. are doing with 11ty. If you believe in open source, please consider supporting the project.

Using @starting-style and transition-behavior for enter and exit stage effects

posted by Adam Argyle on March 20, 2024.

</hgroup>

A collective sigh of relief echoes across the web as CSS developers are finally able to animate from display: none and Adam shows us how using @starting-style.

Weekly Roundup #6

Sat, 25 May 2024 12:00:00 GMT

Interesting Links

Memory recollection issues with ADHD

posted by Chris Ferdinandi on March 31, 2024.

</hgroup>

Chris is connecting so many dots in my head that I think he is secretly writing these articles about me. Serious shout out to Chris for this series of daily tips, it's been super helpful in figuring out how my own brain works.

I also get flustered super easily in high-pressure real time conversations. I am much better in writing, and as a result, seem to favor online conversations where I can take a beat to think first.

-- Chris Ferdinandi

The Gap

posted by Ahmad Shadeed on March 30, 2024.

</hgroup>

Ahmad does another deep dive, this time into one of my favorite of the (relatively) newer CSS properties: the gap. I love when Ahmad does these, always a great reminder how much thought went into developing these features, on top of showing some great examples on how to incorporate them into your projects.

Yet another take on layout breakouts

posted by Noah Liebman on March 30, 2024.

</hgroup>

I love me a small CSS snippet that demonstrate how capable CSS is nowadays. Noah shows us a nice, simple, and powerful addition to your CSS toolkit. Be sure to check out this breakout article on layout breakouts.

"Web components" considered harmful

posted by Mayank on March 28, 2024.

</hgroup>

Mayank provides great context into common misconceptions surrounding the terminology of "web components" — but more importantly has me quesitoning if water is wet or if it makes things wet.

My Recent Container Query Use: Pagination

posted by Alex Riviere on March 27, 2024.

</hgroup>

Last year at CSS Day, Miriam Suzanne declared us safe to use container queries. Now it seems we need examples, so Alex is here to help with that. Awesome use-case, demonstrating how one might use container queries with a pagination component.

Weekly Roundup #4

Sat, 18 May 2024 12:00:00 GMT

Interesting Links

Fluid Design with CSS Round

posted by George Francis on March 17, 2024.

</hgroup>

George redesigned his site recently and just released this great advice on using the upcoming CSS round() function to apply fluid design to your styles.

The Shed - Stairs

posted by David Fitzgibbon on March 15, 2024.

</hgroup>

I'm a big fan of David's work and this one made me smile. David first built this in 3D using ThreeJS, in order to help him understand how to recreate this in plain old CSS. Does this mean CSS is the fourth dimension??

I'm worried about the tabbing behaviour, rather than the syntax and name of CSS masonry

posted by Andy Bell on March 10, 2024.

</hgroup>

Andy discusses an issue discovered while exploring the new "masonry" style grid that is being debated by Apple and Google. Applying this masonry-style layout causes some unexpected behavior regarding the tab order, which will not be fun for assistive device users who rely on tabbing through a page.

I'm interested to see more non-Pinterest style use-cases for the masonry layout. I'm not totally convinced this feature was a necessity, but it might help sites feel a touch more refined if used appropriately.

Introducing the CSS anchor positioning API

posted by Una Kravets on March 10, 2024.

</hgroup>

Google I/O was this week, which usually introduces us to new developer features. Una gives a great rundown of CSS anchor positioning and created an achor positioning tool to help understand the inset-area property a bit better.

Manifesto for a Humane Web

posted by Michelle Barker on March 10, 2024.

</hgroup>

I'm always down for a good manifesto and this one is actually good. Michelle writes about how hostile the web has become, with concerns for privacy and AI being injected into everything.

Subheadings, subtitles, alternative titles and taglines in HTML

posted by Steve Faulkner on July 19, 2022.

</hgroup>

This is a wonderful resource on how to help make the often overlooked <hgroup> tag more useful and semantic. I have this in my bookmarks and dig it out often enough, might be helpful to you.

Disability Dongle

posted by Liz Jackson, Alex Haagaard, and Rua Williams on July 19, 2022.

shared by Ben Myers on May 16, 2024.

</hgroup>

Ben shared this excellent read for Global Accessibility Awareness Day. Discusses how good intentions can backfire, especially when you are solving for problems that don't exist.

Weekly Roundup #3 — Possum Edition

Sat, 11 May 2024 12:00:00 GMT

I mostly wanna talk about the International Symposium on Making Websites Real Good conference. It was so much fun!

Interesting ~Links~ Talks

The Future of 11ty

presented by Zach Leatherman on May 9, 2024.

</hgroup>

Zach provided great updates on the state of 11ty, version 3.0 changes, enhancements to eleventy-img, and more! The 11ty community are eating good.

Hints & Suggestions (First, Do No Harm)

presented by Miriam Suzanne on May 9, 2024

</hgroup>

No matter if you watch Miriam speak in-person or on a stream, you are in for a treat. A thoughtful tour through the history of design on the web. Miriam is one of my favorite people.

"Graphic design of unknown content with unknown collaborators, on and infinite and unknowable canvas, across operating systems, interfaces, languages, and writing modes"

<cite>— Miriam Suzanne</cite>

</blockquote>

11ty and Large Project Tooling

presented by Paul Everitt on May 9, 2024

</hgroup>

Paul demonstrated how to use 11ty like a pro. Bringing component-driven development to 11ty with TypeScript, TSX, and testing through Vitest.

Digital Frontiers, IndieWeb Cowboys, and a Place Online to Call Your Own

presented by Henry Desroches on May 9, 2024

</hgroup>

Henry pleads the case for IndieWeb and why it's best to publish your own content and syndicate it elsewhere. Own your content, folks!

You're Probably Doing Web Performance Wrong

presented by Sia Karamalegos on May 9, 2024

</hgroup>

While the Lighthouse can often bring your ship towards land, Sia is here to help you set up a port authority. Breaking down performance gains while centering on user experience. I don't know where that metaphor came from.

Building a Town That Doesn't Exist

presented by Dan Sinker on May 9, 2024

</hgroup>

This was a brilliant pause from the technical side of the conference. Dan demonstrated how he uses the power of the web to tell a story, creating the believable town of Question Mark, Ohio. What an intriguing project!

11ty Sites for People Who Don't Think They Are Web Developers

presented by Adrianna Tan

</hgroup>

Adrianna shares her story on how 11ty empowered her to develop more websites and gives a rundown on how it can help others too.

Don't Fear The Cascade

presented by Mayank on May 9, 2024

</hgroup>

Mayank introduced lots of folks to selector specificfity... specificity, @scope, and CSS Layers, always fun to see excitement for CSS!

I use Mayank's CSS reset on many of my personal projects and this talk gave some great insight into the logic used to create @acab/reset.css.

Managing Content Management (With No Vendor Lock-in)

presented by Liam Bigelow and David Large on May 9, 2024

</hgroup>

This is a super interesting talk and one that might be relevent for a project I have in mind. Liam and David describe a problem larger organizations may run into and offer up a Jamstack-style solution. Also, the red balloon was a nice touch!

Come to the Light Side: HTML Web Components

presented by Chris Ferdinandi on May 9, 2024

</hgroup>

I always love when a talk makes me want to go make things and Chris certainly got the gears turning in my head around this pattern of HTML-first web components. Legendary talk and perfect introduction to native web components.

Chinese Type Systems

presented by Ivan Zhao on May 9, 2024

</hgroup>

As someone with little experience with languages other than English, this talk was fascinating. Ivan traces the roots of Chinese characters to where we are today, with web typography and Chinese type systems.

~Light Mode Versus Dark~ Mode Why Not Both?

presented by Sara Joy on May 9, 2024

</hgroup>

Sara proves that there is always something to learn in web development. Did you know you can enable light mode and dark mode without any CSS? What an pleasant conclusion to the conference.

Weekly Roundup #2

Sat, 04 May 2024 12:00:00 GMT

Housekeeping

Before we dig into this weeks interesting links, I wanted to do some housekeeping.

A new friend reached out about an announcement I had made a while back, CSS Harrisburg - a local meet up group for web developers and I wanted to give an update for those interested:

First of all - if you are interested, reach out to me already, sheesh!
Second of all, life happens and you are already coming up on a year since thinking of something.

I still have my notes and plans - my schemes, if you will. Hopefully the motivation will kick in soon and we'll be all set.

Thanks Micah for reaching out!

Interesting Links

All in on Balatro - Peruvian Idle #2

posted by Mike Aparicio on May 1, 2024.

</hgroup>

My friend Mike created a newsletter where he breaks down recent movies, television shows, and video games he's been into. If you know Mike - or follow him on Letterboxd - you know he has great taste. Definitely worth subscribing!

Printing Music with CSS Grid

posted by Stephen Band of Cruncher on April 24, 2024

shared by Kevin Powell on Mastodon on May 1, 2024.

</hgroup>

Stephen Band wrote about how he is using modern CSS techniques to render sheet music. As a guitarist and a CSS developer, I'm sold! I find reading music, chords, or tablature on devices frustrating. Constantly having to stop, zoom, and scroll around while trying to quickly learn a new piece. I'm excited to try this one out!

Handling The Indentation of a Treeview Component

posted by Ahmad Shadeed on April 30, 2024

</hgroup>

Ahmad does an incredible deep-dive into different patterns for handling nested treeview components. Excellent UX research on how a few different companies handle this within products.

DOOM Scrolling

posted by Adam Kuhn on April 29, 2024

</hgroup>

Adam released his project from his 2024 Front End Conf talk, DOOM Scroll. Adam uses CSS and CSS only to create a (somewhat) playable version of the classic DOOM video game, proving again that DOOM really can run on anything. Rip and tear, Adam.

Parting Notes

I'm not a reader.

Like, I read to learn, online stuff mostly:

Blogs, RSS feeds, newsletters from people that teach me things.
Technical documentation, for better or wose.

I do like comics and graphic novels, but for very similar reasons as to why I love cartions.

My point being: I read one whole non-nonfiction - uhh, whatya call 'em - fiction book. And I've already sunk into it's sequel! Guess what? It's a trilogy! That means there is another one after that!

I'm trying to form some new routines and I've enjoyed making "reading for fun" part of those routines. You can follow along with my reading journey on my literal.club profile.

Weekly Roundup #1

Sat, 27 Apr 2024 12:00:00 GMT

I've been using Obsidian for just over a month now, I am kind of hooked on it. I like the whole "second brain" thing, which we will get to in a moment, but mostly I like the Daily Notes feature. It's simple and straightforward, I just like jotting down things about my day in there.

In my Daily Notes, I record interesting links that I come across during my day. Now, I'd like to pass that savings onto you, the readers of this blog.

I read a lot of blog posts, so a lot of this might be rehashing the RSS feeds, although I also want to share anything that may have helped me out during week as well as I would love a place to thank folks.

I thought about doing this as a newsletter, but there are many great newsletters out there that do similar things - probably best to go subscribe to those if you are looking for something well organized and consistent, because I'm sure I will forget to do this at some point (maybe even as early as next week, so stay tuned to be disappointed).

With that out of the way - let's jump into what my brain thought was interesting this week!

Interesting Articles

Date pickers are hard

posted by David Darnes on April 25, 2024

</hgroup>

David is not lying when he says Date pickers are hard. Browser native date pickers even have their issues, especially on mobile devices. David suggests Nick William's Cally package as a great alternative.

The problem with new URL(), and How URL.parse() Fixes that

posted by Kilian Valkhof on April 24, 2024

</hgroup>

If Kilian is excited about something, I'm excited about that something. This looks like a great new addition for parsing those pesky URLs!

Second brain tool: Obsidian

posted by Chris Ferdinandi on April 23, 2024

</hgroup>

Friend and JavaScript guru, Chris Ferdinandi, has created a new resource for folks with ADHD where he's posting daily about the subject, including this great article on how to use Obsidian as a second brain. Great tips on how to set up a simple workflow for managing tasks and more!

How to create CSS utility classes

posted by Robin Rendle on April 19th, 2024

</hgroup>

I've been doing a lot of research on building Design Systems, so this piece on how to generate CSS Utility Classes from JSON design tokens was relevant. Certainly got the gears turning for a personal project!

Help us invent CSS Grid Level 3, aka “Masonry” layout

posted by Jen Simmons on April 19, 2024

</hgroup>

Jen Simmons posted some updated demos for the CSS Grid, so called "masonry" layouts (or should I say, waterfall...). I'm always excited to try out new CSS features, even if they aren't production ready!

Testing HTML with Modern CSS

posted by Heydon Pickering on April 7, 2024

</hgroup>

Heydon demonstrates awesome error-handling techniques within CSS and how to display messages pointing out what might be causing problems.

JavaScript Sort Comparators

posted by James Kerr on March 28, 2024

</hgroup>

Shared by Andy Bell over on Picalilli, James provides a great visual way to remember how to .sort() things. I'm used to the trial-by-fire approach of swapping things around until it does what I was hoping for, maybe I can save some of that frustration now.

Are your Anchor Links accessible?

posted by Amber Wilson on December 14, 2020

</hgroup>

This article was shared by Mayank over on Frontend Horse, after some discussion on how to properly handle heading anchors. This is a rather common pattern that seems simple, but important to get right.

What the heck is an SVG sprite sheet?

Fri, 29 Mar 2024 12:00:00 GMT

If you work with me, you may have heard me mention SVG sprite sheets and wondered to yourself, "Man... he's talking about SVG sprite sheets again, does Ryan not have any actually fun hobbies?"

And to that I say: "Thank you for asking about SVG sprite sheets."

Now, am I a graphic designer? Not exactly, though I think I do a pretty well navigating SVGs.

SVG?

SVG, or Scalable Vector Graphic, is an XML-based way to describe two-dimensional graphics that stay crisp at any size (hence, "scalable" graphics).

The cool part, though, is browsers know what to do with SVGs and can render them like HTML elements. This allows developers to embed graphics directly, inline with other parts of a page. Also, as a generous bonus, we can style and adjust SVGs with cascading style sheets.

Sprite Sheets?

Sprite sheets are a way to have many graphics available from one resource and are used in many different ways.

In video games, sprites can be used for animating characters, actions, and environment elements. Sprite sheets have been used on the web for quite a long time as well.

An older technique for sprite sheets on the web involved having a grid of graphics within a single image file, then positioning the image in a way that showed only one graphic at a time. This was clever, though it was painful to manage.

SVG Sprite Sheets?

Combining the power of SVG with the concept of sprite sheets provides an effective way to deliver graphics, like icons, to our users.

SVG contains a feature called <symbol> which wraps around a graphic and turns it into something reusable, ideal for graphics such as icons. Adding an id attribute to the <symbol> gives us a way to reference the symbol.

We can mostly add as many icons as we want, though there are some warnings here:

Fairly complex graphics may add to the weight of the overall page.
Similarly, having a excessive amount of icons (think hundreds or thousands), will also cause performance issues

Combined with the <symbol> element, SVG also provides us a way to use the symbols, with <use> (duh, I guess). MDN says:

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the use element is, much like cloned template elements.

Neat! But wait, you might be thinking to yourself:

"I just remembered - writing SVGs by hand is a surefire path to madness, I thought you said this was cool"

...and you would be correct, this would be a pain to manage.

Luckily there are some great tools that can help us accomplish creating SVG sprite sheets so much easier.

Generators

There are several SVG sprite sheet generators online where you can upload your icon SVG files and it'll spit out a sprite sheet.

I have used https://svgsprit.es/ for this type of thing previously, mostly as a quick way to get something together. A much more preferable way of creating these sprite sheets might be something a bit more automated.

Automating

So, I'm sure there are several ways to go about this, but the way I do this is by implementing this as a step within the build process.

I primarily use Vite as my build tool of choice, so let's use that to build a SVG sprite sheet.

Setup

Let's initialize a new Vite project for the purposes of this demonstration, but if you are already working on an existing Vite project, this will fit in nicely to your build process.

To create a new Vite project, navigate to your project directory and run the following in the terminal:

npm create vite@latest

Provide a name for the project and follow the prompts to complete. I named my project svg-sprite-sheets, selected to work with vanilla JavaScript, but feel free to select whatever matches your preferences or project requirements.

Navigate into the freshly created project and run npm install to install dependencies.

Plugins

One of the many reasons I prefer Vite is due to it's vast community of developers who make awesome plugins and... hey would you look at that:

npm install -D vite-svg-sprite-wrapper

Yep, there is a Vite plugin to do exactly what we want to do, isn't that convenient?

I love open source software! Shoutout to vshepel on Github for this Vite plugin!

Open up your project's vite.config.js file, or if there is not one in your project directory, create a vite.config.js file and include the following:

import { defineConfig } from 'vite';
import ViteSvgSpriteWrapper from 'vite-svg-sprite-wrapper';

export default defineConfig({
  plugins: [ViteSvgSpriteWrapper()],
});

We need to pass in some options, specifically where to locate the icons and the output directory for the sprite sheet.

import { defineConfig } from 'vite';
import ViteSvgSpriteWrapper from 'vite-svg-sprite-wrapper';

export default defineConfig({
  plugins: [
    ViteSvgSpriteWrapper({
      icons: './src/icons/**/*.svg',
      outputDir: './public/',
    }),
  ],
});

The icons property points to the directory containing your SVG icons. We can use the **/*.svg syntax to recursively look for SVGs within the src/icons/ directory, if they happen to be nested into sub-directories.

For the outputDir, we can send the generated sprite sheet to Vite's public/ directory. Anything within public/ is automatically copied, unprocessed, into the built dist/ folder, making the sprite sheet available to use within pages.

Now, whenever we run npm build to build the project, this plugin will do the following:

Grab all of the icons out of src/icons/
Combine and format the icons as <symbol> elements
Output a sprite.svg file to the public/ directory

Adding new icons

Just drop them into the src/icons/ directory and re-run the build!

Using Sprite Sheets

Now that we have a sprite sheet, let's figure out how to actually use it.

I mentioned earlier that SVG has another feature called <use> that allows you to reference the id of a <symbol> inside our public/sprite.svg file.

If the sprite sheet is small enough, one thing you can do is embed it directly on the page, the you could do this:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#arrow"></use>
</svg>

Which would copy the SVG symbol with the id of arrow inline, wherever you are using the icon.

This presents a problem though, anytime we update the sprite sheet, we would need to re-copy it's code into the HTML somewhere - not ideal.

Instead, we can reference the path to the SVG and the id of the icon:

<svg class="icon" aria-hidden="true">
  <use xlink:href="./sprite.svg#arrow"></use>
</svg>

Note: Vite is smart enough to know where to find "public" files, so you do not need to include public/ within the path to the sprite sheet.

Now you should see the corresponding icon in the browser!

CSS Approach

You can create a CSS powered sprite sheet as well!

Prepping the SVG

We have to massage the SVG a bit to make this effective.

First, in your SVG tool of choice (I'm using Figma) make sure each sprite is grouped appropriately with whatever name you'd like to use as reference to the SVG. Stack each icon ontop of one another, Figma has an alignment tool to make this easy - but make sure all icons are centered! Group all the stacked icons together.

Next we can export the sprites as a single SVG file, however we will want our export tool to preserve the names as id attributes within the SVG.

We are looking for something similar to this:

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="heart">// ...</g>
  <g id="star">// ...</g>
</svg>

Notice the id="heart" on the first g tag? This will be how we can reference the sprite when requesting it as an asset later!

Now we need to include a couple of things within this SVG file.

<svg class="spritesheet" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      <![CDATA[
          .sprite { display: none; }
          .sprite:target { display: inline; }
        ]]>
    </style>
  </defs>

  //...
</svg>

The <defs> tag gives us a spot to where we can define a couple CSS styles for our new SVG sprite sheet to abide by.

Let's take a peek at those rules:

.sprite {
  display: none;
}
.sprite:target {
  display: inline;
}

Very straightforward: don't display unless you are being targeted.

Apply class="sprite" to each of the <g> tags within your SVG file for the rules to take effect.

<svg class="spritesheet" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      <![CDATA[
            .sprite { display: none; }
            .sprite:target { display: inline; }
          ]]>
    </style>
  </defs>

  <g class="sprite" id="heart">// ...</g>
  <g class="sprite" id="star">// ...</g>
</svg>

Default Styles

If the spritesheet is being used as an icon set, you may want to define some default styles to accompany the icons. In your project's CSS, you can do something like:

span[class*='icon'] {
  display: inline-block;
  height: var(--icon-size, 100px);
  aspect-ratio: 1;
  background: transparent var(--icon-url, url('./sprite.svg'));
  background-size: contain;
}

Using the SVGs

Now that we have our SVG sprite sheet setup and some default styles in place, we can use this sprite sheet in a few different ways:

<!-- as an image tag -->
<img src="./sprite.svg#arrow" />

<!-- as an iframe -->
<iframe src="./sprite.svg#heart"> </iframe>

<!-- as an object -->
<object type="image/svg+xml" data="/sprite.svg#heart">
  <!-- provide a fallback graphic -->
  <img src="./heart.png" />
</object>

Similarly, this SVG sprite sheet can be used in CSS:

.icon-heart {
  background: url('./sprite.svg#heart');
}

Demonstration

<p class="codepen" data-height="600" data-theme-id="default" data-default-tab="result" data-slug-hash="VwOwgBV" data-user="mrtrimble" data-token="a1ea2c9ee5114cc2f3524419a0797505" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"

<span> See the Pen <a href="https://codepen.io/mrtrimble/pen/VwOwgBV/a1ea2c9ee5114cc2f3524419a0797505">Untitled</a> by Ryan Trimble (<a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Creating a Guestbook with Astro DB

Sat, 16 Mar 2024 12:00:00 GMT

My favorite framework and its amazing team of developers released a new feature this week that I am very excited about: Astro DB.

What is Astro DB?

As you may expect, the DB stands for database - however it's not just any database.

Astro DB was built on top of LibSQL to be integrated directly with Astro and I gotta say it works very well.

The integration provides you with a few tools: a no-fuss local development database, an awesome API to work with said database, and a cloud database platform which can be wired up for your dynamic production content with Astro server-side rendering.

Creating a Guestbook

I just read the 29th edition of People & Blogs which features webring and guestbook aficionado, Sara Joy, which got me thinking about Guestbooks - an excellent project to test out Astro DB.

Setup Astro

Let's scaffold a new Astro project using create-astro. The absolute best place to start an Astro project is the Astro docs, Astro's documentation team is great and I have never had issues finding what I need.

In your terminal, navigate to where you'd like to create your project and run:

npm create astro@latest

Follow the prompts, selecting which preferences are best for you - in my case, I created an empty Astro project, with Strict TypeScript settings.

Now, open up that directory in your editor of choice so we can dig into Astro DB!

Setup Astro DB

First things first, let's install the Astro DB integration:

npx astro add db

This will install the Astro DB package into your project and will ask if it is allowed to update your Astro config file, say yes.

Astro DB also scaffolds out a db/ folder containing a config.ts file for configuring your database, and a seed.ts file for seeding the database for development.

Open up the db/config.ts file, it's empty at the moment, so let's add our table.

To add a table, we will need to import the defineTable function from astro:db:

// db/config.ts
import { defineDb, defineTable } from 'astro:db';

We also need to create a column on the table, so import column as well:

// db/config.ts
import { defineDb, defineTable, column } from 'astro:db';

Great! Now let's instantiate a table called GuestBook:

// db/config.ts
import { defineDb, defineTable, column, NOW } from 'astro:db';

const GuestBook = defineTable({
  columns: {},
});

Our table schema is going to be simple on purpose, we are building a guestbook after all. We are looking to store:

id - The guestbook entry's unique identifier
author - a string containing who left the guestbook entry
content - another string featuring the main content of the guestbook entry
timestamp - a timestamp to capture when the entry was added

We can configure this schema for our table column like so:

// db/config.ts
import { defineDb, defineTable, column, NOW } from 'astro:db';

const GuestBook = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    author: column.text(),
    content: column.text(),
    timestamp: column.date({ default: NOW }),
  },
});

We can indicate the type of data for each column. For the timestamp property, we can set the default value to the most current time using the NOW function provided by Astro DB (don't forget to import it!).

Checkout the Astro Docs' Table Configuration Reference for more information on how to set up columns, advanced configuration, and types of columns available.

Finally we will want to export the Guestbook table, we can do this using the defineDb function provided by Astro DB:

// db/config.ts
import { defineDb, defineTable, column, NOW } from 'astro:db';

const GuestBook = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    author: column.text(),
    content: column.text(),
    timestamp: column.date({ default: NOW }),
  },
});

// https://astro.build/db/config
export default defineDb({
  tables: { GuestBook },
});

That is all the table we need for our simple guestbook, so let's talk about seeding the database.

Seed Database

To populate the database with some test data for development, open up the db/seed.ts file.

To actually use our GuestBook table we created in our db/config.ts file, we can simply import it from the database.

// db/seed.ts
import { db, GuestBook } from 'astro:db';

Then, inside the seed() function, we can insert data like so:

// db/seed.ts
import { db, GuestBook } from 'astro:db';

// https://astro.build/db/seed
export default async function seed() {
  await db.insert(GuestBook).values([
    {
      author: 'John Doe',
      content: 'You are so cool!',
    },
    {
      author: 'John Doe, The Second',
      content: 'I agree with my dad!',
    },
  ]);
}

We only need to provide the author and the content as the id and timestamp will automatically be set based on the schema setup in the db/config.ts file.

Now we have our database configured and the seed file ready, let's fire up the Astro development server!

Render to the Browser

For the purposes of this demonstration, I'm creating this guestbook on a single page.

To output the guestbook data on the homepage, open up src/pages/index.astro and import the db and our GuestBook table from Astro DB.

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

---

DrizzleORM is built into Astro DB, so querying the database is super easy. Let's grab everything from the GuestBook table and render it to the page:

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

// Selects all items from the GuestBook table
const guestBook = await db.select().from(GuestBook);
---

<dl>
{
  guestBook
    .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
    .map(({author, content, timestamp}) => (
    <div>
      <dt>{author}</dt>
      <dd>{content}</dd>
      <dd>{timestamp}</dd>
    </div>
  ))
}
</dl>

This will iterate over the guestBook array, destructuring author, content, and timestamp for use within the template.

Personally, I want the latest entry in the guestbook at the top of the page, which we can achieve by chaining a sort() array method onto guestBook:

{
  guestBook
    .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
    .map(({ author, content, timestamp }) => (
      <div>
        <dt>{author}</dt>
        <dd>{content}</dd>
        <dd>{timestamp}</dd>
      </div>
    ));
}

This will output the stored data from the GuestBook table onto the page!

BUT WAIT! How do we add things to the database? Well, like any good web application: Forms.

Creating a Form

If you have ever created an HTML form, you already know what to do, here is the form I created:

<form method="POST">
  <label for="author">
    Author
    <input id="author" name="author" />
  </label>

  <label for="content">
    Content
    <textarea id="content" name="content"></textarea>
  </label>

  <button type="reset">Cancel</button>
  <button type="submit">Leave your mark</button>
</form>

Oh no! The form is setup to post to itself, we need to handle that! Luckily Astro already knows what to do. We can check the page for POST requests using an if check on Astro.request.method:

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

// Watch for POST requests
if(Astro.request.method === 'POST') {

}

// Selects all items from the GuestBook table
const guestBook = await db.select().from(GuestBook);
---

// ...template

Once we catch a POST request, we will want to do a few things before adding the item to the database.

Parse the formData

Let's grab the author and content submitted through the form:

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

// Watch for POST requests
if(Astro.request.method === 'POST') {

  // Parse form data
  let formData = await Astro.request.formData();
  let author = formData.get('author');
  let content = formData.get('content');
}

// Selects all items from the GuestBook table
const guestBook = await db.select().from(GuestBook);
---

// ...template

Data Validation

Prior to inserting the data to the database, it is generally a good idea to add some validation to make sure what is being submitted can be safely added. For the purposes of this simple demo, I'm checking to ensure the data types are valid - be sure to apply proper validation to projects you create!

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

// Watch for POST requests
if(Astro.request.method === 'POST') {

  // Parse form data
  let formData = await Astro.request.formData();
  let author = formData.get('author');
  let content = formData.get('content');

  // Validate that author and content are both of type 'string'
  if (typeof author === 'string' && typeof content === 'string') {

    // Insert data into the database
    await db.insert(GuestBook).values({ author, content });
  }
}

// Selects all items from the GuestBook table
const guestBook = await db.select().from(GuestBook);
---

// ...template

Now when submitting the guestbook form, new items will be added to the database! There is one bug though, if you try to refresh the page after submitting the form, it will cause a re-submit and duplicate the entry in the database. My friend Mayank reminded me that you can utilize Astro.redirect to move users to different pages in Astro, but in this case we just want it to redirect the page back to itself.

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

// Watch for POST requests
if(Astro.request.method === 'POST') {

  // Parse form data
  let formData = await Astro.request.formData();
  let author = formData.get('author');
  let content = formData.get('content');

  // Validate that author and content are both of type 'string'
  if (typeof author === 'string' && typeof content === 'string') {

    // Insert data into the database
    await db.insert(GuestBook).values({ author, content });

    return Astro.redirect('/');
  }
}

// Selects all items from the GuestBook table
const guestBook = await db.select().from(GuestBook);
---

// ...template

Spam Filtering

I was discussing this project over on the Frontend Horse Discord, where Sara Joy had the excellent suggestion of implementing spam filtering.

She had already asked about implementing spam filtering on the Astro Discord, where they gave a great run-down of how to accomplish it:

Have a <form> on your page for submitting to the guestbook, including the honeypot input.
Have a POST endpoint handler in your Astro site that receives the form data.
If the honeypot input has been filled, throw away that submission and return some error.
If not, call the Akismet API to get another check on whether it's spam or not.
If all is well, add the comment to the database and return a successful response.

<cite><strong>— Chris, from the Astro Discord</strong></cite> </blockquote>

Honeypot

We already have our form on the page, so to include a honeypot field, we can inlude just a normal text input that is hidden.

The idea is that bots and automated tools that may attempt to fill out the form will also fill out the hidden field. If the hidden field has been filled out, we can disregard the entire submission as it is most likely a spam post.

<form method="POST">
  <label for="author">
    Author
    <input id="author" name="author" />
  </label>

  <label for="special">
    <input id="special" name="special" />
  </label>

  <label for="content">
    Content
    <textarea id="content" name="content"></textarea>
  </label>

  <button type="reset">Cancel</button>
  <button type="submit">Leave your mark</button>
</form>

I have included an input with the id of special. This can essentially be any unique id that you want it to be, we just need to know which field to look for when there has been a post submitted. I learned that using sort of obvious identifiers like the word honeypot may not work on some spam bots, as they most likely account for that to be a thing.

Inside our POST request check, we can grab the value of the special input and wrap our validation check within another if check, this time making sure the special input is of a falsy value.

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';

// Watch for POST requests
if(Astro.request.method === 'POST') {

  // Parse form data
  let formData = await Astro.request.formData();
  let author = formData.get('author');
  let content = formData.get('content');
  let special = formData.get('special');

  // if special is falsy, proceed to validation
  if(!special) {
    // Validate that author and content are both of type 'string'
    if (typeof author === 'string' && typeof content === 'string') {

      // Insert data into the database
      await db.insert(GuestBook).values({ author, content });

      return Astro.redirect('/');
    }
  }
}

// Selects all items from the GuestBook table
const guestBook = await db.select().from(GuestBook);
---

// ...template

Akismet API

Honeypot checks are a great first step to cutting down on the number of spam submissions you might receive, however there are always going to be some that slip through. A second line defense against spam is reaching out to a service to help determine if the submission is ham or spam, well at least that is how Akismet defines it.

Akismet is a spam filtering service that is used all over the web, particularly due to it's integration within the WordPress platform. They also provide a super generous free tier for their API! If you'd like to use Akismet, you will need to create a free account and register your application to receive an API token.

Once you have an API token, we can include it in the project as an environment variable. In the root of the project, create a .env file with the following contents:

AKISMET_TOKEN={YOUR_TOKEN_HERE}

Copy your API token from Akismet and paste it directly after the = sign. We'll use this in a moment, where we will read the environment variable within our Astro page using the method used by Vite, import.meta.env.

There is a lovely node package useful to work with the Akismet API called @cedx/akismet, which also has excellent documentation.

With it, we can do a few things:

Verify our Akismet API to make sure we are even permitted to check if a message is spam
Pass our form data items to Akismet
Determine whether the submission contains ham or spam

Install the package by running the following in your terminal:

npm install @cedx/akismet

There are several changes we are going to make to our src/pages/index.astro file, so I'll show you up front what it looks like, then I will explain in more detail.

Updated file:

// src/pages/index.astro
---
import { db, GuestBook } from 'astro:db';
import { Blog, Client, Comment, Author, CheckResult } from '@cedx/akismet';

// Watch for POST requests
if (Astro.request.method === 'POST') {
  // Setup Akismet client
  const blog = new Blog({ url: 'https://www.ryantrimble.com/' });
  const client = new Client(import.meta.env.AKISMET_TOKEN, blog);

  // Parse form data
  let formData = await Astro.request.formData()
  let author = formData.get('author');
  let special = formData.get('special');
  let content = formData.get('content');

  // Will be used to validate the Akismet API key
  let isValid = false;

  if (!special) {
    // Check if Akismet API key is valid
    try {
      isValid = await client.verifyKey();
    } catch (error) {
      handleError(error);
    }

    if (isValid) {
      // Check if comment is spam or not
      if (typeof author === 'string' && typeof content === 'string') {
        try {
          let commentAuthor = new Author({
            name: author,
          });

          let comment = new Comment({
            author: commentAuthor,
            content,
          });

          const result = await client.checkComment(comment);

          if (result === CheckResult.ham) {
            // If comment is not spam, push the entry to the database.
            await db.insert(GuestBook).values({ author, content });

            // Finally redirect back to homepage!
            return Astro.redirect('/');
          } else {
            // Otherwise disregard comment.
            throw new Error('This comment has not been published.');
          }
        } catch (error) {
          if (typeof error === 'string' || typeof error === 'object') {
            handleError(error);
          }
        }
      }
    }
  }
}

// @ts-ignore
function handleError(error) {
  if (typeof error === 'string' || typeof error === 'object') {
    const message = error instanceof Error ? error.message : String(error);
    console.log(`An error occurred: ${message}`);
  }
}

const guestBook = await db.select().from(GuestBook);
---

// ...template

We are now importing a few useful tools from the @cedx/akismet package:

Blog - This class is what the @cedx/akismet package uses to represent the URL transmitted when making requests.
Client - Another useful class used to submit items to the Akismet service.
Author - class representing properties common to authors, such as names, email address, and more.
Comment - Similar to Author, the Comment class represents properties common to comments such as authors, content, dates, and more.
CheckResult - Checks whether a comment is ham or spam.

We then instantiate new Blog and Client objects. Pass the same address you used to setup your Akisment API into the Blog.

For the Client, we need to pass in our Akismet API token, which is stored as a environment variable. We can use import.meta.env to access the environment variables within Vite projects such as Astro.

I added an isValid variable which is utilized to validate the Akismet API token. We do this using the client.verifyKeys() method. If we have a valid API token, we are free to move on to the next part.

Next we create two objects for Author and Comment, including the properties we want to have checked by Akismet. To check the items with Akismet, we use the client.checkComment() method.

To recap, here are all the levels of protection we now have in place:

Honeypot field to cut down on the number of spam submissions processed
API token verification, ensures that the validation request is being sent by us.
Akismet API spam checking to catch messages that may have gotten through Honeypot,
JavaScript typechecks in place to make sure the content being posted is in the proper formats

I have a full implementation of this included in the Github Repo!

Deploying

There are few things necessary to deploy this application:

Astro must be in server-side rendering mode to dynamically update the page. This can be enabled within the astro.config.mjs file by adding output: 'server' to the configuration.
Astro must utilize one of the hosting adapter integrations, I'm using the Netlify adapter.
Push project up to Github.
Set up your project within Astro Studio with these instructions.
Connect your site to your hosting provider. Make sure to include your Astro Studio API token as an environment variable on your production builds.

Now, once the site builds and deploys to the hosting provider of your choice, you should have a fully working Guestbook!

Wrap up

The completed project is available to view at: https://astro-guestbook.netlify.app/

Feel free to check it out and leave a comment! You can find all the code here: https://github.com/mrtrimble/astro-guestbook

I'm SUPER excited to see what the creative folks of the web dev community can come up with using Astro DB.

Cool VSCode Plugins

Fri, 19 Jan 2024 12:00:00 GMT

Earlier today over on the Frontend Horse Discord, there was a super interesting discussion on how different folks take notes and what tools they use.

Obsidian and VSCode were compared for their Markdown authoring abilities and the advantage seemed to be leaning towards Obsidian as it allows for things such as pasting URLs over selected text.

I derailed this thoughtful, interesting discussion by being all "hurr durr my VSCode does that durr" and sharing this video:

<figure role="group" class="flow"> <video width="100%" controls> <source src="/videos/my-vscode-does-that.mov" type="video/mp4" /> </video> <figcaption> <p style="padding-inline: 1rem; font-size: var(--step--1);"> Screenrecording showing me highlight the word "amazing" inside of VSCode, then by pasting the Frontend Horse url, it is converted into a Markdown link. </p> </figcaption> </figure>

Of course I quickly realized that this is not because I'm special, it is because of the other awesome developers helping to make great tools even greater: plugins.

Productivity

Markdown All in One

This is the one that I was referring to in that intro and let me tell you, I've had this plugin installed for so long that I actually forgot that it wasn't baked into VSCode.

Markdown All in One by Yu Zhang handles basically everything you'd expect to enhance your Markdown authoring needs.

Link pasting
Table of Contents
Table Formatting
Autocomplete paths
Enhanced keyboard shortcuts
A bunch more things

One caveat, as Mayank pointed out in our discussion - this does not automatically handle .mdx filetypes, however it can be added by associating the filetype to markdown files in VSCode settings.

Press ctrl / cmd + , to open VSCode settings
Search for files.associations
Click Add Item and include .mdx as markdown

If you do any sort of editing of Markdown files, I totally recommend checking this out.

Better Comments

I like Better Comments by Aaron Bond as it helps me easily find places in a file that I may need to revisit, such as: todos, questionable code, or alerts about specific things.

This works by just including certain annotations in your comment such as:

// ! Alerts
// ? Queries
// TODO: Todos

Each end up highlighted differently from other comments.

I like this too as it leads to a nice convention for writing comments, plus it makes searching projects for todo items easier.

Peacock

This is one that might take a little more effort to set up, and I expect few to give it the chance, but Peacock by John Papa helps you change the color of VSCode per workspace.

I don't know if you are all as weird as I am, but I like to make things different colors. It's like 90% of why I'm a web developer for Pete's sake!

That being said, this is also super helpful if, also like me, you typically have many different projects open at a time. That can get confusing since all the windows look the same at quick glance. I usually set the color to a brand color or a darker type color from the projects theme, that way it helps clue me in on which project is which.

GitLens

GitLens by GitKraken is awesome to me for one reason and one reason only: inline blame.

Don't get me wrong, I'm not the type of person to go after someone over bad code (spoiler, it's me - I'm the bad code), but it can be helpful while debugging to know when changes were made, directly in your editor.

Now, does GitLens have other features: probably. I don't know and I don't care, this one thing is all I need it for.

Fun

Stream Deck for VS Code

If you have a Stream Deck, you can make it do stuff in VSCode with Stream Deck for Visual Studio Code by Nicollas R!

Basically it helps you by setting up Stream Deck buttons to run commands, shortcuts, and other things within VSCode.

I wired it up with all the usual node project suspects: npm install, npm start, npm run dont-walk-to-our-summer-savings-sales-event

VSCode Pets

This is the best plugin on this list, VSCode Pets by Anthony Shaw.

You get cats, dogs, snakes, Clippy for some reason, birds, and a few other options for furry friends.

I set up VSCode Pets to represent my real pets, which are the animals who live inside my house.

Automatically import Components in Astro MDX

Fri, 17 Nov 2023 12:00:00 GMT

One of my (very few) complaints while working with Astro was that using components in MDX files tends to be a bit clunky, especially for those who may not be as familiar with how to import things. For example, we have some non-developers that make content updates to our static sites who are most likely unaware of this crucial step.

The Problem

We are converting sites from Hugo to Astro and in Hugo there is a concept of "shortcodes" used inside markdown to easily generate snippets of code. Hugo automatically knows about shortcodes, as long as they reside inside the shortcodes/ folder, in order to be used throughout a markdown file without having to do any imports.

Astro doesn't have a "shortcodes" concept per se, but components are a pretty straightforward replacement. There are two main differences though:

Regular markdown does not understand components, which leads us to utlize MDX instead.
Components are not automatically imported into these MDX files.

Now importing components may not sound like the end-of-the-world, but might cause a lot of unneeded stress the first time someone unknowingly uses a component without importing it first.

The Solution

Over on Mastodon, Roma Komarov had the answer with a recent post called Astro MDX Components.

In the post, Roma explains a very similar use-case for Astro components to our problem with shortcodes. Roma figured out that when rendering a dynamic <Content /> component, you can actually provide it a components prop in order to pass in whichever components you want to be automatically included in the MDX files.

Definitely check out Roma's post for all the details!

Implementation

For my implementation of Roma's solution, I created a mixin file called mixins/autoImportComponents.js which has the one job of returning all the components I've created "shortcodes" for:

import DetailSummary from '../shortcodes/DetailSummary.astro';
import MessageBlock from '../shortcodes/MessageBlock.astro';

export const components = {
  DetailSummary,
  MessageBlock,
};

I chose to do this as a mixin file to quickly include these components in any layout files I might need.

Within [slug].astro (or whatever layout file needed) used for MDX content, I can now import the mixin file and pass these shortcode components into the dynamically created render component via the components prop:

---
import {components} from '../mixins/autoImportComponents';

const { Content } = await entry.render();
---

<Content components={components} />

Now anyone can freely use these shortcode components within MDX files without needing to import first!

CSS-Only Scroll Animations

Fri, 07 Jul 2023 12:00:00 GMT

During CSS Day, Bramus Van Damme did a fantastic two-subject talk on the View Transitions API and Scroll-Driven Animations. I wrote an article for Stephanie Eckles' 12 Days of Web on the View Transitions API over the holidays, and while a lot has changed with it since then, that will be a topic for another blog post. Instead, I want to talk about Scroll-Driven Animations today.

Scroll-Driven Animations usually are something you would need to reach towards JavaScript for, either using something like the Intersection Observer API or a library such as GreenSock Animation Platform to accomplish. However, a new feature is coming to the CSS specification, enabling scrolling as a timeline for CSS animations.

As of the time of writing, CSS Scroll-Driven Animations is an experimental feature that is only available in Chrome 116+ (Use Chrome Canary to test things out!).

New Properties

A couple of new CSS properties control Scroll-Driven Animations:

animation-timeline
animation-range

animation-timeline is used to specify what type of Scroll-Driven timeline will be used, such as a Scroll Progress Timeline or a View Progress Timeline.

Scroll Progress Timelines

The most basic use-case for animation-timeline is creating a Scroll Progress Timeline with the scroll() CSS function:

.animating-element {
  animation: fade-in ease;
  animation-timeline: scroll();
}

The scroll() function can also accept parameters for the scrolling element, or scroller, and the axis in which the scrolling will occur.

The scroller can be set as:

nearest - closest ancestor
root - the document root
self - the element itself

Or can be uniquely named by setting the scroll-timeline-name on the scrolling element.

The axis parameter specifies whether the scrolling will occur on the x or y axis, but can also be used with CSS logical properties such as inline or block.

.scroller {
  scroll-timeline-name: --scroller;
  scroll-timeline-axis: block;
}

.animating-element {
  animation: fade-in ease;
  animation-timeline: --scroller;
}

View Progress Timelines

A much more fun alternative to the Scroll Progress Timeline is creating a View Progress Timeline.

View Progress Timelines can start Scroll-Driven Animations when intersecting with certain parts of the scroller. You may think this is similar to Scroll-Triggered animations, but that is not the case - the animations are still scrubbed through by scrolling.

To create a View Progress Timeline, we can set the view() CSS function for animation-timeline. Similar to scroll(), the view() function can take in the axis of the scroller.

.animating-element {
  animation-timeline: view(block);
}

Where the magic happens is with another new CSS property, animation-range.

animation-range allows you to specify when the animation should start and stop based on when the element is intersecting different parts of the scroller.

The different parts of the scroller are labeled as such:

contain
cover
entry-crossing
entry
exit-crossing
exit

You must specify what percentage of each part as to when the animation should start and stop. The syntax would look like this:

.animating-element {
  animation: fade-in ease;
  animation-timeline: view(block);
  animation-range: contain 0 contain 100%;
}

I would recommend creating CSS Custom Properties to make the start and end points a bit clearer, such as:

.animating-element {
  --range-start: contain 0;
  --range-end: contain 100%;

  animation: fade-in ease;
  animation-timeline: view(block);
  animation-range: var(--range-start) var(--range-end);
}

Bramus has created an excellent tool to help understand this a bit better, I highly recommend checking it out.

Progressive Enhancement

The good news here is that CSS Scroll-Driven Animations are able to be implemented as a progressive enhancement for browsers that will support them.

This can be done with the good old, trusty @supports:

@supports (animation-timeline: scroll()) {
  .animating-element {
    animation: fade-in ease;
    animation-timeline: scroll();
  }
}

This will check to see if the browser knows what animation-timeline: scroll() is and if so, apply the Scroll-Driven Animation.

Accessibility

Similar to progressive enhancement, Scroll-Driven Animations can also respect user's motion preferences by being wrapped inside a prefers-reduced-motion media query:

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .animating-element {
      animation: fade-in ease;
      animation-timeline: scroll();
    }
  }
}

I personally like to use prefers-reduced-motion: no-preference as it is more akin to the user opting into animations, rather than the opposite.

Demonstration

For a more “real-life” example of Scroll-Driven Animations, check out this Codepen I have created:

I recommend checking that out fullscreen on Codepen.

Wrap-up

It's absolutely amazing what CSS is capable of nowadays. It's also great that we are needing less-and-less JavaScript dependencies when it comes to building out things like this. I'm super excited to see all the creative stuff that can be done with Scroll-Driven Animations.

For further reading on Scroll-Driven Animations, please check out these resources:

Introducing CSS Harrisburg

Fri, 30 Jun 2023 12:00:00 GMT

One of the most interesting facts I learned from CSS Day in Amsterdam was that there are over fifty JavaScript-related conferences around the world and only one CSS-specific conference, CSS Day. This fact inspired me. I don't have the means to put on a whole conference on my own, but I figured there might be a small way to do my part.

Introducing CSS Harrisburg - a web developer community group for the central Pennsylvania region!

Don't let the name fool you. Though I am definitely a Frontend Developer and CSS is one of my favorite things - we welcome anyone interested in web development to join!

The Plan

I'm still in the process of working out a lot of the details, but I have a few things in mind for this community:

In-person meetups
Newsletter
Community discussion

In-person meetups

I'll be organizing in-person meetups on a regular schedule, expected every other month.

My goal for the meetups is to be informative and fun at around an hour long. Meetups will be structured to have a presentation and time for networking.

I have a venue in mind and am working towards scheduling the first event!

I'm planning a weekly summary of interesting articles, fun Codepens, and inspiring websites.

For the community, I want to be able to use this as a platform to share member success stories and their awesome projects.

This will also be the place to receive community updates, such as when meetup events will occur.

Community discussion

To help community members keep in touch between meetups, I will be setting up either a community Slack or Discord.

Depending on interest, we may use this as a platform to have community events online as well, such as online presentations, small workshops, or game nights!

How to join

I'm looking for interest in this group at the moment, and the best way to show interest is by signing up for the newsletter on the CSS Harrisburg website.

If you are interested in helping shape the group or would like to pitch a presentation, please reach out to me directly with the contact form here on my website!

Closing thoughts

I'm stepping waaay outside my comfort zone as an introvert here, but I am very passionate about development and want a way to pass knowledge along and learn from others in the process.

Mixing Colors with CSS

Sun, 25 Jun 2023 12:00:00 GMT

How cool is it that we can now take two colors and mix them together in CSS?

If you aren't familiar with what I'm referring to, I'm talking about the new CSS color-mix() function. It is surprisingly straightforward to use and can provide some great results.

`color-mix()` Function

The color-mix() function takes in a couple of parameters: the color space you want to use and the colors you want to mix.

A very basic example looks like this:

.box {
  background: color-mix(in hsl, #ff0000, #0000ff);
}

This will use the hsl color space to mix red (#FF0000) and blue (#0000FF) to make a purple color.

You can do more with it though! We can tell it how much of each color we want to mix in percentages:

.box {
  background: color-mix(in hsl, #ff0000 25%, #0000ff 50%);
}

The hsl color space even provides further control using hue interpolation where we can adjust the hue to give different results:

.box1 {
  background: color-mix(in hsl shorter hue, #ff0000, #0000ff);
}

.box1 {
  background: color-mix(in hsl longer hue, #ff0000, #0000ff);
}

Color Spaces

I can't honestly say I understand color spaces, however, from what I understand, the CSS Color Module Level 4 has introduced several high-definition color spaces. The main thing to grok from this is that HD color spaces provide even more color options than non-HD color spaces.

Adam Argyle has a full write-up on color spaces if you want to understand the technical side of things a bit more.

My point is, with color-mix(), you aren't limited to using just the hsl color space. You can use many of the supported color spaces in CSS (including the new CSS Color Level Module 4's HD color spaces), such as:

hsl
hwb
lab
lch
oklab
oklch
srgb

Demonstration

Here is a small demo using color-mix to provide various shades of a single color by mixing a brand color with the selected white and black colors:

<p class="codepen" data-height="650" data-theme-id="default" data-default-tab="result" data-slug-hash="wvQooqg" data-user="mrtrimble" style="height: 650px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"

<span> See the Pen <a href="https://codepen.io/mrtrimble/pen/wvQooqg">CSS color-mix() Demo</a> by Ryan Trimble ( <a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

I added some JavaScript here as well to demonstrate how this is all handled in the browser. Simply changing the color of the --_brand-color custom property affects the colors throughout the entire layout. Amazing!

Browser Support

The awesome news here is that color-mix() and the new color spaces are supported in all major browsers!

Closing Thoughts

I feel like this is an awesome addition to CSS as a whole. Pairing CSS custom properties with the color-mix function will be super helpful for customizing themes or applying different colors to states such as :active, :hover, and :focus.

For more information on color-mix() or CSS color spaces, check out these resources:

Visiting Amsterdam for CSS Day

Fri, 16 Jun 2023 12:00:00 GMT

Judging from my London Calling and Vue Conf Recap posts from earlier this year, you might get the impression that I travel a lot. That is not the case, just this year happens to be the year we (my wife and I) decided to branch out and explore the world. In fact, before this year, I had never even been on an airplane.

This time we traveled to Amsterdam, The Netherlands, to attend CSS Day — which I found out is the only CSS-specific conference in the world now.

First night in Amsterdam

After a long, nine(-ish) hour total flight from Baltimore to Iceland, then Iceland to Amsterdam, we checked in at our hotel and took a power nap before going out to explore the city a bit.

We originally had booked an upper-floor room as I was hoping to get a good view of the canals, however, the only room the hotel had available to check in early for was a basement-level room. I was disappointed for a moment until we saw the room and realized we were nearly level with the canal which still provided an incredible view.

On the first night, we kept things fairly low-key by taking a walk down some streets and checking out some of the many canals. For dinner, we tried a local automat fast food chain called FEBO. They have a wide variety of items to choose from at FEBO, all inside a vending machine-type wall. We tried fries, croquettes, and burgers all for a few euros each, all pretty good!

First day of CSS Day

The first day of CSS Day! The event was held in the Zuiderkerk, a 17th-century church that is now being used for events such as developer conferences. The Zuiderkerk was about a ten-minute walk from our hotel, which was perfect. We got there early and watched as folks began to arrive.

For breakfast at the conference, we had coffee with croissants and jam. The conference recommended we keep to the “Pac-man” rule of always leaving space in groups for more people to join, which was a great way to meet new folks!

I had the wonderful opportunity to meet my friend Kilian Valkhof who makes my favorite developer tool, Polypane. I've been chatting with Kilian for a while through the Frontend Horse community and it was so nice to meet him in person. A few other great folks I met included James Basoo (who I connected with on Mastodon just before the conference) and had a lovely discussion with Liesbeth Smit and Paul Van Buuren in which we talked about our embarrassing old screen names and websites.

Day one of CSS Day had Adam Argyle as the Master of Ceremonies. Setting <aside> his use of corny developer puns, Adam has a great personality for this type of thing and kept things exciting.

Una Kravets

Una Kravets kicked off talks with her presentation on The State of the CSS Community. This was super exciting to see all the new features of CSS shipping from browser vendors, as well as many new features proposed by the Open UI group being considered.

Una is right, this is a much different time for CSS, I still remember when new CSS and browser features took forever to get implemented. It's a CSS Revolution!

Hidde de Vries

Next up was Hidde de Vries, who talked about a topic I recently researched quite a bit for my post The Popover API is Exciting, sort of - the Popover API.

Hidde walked through how the Popover API works as well as provided some excellent examples as to when to use Popovers and when to use <dialog> elements.

One of the things I was concerned about in my post was browser support for the Popover API and luckily it seems that this feature will be shipping in Safari 17 later this year, which is a great sign for adoption.

Léonie Watson

When I looked through the line-up of speakers and topics, one that piqued my interest was from Léonie Watson on CSS Speech, mainly because I had never heard of it. Well, it turns out that is because it doesn't quite exist yet. During breakfast, I was chatting with Jeremy Keith who said Léonie's talk is a rallying cry to gather support for this concept.

Léonie described how with voice assistants, such as Siri or Alexa, there are ways to manipulate the voice to give it more character using something called SSML. With SSML, you can do things such as adjust the voice as if it were a font, change the pitch of the voice, as well as adjust the rate of speed at which the voice is read. Essentially Léonie is asking: why isn't this a thing in CSS?

Well it turns out, this was in the CSS spec at one point, but was dropped for seemingly unknown reasons.

The main benefit to this would be for assistive technologies such as screen readers, where designers and developers would have the opportunity to provide better experiences for those listening to their content.

This was such an interesting concept and now I'm on board for this to be implemented.

Sanne 't Hooft

Sanne ‘t Hooft's Tinkering at Night talk turned out to be another topic I am not familiar with but was super interesting to see what is capable nowadays with CSS. Sanne demonstrated the superpowers of the CSS trigonometric functions to create stunning animations and potential UI implementations.

As someone who doesn't math very well, this admittedly went a bit over my head, however, I was still able to appreciate these new capabilities of CSS. I was never great at math in school, but it is something I have gotten better at understanding while learning more practical applications for math in programming, this talk inspired me to add these trigonometry features to my list of things to try out.

Patrick Brosset

CSS selector performance is something I don't think about too much and luckily Patrick Brosset shared that, in most cases, this is fine. However, when it does become an issue, it is good to know how to troubleshoot potential problems.

Patrick gave several great tips on how to utilize the browser developer tools to track down problems, as well as potential examples of when these issues might occur.

Heydon Pickering

If you are familiar with Heydon Pickering and his Webbed Briefs videos, this talk was very much in the same vein — which is a great thing!

Heydon spoke about scoping in CSS and how everything in CSS is some form of scoping. They discussed how JavaScript frameworks approach scoping and talked about the @scope feature that will eventually be making its way to browsers.

Hilarious and informative, and absolutely one of my favorite talks from the conference!

Sophie Koonin

Sophie Koonin's talk was a walk down memory lane for me as she described a very familiar start to her web developer journey by building websites on Geocities, learning HTML and styling in places like Neopets and MySpace.

Nowadays the web is, in general, a capitalist hellscape that lacks a certain charm that personal websites promoted back in the day.

Sophie is encouraging people to get weird with the web again and build more personal websites, experiment with things and see what can be done to make the web fun. This is especially true now where maybe getting off of social media networks and owning your data is becoming more important.

Final Day of CSS Day

The second and final day of CSS coincided with my birthday, which being at CSS Day was one of the best ways to celebrate. The conference continued being amazing with more amazing talks and meeting amazing folks.

One of those folks is another friend from the Frontend Horse community, Thomas Michael Semmler. Thomas was such a pleasure to meet and it felt like catching up with an old friend even though we had never met in person.

The Master of Ceremonies for the final day was Michelle Barker, who runs the CSS {In Real Life} blog. Michelle did a wonderful job announcing speakers and providing thoughtful input and questions in the after-talk question-and-answer sessions.

Miriam Suzanne

Container Queries are something that took some time for me to wrap my head around. Initially, I was confused as to what they did differently compared to Media Queries. I did manage to figure that out on my own, however, Miriam Suzanne's talk on the topic further cemented to me that Container Queries have a lot more potential.

Miriam demonstrated the powers of containers and introduced me to container-style queries, which I have been playing with since getting back home. I can see myself re-watching this talk several times.

Also, after the talk, I asked Miriam if the premise of the talk “CSS Containers, What Do They Know?” was a reference to Bojack Horseman (one of my all-time favorite shows) and I can confirm that it was.

Umar Hansa

Umar Hansa presented on using modern tooling to help create and debug CSS. In his talk, Umar showed off many tips on using VS Code to its fullest, including using code snippets, shortcuts, and extensions. Umar also discussed other tools, such as artificial intelligence, to assist in writing code.

This is another talk I want to review as there were many great tips throughout the presentation and had my head spinning with possibilities.

Stephanie Eckles

One of the main reasons I wanted to attend this conference was for Stephanie Eckles as I think she has made the biggest impact on how I write CSS nowadays. I know Stephanie from the Frontend Horse community and was luckily able to attend her Modern CSS Workshop last fall through work.

Stephanie is brilliant with CSS and has so much knowledge on the topic that it seemed difficult for her to contain it in just an hour-long talk.

It was great getting to meet with her in person as well and hanging out under the stairs with her and Thomas is one of my favorite memories from the conference.

Jhey Tompkins

I have been following Jhey Tompkins' work on Codepen for a long time and his creative use of the medium absolutely carried over to live events.

Jhey demonstrated several ways to take something plain and turn it into a fun and memorable experience. The talk itself, for example, had a web page folks could visit and toss emojis onscreen with booming sound effects.

Cassondra Roberts

This is one of the talks that seemed to stick with me more than I initially expected it to. Cassondra Roberts detailed using CSS within JavaScript Web Components and the differences between the light DOM and the shadow DOM.

I have been digging into native web components since this talk, trying to piece together the things Cassondra taught me and mixing them with other things from the conference as well and it's been super fun!

Bramus Van Damme

Originally this slot was for Jake Archibald to talk about the View Transitions API, which he helped pioneer. Since Jake left Google, Bramus Van Damme decided to fill in and give an excellent two-for-one talk on View Transitions as well as Scroll Driven Animations.

Over the holidays, I wrote an article for Stephanie Eckles' 12 Days of Web project on the View Transitions API, so I had a familiarity with the topic and it was interesting to see how much has changed since then. Bramus demonstrated several great examples of how the View Transitions API can work with single-page applications and introduced a method for using them in multi-page applications (also known as websites).

Scroll Driven Animations are another exciting new feature that I'm excited to play around with. Looking at Bramus' demo site for the feature, there appears to be a lot more potential here than I originally thought. Bramus also showed possible ways to combine Scroll Driven Animations with other features to perform Scroll Triggered Animations. It will be interesting to see how this gets finalized in Chrome and when other browser vendors adopt it.

I also got the chance to talk shop with Bramus a bit on the first day and it was great meeting him!

Manuel Matuzović

For the final talk at CSS Day, Manuel Matuzović walked us through his evolution of writing CSS over the years. Manuel made it his mission to keep up-to-date with the latest modern CSS with a project where he focused on a different topic each day for (over) 100 days called:

#100DaysOfMoreOrLessModernCSS

Manuel's process felt very similar to how I've approached learning new CSS concepts, typically focusing on one thing until I understand it. I enjoyed Manuel's talk. He showed several modern techniques that I had not seen before, such as using container-style queries similar to how Sass mixins work.

Saturday in the City

While in Amsterdam, there were several things I wanted to check out, but had little time to see everything. Sights such as the Van Gogh Museum and the Anne Frank House were booked out a month in advance, so, unfortunately, did not get to see these. Even still, we did manage to pack a lot of sights in on the Saturday after the conference.

Rijksmuseum

The Rijksmuseum is certainly a must-see if you are visiting Amsterdam. I never feel super excited about visiting museums for some reason, but I always lose my mind while I'm there.

Primarily the Rijksmuseum is an art museum of many of the dutch-masters such as Rembrandt and Vermeer.

Seeing Rembrandt's work in person, such as The Night Watch, was incredible.

KattenKabinet

The KattenKabinet (or Cat Cabinet) is a museum for all things cats. Many movie posters, advertisements, sculptures and paintings all depicting cat imagery are found all over the halls. They even had a quite serene garden outback containing even more cat-themed pieces.

One of the best and probably most obvious parts of the cat museum is that live cats are roaming around. This was certainly a highlight of the trip for my wife.

Vondelpark

On our way to find our dinner spot, we strolled through Vondelpark which is one of the largest parks in the city.

As the weather was great (basically every day while we were there) there were tons of people out. It was a lovely change of pace from walking through the city streets.

FoodHallen

For dinner, we went to FoodHallen which I can only describe as a shopping mall food court cranked up to 11. There are several restaurants inside with many different cuisines and was very crowded.

We had the Dutch specialty Bitterballen, of course!

Closing Thoughts

This trip was incredible for me!

Amsterdam is a wonderful city, much greener than many cities here in the US. The many flowers and trees all along the canals were quite beautiful.

Getting to attend a conference on a topic that I'm quite passionate about and meeting wonderful folks that share that same passion was wonderful.

I honestly never thought I would get to meet some of the folks I have become friends with over the past couple of years in person, but I was overjoyed at the opportunity.

I learned so much and have already begun digging into some of the topics further to get a better understanding, expect more blog posts on some of the things I'm learning about.

Thank you to PPK, Krijn Hoetmer, and everyone else who helped make CSS Day an amazing experience!

I think I am going to try and make this event a yearly occurrence!

Vue Conf Recap

Mon, 29 May 2023 12:00:00 GMT

I had never been to New Orleans, a developer conference, or eaten gumbo, so there were a lot of firsts for me on this trip.

We had six members of our development team attending the conference, including our documentation specialist (and my wife!).

New Orleans

When you think about New Orleans, you probably think about parties, great food, and music and the city certainly delivered. I'm keen on two of those three things, but the trip was an overall success.

Ace Hotel

The Ace Hotel had a great vibe to it. The lounge was cool with lots of great furniture pieces, a bar, plants and a piano scribbled with signatures. There was an old-timey photo booth outside the elevators on the first floor, modernized and fashioned with a credit card reader to encourage usage.

I particularly enjoyed the signage throughout the hotel, often painted directly onto the walls, pointing out key features, directions, and the many restaurants available.

The vibe continued when we entered our hotel room - dimly lit with classic New Orleans Jazz already playing on the radio.

We unpacked our belongings, took a quick nap, and prepared for dinner with the team!

Cochon

A fan-favorite restaurant on our dev team from the previous Vue Conf held in New Orleans is Cochon Restaurant. This was before my time with the team, so I was not quite sure what to expect when I got there, especially since I had no idea what some of the dishes were when looking at their menu online (I'm quite unsophisticated when it comes to food).

That being said, they did have a chicken and andouille sausage gumbo that was incredible, especially paired with their macaroni and cheese casserole. Others on our team enjoyed the rabbit and dumplings, fried alligator, and smoked beef short ribs.

For dessert, I had a banana-spiced cake that contained milk jam, banana cream, and caramelized banana on top. I feel like I will be dreaming of this dessert for a while.

Vue Conf

Vue Conf was held inside the Ace Hotel, so we didn't have to go too far to attend.

The conference was three days in total, one day for workshops and two for talks. They provided breakfast and lunch, with coffee and snacks available throughout the day.

One of the absolute best things about the conference was that they hired Ken LaFrance to be the master of ceremonies. Ken kept things so entertaining by mixing humor with interesting facts about New Orleans, excellent crowd interactions, and playful introductions to speakers. I wish Ken hosted every event!

Workshops

I participated in Nailing it with Nuxt 3 - Inside and Out workshop hosted by Daniel Roe. Daniel leads the Nuxt core team, so, as expected, was super knowledgeable on the topic.

I did make the mistake of entering the workshop a tad later than others, regrettably sitting in the last row. My eyesight is pretty awful.

In the workshop, Daniel walked us through many of the key features of Nuxt that separate it from similar tools, such as modules, auto-importing components, layers, directory-based routing and tons more. One of the more interesting pieces he dived deep into was the Nitro server engine, which I feel will be very interesting to dig into on my own.

As a more hands-on example, we got some time to play with Nuxt by building a To-Do list application. I managed to get mine to add and delete to-do items, so I consider that a success.

I'm very glad I did some preparation work before the conference by building an application with Nuxt, as this helped me follow along quite well (even though I could barely read the screen).

All-in-all, I'm looking forward to using Nuxt more often in projects I build. I'm hoping we can find a way to utilize it in our workflow at work.

Presentations

The first day of talks began with Evan You presenting the keynote "State of the Vuenion."

This, of course, provides a lot of detail on the most recent version releases of Vue, including the latest Vue 3.3. This release contains a defineModel feature that will help with creating components that utilize two-way binding.

Evan also talked about the future of Vue involving "Vapor Mode" which he claims will make Vue more performant and use less memory. This an exciting development that I'm looking forward to being released.

Alex Harding from RTI International discussed how helpful it is to understand the data when creating interactive and story-driven visualizations. I reflected on this from the point of view of a user experience developer and how it is helpful to understand the needs of a user to deliver the best possible experience.

Daniel Kelly from Vue School gave an awesome talk on common patterns that will help large-scale applications. A lot of common-sense advice that I'm hoping to bring to my workflow when developing Vue applications.

NuxtLabs CEO, Sébastien Chopin, presented a live coding demonstration of building an application with Nuxt. He utilized many of the features of Nuxt to build a simple "Coffee or Tea" voting application where audience members could log in and vote.

Mark Noonan presented "Testing Vue Components with Cypress" where he walked through finding and correcting errors with Cypress. Testing is something I admit I am not very good at, but Cypress makes it look quite easy. I will be investigating this further for sure.

Cecelia Martinez presented an awesome solution for building mobile applications using Nuxt and Ionic. Using just a single Nuxt codebase, you can compile applications for native iOS and Android applications - this made me feel like I gained a skill.

There were quite a few more talks and all of them were great! I feel like I was able to pull something of value from every presentation!

Favorite Talks

Many of my favorite talks during the conference weren't necessarily as Vue-centric as the rest. Although what these folks presented certainly pertains to Vue, they can give a broader understanding of the tools and techniques for developing websites and applications.

Phil Hawksworth

Phil Hawksworth's presentation called "Render when? Render where? Render why? Render what?" broke down the various acronyms (such as <abbr title="static site generator">SSG</abbr>, <abbr title="server side render">SSR</abbr>, <abbr title="client side render">CSR</abbr>, and so, so many more...) for building and rendering sites and apps used within our industry, explaining when might be best to use some over others.

Ultimately, as his presentation repeatedly informed us, it depends on what you are trying to accomplish. Phil explained his approach, using the "rule of least power" to figure out the best option for rendering.

I think Phil's presentation was super entertaining as well, mixing humor into what he was saying and into his slide deck.

Homer Gaines

Homer Gaines' presentation was mesmerizing. Homer began his talk with photo slides depicting Tenji blocks in the streets of Japan. He gave the history of the Tenji blocks and how they assist folks with sight-related disabilities to navigate cities via sidewalks.

From there he segued into how folks with accessibility needs may navigate applications and websites, such as through keyboard navigation. Keyboard traps are a common accessibility pitfall that developers can face when designing interfaces and should be tested and corrected.

Homer gave a rare live-coding demonstration, displaying how utilizing semantic HTML can correct a lot of these types of issues. He also demonstrated a package called Vue Keyboard Trap that adds a Vue directive that contains keyboard navigation when certain elements such as a modal are active.

Felipe Flor

Felipe Flor, a developer from Brazil who works for Vehikl, presented on developing with Vite.

Felipe seems like a genuinely passionate developer. He expertly described what Vite is and how it is helpful as a build tool. He presented a comparison between Vite and Vue CLI (which utilizes Webpack) and how much faster Vite can launch an application.

Speed is not the only reason to enjoy using Vite though, as it is highly customizable and simple to work with. To show this, Felipe converted an application from Vue ClI to Vite, which involved removing several packages and adding a small config file. Within just a couple of minutes, the application was converted and running in the browser.

This was particularly relevant to our team as we are working through converting applications to Vite.

My Key Takeaways

There were a couple of common threads throughout the conference and one thing that caused the audience to cheer during the presentation.

Nuxt

Nuxt was repeatedly brought up in nearly every talk. I feel like this is similar to the React/Next situation where it is the recommended way to build Vue applications.

Though not nearly as drastic as the create-react-app drama, since Vue and Vite are still a pretty powerful combination, Nuxt just gives you a lot of great functionality out-of-box and provides a thoughtful developer experience.

Typescript

Another thing that pretty much felt like a standard approach is the use of Typescript.

I get this sentiment and I fully intend on making this my next mission when it comes to learning, but I also sort of dread it. I have slight experience with Typescript, but ultimately it just felt like JavaScript that yells at you. For type safety, code suggestions, and tons more, Typescript certainly can be a good thing though.

FormKit

I feel like FormKit might have stolen the show for many folks.

Justin Schroeder from FormKit, presented the thought process used when developing FormKit and explained how they managed to extract the essence of web forms into the tool. Developing forms is generally very hard, especially large forms, but FormKit seemingly makes it way easier.

I had previously heard of FormKit but mostly thought it was another component library to reach for building forms. Though that is part of it, seemingly you can utilize any components you want.

FormKit itself essentially maintains the structure of forms under the hood, making it very easy to build complex forms.

This is one I will definitely be digging into further, expect a blog post on this in the future.

Preparing for Vue Conf with Nuxt

Sun, 21 May 2023 12:00:00 GMT

This upcoming week my team and I will be heading to New Orleans, LA to attend Vue Conf! This will be my first-ever developer conference which should be very fun.

I signed up to attend the "Nuxt - Inside and Out" workshop by Daniel Roe and I'm very excited about it.

About Nuxt

Nuxt is a meta-framework for Vue and provides a lot of great functionality out-of-box. I didn't want to go into the workshop completely blind, so I decided to make a small application to test it out.

Technically this isn't the first time I've used Nuxt, but this is my first time using the latest version, Nuxt 3.

Nuxt 3 includes several great features including:

Vue 3 and Vite for superfast development.
Easy-to-understand directory scaffold.
Server-Side Rendering with many supported hosts.
Modules to quickly integrate other tools.

My Nuxt App

I decided to build a small application for users to keep track of their purchased music. This was inspired by Andy Bell's music collection site and my newfound love of collecting vinyl records.

I wanted users to be able to log into the app and update their libraries, this meant that I needed to have authentication, databases, and some sort of music search.

This post is intended as a summary of how I built the application using Nuxt, but if you'd like to check out the full code, it is available on GitHub!

Supabase Nuxt Module

Supabase is a great open-source alternative to Google's Firebase that provides databases and authentication. I have used Supabase before for other projects, but it was made even better when I discovered there was a Supabase Nuxt module available to be installed.

Nuxt modules are plugins to enhance your Nuxt application or connect with third-party tools, such as Supabase.

Using Supabase's authentication, I was able to set up GitHub and Google as authentication providers for my application.

One of the great things about Nuxt is that it makes routing a lot more straightforward. You can just add a .vue file to the pages/ directory and Nuxt will automatically build routes for it. Some routes should not be accessible by unauthenticated users, though - but this is where Nuxt's middleware comes in handy.

Using the middleware, you can set up authentication criteria and redirect users who are not logged in, creating route guards.

Also, since I was already using Supabase for authentication, it made sense to continue using Supabase for storing data. Of course, the Supabase Nuxt module made querying the database straightforward as well.

Music Search

For music searching, I created an <abbr title="application programming interface">API</abbr> key with Discogs. Discogs itself is an online platform for managing your music and luckily have a free API to interact with its massive database of music.

Although there are many ways to build a music search engine, I wanted to experiment with Nuxt's ability to have nested routes. For this, I created a multi-step form where:

The user would first search for an artist
After selecting the artist, they could select a specific album from that artist
In the final step, the user could select what media format they own (CD, Cassette, Digital, or Vinyl), rate the album (out of five), and select their favorite track from the album.

To build the multi-step form, I needed to have some sort of state management. Since Nuxt is based on Vue, the best choice for state management is Pinia. Using Pinia, I can keep track of the form data while users traverse the nested routes.

User Profiles

I made a simple user profile page that can be viewed by browsing by the user's ID. This is handled by Nuxt's routing also.

With Nuxt, you can create dynamic routes by putting brackets around the file name like [id].vue. This allows you to grab the ID parameter from the URL and use it on the page, in my case I used this to query the database looking for data related to that ID.

Things I like

In my opinion, if you use Vue, Nuxt 3 has one of the best developer experiences I've come across.

One of the simplest and most convenient things about Nuxt is that you do not need to import components as any component you create within the components/ directory is globally available. This makes using components easier and keeps code cleaner.

The fact that Nuxt makes routing easy is also a huge win in my opinion, with nested and dynamic routes providing more possibilities for your applications.

Wrap up

I am looking forward to learning more about Nuxt from the workshop and in general looking forward to Vue Conf itself. I've never been to New Orleans, but I've heard it has a lot of great food. Plus I will get to spend some time with some of my team members that I don't typically get to see since they work remotely from other states.

I plan to have a post-conference write-up once I get back, so keep an eye out for that!

Accessible Slider Attempt

Mon, 08 May 2023 12:00:00 GMT

Sliders/carousels are pretty much the banes of user experience design. Though they can be nice to look at, they aren't the most user-friendly component and have a reputation for not being accessible.

I took a stab at creating one with some accessibility considerations in mind, though I'm certain there still could be improvements added.

Codepen Demo

<p class="codepen" data-height="500" data-theme-id="default" data-default-tab="result" data-slug-hash="bGmYWbG" data-user="mrtrimble" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"

<span> See the Pen <a href="https://codepen.io/mrtrimble/pen/bGmYWbG">Carousel Slideshow with CSS Scrollsnap</a> by Ryan Trimble (<a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Considerations

Here are a few things I figured would help make this component more accessible.

Skip Link

I have added a link to skip the slider entirely. I figured this might be beneficial to folks traversing the page via keyboard by providing a way to forego tabbing through each slide individually.

Navigation

The star of this component is <abbr title="cascading style sheets">CSS</abbr> scroll snapping. Scroll snapping provides a few benefits out-of-box:

Able to scroll using the element's scrollbar
Works with mouse scroll wheels
Keyboard arrow keys also scroll through the slides
Also automatically works with touch-enabled devices

I did also add in "previous" and "next" buttons to scroll through the slides by clicking. I did this by calculating the full width of all the slides divided by the number of slides and using that to either scroll forward or backward depending on which button is clicked.

No Autoplay

Instead of having the slider automatically switch between the slides, I have opted to make it more of a self-driven experience so users can browse that their own pace.

Also, this element does not loop. I feel like having a clear-cut start and endpoints help prevent keyboard traps.

Other Features

Aside from attempting to make it as accessible as possible, I also added the ability to easily alter the slides.

Using CSS Custom Properties:

You can set the number of slides to be shown at a time
Easily adjust the height

Enhancements

I do feel there is still room for improvement on this component. One idea I had was using aria-current to specify which slide is the current slide.

I posted about this on Mastodon asking if any other considerations that might help improve this component.

Bob Monsour replied suggesting to hide the previous and next buttons when the scroll position is at the start or end of the slides. I haven't quite figured out how to implement that yet, but it is a solid suggestion!

If anyone has any other suggestions or enhancements (or if there are things I have just flat-out ignored), please reach out to me and let me know! I'm available on Twitter, Mastodon, and through the contact form on my site.

The Popover API is exciting, sort of

Sat, 29 Apr 2023 12:00:00 GMT

At work, there is a particular component in our design system that I have made obvious I dislike immensely, yet I have not been able to figure out a solid replacement. We call it the "Info Box" and it's essentially just a tooltip-style element that can contain more text and actions.

I'm not fond of it for several reasons, but mainly I dislike it because of the number of times we run into issues using it due z-index stacking.

While researching a few ways to make this component better, I have come across the new Popover API that has certainly piqued my interest.

The long and short of the Popover API is essentially it can turn any element into a top-layer popover. This means elements can live outside <abbr title="document object model">DOM</abbr> structure, and the z-index stack, potentially helping with issues such as what we are facing with the Info Box.

A very important note: This is an experimental API and should not be used in production. The Popover API is currently only available in Chrome Canary but is planned to be available in standard Chrome starting with version 114+.

The Good

The Popover API is being developed as a native web API proposed by the Open UI group. The proposal had several great goals in mind for how popovers should function.

Accessible by default

Accessibility is an important consideration for any new features being added as native web APIs. The proposal for the popover API ensures a few things so popovers are accessible by default.

Popover elements are still semantically relevant to the DOM, however, they are rendered in a layer on top of all other content. Elements in the top layer still retain all semantics, user input, and focus.

Only one popover can be active at a time. Any elements added to the top layer will cause existing top-layer elements to be removed. This will prevent confusion or annoying interface behaviors that could be caused by popovers stacking on top of each other.

Also, popovers include built-in "light dismissal" functionality, which means that users can close a popover with the Esc key or click outside the popover as a default action. No need to write JavaScript to handle these actions.

Ease of use

To create a popover, simply add the popover attribute to an element within the HTML.

<div id="my-popover" popover>
  <p>This is a popover!</p>
</div>

The default value for the popover attribute is auto which enables the standard behaviors such as the light dismissal. If you are using JavaScript to control the popovers, the value of manual can be set to remove these standard behaviors.

Elements with the popover attribute are hidden with display: none until opened. Active popovers are position: fixed and centered in the viewport, with a barebones styling of white background and black border.

There are a few ways to activate popovers, but as part of the proposal, popovers can be opened without needing any extra JavaScript using popovertargetaction and popovertarget attributes.

Target actions include toggle to open and close, show to open, and hide to close popovers.

Targets point to the id of the popover that the selected action should happen to, for example:

<button popovertargetaction="toggle" popovertarget="my-popover">Open Toast</button>

<div id="my-popover" popover>
  <p>This is a popover!</p>
</div>

This button will open and close the popover element with the id of my-popover.

Popovers can be styled like any other element with <abbr title="cascading style sheets">CSS</abbr>. Popovers can be targeted for styling using the popover attribute:

[popover] {
  background: white;
  border: none;
  box-shadow: 0px 30px 80px rgba(0, 0, 0, 0.07);
  inline-size: min(100% - 1rem, 60ch);
}

Similar to the <dialog> element, backdrops can be styled using the ::backdrop pseudo-element.

[popover]::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

<figure role="group" class="flow"> <video width="100%" controls> <source src="/videos/popover-api-demo.mp4" type="video/mp4" /> </video> <figcaption> <p style="margin-inline: 1rem">Video showing the Popover API in action.</p> </figcaption> </figure>

There are also JavaScript events and methods to work with popovers available as well.

The two methods are showPopover() and hidePopover() which can be used to show and hide popovers respectively. Similarly, onpopovershow and onpopoverhide are the two new events that can be used to trigger further functionality when popovers are utilized.

The Bad

Browser Support

The most obvious issue with the Popover API is the lack of browser support.

This reminds me of the View Transitions API, which is a Chrome-only API that I'm not sure will make it into other browsers (I certainly hope so!). Unlike the View Transitions API though, Popovers are not necessarily something that can easily be used as a progressive enhancement.

As it is still definitely experimental and was proposed by Open UI, I'm hoping Popovers can gain some traction with other browsers.

Alternatives

The most similar alternative to Popovers is the <dialog> element, but there are some key differences:

As far as I'm aware, the <dialog> element can only be opened and closed within JavaScript.
<dialog> does not have the same automatic light dismissals that Popovers do, another consideration that would need to be handled by JavaScript.
I'm also not sure I would consider every element in the top layer to be a dialog, so semantically sometimes it may make sense to use different elements.

Wrap up

It's difficult to see solutions to problems you are facing just out of reach like this, but I am still very excited to see how the Popover API evolves -- hopefully being adopted by more browsers.

There are so many new features being proposed, developed, and added to the web which will reshape the way we develop websites and applications. I'm always excited to learn more about new and potentially helpful features.

The Mountain Goats at XL Live

Sun, 23 Apr 2023 12:00:00 GMT

The Mountain Goats are currently on their "Spectral Tide" tour after releasing the album Bleed Out, back in the fall of 2022.

I went out to the Harrisburg, PA tour stop to watch them perform at the XL Live. It was my first time visiting the venue and was super impressed with it, definitely look forward to my next visit.

Adeem the Artist

Adeem the Artist is a non-binary, alternative country musician and they ruled!

When it comes to country music in central Pennsylvania, I tend to be a bit disenfranchised. I have listened to country music pretty much my whole life, mainly due to geographical reasons. Although there are certainly some great country artists out there, it is not my cup of tea. That said, I have been interested in some alternative country performers recently and Adeem the Artist certainly piqued my interest.

Adeem's setlist included some great songs such as I Never Came Out, personal favorite Going to Hell, an awesome cover of The Joker by the Steve Miller Band, and Cast-Iron Pansexual.

Adeem was super fun and talented and spoke on some very important issues facing the LGBTQ+ community, specifically around trans rights in their home state of Tennessee.

The Mountain Goats

I'm trying to buy more music rather than relying solely on streaming services. In doing so, I'm following more bands on Bandcamp, which is where I noticed the Mountain Goats would be playing nearby. I've been listening to them for years now, so I was excited at the idea of seeing them live.

I was captivated throughout the whole performance! Luckily we were able to get pretty close to the stage for their performance. Their setlist was broken up into four sections: full band performing, a solo set by frontman John Darnielle, the band returns, and finally an incredible encore.

First set

The band came out playing In the Craters of the Moon from their Heretic Pride album, which is a great song to hype up the crowd.

I was immediately impressed with Matt Douglas, who started on saxophone but swapped between guitar, keyboard, synth, and vocals - sometimes seemingly within the same song.

John Darnielle Solo

John sounded great and you could tell he was having a lot of fun.

His solo set included Night of the Mules, Grendel's Mother, Jaipur, and Color in Your Cheeks.

Amusingly, someone in the crowd called out for him to play Noctifier Birmingham as that song specifically calls out Harrisburg, PA in the chorus. John admitted though that he tried to play it the night before in Philly, but forgot how to. Considering The Mountain Goats' prolific discography, I can see forgetting how to play some songs.

Second set

The band returned playing Lizard Suit from their album, Dark in Here.

The second set also included some of their more well-known tracks Love Love Love, Up the Wolves, and This Year which had the crowd singing along.

Encore

As someone who spent a lot of time going to hardcore and death metal shows in my younger days, encores are something I'm still getting used to. Like they are this formality type thing at concerts: the band leaves, the crowd cheers, then the band comes back out. It's sort of weird.

To be clear, I'm not complaining - especially with this particular concert as they wrapped up the encore with my favorite song and the song that introduced me to The Mountain Goats, No Children.

I Love Cartoons

Mon, 17 Apr 2023 12:00:00 GMT

One of the many reasons I'm so drawn (lol, drawn) to <abbr title="scalable vector graphics">SVG</abbr> art and animation on the web is I love cartoons. Anything from comics and graphic novels to major 3D animated movies.

Cartoons are a versatile medium that offers a range of stylistic possibilities. From the unique use of color and surreal settings to the different types of animation techniques used, cartoons can be a feast for the senses. They often feature talented voice actors, beautiful scores, and fun sound effects that enhance the viewing experience.

Whether telling engaging stories throughout a season or through simple one-off episodes, cartoons are enjoyable for people of all ages.

A few great shows

Bojack Horseman

Bojack Horseman is not only my favorite animated show, but one of my favorite shows of all time. For a show based on anthropomorphic animals, its ability to reflect on real human emotion is top-notch.

On the surface, there is great humor in the form of well-written dialogue, animal-based puns, and tongue twisters. Diving deeper you will find an incredible cast of characters voiced by talented actors and an overarching throughline of a deeply broken person (or horse, in this case). An exploration of depression and substance abuse and the effects on relationships.

The episode titled "The View from Halfway Down" from season 6 is my absolute favorite episode and also one I never want to watch again.

Bojack Horseman was created by Raphael Bob-Waksburg and can be watched on Netflix.

Arcane

As someone who has never once been interested in the <abbr title="multiplayer online battle arena">MOBA</abbr> game League of Legends, the show based on the game is very good.

Arcane has an incredible blend of 2D and 3D animation, with sequences reminiscent of Spider-man: Into the Spider-verse. The creators provide such an emotional depth, bringing life to each character.

I was not prepared to enjoy this show as much as I did and am eagerly awaiting the second season.

Arcane was produced by Riot Games with showrunners Christian Linke and Alex Yee. Arcane is available on Netflix.

Over the Garden Wall

Each year during fall, my wife and I have what we call a "Fall Day" where we get some soup, fall desserts, warm apple cider, and watch Over the Garden Wall.

The mini-series from Cartoon Network is ten 15-minute episodes with gorgeous set pieces, beautiful folksy music, and a touching story of two brothers lost in the Unknown.

Over the Garden Wall has an amazing cast of voice actors such as Elijah Woods as Wirt, Collin Dean as Gregory, Melanie Lynskey as Beatrice, and Christopher Lloyd as The Woodsman. There are also great cameos by John Cleese, Chris Isaak, Tim Curry, Shannyn Sossamon, Thomas Lennon and many more.

My favorite episode is "Welcome to Pottsville" which captures the feeling of the fall season in ways I've never seen before.

Over the Garden Wall was created by Patrick McHale and animated by Nick Cross and is available to watch on HBO Max.

The Owl House

The Owl House is something I never would have expected to see come out of Disney as its main themes are demons, witches, and inspiring examples of representation for the LGBTQ+ community.

The misunderstood Luz finds herself in the Demon Realm, where she meets up with Eda "The Owl Lady" and the demon, King. Luz is captivated by this new world and sets off on adventures to learn magic as a human, find friendship and love, and battle against an oppressive emperor in the process.

Although The Owl House was canceled prematurely, the crew behind the show still managed to create an excellent ending to the series.

The Owl House was created with lots of love from Dana Terrace and can be watched on Disney+.

Creative Takeaways

As a designer and developer, I feel that there are a lot of lessons to be learned from cartoons. I think cartoons can help you use your imagination to think a bit more creatively:

Noticing smaller details in scenes teaches you how to make a more complete design.
Observing how characters interact with their surroundings to understand real-world interactions.
Appreciating the fluidity and movement in animation to inspire dynamic and expressive creativity.

Watch more cartoons!

Arc Browser is Awesome

Sat, 15 Apr 2023 12:00:00 GMT

Arc browser, by The Browser Company of New York, is a new Chromium-based web browser that I have been using as my daily-driver browser. Arc is a refreshing take on a web browser in my opinion and has a few standout features.

Great Features

Arc has a lot of functionality built in that I like a lot. Many of these features could probably be attained through extensions in other browsers like Chrome and Firefox, but having them available out-of-the-box is super convenient.

Split Screen Tabs

One of the nicest features, which I'm surprised other browsers haven't added, are split-screen tabs.

Arc can split-screen in either horizontal or vertical layouts, and can quickly swap between the two. You can join two existing tabs together or separate existing split-screen tabs.

For development, it is nice to be able to have your project and technical documentation open side-by-side.

Screenshots

The built-in screenshot tool is a super convenient feature. You can grab screenshots of the full-page, specific elements by hovering, or portions of a page by dragging to select.

With Chrome, this is functionality that I usually need to reach for in an extension.

Workspaces

You can split up groups of tabs into easily switchable workspaces in Arc. I find this helpful whenever I want to have a separation between personal browsing and work-related tasks.

Workspaces can be customized, given different colors and names to help distinguish between them.

Boosts

Boosts are super neat. I'm not sure I have found a practical use case for them yet, but as a developer, I find them very interesting.

Boosts give you the ability to add custom CSS or JavaScript to websites that you visit. These custom scripts and styles are persistent as well, so they will be applied anytime you visit a site where one is enabled.

One Drawback

The main thing I want from Arc is for it to become available on more operating systems. Currently, Arc is only available on macOS and iOS, with browser sync happening within iCloud.

I am device agnostic. I use a Macbook, a Windows desktop, and an Android phone. It would be great to be able to use Arc on each, as well as synchronize my settings across devices. Arc for Windows is in the pipeline, so there is hope that it will become available for more devices.

Closing Thoughts

I'm looking forward to how Arc browser evolves over time. Arc has received frequent updates as they are on a weekly release cycle. Their changelog is usually a fun read too.

As mentioned, Arc is currently only available on Mac and iOS. At the time of this writing, Arc is also invite-only, but you can sign up to receive an invitation on their website.

Why Astro is my Favorite Framework

Sun, 09 Apr 2023 12:00:00 GMT

I have been following the development of Astro pretty much since the beginning. I feel like it is definitely at the point now that it is easy to recommend it when building a new website.

Experience with Astro

I think what made me seriously look into Astro was how frustrated I was with the tools we were using at work. We use a mish-mash of Jekyll and Hugo for static sites and there seems to be frustration around developing with them.

It feels like every time we run into an issue with Hugo, we spend a decent amount of time perusing forums for answers that aren't there. The community around Hugo also tends to be a bit irritable and unwelcoming, so it might be difficult to get answers.

I tested out a couple of options: 11ty and Astro - both are great tools with incredible communities and ultimately would recommend either. Personally speaking, the development experience with Astro is just a tad better.

Astro makes things very straightforward. It uses JavaScript for templating. Pages, layouts, and partials are all Astro components. It has very simple flat-file routing. Also, their docs are incredible.

While researching if it would be a good option at work, I was able to start building things very quickly. I built four small projects while learning what Astro had to offer:

Who's that Pokémon?

Who's that Pokémon is a small application I put together that displays a randomly selected Pokémon and reveals which one it is after 5 seconds.

The interesting thing with about this project is that it happens with no client-side JavaScript. Using Astro's server-side JavaScript, I made it so it will fetch from the PokéAPI and render it at page load with Netlify's <abbr title="server-side rendering">SSR</abbr>.

RIMdev Radio

RIMdev Radio was a small project I created to display some of our dev team's favorite music and manage a Spotify playlist. It didn't quite work out the way I was hoping, but that was more so my fault for not understanding the limitations of the Spotify API.

With this project, I was able to test out Astro's component islands by using Vue alongside Astro. It was ridiculously easy to integrate and worked just as you would expect it to.

I also was able to connect this to a Supabase database easily and deploy it on Netlify using server-side rendering - this means as the database updates the site will stay up-to-date without needing to rebuild.

RIMdev Likes Food!

RIMdev Likes Food! was another team-oriented project, basically a way to list out the team's favorite places to eat. The site uses Mapbox to map out all the restaurant locations.

The goal of this project was mostly to play with content management, using Markdown and MDX to display content. Each restaurant is a Markdown file that includes frontmatter data to populate information on the page, including the GPS coordinates for the map.

Friday Talk

We do Friday Talks at work where any member of the dev team can give a presentation on whatever topics they find interesting - they don't have to be work or dev related, but I often use these as an opportunity to talk about whatever it is I'm currently excited about.

I made a slide deck and built a small site to demonstrate Astro's component islands for a talk. I had a Vue, React, and Svelte component all loading on the same page. I also demonstrated Astro's ability to use MDX by including a component inside a Markdown file.

I believe this helped us decide to use Astro as a replacement for our static sites, as we started converting to it shortly after. We have converted about 4 of our sites now, with only a couple more left to do.

Favorite Features

Astro has a lot of functionality that helps make its development experience great. Here are a few of my favorite features.

Content Collections

Content collections are a newer feature as they were only introduced in version 2.0 of Astro, but were a life-saver during our conversions at work.

These are essentially just a way to organize groups of related content into folders, outside of the flat-file routing structure.

Content collections introduced a few great features along with it though:

Using Zod, you can set up a schema for markdown and MDX files to ensure you are always providing the right data in Frontmatter.
Customizable slugs that enable you the ability to alter the permalink of posts. This came in very handy with how some of our website URL structures were set up.
The getCollection() function provides an easy way to grab all the files inside a collection.

Component Islands

We are a Vue shop at work, so being able to easily implement Vue components is super nice. Of course, this doesn't just work with Vue, just about any reactive <abbr title="user interface">UI</abbr> framework is available as an integration.

The component islands are amazing as they provide a way for developers to utilize tools that they are already familiar with or even component libraries that they built previously to integrate easily into any Astro project.

Bonus points, since Astro runs JavaScript at build time, these components can render plain HTML or be hydrated to run inside the client's browser.

Integrations

As previously mentioned, Astro has integrations for most reactive UI frameworks, such as Vue, React, and Svelte, but they also have a bunch of other great tools to enhance websites as well.

I am using a few integrations on this website:

Sitemaps - Generates your website's sitemap at build time.
Robots.txt - Creates a robots.txt file for your site.
Compress - Minifies all HTML, CSS, and JavaScript files in the built version of your site.

Integrations can be used to connect to third-party tools as well. For my Plausible website analytics script, I have installed the Partytown integration to move into a service worker and off the main thread.

Server-side Rendering

Astro is designed to render JavaScript at build time to deliver as little JavaScript to the client as possible.

This gets even better by setting it up to utilize server-side rendering through a hosting provider such as Netlify as this enables you to build much more dynamic sites without needing to build the project every time.

Vite

Astro's dev and build processes are handled by another tool I am a big fan of, Vite. Vite is ridiculously fast at building and hot module reloading. Vite is also a lot simpler to configure compared to other tools such as Webpack.

Future Proof

It is hard to say what web development will look like in the future, especially with the rise of artificial intelligence, but I believe that Astro is one of the most forward-thinking frameworks available.

Its ability to adapt to most circumstances, excellent development experience, and commitment to producing fast and high-quality websites prove that it will continue to be a valuable tool in any developer's toolbox.

The Animals that Live inside My House

Sat, 01 Apr 2023 12:00:00 GMT

My wife and I love animals and probably would open a zoo if we could. We have 4 pets in total: three cats and one dog.

Current Lineup

Sunshine

Our oldest is Sunshine, our orange and white, fluffy cat. She has the softest fur of any cat I've ever come across.

She has gotten a bit grumpier in her old age, but she is surprisingly the most social of our cats as she likes to hang out with us when friends are over.

Sunshine likes to stomp around on top of us when we try to sleep.

Aldi

We weren't expecting to have a third cat at the time, but we rescued this little kitten and he stole our hearts.

We witnessed him nearly run over by a car in front of us and we quickly tracked him down behind an Aldi grocery store. We fished him out from under a dumpster with the help of a few of the Aldi employees. Obviously, we had to name him after the grocery store.

Aldi is super fast and likes to demonstrate his speed by doing laps around the house in the middle of the night.

DD

DD is the youngest of our pets, only 7 months old at the time of this writing. She is a mini golden doodle pup with curly, apricot and white colored fur. She is one of the sweetest, floppiest, and funniest dogs I know.

DD stands for Diamond Dog, like the David Bowie song (and a reference to Metal Gear Solid, my favorite video game series), but also just stands for Doodle Dog.

DD loves meeting new people but is still sort of sketched out by other dogs. We are working on that, though. We have her attending puppy daycare where she can make all sorts of friends.

Beans

Beans is a lovely little gray, tiger striped tabby cat we adopted through the Loving Care Cat Rescue out of Lemoyne, PA.

I'm still not totally sure why we named her Beans, but it really seems to fit. She is as adorable as she is stinky and she is really adorable.

Nicknames include: Beans, Beanie, Beanie Baby, Princess Tiabeanie, The Bean, Teeny-Beanie, and as an added bonus... every type of actual bean (Lima, Chickpea, Baked, Green, Fava, Mung, Coffee, you know just any bean).

In memoriam

T3

T3 was the oldest of our pets at 17 years old and was my wife's friend even before I came into the picture back in '08.

Her full name was TwentyTwoToes, as she was a polydactyl cat with a couple of extra toes. She was a gray and white, striped cat with a pink nose.

She mostly stuck to the bedroom and was most certainly blind, but that didn't stop her from cuddling up with my wife every night.

Rylie

Rylie was a sheltie-pomeranian mix and a loyal friend to us, though not very nice to others. He had some behavioral issues, but we loved him and provided the best life possible for him.

We got Rylie in 2010 and he was with us for 12 wonderful years. We miss you, buddy.

Thoughts on Artificial Intelligence

Fri, 31 Mar 2023 12:00:00 GMT

If you look at tech Twitter, it feels like artificial intelligence is the only thing anyone is discussing. AI is a topic worth exploring and something I should probably look into more myself.

That being said, as someone watching from the sidelines, I do have some observations that I wanted to jot down somewhere.

The Tech

I think the technology behind these major AI projects is cool. I am a tech enthusiast through and through - so when new stuff like this comes along, I do find myself a bit giddy to try it out.

I don't personally have any real-world use cases for adding AI to my current workflows, though I imagine there is some potential. Most of the experimentation I've done with DALL-E 2 or ChatGPT has been like a child with a new toy.

I can see some helpfulness of it in solving some code-related problems, though I do feel like careful review is necessary when working with these tools.

Era of Close Enough

One thing that I quickly realized while playing with DALL-E 2 was that it is never quite what I want.

Like whenever I write a prompt, I try to describe what I'm picturing in my head - and although the AI comes up with some pretty great interpretations - it's still never quite right.

I'm sure as these tools evolve, learning more and more, and with the right amount of iteration on a concept, I can get even closer to what was in my head, but I'm not sure it will ever be exact.

How to Learn

AI learns by observing. This means it takes in large samples of text, art, music, code, and whatever else to figure out how to best generate a response.

There is a very important argument to be made here about utilizing copyrighted materials, especially if the companies behind AI are profiting from it in any way. Even more so when AI is blatantly plagiarizing these copyrighted materials.

There is another side of this that has crossed my mind: People also learn by observing. People learn from others, including copyright materials.

The speed and scale of how AI learns compared to humans is an obvious difference. Also, I'm not sure if AI truly knows something or if it's just ridiculously fast at looking things up. The core idea remains, though: learning by observation.

Taking Jobs

I don't think AI is going to be taking jobs anytime soon. Not saying it won't happen, automation has been an upward trend, but I don't think it will happen too quickly either. AI is evolving very fast, maybe too fast to actually be a good idea to implement it as a core part of businesses. Plus, as it evolves, it becomes more and more expensive to actually maintain.

I think when companies stabilize the growth of this technology, it may become more of a concern.

New Opportunities

The more likely outcome of AI, rather than taking jobs, is the new opportunities it presents us. I think people implementing AI into work and creative flows do give us the chance to enhance what we do now.

Learning to adapt alongside technology - just like we did with electricity, radio, and computers.

I also believe AI could open up more avenues for assistive technologies, working with AI to perform tasks that may have been more difficult in the past.

"Normal" People

At the end of the day, it is very easy to get caught up in the idea that AI is an invasion with the number of folks talking about it online. You tend to forget that these voices are not a representation of everyone. Just like the popularity of cryptocurrency and NFTs, this discourse mostly falls into the bubbles we put ourselves in.

Most non-tech folks that don't necessarily spend their time doom-scrolling social media either have no knowledge of these topics or a cursory understanding at best. Once more "normal" people engage with AI, then I'll start to believe there is more to it than what it is now.

My Favorite CSS Snippets

Mon, 27 Mar 2023 12:00:00 GMT

I know it isn't everyone's cup of tea, but I love CSS. I think a well-made CSS framework is great in the right context, but sometimes it is a bit overkill to add to every project. That being said, there are a few CSS snippets that I regularly reach for when developing a new project from scratch.

Reset

There are a few CSS resets that I like to use, but a more modern one I have been using lately is the @acab/reset.css by Mayank.

I like that it is set up for use with cascade layers, so it's easy to drop into projects like so:

@import '@acab/reset.css' layer(reset);

Mayank added some great features to this reset:

All rules are wrapped within a :where selector to keep low specificity.
Automatically works with dark mode.
Includes a baked-in .visually-hidden class.

Container

For a standard container class, I reach for Steph Eckles' "smol intrinsic container" from her Modern CSS and SmolCSS projects:

.smol-container {
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
}

This container is great for a few reasons:

It uses min() functionality to ensure the container is responsive.
The minimum width of the container is set to give almost full width but gives some space on either side.
The maximum width is variable, using the --container-max custom property, and gives you a default max-width to fall back on.
To center the container, it utilizes the margin-inline: auto logical property to automatically fill the inline-start and inline-end space around the container

Flow

In Every Layout by Andy Bell and Heydon Pickering, they describe a technique called "The Stack" that is used to create great vertical flow on a group of stacked elements.

Andy even explained on his blog that these are his 3 favorite lines of CSS, though he prefers to call it .flow, which I agree makes a bit more sense.

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

Using the lobotomized owl selector in this way enables every child element, excluding the first child, inside the .flow parent to receive a margin-block-start of the value of --flow-space. This provides a nice standard rhythm to grouped elements and since it uses a custom property, can be easily adjusted.

Fluid Type Scale

A fluid type scale means that font sizes can automatically adjust based on the viewport, helping fonts scale for various screens.

The basic idea is to utilize the CSS clamp() function to provide a minimum and maximum, which will then scale the font size somewhere between. This can be sort of difficult to figure out, so luckily the fine folks over at Clearleft created an excellent tool called utopia.fyi to help calculate these fluid-type scales.

Using the calculator, you can enter in values for the minimum and maximum font sizes and what font type scale you want to achieve, and it will output a lovely set of custom properties you can apply to your styles:

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.8rem);
  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
  --step-2: clamp(1.62rem, calc(1.5rem + 0.58vw), 1.95rem);
  --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
  --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
  --step-5: clamp(2.8rem, calc(2.45rem + 1.77vw), 3.82rem);
}

The Last of Us

Sun, 26 Mar 2023 12:00:00 GMT

As a massive fan of the game, The Last of Us HBO series knocks it out of the park.

What they got right

The Last of Us HBO series manages to do a lot right.

Story

As my wife and I watched the show week-to-week, we also played The Last of Us Part I at the same pace to get an idea of how well the show kept to the original story.

The 9-episode run manages to hit every major story beat very well when compared to the game, but the show is stripped of much of the gameplay-related action. This, unfortunately, means that there are a few in-game moments that TV viewers miss out on, but ultimately the show captures the main plot quite well.

Enhancing the Original

One thing that I think is the mark of a good adaption or sequel is when the folks adapting it use the opportunity to enhance the original. Craig Mazin and Neil Druckmann did this in a few ways that I think helped the original story.

In the show, they used cold opens as a way to tell a backstory that wasn't necessarily present in the game. These additions added a bit more over-arching dread to an already dread-filled story.

They also managed to fix up a few story bits that did not make as much sense in the game.

For instance:

In the game, Joel and Tess' main goal in working with Marlene was to get weapons for some unknown reason.

In the show, Joel is worried about his brother Tommy as he has not heard from him in a while, so he and Tess decide to work with Marlene to acquire a car battery to go search for Tommy.

These types of small changes help make the characters' motivations more believable in my opinion.

Acting

It is safe to say that Pedro Pascal might be one of the best actors working right now, and he is working a lot. This past year he has been in The Last of Us, The Mandalorian, The Unbearable Weight of Massive Talent, some weird advertisement for a mobile game, and a few other roles.

I'm not quite sure Pedro captured the game Joel's personality perfectly. The game version of Joel feels more like a father figure than I think the TV show manages. Tonally, in the context of this show, Pedro does incredibly well as Joel however.

I was one of the many that were a bit worried about how Bella Ramsey would pull off portraying Ellie. I had previously only seen Bella as Lyanna Mormont in Game of Thrones, which was excellent - but I wasn't sure how that would translate to the snarky, foul-mouthed Ellie. I shouldn't have worried, as Bella became Ellie throughout this first season.

I was also very delighted to see some of the game's stars making cameo appearances throughout the show as well. Troy Baker, Ashley Johnson, and Jeffrey Pierce show up as minor characters, Merle Dandridge brings Marlene from the game to the series, and Laura Bailey even manages to get a quick guest appearance in one of the later episodes.

What they got wrong

I think my only real complaint is the lack of clickers, especially in the later episodes. The few instances that the clickers do make appearances are great - especially the museum scene in episode two.

HBO managed to bring the drama and story to life in the show, but I feel like they should have included more horror in the show, as the game is very much horror focused.

Final Review

This show is incredibly well done, and I'm still surprised they were able to pull it off. One of the best video game adaptions ever made, and I look forward to seeing how they tackle The Last of Us Part II. Highly recommend this show whether you are a fan of the games or not.

Enhancing the Command Line with Fig

Sat, 25 Mar 2023 12:00:00 GMT

I began using Fig when it was just a tool to add autocomplete to the command line, but I have been following its development and it has made some pretty impressive additions to its feature set.

Fig is a command line enhancing tool available on MacOS, Linux, and Windows - as of the time of writing, their autocomplete feature is only available on macOS.

Fig's Features

Autocomplete

As mentioned, this was the original draw to Fig for me.

Fig's autocomplete works great for browsing through directories, helps figure out commands to run for git and even can tell what npm scripts are available from your package.json files.

Autocomplete supports a ton of CLI tools. I've used it for node, dotnet, git, bash, and more.

Fig's autocomplete spec is available open source, so completions can be added easily and made public for others to use. The pro version allows adding private autocompletion for your team's internal command line tools.

Scripting

Fig's scripting functionality is where things get pretty interesting.

You can use their scripting editor to build out scripts that can prompt your input. This makes it easier to run sets of commands while keeping you focused on the more important parts.

Fig also has a script store where you can browse scripts created by others and add them to your list of scripts.

Scripts can be shared with your team or made publicly available within the script store. Scripts will also sync across devices so you always have access to them.

Dotfiles

Fig lets you manage your shell configuration easily with their dotfile manager.

I have found this particularly helpful with creating aliases for commands. As with scripting, dotfiles will synchronize across all devices you use Fig with, so aliases that you set up on one will work the same way on all your machines.

Plugins

The plugin store lets you add even more functionality to your setup.

You can easily install shells and frameworks such as Oh My Zsh, more auto-completion, color schemes, and much more.

I have installed Oh My Zsh and the Spaceship Prompt using the plugin store.

Artificial Intelligence

As with all tech companies currently, Fig is also implementing AI. I haven't tried this feature yet, but it does seem promising.

The basic concept is that you can explain in plain language what you want to do in the command line and Fig's AI will be able to generate the proper command to use.

The example on their website shows the user asking the AI to "reverse most recent git commit" and the AI spitting out:

git revert --soft HEAD^

This certainly has the potential to save me time trying to search for the right command in sticky situations.

Final Review

My experience so far using Fig has been pretty great, honestly. I have run into some issues here and there, but they do provide an easy command to troubleshoot issues: fig doctor.

I feel the autocompletion is useful enough as is, but Fig has added a great feature set on top of that to help make using the command line simpler.

I know there are some hardcore command line enthusiasts out there that will probably stray away from a tool like this, but I would still recommend giving it a shot and seeing if it could help improve your development process.

Building with Polypane

Fri, 17 Mar 2023 12:00:00 GMT

Polypane has an extensive list of features that help find issues with responsive design, accessibility, search engine optimization, and much, much more.

What is Polypane?

Polypane is a web browser that is built for web development. Polypane was created by Kilian Valkhof.

Whenever you load up Polypane, you'll notice that there are multiple panes for mobile, tablet, and desktop resolutions. These panes help you see your website in various screen resolutions all at the same time, helping you build great-looking designs at any screen size.

This is just the tip of the iceberg though, as Polypane can help with all facets of the design and development process.

My Favorite Features

Polypane has a lot of functionality. I discover new things it can do just about every time I open it up, probably because Kilian keeps adding useful features with every new version.

Workspaces

Workspaces allow you to set up panes for various types of devices, such as mobile, tablet, laptop, or desktop. Having a quick view of what a site will look like in all these different viewport sizes is incredibly handy and helps you spot potential issues a lot faster.

By default you are given a standard set of viewports to work with; however, there are plenty of other options available. You can also create your workspaces manually or by scanning your site to see what breakpoints are being targeted in your CSS.

Info Tab

I use the Info tab in the Polypane dev tools as a pre-launch checklist. Polypane will display site information for things like search engine optimization, document outlines, and accessibility concerns.

For search engine optimization, you can easily see all the meta information your page offers in one spot. This will give you a rundown of your page titles and descriptions, open graph and Twitter tags, icons, and even displays rich snippet and social previews.

The document outline section provides an overview of the structure of your page regarding headings, landmarks, links, images, and focus order. I use the outline section to ensure I'm delivering logical hierarchy and semantic web pages.

Accessibility is one of the most important pieces of developing a website in my opinion, so having a tool to help find these issues is crucial. Not only does Polypane find problems, but it also suggests potential ways to correct them using best practices.

Screenshot Tool

Polypane's built-in screenshot tool is great as it allows you to quickly grab the full page, viewport, or specific elements on the page.

With the screenshot editor, you can annotate, add stickers, redact, crop, and resize the screenshot. Redacting sensitive information in screenshots is very important with certain projects I have worked on.

Debug Tools

Polypane includes a variety of debugging tools to help out with things such as layouts, accessibility, and content.

While I was writing this article I utilized the a11y.css tools to identify more ways to improve accessibility on this site!

Excellent Support

I met Kilian through the Frontend Horse developer community and have reached out to him a couple of times regarding Polypane.

The first time was due to an update to Polypane not working on my Macbook. Kilian had a patch out very quickly that got Polypane working for me.

Recently I reached out to him about a feature request, and within 10 minutes, he already implemented the suggestion, and it will be a part of an upcoming release.

Needless to say, Polypane is very well supported.

Final Review

Polypane is absolutely one of my favorite tools to develop projects with and helps ensure that I can develop high-quality and accessible websites and applications.

I recommend this to any web developers looking to improve their development process.

JavaScript List Formatting and Astro

Sat, 11 Mar 2023 12:00:00 GMT

Sometimes you write a bit of JavaScript that makes you remember why you like using JavaScript. I had one of these moments while working on a site conversion from Hugo to Astro.

The problem

I ran into a dilemma where I needed to output a list of authors in the byline of a post, links on each of their names, and comma formatted.

There are probably hundreds of ways to accomplish this, but I chose to use the Intl.ListFormat (reference) object.

The functionality this provides is great as you basically just need to pass in an array and it automagically formats it in a variety of ways:

// This:
const array = ['Apples', 'Strawberries', 'Bananas'];
const listFormatter = new Intl.ListFormat();
listFormatter.format(array);

// Outputs as:
Apples, Strawberries, and Bananas

It even includes an Oxford comma!

The solution

Using Astro functionality and vanilla JavaScript, we can figure out a pretty impressive solution for this.

Content collections

Astro has a great feature called content collections which was introduced in version 2.0. Content collections let you group relevant markdown files inside one folder like so:

/src/content/authors
  bruce-wayne.md
  clark-kent.md
  peter-parker.md

Structuring the data

So with the authors content collection created, I made a new Astro component called PostAuthors.astro and inside imported the getCollection function provided by Astro. Now I was able to return an array of authors from the content collection:

import { getCollection } from 'astro:content';
const authorCollection = await getCollection('authors');

I also want to be able to include this inside a layout where it can accept a list of the specific post's authors, so I set up an authors prop:

const { authors } = Astro.props;

Now I could create a new array using the .map array method by filtering down the authors collection compared to the list of post authors, then flattening the new array:

const postAuthors = entry.data.authors
  .map(author =>
    authorsCollection.filter(a => {
      return a.data.name == author;
    })
  )
  .flat();

This gives me a list of just the authors on the post but also contains all the necessary information from the author's entry in the content collection.

Intl.ListFormat in action

Now here's where the fun part comes in. Using Intl.ListFormat, we can pass in an array of HTML which returns a comma formatted list containing links for each other:

const authorNames = new Intl.ListFormat('en').format(
  postAuthors.map(author => {
    return `
      <a href="/author/${author.slug}">
      ${author.data.name}
      </a>`;
  })
);

Inside the Astro template, we can utilize Fragment and set:html to output the results:

<p>Written by: <Fragment set:html="{authorNames}`" />.</p>

Why is this cool?

So why this is so fascinating to me because of how Astro itself works - much like backend scripting languages, such as PHP, it runs all this JavaScript before building the page.

The client sees none of this and only receives a well-formatted piece of HTML:

<p>
  Written by <a href="/author/bruce-wayne">Bruce Wayne</a>, <a href="/author/clark-kent">Clark Kent</a>, and
  <a href="/author/peter-parker">Peter Parker</a>.
</p>

Moving this type of thing to the build process means we get to deliver a lot leaner experience for our users, and I think that is very cool.

Full component code

---
import { getCollection } from 'astro:content';
const authorCollection = await getCollection('authors');

const { authors } = Astro.props;

const postAuthors = entry.data.authors
  .map(author => authorsCollection.filter(a => {
    return a.data.name == author
  }))
  .flat();

const authorNames = new Intl.ListFormat('en').format(
  postAuthors.map(author => {
    return `
      <a href="/author/${author.slug}">
      ${author.data.name}
      </a>`
  })
);
---

<p>Written by: <Fragment set:html={authorNames}` />.</p>

London Calling

Fri, 10 Mar 2023 12:00:00 GMT

I am now a world traveler. My wife and I finally took an actual vacation to London - where we got to experience a lot of new things!

First flight

I had never been on an airplane before this trip. I'm not a fan of heights, but for some reason, I wasn't very nervous about the actual flying part. FlightAware eases my nerves about flying, as you can see how many airplanes are in the sky at any given moment.

The part that made me most nervous was all airport-related:

Have all the proper documents
Arrive on time
Find the right gate
Luggage check
TSA Security

That stuff. Very intimidating for someone new to flying. Everything went smoothly, though, and we were able to board the plane.

The flight from Baltimore to Iceland was the first flight. We flew Play Airlines, a budget airline that, while not the most comfortable, was still enjoyable. My wife did learn she gets motion sickness while on planes, unfortunately.

The layover in Iceland was welcome after spending about six hours on a cramped, warm, and muggy plane. We stretched our legs and enjoyed the cold for a bit until we had to board the next flight to London.

The London flight was a bit easier (and shorter), and we made it there in one piece! The next stop was our hotel.

The hotel

After a long flight, we were ready to take a nap!

We stayed at the hub by Premier Inn near Goodge Street station. Which was a decent spot, easy to walk around and find things or hop on the tube to other parts of the city.

The staff was all super nice and accommodating. They had unlimited complimentary coffee and tea and served breakfast!

Our week in London

The main inspiration for the trip was my wife Vickie. She has met a lot of awesome folks from all around the world through her online writing community. This was a chance for them to finally meet in person and attend a K-pop concert they are all fans of. I'm super glad she got this opportunity and was able to enjoy spending her time with her new friends.

I am a very anxious person, and while I did manage to enjoy my trip, I had trouble planning anything. I pretty much winged it and even got to meet one of my friends from overseas.

Day 1

The band my wife was going to see was having a pop-up shop in Waterloo Station, so we walked there together. We probably could have taken a train, but we wanted to be able to explore and see some sights.

After the pop-up shop, we ventured onto our next destination, The British Museum. We stopped in at their pizzeria and had a wonderful pepperoni pizza with chili jam on it. It was delicious.

I wasn't aware of how excited I was going to be to see the various exhibits at the museum until I was there. I was very excited.

Day 2

My wife was finally getting to meet up with her friends! She went to brunch and had a wonderful time.

I was exhausted from traveling, though - so day 2 was a bit of a non-starter for me. I stayed at the hotel, relaxed, and worked on coding projects. I know, I'm not very fun!

Later that night, we met back up for dinner at Din Tai Fung in Covent Garden and got to experience the deliciousness of soup dumplings for the first time.

Day 3

Much more exciting day: I got to meet one of my friends from the Frontend Horse community, Arran.

Arran toured us around the London Bridge area. He told us all about the history of various places, even showing us some Roman ruins along the way.

We explored the Southwark Cathedral where we got to meet Hodge, a cat that lives in the cathedral.

We stopped in at the Borough Market, had a delicious crumble, and talked politics.

Later that night, Vickie went to the concert, and I met back up with Arran for more exploring. We walked and talked, stopping for snacks along the way. We finished off the night in a lovely British pub.

Day 4

We went to Paddington Station to visit the Paddington Bear statue and pick up a souvenir from the store.

From Paddington Station, we took a walk to Hyde Park, where one of the best moments happened:

Vickie loves birdwatching, but the only birds we had seen were pigeons. She expressed she was hoping to see different types of birds while in another country. Not a moment later, a parakeet landed in front of us. There are tons of parakeets flying around in London! She was ecstatic!

Before leaving the park, we stopped at the statue of Queen Victoria (Vickie's namesake). Next, we headed towards South Kensington to visit The Design Museum.

The Design Museum is gorgeous. Many wonderful pieces on display from various aspects of design:

Architecture
Fashion
Graphic design
Technology

A great stop if, like me, you are into that sort of thing.

We rounded out the day by heading over to King's Cross Station. There we checked out Platform 9¾ and visited the Harry Potter shop.

Day 5

On the final day, we went to the V&A Museum. There was an exhibit there called ”Hallyu! The Korean Wave" which showcased the global impact of South Korean pop culture. This was amazing!

They had several items from our favorite movies, like Oldboy and Parasite, as well as from K-pop and fashion.

We checked out the rest of the museum as well, seeing awesome pieces from various eras and places. I especially enjoyed seeing items from Japan.

After finishing up at the V&A, I heard there was a protest occurring outside the Russian Embassy. We decided to go check it out. Protestors painted the street in front of the embassy the color of the Ukraine flag, yellow and blue. People were there showing support for Ukraine, asking Russia to stop the invasion. Seeing this was quite an experience for me.

We grabbed some food and returned to the hotel to rest up and get ready for our trip back home.

New Website

Thu, 09 Mar 2023 12:00:00 GMT

I've been obsessed with Astro for a while now; however, I hadn't converted my website. Time to change that!

Previous website

I'm not sure I was ever happy with my previous website. I did a few neat things on there:

Animations
Themes
Bold typography

Ultimately I just never felt super excited about it, though.

I intended on blogging at least once a month but failed miserably at that - eventually just removing the blog section from the site altogether.

Inspirations

Learning a lot about newer technologies, such as Astro and more modern approaches to CSS, has been causing an itch in my brain for a while.

Learning Astro

At work, we were in talks to refactor our static sites onto a platform other than Hugo, so I began experimenting with Astro a bit. I developed a couple of websites for my work team:

RIMdev Radio - Displays songs we love and automatically updates a Spotify playlist.
RIMdev Likes Food! - Another small site to display our favorite restaurants

Astro impressed me a lot, and as a team, we began implementing Astro on a few of our sites.

Modern CSS

I took Stephanie Eckles Modern CSS workshop last year, and it was incredible! I want to implement the things I learned into everything!.

I finally understand grid and clamp!

Building the aforementioned Astro projects using these newer techniques was great. Everything just seemed to be falling into place.

Content creation

I wrote an article for 12daysofweb.dev on the new View Transitions API and was just thrilled with the whole process.

A driving force for the new website is that I want to do content creation:

Blogging
Making Videos
Tutorials

I am super excited about learning and want to be able to help pass along what I've learned.

My new site

I want this site to be the best representation of myself and my skills. It will be a culmination of all the things I've been learning and practicing over the past few years.

I want to give this a shot and see what I can do with it. I won't have everything I have planned completed by the time I deploy, but I fully intend to iterate on this latest version and build something great.

RIMdev Radio: Building with Astro

Wed, 12 Oct 2022 12:00:00 GMT

My current favorite thing in web dev is a new site generator called Astro.

Astro is like Hugo and 11ty, yet contains a few neat tricks right out of the box. The main goal of Astro is to deliver as little JavaScript to the browser as possible. It handles this by running JavaScript in the build process or when rendered server-side. That is not to say you can't run JavaScript in the browser though. In fact, you can include components from any of the major JS frameworks, such as Vue, React, and Svelte. This is possible through a concept Astro is pioneering: component islands.

I recently delivered a talk on Astro to our dev team as part of the "Friday Talks" we do here in RIMdev. I demonstrated how to build with Astro and its server-side rendering capability. The first demo shows off its framework agnostic abilities, and how to run JavaScript. The second demo shows how you can run JavaScript server-side and deliver only HTML. These projects were fun to build, but I wanted to try and build something with a bit more substance.

RIMdev Radio

Annual enrollment period is RitterIM's busiest part of the year and we have been doing a lot of prep-work for it. Music is near essential as there is a lot of manual testing performed. I traded song recommendations with a few folks on the Front End team and thought it might be fun to make a site out of it. RIMdev Radio is a place to display and listen to what music team members like the most.

I built the site using a few different technologies:

Astro - Site generator
Sass - CSS preprocessor
Vue - JavaScript framework
Supabase - a cloud PostgreSQL database
Spotify API - Searching and playlist management
Netlify - Server-side rendering/hosting

The idea was that team members would be able to search Spotify for songs and update the playlist. Recommendations get stored in a database table, which would then display on the home page. The idea didn't quite pan out due to limitations of the Spotify API, but still able to deliver with a slight pivot.

In Spotify, you can set up collaborative playlists that allow you and friends to add songs to a playlist. This function is not available to the API though, as spammers could overrun playlists. I learned this at the finish line, so while I can update the playlist through the API - no one else can. Unfortunate as this was the main feature of the app.

That's OK though! Team members that choose to take part can send me songs they would like included and I can update the playlist. This was a super fun weekend project and I was able to learn a lot, so no harm done!

Piecing it all together

Astro

Everything happens inside Astro and luckily getting started is quite easy!

The npm create astro@latest command walks you through the process of setting up a new instance. I choose the default options for everything, except opting out of using TypeScript.

From there, the new site will scaffold and there are a few organizational things to take note of:

The Pages directory is where each site page will live. These will use the .astro file extension, and are capable of running JavaScript at build. This allows you to generate HTML code by running certain JavaScript functionality.
The Components directory will house UI components. These can be Astro components or components for whichever framework you prefer.
The Layouts directory is where you can include components used for layout purposes.

As I intended to use Sass for styling, I also added a styles folder to the src directory.

Speaking of which, to set up Sass - you do need to install Sass as a dependency to use it:

npm install -d sass

From there, your Sass file gets imported into your main Layout.astro file like:

---
import '../styles/styles.scss';
---

As Astro uses Vite under the hood, Sass will get compiled and included as a linked asset in the HTML.

I also wanted to be able to use Vue as a component framework. Astro provides easy-to-use integrations, so adding Vue to the project was a matter of running:

npx astro add vue

This automically installs the Vue package and includes it in the astro.config.mjs file.

Supabase

I found myself liking the combination of Supabase and Astro's server-side rendering. Supabase is a cloud database service, like Google's Firebase, but runs on PostgreSQL. For a project like this, it worked out nice!

To use Supabase, create an account and a new database. Then you can install the package with:

npm install @supabase/supabase-js

I created a .env file in the root of the project and added my Supabase key:

SUPABASE_KEY={YOUR SUPABASE KEY}

Supabase also provides a database URL, which can also be in the .env file. I did not, instead I added it direct in JavaScript.

Inside pages/index.astro, you can import createClient from the Supabase package. You can also grab the .env variables and apply them as constants.

---
import Layout from '../layouts/Layout.astro';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = {YOUR SUPABASE URL}
const supabaseKey = import.meta.env.SUPABASE_KEY
---

Now we can query the database and retrieve data from tables! For example, if we wanted to select all the rows of a table called recommendations:

let { data: recommendations, error } = await supabase.from('recommendations').select();

This query will run on page build (or on server-side render) and store it in the recommendations array. From there, we can use recommendations inside the template with normal JavaScript array methods.

<ul>
  {recommendations
    .sort((a, b) => a.id - b.id)
    .reverse()
    .map(rec => (
      <Recommendation recommendation={rec} />
    ))}
</ul>

You can also insert data into the database using Supabase methods. I created a form within a Vue component and a method to submit items to the database. Inserting data to Supabase looks like:

await supabase.from('recommendations').insert([
  {
    name: 'Ryan',
    song: 'Moon Song',
  },
]);

Definitely one of the simplest ways to use a database that I've come across!

Spotify API

The Spotify API is available to anyone who has a premium plan with Spotify.

Registering a new app will provide you with a client ID and client secret codes. Store these in your .env file:

SPOTIFY_CLIENT_ID={YOUR CLIENT ID}
SPOTIFY_CLIENT_SECRET={YOUR CLIENT SECRET}

To use the Spotify API, it is necessary to be able to authenticate users with Spotify in some way.

Spotify provides several methods to do so. As I intended on using server-side rendering, I could use the Client Credential Flow. This method allows users to authenticate with Spotify, retrieve an OAuth code, which the app can then trade for an access token. Access tokens will be used to make API calls.

I set up Astro pages to handle the authentication routing:

pages/auth/login.astro - This is the page that initiates the authentication process with Spotify. Users will be redirected to the Spotify login page.
pages/auth/callback.astro - Callback is the page where users will be directed after logging into Spotify. There will be an OAuth token added as a URL search parameter that can be retrieved and used for the next step. I stored this temporarily in the browser's local storage.
pages/auth/token.astro - The Token page is where we pass the OAuth token back to Spotify to retrieve an access token. Here the access token is stored as a cookie with an one hour expiration. Spotify access tokens only last one hour. After successfully retrieving an access token, the user is redirected back to the home page.

Within each of those pages, I included a corresponding Vue component to handle the client side JavaScript part of the authentication process.

Once the authentication is out of the way, users can then use their access token to perform API calls such as searching the Spotify library.

const handleSearch = () => {
  const endpoint = new URL('https://api.spotify.com/v1/search');
  endpoint.searchParams.append('query', search.value);
  endpoint.searchParams.append('type', 'track');
  endpoint.searchParams.append('market', 'US');
  if (access_token.value) searchSpotifyApi(endpoint.href);
};

const searchSpotifyApi = async url => {
  options.value = [];
  return await fetch(url, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${access_token.value}`,
    },
  })
    .then(response => response.json())
    .then(data => {
      options.value = [...data.tracks.items];
    })
    .catch(err => console.log(err));
};

I set up a separate API call which adds items to a playlist, but as previously mentioned, does not allow users to update playlists they do not own.

Netlify

Netlify is a great service for deploying static sites. Like Amazon Web Service's product Lambda, Netlify also provides the capability of running cloud functions. Astro can be built in a way to leverage this feature, enabling server-side rendering. This may sound complicated at first, but it is almost too easy as Astro provides an integration to help set this up.

npx astro add netlify

Running the add Netlify integration command will automatically install necessary packages and update the astro.config.mjs file.

Now all that is needed is to deploy the site to Netlify. I typically do this by connecting Netlify to the GitHub repo, which gives the added benefit of automatically re-deploying the site when pushing to the main branch. You can also use PR Previews to see changes to the site before a pull request is even merged to the main branch.

Final Thoughts

Overall, working with Astro is a super enjoyable experience. I'm looking forward to building more projects with it!

I'd like to give a special shout out to my friend Mac for help navigating the Spotify API.

You can find the full code available on the RIMdev Radio repo on Github.

Recreating the Spotify "Like" Button

Thu, 11 Aug 2022 12:00:00 GMT

Recently a fellow team member challenged me to recreate the new Spotify "Like" button using only CSS. Honestly I'm not sure if he challenged me necessarily, but posed the question "can you pull this off with css?" - that was enough for me.

Breaking down the animation

The Spotify Like button has a few neat animations happening:

Before liking a song, it looks like a traditional heart shaped icon, with a white outline and transparent fill.
Upon liking a song, several smaller hearts seemingly explode out of it and float upward.
A green circular pulse emits from the central heart
The heart icon itself fills in with the Spotify green color
Unliking a song also has a small animation of the heart icon shaking and reverting back to the white outline and transparent fill.

Getting started

I did a quick search for a simple heart shape SVG on Google and found a perfect option. Next I took that SVG and tossed it into Figma to make a few quick adjustments. Mostly just changing colors and including the extra "exploding" hearts in the SVG that we'll later animate.

After grouping all relevant elements together, I used Figma's incredibly useful copy to SVG feature to grab the SVG code and paste it into a new Codepen.

Note: I also converted the outline strokes of the SVG elements into paths.

HTML structure

I decided that since the goal was to not use any JavaScript, I would utilize the checkbox trick for managing the state of the like button.

<input type="checkbox" id="like" name="like">
<label for="like">
 <!--SVG Code here!-->
</like>

Including the SVG inside the <label> tag means that clicking on the SVG will check the checkbox!

Adding default CSS

For the default stylings of this Like button, there are a few things needed:

The checkbox itself does not actually need to be displayed, so I hid it with display: none.
The central heart needed a transparent fill and a white border.
The smaller hearts don't need to be shown yet either, however they will need to animate and set the opacity to 0.

The CSS sibling selector makes it possible to easily target the label that appears next to the input like so: input[type="checkbox"] + label. This is super useful in applying different styles to elements within the label when the input is checked versus unchecked.

input[type='checkbox'] + label {
  /* Unchecked styles... */
}

input[type='checked']:checked + label {
  /* Checked styles */
}

Creating the animations

I ended up creating two keyframe animations and one transition to make this look nice.

Center heart

The center heart icon that user's click utilizes a CSS transition to go from it's unchecked to checked state:

/* Center heart */
input[type='checkbox'] + label #center-heart #inner {
  fill: transparent;
  transition: 0.2s ease;
}
input[type='checkbox'] + label #center-heart #outer {
  fill: white;
  transition: 0.2s ease;
}

input[type='checkbox']:checked + label #center-heart #inner {
  fill: #64d26d;
}
input[type='checkbox']:checked + label #center-heart #outer {
  fill: #64d26d;
}

This is great as it will reverse the transition when unchecking as well!

Exploding hearts

The exploding hearts required a percentage based keyframe animation to make the hearts visible, apply the floating effect, and then finally disappear again.

For the animation's easing-function, I played around with a custom cubic bezier in-and-out type curve to make the animation a little smoother looking.

I did not want all the exploding hearts to animate at the exact same time though, so I added an animation-delay to those specific elements at various timings - just to mix it up a little bit.

/* Exploading hearts */
input[type='checkbox']:checked + label #left-hearts > *,
input[type='checkbox']:checked + label #right-hearts > * {
  transform-origin: center center;
  animation: floatingHearts 0.65s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
}
input[type='checkbox']:checked + label #right-hearts g:first-child {
  animation-delay: 0.3s;
}
input[type='checkbox']:checked + label #right-hearts g:last-child {
  animation-delay: 0.1s;
}
input[type='checkbox']:checked + label #left-hearts g:first-child {
  animation-delay: 0.2s;
}
input[type='checkbox']:checked + label #left-hearts g:last-child {
  animation-delay: 0.5s;
}

@keyframes floatingHearts {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}

Pulsing effect

The final animation I wanted to include was the pulsing effect that happens upon clicking the button. I did not need to create any other HTML or SVG elements for this, but instead utilized CSS ::before and ::after pseudo-selectors to create rings around the SVG. The rings would transform by scaling from 0 to 1 then finally disappear by changing the opacity to 0. For this I used another percentage based keyframe animation.

I utilized the same cubic bezier curve for this animation's easing-function animation as well.

And similarly to the exploding hearts, I targeted one of the rings to have a slight animation delay to provide a slightly neater looking animation.

input[type='checkbox']:checked + label::before,
input[type='checkbox']:checked + label::after {
  content: '';
  display: grid;
  border-radius: 100%;
  position: absolute;
  outline: 25px solid #64d26d;
  height: 300px;
  width: 300px;
  animation: scalePulse 0.5s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
}

input[type='checkbox']:checked + label::after {
  animation-delay: 0.2s;
}

@keyframes scalePulse {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1.1);
    opacity: 0;
  }
}

Bringing it all together

After all the CSS is in place, clicking on the heart button should provide a great looking animation that is very similar to the one found in Spotify when liking a song.

See the Pen <a href="https://codepen.io/mrtrimble/pen/KKoBYxZ">CSS Only Spotify Like Button</a> by Ryan Trimble ( <a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Full code available on Codepen.

The animation I ended up was ultimately slightly different than the Spotify animation itself, however I think it still turned out nicely!

Building an Online Store with Platform UI and Hugo

Thu, 16 Jun 2022 12:00:00 GMT

With the release of our CSS Framework, Platform UI, it might be fun to actually build something with it!

At RitterIM, we have an internal store to buy RitterIM merch, such as shirts, office supplies, and more. Employees can buy products with cash or use "Ritter Bucks". Ritter Bucks are not some fancy new crypto-currency, but instead a way to incentivise great work!

The Ritter Store is only at our Harrisburg office, so as the basis of this project: let's build an online store!

What We'll Use

Platform UI - Our latest public release and the CSS framework we use for our applications.
Hugo - Static Site Generator based on the Go programming language.
Snipcart - A simple way to add a store to any website.

Installing Hugo

The first step to working on a Hugo site is installing Hugo. There are a few ways to go about that depending on which operating system you are working on.

For MacOS, make sure you have Homebrew setup and run:

brew install hugo

For Windows, you can install via Chocolatey:

choco install hugo -confirm

See the Hugo installation guide for further information and installation on other operating systems.

Creating a Hugo Site

Hugo installs on systems globally, so you can now run Hugo commands.

In your terminal, navigate to the directory you'd like to setup the new site. Once there, run the following command:

hugo new site hugo-store

This will scaffold a new Hugo project for us. Browse into the new site. Next we will want to create a Hugo theme to use for the store - to do that, run:

hugo new theme store-theme

Then we can apply that theme by opening the config.toml file and adding:

theme = "hugo-store"

To actually view the Hugo site, we can run the command:

hugo server

Though there isn't much going on there at the moment, this will start the Hugo server and serve up pages we'll create throughout this project.

Let's add in some content, then we can dive into building out our theme!

Adding Content

Content in Hugo can be added in many different ways, however one of the simplest approaches is by adding markdown files to the ~/hugo-site/content directory. Content can also be organized by creating subfolders of the content directory. For our store example, we want to organize products into different categories, such as "Home Goods" or "Office Supplies." Let's begin adding content by setting up our categories.

Products

We can now add products inside category folders. For example, let's create a T-Shirt markdown file inside the clothes folder:

~/hugo-store/content/clothes/t-shirt.md

---
title: T-Shirt
layout: single
id: t-shirt-knight
price: 11
tags:
  - knight logo
image: /images/products/tshirt.jpeg
image_alt: T-Shirt with Knight logo.
---

RitterIM branded, t-shirt with Knight logo.

For each product, we are looking to add the following data:

Title - name of the product.
Layout - the layout the product page will use, for our demo this will be single.
ID - this is a unique identifier for the product, this will come in handy later when we implement Snipcart.
Price - the price of the product.
Tags - used to describe the product, add as many descriptive tags as needed.
Image - the path to an image of a product. In Hugo, static files such as images get added to the ~/hugo-store/themes/store-theme/static/ directory. I've organized mine to include an images folder and a products sub-folder.
Image Alt - this is an alternative text description that gets included on images.

Outside of the front matter, we can include the content of the page. This will reflect as the description of a product shown on our store.

Add as many products as you'd like, I'm going to add the following:

Clothes
- Cardigan
- Hoodie
- Jacket
- T-Shirt
Home Goods
- Blanket
- Coaster
- Frisbee
- Picture Frame
Office Supplies
- Laptop Bag
- Mouse Pad
- Notebook
- Pen

Building a Theme

Let's set up a simple theme that we can use for our store.

Adding Platform UI

A super simple way to get started using Platform UI is by linking to the CDN via jsdelivr.

Browse to the ~/hugo-store/themes/store-theme/layouts/partials/head.html file and include the CDN like so:

<!-- head.html -->
<link rel="preconnect" href="cdn.jsdelivr.net/" crossorigin />
<link rel="stylesheet" href="cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/platform-ui.min.css" crossorigin />

This will include the main CSS stylings for the Platform UI framework. While we are in the head.html file, let's add a title for the site:

<!-- head.html -->
<link rel="preconnect" href="cdn.jsdelivr.net/" crossorigin />
<link rel="stylesheet" href="cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/platform-ui.min.css" crossorigin />

<title>Hugo Store</title>

Platform UI also includes JavaScript functionality for things like accordions, drawers, and modals. To include this in our site, add the CDN link to ~/hugo-store/themes/store-theme/partials/footer.html:

<!-- footer.html -->
<script src="cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/js/platform-ui.min.js" crossorigin defer></script>

Now we can take advantage of everything Platform UI has to offer!

Header

We can use Platform UI's site menu to get this set up. Open up ~/hugo-store/themes/store-theme/partials/header.html and add in the following:

<!-- header.html -->
<header id="header" class="header site-header background--lightblue">
  <div class="max-container h-100">
    <a class="site-logo p-2 h-100 flex flex--align-center text--bold text--size-lg" href="/"> Hugo Store </a>
  </div>
</header>

A quick explanation of what is happening:

We create a site header by adding the site-header class to the <header> element.
We can also set the background color using the background--lightblue class. This is part of Platform UI's color classes.
max-container on the inner div applies a centered, max-width container to the header.
On the site-logo we are applying flex utility classes to center the link text. We are also adding some typographical utilities to enlarge (text--size-lg) and bold the text (text--bold).

For the purposes of this demo, this is all we need, though this could be expanded further by adding in a navigation!

Category / List Pages

The category pages will be what we use to display all the categories related products. In Hugo, this is as known as a "list" page, as it lists out all the related content. You can rename this file as something other than list, but for our example we will keep it as the default.

We can leverage Platform UI's layout blocks to display the products on the page. Blocks enable a responsive grid of rows and columns to create layouts.

Inside ~/hugo-store/themes/store-theme/layouts/_default/list.html:

<!-- list.html -->
{{ '{{' }} define "main" }}
<article class="max-container pt-4">
  <div class="flex flex--center-content">
    <h2>{{ '{{' }} .Title }}</h2>
  </div>
  <ul class="list block-container blocks tablet-up-2 lg-tablet-up-3 laptop-up-4"></ul>
</article>
{{ '{{' }} end }}

Here we are outputting the .Title of the category and setting up the block-container to list products. The blocks class enables the mobile-first responsive layout. We can tell the container how many blocks should be in each row at different breakpoints:

By default a block will take up 100% of the row, which works well for mobile devices.
On tablet and up, tablet-up-2 specifies that there will be two blocks per row.
For larger tablets and up, lg-tablet-up-3 means there will be three blocks per row.
Finally for laptop screens and up, laptop-up-4 will display four blocks per row.

To actually iterate over the products available, we can use Hugo's range function. The range we will be looping through is the category's .Pages, so inside the <ul> we can include the following:

{{ '{{' }} range .Pages }}
<li class="block"></li>
{{ '{{' }} end }}

This means an <li> element will output for each page created within the category.

As far as actually displaying a product, we can use Platform UI's card component. We want to include the following information inside the card:

Product Image (if available)
Product Title
Product Description
Product Sizes
Product Tags

Let's create a card inside the <li> element:

<div class="card m-2">
  {{ '{{' }} with .Params.image }}
  <img class="card__image" src="{{ '{{' }} . }}" />
  {{ '{{' }} end }}
  <div class="card__header flex flex--align-center flex--justify-between">
    <h3 class="product__name text--navy text--bold text--uppercase text--size-md mb-0">{{ '{{' }} .Params.title }}</h3>
    <span class="product__price text--bold text--navy text--size-md"> ${{ '{{' }} .Params.price }} </span>
  </div>
  <div class="card__content">
    <div class="flex">
      {{ '{{' }} with .Params.tags }} {{ '{{' }} range . }}
      <span class="pill mr-1">{{ '{{' }} . }}</span>
      {{ '{{' }} end }} {{ '{{' }} end }}
    </div>
    <p class="product__description">{{ '{{' }} .Content }}</p>
    <div class="product__button-container">
      <a class="button" href="{{ '{{' }} .Permalink }}"> View Details </a>
    </div>
  </div>
</div>

There is a lot going on here, so let's break a few things down!

On each of the product markdown files, there is some default metadata each product includes, such as .Content and .Permalink. For more custom data, .Params match up to front matter found inside the markdown file.

Depending on the product, you might not have an image or tags params available. To make up for this, we use Hugo's with check to see if a parameter exists and display it if so. The with check also scopes the contextual data of the param, so it can then be output by using {{ '{{' }} . }}.

We are also using Hugo's range to output product tags as Platform UI pills.

Product / Single Pages

Like list pages, Hugo uses single for individual pages within the site. In our demo, these are pages for specific products. We could rename this page to product if we wanted, but for the purposes of the example we will keep it as is.

Single pages are like the list file, displaying data and front matter from the markdown files.

Inside ~/hugo-store/themes/store-theme/layouts/_default/single.html let's add the following markup:

<!-- single.html -->
{{ '{{' }} define "main" }}
<article class="max-container">
  <section class="block-container">
    <div class="block lg-tablet-up-6 p-4">
      <figure class="figure-hover">
        <img src="{{ '{{' }} .Params.Image }}" alt="{{ '{{' }} .Params.Image_alt }}" />
        <figcaption>{{ '{{' }} .Params.Image_alt }}</figcaption>
      </figure>
    </div>
    <div class="block lg-tablet-up-6 my-4">
      <div class="card">
        <div class="flex flex--justify-between flex--align-center border-b border--width-2 border--color-orange mb-3">
          <h1 class="text--bold text--navy">{{ '{{' }}.Title}}</h1>
          <span class="text--bold text--navy text--size-lg"> ${{ '{{' }} .Params.Price }} </span>
        </div>
        <div class="flex mb-4">
          {{ '{{' }} with .Params.Tags }} {{ '{{' }} range . }}
          <span class="pill mr-1"> {{ '{{' }} . }} </span>
          {{ '{{' }} end }} {{ '{{' }} end }}
        </div>
        <div class="text--size-md">{{ '{{' }} .Content }}</div>
      </div>
    </div>
  </section>
</article>
{{ '{{' }} end }}

We are using an alternative method of Platform UI blocks this time. Instead of defining how many columns to display on the container, we can apply these classes to the actual block elements. We want each block to take up the full row width on mobile, but then switch to 50% width on large tablet viewports and higher. To do this, we can add lg-tablet-up-6 to the block.

Platform UI has a great figure-hover component to display the product image. This allows us to display the alt text of the image as a caption.

While displaying the product title, we can add a bottom border using the Platform UI border utilities. Border utilities can determine the side, width, and color of borders.

And just like before, we are using Hugo's range function to loop through and output the product tags as Platform UI pills.

Homepage

To finish up the theme, let's create a homepage!

Our goal for the homepage will be to display a section for all categories and a few products in each. We'll also include a link to view all products within a single category. We can reuse most of what we learned already to accomplish this!

Hugo sets the ~/hugo-store/themes/store-theme/layouts/index.html as the homepage.

{{ '{{' }} define "main" }}
<article class="block-container max-container pt-4">
  {{ '{{' }} range .Pages }}
  <section class="category w-100 flex flex--column flex--justify-center mb-4">
    <div class="category__header">
      <h2 class="flex flex--justify-center text--bold text--navy mb-0 pb-0">{{ '{{' }} .Title }}</h2>
    </div>
    <div class="category__products">
      // Category products will go here!
      <div class="block-container w-100 flex--center-content mt-4 mb-6">
        <a class="button button--salmon text--white button--lg" href="{{ '{{' }} .Permalink }}">
          View All {{ '{{' }} .Title }}
          <i class="pi-arrow-right"></i>
        </a>
      </div>
    </div>
  </section>
  {{ '{{' }} end }}
</article>
{{ '{{' }} end }}

The first range we'll set up loops through pages within the ~/hugo-store/content folder. This will display a <section> for each of our categories.

Metadata from the category pages allows us to output the .Title and .Permalink of the category. We are linking to the category page using a Platform UI button and the button includes a Platform Icon. Platform Icons are a custom icon font included with Platform UI.

Inside this range we will add another range to iterate through each of the product pages. Replace the comment //Category products will go here! with the following:

<ul class="list block-container blocks tablet-up-2 lg-tablet-up-3 laptop-up-4">
  {{ '{{' }} range first 4 .Pages }}
  <li class="block">
    <div class="card m-2">
      {{ '{{' }} with .Params.image }}
      <img class="card__image" src="{{ '{{' }} . }}" alt="" />
      {{ '{{' }} end }}
      <div class="card__header flex flex--align-center flex--justify-between">
        <h3 class="product__name text--navy text--bold text--uppercase text--size-md mb-0">
          {{ '{{' }} .Params.title }}
        </h3>
        <span class="product__price text--bold text--navy text--size-md"> ${{ '{{' }} .Params.price }} </span>
      </div>
      <div class="card__content">
        <div class="flex">
          {{ '{{' }} with .Params.tags }} {{ '{{' }} range . }}
          <span class="pill mr-1"> {{ '{{' }} . }} </span>
          {{ '{{' }} end }} {{ '{{' }} end }}
        </div>
        <div class="product__description">{{ '{{' }} .Content }}</div>
        <div class="product__button-container">
          <a class="button" href="{{ '{{' }} .Permalink }}"> View Details </a>
        </div>
      </div>
    </div>
  </li>
  {{ '{{' }} end }}
</ul>

This time we add a parameter to the range function of first 4 - this only outputs the first four product pages. Just like on our other pages, we can list the products metadata and front matter.

At this point, we should have a working website! There is one important piece missing from the store though, the actual store logic. Let's now explore how to add Snipcart!

Setting up Snipcart

Snipcart is a simple tool to add an online store to any website. As you would expect, you can enable visitors to pay for products online using a credit card. You can also enable promo codes and much more!

Head over to Snipcart's website and register for an account. Snipcart is a paid service for production sites, but provides free usage for development. So until you are ready to actually open up shop, you don't have to spend anything!

After registering, browse to the API Keys section of your account to find your public test API key. This is used to connect your Hugo site to Snipcart.

Adding Dependencies

Snipcart requires surprisingly little to get running, we will just need to include the following bit of JavaScript in our footer.

Open up ~/hugo-store/themes/store-theme/partials/footer.html and add JavaScript here:

<!-- footer.html -->
<script src="cdn.jsdelivr.net/npm/@ritterim/platform-ui/dist/js/platform-ui.min.js" crossorigin defer></script>
<script>
  window.SnipcartSettings = {
    publicApiKey: '[YOUR API KEY]',
    loadStrategy: 'on-user-interaction',
  };

  (function () {
    var c, d;
    (d = (c = window.SnipcartSettings).version) != null || (c.version = '3.0');
    var s, S;
    (S = (s = window.SnipcartSettings).currency) != null || (s.currency = 'usd');
    var l, p;
    (p = (l = window.SnipcartSettings).timeoutDuration) != null || (l.timeoutDuration = 2750);
    var w, u;
    (u = (w = window.SnipcartSettings).domain) != null || (w.domain = 'cdn.snipcart.com');
    var m, g;
    (g = (m = window.SnipcartSettings).protocol) != null || (m.protocol = 'https');
    var f, v;
    (v = (f = window.SnipcartSettings).loadCSS) != null || (f.loadCSS = !0);
    var E =
        window.SnipcartSettings.version.includes('v3.0.0-ci') ||
        (window.SnipcartSettings.version != '3.0' &&
          window.SnipcartSettings.version.localeCompare('3.4.0', void 0, { numeric: !0, sensitivity: 'base' }) === -1),
      y = ['focus', 'mouseover', 'touchmove', 'scroll', 'keydown'];
    window.LoadSnipcart = o;
    document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', r) : r();
    function r() {
      window.SnipcartSettings.loadStrategy
        ? window.SnipcartSettings.loadStrategy === 'on-user-interaction' &&
          (y.forEach(function (t) {
            return document.addEventListener(t, o);
          }),
          setTimeout(o, window.SnipcartSettings.timeoutDuration))
        : o();
    }
    var a = !1;
    function o() {
      if (a) return;
      a = !0;
      let t = document.getElementsByTagName('head')[0],
        n = document.querySelector('#snipcart'),
        i = document.querySelector(
          'src[src^="'
            .concat(window.SnipcartSettings.protocol, '://')
            .concat(window.SnipcartSettings.domain, '"][src$="snipcart.js"]')
        ),
        e = document.querySelector(
          'link[href^="'
            .concat(window.SnipcartSettings.protocol, '://')
            .concat(window.SnipcartSettings.domain, '"][href$="snipcart.css"]')
        );
      (n ||
        ((n = document.createElement('div')),
        (n.id = 'snipcart'),
        n.setAttribute('hidden', 'true'),
        document.body.appendChild(n)),
        $(n),
        i ||
          ((i = document.createElement('script')),
          (i.src = ''
            .concat(window.SnipcartSettings.protocol, '://')
            .concat(window.SnipcartSettings.domain, '/themes/v')
            .concat(window.SnipcartSettings.version, '/default/snipcart.js')),
          (i.async = !0),
          t.appendChild(i)),
        !e &&
          window.SnipcartSettings.loadCSS &&
          ((e = document.createElement('link')),
          (e.rel = 'stylesheet'),
          (e.type = 'text/css'),
          (e.href = ''
            .concat(window.SnipcartSettings.protocol, '://')
            .concat(window.SnipcartSettings.domain, '/themes/v')
            .concat(window.SnipcartSettings.version, '/default/snipcart.css')),
          t.prepend(e)),
        y.forEach(function (h) {
          return document.removeEventListener(h, o);
        }));
    }
    function $(t) {
      !E ||
        ((t.dataset.apiKey = window.SnipcartSettings.publicApiKey),
        window.SnipcartSettings.addProductBehavior &&
          (t.dataset.configAddProductBehavior = window.SnipcartSettings.addProductBehavior),
        window.SnipcartSettings.modalStyle && (t.dataset.configModalStyle = window.SnipcartSettings.modalStyle),
        window.SnipcartSettings.currency && (t.dataset.currency = window.SnipcartSettings.currency),
        window.SnipcartSettings.templatesUrl && (t.dataset.templatesUrl = window.SnipcartSettings.templatesUrl));
    }
  })();
</script>

Replace [YOUR API KEY] with the public test API key provided in your Snipcart account.

Add to Cart Button

The add to cart button could potentially be used in many places, so it would be a great time to build a Hugo partial.

Browse to ~/hugo-store/themes/store-theme/layouts/partials/ and create a file called add-to-cart.html.

Inside this file, lets add the following button:

<!-- add-to-cart.html -->
<button
 class="snipcart-add-item buy-button button button--salmon text--white my-3"
 data-item-id="{{ '{{' }} .Params.id }}"

 {{ '{{' }} if .Params.Image }}
  data-item-image="{{ '{{' }} .Params.Image }}"
 {{ '{{' }} end }}

 data-item-name="{{ '{{' }} .Title }}"
 data-item-price="{{ '{{' }} .Params.Price }}"
 data-item-url="{{ '{{' }} .Permalink }}"
 data-item-description="{{ '{{' }} .Content }}"
>
  Add to Cart
</button>

Snipcart utilizes data attributes on the add to cart button to discover what products get added to the cart. We can use the same product metadata and front matter params we set up to pass along this information. We are conditionally passing over an image, if it is present.

With the partial added, it can now be included inside layout files. We will want to add this in a few spots: products displayed on the home page, category list page and the product's single page.

Open ~/hugo-store/themes/store-theme/layouts/index.html and add the partial beside the "View Details" button.

<div class="product__button-container">
  {{ '{{' }} partial "add-to-cart" . }}
  <a class="button" href="{{ '{{' }} .Permalink }}"> View Details </a>
</div>

The exact same thing can happen inside ~/hugo-store/themes/store-theme/layouts/default/list.html for category pages.

Finally, let's add the partial on the single product page, by opening ~/hugo-store/themes/store-theme/layouts/default/single.html and including it after the .Content section:

<div class="text--size-md">{{ '{{' }} .Content }}</div>

{{ '{{' }} partial "add-to-cart" . }}

Now when visitors click the "Add to Cart" button, the product will be added to the cart. This will also open the Snipcart drawer to display all of the cart information.

View Cart Button

We want to include a button that allows visitors to open the cart at anytime. This can easily be added to the theme by adding a button inside the ~/hugo-store/themes/store-theme/layouts/default/_baseof.html file.

Right before where we include the footer partial, let's add the button like so:

<div class="snipcart-checkout pos-fix pin-bottom pin-right mr-4 mb-4">
  <button class="snipcart-summary button button--lg button--salmon text--white">
    <span class="mr-2 flex flex--align-center">
      <span class="ml-2">Cart: </span>
    </span>
    <span class="snipcart-total-price"></span>
  </button>
</div>

With Platform UI's position utilities, we can fix the button to the bottom right of the viewport with pos-fix pin-bottom pin-right classes.

Snipcart's JavaScript will update the snipcart-total-price to display the current total cart cost. Now clicking the button will open the cart, allowing visitors to checkout!

Wrapping Up

With Snipcart now integrated into our Hugo site, we have a fully-functioning online store! We could expand the store in a few different ways as well:

Options for product sizes, colors, and more.
Better navigation to allow for easier browsing around.
Store search functionality.
A footer that provides more information.

I definitely encourage exploring things further, but this should be a great baseline example for setting up an online store with Platform UI, Hugo, and Snipcart.

If you would like to view the completed code, please check it out over on Github!

Animated Scroll Effects

Wed, 18 May 2022 12:00:00 GMT

I’m a huge fan of animation on the web, especially when it comes to user interaction. A simple way to include such a thing on webpages is by triggering some sort of effect when scrolling.

Elements fading in and out to tell a story. Background colors changing to differentiate page sections. Cards and content popping in at various points on the page. These types of things can enhance the user experience on your page.

The intersection observer API provides a vanilla JavaScript approach to adding scroll effects by triggering functions when elements intersect certain points of the viewport. Intersection observer can be difficult to work with, so a library such as Animate on scroll may make things simpler.

My personal favorite library to animate with is the GreenSock Animation Platform. GSAP is useful for all sorts of animations, including scroll triggered effects.

To show this off, let’s build a neat effect I came across on a website recently! The website included a hero section containing text. As you scroll the page, the text scales to highlight the importance of the message.

For this demo I have created a Codepen to follow along with. I already included HTML, CSS, GSAP, and the ScrollTrigger plugin, so no need to set anything up! We’ll focus on the JavaScript to find out that with a few lines of code, we can build a neat scroll trigger animation.

Demo

One of the key things GSAP provides as a library is the ability to create animations based on a timeline. This enables much more complex animations than what CSS keyframes provide. To create a GSAP timeline, we can initialize like so:

const tl = new gsap.timeline();

Now we are able to describe what animations should occur within that timeline - we can do that with tweens. Tweens explain what the animation should do between the start and end of the timeline.

Tweens take in two key parameters:

The element you want to animate.
An object explaining how the element will animate, including CSS properties to animate.

You can include as many tweens as needed to complete the animation. GSAP includes three different types of tweens:

.to() - animates an element to something.
.from() - animates an element from something.
.fromTo() - animates an element from one thing to another.

Pretty straightforward! To create tweens, we can tack them onto the timeline. To make things even easier, we can chain tweens together.

So in our example, we want to create a tween that scales the .scale-text element to a large size:

const tl = new gsap.timeline();

tl.to('.scale-text', {
  scale: 10,
});

The animation should trigger, however that is not quite what we want yet - we want this to happen on scroll. This is where the GSAP ScrollTrigger plugin comes in!

Inside where we initialized our timeline, we can configure ScrollTrigger:

const tl = new gsap.timeline({
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    scrub: 1,
  },
});

tl.to('.scale-text', {
  scale: 10,
});

The scrollTrigger object contains some configuration properties: trigger - specifies what element will trigger the animation. start - tells GSAP at what point to start the animation. In our example it is when the top of the element reaches the top of the viewport. scrub - enables the scrollbar to become the scrubber for the animation. Setting this as true will enable this, but specifying a duration will smooth out an animation.

There is a lot of ways to configure ScrollTrigger. I recommend checking out the GSAP ScrollTrigger documentaiton page to find out more!

Now, our animation may not look like it is doing anything, but when you start scrolling you should see it kick off. The text "empowering people" will scale up in size. Our scroll trigger animation is working and we did that with only a single tween too!

Here are a couple of small enhancements we can add as well:

const tl = new gsap.timeline({
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    scrub: 1,
  },
});

tl.to('.scale-text', {
  scale: 10,
})
  .to(
    '.hero',
    {
      opacity: 0,
    },
    '<25%'
  )
  .to(
    '.cards',
    {
      opacity: 1,
      duration: 1,
      y: 0,
      stagger: 0.5,
      ease: 'back.out(1.7)',
    },
    '<25%'
  );

I added two more tweens:

The first will fade out the .hero element as it scrolls out of view.
The second will pop the cards into view as they scroll.

This adds slightly more interesting effects to the page. There are a couple of other fun things to note happening as well:

The <25% part is a positional timing parameter that tells the tween when to start. Tweens generally start right after another, but with this we can tell the tween to start sooner or later in the timeline.
GSAP can animate a single element or an array of elements, such as our .card elements. We don't want all the cards to animate in at the same time, so we include a stagger property to make each have a delay.
Easing is a method of smoothing out animations and can make tweens feel more natural while transitioning. GSAP can handle easing with the ease property and has several built in easing functions. You can play with these eases with the ease visualizer and find out which is best for your animations.
GSAP also includes shorthand properties such as x and y that correspond with the CSS transform property.

Final Result

So there you have it, a super neat animated scroll trigger effect that is only a few lines of JavaScript!

See the Pen{' '} <a href="https://codepen.io/mrtrimble/pen/zYRoGgZ/7545ac69b915f060e1585b886719a856">Finished - Scroll Trigger Demo</a>{' '} by Ryan Trimble (<a href="https://codepen.io/mrtrimble">@mrtrimble</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

(For best results, view on Codepen)

Ryan Trimble, UX/UI Developer

Things I Like

I Like Accessibility

I Like Animations

I Like Building Stuff

I Like Learning Stuff

I Like Optimizing

I Like Semantic Markup

I Like Styling

I Like the Web

Taking things into my own hands, Part 2: Electric Boogaloo

What is Coolify, again?

VPS Hosting

Cloudflare DNS

How I'm handling emails

What about Analytics?

Anything else?

In Conclusion...

Uploading Some Old Posts

My Strong Interests Profile

The Results

General Occupational Themes

Basic Interest Scales

Selected Career Fields

Reflections

Troubleshooting my emotions

Taking things into my own hands

System Information

Remote Access

Applications

ConvertX

Gitea

Home Assistant

Immich

Paperless-NGX

Pi-hole

Plausible

Penpot

SearXNG

SolidInvoice

Stirling-PDF

Vaultwarden

Synology Apps

Reasoning

Weekly Roundup #39

Interesting Links

From yours truly

Building with AI: Work Hackathon

Selecting an AI Model

Building the project

Creating a Web Cam

Adding AI

Working with Astro Actions

Extending Featureset

My Findings

Weekly Roundup #38

Interesting Links

Weekly Roundup #37

Interesting Links

Weekly Roundup #36

Blogroll Updates

Interesting Links

New Looks for 2025

Looking to Learn

Weekly Roundup #35

Interesting Links

12daysofweb.dev

Personal thank you

Yearly Roundup #1

My 2024

Sold our house

Weekly Roundups

Bit of a mental breakdown

Visited Los Angeles

Technical Writer for CSS-Tricks

Attended Frostapalooza

Redesigned my website

Sister's wedding

A new job!

On to the next one