Posts and Experiments

This area of my website is intended to act somewhat like a blog. But none of these are really blog posts or articles. They are more like a collection of posts and experiments. Here you will find no seriousness, no professional tone, and no strict rules, just my own personal take on things.

Wordle Solver: Enhanced Strategies

In 2022, I developed a Wordle solver that relied on filtering a dictionary based on green and yellow letter matches. However, my exploration has uncovered additional strategies to elevate your Wordle game.

Sound Frequency Slider

From my earliest memories, music has woven itself into the very fabric of my existence, serving as a constant source of inspiration and solace. It's a realm where I've found both refuge and passion, shaping my identity in profound ways. In tandem with this profound connection to music, I've dedicated more than a decade of my life to the intricate craft of programming. The world of coding, with its infinite possibilities and creative problem-solving, has become my second home.

Canvas Static

I was curious to see what it would look like to have a random number generator render the coordinates of the random numbers, through a canvas to see if there's a pattern in the random numbers

Browser and Device Diagnostics

Detect your device's userAgent, devicePixelRatio, viewport, and breakdown the anatomy of a URL. This page will help you to diagnose the values provided through standard JavaScript APIs about your device and browser.

Last.fm Scrobble History

After comparing my scrobbles, I thought it would be enjoyable to create a simple way to review my top albums and artists of the year. In pursuit of this goal, I developed a custom JSON API to gather the necessary data and used native web components to design the interface.

Wordscapes Solver

Sometimes I play the game Wordscapes on my phone or tablet, and I think to myself that the making a solver would not be that hard. Here's what I've come up with.

Raining Light Effect

Several years ago, I went to a Queens of the Stone Age show. I saw a similar lighting effect done with LEDs hanging from the ceiling, and it has always stuck with me. I wanted to see if I could recreate the effect in a basic web experience.

Sticky Stacky Peeking Navigation Bars

At the time of writing I work at store.google.com. One of our design choices has been for the navigation to scroll with you. As the user scrolls down, one could have the navigation bars stack up. This pattern could fill the screen. Instead, this alternative design only shows the bottom most bar. As the user scrolls up, the navigation bars from above peek out from anywhere on the page.

CSS Only: How Do You Change the Style of the Elements You're NOT Hovering Over?

This one is kind of a finicky CSS trick, but the solution is pretty simple.

Optical Illusion: Circle Waves

I saw this cool optical illusion that I thought would be fun to build. I was curious to see what this illusion would look like when it animated. Check it out.

Polar Clock

Back when I was an intern at Nest, I ran across a Polar Clock that I liked a lot. I even made it my screensaver for a while. I finally decided to recreate it here.

Moiré Patterns: Colors Variation

In a previous post, I created a way to view a black and white moire pattern. This is an extension of that experience, but using red, green, and blue parallel lines.

Moiré Patterns

Somewhat like lenticular distortion, moiré patterns are a simpler version of a visual distortion when fields parallel lines intersect. This is a simple black and white example.

Ant Life Simulator

Ants and anteaters will face off in a competitive arena of life, death, and reproduction. The rules for the simulation are as follows...

Wordle Solver

I have been playing Wordle for a while, just like the rest of the world. But I am continually considering the algorithm for determining possible word choices. Here is my attempt at a solver.

Circle Multiplier

Another experiment born of the mesmerizing circle patterns from years ago. This one divides a circle each time it contacts a wall. But the max is 1024 circles.

Mesmerizing Circle Patterns... But With Squares

This is a mesmerizing canvas experiment. It’s actually something I built a long time ago in school. One of my very first posts on this website in fact. But it’s modified to animate squares this time, instead of circles.

Line Circle Rotator

If you animate a ball moving from one side of a line to another and back again, and delay the animation just the right amount, you'll end up with an interesting effect.

Where Does Green End and Blue Begin?

My wife and I grew up in different parts of the United States, and do not agree on where blue ends and green begins. We are going to explore that.

