Troy Vassalotti :: Blog

Send Honks With Gonk

2025-01-06T00:00:00Z

I'm cleaning up my site and realized I never made a post about Gonk, a silly messaging service I made. You may be wondering why it's called "Gonk." I, too, am wondering that. It's an inside joke from years ago at this point.

You may also be wondering what it is you can do on Gonk. Well, you send honks with Gonk, of course. What is a "honk?" A honk is a little note composed of a sound clip and a tweet-length message. Before you ask, NO you cannot upload your own sound to share. I have curated a fine selection of sounds to choose from. If you want more options, contact me.

What are you waiting for? Go forth and send some honks.

Song Lyrics

2024-05-11T00:00:00Z

I read this post from Keenan and felt seen.

From their post:

When I listen to music, I can hear the individual words. I can sing along to the song (or at the very least reproduce close approximations to the sounds I hear). I can latch on to refrains. But interpreting meaning from any of this is, at best, a futile endeavor. I do find this strange, considering how deeply I feel music at an emotional level. But I form attachments to vibes, not linguistics.

Same!

They recount a story of putting Alien Ant Farm's "Attitude"^[1] on a mix CD for a girlfriend and being questioned about why that song in particular.

"'It seems like we need our own space'?" she wrote. "Are you trying to tell me something??"

I'm sure I've potentially walked myself into similar situations in the past.

Music has been a central focus of my entire life, having grown up with two musical older brothers who instilled upon me my entire music taste. Hell, I write music quite often. But here's the thing: I don't consider myself a lyricist and dread writing words to my own music. It's the reason my second album was instrumental. Believe me, I tried for a long time to put words to those songs. All it got me was a single song with words I was happy with that I'll be releasing sometime in the future.

The music is what ultimately spoke to me most. It always has been. I write the music first and the words that go over them are an afterthought. This is how it goes in my band too. We share songwriting duties, but I've not contributed lyrics to them in all 10 years we've been together. It's not how my brain works.^[2]

My lack of lyrical awareness gets on my wife's nerves all the time, and I think it's the same reason I'm falling out of love with Taylor Swift as her last couple albums don't do anything for me. I can't vibe with them anymore. It's not like I'm listening to Red, or 1989, or Reputation, or Lover anymore. Those songs have beats, they have vibes, but this post isn't about Taylor.

One of my favorite songs ever - one that will 99% of the time put me to tears - has no words. It's beautiful; it's vibrant; it's emotional; it has no words. It's called "Red Paper Lanterns" and it's by Maybeshewill.

This isn't to say there aren't songs that move me with their words! There are! Most Owen songs strike chords with me with their words in addition to the lovely guitars. But the lyrics aren't the main event for me.

The funny thing about this is that earlier in the day I saw this post come through my feed, I was making a mental note to go listen back to this AAF album. ↩︎
The difference is with my first album which was very much a breakup album, so... ↩︎

Webmentions Web Component

2024-03-22T00:00:00Z

I've been giving my site a fresh look recently. It mostly involved stylesheet updates with a touch of dependency management and site simplification, but I got overwhelmed by the unknowns in how my existing webmention system worked^[1] and wanted to do something that felt more comfortable.

Chris Burnell's eleventy-cache-webmentions has been my plugin-of-choice for handling webmentions up to this point because it gave me exactly what I needed with little configuration necessary (thanks Chris!). But I wanted to try something different; something that I can build myself.

I also need to thank Max Böck for inspiration as well from his own webmention setup.

As a full-time Web Component Maker, overhauling my webmention setup felt like a good time to make a new component; a component that other people can use on sites that aren't Eleventy. Plus, it helps that a one-time Google search came up with no results for a Webmentions Web Component.

Converting a build-time process into a run-time process does have its downsides:

I now maintain a new web component.
The API call for webmentions happens on the client. I haven't tried this yet, but it seems like a good use for the Eleventy is-land component.

Though the upsides felt worth it:

I get to create a new web component and learn something in the process.
Anyone can take this web component and put it on their site.

The catch to all this is that I use webmention.io, so the code involved in my component is tightly coupled in some ways (more on that later).

The way it works is it makes an API call to the webmention.io API for the current URL, grabs any and all mentions, and renders them in-place in two possible variants: a feed or a facepile.

<web-mentions variant="feed (default) || facepile"></web-mentions>

There are other options too:

While the component by default has no styles and doesn't use shadow DOM, giving it the loadstyles attribute will adopt some starter styles to your document: <web-mentions loadstyles></web-mentions>.
Both the domain and page path are configurable so you can show webmentions of a fully different site. I used the domain property myself for local development since otherwise it attempts to fetch mentions on localhost: <web-mentions domain="https://example.com" path="some/path.html"></web-mentions>.
You can filter by the type of mentions you want to show, which means you can mix and match showing some types as a facepile and others in a feed:

<web-mentions
	variant="facepile"
	filters="likes"></web-mentions>
<web-mentions
	variant="feed"
	filters="bookmarks, replies, reposts, mentions"></web-mentions>

The component is not on npm yet, but you can take a look at it for yourself by viewing the source. I consider this like a beta-of-sorts and if enough people find this useful then I'll expedite the process of publishing it as a package.

As I said, I use webmention.io so support for any other services is completely a mystery to me since I don't know them. I planned ahead somewhat by making the API service it's own attribute/property, but that doesn't change the actual object key's the component looks for in the data which are coupled to webmention.io.

At the time of publishing this post, it will have no webmentions, so look at this other post of mine to see it in action.

What do you think? Love it? Hate it? Let me know!

This isn't surprising considering webmentions as a whole are not a straightforward system. ↩︎

Physical Media

2023-12-26T00:00:00Z

CDs, vinyl records, DVDs, VHS tapes, video games. Blockbuster, Best Buy, your local video store.

I miss physical media. I don't personally want to own items of each format I listed above; I have long stopped owning CDs in favor of vinyl (hopefully with an accompanying digital download) or purchases from Bandcamp. I'm moreso talking about the industry and culture of physical media, of collections that can be made unique or rare, tangible, not on-demand.

Music streaming has made listening to music as a whole more accessible to the globe. You can listen to almost every piece of music from anywhere on your preferred streaming service. Small artists like myself can reach audiences easier than ever before. But what has streaming caused us to miss out on?

Deluxe editions and bonus tracks: There's no point to calling anything a bonus track when it is readily available on Spotify under the "deluxe" release which sits directly next to the "standard" release in that artist's discography.
Region-specific tracks: I remember scouring the internet - legally, of couse - for the Japan-exclusive songs from Less Than Jake, Zebrahead, and the like. Now what tends to happen is an album from one of your favorite bands can suddenly be "unavailable in your country" on streaming even when it was previously in your library, playable.
Ownership: You don't have to look far to see why digital ownership sucks.