Vertically Center Align Siblings

Aligning elements vertically within a container in a flexible CSS-only way can often be an annoying challenge. There are a bunch of ways to do it. Here are a few.

Yahtzee

I wanted to see if I could make a Yahtzee game that emulates truly random rolls.

In-view Text Animation

It’s a really popular trend in 2020 web design to have text animate in when the user scrolls to where the texts should be. I have seen this done on various sites in various different ways. I like systems, so here’s a system that I think will deliver the desired results.

The CSS Interview Question That Is Harder Than It Looks

When interviewing candidates over the past 5 years, I created a CSS only interview question that is tricky, and tests for more than just programming competence.

Lissajous Curve

Similar to spirographs, but not to be confused with spirographs, a Lissajous curve is the graph of a system of parametric equations, which describe complex harmonic motion. Here, you can tweak the parameters of the lissajous curve drawing animation.

Git Tip: My Git Configuration (.gitconfig)

These are the things in my .gitconfig that help me the most. From avoiding those annoying pull commits, to key saving aliases.

Git Tip: My Favorite Git Aliases

Git aliases that make my life easier. I don’t like needing to remember long terminal commands.

Code Tip: My Favorite Terminal Aliases

Here are a few aliases that make my life easier. Do you ever forget what the source command is?

Git Tip: How To Git Merge Without Being Prompted For A Commit Message

Do you get annoyed with merging two branches and being asked to add say something special about a simple merge? I do.

Git Tip: How To Get Rid of Untracked Files From Your Local Git

Do you ever have a bunch of files show up in your git diff that don’t belong? Rather than manually deleting each of those files, run this simple command.

Earth Rotating Sprite Animation

I wanted to animate a sprite by targeting a changing data attribute + unique css background-positioning. I win.

All Hex colors

I wanted to create a way to show all of the rgb colors that can be represented by rgb. So, I did. Here’s a rectangle with a slider that shows every color.

Drawing with Microsoft Paint

If you want a place to goof around and draw. Here’s your place.

Canvas: Raining Paint

Another canvas experiment to relax your brain. Balls of color dripping down the canvas and painting the background.

2-Dimensional Cellular Automaton

This is my next step toward building Conway’s The Game of Life. I've moved into the second dimension!

Unique Stars

Have you ever wondered how many stars can be made with a certain number of points? I can answer that here, as well as how you can calculate it.

Elementary Cellular Automaton

If you've ever heard of Conway’s The Game of Life, you may already have an idea of what this is. If not, now worries, it’s not that crazy of a concept.

Last.fm Scrobbles

Music is a major contributor to my life. I am constantly looking for my next favorite album. He’s one of those nuts that listens to the same thing over and over until he’s sick of it. I use Last.fm to keep track of my listening habits. Here are some of the albums that I have been listening to recently.

CSS Trick: How to Match the Height of Sibling Elements

This is a very common CSS problem. How do you get an element to match the height of its sibling element? There is one solution where you use a container element and a repeating background image to create a divider. I have another solution here that is all CSS.

Ten Star Movies

I've been watching movies my whole life. I enjoy them quite a lot. I use IMDb to rate movies, so I use their ten star system. Here is a list of movies that I have rated at ten stars. See my imdb profile for more ratings.

Minesweeper

Minesweeper is a single-player puzzle video game. The objective of the game is to clear a rectangular board containing hidden 'mines' without detonating any of them, with help from clues about the number of neighboring mines in each field. - wikipedia.org

Mesmerizing Circle Patterns

This is a mesmerizing canvas experiment. It's actually something I built a long time ago in school. But I ran across it kind of recently and I decided it would be fun to throw up on the website. So, enjoy it! And don't get hypnotized. Just click anywhere.

Quality Podcasts

Here I've pulled together a short list of my favorite podcasts. If you enjoy learning things, this is the list for you!