I mentioned being able to find "almost every piece of music" online because there's a benefit of having collected my music library my entire life in a series of hard drives and cloud providers: I have entire discographies from bands that no longer exist (or existed before streaming was readily available) where you can't find their music anywhere save a YouTube video or two. I cherish this collection and freedom to own my music without limits.

I'm not a movie person which means DVDs and such don't apply to me, but I enjoyed listening to this episode of Changelog where they go into more detail about why physical media matters in the movie industry.

TroyGPT

2023-04-30T00:00:00Z

Need a blog post right now? Look no further! I made a web component called word-salad.

The way it works is you give it a set of words and it gives you a new set of words. You can ask it for single words mashed up into a mess, or full sentences generated from single words to create a multi-mess.

I'm here to help you write your next blog post in my voice as I've already supplied word-salad with every word from all my blogs. Is it useful? Absolutely not. Does it write anything that sounds at all coherent? You wish. Will it almost certainly spit out Nunjucks code and a few stray HTML artifacts? You bet, and that's because I don't know regular expressions well enough to replace all that stuff.

Isn't AI great?

Simultaneous Drinking

2023-04-18T00:00:00Z

Think about the last time you were out with friends or family and there were drinks in front of each of you. When slight breaks in a conversation happened, did you all reach for and take a drink at the same time in that moment of stillness? It's possible the venn diagram for people reading this post and people who have noticed this is two separate circles.

I imagine we instinctually take that time to collect our thoughts or attempt to transition topics so you don't encounter awkward silence. If the latter is the case, I also believe maybe awkward silences aren't that bad.

How My "Now Playing" Feature Works

2023-02-05T00:00:00Z

I mentioned in a previous post how I display any song I'm currently listening to on my site^[1], but I want to set the record straight about something in particluar with that feature.

TL;DR I fetch data from the ListenBrainz API, but that might not mean the song you see is a song I'm choosing to hear.

Everything I've ever listened to since 2021 (that I've been able to scrobble) is sent to ListenBrainz. They provide a simple API for sending, pulling, and even deleting listens. That API is how the various browser extensions and apps I use scrobble what I'm listening to. An app called Pano Scrobbler is specifically what scrobbles listens from my phone. The app looks out for the media notification on my Google Pixel for media coming from any apps I select - Deezer, Pocketcasts, YouTube, etc. - and can also use the phone's Now Playing feature as a source.

Pixels have what is essentially an always-on Shazam (yeah, a little creepy, but it's a sacrifice I make in the name of logging my listening habits). It can tell me what song I'm playing from my laptop if the volume is loud enough, but it can also tell me what song is playing at the gym or my local coffee shop. I love that because it provides insight into the music I hear passively, but the catch is that at any moment in time someone can visit my website and think I'm actually choosing to listen to Imagine Dragons.

Next time you see what's playing, consider for a moment that I might not be aware of the song I'm hearing (unless that song makes me exceptionally cooler, in which case I'm definitely choosing to play it).

It used to be done with edge functions, but I created a web component instead after seeing Andy Bell's version. ↩︎

Being Filmed In Public

2023-01-09T00:00:00Z

I read this article from The Verge - "Please don't film me in 2023" - and would also like to not be filmed for content without my consent.

In one of the examples, it took a creepier path where being filmed and posted online unknowingly about something innocuous led to a stranger online identifying and notifying the subject.

This quote from the article compares the TikTok format to other recognizable examples:

The man-on-the-street genre is a well-worn format — before Billy Eichner was writing and starring in movies, he was bothering normal, unsuspecting people about La La Land. Journalists have long used the form to get first-hand accounts and opinions for news hits. In the case of more professional operations, there’s likely at least some level of getting permission, whether that’s having subjects sign release forms or identifying clearly who’s filming and why. In the case of random TikTok creators, it’s clear the level of consent and notice runs the gamut.

One of my favorite shows is Impractical Jokers. This topic of making strangers uncomfortable for entertainment comes up when discussing the show and I'll admit I don't know the ins and outs of TV show production. But I like to think there's still more care being taken to making sure permission is granted and it's not done in ill will than the average viral video of the same format.

Error is : 04-B0

2022-12-30T00:00:00Z

As seen on a bike at the gym:

Error is : 04-B0

I searched the internet for this code plus keywords related to workout bikes and got nothing. I didn't manage to get a picture of the bike this time, but I hope someone out there knows immediately what I'm talking about and can let me know what this means.

Thoughts on Blogging

2022-12-08T00:00:00Z

I tend to get hung up on creating the perfect blogging experience. Like "oh, a CMS is designed for that, so I should set one up." But that's a lot of work. More work than I ultimately care to take on.

I can continue on with my current workflow of using markdown, but sometimes I do need HTML that isn't covered by the spec. Luckily, markdown accepts HTML! But then it's no longer in the perfect, human-readable text file format.

A CMS doesn't solve that problem though. A WordPress post is compromised of blocks and you can see visually how those blocks will render; It's all still HTML in the end. I can install markdown plugins in there, but it's all still WordPress blocks which are still HTML. Even then, it's all WP-specific. I can't open up Notepad and write WP blocks. At least, not at all efficiently.

At this point I'm wondering if what I'm chasing doesn't exist? The intended target of the raw post isn't a human - it's a web browser. The human is meant to read the final product on the website. As such, it shouldn't matter if I write a blog post that looks like a mashup of plain text, formatted text, and HTML... Right?

Letting go of the idea that my post needs to be the most efficient and readable thing is hard, but I am realizing it's fine if I don't have a CMS with all the fancy features, or if my markdown has code in it. What matters is I use the tools at my disposal to craft a piece of work I'm proud of.

Embracing The Indie Web

2022-12-04T00:00:00Z

The tinkerer in me - the same one who enjoys spending hours of his weekend trying out a fancy new framework even if he knows he'll never really use it - has latched onto the idea of embracing the indie web.

It's a lovely concept/movement/way of life, but it isn't without its complications. You can't blame it much for not being too user friendly. The fact of the matter is there's (currently) a lot of technical knowhow required to properly publish on your own site and syndicate elsewhere.

It wasn't too long ago that I added webmentions to my blog, and even more recently that I accidentally broke them by deleting (for obvious reasons) my Twitter account. I'm now left with figuring out how to properly start over from the Fediverse.

Bridgy is a cool tool I used to publish my posts to Twitter that I'll be diving deeper into now. You can even interact with GitHub on it! That's wild. I can't even imagine creating issues on repos through a post on my site, but you can bet I'm going to try.

This very post is going to be a test of publishing to Mastodon using Bridgy, so if you follow me over there then you'll know if it works.

The technical knowledge isn't the only barrier here. I'm confident I can figure this all out, but the time and effort it asks of me is hard to balance, let alone for someone who doesn't hold the web as a career or hobby.

A CMS like WordPress can go a long way in helping the average blog owner embrace the indie web and I hope that continues to get better, but I don't use a CMS so I'm building it all from scratch. I'm writing this post from my phone as an experiment with a mobile non-CMS blog-on-the-go solution. Every few weeks I get the idea that I'll move my content to a headless CMS but that is another time suck I'm not interested in starting.

Free Podcast Idea No. 1

2022-12-03T00:00:00Z

"This Is Why We Don't Have A Podcast": a host talks to a different acquaintance every week for an hour on a podcast with no format. Together, they (and the audience) learn over this hour why they haven't already started a podcast through the awkwardness of talking to someone you don't know very well.

This assumes the two of you have known of each other for enough time that it's safe to say you'd already have been friends by now if it was meant to be.

Practicing Restraint

2022-10-09T00:00:00Z

I decided to try and refactor Plvylist using Lit the other day. This is the second time I've attempted such a project. The first time was a mistake because I had no prior experience using Lit and I barely understood how my own web component worked to begin with. I've been working with Lit a lot at my current position at TRP, and with time to kill waiting for a flight home I figured I'd make another attempt. "How hard could it be?" I thought. It turns out, still as hard as it was before. Trying to transition this component into Lit truly shines light on a lot of underlying problems with its structure.

On one hand, I view those problems as good problems to have since the nuances and errors show me how fragile the component is and force me to rethink how data is handled and passed. On the other hand, it feeds this inner desire of mine to fix everything at once and immediately. I have a hard time of putting things down when I'm so intent on finishing them. It's a legitimate problem and I'm trying to be aware of it when it happens. This project is one where I'm aware of a few things now:

How long it will take me: too long,
The level of effort: too much,
The impact it will have: minimal.

Changing Plvylist like this serves a single person: me. Even then, it doesn't solve any real problems I have. I'm hoping that by writing this down, I can suppress that obession to finish what I started and convince myself it isn't worth the time and effort.

1942 Data Error

2022-09-17T00:00:00Z

We stayed in a house at the beach this past week as part of the family's yearly vacation. This year's house had both a theater and arcade room, and I'm here to talk about an error message I saw displayed on one of its arcade machines.

1942 Data Error

That's all it said. I did the first thing anyone in my position would have done: took to DuckDuckGo for the answer. You know what I found? Nothing. References to Battlefield: 1942 - a completely separate game, sure - but not what "1942 Data Error" means for this particular machine.

Then it dawned on me how niche of a situation I found myself in: A vintage arcade machine encountering an error that the internet has not seemed to document and that only other renters of this house will stumble upon, who will presumably reach the same conclusion I have.

Someone out there knows what it means, and that person has probably spent years studying arcade machines and could tell me everything I need to know - including how to fix it - as if I asked them what color the sky is.

If you're that person, or you know that person, I'm waiting for your email.

P.S. Here's another machine's friendly "WINNERS DON'T USE DRUGS" message from the FBI.

Use Node Modules in Eleventy

2022-04-01T00:00:00Z

When I started my Eleventy journey, I was still very new to web development. I'd see posts about cool CSS resets or script packages and want to use them, only to be stumped on how to get from npm i to using it in my static site website.

Well, this month I was doing some Googling on something I've already forgotten and found an issue in the 11ty repo where someone asked this exact question, months before I needed it.

The solution? Eleventy's Passthrough File Copy.

// Zach's answer from the GitHub issue
eleventyConfig.addPassthroughCopy({
	"node_modules/chartist/dist/chartist.min.css": "assets/chartist.min.css",
	"node_modules/chartist/dist/chartist.min.js": "assets/chartist.min.js",
});

If only I knew how to properly Google code questions back then. Hopefully someone else may find this useful.

Making a Sudoku App with Vue

2022-03-03T00:00:00Z

I was surprised by how difficult it was to find a full-blown tutorial for making a Sudoku app with Vue. On the contrary, the internet is overflowing with React versions of Sudoku, so I decided to follow one of those and port it into Vue.

Matt Biilmann of Netlify fame made a Sudoku React app that can be found over on the freeCodeCamp YouTube channel, and it's this video that was the entry point to my app, Vuedoku. I got it started with Vite because I've been using that a lot lately and think it's rad.

Getting Started

It's important to first understand how Sudoku works. I'm not qualified to define it for you, but Wikipedia is:

Sudoku is a logic-based, combinatorial number-placement puzzle. The objective is to fill a 9 x 9 grid with digits so that each column, each row, and each of the nine 3 x 3 subgrids that compose the grid (also called "boxes", "blocks", or "regions") contain all of the digits from 1 to 9. The puzzle setter provides a partially completed grid, which for a well-posed puzzle has a single solution.

Makes sense, right?

At its core, the app needed the following features:

A way to generate a playable board and store its solution in the background.
The ability to add guesses to blank spaces and only the blank spaces.
A shortcut to fill in the solution when you get stuck, or generate a brand new puzzle if you'd like.

Additional features that came from both Matt's video and my post-video thinking include:

The option to highlight your guesses as either correct or incorrect if you find yourself stuck or needing a hint.
Sharable boards so you can challenge friends to see who can complete the same board in the shortest amount of time.
A way to restore your previous board in case you accidentally generate a new puzzle, overriding your current work.

Since we outlined the features our app needs, we can try to map our what components it will need. It's a small app which means there are but a handful of pieces to this puzzle (ha ha, get it?).

SudokuBoard.vue is our board itself.
SudokuField.vue is the individual square or block composing the board.
Timer.vue is the clock keeping track of how long you've been playing.
Result.vue is what shows when your puzzle is completed (either by cheating with the shortcut or naturally because you're so good at Sudoku).
ReloadPrompt.vue also exists, but it's only purpose is to display a message when the app is available for offline use, as part of the vite-plugin-pwa package.

Knowing what the outcome is supposed to be and what components we'll need, we can now start building it. I used Vite's Vue 3 starter, so follow their docs for the most up to date method of doing that.

Generating Data

In order to create a board, we need a Sudoku generator, so let's install sudoku from npm.

npm i sudoku

The sudoku package comes with two key functions we'll be using: makepuzzle() and solvepuzzle(). The former generates an array with null values for empty boxes and fills the rest with starter numbers.

That's great, but we need it to be in the format of columns and rows since that's how you work with the board. We also need the solution for that puzzle so we can check progress during the game. And that's not all! We want to track the player's start time and end time.

The best way of keeping all these pieces of information together is by creating our own object to store data in.

// lib/sudoku.js
import {makepuzzle, solvepuzzle} from "sudoku";

/*
  Generates a sudoku with the structure
  {rows: [{index: 0, cols: [{row: 0, col: 0, value: 1, readonly: true}, ...]}, ...]}
*/
export function generateSudoku() {
	const fromUrl = extractUrlData(); // Used if you share the game with a friend

	const raw = fromUrl ? fromUrl.raw : makepuzzle();
	const rawSolution = solvepuzzle(raw);

	const formatted = raw.map((e) => (e === null ? null : e + 1)); // Adjust the values slightly since we're working with a 0 indexed situation
	const formattedSolution = rawSolution.map((e) => e + 1); // Same thing goes for the solution

	const result = {
		raw,
		rows: [],
		solution: formattedSolution,
		startTime: new Date(),
		solvedTime: null,
		challengerStartTime: fromUrl && new Date(fromUrl.startTime),
		challengerSolvedTime: fromUrl && new Date(fromUrl.solvedTime),
	};

	// Loop over the formatted data to generate row and column data
	for (let i = 0; i < 9; i++) {
		const row = {cols: [], index: i};
		for (let j = 0; j < 9; j++) {
			const value = formatted[i * 9 + j];
			const col = {
				row: i,
				col: j,
				value: value,
				readonly: value !== null,
			};
			row.cols.push(col);
		}
		result.rows.push(row);
	}

	return result;
}

At this point, we have a file sudoku.js in our lib directory. To use our data, we need to import generateSudoku()to our App.vue and store the Sudoku in app state.

// App.vue
<script setup>
import {reactive} from 'vue'
import {generateSudoku} from './lib/sudoku'

const store = {
  state: reactive({
    sudoku: generateSudoku(),
    showProgress: false, // Used in highlighting correct/incorrect cells
    previousSudoku: null,
  }),

  /*
  * snip
  */
</script>

Our app now has access to a store object, which holds our app's state object. The app state is defined as reactive so we can change its value as needed, and our Sudoku is generated on the fly (along with a game options setting and previous Sudoku fields). It's store.state.sudoku that gets passed as a prop to our board component.

// App.vue
<script setup>
import {reactive} from 'vue'
import {generateSudoku} from './lib/sudoku'
import SudokuBoard from './components/SudokuBoard.vue'

const store = {
  state: reactive({
    sudoku: generateSudoku(),
    showProgress: false, // Used in highlighting correct/incorrect cells
    previousSudoku: null,
  }),

  /*
  * snip
  */
</script>

<template>
  <SudokuBoard :sudoku="store.state.sudoku" :progress="store.state.showProgress" :previous="store.state.previousSudoku"/>
</template>

The Board

We have data, but we have no home for that data. Our app needs a SudokuField component because it's those fields where we will provide our guesses, and our data is what plops those fields into the board.

Our field component needs to accept block information (a value and whether it should be read only), and it needs to pass change events back into the app. The entire component is relatively small since it has only a few specific needs.

// components/SudokuField.vue
<script setup>
const props = defineProps({
  field: Object,
  onChange: Function
})

/**
 * Pass changed field up to the Sudoku board to evaluate the field's value
 * @param e - Event
 */
function handleChange(e) {
  const el = e.target
  const value = e.target.value === '' ? null : parseInt(e.target.value, 10)
  props.onChange({...props.field, value: value, el: el})
}
</script>

<template>
  <input class="field" inputmode="numeric" maxlength="1" pattern="[0-9]*" :value="props.field.value || ''" :readonly="props.field.readonly" @change="handleChange">
</template>

<style lang="scss" scoped>
.field {
  --lightness: 8%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ink);
  color: hsl(0deg, 0%, var(--lightness));
  font: {
    size: var(--step-1);
  }
  text-align: center;

  &[readonly] {
    --lightness: 30%;
    cursor: not-allowed;
  }

  &:nth-of-type(3) {
    border-inline-end-width: var(--thickness);
  }

  &:nth-of-type(6) {
    border-inline-end-width: var(--thickness);
  }
}

@media (prefers-color-scheme: dark) {
  .field {
    --lightness: 95%;
    background-color: var(--canvas);

    &[readonly] {
      --lightness: 70%;
    }
  }
}
</style>

You may have noticed our handleChange() function and onChange prop. These two pieces are what pass state back to our app. onChange is a function prop from App.vue and handleChange() passes our onChange function data for the field you're currently working with. What's getting passed? Well, we need to tell the app 1) which field out of all the fields is being changed (props.field), and 2) what value that cell now is.

Our onChange function takes that and checks your guesses against the stored solution to determine if your game is completed or still in progress.

// App.vue
/*
 * snip
 */

const store = {
  state: reactive({
    sudoku: generateSudoku(),
    showProgress: false,
    previousSudoku: null,
  }),

  /**
   * Receives events from the individual fields to either highlight cells or check solutions
   * @param e - Event
   */
  handleChange(e) {
    store.state.sudoku.rows[e.row].cols[e.col].value = e.value
    if (!store.state.sudoku.solvedTime) {
      const solved = checkSolution(store.state.sudoku)
      if (solved) {
        store.state.sudoku.solvedTime = new Date()
        store.state.sudoku.shareUrl = shareUrl(store.state.sudoku)
      }
    }
  },

  /*
   * snip
   */

Now it's time to actually create fields for our entire Sudoku board, and that's where Vue's v-for directives come in. We have access to our Sudoku's rows, which gives us access to its columns and values. If we iterate over the rows, then iterate over each row's columns, we can insert fields for each value in our puzzle.

// components/SudokuBoard.vue
<script setup>
import SudokuField from './SudokuField.vue'

const props = defineProps({
  sudoku: Object,
  onChange: Function,
})
</script>

<template>
  <main class="main">
    <div class="wrapper">
      <div class="board" :class="{solved: props.sudoku.solvedTime}">
        <div class="row" v-for="row in props.sudoku.rows" :key="row.index">
          <SudokuField v-for="field in row.cols" :key="field.col" :field="field" :onChange="props.onChange"/>
        </div>
      </div>
    </div>
  </main>
</template>

Timer and Result Components

Let's get these two pieces out of the way while we're building our board. Timer.vue is a basic counter that doesn't depend on or interact with any other components.

// components/Timer.vue
<script setup>
import {onBeforeUnmount, onMounted, reactive} from "vue"

const props = defineProps({
  start: Date
})

const state = reactive({
  elapsed: 0,
  interval: setInterval(getTime, 1000)
})

function getTime() {
  state.elapsed = Math.floor((new Date().getTime() - props.start.getTime()) / 1000)
}

onMounted(() => {
  state.interval
})

onBeforeUnmount(() => {
  clearInterval(state.interval)
  delete state.interval
})
</script>

<template>
  <h2>Time: </h2>
</template>

Result.vue is slightly more complicated but mainly because it controls the end-game share functionality. Winning the game calls for a celebration, so confetti cannons are in order when this component is mounted to the DOM. We also want to show different content depending on if you cheated with the shortcut button or if you completed it on your own. Cheating sets a value in our sudoku object, so that's fine enough to trigger dynamic content with. We punish cheaters by calling them out on it and subjecting them to a YouTube video.

Sharing the game will either open up your device's native share sheet or copy your game URL to the clipboard.

// components/Result.vue
<script setup>
import {onMounted, reactive} from 'vue'
import confetti from 'canvas-confetti'

const props = defineProps({
  sudoku: Object
})

const state = reactive({
  elapsed: 0,
  opponent: 0
})

/**
 * Share your Sudoku link either as a URL or with the Share API
 * @param e - Event
 */
function shareLink(e) {
  let link = props.sudoku.shareUrl
  if (navigator.share) {
    navigator.share({
      title: 'Sudoku',
      url: link
    })
  } else {
    navigator.clipboard.writeText(link)
    let el = e.target
    let initialText = el.innerText
    el.innerText = "👍 Link Copied 👍"
    setTimeout(() => {
      el.innerText = initialText
    }, 3000)
  }
}

onMounted(() => {
  // Confetti Cannons
  state.elapsed = Math.floor((props.sudoku.solvedTime.getTime() - props.sudoku.startTime.getTime()) / 1000)
  state.opponent = props.sudoku.challengerSolvedTime ? Math.floor((props.sudoku.challengerSolvedTime.getTime() - props.sudoku.challengerStartTime.getTime()) / 1000) : null

  let duration = 15 * 1000;
  const animationEnd = Date.now() + duration;
  const defaults = { startVelocity: 15, spread: 360, ticks: 60, zIndex: 0 };

  function randomInRange(min, max) {
    return Math.random() * (max - min) + min;
  }

  const interval = setInterval(function() {
    const timeLeft = animationEnd - Date.now();

    if (timeLeft <= 0) {
      return clearInterval(interval);
    }

    let particleCount = 50 * (timeLeft / duration);
    // since particles fall down, start a bit higher than random
    confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
    confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
  }, 250);
})
</script>

<template>
  <div class="container">
    <h2 v-if="!props.sudoku.cheated">You solved it in  seconds</h2>
    <h2 v-else>You cheated, but it took you  seconds to do so.</h2>
    <p v-if="state.opponent">Your opponent solved it in  seconds.</p>
    <div class="rickroll" v-if="props.sudoku.cheated">
      <p>⬇️ This is your punishment for cheating. ⬇️</p>
      <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0&autoplay=1"
              title="YouTube video player"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
    </div>
    <p>Challenge a friend:
      <button id="share" @click="shareLink">Share Puzzle Link</button>
    </p>
  </div>
</template>

Both of these components live in SudokuBoard.vue.

// components/SudokuBoard.vue
<script setup>
import SudokuField from './SudokuField.vue'
import Timer from './Timer.vue'
import Result from './Result.vue'

const props = defineProps({
  sudoku: Object,
  onChange: Function,
})
</script>

<template>
  <main class="main">
  	<Timer v-if="!props.sudoku.solvedTime" :start="props.sudoku.startTime"/>
    <Result v-if="props.sudoku.solvedTime" :sudoku="props.sudoku"/>
    <div class="wrapper">
      <div class="board" :class="{solved: props.sudoku.solvedTime}">
        <div class="row" v-for="row in props.sudoku.rows" :key="row.index">
          <SudokuField v-for="field in row.cols" :key="field.col" :field="field" :onChange="props.onChange"/>
        </div>
      </div>
    </div>
  </main>
</template>

Let's recap where we are right now. We have a board filled with input fields, a timer keeping track of our play time, and a result view to display when the game is won. How do we know when the game is won though? Well, let's revisit those previous snippets App.vue.

Checking Solutions

Back in lib/sudoku.js we need to define the checkSolution function and export it. This function will accept a Sudoku object - the same being played in your current game - and compare it to said Sudoku's solution. We already have the solution on-hand because it gets stored when the Sudoku is initially generated, but we need to re-flatten our playable Sudoku to properly compare it back to the flat solution array.

// lib/sudoku.js
/**
 * Evaluate the current solution against the solution
 * @param sudoku
 * @returns {boolean}
 */
export function checkSolution(sudoku) {
	const candidate = sudoku.rows
		.map((row) => row.cols.map((col) => col.value))
		.flat();

	for (let i = 0; i < candidate.length; i++) {
		if (candidate[i] === null || candidate[i] !== sudoku.solution[i]) {
			return false;
		}
	}

	return true;
}

We use a similar method to generate the solution with solveSudoku when you cheat in the game.

// App.vue
<script setup>
import {reactive} from 'vue'
import {generateSudoku, checkSolution} from './lib/sudoku'
import SudokuBoard from './components/SudokuBoard.vue'

const store = {
  state: reactive({
    sudoku: generateSudoku(),
    showProgress: false,
    previousSudoku: null,
  }),

  /* snip */

  /**
   * Instantly solve the sudoku
   * @function
   */
  solveSudoku() {
    store.state.sudoku.rows.forEach(row => {
      row.cols.forEach(col => {
        col.value = store.state.sudoku.solution[col.row * 9 + col.col]
      })
    })
    store.state.sudoku.solvedTime = new Date()
    store.state.sudoku.shareUrl = shareUrl(store.state.sudoku)
    store.state.sudoku.cheated = true // This is what shows different content in the Result component
  },
</script>

At this point, we should have a playable game of Sudoku that checks for a solution with every input change event. When that solution is found, our Result component is displayed and all is good!

But let's make it better.

Game Too Hard? Add Hints!

We're already checking your game against the solution with every input, so we should be able to manipulate those cells on-the-fly. After being told by one player (my mom) that they filled up the board in what looks like a winning game but weren't being told as such, I added hint system. It's off by default, but turning it on will highlight cells red or green to denote wrong or right.

We can add a highlightCell function in our lib file.

// lib/sudoku.js
/**
 * Take the last edited field and add the proper class to it
 * @param field
 * @param sudoku
 */
export function highlightCell(field, sudoku) {
	const value = field.value;
	const solvedValue = sudoku.solution[field.row * 9 + field.col];
	if (value === solvedValue) {
		field.el.classList.contains("wrong")
			? field.el.classList.remove("wrong")
			: false;
		field.el.classList.add("correct");
	} else {
		field.el.classList.contains("correct")
			? field.el.classList.remove("correct")
			: false;
		field.el.classList.add("wrong");
	}
}

It takes the field you changed and the overall Sudoku. It will check your field against the overall solution and either add a class of "wrong" or "correct" to the cell. We first check if one of those classes exist and remove it before adding it - this is to account for a wrong cell later on becoming a correct cell so we don't end up with double classes.

These are the same parameters we're using to check for a solved game, so we can add this highlight step to the same function.

// App.vue
<script setup>
import {reactive} from 'vue'
import {generateSudoku, checkSolution, highlightCell} from './lib/sudoku'
import SudokuBoard from './components/SudokuBoard.vue'

  /* snip */

  /**
   * Receives events from the individual fields to either highlight cells or check solutions
   * @param e - Event
   */
  handleChange(e) {
    store.state.sudoku.rows[e.row].cols[e.col].value = e.value
    highlightCell(e, store.state.sudoku) // Add the highlight step
    if (!store.state.sudoku.solvedTime) {
      const solved = checkSolution(store.state.sudoku)
      if (solved) {
        store.state.sudoku.solvedTime = new Date()
        store.state.sudoku.shareUrl = shareUrl(store.state.sudoku)
      }
    }
  },
</script>

Now we need to be able to show the highlighting when the player turns on the setting. We will do this by adding a showProgress boolean to the app state, and we'll alter that via checkbox in the board. We already defined showProgress earlier in this article, so let's add the checkbox.

In our board component, we'll add a fieldset to house our game option. When checked, we'll call handleToggle, which will call either the enable or disable function from the progressOpts prop.

// components/SudokuBoard.vue
<script setup>
import SudokuField from './SudokuField.vue'
import Timer from './Timer.vue'
import Result from './Result.vue'
import {reactive} from "vue"

const props = defineProps({
  sudoku: Object,
  onChange: Function,
  solver: Function,
  reset: Function,
  progress: Boolean,
  progressOpts: Object,
  restore: Function,
  previous: Object,
})

const toggle = reactive({checked: false})

function handleToggle(e) {
  console.log(e.target.value)
  if (toggle.checked) {
    props.progressOpts.enable()
  } else {
    props.progressOpts.disable()
  }
}
</script>

<template>
  <main class="main">
    <Timer v-if="!props.sudoku.solvedTime" :start="props.sudoku.startTime"/>
    <Result v-if="props.sudoku.solvedTime" :sudoku="props.sudoku"/>
    <div class="wrapper">
      <div class="board" :class="{solved: props.sudoku.solvedTime}">
        <div class="row" v-for="row in props.sudoku.rows" :key="row.index">
          <SudokuField v-for="field in row.cols" :key="field.col" :field="field" :onChange="props.onChange"/>
        </div>
      </div>
      <div class="actions">
        <fieldset class="options">
          <legend>Game Options</legend>
          <label class="switch" for="progress-toggle">
            <span class="switch__label">Color Clues 🔍</span>
            <input type="checkbox" name="Toggle Cell Highlighting" id="progress-toggle" v-model="toggle.checked"
                   @change="handleToggle">
            <span class="slider"></span>
          </label>
        </fieldset>
      </div>
    </div>
  </main>
</template>

progressOpts is a function in our app state that we pass as a prop to the board.

// App.vue
  /**
   * Determines whether to show the highlighted cells
   */
  progressOptions: {
    enable: () => {
      store.state.showProgress = true
    },
    disable: () => {
      store.state.showProgress = false
    },
  },

We're not done yet! We need to only apply the highlighting CSS when showProgress is true. We do that with v-if. In App.vue, we add a conditional component at the top of the template to handle this.

// App.vue
<template>
  <component :is="'style'" v-if="store.state.showProgress">
    .field.wrong:not([readonly]) {
    background-color: rgb(255 0 0 / 0.3);
    }

    .field.correct:not([readonly]) {
    background-color: rgba(0 255 0 / 0.3);
    }
  </component>
  <header class="header">
    <h1>Sudoku</h1>
  </header>
  <SudokuBoard :sudoku="store.state.sudoku" :onChange="store.handleChange" :solver="store.solveSudoku"
               :reset="store.resetSudoku" :progressOpts="store.progressOptions" :progress="store.state.showProgress"
               :restore="store.restoreSudoku" :previous="store.state.previousSudoku"/>
  <ReloadPrompt/>
</template>

There you have it! Hints.

Challenge Your Friends

This game feature came from Matt's video and I'll be honest that I don't fully understand the APIs being used. That said, let's add it in.

We start with two new functions in our lib:

// lib/sudoku.js
/**
 * Create a URL for your sudoku to share with someone else
 * @param sudoku
 * @returns {string}
 */
export function shareUrl(sudoku) {
	const data = {
		raw: sudoku.raw,
		startTime: sudoku.startTime,
		solvedTime: sudoku.solvedTime,
	};

	const query = btoa(JSON.stringify(data));

	return document.location.href.replace(/\?.+$/, "") + `?sudoku=${query}`;
}

function extractUrlData() {
	const match = document.location.search.match(/\?sudoku=([^&]+)/);

	if (match) {
		return JSON.parse(atob(match[1]));
	}

	return null;
}

It uses the Web APIs btoa and atob. The former creates a Base64-encoded ASCII string from a binary string while the latter decodes it. We first create an object called data out of our Sudoku, then use JSON.stringify on that data, which becomes the binary string we encode with btoa. If we revisit our generator function, you can see extractUrlData in use as a way to generate your game if it was shared with you.

// lib/sudoku.js
export function generateSudoku() {
    const fromUrl = extractUrlData()

    const raw = fromUrl ? fromUrl.raw : makepuzzle()

If extractUrlData returns anything, it is stored as raw; otherwise, make a fresh puzzle.

You're Stuck and Want a New Game

I can't control how difficult the Sudoku actually is - and I've been told the game is hard - but I can add an option to make a new puzzle if you want. We can keep this function in the app state with the rest of our core functions.

// App.vue
  /**
   * Start over with a fresh board
   */
  resetSudoku() {
    if (!store.state.sudoku.solvedTime) {
      store.state.previousSudoku = store.state.sudoku
    }
    const allCorrectFields = document.querySelectorAll('.field.correct')
    allCorrectFields.forEach(field => {
      if (!store.state.sudoku.solvedTime) field.classList.add("previousCorrect")
      field.classList.remove("correct")
    })
    const allWrongFields = document.querySelectorAll('.field.wrong')
    allWrongFields.forEach(field => {
      if (!store.state.sudoku.solvedTime) field.classList.add("previousWrong")
      field.classList.remove("wrong")
    })
    store.state.sudoku = generateSudoku()
  },

I'll run through this step by step because it's a lot.

Check to see if there's a solved time - meaning your game is completed. If your game in incomplete, we store your entire Sudoku in state as previousSudoku. We'll use this in the next section.
Traverse the DOM looking for any input fields with the class "correct" and swap classes from "correct" to "previousCorrect." Do the same thing for fields with the class "wrong." Again, we'll use this later.
Replace the current Sudoku in state with a new one by calling generateSudoku. This has the side effects of also resetting your game clock, so we're all set to go!

We'll pass this function as a prop to our board and add a button to activate it.

// components/SudokuBoard.vue
<template>
  <main class="main">
    <!-- snip -->
        <div class="buttons">
          <button class="solve" @click="props.solver">Solve it Magically!</button>
          <button class="reset" @click="props.reset">New Puzzle</button>
          <button class="restore" @click="props.restore" v-if="props.previous">Restore Your Last Board</button>
        </div>
      </div>
    </div>
  </main>
</template>

Oops, you Accidentally Reset Your Game

You're out of luck then, that's your fault.

I'll help you out though. Remember how we stored your Sudoku as previousSudoku and swapped the field class names with "previousCorrect" and "previousWrong?" Let's use those in a new function called restoreSudoku.

// App.vue
  /**
   * Restore your last board if you created a new one by mistake
   */
  restoreSudoku() {
    store.state.sudoku = store.state.previousSudoku
    store.state.previousSudoku = null
    const allCorrectFields = document.querySelectorAll('.field.correct')
    allCorrectFields.forEach(field => {
      field.classList.remove("correct")
    })
    const allWrongFields = document.querySelectorAll('.field.wrong')
    allWrongFields.forEach(field => {
      field.classList.remove("wrong")
    })
    const previousCorrectFields = document.querySelectorAll('.previousCorrect')
    previousCorrectFields.forEach(field => {
      field.classList.add("correct")
      field.classList.remove("previousCorrect")
    })
    const previousWrongFields = document.querySelectorAll('.previousWrong')
    previousWrongFields.forEach(field => {
      field.classList.add("wrong")
      field.classList.remove("previousWrong")
    })
  }

The steps are as follows:

Take your previous Sudoku and put it back in as your current Sudoku, then null your previousSudoku.
Look for all fields with classes of "correct" and "wrong" and remove them.
Find all your "previousCorrect" and "previousWrong" fields and replace them with "correct" and "wrong."

You now have your game restored! This button can live beside your reset button as I showed in a previous snippet.

A Complete Sudoku Game

If you followed along, you should have a game nearly identical to the game I made, aside from any styling you want applied. Use npm run dev to spin up your dev server and see it in all its glory. I hope this helps someone else out there looking to make a Sudoku app in Vue.

I Don't Have A Podcast

2021-09-12T00:00:00Z

Are all your friends starting podcasts? Does that make you never want to start your own? Proclaim your dedication to never start your own podcast.

That's the first line of text you'll find on I Don't Have A Podcast. I started said website after a night of talking podcasts and how overwhelming the podcast landscape is.

You can find a podcast for literally everything you could ever want. Maybe it feels like you should start your own podcast. But here's the thing: you can be a podcast lover and not host your own podcast.

Show your determination to never start your own podcast to the public. Pick the side of never-podcasters and don't contribute to the saturation. Fill out the form on the site and your name (or whatever name you give me) will be added to the list.

Disclaimer: I love podcasts and am not advocating for people to stop doing what they love, but I also happen to think it is funny to sign a petition announcing that you'll never start your own podcast out of spite.

Over-Optimizing

2021-08-15T00:00:00Z

I find myself thinking too much about my projects; I want anything I make to be the best it can be. The sentiment is nice, but takes a lot of time in practice. Time, patience, mental energy, etc. - you name it. To be on a journey of perfection means to never end that journey.

Everything I make and put on the internet is a representation of me in one form or another, so the goal is that everything's always amazing. That said, there comes a time when I have to convince myself enough is enough and walk away.

For example, I have sites that were ambitiously made using new tools for the sake of practice, but also to prove whatever worth I had at the time. I've gotten much better at this whole web thing since they were published and I'm constantly fighting the urge to make them better to show that I've improved.

Doing so would be a waste of time and I know that. My time is better spent elsewhere. It isn't only those projects though. It's also this very website or any other mini site I've created. When I learn a new optimization method, CSS enhancement, or literally anything else, then I want to use it everywhere. It'd be one thing if every site I made was a core component of my life, but they aren't.

I remind myself every day that old projects can remain old projects, left alone to exist. I also remind myself that it's okay for my personal website to be messy sometimes, or if not messy then not fully optimized for performance. I like keeping things simple, which means I spend a lot of time looking at my code to see where I can get rid of fluff.

That time spent trimming down almost every site I make is time I could've spent reading, or writing (which I am doing to make this post), or recording music. I want to admit that I've gotten better at letting things go - I've been recording my next album! But there's still room for improvement.

I have a handful of websites I've reserved for dedicating my time to:

This one,
Front Royal's,
This is a Band,
and my solo project - troy.

A couple other sites use Python programs or shell scripts that populate content into a given template, so tinkering with those is often near-impossible. Anything else - specifically anything I've coded and have access to the source of - is supposed to be off limits.

I've recently started archiving GitHub repositories as a way of showing myself they shouldn't be touched; we'll see how that goes.

What's the moral of the story? Maybe it's that CSS and JavaScript don't have to be perfectly minified or fine-tuned to the narrowest of details. Or maybe it's that the web is an evolving platform built on the legs of backward compatibility and any site that can stand now will continue to stand without constant care. Both of those are great points.

More important than those though is that the reward received from spending countless hours relentlessly trying to make something perfect is never as good as you expect. In the end, you should've picked up that book or recorded that song.

Front Royal Made a Covers Album

2021-07-17T00:00:00Z

We've been working on some new music this year. I promise we'll have an EP of new originals later this year, but we thought a collection of covers from last year's pop hits would be a fun way to hold everyone over.

You can find the entire set over on our Bandcamp or streaming on our website. The hits include:

"cardigan" - Taylor Swift
"Afterglow" - Ed Sheeran
"Always Do" - The Kid Laroi
"Be Kind" - Marshmello & Halsey
"Hold On" - Justin Bieber

Thanks for listening, and be on the lookout for more later this year.

Colin.swf

2021-05-26T00:00:00Z

I found this video years ago but never saved it. Since I recently found out HBO Max has the first eight seasons of Whose Line Is It Anyway?, this video resurfaced in my mind. After far too many queries on search engines like "colin.mp4," "colin.avi," and "colin mochrie meme dance gif," the letters "swf" came back to me. I bookmarked the video, downloaded it to local storage, and am now writing a post in hopes of never losing it again.

Screen Names

2021-05-23T00:00:00Z

My first introduction to the internet was being given access to AOL's kid-friendly version, KOL, and it was then that I had to decide on my first screen name. I admit to not having the best recollection of how things went from there, but I feel like it was perfectly fine to have many screen names across platforms instead of being locked to one. When I created my first real email address, I followed suit with almost everyone else and chose a name closely resembling my own. That makes sense, and it felt like the right thing to do, but it was from that point forward that my use of custom screen names diminished. I had a screen name for video games and Twitter I guess, but for ease and simplicity I resorted to the adult choice of my personal name for any accounts asking.

We live in this age where we are so often on and connected. We all know that a simple search can tie us to nearly every online account because we use our real names as the identifier. Data breaches are complicated not only by their nature, but because those same emails, usernames, ad potentially passwords (if you aren't using a password manager...) can be traced to a plethora of other accounts elsewhere.

All of that is accepted now. What I'm actually interested in is a writeup on the history of screen names; something like The Rise and Fall of Screen Names if you will. I am not the person to write this story. While I've grown up in the middle of it all, I was not at the age to be fully aware of it. I didn't create a Facebook until the middle of high school, and it was probably after that when I got a Twitter.

I loved the creativity and comedy of Twitter handles (I'm looking at @fart, @nice_mustard, or @rad_milk), and it's my remembering of them that contributed to this post.

There are people out there who probably already have this stuff documented. A quick search of my own found no immediate results for this story (correct me if I'm wrong!), so I'm putting it out there to the world that I want it. I want to know the beginnings of screen names and how we transitioned to a time when the act of using one instead of your real name can be seen as a political statement; that last part I made up, but the rest of it stands. Where are screen names still acceptable, or even expected, and where have they fallen to the wayside?

I hope someone who knows way more about this than I do can write a lengthy article and send it my way. If this already exists, then I'm an idiot, and I hope someone corrects me.

Front Royal Covers cardigan by Taylor Swift

2021-05-21T00:00:00Z

It's safe to say I'm the biggest swiftie in Front Royal, so when we decided to write and release a covers album, it was no surprise I voted for a Taylor Swift tune. Cardigan is one of five songs being released in this covers series, so keep an eye out for the next ones.

cardigan by Front Royal

Check out Front Royal at all these locations:

"Sweet Talk" by Dear and the Headlights Cover

2021-01-14T00:00:00Z

I don't need to reiterate what 2020 is like. My friends and I, you may know us as Front Royal - the band, not the town - were sitting restless in our separate homes after the release of our debut LP, so we decided to cover one of our favorite songs: Sweet Talk by Dear and the Headlights.

Watch the video here:

Finding New In The Old

2020-06-25T00:00:00Z

I don't write as much music as I used to. There's a combination of reasons for why that is or may be, but their irrelevant to this post. Though I may not sit down and produce a song in its entirety that often, it's a given that I'll end up recording a snippet of a future song during my practice sessions.

Those recordings - typically a video so I can see myself doing the thing - end up in my Google photos library where they get thrown into a folder aptly named "Song Ideas."

In case you haven't guessed yet, there are/were problems with that process.

I can't search for any of these videos by name;
They don't get categorized any further than being labeled a song idea.

My old process was to periodically download them to my laptop and organize them locally in folders named by genres (or percentage complete as a song). Then, when I am in the mood to write for a longer period of time, I create a Guitar Pro 5 session and tab it all out - guitars, drums, bass, you name it.

This Rube Goldberg machine of songwriting got the best of me, so I finally made a better system through the use of a Sync.com account, automatic uploads to the cloud for each video/photo, and subsequent categorization with those aptly named folders that now live in the data atmosphere.

Things get lost though; with hundreds of ideas living in video form, I don't have the time or desire to make a full-blown song out of all of them. Hell, some are real blasts from the past to a time when I was about 30lbs heavier and didn't know a soul patch looked terrible on a high schooler.

But one of those lost treasures stood out to me recently; it's a song I wrote in 2013 as part of a beginner's music theory course.

The purpose of the project was something along the lines of needing to write a song X measures long with Y sections and Z number of instruments. I was incredibly confident going into it considering I already had years of playing and writing behind me.

Remember: this is a music theory course, and I had neglected to care about anything music theory up until this point. I wanted to learn it and the course fit my schedule, but I shoudn't have been as confident as I was.

It turned out to be a test of what little ego I had at the time. I wrote this fast-paced punk-style song with bright melodies and non-standard chords - my typical I've come to learn.

I was pretty proud of the little thing and thought for sure I'd nailed it.

My professor reviewed it and sent back his notes, including a re-write of the song to show me what he meant. Among those edits were:

Cutting the BPM in half;
Solidifying it into a major key;
Changing emphasis of key chords;
And some other things that would be too much to list.

I was a bit unsettled hearing the changes, but it was nothing meant to offend me. He was incredibly nice and helpful about the project. Looking back, I greatly appreciate it even if it changed the theme of the song so much.

I realize now that what he did was make it better. Sure, I still don't write songs that keep to the key as tightly as they could - and I like it that way - but his rendition of my song showed me there were more paths to take with a melody.

And it gave me a taste of what a back-and-forth songwriting process could look like in the future.

I'll finish writing that song some day; maybe this year, maybe next year, but eventually. And I'll always remember how it got to where it was and what lessons can be learned by handing off a creation of your own and letting someone else make it their own.

In this case, it made it better. Collaboration in music is truly a great thing.