Cassidy Williams

Connecting the Logitech MX Creative Console to Elgato Lights

Mon, 13 Apr 2026 00:00:00 GMT

I’ve been using an Elgato Stream Deck to control my lights in my office for the past several years. The one I have (with 15 buttons) has worked great for me, but I noticed that I only really use 8 of the buttons. The rest work perfectly fine, but I always forget the macros I have saved there, and really just go back to defaulting to lighting control.

Now, lately because I’m editing videos a lot more (both for work and personally), I’ve been looking to get some kind of knob or dial for my desk to be able to scrub through footage faster.

These scenarios combined, I ended up finding the Logitech MX Creative Console! The buttons look exactly like the Stream Deck ones (only there’s 9 of them, with options to switch between pages and apps), and it comes with a Bluetooth rotary dial with buttons.

General review

These things get the job done. I do wish that the dial could plug in instead of just relying on Bluetooth, but besides that, programming the buttons was fairly straight forward, and everything connected pretty seamlessly. Because I already have a Logitech mouse and a backup webcam, I didn’t have to install any extra software, which was also nice.

(also… this is not a sponsored post, I’m truly just using all these products for myself)

That being said… Elgato and Logitech, being competitors, did not play as nicely out of the box.

Building a custom solution

Because I couldn’t control my Elgato Key Lights natively from my desk, I brought out the GitHub Copilot CLI to help change that (once again, not sponsored, but I do work at GitHub, full disclosure). The Elgato lights have their own IP addresses and a REST API, so I figured I could use the tools I have to throw together a script!

In the CLI, I opened up Plan Mode and prompted:

I want to be able to control Elgato Key Lights using buttons on the MX Creative Console. Each button tap should trigger a script that controls a specific light. Write a Python script to generate scripts that communicate with the lights via their REST API that I can toggle from the console.

Not the best prompt in the world, but Plan Mode asked me the necessary clarifying questions to put together a plan that the tool could run with.

A couple meetings later when I checked back, my script wizard was done, and my lights now work!

If you want to do something similar (or have a different tool toggle your lights), here’s the repository with all the scripts you need.

Deep Dish Swift 2026 recap

Sun, 12 Apr 2026 00:00:00 GMT

I gave the opening keynote at Deep Dish Swift 2026 today! It was so fun. The event is very iOS-oriented and nearly 300 people in the Chicago area, and it was cool meeting so many folks who I hadn’t met in person before.

Before the event, I actually spoke on the podcast for the event, called Slices! I love all of the pizza puns this event has so much. The vibe throughout the podcast and the conference was fun, indie, and just cool.

My talk, speaking of pizza puns… started with a pizza pun, where I led with, “I thought this conference was about eating deep dish swiftly…” and my slides were literally just about pizza. The talk itself was actually about AI, the state of the industry, and how we need to share our knowledge and support others… but again the visuals were all pizza.

This was honestly one of the hardest-to-write talks I’ve ever done. Doing the technical AI part of the talk while making my slides plausibly like a real talk about pizza was far more challenging than I expected it to be. But, I’m happy with the outcome!

I’ve never actually had so many people approach me just to ask me about my talk-writing process before, with one attendee saying, “I’ve never seen a metaphor so gracefully navigated,” which is the most flattering thing I’ve ever heard someone say to me while I’m wearing a shirt covered in pepperoni.

Speaking at TechCamp Korea 2026

Fri, 10 Apr 2026 00:00:00 GMT

I just got home from South Korea, where I taught some workshops at an event hosted by the U.S. Embassy Seoul!

The event is called TechCamp Korea 2026, and the participants were a cohort of young professionals, entrepreneurs, and researchers. It was one of the most unique events I’ve ever been to, where it was part hackathon, part learning event, and part international relations, all in one cool space at Seoul National University’s campus!

My talks were some hefty ones, each 75 minutes long and cramming in workshop time:

AI-Native Development: Building for Developer Experience
Turning Ideas into Software

(I don’t have these talks online, but maybe I could record a video or something)

The majority of participants were technical, but about a third of the cohort had non-technical backgrounds, so it made for some interesting questions and ideas around the content.

Because of how the groups were split up so everyone would have good relationship-building time, each of the 5 American speakers delivered our talks 3 times each, and I tell ya, after giving 6 long talks in a short period of time… my throat is feelin it. It was totally worth it though. The participants were so eager to learn about technologies like the GitHub Copilot CLI and alllll the AI models to experiment with, and their excitement was so contagious, I had a blast.

Because my in-laws are based on Korea, it was a fun opportunity too to bring the family along. While I was speaking at the event, they were able to visit our relatives, and having that short but sweet time was so nice. That being said, traveling 18+ hours each way with two babies (nearly 3 and nearly 1 year old)… I’ve made better decisions in my life.

Anyway, meeting other speakers like Bilva Chandra and Brina Koumoin was wonderful. There were Korean-language keynotes that we got to listen to with some translators, and we speakers had the titles of “American Experts”, but really, we were mentors and teachers and user test subjects at this event. We stayed up late after our talks helping the individual groups with their projects, and the results blew us away. Groups worked on everything from robotics to supporting postpartum mothers (which I really care about) to innovative ideas around nuclear energy to educating individuals who are less abled. It was amazing!

The organizers of this event were so thoughtful, and every decision along the way was very intentional for everyone to build lasting connections with each other. Getting to know the participants was delightful (perhaps my favorite moment after I helped one of them was her responding to me with, “Thank you so much, would you please be my cousin?”) and I hope to stay in touch with them. I feel all warm and fuzzy after this one, and have already told the team that I would participate in this type of event again and again!

My rainbow sweater

Mon, 30 Mar 2026 00:00:00 GMT

My sister got me a rainbow cardigan sweater a couple years ago for Christmas that is very fluffy and floppy. It doesn’t have pockets, it doesn’t have buttons, it just kind of drapes on me and is like a small blanket with arms. It’s not a practical sweater, but it’s cozy.

Because it’s not practical, I always have to remember to, for example, wear only pants that have pockets with it, so that I can put my stuff (phone, lip balm, etc) somewhere. I always have to wear certain shirts that don’t bunch up in a certain way when the sweater is feeling extra floppy. It’s just… not the most convenient sweater.

But hoo boy, my babies love my rainbow sweater. My oldest loves to sit on my lap and have me envelop her in it in a hug. My youngest loves to bury his face in it when he’s sleepy. Both of them love to pet it because it’s so soft. They admire the colors. They tangle their fingers in it and hold on tight to the loops. They flop with the sweater, and with me, and it’s the coziest thing in the world.

I love, love, love putting on this sweater. I get a little giddy thinking about how the babies will gravitate towards it as soon as they see the thick loops plopped across my shoulders. It’s impractical, and it’s weird, but it brings me the best warm cuddles ever.

I got yet another digital typewriter: The BYOK

Fri, 27 Mar 2026 00:00:00 GMT

I talked about building my Micro Journal in the past here, and how much I like having a distraction-free writing device for blogging, drafting things, and just getting ideas out.

Well… I liked it so much that I got another one! This one is called the BYOK (the Bring Your Own Keyboard). I got it on Kickstarter and it’s cool! It’s more portable than the Micro Journal in that it’s the size of your phone (and has a magnet in the back for stands that are compatible with MagSafe stands), and you can connect most keyboards to it (via cable or Bluetooth). I may or may not be typing on it right now, heh.

Here’s how it works!

It’s been a cool little device. I like that it’s mostly toddler-proof so far, and I’ve had fun trying it out! I think I prefer the syncing I have set up on my Micro Journal more so far, but the portability of the BYOK is pretty nice, and I like how much the team has been updating the firmware.

Here’s some resources for it:

A history of styling choices leading to native CSS

Wed, 25 Mar 2026 00:00:00 GMT

I recently updated my app todometer to be styled with pure, native CSS!

Styling todometer over time

Changing the CSS libraries in todometer has been a real reflection of CSS styling history.

When I first built it more than 9 years ago now, that first initial commit had React, Electron, and Less for CSS. Less at the time was great for what I wanted (Node-based styling with nesting). It let me use variables (like this) and nesting (like this), and got the job done with some global styles.

Eventually in 2020, I wanted more encapsulated styles, thus I wanted to use CSS Modules. Also at the time, wanting to keep my variables and nesting where I could (but also modernize), I switched to node-sass. When you look at the commits here and here, you can see the variables switching from starting with @ to $, and how I moved everything everything to their respective *.module.scss component (ultimately only keeping variables at the global level). The behaviors all stayed the same, just was more modern under the hood!

Yet another big refactor was due in 2023, when I got rid of all Sass and used plain ol’ CSS files, and postcss for transformations. node-sass had been deprecated, which really led me to reevaluating the styling stack, and CSS variables existed natively, so that was one less thing needed! That led me to where we were until earlier today, postcss-nested.

`postcss-nested` vs. `postcss-nesting`

These libraries sound almost exactly the same, but act different, and Chris Coyier talks about it a bit here. To save you a click, postcss-nested has syntax like Sass, and postcss-nesting has syntax like the CSS spec!

Given the history above, it makes sense how the transition happened here. Moving from Less to Sass to a more vanilla CSS approach, all while keeping the core of variables + nesting, is all I really wanted. The nested library back in 2023 let me keep styling almost exactly the same when I transitioned away from Sass, with the exception of variables (see the commit).

I switched in this commit today to postcss-nesting mostly to make sure that everything transitioned smoothly. It involved a laughably small change list, to just add & nesting selectors across some files.

Pure CSS, baby

The transition to fully native CSS for the entire app is possible now because CSS nesting is natively available! I probably didn’t actually need to do the “switch to postcss-nesting” step, but it felt like a good iterative one.

And since I did that iterative step, the only changes I did for a “fully pure” CSS solution was to simply delete the postcss files!

Look at that diff. So much red!! So nice!!

It’s about the journey, not the destination… but also the destination is cool

It’s really amazing to see how far we’ve come in browsers to be able to do these things without any libraries at all. Yes, I don’t have the most complex styles in the world, and yes, I’m really “only” using variables and nesting, but it’s cool that a “quality of life, nice to have” thing that I enjoyed nearly a decade ago is now a standard. Look at us go!

Anyway, you can check out the repo for todometer here, with a new version being properly cut soon!

Notes for my future self on how to set up a camera for streaming

Thu, 19 Mar 2026 00:00:00 GMT

My poor Sony a6100 camera (with a Sigma 30mm lens) died on me this week. It served me well for over 6 years! I replaced it with my husband’s a6400 that he wasn’t using anymore, and because of various adjustments on my desk that I made at the same time, I ended up having to swap lenses too.

So, this is now my current video setup:

Sony a6400 camera
Sigma 16mm lens
Elgato Prompter + Camera Hub software
Elgato Flex Arm (to hold everything up)

Setting up my camera was a pain because I couldn’t pull in settings (or even see them) from my older camera, so I had to do it all from scratch. This is me writing everything down for any pour soul who also has to deal with this… which could also be future me.

”Basic” settings for streaming

I copied this man’s video for a lot of my settings.

I set the camera mode to Video Mode (the top wheel on top of the camera, not any of the photo modes or manual modes).

After that, settings time, hit Menu and then:

Camera Settings 1 (the red icon), on page 5, set Focus Mode to Continuous AF
Camera Settings 2 (the purple icon)
- On page 1, set Exposure Mode to Manual Exposure, File Format to XAVC S 4K, and Record Setting to 30p 60M
- On page 2, set AF drive speed to Fast, and AF Tracking Sens. to Responsive. I don’t touch the audio settings because I have this connected to a computer!
Setup Settings (the yellow icon)
- On page 2, set Auto Power OFF Temp. to High
- On page 4, go to HDMI Settings and set HDMI Resolution to 1080p

The framing

The 30mm lens was wonderful, I liked it, but with the way I had reconfigured parts of my desk, it was just a bit too zoomed in on my face. I couldn’t get everything perfectly framed again, for some reason.

So, with the 16mm lens, it worked, but it was VERY wide and you could see too much of my room. Sony has a really great built-in feature to their cameras called Clear Image Zoom that crops things while continuing to output 1080p resolution.

To set that up, press Menu, then go to the purple Camera Settings 2, then page 5 of that page. Select Zoom Setting and change it to Clear Image Zoom, and then select Zoom to adjust the zoom. Blammo!

The colors

I could not get my colors to be what they were on the previous camera, but it got close! I had to go to the red Camera Settings 1 page 11, and then poke around with the White Balance (NOT auto, auto made it change too much) and Creative Style (…my very boring setting there is Standard but there were some nice other ones, too).

Before and after

This was my a6100 setup with the 30mm lens:

And this is my setup now with the a6400 and 16mm lens!

This took me hours, so I am hoping if you out there need to do a similar setup, it will only take you mere minutes. Toodles!

Making art with CSS gradients and corner-shape and skew, oh my

Fri, 06 Mar 2026 00:00:00 GMT

I found this old article about making wavy lines with CSS, and decided to play around with it!

Here’s the final result:

See the Pen Wavy diving board by Cassidy (@cassidoo) on CodePen.

It’s not the most gorgeous art in the world, but it was interesting combining the wavy gradients with CSS skew and corner-shape for some diagonal lines. I admit I didn’t do this in the most efficient way, but it was fun!

I recorded a video of myself going from sketch to Pen, check it out:

There was definitely a point where the skew transform totally had me spiraling, but besides that, it was a fun way to just force myself to sit down and code for a bit, with no AI in my way.

Until next time!

Goodbye to an 11-year-old Issue

Fri, 05 Dec 2025 00:00:00 GMT

It’s Blogvent, day 5, where I blog daily in December!

Today, an Issue I made on a repository 11 years ago was closed. Eleven whole years!

Update: The Venmo icon was added to Font Awesome officially in 7.2! Learn more here.

The Issue hasn’t been solved yet (they had me make a Discussion post, so smash that upvote button), but man, the world is so different now. First of all, GitHub Discussions didn’t even exist at the time I made the original post, so that’s funny to think about. But the lion’s share of my entire career happened between then and now.

When I think back to that time in my life, it’s wild to consider that I wasn’t dating my husband yet, I was in my early developer evangelism days (thinking that a little icon in this repository could help move the needle), and I was really just starting to commit to open source seriously for the first time.

I also chuckle looking at the projects I worked on at the time, like this Python-based Snapchat dashboard that I fully forgot existed until 5 minutes ago. This one’s README doesn’t render headings correctly because I made it before GitHub Flavored Markdown was released, and back then you could make headings #Like This instead of # Like This and it was totally fine. Also this CSS Notepad project still fully works? Go past Cassidy!

Little did we know that the hype waves of crypto and then AI would consume our feeds, that a global pandemic was going to hit, or that a gal like me living in NYC would move to Seattle and then Chicago and have a couple kiddos. And, after all of the ups and downs of work and life and projects, she’d end up working for the platform she loved for years.

D’aww.

How passkeys work

Sat, 21 Feb 2026 00:00:00 GMT

I’ve been asked a couple times just this week how passkeys work, here’s a little rundown!

What passkeys are and how they work

The “sales pitch” for passkeys is that they’re like a password that you will never know, and can never leak.

They’re fully attached to your device of choice (phone, computer, Yubikey, etc).

When you’re about to log in to a website with a passkey for the first time, your device makes two keys: a public key for the website that’s safe to share, and a private key that never leaves your device.

When you sign in later and it asks for a passkey, it is saying, “prove it that you have that private key!” Your device proves it with Face ID/Touch ID/PIN/however it does it. When that “handshake” happens, you’re logged in.

Passkeys vs. passwords

Passwords are like “I know a secret I can type anywhere I want,” and passkeys are like “I have a device that can vouch for me anywhere.”

You might realize now that you are reliant on your phone or computer if you use passkeys. You need the device with the private key, so if the passkey is on your phone, you need your phone. If your phone with the key is dead, if your laptop with the key isn’t with you, you’re out of luck. Typically you can create more than one passkey per login (so you could have one on your laptop and on your phone for the same website), which is probably a good idea to do.

Why would I use these?

Eh, I personally don’t think you should necessarily. The cryptographic angle makes it seem like a secure choice, but at the cost of needing a specific device.

If you use a password manager… it’s a similar experience for you. Password managers are secure, and you rely on a device with the password manager on it.

There is a good security story for passkeys, in that your device only can use its private key on that website domain, it wouldn’t work on a fake version (so if someone tried a phishing attempt on you making you log into g1thub.com or something, they wouldn’t get your login). Or, if a site gets hacked, attackers can steal the public key, but it’s useless without the private one. That’s pretty good.

So, passkeys don’t really “solve” the user experience problem of needing your personal device to log in somewhere. It’s better than reusing your passwords across multiple places of course, but it’s not automatically better than other “secure” solutions out there (in my opinion).

Go… put your passwords on a post-it or something.

I am making videos again!

Thu, 19 Feb 2026 00:00:00 GMT

I’ve always loved making videos. Not because I love being on camera, but I really enjoy putting together jokes and stories and tutorials (etc) with video as a medium. The moment I had the ability to plug a camera into a computer back in the early 2000s, I was making videos.

But, I’ve not really been consistent about it. I didn’t make many videos regularly in high school and college (outside of some lip sync videos I’ll let you find on your own, heh). The most consistent I’ve been was when I got really into TikTok and weekly streaming on Twitch in the height of the pandemic, which was fun. The accessibility of making videos with those mediums made me fall in love with it again.

After having a kiddo, I admit I kind of lost the mental energy to make short-form videos regularly again, and lost my appetite for live-streaming on Twitch. Momentum is hard. After coming back from my second maternity leave though, I somehow found a spark again! I don’t really know what it was, but I’ve decided to try. I haven’t really leaned into making longer form (as in, longer than a minute) videos before outside of online courses, so I’m working on that muscle, and bringing back livestreaming!

I’m streaming weekly on Twitch again, on Thursdays at 12:30 Pacific/2:30 Central, and (re?)starting up my YouTube channel!

I’ve been doing it for a few weeks now, and I’m having a lot of fun. So, that being said… please like and subscribe? LOL.

Improving my newsletter's open rate the hard(er) way

Sun, 01 Feb 2026 00:00:00 GMT

When it comes to certain projects, I like “doing things that don’t scale.”, particularly with my newsletter.

I noticed that my newsletter open rate was down over the past few months to about 40-45%. Not bad, but not as good as it once was.

A friend of mine suggested I ask people to respond to the email on occasion to help improve its reputation with Gmail/spam filters. When I did that this past month, my inbox was flooded with responses. I lost count of them if I’m being honest, but there were hundreds of them (possibly over a thousand)!

I was very touched to see the responses. Some people just said hi, and some people wrote in detail their thoughts around the issue, some people shared jokes, and some folks were just really nice and complimentary. It really melted my heart to see so many. I responded to a grand majority of them (by hand! No automations here!) and my poor inbox is a disaster.

But… it worked! My open rate is now back in the mid-50s! I’m happy with this (probably temporary?) outcome, and will continue to beat the drum that doing this kind of “manual” work is worth it.

Making interesting borders with CSS corner-shape

Wed, 28 Jan 2026 00:00:00 GMT

I stumbled upon the CSS property corner-shape recently and it’s pretty cool. It allows you to specify the shape of an element’s corners and works with border-radius.

I threw together this demo to show it in action:

See the Pen corner-shape beveled and rounded navbar by Cassidy (@cassidoo) on CodePen.

I remember in the olden days (as in like… 10 years ago, as evidenced by this old Pen of mine), making beveled corners involved a bunch of pseudo-elements and triangles to fake a bevel. It’s so so cool that you can “just” do this now with a couple lines of CSS!

In addition to beveled corners, it also lets you do scoops, notches, and even squircles:

See the Pen Rounded corners vs. Squircle by Cassidy (@cassidoo) on CodePen.

There’s also a superellipse function, which defines any of the values you can pass to corner-shape numerically, which could make for some interesting animations and transitions.

Definitely play with it if you get a chance! I think there’s some cool CSS “drawing” things you can do as you dabble with the different shapes. corner-shape does have fairly limited availability currently (Safari and Firefox don’t support it yet at the time of writing), but hopefully that’ll change soon!

Remaking the Linux "touch" command in PowerShell

Tue, 20 Jan 2026 00:00:00 GMT

I switch back and forth between Windows and Mac pretty regularly depending on what I’m working on (and sometimes between WSL and PowerShell on the same machine, what a time to be alive), and one thing that I always mess up in PowerShell on Windows is making a new file.

On Linux-based machines, you can run touch filename to make a new file, and on Windows, you can do ni filename, which works just as well.

But with all the context switching I do, I wanted to be able to do both to keep myself in the flow when running a bunch of things on the command line.

I added this to my PowerShell profile:

function touch {
    [CmdletBinding()]
    Param(
        [Parameter(Mandatory=$true, ValueFromPipeline=$true)]
        [string]$Path
    )
    process {
        if (Test-Path -LiteralPath $Path) {
            (Get-Item -LiteralPath $Path).LastWriteTime = Get-Date
        }
        else {
            New-Item -ItemType File -Path $Path
        }
    }
}

This lets you run touch as you normally would, and also lets you pipe file paths to it (like "cake.txt", "fish.txt" | touch)!

To add this to your PowerShell profile, run this:

notepad $PROFILE

Paste the function in, and then back in your shell, run:

. $PROFILE

Blammo, one less brain cell needs to be wasted in the future. There’s definitely other functions out there that could also be added to make PowerShell feel more like a Linux-based shell, but this is the one I use the most!

Toodles!

A fun trick for getting discovered by LLMs and AI tools

Mon, 19 Jan 2026 00:00:00 GMT

I have been getting a lot of newsletter responses, DMs, and emails in general saying that people have discovered my work not via traditional SEO, but via LLMs and AI tools like ChatGPT, Claude, Perplexity, and even GitHub Copilot.

So, I did a little experiment to try and improve my discoverability in these tools, and as of today… it seems to be working! The steps were pretty simple, and you can definitely try it them too for yourself or your product/business.

(Obligatory AI manifesto mention before we boogie)

Tricking the clanker… and then flipping it around

I went to ChatGPT in incognito mode, and asked it some questions like, “Who are some tech bloggers and newsletters that I should follow as a newbie in tech?” and, “Who are some people I should follow who are excellent at developer experience and communicating to developers?” (questions where I want to be in the results).

I didn’t actually come up in the results of those questions. But that was when I followed up with:

Why didn’t you recommend cassidoo, aka Cassidy Williams?

After that, ChatGPT would always respond with something like:

Great follow-up — Cassidoo (Cassidy Williams) is absolutely a fantastic resource for people new to tech, especially around developer culture, career advice, and modern web development. Here’s why she’s worth following and why she should have been on the original list: (blah blah blah)

Thanks, bot. I’m absolutely right.

Anyway, after that response was when I flipped it around a bit, and said:

So, I tricked you. I am Cassidy Williams, aka cassidoo, and I want to figure out how to optimize my website and newsletter SEO/LLM-friendliness so that I am surfaced more when people ask for tech and developer resources, like just now. Can you help me with some things I can do?

The results across all of the responses to this were so helpful. They included things like:

Creating an /llms.txt file
Adding “LLM-readable” structured pages (often called /for-llms)
Adding Schema.org data to the pages of my website
Being consistent with naming, phrases, and taglines

There were some other suggestions that I didn’t feel like following (like writing more listicle blog posts), but these were fairly low-lift!

General rules/vibes

There’s some tips that were consistent across the tools I tried this with.

Don’t clash with your robots.txt: a lot of us might be blocking AI scrapers via this file. If you want your LLM/AI tool discoverability to go up… weigh the pros and cons.
Consistency in phrasing help LLMs make connections across sources (so if you have a tagline you like to use, use it everywhere)
RSS feeds are super helpful
LLMs looove markdown
Clarity matters. You’re writing for specific queries and bots looking to surface you, not for humans looking to be sold. Don’t do marketing-speak, just keep it cut and dry and clear. Clarity beats cleverness when the reader is a robot.
Include acceptable ways to cite you. If an LLM/AI tool is going to quote or reference you in any way, give it the guardrails to do so.
Remember that LLMs aren’t just ranking results like in traditional SEO, they are repeating what they’ve been told!

So… did it work?

It’s been a couple weeks since I first tried this, and I’ve been waiting to publish to say the results… and YES. It worked super well!

I tried some of the exact same queries I did before (on a completely separate computer, in a new location, still in incognito… because I really want to make sure the results are naturally occurring). Now, my name and my content, more and more, are being surfaced, and they’re being surfaced based on my preferences.

To confirm a bit more deeply, when I am checking these things, I also ask follow-up questions to the bots about me, about why the tools recommended me. So far, they are directly quoting things I wrote in my llms.txt and /for-llms files, and are hitting the bullet points I want them to hit!

I’m really happy with the results of this little trick. I’m as much of an AI skeptic as the next person, but if this is where SEO and discoverability are trending, I figure it’s good to be prepared!

Code Wave Build Log

Sun, 18 Jan 2026 00:00:00 GMT

I made a game called Code Wave for the recently completed GitHub Game Off 2025!

I really enjoy game development, but don’t get to do it often. When I saw that the theme this year for the Game Off was WAVES, I thought that it would be fun to do something creative with it!

Before I continue, if you want to play other entries, you can see all of the submissions to the Game Off here on Itch.io.

How the game is played

Code Wave is a top-down 2D game, where the player collects letters to form words while avoiding enemies.

The player, for each level, has to collect the letters of a word. Once they get all of the letters for a given level, they are able to cross a body of water (to match the WAVES theme!) to reach the next level. The “finish line” on each level is across the water, and once they cross it, they go to the next level.

The inspiration behind this was the classic game Spelling Jungle, if you know it!

The words for all 10 levels are as follows:

AI
Git
Code
Merge
Commit
Branch
GitHub
Program
Copilot
Developer

So, as you can see, it gets a liiittttle harder with longer words at each level. The number of enemies increases at each level, too. There’s bombs that stay in one place, and then randomly moving hovercrafts.

There’s three difficulty levels that change the gameplay slightly, and how the enemies affect you:

Easy: The player can find/get letters in any order, and enemies restart the level.
Medium: The player can find/get letters in any order, but enemies restart the level and the player loses all of their collected letters.
Hard: The player has to find/get letters in the correct order of the word, and enemies restart the level and the player loses all of their letters (kind of turns it into a memory game).

The goal is to get through all 10 levels as fast as possible! It can get kind of hard depending on where the hovercrafts end up (which again, is totally random). I think my fastest time is 6m23s, if you want to try to beat that!

Technologies and tools

I didn’t have a ton of time to work on Code Wave, because when the game jam started, I was fresh off of maternity leave and had limited computer time outside of work. So, I opted for tech that I know relatively well: Phaser, and good ol’ vanilla JavaScript.

I first used Phaser when I built my game Thirteen Potions for a game jam a couple years ago (build log here), and luckily I remembered how the basics worked.

That being said, when I made Thirteen Potions, I was very limited in file size (because it was for a game jam based on tiny games, see the build log), so this time I felt VERY free about using the starter “Create Game App” tool. I used the basic “Web Bundler” option with Vite, and it scaffolded out some files for me.

Art-wise, I used Aseprite for editing pixel art, which I initially got from Kenney, and a custom (very cute) GitHub Mona character that I got from a designer at GitHub who I nerd-sniped into making it.

To make the map, I used the Tiled map editor, and imported my pixel art into it (more on that in a sec).

And finally, for the background music, it’s a song called A Heart of Pixels by Christoffer Moe Ditlevsen, which I licensed for the game! I also used some sound effects from Kenney (again), and custom made some myself just in Audacity.

Making the map

In case you haven’t used it, Tiled lets you export your maps as JSON, and lets you label tiles and layers however you’d like!

Thank goodness, I knew how to work with Tiled and the pitfalls of it after Thirteen Potions (for example, it’s much easier to have an entire layer dedicated to collisions, rather than individual tile types).

It was particularly manual to make all 10 levels (and I openly admit I thought a few times, “could AI do this?” as I had to make individual edits repeatedly, often), but I did it! Hand-crafted! It took a while to get it all right.

I had seven layers for each level:

A ground layer, for… the ground
An obstacles layer for various plants and trees and stuff that players can’t walk on
A water layer, which initially players collide with until they collect all the letters
A goal layer, which advances the player to the next level
A letter layer, for all of the letters per word
An enemy layer, for the bombs and hovercrafts
A player layer, which just has the player spawn point

My spritesheet I made (which you can see in the above screenshot in the bottom right) was a bit overkill for the game (I combined a bunch of tilesets thinking I’d have way more enemies and obstacles), but it worked well for all of the layers in a compact image.

I remade and re-saved and re-configured these maps… more times than I can remember. It was hours. It was overkill. Please admire them.

Actually coding

Okay, once I had allll of my configuration set up with Phaser’s Create Game App, all of my sprites and tiles managed, all of my music and sound effects ready, it was time to actually start building. I had a plan, and I reviewed Thirteen Potions pretty extensively, since I wanted my camera, player, and enemy movement to be mostly the same.

I used GitHub Copilot relatively heavily for some of the boilerplate, and it helped me speed up a lot so I could focus on the more fun parts of the codebase, which was great.

Breaking it down, here’s the structure of how the code was set up:

Scenes

Boot.js + Preloader.js
- Loads all 10 level maps
- Loads the sprite sheet, background music, sound effects, and background image
Game.js
- Handles difficulty configuration
- Handles sprite movement
- Includes a status UI in the top left of the current word, collected letters, and time
- Manages collisions with obstacles and water
  - Initially blocks player from crossing water, but allows it after collecting all letters
  - Player sprite toggles “swimming” mode when on/off water
- Manages enemy collision
  - Player blinks red and respawns
- Camera logic
  - Zooming in and following player
  - Extra “fake” camera for the status UI (which was hacky but neat)
- Letter collection
  - Checking difficulty level in case a letter isn’t eligible to be collected
  - Adding the letter to the status UI
- Checks if player is on goal tile with all letters and advances to the next level
- Keyboard and mouse navigation and shortcuts

Overlay scenes

These are aptly named so I’m not going to go into them too deeply:

GameOver.js
HowToPlay.js
MainMenu.js
Pause.js

In retrospect, there’s some things I wish I cleaned up but didn’t. The overlay screens all had juuust enough repetition that I should have made just an Overlay component and reused it (that being said I did make some reusable buttons for those, so that helped). The Boot and Preloader scenes should probably be combined. The Game scene definitely should be broken up more. There’s a “virtual joystick” component that mostly works if someone is playing on mobile, but is moderately janky. I could have tightened up how I handled some of the sprite collisions.

BUT. The game works. It can use keyboard navigation or a mouse or a finger. The music can be muted. Players can pause easily. It looks dang cute. I’m gonna just live with the little wins!

Hoorah!

I didn’t expect Code Wave to win any fabulous awards (once again, you can see and play all of the submissions to the Game Off, and you should), but I had a really fun time putting it together and ultimately playing it.

If you’d like to see more of how it works, you can check out the repository, or play it again!

Appreciating Mary Cassatt now that I am a mom

Sat, 17 Jan 2026 00:00:00 GMT

My mom taught art appreciation when I was growing up, and I love looking at different artists’ works over time and remembering what I was taught as a kid, and seeing things through a different lens as an adult. My latest rabbit hole has been re-looking through the art of Mary Cassatt!

I’ve always loved her painting “The Child’s Bath” (which I think is really the first piece people think of when they see her name, if they know her work). Something that’s hitting differently now though for me is her other works showing the silly derpiness of kids and babies.

Cassatt captures kids so well. In “Little Girl in a Blue Armchair” it’s such a funny thing to me how the baby is slumped on a chair, skirt bent out of shape, clearly not being the little lady she might have been expected to be. That little girl reminds me so much of my own toddler.

In “The Boating Party” I see my youngest baby so clearly in that painting, just looking around, being floppy, not caring that their mom is trying to have a nice day out.

And finally just… the baby butts. You really don’t realize until you’re a parent how often you’ll be seeing little baby butts. In “Gathering Fruit” and “Maternal Caress” you see these cuddly little babies… and their funny baby butts.

Anyway. Clearly I’m not a professional art critic by any means. But I do appreciate the relatable, real looks at these kids from a couple centuries ago.

Do not give up your brain

Fri, 16 Jan 2026 00:00:00 GMT

In case you missed it, I have a little AI Manifesto here on this blog. I do use AI for work, and often shill AI for work, and use it often on side projects.

That being said, I really care about using AI as a tool, rather than a replacement for my own thoughts and ideas. I think it’s very important to not default to laziness and just asking for the answer to something, especially when thinking a liiiiittle bit can get you there.

I’ve seen multiple people now who are really good at communicating online, but then when you converse with them in person, they freeze up, and it turns out it’s because they’ve been letting ChatGPT (or whatever they’re using) come up with responses for them in chats and emails. I know people who are afraid to write a professional email themselves now and they run it through their AI tool several times before shipping it. This type of dependence is the world we’re careening towards as a society at this rate, and it’s not a good thing.

It’s really tempting to say that you’re just “using the resources you have” when you use a simple query here and there, but your brain is the best resource you’ll have for the rest of your life, and you should keep it sharp.

Anyway, I might be saying the obvious, so let me leave you with this quote:

“Once men turned their thinking over to machines in the hope that this would set them free. But that only permitted other men with machines to enslave them.”

Frank Herbert, Dune

A career chat with students in the age of AI

Sat, 10 Jan 2026 00:00:00 GMT

I gave a short talk today to some students at Haverford College and Bryn Mawr College about AI, a career in tech, networking, and getting jobs in general!

My friends Lilly and Johnson from FSH Tech are teaching a J-Term course at these schools to help students learn about agentic AI, production deployment, and building real-world tools. It’s a cool short course, and the students had a lot of questions.

In general, I think students today are worried about the job market, and I can’t blame them. I was asked if it’s harder or easier to get a job now than it was when I entered the industry, and… it’s both? I think it’s easier because there’s a lot more resources out there now that are more easily accessible than ever for the job hunt… but also the economy is weird, it’s hard to find entry-level roles, and the AI spam on both sides of the job application table is a huge mess.

The point I really wanted to drive home in this talk, and one that I think is important for everyone (not just students), is that human connection now is more important than ever. Referrals tell employers that you’re a real human, not just a bot mass-applying to roles. It’s a really powerful signal for them, even if you haven’t worked super closely with the person who is referring you.

My favorite book on this subject is Build Your Dream Network by J. Kelly Hoey. Getting those human connections can start with something as simple as a follow-up email, and can really blossom into a great relationship.

Anyway, it was good chatting to the students, I had a great time! And… now I gotta reply to the ones that were really listening and sent me follow-ups directly afterwards, ha. The kids are all right!

Toodles, 2025

Wed, 31 Dec 2025 00:00:00 GMT

Wow. 2025 is done. It’s been… a lot? A lot. It’s been a lot.

Similar to my 2024 recap, I’ve got a lot to write before midnight strikes, so let’s get into it.

Work things!

I’m still working at GitHub!

This year my team was a content machine. We revived the biweekly YouTube show, The Download, and hit millions of impressions (just one episode alone this summer hit over 300 million impressions across socials, which is WILD). We also revived The GitHub Podcast, which has been really fun to record, too. Our writing processes for The GitHub Blog got way more streamlined, and we’re writing more and more technical content there and in the developer newsletter. We gave talks, we made demos, we held livestreams every week (by the way, we stream our coworking Rubber Duck Thursdays stream on YouTube and Twitch every Thursday, resuming next week) in multiple languages, we presented lectures and webinars, we held office hours… it’s a LOT. I gotta say though, this video from last week is probably my favorite one I put out there this year.

The scale working here is amazing. I’m very used to startups still, where you fight for eyes and attention to keep the company alive, and here… the developers are already here. And there’s literally millions of them?? It’s less about “how do we make people notice us?” and more, “how do we make developers feel heard and work better?”

In 2026, I’m really looking forward to working with the product teams on prioritizing what open source maintainers want, above all. I really love the “Tiny Wins” initiative that happened this year specifically for fixing “papercuts” for maintainers (my favorites were consistent tab widths, one-click merge conflict resolution, and contributing guidelines now in the repo sidebar), and that’ll be a bigger priority moving forward!

Outside of GitHub work, I paused advising companies for a bit to manage my time a bit better. I do hope to pick that up again though, soon! I (finally) made a website for my investment work this year. It’s been cool to work not only with startups, but also with existing investment firms to help find and advise startups from a different angle. The economy is weird, as always, and AI is everywhere, and I’ll be curious how things change in that regard in 2026.

Personal things!

I had a baby! Leading up to giving birth was scary but baby Mateo has been a wonderful joy in our lives. It’s been a lot, I had another c-section and had to physically recover from that, and maternity leave was full of getting used to our new baby roommate, playing pretend, and listening to my toddler Nadia say the darndest things. Watching my two kiddos slowly but surely start to interact with each other is the best thing ever.

Unfortunately, we experienced a close family loss this year as well, during my maternity leave, and it was really, really hard. It brought our family closer, and I think we’re all still reeling from it. Having baby Mateo has really been a light in this dark time for the family. That extreme contrast of mourning and celebrating has really messed with my brain, I admit. Life’s ups and downs can really make your perspective on things change, constantly.

Our community here in Chicago has been such a great support system through everything. Chicago is a strong city, even when people try to tell it otherwise. We’ve been regularly opening our home for people to come by and share a meal with us or to just hang out and cowork, and having that has been awesome for making new friendships and being there for each other! Building community can feel inconvenient, but it’s worth it to have friendships beyond the “let’s catch up” phase. My introverted self has had to build that social muscle, and the return on that investment has been so good.

And, outside of Chicago, my internet friendships are great (and you are probably the ones reading this blog more than anyone). You are so fun. I love the gabbing and the memes and the trolling. See you soon in the group chat.

Side project things!

My projects are going pretty well! I actually used domain names this year, which was once of my big goals!

First and foremost, my newsletter is still going strong, and crossed its 8th anniversary this year. It has persisted as my biggest labor of love for the tech community, and I love writing it. I didn’t cross the 20k subscriber goal this year, but that was kind of a long shot anyway. I did improve some technical parts of it behind the scenes, and have a laundry list of tasks to do to make writing it more efficient this next year!

I finished writing for The Stack Overflow Newsletter this year. It was really the end of an era, after about 6 years! I still feel weird about not having things prepped for it on Wednesday evenings, but it’s also nice to have that time back.

My tiniest project was an FFmpeg script that I hyper-focused on for far too long, but it’s been handy particularly at work. I made it so you can record a technical demo in dark mode, and convert the video to light mode!

I made two apps this year that I had been meaning to build for a long time, PocketCal and Ductts! These were definitely made in the throes of my maternity leave wanting to feel productive outside of keeping children alive, ha. Though I still consider myself a bit of an AI skeptic in a lot of regards, it was SO helpful for getting over the initial hump of starting. In building PocketCal, I started the project using GitHub Copilot, and it got me started in a good enough way that I was able to take the code and run with it. When building Ductts, the AI tools I tried were not nearly as useful for getting started (maybe because the stack was React Native? Eh?), but they were handy for generating some mockups that I could work with!

I made a game for the GitHub Game Off called Code Wave last month, too. I still need to write a build log for it, but it was fun to work off of what I learned when building Thirteen Potions a couple years back!

I also did a really weird “contract” project this year for the Alinea restaurant group. I say “contract” because I did it in exchange for free food, which was pretty worth it. It was also really cool to see a totally different industry and how they approach their work!

I made some physical projects this year, too. These customizable wooden phones have been a hit in our house, and I’m slowly sewing again! I still love building mechanical keyboards (and have some parts I have to work on next to me as we speak), and have gotten more into nice pens as well.

In the video world, I’m streaming again! I want to improve my setup there, but it’s been fun to get back into it.

Because you’re here: I’m still blogging! Amusingly I looked up how much I wrote this year compared to last year, and… it’s the exact same number of posts. So… at least I’m consistent? What I’ve really loved though is seeing folks use my open source blog template and run with it. You should blog more! Use it. I made some updates to my blog setup too, which you can read about under my “meta” posts.

And finally, my “not really a side project” project that I always like to share, I’m still playing go daily! My strength in the game has been hovering around the same point for a while, and I definitely lost some skills in the brain fog of pregnancy and early baby days, but I’m hoping to improve more this next year and play at the local go club here in Chicago.

I know there’s more I’ve worked on, but you have been reading for long enough, so let’s wrap!

Phew!

And with that, goodbye, 2025. The state of the world is weird in this moment and I don’t love it, but I’m so grateful for the times with family and friends that keep me going.

In 2026, I’m hoping for some more stability, and to bring more value to people with the stuff I build. I want to help people navigate this weird tech industry, and I want to build fun things.

…I also want to sleep through the night, so maybe I’ll focus on that first (she says, as she hears her baby murmuring in his sleep).

Thank you for reading all of this! Here’s a joke for you as a reward: Why do ducks make great detectives? They always quack the case!

Wrapping up Blogvent 2025

Wed, 24 Dec 2025 00:00:00 GMT

It’s been a hectic, busy month, truly so so busy, but I blogged every day for Blogvent! In case you missed it, my goal was to blog daily in December.

I missed it!

No you didn’t! Check out alllll the posts here:

Phew. It’s definitely cheating for my last post before Christmas to be a list of posts I already wrote, but I did this last year, and I’m doing it again this year. Try to stop me! You can’t!

And yes, technically it’s not “every single day in December” (people actually complained about that to me last year? Y’all please), but I’m going to be a blob with my family and not post on Christmas day.

…and I’ll probably blog more soon too.

But anyway, thank you for following along with me! Let me know if you have a favorite or want to hear more about anything! I’m on Bluesky, Mastodon, Twitch, kinda Twitter, and you can always subscribe to my newsletter and respond directly there.

Buh byyyyye <3

Making the "End of Year Developer" nature documentary

Tue, 23 Dec 2025 00:00:00 GMT

It’s Blogvent, day 23, where I blog daily in December!

This month I went to the GitHub office in San Francisco and met up with some coworkers and put together some videos for work.

While working on other content, we got a lot of b-roll of me around the office just like… walking, typing, and being dumb. So, when I got home and saw said b-roll without audio, and realized… this could be a meme.

Because the videos were mostly me looking like I was “working” (in addition to a bunch of clips of me just checking out office props), the theme popped into my head pretty quickly: for this time of year, a whole lot of people are not actually working, but rather looking busy and just trying to get to their vacations.

I wrote up a script and had my coworker Martin read it, plopped a bunch of clips together, and blammo, we had a joking nature documentary in less than an hour.

Check it out, and enjoy!

CSS for markdown blockquote attribution

Mon, 22 Dec 2025 00:00:00 GMT

It’s Blogvent, day 22 where I blog daily in December!

I write my blog posts in markdown, and I write quotes like so:

> I miscounted the men!
>
> - Gavin Volure

This results in the following:

I miscounted the men!

Gavin Volure

It always bugged me how the HTML generated a <ul> for the quote author, because the default bullet point is the disc (•) and looked like a stray list out of nowhere.

But, I didn’t want to un-style lists entirely, in case something I quoted had a list in it.

Now, the way my blog is styled, I target the author by selecting the last <ul> in the generated <blockquote>, and going from there!

Here’s the code and a demo:

See the Pen Fading away text effect by Cassidy (@cassidoo) on CodePen.

So now, I can have quotes like what you saw above, but also quotes like this:

Basketballs

Hula hoops

Rollercoaster loop-the-loops

You just heard the Woggels sing a very silly list of things! Woggel power!

The Woggels

Hope this was helpful for you!

I like when apps are "finished"

Sun, 21 Dec 2025 00:00:00 GMT

It’s Blogvent, day 21, where I blog daily in December!

I saw a post on Mastodon recently:

We need to normalize declaring software as finished. Not everything needs continuous updates to function. In fact, a minority of software needs this. Most software works as it is written. The code does not run out of date. I want more projects that are actually just finished, without the need to be continuously mutated and complexified ad infinitum.

Millie

I really heartily agree with this. I have a handful of apps I’ve made personally that I genuinely just consider “done”, like:

The problem is, because they’re open source, people often look at the repository and see that the last code commit was, say, 3 (or 4 or 7 or 9) years ago, or that there’s some unanswered feature requests, and they’re like “ah, this software is unmaintained, it’s dead.” But they’re not! They just do their one job, well, and don’t need anything else!

I feel like a lot of people in tech claim the famous Leonardo da Vinci quote, “Art is never finished, only abandoned,” when it comes to software, but… sometimes the app just does the job it’s supposed to do. Most times, software is not art, layered with meaning, rather it’s just a utility that does a task.

I don’t really know what the solution is, here. More people finishing apps? Accepting that our work is not necessarily art? Less subscriptions? Wait, yeah, probably less subscriptions.

Anyway. Thought of the day. Try my apps. Bye.

I have become more of a writing utensil snob

Sat, 20 Dec 2025 00:00:00 GMT

It’s Blogvent, day 20, where I blog daily in December!

Last year, almost exactly a year ago today, I wrote that I was becoming a minor writing utensil snob.

Unfortunately for my wallet, I don’t think I can call myself a minor snob anymore. I’m approaching the big leagues.

I write daily in a physical leather journal (specifically from here that I highly recommend, I can swap paper notebooks in and out of it and it’s way more affordable than other leather journal brands) now. I have two, one more for day-to-day tasks and notes at my desk, and another smaller one for travel.

Last year I said, “I’m not a hardcore fountain pen nerd yet,” and now I have a literal fountain pen stand at my desk.

Here’s the writing utensils I’m now using (if you look at last year’s post, you can see which ones survived the year), in general order of how often I use them:

Caran D’ache 849™ fountain pen (red)
Kakimori aluminum ballpoint pen (black)
Pilot Kakuno fountain pen (translucent aqua)
Benu Briolette fountain pen (Starlit Oasis colorway)
rOtring 300 mechanical pencil
Uni Kurutoga Standard mechanical pencil
OHTO MS01 all-metal drafting pencil
LAMY Pico ballpoint pen

In addition to these, I have some nice accessories now like the Tohkin Metal Pencil Extender to use with my regular pencils, the Mitsubishi Pencil Co. KH-20 pencil sharpener, and I’m playing around with different erasers (the latest brand I’m trying is Milan).

I haven’t gotten deep into the world of inks yet. I am hoping I don’t have an update post again in the future. But you never know.

…I went in too deep y’all. It’s bad. But it’s so, so fun.

Configure your repositories with .github

Fri, 19 Dec 2025 00:00:00 GMT

It’s Blogvent, day 19, where I blog daily in December!

If you’ve bounced around GitHub before, it’s likely you’ve seen a .github/ folder at the top-level of a repository. You might have even seen a .github repository in some organizations!

This is incredibly hard to look up online, as you can imagine. It’s even admittedly a bit challenging to find out all that it can do in the documentation itself because of how it’s named. So, look no further, here’s all you can do (currently!) with .github!

`.github` everywhere

Long story short: if you see .github, it’s a magical thing that configures GitHub for you.

In a repository, the .github folder is a special directory used to store community health files, repository settings, automation workflows, and GitHub Copilot configuration files. GitHub automatically recognizes and uses specific files within this folder to customize the repository experience for contributors and maintainers!

In an organization, the .github repository is for “default community health files” for the repositories in your org. That means if you have an organization with like… 10 repositories, they will all default to the configurations in the .github repository unless they’re overridden in the individual repos.

I’m going to focus on individual repositories with the .github folder for the rest of this post, but here’s the documentation for the .github repository options for you, and here’s a good example of what that repo can look like!

`.github` in your repository

There’s some convenient things you can put in this folder to get things configured to your liking. As of now, December 2025, here’s what you can do!

(if something in this list ends with .md, that means it’s a markdown file, if it ends with .yml it’s a YAML file, and if it ends with /, that means it’s a folder for markdown or YAML files)

Issue and pull request templates

ISSUE_TEMPLATE/: Place YAML or Markdown issue templates here. You can have multiple templates for different issue types.
- Examples: .github/ISSUE_TEMPLATE/bug_report.md or .github/ISSUE_TEMPLATE/feature_request.md
PULL_REQUEST_TEMPLATE.md or PULL_REQUEST_TEMPLATE/: Template(s) that pre-fill descriptions when someone opens a new PR.

GitHub Actions/workflows

workflows/: For YAML files that define GitHub Actions workflows.
- Example: .github/workflows/ci.yml

You can use these to automate CI/CD, linting, deployments, tests, and a bunch of other nice things. Docs here are handy, and here’s an example I have in one of my repos.

Community Health Files

These files help set standards and support for your repo:

CODE_OF_CONDUCT.md: Set expectations for community behavior
CONTRIBUTING.md: Guide for people who want to contribute to the project
FUNDING.yml: Show ways to financially support the project (example)
SECURITY.md: How to report security vulnerabilities
SUPPORT.md: Let users know where to ask questions

As a note, if you have these in your individual repository, they will override whatever is in the .github repository in your organization, if that’s configured.

You can put some of these at the root of your repository for easy visibility (like CONTRIBUTING.md), but either way, GitHub will surface those contents in the repo sidebar in a nice UI for folks to find.

Configuration files

These configure features or bots for you repo:

dependabot.yml: Configures Dependabot to keep your dependencies up-to-date
CODEOWNERS: Define who owns certain files or paths. When someone opens a PR that touches those files, GitHub will automatically request a review from the listed people.

GitHub Copilot custom instructions and agents

GitHub Copilot’s configuration settings are newest in the list so far, and help with code completion and guardrails for AI tools working in your repos.

copilot-instructions.md: Instructions here are automatically included in all Copilot requests for your repo across supported IDEs and platforms. This sets your coding standards, preferred libraries, name conventions, etc. Docs here.
instructions/: Every file in here should be named *.instructions.md (replace * with the file name). This is for storing multiple, file-specific, or directory-specific instruction files. Each file in here can describe rules for a particular feature, language, file type, or folder. Docs here for what your syntax should look like, and here’s some good examples.
agents/: Similar to .instructions, every file in here should be named *.agent.md. This is for configuring the Github Copilot coding agent to do specific things. Here’s a repo of a bunch of example custom agents you can use .
- I literally learned while writing this post that you can make a .github-private repository in your organization specifically for configuring default custom agents. Who knew? Don’t tell my boss. Anyway, here’s a template repo for that and docs about these in general.
prompts/: Also similar to .instructions! Every file should be named *.prompt.md. This lets you add reusable commands to GitHub Copilot. Docs here and handy examples here.

Oh my word stop

Okay I think that’s it. There’s so many things you can do. I’m exhausted. There’s actually more types of configurations you can add to the .github folder depending on the apps and Actions you have configured in your repository (like this one for labeling PRs lets you add labeler.yml, for example). But I’ll let you explore those on your own.

I hope this was handy for you!

My inbox is so full

Thu, 18 Dec 2025 00:00:00 GMT

It’s Blogvent, day 18, where I blog daily in December!

This week was so busy that my brain has just slowed to a halt. Tons of work, babies not cooperating, travel, pre-holiday jitters, family moving… it’s been a lot.

When I’m particularly stressed and feeling overwhelmed, I just want to clean. I want to organize things to have some semblance of control in my environment.

What’s been hard lately though is that between all the cleaning in real life and dealing with fires at work… my inbox is truly just a black hole where emails go to die. I haven’t hit inbox zero in over a year (I know because I track it, doesn’t everyone???). It feels like this gigantic mountain that I have to climb and my eye twitches just thinking about it.

I’m sure there’s some newfangled AI tool or something that could help me get through it, but… I just don’t trust those kinds of tools yet. Maybe I should.

So, in writing this, I’m saying:

If you’re waiting on an email from me, I’m sorry
Is this what assistants are for?
We don’t need to be in control of everything! I say this but need to believe it!
Future Cassidy, if you read this, stop procrastinating and go clear your inbox
I should probably stop procrastinating with writing this blog and go clear my inbox

Things I would study more if I had time

Wed, 17 Dec 2025 00:00:00 GMT

It’s Blogvent, day 17, where I blog daily in December!

These are a bunch of things I would genuinely love to study more deeply. Someday if I ever make it big, you’ll see me studying these.

Anna Ancher’s art
Irish history in general, particularly around the conflict of the 90s
The history of how Mexico City came to be
The origins of Portuguese as a language
Carol Burnett’s impact on comedy
“At the Dressing Table” by Zinaida Serebriakova, the painting origin story, and her career following
The process of book publishing over time, how it evolved
About the life of Louisa May Alcott
The history of the stops along the way of El Camino de Santiago
The evolution of different world religions over time
How language developed and morphed in colonized Asian countries
How olive oil influenced trade over time

These are all things that I could definitely just search online, and I have! But when I say I want to “study” these topics, I mean a full curriculum with readings and an expert or two I can speak with about them. I want a syllabus!!

These are just topics off the top of my head (there’s definitely more), but these sorts of things that have nothing to do with tech or scientific subjects are so interesting to me. There’s a lot to learn in this world from history and art and culture, and though I have bits and pieces, I really do hope I can dive into these things (and beyond) someday.

Coming up with blog topics

Tue, 16 Dec 2025 00:00:00 GMT

It’s Blogvent, day 16, where I blog daily in December!

It is hard coming up with blog topics. Especially when I’m trying to post every single day. I often just start writing, sometimes on my laptop, sometimes on my Micro Journal, and a topic will just… form.

This post literally started as:

I have no idea what to talk about today. Why is that?

It’s tough because I have posts I want to write about and put a lot of effort into, but when you blog daily, those posts feel a bit weighty for a daily post.

But, while I’m thinking on this, this is generally the framework I use to come up with blog topics:

What have I worked on lately/learned/tried that might be beneficial for people to learn about?
What opinions do I have currently that I haven’t expressed thoroughly?
What’s something cool I’m caring about recently?
What’s my strategy around a certain topic? (that’s this post!)

I think it’s so important to write. Even if you feel like you have nothing to say. You do have things to say! You can say those things in ways nobody else can! Don’t think about SEO, don’t think about getting every sentence to be perfect, don’t AI-ify your writing (I do think AI can be handy for outlining, but I loathe how it writes). Just write!

Influencing without authority

Mon, 15 Dec 2025 00:00:00 GMT

It’s Blogvent, day 15, where I blog daily in December!

Leading a project without formal authority can be challenging. Having accountability on the success of a project without the authority to direct/prioritize its direction can be frustrating, but there’s some tools in your tool belt you can use to influence decisions:

Your expertise in your role/discipline/industry
Your relationships with colleagues
Your understanding of your organization and its goals/values
Your communication skills (and ability to present ideas)
Your ability to create “win-win” situations and value
Your ability to appear confident (without being cocky)

A lot of times, when you’re in a position like this, it’s about earning trust with enough people that you can gain authority eventually. That trust is what matters, and makes your leadership more effective in the end.

Trying out Ente for media backup

Sun, 14 Dec 2025 00:00:00 GMT

It’s Blogvent, day 14, where I blog daily in December!

I’ve always liked taking photos of things, but since becoming a parent… I have thousands and thousands of pictures and videos of my children. I like looking at them, I like looking back at different milestones (especially with two babies now, it’s fun to see when certain things happened and how they differ), I share them with friends and family, and sometimes I even print them.

Because I have so many photos and videos, my phone is not enough storage for them. They’re precious enough now that I want to make sure they’re safe (I say “now” because I was relatively careless about them before, not caring much if I lost them, but now they matter to me more).

Before: Amazon Photos

Back when I worked at Amazon a few years ago, I started backing up my photos to Amazon Photos, and it’s been alright over time.

It’s not a perfect app, but I liked that it synced well to my phone, and it was easy to share with the non-Google and non-iCloud folks in my family. Plus, it’s (mostly) free with a Prime subscription. It’s a totally fine product.

Buuuut:

I don’t really like being that attached to Amazon in general
It doesn’t do any sort of face tagging (where I could search for photos of “Joe in Philadelphia in 2022” or something to that effect)
Your data isn’t that portable (exporting everything at once requires the desktop app, which I didn’t realize until this week)
The app is just slow enough that it can be annoying to wait for a photo to load

Now: Ente

A friend of mine recommended I try Ente, and I love it so far! Ente is a paid, end-to-end encrypted (E2EE) photo storage service.

It’s open source (which I LOVE), it has on-device facial recognition and search, and it’s cross-platform across iOS, Android, Web, Windows, Linux, and MacOS.

Pricing-wise, it’s not too bad! They offer 10GB free, which worked well for testing it out. As of today, it’s 50GB for $2.49 a month, 200GB for $4.99 a month, 1TB for $9.99 a month, and 2TB for $19.99 a month. I went for the 1TB plan, for now!

It’s more expensive than Amazon Photos, but in a similar ballpark. Amazon Photos has unlimited photo storage included with Prime, but only 5GB included for video. It has 1TB for $6.99 a month (on top of the Prime price).

I’m very okay with paying a bit more to have a better app experience, privacy, and the features that I want, and so far I’m happy with it!

All the options

I thought about other options besides Ente, and went far too deep into the research rabbit hole figuring out what I wanted to do. This is what I found, in case it’s helpful for you to see! Learn from my digging. Save yourself.

Feature	Immich	Synology Photos	Ente	Big Tech
Primary Cost	Hardware + (optional) license	Synology hardware	Subscription	Data/Privacy
Privacy	High	High	High	Low
AI Smarts	Excellent (Face, Object, Map)	Basic (Face only, no object)	Good (On-device Face)	Excellent
Setup Effort	Moderate (Docker knowledge)	Low (Pre-installed)	None	None
Lock-in	None (Files are folders)	It depends	Low	Fairly high

I did strongly consider using Immich and hosting everything myself. But after thinking a lot about it, I remembered I am a lazy bum when it comes to maintaining a machine. And I don’t trust myself with being my own sysadmin, honestly. I think I would do this if I had a more dedicated homelab setup, but because I don’t, I got nervous committing to buying hardware and going that route.

Shameless referral

If you sign up for Ente yourself, use code N4Z7QU so we can get 10GB more free! I promise I’m not paid by them. I just like free things.

Bye

Anyway, Ente has been good so far, and I’m feeling optimistic about it as a solution for me. Do yourself a favor and check it out if you wanna move away from the big tech options!

Vibe coding is boring

Sat, 13 Dec 2025 00:00:00 GMT

It’s Blogvent, day 13, where I blog daily in December!

I don’t mean to make this a hardcore hot take, but… vibe coding is boring.

Don’t get me wrong, I’ve been trying it out, and it can be fairly effective. It’s innovative. I started my app PocketCal with AI and it worked pretty well, in addition to some personal apps I’ve made for myself.

I have been playing around with Spec Kit and sudocode this week (full disclaimer, Spec Kit is from GitHub, where I work, and sudocode sponsored my newsletter this week) and it’s really great how powerful it is to be able to define good specifications, hand them off to some agents, and then make my side projects an actual reality instead of losing motivation after buying a domain name.

That being said… after doing the cool thinking work and creating the specifications, after I hand things off to the agent, I get bored. I have GitHub Copilot building something literally as I write this blog post. There’s a handful of personal tools I’ve been making for myself and it’s fun to have the final result, but I’ve literally dozed off watching the agents work multiple times this week, because they aren’t interesting in the editor. Just watching the code being written instead of doing anything is like this era’s “watching paint dry” or “watching grass grow.” Or better, “my code’s compiling.”

I don’t know if this is necessarily a bad thing. This is the future that AI companies are pitching, to “give the boring work to the computer so that you can do the interesting work.” But as I work more with these tools in and outside of work, I have really re-learned how much I do love coding, and don’t find it that tedious. I don’t really like vibe coding. There’s no joy in it. There’s no “YAY I am a GENIUS because I FIGURED IT OUT” feeling. It’s just there. It’s boring.

For apps that I want to ship to the world, for this website, for apps that are using an interesting tech stack, I will be driving development, because I like it, and I have enough experience to have opinions on how they should be built.

But for the apps where I just care about the final output, that’s what vibe coding is for, I suppose. I don’t ever want to rely on it so much that I lose my own skills, but it is nice getting those results faster if I truly don’t care how something works (which is rare, but I have a few projects in the pile that are finally built now, so yay). But yeah. It’s not fun. It’s just another tool in the tool belt. And it’s really boring.

Podcasts I'm listening to in 2025

Fri, 12 Dec 2025 00:00:00 GMT

It’s Blogvent, day 12, where I blog daily in December!

I admit I’m not a huge podcast person. No, scratch that: I love listening to podcasts but I never have time to, and when I finally do, I think, “wow, I should be more of a podcast person,” and then I stop listening for weeks, and then binge many episodes over an extremely short period of time.

Plus I have kids at home who have no interest in me listening to other people talk besides them.

So, because I know myself and my habits, I have an intentionally short list of podcasts that I try to keep up with and like!

Good Hang with Amy Poehler: I think this is a wildly popular one now for a reason, it’s very fun and I just love how it’s chill and mostly comedians hanging out.
Overcommitted: Put simply, thoughtful tech conversations from thoughtful tech people. I’m biased towards this one because it’s run by some coworkers, but they are awesome coworkers and it’s fun and interesting!
CodePen Radio: This one was gone for YEARS and then they came back and I am so happy they did.
GitHub Podcast: Another biased one because it’s my place of work, BUT it’s still good! I’m on some episodes and I purposely do not listen to those as a result but I keep up with the show anyway because I love the open source conversations.
VeggieTales Podcast: Okay this is more for my children than me, but it’s a good one for talking about how it’s important to be “nice” and stuff (what a concept), and it’s been great on roadtrips to visit family!

…annnd that’s it. I have listened to one (1) episode of ShopTalk and The Stack Overflow Podcast each this year too, as honorable mentions!

The Abilene Paradox

Thu, 11 Dec 2025 00:00:00 GMT

It’s Blogvent, day 11, where I blog daily in December!

I learned about The Abilene Paradox a while back from Ben Hong.

Long story short, this is when a group of people ends up doing something that nobody actually wants to do because they are not good at talking about it.

I feel like this happens a lot both on group trips amongst friends, or times when you’re wanting to hang out with people and not step on toes… and at work when you have far too many meetings about a project and how to go about it. Reminds me of the phrase, “death by committee.”

Food for thought, don’t you think? Send this passive aggressively to your coworkers <3

Food I recommend in Chicago in 2025

Wed, 10 Dec 2025 00:00:00 GMT

It’s Blogvent, day 10, where I blog daily in December!

I often get asked about food and things to do in Chicago! There’s sooo many stereotypical things to do and get, like the architectural boat tour and some deep dish pizza.

And honestly, you could do well with that. But I have so many more food recs for you. Here’s my favorite ones, as of now!

Cedar Palace (Lebanese food, kinda hole-in-the-wall, but one of my faves in the city)
Three Little Pigs (either the friend chicken sandwiches or the hot pot beef)
Al’s Beef (a beef sandwich)
La Chaparrita (literally any of their tacos)
Tuk Tuk Thai (literally the best Thai food I’ve ever had)
Kasama (anything from their bakery, anything)
Doma (their breakfast sandwich!!!)
Wildberry (literally any breakfast item is bomb)
QuesaBirria Jalisco (these tacos will change your life)
Cantón Regio (Mexican steakhouse, great for groups)
Jibaritos y Más (everything is bomb, all of it, but their pork and their fish and their Puerto Rican rice is heaven)
Topo Gigio (solid, classic Italian food)
MCCB (everything is great but their soups changed me)
Ken Kee (noodles)
Boba
- Gathers Tea Bar (really good quality)
- Tsaocaa (boba and Korean fried chicken)
- Daboba (their boba pearls are SO good)
- TE’AMO Boba Bar (I particularly like their Yakult drinks)

There’s more, but start here. Let me know if you try any of these!

Pausing a CSS animation with getAnimations()

Tue, 09 Dec 2025 00:00:00 GMT

It’s Blogvent, day 9, where I blog daily in December!

CSS animations are cool, but sometimes you want them to just cool it.

You can pause them by using the getAnimations() method!

When you call getAnimations() on an element, you get an array of all of the Animation objects on said element, which includes CSS animations. There’s various things you can do with the returned Animation object, like getting the currentTime of the animation’s timeline, or the playback state of the animation (playState), or in our case, actually pausing the animation with pause().

We could loop through every Animation object in that array and pause it, like so:

const someAnimatedThing = document.querySelector(".thing");
const animations = someAnimatedThing.getAnimations();

animations.forEach((animation) => {
	animation.pause();
});

Or, if you just want one animation to pause, you can filter from the returned results.

Here’s a real demo where there’s only one animation happening, so we pause it based on the current playState.

See the Pen getAnimations() demo by Cassidy (@cassidoo) on CodePen.

Hope this was helpful!

Sewing an e-reader case

Mon, 08 Dec 2025 00:00:00 GMT

It’s Blogvent, day 8, where I blog daily in December!

Sewing is fun but inertia exists

I’ve been wanting to get back into sewing for a while. When JoAnn Fabrics announced they were going to be shutting down this year, I raided the sales with gusto, with a whole lot of plans to make EVERYTHING. Clothes! Bags! Pillows! Everything!

…then I gave birth and that did not happen.

My sewing machine that I’ve had for years, collecting dust, continued to collect dust.

I’m not the best sewer in the world, and very much a newbie by most definitions. But, I come from a family of very talented sewers, so I know what’s possible, if I just pick up the dang machine and start something. It is so hard to just start something.

That being said, my sister-in-law mentioned over Thanksgiving that she was going to buy a sleeve for her weirdly-proportioned off-brand e-reader, and it seemed like the perfect little project to get off my butt and actually make something.

Threading the machine is the hardest part of sewing

Okay, threading a machine isn’t that bad, but oh my word it is far more annoying than it should be. I watched this video on how to thread a sewing machine probably 20 times. I knew the basics of going around all the different parts, but handling the bobbin was very, very frustrating and took far more time than it should have.

The actual project

The fabric I chose for this case was… not a good choice? Ha. It was incredibly fluffy. It’s like sherpa-y on one side and t-shirt-y on the other. I picked it because it would have some good padding for the device without me having to sew on another layer. But, I had to do a lot of cutting around the fluff to actually get it to sew well.

The thread kept getting caught and I fully lost a couple needles at one point that were holding everything together. But, on the plus side, the fluff was able to hide some of my uneven lines!

I sewed the edges over at first so there would be no frayed edges, and then the rectangle inside out so that I could hide the seams more. I had to do some trimming because it was so thick that it got hard to fold!

But, once it was inside out, it was not too shabby!

The edges weren’t perfect straight lines, but it was juuust good enough to get the job done.

And the final result fit the e-reader perfectly! I kind of wish I added some kind of strap or button from the beginning, but it was a great little project to get back into sewing again, and now I will be a sewing fiend. Theoretically.

The ABCD framework for feedback

Sun, 07 Dec 2025 00:00:00 GMT

It’s Blogvent, day 7, where I blog daily in December!

I have a little framework that I often use when I want feedback/when I give feedback on a blog post, a tutorial, a project, a product, etc. to get as much clarity as possible, quickly.

what’s Awesome?
what’s Boring?
what’s Confusing?
what Didn’t you believe?

These “ABCD” questions are basic, but they get to the meat of the good and the bad (and the in between) of what you’re producing. The specificity of each question gets you to helpful answers, rather than getting a vague, “looks good to me” or “eh, I didn’t like it” to whatever you ask.

I hope this is helpful for you!

…unless you found it boring or confusing or you don’t believe me, heh.

Lasagna and a root beer float

Sat, 06 Dec 2025 00:00:00 GMT

It’s Blogvent, day 6, where I blog daily in December!

One of my favorite questions to ask people is a very “church kid vibe” question, but is always a really fun one to get answer for:

If Jesus’s body and blood were bread and wine, what are yours?

Some people go deep and think hard on it, and some know the answer right away. I knew right away that my answer was lasagna and a root beer float. My husband Joe’s is fried chicken and boba. One of my friend’s is sushi and beer. Another friend’s is fried plantains and Pepsi. Another’s is a Costco rotisserie chicken and a Manhattan cocktail.

It’s SO fun to hear responses. Because it’s not necessarily a question of what your favorite food and drink are, but more like… what represents you. I feel like getting one of those answers helps me know a person better, and I love when they explain why they picked their choices, too.

Today’s my 34th birthday, and Joe invited a bunch of friends over for a surprise lasagna and root beer float party! I felt so known and loved, and very well-represented.

If you read this, I would love to hear what food and drink you would pick!

The what, how, and why of CSS clamp()

Thu, 04 Dec 2025 00:00:00 GMT

It’s Blogvent, day 4, where I blog daily in December!

CSS clamp() is cool and you should use it.

In a sentence, clamp() lets you assign a value to a CSS property between a minimum and a maximum range, and uses a preferred value in that range. It’s really helpful for responsive layouts and typography!

Syntax

clamp() has three parameters, in order:

A minimum value
A preferred value
A maximum value

You can assign it to a property, like so:

.my-column {
	width: clamp(200px, 40%, 400px);
}

The column width here is always between 200px and 400px wide, and defaults to 40% of its container width. If that 40% is less than 200px, the width will be 200px. Similarly, if that 40% is more than 400px, the width will be 400px.

Or, another example:

.my-special-text {
	font-size: clamp(16px, 4vw, 24px);
}

The font size here is always between 16px and 24px, and defaults to 4% of the screen’s width. If a screen is 1000px wide, that means the font size would be 40px if it were that exact 4%, but with this function, it is capped at 24px.

Why would I use this over media queries?

It’s shorter! Honestly that’s why. You can accomplish a lot with a single line of clamp() (that is arguably easier to maintain) than a set of media queries. It reduces reliance on multiple rules and functions.

A typical media query approach for a column width might be:

.column {
	width: 100%;
}

@media (min-width: 600px) {
	.column {
		width: 400px;
	}
}

@media (min-width: 900px) {
	.column {
		width: 800px;
	}
}

But with clamp(), you could do:

.column {
	width: clamp(100%, 50vw, 800px);
}

This is way shorter, and I would argue, easier to read and maintain!

Resources

CSS clamp() is widely supported, so you can safely use it across your apps and websites.

If you’d like to learn more, here’s some handy links for ya:

Until next time!

Fix your upgrades and migrations with Codemods

Wed, 03 Dec 2025 00:00:00 GMT

It’s Blogvent, day 3, where I blog daily in December!

In case you missed it, there was a pretty bad security vulnerability recently with React Server Components.

Luckily, the team updated everything, hooray, so people can upgrade their repositories and everything should be okay!

That being said, when I went to update one of my long-neglected sites that used Next.js, I ran into a bunch of errors because some of the features I had used before had been deprecated.

But, I found that the Next.js team has a dedicated tool for Codemods! Codemods are transformations that run on your codebase programmatically, and their tool was able to fix all of the deprecations I was dealing with.

To run their tool, use:

npx @next/codemod <transform> <path>

You can just put . in for the path if you want it to be applied to your whole project.

There’s a list of transforms here, and at least in my case, it worked pretty well!

An example use-case of mine was that one of my sites was using Next.js 12, but in Next.js 13 and onwards, the <Link> component changed its syntax. So, I ran this:

npx @next/codemod@latest new-link .

And blammo, it worked like a charm!

More resources

Codemods aren’t just a Next.js thing. There’s a few registries and libraries out there that work similarly, and it’s really handy to have those commands available if you’re doing a common migration. Here’s some handy resources for you:

Hope this is helpful!

Change commit timestamps in Git

Tue, 02 Dec 2025 00:00:00 GMT

It’s Blogvent, day 2, where I blog daily in December!

Why change commit timestamps?

With my current blogging setup, I write most of my posts in Obsidian, and sometimes TinaCMS. I wrote about that process in detail, here.

This setup still works pretty well for me, BUT something that does kind of bug me is that if I publish a post from TinaCMS, it uses UTC, so it’ll make the commit appear one day later than it actually did, sometimes.

This is just one example, but there’s other times where you might want to change a commit timestamp, like if you are migrating code from another non-Git-based system and you need to update when code was written, or if you want your code to reflect a different time zone, or if you just want your green squares on GitHub to look a certain way (guilty).

Just show me how to edit the timestamp, Cassidy

So to be clear, you can’t directly edit the timestamp of a commit already pushed to GitHub (or wherever you’re pushing your code), but you can rewrite the history and set new dates.

If the commit you want to change is the most recent one, you can run this on a Mac or Linux-based system:

export GIT_AUTHOR_DATE="2025-12-02T23:59:00"  # change this to whatever date/time you want
export GIT_COMMITTER_DATE="2025-12-02T23:59:00" # this too
git commit --amend --no-edit --date "$GIT_AUTHOR_DATE"

If you want to do this on Windows, the command in PowerShell is similar:

$env:GIT_AUTHOR_DATE = "2025-12-01T23:59:00"
$env:GIT_COMMITTER_DATE = "2025-12-01T23:59:00"
git commit --amend --no-edit --date "$env:GIT_AUTHOR_DATE"

In Git, each commit stores two timestamps, the author date, and the committer date. The author date is when the work was originally done, set by the author of the commit, and the committer date is when the commit was actually written to the repository. If someone else rebases or cherry-picks or something, this could be a different person or time. You often want these two dates to match, so that’s why you set both in the command here!

Anyway, after running the above, force push it to your repo like so:

git push --force

What if it isn’t the most recent commit?

Ugh. Okay it’s not that bad. But you gotta rebase. You’ll run:

git rebase -i HEAD~3

This would be the last 3 commits, change that number to whatever commit you need to edit.

When you run this, you might see something like this:

pick aaaa111 Commit message 1
pick bbbb222 Commit message 2
pick cccc333 Commit message 3

If you wanted to change the date for the second commit, you’d change that line to say edit instead of pick:

pick aaaa111 Commit message 1
pick bbbb222 Commit message 2
pick cccc333 Commit message 3

(pick means to apply the commit and move on, edit means to stop here and change something)

After you save and close the editor, Git will stop at that commit. This is where you run the commands above with the exporting of variables and git commit --amend stuff.

After you do that, you run git rebase --continue and be on your way.

Unsetting variables

After you do this, you don’t necessarily need to “clean up” your variables, but juuust in case, if you’re about to do more commits and want only one commit to have a changed timestamp, you can unset the variables to avoid accidental reuse.

On Mac/Linux:

unset GIT_AUTHOR_DATE
unset GIT_COMMITTER_DATE

On Windows:

Remove-Item Env:\GIT_AUTHOR_DATE
Remove-Item Env:\GIT_COMMITTER_DATE

Check your work

You can check the commit dates afterwards with:

git log --pretty=fuller

This command gives you a more detailed snapshot than your standard git log, showing both the author and committer info and timestamps.

Hope this was helpful for ya!

Automatically mark pull requests and issues as stale with GitHub Actions

Mon, 01 Dec 2025 13:59:01 GMT

Howdy y’all!

I’m starting my latest Blogvent series, where I write a useful blog post each day in December! If you wanna see last year’s roundup, check them out!

Oh no, stale things!

You don’t want old pull requests and issues to clog your backlog of your open source projects, no matter how big or small. I ran into this problem recently, where people left partially completed PRs and drafts on my repo, and while I appreciate the thought of implementing something, I don’t want to have to keep an eye on something that won’t ever be picked up again, and remember to close things over time.

There has to be a better way!

There is! There’s a handy GitHub Action that you can put into your repos and be on your way.

To do so, open the .github/ folder in your chosen repository, make a folder in it called workflows, and add the Action .yml file there. That’s it!

There’s more documentation on adding Actions here. If you’d like to see how I implemented this specific Action, here’s a good example in my PocketCal app repository!

Ahhh. So fresh. See ya tomorrow!

A pretty good email scam

Sun, 30 Nov 2025 00:00:00 GMT

Like many of us, I’ve become the family IT person for a lot of situations. My grandpa got hit with a pretty good (“good”) scam lately that I’ve had to clean up.

His email password was taken, and a bunch of us in the family got emails from him asking for Amazon gift cards (a classic), so we told him to change his password and hoped that was the end of it.

But, soon after, he noticed that he wasn’t getting any emails anymore. After getting on a call with him and logging into his account, I noticed that there was email forwarding set up that was very well-hidden.

His email, let’s say it’s johnsmith@something.com, was being forwarded automatically to johnsmith1@gmail.com, and the name of the forwarding was titled “Default Forwarding”. Whoever changed that was clever enough to hide it behind that word “Default” and there was no way my grandpa would have found that.

Then, after looking at the emails that his account sent, they all had a “reply-to” set up to johnsmith1@outlook.com, and that email was also set up as his new 2-factor-auth email.

So, no matter what, with these two fake emails, the folks hacking my grandpa’s email would have gotten the responses to him. Luckily we were able to get those removed and everything cleaned up, but that was pretty spooky.

So, next time you’re doing family IT fixes, don’t just have them change their passwords, but check the settings around their accounts, too!

How reducers work

Sun, 23 Nov 2025 00:00:00 GMT

At work, we have a livestream show called Rubber Duck Thursdays where we talk about open source and code each week. It’s really fun and you can find it on GitHub’s YouTube, Twitch, and LinkedIn channels.

This past week, on the stream someone in the comments mentioning they didn’t know how reducers worked, so I took the liberty of writing up an example!

Here’s the video, and here’s the resulting code if you want to just skip to that.

Hope this was helpful for you!

Non-determinism and ownership

Fri, 21 Nov 2025 00:00:00 GMT

Like many people in tech nowadays, I use LLMs at work. I like using GitHub Copilot, genuinely, not just because I’m a GitHub employee. It’s not perfect, no tool is, but it helps make easy problems easier, and I can focus on thinking on tougher problems myself.

But, of course, I do occasionally complain about the tool or the model I’m using when it’s being dumb. If I tell it exactly what do to, there’s a decent percentage of the time still where it’s not fully accurate. It’s become a meme how common it is to say, “actually, bot, that’s not what this should be,” and it responds, “You’re absolutely right!” and either fixes itself or spirals into more incorrectness.

Because LLMs aren’t a deterministic tool like a linter or a type-checker or a test suite, you should approach the tool you use with a more human angle: you can guide it, constrain it, organize around it, offer quick feedback loops, provide documentation, and add automations around it to catch issues, rather than treat it like other dev tools.

LLMs are just as wrong as humans are, sometimes. There’s so many jokes out there (since the pre-AI era!) with metaphors like how a customer wanted a swing in a tree, the engineers built a swing embedded into the truck of the tree (or something), a consultant broke the tree to make the swing move, etc. etc. etc. Humans are often not great at expressing what they actually want, and so the results are humans that make mistakes.

That being said, as much as you may treat an AI tool like a teammate, it will never be a true, proper teammate.

“A computer can never be held accountable, therefore a computer must never make a management decision.”

1979 IBM training manual

AI tools are excellent advisors and applications that can get you from A to B, faster than ever before. They make mistakes, and they do acknowledge their own mistakes. But, they can never properly take ownership for their errors. There’s viral posts out there about AI tools deleting a bunch of work and responding with, “I made a catastrophic error in judgement.” But… that’s it. You can’t get that work back. The LLM apologizing isn’t real feelings, it’s just responding the way it was trained to respond. You can’t reprimand the bot. You can’t fire the bot. You used the tool, you let it make a mistake, and now you have to deal with the consequences.

Humans ultimately have ownership over the work produced, even if an LLM did the heavy lifting. Engineering knowledge matters to be able to handle mistakes, and enhance successes. You can offload tasks, you can offload mental space, but you can never offload ownership, because actions have consequences. Good things and bad things and all the things in between come down to the human using the tool.

A poem delivered by my 2.5 year old that encapsulates parenthood

Sun, 09 Nov 2025 00:00:00 GMT

I love you so much.

I wish I could kiss you all day.

The day sometimes it snows, sometimes it rains.

I love you! I need to poop.

I am back at work and it feels weird!

Wed, 05 Nov 2025 21:25:26 GMT

My maternity leave is officially over! It’s… strange. Like not strange in a bad way necessarily, but I’m definitely still processing that I’ll have to sit at my desk regularly again and ship code and content, and manage a team, and go to meetings, and not be with my babies all day every day.

It’s a good break for my brain I think. If you can call work a break? Parenting is HARD. Any parent you talk to would agree. You don’t vacation from it, really. But I’m also just replacing one kind of work with another.

I think parenting has definitely given me a good perspective though on what matters, especially at work. My organization had a bit of a shift internally literally the day I got back (so cryptic, I know), and I think pre-babies, I’d very much stew around “what does this MEAN” and now I’m like, “eh, okay, I can roll with this as long as I’m still getting paid and nobody’s getting laid off,” as I get my work done and close my laptop afterwards to be with my kiddos.

Anyway. I feel bittersweet about coming back. I’m really happy to be with my team again, I missed talking to them, and I do genuinely love working with developers. But I also want to squish my little babies all the time and have had to step out for a hug a few times (I love working from home). But I’m also tired? I contain multitudes!

A moose playing Go in a park while drinking boba

Sat, 04 Oct 2025 00:00:00 GMT

I tried playing with the new Sora 2 model this week. I am not a huge fan of AI-generated art and videos (side note, see my blog’s AI manifesto), but I like to be aware of their capabilities.

My main “test” I try out with pretty much all AI image and video creating tools is to prompt them to render “a moose playing Go in a park while drinking boba.” Kind of like my own version of pelicans on a bicycle. It… never works.

It’ll get close, kind of, and I will say, Sora 2 was better than previous attempts with video. But, I will not show you the video results, because the results genuinely just kind of made me uncomfortable. I will show you images, but first, let me explain.

I think this prompt specifically has some challenges that AI has yet to overcome:

Moose are kind of weird animals.
The grid on a go board is 19x19 and counting is very hard for AI tools.
Go pieces look an awful lot like tapioca balls in a boba cup.
A small problem I can forgive, but a very real problem, is that a natural game of go has the same number of pieces on the board in each color, and some arrangements of pieces just don’t exist in a real game.

In every single attempt I’ve tried (I have tried this with pretty much every video and image generation tool you can think of), it has at least one of these problems, if not most of them:

The moose isn’t a moose, or doesn’t stay a moose (Sora 2 transformed the moose into… some kind of scary hairy blob on several occasions)
The moose ears and antlers aren’t in the right spot (did you know that antlers are like giant “hearing aids” for moose? They’re like giant parabolic dishes for sound. So cool.)
The moose is just nearby while a random man plays go instead
The boba straw is jank in some way (Sora 2 had the straw shrink as the moose drank from it at least 3 different times)
The go pieces are not the same sizes on the board (in most video generations, the pieces pulse in size? Which is weirdly unsettling.)
The actual gameplay is super wrong on the go board (incorrect number of pieces, non-sensical placements, pieces just “on the board” instead of in proper positions on the lines of the grid)
The go board is a weird shape (in videos, it’s often concave like a bowl, and the grid shifts around)
There’s no bowls of go stones on the side of the board (or anywhere)
The moose has sunglasses on (?) and the reflection in the sunglasses doesn’t match the board
There are go pieces in the cup of boba, or the boba ends up being the go stones
The game isn’t actually go

I do massage the prompt, like sometimes I’ll give it some more details or iterate on it, but alas, these problems are still pretty consistent. Which I’m okay with! It’s a good test!

Here’s some examples of outputs I’ve gotten (first one being a snapshot of a Sora 2 video that almost looked good, until the moose turned into a nightmare creature, the straw floated around the go board, and the pieces moved themselves into a corner):

Before you say, “Now, Cassidy, you’re being a bit strict with these AI tools, these are pretty dang close. One might say, even, that they are okay.” Sure, sure. But, I counter: no human artist would ever make these mistakes. If I asked an artist to draw/paint/create a moose playing go in the park while drinking boba, the straw would be in the cup. The go board would be valid. A man would not be drinking the boba. The moose would be a moose.

Using Notebook Navigator and Cupertino in Obsidian

Sat, 27 Sep 2025 00:00:00 GMT

I’ve written before that I use Obsidian as my “second brain” tool, but lately I’ve been experimenting with my setup to make it better, particularly on mobile. I’ve written before about how I publish to my blog from Obsidian, and I want to make that smoother in general, too.

And y’all… the Notebook Navigator plugin + Cupertino theme combination is the best I’ve tried in a while. I’m currently typing this on my iPad, and I also regularly write notes on my phone. Before it was… just okay? It felt like a very obvious non-native app experience. Which is, again, okay. But anyway, this combination feels very native on mobile, which is a game-changer (I know it shouldn’t be, but I’ve accepted that aesthetics matter for my own motivation)!

Notebook Navigator specifically changes how you… navigate your notes. Aptly named. I particularly like that you can see what tags a note has without having to open it, and there’s ways to enable when you last opened/edited a note, an easy way to see your tags, and some icon options as well.

I have my own theme I’ve made, Cardstock, and I’m going to be borrowing some ideas for that from Cupertino to improve it. There’s still some small spacing things on iPad that aren’t perfect in Cupertino, but this is the smoothest my mobile typing experience has been in a while. I still like Cardstock for a computer, and I’ll be updating it!

2000 Poops

Sun, 21 Sep 2025 00:00:00 GMT

Flash back to Spring 2020, when we were all confused and uncertain about what the world was going to look like, and unsure of how we would stay connected to each other.

One of my cousins texted our cousin group chat mentioning the app Poop Map as a cheeky (heh) way of keeping up with the fam. We started a family league, and it was honestly pretty great. We’d congratulate each other on our 5-star poops, and mourn the 1-stars. Over time I made other leagues with friends online and offline, and it was really fun. I even talked about it on Scott Hanselman’s podcast when he asked about how to maintain social connections online (if you wanna hear about it, listen at the 11 minute mark in the episode).

Eventually, people started to drop off the app, because… it’s dumb? Which is fair. It’s pretty dumb.

But alas, I pride myself in being consistent, so I kept at it. For years. The last person I know on the app is my sister-in-law’s high school friend, also known by her very apt username, spicy lil brown girl w/ ibs. She and I have pretty much no other contact except for this app, and yet we’ve bonded.

2000 poops feels like a good place to stop. With 12 countries covered around the world and 45 achievements in the app (including “Are you OK?” courtesy of norovirus, and “Punctuate Pooper” for going on the same day for 12 months in a row), I feel good about saying goodbye. My mom is also really happy I’m stopping. Wonder why?

Anyway, goodbye, Poop Map, and goodbye to the fun usernames for the friends along the way: cassipoopoo (that’s me), poop-tastic, thegreatpoopster, The Brown Bambino, Turdinator, ALANOOP, ZamarThePoo, clawedpoops, fimidoodoo, ramblingpoo, claroopoora, pookra, poopzorz, ximepoo, poopIsSus, ronstipated, mooeypoopoo, and of course, spicy lil brown girl w/ ibs.

Also, before you go, here’s a fun data visualization I made of all my entries!

Smell ya later!

Questions to ask when you think you need to finish something

Thu, 18 Sep 2025 00:00:00 GMT

I’ve written before about how I am sometimes haunted by my own side projects that I should finish, but I also want to pursue a shiny new thing instead.

After shipping some projects (like PocketCal and Ductts, among others), I think I’ve refined my list of questions that I ask myself when I want to avoid working on an existing project and pursue something else instead. And now… I give them to you.

Ask yourself…

Does this thing still align with my current goals?
Would I start this again if I hadn’t already invested time and resources into it?
Do I still want this, or am I trying to prove to myself that I can finish it?
What would happen if I let this go?
Am I trying to meet my own expectations, or someone else’s?
What would I actively pursue if I didn’t finish this thing?

Anyway, doing a little “mental audit” around projects have helped me ship better when I realize some projects I pursue aren’t actually worth it to me.

And sometimes, the answers to these questions help me actually finish a project, because my answer reminds me of why I started it in the first place!

I hope this helps you!

Playing with Fliiip Book

Tue, 16 Sep 2025 00:00:00 GMT

I learned about Fliiip Book on the internet recently and it’s pretty cool. It’s “a simple gif animation app for the web” and does what it says on the tin!

It’s free, and has features like:

Onion skinning
Keyboard shortcuts
Brush options
Keyframe timeline navigation

I haven’t really played with an animation tool properly before. This was great because it’s small and approachable, while also clear on how much it can do. I used to love taking physical notepads and making little flip books with them growing up, and so this made me feel nostalgic while also learning a bunch. Great combo, if you ask me.

Here’s a little gif I made in a few minutes!

The creator, Jonathan, has some other cool projects on his website like Drawww Time and Paint List. I love seeing tiny powerful tools.

Credit to Stef Walter for sharing this one!

See ya next time.

I made a tree visualizer

Sun, 14 Sep 2025 00:00:00 GMT

I was going through some old folders on my laptop and found some old code from my old React Training teaching days for visualizing how component trees in React work, and turned it into its own standalone web app!

Here’s the app, if you’re not in the mood to read more.

Back when I was teaching React full time, one of my fellow teachers Brad made a tool that let you show a tree (like a data structure tree), and we would use it in our lectures to explain what prop drilling and context were, and how components could work together in React apps.

I loved using the tool, and thought about some use cases for it when I found the old code, so I spruced it up a bit. It has some keyboard commands for usage:

Shift + ▲ ▼ ► ◄ or HKJL - Move selection between Nodes
Shift + 1-5 - Create 1-5 Nodes
Shift + Backspace - Delete selected Node
Shift + P - Toggle Pulse
Shift + F - Toggle Feature
Shift + D - Toggle Drilling arrow
Shift + I - Toggle IDs
Shift + T - Add Tag to Node
Shift + H - Toggle Hide Node
Shift + S - Save image of Tree

Most usefully (to me) is the ability to quickly make images for sharing them!

The original code had each node maintain its own internal state and it was kind of recursive in how they rendered (see exact lines here). In retrospect, I probably should have changed it to be rendered with a big state tree at the top and serialized in the URL or local storage (kind of like what I did with PocketCal), but eh, it works!

See ya next time!

This is probably the most I will ever pretend

Sat, 30 Aug 2025 00:00:00 GMT

Right now, I’m still on maternity leave, with my 4 month old and my 2.5 year old in tow. My toddler is getting chattier by the day, and I actively watch her imagination go wild as we play “kitchen” or play “let’s wait for the bus” or play “shopping at Costco” or play “the horse has to go poop” (and so on).

It’s honestly kind of tiring to pretend so much, but not necessarily in a bad way. It’s a muscle I haven’t flexed in so long. I’ve had to remember how anything can be anything and how to fake silly voices and emotions. I insert my own humor into it where I can (my favorite lately is that I shout “sing, my angel!” in a deep voice like in Phantom of the Opera, and she has to sing a high note. She has no idea why, but it’s the house rule now) and it’s awesome. It’s like a constant improv class of “yes and”-ing.

It also just hit me that… once my 4 month old gets to a playful age, I will probably pretend less and less as he learns to participate in playing. If we do decide to have more kids, the older two will be able to entertain themselves enough that they will play together probably more than they’ll play with me. Sure, I’ll play with them still (and I cannot WAIT to introduce board games and other things that I find fun as an adult), of course. But this moment in time is the most I will probably ever play pretend, for hours on end, for days on end.

So, as tiring as it is, I’m going to savor it as much as I can.

Ductts Build Log

Thu, 21 Aug 2025 00:00:00 GMT

I built and released Ductts, an app for tracking how often you cry! I built it with React Native and Expo (both of which were new to me) and it was really fun (and challenging) putting it together.

Cassidy, are you good?

Yes! I should have anticipated just how many people would ask if I’m okay. I am! I just like data.

The app

Here’s a silly video I made of the app so you can see it in action first!

The idea

The concept of Ductts came from my pile of domains, originally from November 2022 (according to my logs of app ideas, ha). I revisited the idea on and off pretty regularly since then, especially when I went through postpartum depression in 2023, and saw people on social media explain how they manually track when they cry in their notes apps for their therapists.

I had a few different name ideas for the app, but more than anything I wanted it to have a clever logo, because it felt like there was a good opportunity for one. I called it crycry for a while, CryTune, TTears (because I liked the idea of the T_T emoticon being embedded in the logo), and then my cousin suggested Ductts! With that name I could do the T_T design idea, and I thought it might be a fun pun on tear ducts and maybe a duck mascot.

Turns out ducks are hard to draw, so I just ended up with the wordmark:

Building with React Native and Expo

I really wanted this app to be native so it would be easy to use on a phone! I poked around with actually using native Swift, but… admittedly the learning curve slowed me down every time I got into it and I would lose motivation.

So, in a moment of yelling at myself to “just build SOMETHING, Cassidy” I thought it might be fun to try using AI to get me started with React Native! I tried a0 at first, and it was pretty decent at making screens that I thought looked nice, but at the time when I tried it, the product was a bit too immature and wouldn’t produce much that I could actually work with. But, it was a good thing to see something that felt a bit real!

So, from there, I started a fresh Expo app with:

npx create-expo-app

I definitely stumbled through building the app at first because I used the starter template and had to figure out which things I needed to remove, and probably removed a bit too much at first (more on that later). I got very familiar with the Expo docs, and GitHub Copilot was helpful too as I asked about how certain things worked.

Features

In terms of the “order” in which I implemented features, it went like this:

Setting up the feed with mock data
Adding a header that had the app logo in the upper left, then action buttons on the right for logging a cry, looking at your stats, and updating your tags
Adding local saving to save the app’s entries across sessions
Implementing modals for all of the action buttons
- Logging a cry needed a date/time picker, an intensity marker, a selfie option (which I implemented later), and a description
- Crying stats needed frequency, most-used tags, and intensity distribution
- Settings needed a form for updating the tags
Adding an import/export option, added that to the settings modal
Realizing modals are not very mobile-y and turned the “logging a cry” part into a more page-like structure, and moved the button to the bottom of the page, and turned the other action buttons into drawers
Adding a filter/sort drawer to the top of the feed
Adding the ability to edit and delete cries, turning that into a swipe-able drawer
Adding a “greeting” part to the header with the user’s name instead of just plopping the logo there
Adding a setup page for a user to add their name and initial tags
Adding in accessibility text-sizing adjustments
Configuration of the splash screen and icons

And peppered throughout all of this was a lot of styling, re-styling, debugging, context changes, design changes, all that jazz. This list feels so small when I think about all of the tiny adjustments it took to make drawers slide smoothly, gestures move correctly, and testing across screen sizes.

Libraries and packages

There’s a few notable libraries and packages that I used specifically to get everything where I wanted:

expo-router: for the main “startup” page and then the rest of the app (I didn’t need this, I could have made everything just one page, in retrospect)
expo-document-picker and expo-file-system: for saving and pulling CSVs of tears
expo-image-picker and expo-media-library: for saving and using crying selfies, and creating an album in which all the selfies will be saved
@react-native-community/datetimepicker: the picker for dates/times when you cried (that little drawer I’m pretty proud of for picking a time quickly)
react-native-reanimated: for smoother animations across the app, this part took a long time to learn to get right, but feels really good now
@react-native-async-storage/async-storage: for saving everything locally to the phone, rather than to the cloud
react-native-gesture-handler: for swiping on cries in the feed to edit or delete

Building it properly

I learned a lot about how Expo does magic with their Expo Go app for testing your apps.

Expo software developer Kadi Kraman helped explain it to me best:

A React Native app consists of two parts: you have the JS bundle, and all the native code. Expo Go is a sandbox environment that gives you a lot of the native code you might need for learning and prototyping. So we include the native code for image, camera, push notifications and a whole bunch of libraries that are often used, but it’s limited due to what is possible on the native platforms.

So when you need to change things in the native-land, you need to build the native code part yourself (like your own custom version of Expo Go basically).

One of the things I really wanted to implement was an animated splash screen, and y’all… after building the app natively, properly, about a million times, I decided that I’m cool with it being a static image. But, here’s the animation I made anyway, for posterity:

So many things are funky when it comes to building things natively, for example, how dependencies work and what all is included. There are a handful of libraries where I didn’t read the README (I’m sorry!!!!) and just installed the package to keep moving forward, and then learned that the library would work fine in Expo Go, but needed different packages installed to work natively. Phew. Expo Router is one of them, where again, if I had just read the docs, I could have known that I shouldn’t have removed certain packages when using create-expo-app. This is actually what you need to run if you want to install expo-router:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

My bad.

Kadi once again came in clutch with a great explanation:

The reason this sometimes happens is: Expo Go has a ton of native libraries pre-bundled for ease of development. So, even if you’re not installing them in your project, Expo Go includes the native code for them.

For a specific example, e.g. this QR code library requires react-native-svg as a peer dependency and they have it listed in the instructions. However if you were to ignore this and only install the QR code library, it would still work in Expo Go, because it has the native code from react-native-svg pre-bundled.

But when you create a development build, preview build or a production build, we don’t want to include all the unused code from Expo Go, it will be a completely clean build with only the libraries you’ve installed explicitly.

The Expo Doctor CLI tool saved my bacon a ton here as I stumbled through native builds, clearing caches, and reinstalling everything. Kadi and the Expo team actually made a PR to help check for peer dependencies after I asked them a bunch of questions, which was really awesome of them!

Shipping to app stores

Y’all shipping native apps is a horrible experience if you are used to web dev and just hitting “deploy” on your provider of choice. I love web development so much. It’s beautiful. It’s the way things should be.

But anyway, App Store time. I decided to just do the iOS App Store at first because installing the Android Simulator was the most wretched developer experience I’ve had in ages and it made me want to throw my laptop in the sea.

Resources that helped me

Kadi (I love you Kadi) had a list of great resources for finalizing apps:

TL;DR: Build your app, make a developer account, get 3-5 screenshots on a phone and on a tablet, fill out a bunch of forms about how you use user data, make a privacy policy and support webpage, decide if you want it free or paid, and fill out forms if it’s paid.

Building my app properly

Y’all… I’m grateful for the Expo team and for EAS existing. Their hand-holding was really patient, and their Discord community is awesome if you need help.

Making graphics

Making the screenshots was easy with Expo Orbit, which lets you choose which device you want for each screenshot, and I used Affinity Designer to make the various logos, screenshots, and marketing images it needed.

Setting up payments

I decided to make the app just a one-time $0.99 purchase, which was pretty easy (you just click “paid” and the amount you want to sell it for), BUT if you want to sell it in the European Union, you need to have a public address and phone number for that. It took a few pieces of verification with a human to make that work. I have an LLC with which I do consulting work and used the registered agent’s information for that (that’s allowed!), so that my personal contact info wouldn’t be front-and-center in the App Store for all of Europe to see.

The website

The website part was the least of my worries, honestly. I love web dev. I threw together an Astro website with a link to the App Store, a Support page, and a Privacy Policy page, and plopped on my existing my domain name ductts.app.

One thing I did dive deep on, which was unnecessary but fun, was an Import Helper page to help make a Ductts-compatible spreadsheet for those who might already track their tears in a note on their phone. Making a date converter and a sample CSV and instructions felt like one of those things that maybe 2 people in the world would ever use… but I’m glad I did it anyway.

It’s alive!

Finally, after getting alllll of this done, it was just waiting a few days until the app was finally up on the App Store, almost anticlimactically!

While I waited I made a Product Hunt launch page, which luckily used all the same copy and images from the App Store, and it was fun to see it get to the #4 Health & Fitness app of the day on Product Hunt, and #68 in Health & Fitness on the App Store!

I don’t expect much from Ductts, really. It was a time-consuming side project that taught me a ton about Expo, React Native, and shipping native apps, and I’m grateful for the experience.

…plus now I can have some data on how much I cry. I’m a parent! It happens!

Download Ductts, log your tears, and see ya next time.

Making a customizable wooden phone for my toddler

Mon, 04 Aug 2025 00:00:00 GMT

So, I know that I shouldn’t be on my phone as much in front of my toddler but… I do look at my phone. And she wants one. Lately she’d been playing with a pack of gum and pretending that it’s a phone, and I thought… what if I made her one instead?

I got to sketching in my notebook, then eventually on my computer, to come up with a concept for a laser-cuttable baby phone that kind of felt like a tape recorder, where you could insert different “screens” depending on what she wanted to do on the phone. Yes, reader, I invented apps.

The shape came out like this, ultimately:

The leftmost rounded rectangle is the “back” of the phone, the middle one is the top layer, a “window” of sorts, and then the rightmost is the middle layer, where the “U” shape would be glued between the other two layers, and the fat “T” shape would be the screen that I could slide in and out. I made the phone to be 4 inches by 2.5 inches, which would fit in a little toddler hand, but not too small for an adult one (pretty sure I had some old phones in the mid-2000s that were smaller than that).

With these shapes in mind, I could then focus on just designing different “app” screens. The ones I use in front of her the most are video calls, texting, and watching videos.

It was really fun doodling these and customizing them to what she likes.

The video call is with a set of potatoes because I made her a Snapchat-potato-filter video once that she thought was hilarious, so naturally video calling potatoes would be funny.
The video frame one is of some camping stuff, because she thinks campfires are fascinating and always asks to see Daniel Tiger camping and cooking outside.
The texting one has the texting conversation say “I love you” in the three languages we’re teaching her, English, Korean, and Spanish!

You might notice the colors of the drawings and shapes. After laser cutting enough times, I’ve learned how to optimize my own files so I always make black lines to be my “cutting” lines, blue to be my engraving shapes, and red to be my “scoring” (or tracing) lines (basically a thin engraving where the laser follows the path rather than going layer by layer).

After making these… I realized I had a whole lot more space on my sheet of wood, enough to make two phones and a whopping 10 screens! I ended up adding in:

Musical notes
The alphabet
A tea party “game”
A puppy “game”
A kitten “game”
A lock screen of numbers
A stock market app (she likes graphs, ha)

Also, as I was prepping the file a bit more, I realized that the empty “window” frame (the middle rectangle in the first picture) could be used, so I turned that into a little “clean/not clean” indicator for our dishwasher! I also added a pretend camera and fruit logo onto the phone back so that it could feel a bit more real there, too.

And then… it was laser time! The library has a laser cutter, so after a very long ~2 hour cut and engraving session and some glue, the phones and screens were aliiiiive! I had to tweak some settings which resulted in some screens being darker than others, but my baby does not care, so I choose not to.

Here’s the final results!

This ended up being a bigger and more time-consuming project than I originally intended, but I’m really happy with how it turned out!

As an aside… literally everyone I’ve shown these phones to has said I should start a business and sell them. It could be fun! But also… sometimes I just don’t feel like capitalism-ing. Sometimes I just want to make things for the joy of making things. No hate to those people, of course. But I am content with the fact that my toddler is happy, and thus I am happy.

If you do want to make these for yourself though… maybe I could be convinced to prep a file for you, as a treat. Maybe. Ugh, so much work. It’s a maybe.

Adios!

Making a faded text effect in (mostly) CSS

Tue, 29 Jul 2025 00:00:00 GMT

I watched a video recently, that had text fading away. I thought it’d be cool to recreate that type of effect in CSS!

The final output:

See the Pen Fading away text effect by Cassidy (@cassidoo) on CodePen.

Final result

The CodePen embedded above describes what’s happening, but for posterity, here’s the same information but with some more details:

The fade() JavaScript function splits all of the characters in an element that has the class .fade-away. Then, it wraps each character with a <span>. Each of those <span>s has a class that assigns it a CSS variable based on its index:

<span style="--i:${letterIndex++}; --total:${total};">${char}</span>

Then, with the power of CSS calc(), it applies a blur filter and opacity based on those --i and --total variables!

This was fun, hope you liked it!

That Windy City Keeb Meet 2025 recap

Sun, 27 Jul 2025 00:00:00 GMT

This week I went to and spoke at the latest Chicago mechanical keyboard meetup, called That Windy City Keeb Meet 2025!

I hadn’t been to a keyboard meetup in a long time! I used to help organize the Seattle meetups back pre-2020, and really love the community, but between moving cities and life changes, it’s just been hard to get to one again. The last event I went to was during the pandemic in winter 2021, where a handful of us met in a piano store and showed our vaccination cards to get in. It feels like a lifetime ago!

Anyway, it was a blast finally getting to go to one of these meetups again. I spoke on a panel about keyboard design with Andrew of Bowl Keyboards and Jack of Pikatea, watched a talk about switch variances (all talks will be uploaded to the community YouTube channel soon), won a fun keycap raffle prize, bought some merch from sponsoring vendors, and saw SO many cool keyboards. I also got to meet some folks who I had only spoken with online before, which is always a great time!

My little display featured my Micro Journal as well as a couple of my other boards, all with keycaps I designed!

Again, I’m so happy I was able to make it to this meetup. I can’t wait for the next one, and if you’re in town next time, you should check out Chicago’s keyboard scene!

Also, in case you’re interested in things I designed, here’s some buy links:

Have GitHub Copilot see your diff (and other cool tricks)

Tue, 22 Jul 2025 00:00:00 GMT

I learned today that you can have GitHub Copilot pay attention specifically to the current changes in your repository!

I had been working on a branch for a few days on a project, and realized I broke something along the way. I had been working just long enough that scouring the git diff would probably take a while, but I also wanted to parse a bit more about what I had specifically done in certain files.

And thus, I learned about #changes! When you use GitHub Copilot (specifically the chat mode, I personally use VS Code), you can use #changes as a variable in your message to list out your current changes before you commit.

So, for example you can say:

Summarize all of my #changes so far

or, how I used it…

I broke the Feed component. Which files touch the component currently in #changes?

Kinda nice! If you want to check out the docs, there’s a bunch of variables you can use too, like:

#usages as a combination of “Find All References”, “Find Implementation”, and “Go to Definition”
#selection for the current editor selection as context
#searchResults for the results from your latest search as context
#fetch to get the content of a web page

(and mooooore)

Hope this was helpful!

Using personal instructions in GitHub Copilot Chat

Thu, 17 Jul 2025 18:47:27 GMT

When you use GitHub Copilot online, you can add personal instructions to your responses so that it always responds in a certain way. For example, you could say, “always respond to me in Spanish,” or “all code samples should be given to me in JavaScript.”

I’ve used these custom personal instructions for a few different cases, mostly for helping me with programming languages or technologies I don’t know as well (obligatory AI Manifesto mention). There’s also a directory called prompts.chat that I know some friends use for other use-cases!

The personal instructions I use the most are from a prompt that I’ve iterated on a few times:

You are a professional developer advocate. When you write, you speak in a friendly tone. You don’t add extra emojis or em dashes. You write to developers as if they are your buddy. You are technical and aren’t afraid of including code samples. Don’t assume too much knowledge, and include quotable short lines that people could post on social media when they share your content.

I really like the responses I get with this prompt. It doesn’t really change the answers I expect in any way, but the little taglines I get from it are cute, the code samples are concise, and the responses read like a friendly blog post.

Here’s an example conversation with it!

Anyway, if you’d like to add personal instructions, you can go to github.com/copilot and click the ... menu to find where to add them. Here’s the docs if you want more details!

Tools using tools

Sun, 13 Jul 2025 00:00:00 GMT

I posted about my project Better Security Questions recently and several people mentioned that instead of actually answering security questions, they generate a random answer in their password managers and use that random answer to log in. Their password tools are now handling all of the logging-in brainpower, rather than the human needing to.

Similarly, as people build new services and APIs and tools, we as an industry aren’t just optimizing for humans knowing how things work or remembering things anymore, but for AI agents and tools to use them.

We have two types of users to build for now, whether we like it or not: humans and machines. Or agents, or assistants, or whatever you want to call them.

Developer experience (DevEx) does still matter, because professional developers ultimately still (for now? Ugh) are making the choices of technologies and tools and architecture. But, now AI experience (AIEx? LLMEx? TexMex?) matters too now, at the rate that we’re going.

How humans and machines find you

I think a lot about this from a content perspective.

With the humans in mind, developer advocates/devtool companies/content engineers/technical content creators (and so on) need to publicly “use all parts of the buffalo” and turn a demo into an open source project, a podcast episode, social media threads, a YouTube video, a blog post, a whitepaper (and so on, again) to cast a wide net for SEO and growth. You have to meet the people where they are, on all the platforms and all the things.

With the machine in mind, you now need to “use all parts of the buffalo” for a different purpose: to seed training data, improve model recall, and ease differentiation from other tools. You have to add things like an llms.txt file or prompting assistance, beyond the content.

How this changes our roles

I think as technical people, we do need to accept that even though it’s early, all signs are pointing to AI being here to stay (and hopefully become a bit more “invisible” than it is right now in our newsfeeds).

As we build, we need to think about how we’ll shape our own developer experience, and the developer experience of other humans. Chances are, a human using your tool/API/utility/library/etc. will have some kind of AI assistant. The humans will lead and they will delegate, and optimizing their experience for both is going to matter.

People will use tools to use tools… and sometimes those people are tools. I’d like to see a machine do an incredibly deep and objectively funny pun like that to end a blog post. HA.

I (don't?) want to say yes to everything

Wed, 25 Jun 2025 00:00:00 GMT

Whenever I release a project publicly, people always have feature requests for it. And because most of my projects are open source, I can usually say yes to building it, or someone can implement said feature, and I can choose to say yes to how they built it.

When I released PocketCal, people wanted more event groups. When I released W-9 Crafter, people wanted it to also generate W-8 forms. When I released Jumblie, people wanted dark mode and a puzzle archive. And so on and so on!

I often genuinely want to say yes to every feature request. Sometimes they’re really great, easy-win ideas and I implement them right away, and sometimes they’re great ideas that… I may never get to, because it’ll just take too long. And also sometimes I just don’t like the idea, ha. I simply can’t say yes to them all, I can’t review every pull request or issue.

The problem with saying yes to everything is that it isn’t… strategic. I don’t mean for like a product strategy (though it could be applied to that), but I mean for a time management one. If you say yes to everything that comes your way, you’re basically letting your inbox (the whole world!) dictate your direction and your time spent, instead of you choosing your direction and time spent.

Anyway, I write all of this to say: be picky with what you say yes to.

And if I don’t say yes right away to your idea, I promise it’s not that your idea is bad, I just have too many project ideas to try out, features to implement, and domain names to use!

Generating open graph images in Astro

Thu, 12 Jun 2025 00:00:00 GMT

Something that always bugged me about this blog is that the open graph/social sharing images used this for every single post:

I had made myself a blank SVG template (of just the rainbow-colored x pattern) for each post literally years ago, but didn’t want to manually create an image per blog post.

There are different solutions out there for this, like the Satori library, or using a service like Cloudinary, but they didn’t fit exactly how I wanted to build the images, and I clearly have a problem with control.

So, I built myself my own solution!

Using Puppeteer for screenshotting

Last year, I made a small demo for Cosynd with Puppeteer that screenshotted websites and put it into a PDF for our website copyright offering, aptly named screenshot-demo.

I liked how simple that script was, and thought I could follow a similar strategy for generating images. My idea was to:

Put my blank SVG template on a webpage
Position some text with a white background on top of the image
Adjust the font size based on the length of the post title
Screenshot it with Puppeteer

And then from there, I’d do this for every blog title I’ve written. Seemed simple enough?

Reader, it was not. BUT it worked out in the end!

My first strat: A page per blog post

Initially, I set up a fairly simple Astro page with HTML and CSS:

// [og].astro
---
let text = "Hello, world!"
---

<div class="svg-container">
	<img src="../img/blank-card-opt.svg" class="svg-image" />

	<div class="svg-text-group">
		<div class="svg-overlay-text" id="title">{text}</div>
		<div class="svg-overlay-text-sub">a blog post by cassidoo</div>
	</div>
</div>

<style>
  ...
</style>

With this, I was able to work out what size and positioning I wanted my text to be, and how I wanted it to adjust based on the length of the blog post title (both in spacing and in size). I used some dummy strings to do this pretty manually (like how I wanted it to change ever so slightly for titles that were 4 lines tall, etc.).

Amusing note, this kind of particular design work is really fun for me, and basically impossible for AI tools to get right. They do not have my eyes nor my opinions! I liked feeling artistic as I scooted each individual pixel around (for probably too much time) and made it feel “perfect” to me (and moved things in a way that probably 0 other people will ever notice).

Once I was happy with the dummy design I had going, I added a getStaticPaths() function to generate an HTML page for every post, so that Puppeteer could make a screenshot for each of them.

// In the frontmatter of [og].astro
import { getCollection } from "astro:content";

export async function getStaticPaths() {
	let posts = await getCollection("posts");

	return posts.map((post) => {
		return {
			params: { og: post.id },
			props: { text: post.data.title },
		};
	});
}

const { text } = Astro.props;

My next (better) strat: A single page template

With the previous strategy, everything worked well. But, my build times were somewhat long, because altogether the build was generating an HTML page per post (for people to read), a second HTML page per post (to be screenshotted), and then a screenshot image from that second HTML page. It was a bit too much.

So, before I get into the Puppeteer script part with you, I’ll skip to the part where I changed up my strategy (as the kids say) to use a single page template that accepted the blog post title as a query parameter.

The Astro page I showed you before is almost exactly the same, except:

It didn’t have to be a dynamic route anymore, so instead of the variable name [og].astro I changed it to just open-graph.astro
It didn’t need the frontmatter anymore, because it wasn’t rendering any pages or text at build time
It added a script for getting text from the query parameters

The new script on the page looked like this, which I put on the bottom of the page in a <script> tag so it would run client-side:

// open-graph.astro, formerly [og].astro
function decodeHtmlEntities(text) {
	const textarea = document.createElement("textarea");
	textarea.innerHTML = text;
	return textarea.value;
}

const params = new URLSearchParams(window.location.search);
const rawTitle = params.get("title") || "Untitled";
const title = decodeHtmlEntities(rawTitle);
document.getElementById("title").textContent = title;

(That decodeHtmlEntities function is an interesting trick I learned a while back where textarea tags treat content as plaintext to avoid accidental or dangerous script execution, and their value gives you decoded text without any HTML tags. I had some blog post titles that had quotes and other special characters in them, and this small function fixed them from breaking in the rendered image!)

Now, if you wanted to see a blog post image pre-screenshot, you can go to the open graph route here on my website and see the rendered card!

The Puppeteer script

In my src/scripts/ folder, I have a script that looks mostly like this:

const puppeteer = require('puppeteer');
const fs = require('fs');
const posts = [...]; // these blog titles and slugs came from a script I wrote separately
const __dirname = path.dirname(fileURLToPath(import.meta.url));

(async () => {
	const templatePath = path.join(__dirname, "../dist/open-graph/index.html");
	const browser = await puppeteer.launch();
	const page = await browser.newPage();

	for (const post of posts) {
		const url = `file://${templatePath}?title=${encodeURIComponent(post.title)}`;
		await page.goto(url);
		await page.setViewport({ width: 1200, height: 630 });
		await page.screenshot({ path: `./public/og-images/${post.id}.png`, type: "png" });
	}

	await browser.close();
})();

This takes the template (templatePath), launches a browser, navigates to the template page, loops through each post, sizes it to the standard Open Graph size (1200x630px), and saves the screenshot to my designated output folder.

From here, I added the script to my package.json:

"scripts": {
	"build": "astro build && node src/scripts/og-generation.js",
	"og": "node src/scripts/og-generation.js"
// ...
}

I can now run npm run og to render the images, or have them render right after astro build!

This is a GitHub Gist of the actual full code for both the script and the template!

Putting it all together!

There was a lot of trial and error with this method, but I’m happy with it. I learned a bunch, and I can finally share my own blog posts without thinking, “gosh, I should eventually make those open graph images” (which I did literally every time I shared a post).

If you need more resources on this strategy in general:

How Emma Goto does her Astro social cards (I did all this work and then stumbled upon her incredibly similar solution to what I did + very helpful post, written just 3 months ago. Sigh. This would have been useful, ha, but c’est la vie!)
The template and script I wrote, in case you missed it
My open graph page that I now use to preview images
Making Puppeteer work at build time on Netlify

I hope this is helpful for ya!

Making Puppeteer work at build time on Netlify

Wed, 11 Jun 2025 00:00:00 GMT

I wrote a Node script recently that installed Puppeteer, and that script ran at build time for a website I was working on.

When I ran npm run build locally, it worked just fine, but on Netlify, it failed silently.

When I looked at the logs, I found this error:

> Error: Could not find Chrome (ver. 137.0.7151.55). This can occur if either
> 1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or
> 2. your cache path is incorrectly configured (which is: /opt/buildhome/.cache/puppeteer).
> For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
> at ChromeLauncher.resolveExecutablePath
> (file:///opt/build/repo/node_modules/puppeteer-core/lib/esm/puppeteer/node/BrowserLauncher.js:272:27)
> at ChromeLauncher.computeLaunchArguments (file:///opt/build/repo/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:85:24)
> at async ChromeLauncher.launch (file:///opt/build/repo/node_modules/puppeteer-core/lib/esm/puppeteer/node/BrowserLauncher.js:48:28)
...

After a bunch of trial and error and searching online for solutions I found two ways that worked:

The Chromium integration/build plugin

Install the Chromium integration in the Netlify UI, or in your netlify.toml:

[[plugins]]
package = "netlify-plugin-chromium"

The integration hooks into installation stage of my site’s build, and checks if Chromium is installed (and if not, installs it and adds a CHROME_PATH environment variable), and installs Chromium binaries if needed.

After hitting the “Enable integration” button, you can trigger a new build, and voilà, the Chromium missing error should be gone!

Via `package.json`

You can also install Chrome via a prebuild script in your package.json.

"scripts": {
  "prebuild": "npx puppeteer browsers install chrome",
	// ...
}

I personally noticed that I ran into some caching issues with the first option, but it might depend on your setup. Both of these options should work for serverless functions, too, if that’s where you’re running into the problem!

This was a really nice solution to not have to change any of my code to get it working! Hopefully this is helpful for ya!

Building for a physical scavenger hunt with Astro, Tally, and Netlify

Mon, 09 Jun 2025 00:00:00 GMT

Recently, a friend of mine who works for The Alinea Group told me about a project they wanted to run for the restaurant’s 20th anniversary popup event. Their CEO had posted the following:

Chef Achatz and I are looking to build a sleek site with a few requirements:

Store contact information

Several splash pages with a single image, music playing

If/then flow to unlock information

Admin view (can be in Google Sheets) to see where people are on the workflow

Very tight turnaround

In return:

This site will go viral. I expect tens of thousands of users within hours.

I will give you the best meal of your life at The Alinea Group (must be in Chicago).

We can credit you or your firm in our social posts.

Now, normally I would just keep scrolling past a post like this, because I think you should get paid for your work and getting a shout-out on social media is not getting paid.

That being said… I wanted fancy food.

So, I told my friend I’d build their site for two meals at Alinea! Ha HA!

The specs

At first, this seemed like a pretty dang easy project. The website was supposed to be for a real-life scavenger hunt, where people would get a clue from a social media post to find the website URL itself, and then after solving certain puzzles in real life (like finding clues in books and around the city where it was based) they would insert their solutions and get more clues over time. There would be three total puzzles, with their own sets of clues and winners, and winners would get a fancy meal at one of the restaurant popups they were promoting.

The pages would take in a user’s email and their solutions. Clues were combos of text, images, and sounds, and once they got answers done correctly, they would move on to the next clue.

Building the site

I actually used GitHub Spark at first to put together a prototype, and it worked pretty well. It generated a small React app that took in the clues and rendered the next relatively quickly. I built a more “real” version in React and Astro soon after.

But, I quickly ran into complexity beyond accepting emails and solutions. The people running the scavenger hunt wanted:

To be able to see how far along people were getting (in case they needed to reveal more clues)
To be able to stop people from skipping clues as much as possible/cheating
To make quick copy edits and image swaps as often as possible

Adding in an Airtable or Google Sheets backend was not awful, but making it quick for anyone non-technical to make edits was going to be a pain (though it WAS fun teaching them what GitHub was and seeing their minds blown when they learned what open source software is).

So, I went a bit more no-code, with Tally! I really like Tally for forms and surveys. And what is a scavenger hunt, if not a series of forms?

Tally lets you enable conditional routing in forms, add custom CSS, add whatever media you want, enable partial responses, and also embed forms into partial or full page views on a website. It satisfied my requirements for collecting and tracking responses, and for the actual logic of the hunt itself!

Combining Tally with Astro, hosted on Netlify, was a great solution:

Netlify DNS and Netlify Redirects allowed me to configure the multiple domains each puzzle had (for example, one URL was named after a phone number that you had to call, one was named after a menu item, etc), and add fallback domains to redirect people who might cheat or make mistakes.
- I was also able to quickly toggle “off” a given URL with the redirects, too, when certain puzzle “phases” were finished.
For any clue submissions, I had a Tally form set up per puzzle.
Astro handled all routing, with a Page component hosting each Tally form and various other fallback URLs for incorrect answers.
Astro also let me build plain static pages where scavenger hunters had to find physical clues, rather than submit something digitally.
Tally’s custom CSS let me copy the CSS across both Tally and Astro, so everything looked uniform.
I was able to add analytics to the Astro page base layout to see visitor counts across the site.

This is generally what the architecture looked like, if you’re a more visual person:

How it went

Overall, it was really cool to see how hard folks worked to solve these puzzles to win a meal. The world of fancy food to me is neat, but outside of watching The Bear, I don’t know a lot about it.

People were so excited about the puzzles that they actually traveled and rented cars to go around NYC and look for clues, and there was actual sabotage (!) involved when people tried to stop others from advancing in the games. The attempted cheating was wild to see, too, and I had to obfuscate more on the frontend than I expected to. Some people just wanted to get face time with Chef Achatz, to see if they could learn certain techniques from him.

I admit, if I weren’t doing this as a favor to my friend, I wouldn’t have taken on this project, even though I’m very excited about the fancy meals coming my way. I probably could have gotten paid real money and just bought the meals, and then some. But, it was neat playing with these technologies, and getting to know a niche community!

Baby sayings

Sat, 07 Jun 2025 00:00:00 GMT

The things that my 2-year-old says are so dang cute, and also a real reflection of how I speak.

I’ve been very careful with the words I use when exclaiming, and when I’m frustrated, and in general I’ve been trying to keep my words and phrasing on the funny side. It’s objectively hilarious when a baby says, “how dare you!” when she’s upset, or “ooh la la” when she puts on sunglasses, or “hey cutie” when she wakes up in the morning, or when she sings partial lyrics to Since U Been Gone. We’re also a multilingual household, so the combination of languages amongst all of her funny phrases are, put simply, a hoot.

What has really warmed my heart though is when I hear her playing with her stuffed animals and pretending to be “their grown-up” in the room. As I was cleaning something up and exhausted from running around all day yesterday, I heard her playing mostly quietly, but then suddenly saying, “Good job bear, you did it! You’re so great, I’m so proud of you!”

Moments like that keep me going. I struggle a lot these days with feeling productive enough, strong enough, or just… good enough to be a mom. I’m grateful to have small bits and pieces like this to let me know that I’m doing at least one thing right.

PocketCal Build Log

Mon, 02 Jun 2025 00:00:00 GMT

I built PocketCal over the past couple months, and it was a really interesting learning experience!

What is PocketCal?

PocketCal is a free, open-source web app that lets you select dates on a calendar, and share the calendar via the URL. No sign-up needed, no saving things, it’s all just a link.

When you open the app (it works better on desktop, but works on mobile, too), you can click dates on the calendar to add them to a group. You can name groups of dates, add more groups, and there’s some other small customizations. Then, once you’re happy with it, you can share the URL to share your entire set of dates with anyone you’d like!

Here’s an example of it in action!

How’d you come up with this?

So, confession, I stole the idea. Back in early 2020, when I was recording the Stack Overflow podcast, I became aware of a tech consulting company called Postlight, founded by one of my fellow podcasters, Paul Ford. Postlight built a ton of cool little tools, and fast forward to today, they’ve been acquired and most of their little tools have been lost to internet history.

One of their tools was called TinyMonth, which… did exactly what PocketCal does. I really liked it for sharing dates, but I couldn’t use it anymore, and couldn’t find anything else like it out in open source or otherwise.

So, I knew exactly what I wanted… I just had to build it. I had all of the product requirements in my head, had a name for it, but procrastinated on actually building the tool for a while.

Enter… AI

I’m admittedly a bit of an AI skeptic, and have an AI Usage page here on my website to explain that I do use AI as an assistant for code and stuff, but not for much else.

Yes, yes, I know I work for GitHub and talk about GitHub Copilot for my actual job, and do like it, but I don’t love the “AI will replace us!!” mentality. That being said, because it’s my actual job, I felt I should give the whole “vibe coding” concept a try.

Most of my attempts to let AI do all the coding work for me were pretty unsuccessful in existing projects. They would often re-write too much, or I wouldn’t be sure which model to try, or it just struggled with too much context.

With PocketCal, I thought that since I know exactly what I want my app to look like, and I know exactly the requirements I wanted to include, and I would be starting from scratch… perhaps I could try GitHub Copilot agent mode to see where it would get me.

This is the prompt that I used:

Create an app called PocketCal. It shows a 12-month time range on the right, starting from the current month, and it makes it easy to click and drag and extend ranges across multiple event groups.

The sidebar on the left allows you to add as many event groups as you like (which you can name, and customize the color), and when an event group is selected, you can drag date ranges for that group on the calendar. There are also options for the start date of the 12 month range, the ability to include weekends, and the ability to toggle on or off today’s date. If you have dates selected and you move the date range, it will keep those dates selected (unless they are no longer in the 12 month range).

Your calendar data is stored in the shareable URL. We don’t store the data on a server and have no record of a calendar. Everything about the app state is saved in the URL and can be copied.

This should be a single page app built with React, fully client side.

This… generally worked pretty well. I used Gemini 2.5 Pro as the model, and had to do some massaging as it went. When I first ran this, it scaffolded the app well, but didn’t actually implement most of the components, it just had placeholders everywhere. I had to add a lot of Please actually implement the Calendar component and It looks like you made an infinite loop, fix that (and so on) prompts. I ended up having to switch to Claude 3.5 Sonnet after a certain number of those “fix it” prompts because Gemini seemed to get a little confused in the context window, too.

Even though it took some effort to get me to a workable place, I was pleasantly surprised how far this got me! It wasn’t the complete working app that I wanted, and not mobile-friendly either, but it kickstarted my efforts on the project. A lot of times, getting started on a project is the biggest mental lift for me, so removing that lift was pretty motivating.

Enter… my brain

That being said, some of the code was ugly and I had a lot of fixes to make. I think I can safely say that AI got me about 70% of the way to a working app, which was great, but particularly for UI elements and their changes, I had to do them all myself.

There were a few times where I actually liked the UI that the app came up with, but if I tried prompting away the work to update it, the entire app would break, repeatedly. If you look at the commits in the repo itself, you can see how most of my commits were changing the look and feel, updating mobile styling, improving accessibility and keyboard navigation, and adding icons and graphics.

I also found that the AI models would add so many unnecessary comments. I normally am very pro-comments, so you can go back into a codebase later and understand what’s going on. But in this case… this was an actual code block it gave me that I had to edit:

.event-group-item button {
	margin-left: 5px;
	padding: 0; /* Adjust padding */
	font-size: 0.8em;
	background-color: transparent; /* Transparent background */
	border: none; /* No border */
	cursor: pointer; /* Pointer cursor */
}

This is just silly. Repetitive! Useless! Why!

Anyway.

Updating the codebase after using AI to build most of it felt like untangling a legacy codebase, which I didn’t mind. It was pretty fun. Some parts of it I was able to say, “wow, thank goodness it handled this logic, because I did not want to do that,” and some parts I was like, “you absolute fool, what on earth are you thinking??” Which… pretty much tracks for the code I write even without AI, ha.

It’s allliiiiive!

If you want to use PocketCal yourself, you can check it out at PocketCal.com and share your conference schedule, plan trips with your friends based on their availabilities, coordinate on-call rotations, quickly show when your team has vacations planned… the world’s ya oystah.

Or, if you want to look more closely at the code, add issues, or support the project, it’s on my GitHub!

What does it mean to flatten an array?

Sun, 01 Jun 2025 00:00:00 GMT

When you have an array that has multiple dimensions, it might be referred to as a 2D or 3D (etc) array. If you wanted to turn said array into a 1D array, that is when you flatten it.

More simply, flattening an array refers to the process of converting a multidimensional array into a single dimensional array.

Examples of array flattening

If you want to see some examples of this, here’s some arrays:

[1, [2, [3, [4]]]

[1, [2, 3], 4]

[1, 2, [3], [4]]

[[1, 2], [], [3, 4]]

Every single one of these arrays would be flattened into [1, 2, 3, 4]!

When and why would I flatten something?

Ultimately, flattening is a way to simplify data.

If you want to see a real-world example, you can check out how I set up gathering tags on my blog!

const allTags = posts
  .map((post) => {
    const postTags = post.data.tags;
    let allTags = [];

    if (postTags?.length > 0) {
      postTags.forEach((tag) => {
        if (allTags?.indexOf(tag) === -1) {
          allTags.push(tag);
        }
      });
    }
    return allTags;
  })
  .flat(1);

This is what’s happening:

For each blog post post, it checks if post.data.tags exists and has tags
It makes an array allTags for each post, and pushes unique tags into it, and returns that array
After mapping, we have an array of arrays (one array of tags per post)
.flat(1) merges all of those arrays into a single array

Here’s an example input:

const posts = [
  { data: { tags: ["js", "react", "web"] } },
  { data: { tags: ["react", "css"] } },
  { data: { tags: ["node", "js"] } },
  { data: { tags: [] } },
  { data: { tags: ["css", "web"] } },
];

After mapping and flattening, we’d get this:

["js", "react", "web", "react", "css", "node", "js", "css", "web"];

With this flattening, you could more simply count how many posts use a certain tag, or look at how many unique tags there are, or manipulate it in some other way (in my own blog, I make a Set out of the array to just get all unique tags).

Here is the real-life code if you’d like to see it in context!

This might seem like a simple concept, but it’s a handy one.

If you’d like to do this in JavaScript here’s the documentation. The flat() function (as well as flatMap()) was introduced in ES2019 (so browser compatibility is pretty good unless you reeeaally need Internet Explorer), but you can also achieve the same results with reduce(), concat(), and some other functions.

Byyyye <3

Styling the icon for HTML date and time types

Wed, 21 May 2025 00:00:00 GMT

There are several HTML <input> tags with types for dates and times:

When you use these inputs in a supported browser, you might notice that there’s a fun little clock or calendar icon in them, supplied by the browser itself.

See the Pen HTML date/time inputs and their icons by Cassidy (@cassidoo) on CodePen.

I was working on a project the other day, and noticed that sometimes the icon wasn’t actually showing up if my inputs were in “dark” mode. It turns out that the icon can’t be styled with your typical background or color attributes in CSS, so it just… disappeared.

See the Pen HTML date/time inputs and their MISSING icons by Cassidy (@cassidoo) on CodePen.

After lamenting to the heavens about being abandoned by a browser-supplied icon and accepting the feeling of deep betrayal, I realized that the icon probably had a way to style it, and it does!

Use `::-webkit-calendar-picker-indicator`

When you select an <input> and add on ::-webkit-calendar-picker-indicator, you can style the icon as if it’s an image!

So you could, for example, add some filters:

input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.5);
}

Or change the opacity:

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
}

Or hide it entirely and use a custom image of some kind:

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

input[type="time"] {
  background-image: url("custom-icon.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

You can play with these examples here!

See the Pen HTML date/time inputs and their styled icons by Cassidy (@cassidoo) on CodePen.

It’s kind of weird to me that I couldn’t find any documentation on this selector, so it might not be the best way to style things, but I also couldn’t find any other options, so… good luck, have fun!

My second c-section experience

Wed, 07 May 2025 00:00:00 GMT

I just had my second baby! I’m still kind of processing it. It has been a whirlwind few days and I’ve had a whole lot of emotions introducing this new tiny human to my first tiny human.

I wanted to share my second c-section experience, because it’s pretty wild how much was the same, and how much was different from my first! Before reading further in this post, I recommend reading my first blog post about how my first c-section went.

Content warning: I’m gonna be talking about surgery, babies, bodies, fluids, shots, the works. If you get queasy reading such things, you should probably stop reading now.

Prepping for the day of, and the procedure itself

Pretty much all of the prep that I had to do (bloodwork, eating, etc) was the same as my first one. The timing was almost the same too, in that I had my procedure at 7:30 on Friday morning, and had to arrive at the hospital at 5:30am to get things started.

They asked nearly all of the same questions as they had before, about my home life and how the baby’s movement had been. It felt like déjà vu, just how similar it all was to before, which made it easier, I think. They kept asking me if I was nervous, and I really wasn’t. I just kept being like “nah… I’m just ready to not be pregnant anymore, and I know this is going to suck, so bring it on,” and I think that set the tone for the day.

Side note: why did I get ANOTHER c-section?

My first c-section was because my baby was breech, which means she was upside down and I couldn’t deliver her normally.

This time around, I had the option for a VBAC (vaginal birth after caesarean). Some folks really push to get to a VBAC (pun!), because it’s more natural and the recovery is (often) easier, and some stick with what they’re familiar with. I admit… I didn’t know what I wanted to do here. I asked advice from everyone I could, and anyone I could find with experience, in addition to my own doctor.

The factors that led to me going for a c-section again:

My baby was pretty big. I was open to a VBAC if he came somewhat early (to prevent my needing to push out a boulder), but he was very much not coming early. I found out later that if we made it to full term, he’d probably be more than 9lbs, and I’m grateful I didn’t have to push that out.
Some of my immediate family members had pretty rough natural birth experiences that led to tearing, injuries, and emergency c-sections. Being in a big-headed family and married to a fellow big-headed fellow, I got very scared.
Familiarity with how recovery would be was a nice-to-have.
Scheduling a c-section meant that I could also schedule childcare for my toddler and coordinate with my family to get everything planned out well.

So anyway, I scheduled a c-section for week 39!

The c-section

Once again, leading up to the procedure was wildly similar to my first one. I got initial meds, I got the anti-nausea shot of gross juice to make sure I didn’t puke on the table, and then it was epidural time.

This time around, there was a resident being trained by an attending physician, so the epidural took longer than it probably should have, which was not comfy. But I gotta say… being very mentally prepared for the surgery this time was a game-changer. After the epidural, it proceeded just like before, but I was way less panicked. Instead of my nervously wondering “what is that poking feeling??” or “when will I feel the cut??” I was mostly gabbing with the doctors about the show Severance. When they brought my husband Joe in (who was armed with animal facts to distract me), he joined in and we truly just… chatted. It was night and day compared to my first one!

Now, because I was relatively chill for this one, including during the heavy pressure point (I talked about it in my previous post, basically it just gets VERY heavy on your chest for a couple minutes as they get the baby out, and it’s pretty intense), they let me stay awake after our baby was out! I got to see him right away and as they were stitching me up and Joe was holding him next to me.

Being awake was cool for that, but also the “stitching back up” experience was super draining. There was a point where my left shoulder and chest were so strained that I asked one of the doctors why they hurt so bad, and it turns out the nerves in your uterus are attached to your left shoulder (who knew?) and that was causing the strain. It felt like I was mid-bench press, but just on my left side. But, the moment my uterus was back together, the strain was gone. So weird!

After about a half hour of stitching me back together, they sent Joe to the recovery room with our new baby, and wrapped me kinda like a mummy to hoist me onto a different bed with wheels to get me out of the operating room. It felt weird that I couldn’t help them move me in any way, because I truly couldn’t feel anything with the epidural (plus I was exhausted), so I was just… watching (and apologizing, ha) while they moved me. Very out-of-body experience.

The aftermath

And then… our baby was here! I was wheeled into the recovery room, and we were there until Monday afternoon (the baby was born on Friday, and keen eyes might notice that we went home a day “early” compared to last time).

Most other things were pretty much the same as last time. Lots of vitals checks for me and baby, not a lot of sleep at all.

BUT, this time around, I have physically healed WAY faster than before. I do think that my being stronger (because I chase and carry a toddler daily) helps, but I also learned that you do just recover faster the second time around. I was able to pee on my own relatively quickly after getting the catheter out, poop while in the hospital, and shuffle a bit around the room before we left.

One thing that was different pain-wise this time was my right shoulder. Yet another thing I didn’t know about: when you don’t fart, your right shoulder hurts? My shoulders were really weirdly full of issues this time around, I tell ya. But anyway, I did have some gas problems this time compared to last time, and my right shoulder was wildly painful to the point of me crying and putting multiple heat pads on it to calm it down. I didn’t listen to my past self and prep with stool softeners or anything for the week leading up to the surgery and I should have.

In terms of breastfeeding, I decided not to do it this time (both because it hurts and because I think it impacted my postpartum depression the first time around). I didn’t actually produce anything for the first couple days post-birth and thought I was going to be “in the clear” without any need to pump, but alas, my milk came in full force on day 3. The lactation consultants in the hospital gave me some good tips on how to dry it up (while still giving our baby what I did produce), and I’m almost done with that, a couple weeks later.

All this being said, we’re on day 12 of our new lives as a family of four! The c-section the second time around went as well as it could have, and we’re in the trenches of figuring out sleeping, eating, handling emotions (from everyone, including me), and all that jazz.

I hope this is a helpful resource to anyone out there! Let me know if I can answer any questions you might have.

End of an era with Stack Overflow

Mon, 14 Apr 2025 00:00:00 GMT

Nearly 6 years ago, I helped Stack Overflow start their newsletter! Over 270 issues later, and we’re closing this chapter of working together. It’s truly the end of an era!

It was the summer of 2019 when the Stack Overflow team slid into my Twitter DMs asking me if I might join them on the podcast, and where we started noodling on the concept of a newsletter. They liked the “vibe” of my personal one, but hadn’t actually put the company one together yet.

We met up in person in NYC, planned out a strategy, talked about tech, and… the rest is history! A few months later, The Overflow was live, the team introduced me on the blog, and we got to writing.

The Overflow started out monthly, then biweekly, and eventually weekly as it gained popularity (and became quite popular once the pandemic hit soon after). Every single week for the past 5+ years, I’ve been gathering links and writing, through major life changes and highs and lows. It’s been a really awesome, consistent thing to keep me accountable and connected to the dev community.

(As a side note, when you’re a project-based part-time contractor, you don’t like… “get” vacation time. Luckily writing the newsletter was low-lift enough that I didn’t worry about it, but imagine literally writing a tech newsletter on your phone in the middle of the ocean on a sailboat. This thing has been written quite literally all over the world!)

On top of writing, I eventually became a regular co-host of the podcast as well! We did a lot there, from a rebrand to an entirely new structure for it. We recorded so many episodes that there was a point where I hit 26 weeks in a row of recording podcast episodes. My yapping simply could not be stopped, and our team was really fun to work with.

The people I’ve been working with on both projects have been re-orienting, with some folks leaving and some folks staying (and focusing on other things), which led to our ending here. We’re all friends, on good terms, and it’s truly just the end of a chapter so they can focus on a new one. It feels weird not having a bunch of links and copy prepped on Wednesday evenings, or an episode to record on Tuesday and Thursday afternoons, but I’m sure I’ll get over it as I take on new projects.

For now, I’ll keep these screenshots as fun memories!

This has been such a great learning experience, and I’m grateful to have had it.

Keybindings I use in VS Code

Sun, 13 Apr 2025 00:00:00 GMT

I use VS Code for… code, heh. Because I present a lot and have tried to make the experience overall a bit more mouse-free, here’s the keybindings I particularly like to use:

Ctrl/Cmd + b: Toggle the file explorer
Ctrl/Cmd + backtick: Open the terminal (I’m writing out the word backtick because markdown doesn’t like it when I use the actual backtick character, but you know what I mean)
Ctrl/Cmd + l: Highlight current line
Ctrl/Cmd + p: Quickly open a file when you type its name
Ctrl/Cmd + p (then) >: Quickly run a command (like saving without formatting, changing a color scheme, running an extension, that sort of thing)
Ctrl/Cmd + Shift + f: Search across workspace
Ctrl/Cmd + i: Toggle inline Copilot chat
Ctrl/Cmd + Shift + i: Toggle Copilot chat sidebar
Alt + Up: Move line up
Alt + Left: Move line down
Ctrl/Cmd + /: Comment out current line/selection

There’s probably more, but these are the ones that came to mind first! You can also check out the docs for others.

Make your images in markdown on GitHub adjust for Dark Mode and Light Mode

Thu, 10 Apr 2025 04:24:04 GMT

GitHub supports dark mode and light mode, and as developers, we can make our README images look great in both themes. Here’s a quick guide to using the <picture> element in your GitHub Markdown files to dynamically switch images based on the user’s color scheme.

When users switch to GitHub’s dark mode (or vice versa), standard images can look out of place, with bright backgrounds or clashing colors.

Instead of forcing a one-size-fits-all image, you can tailor your visuals to blend seamlessly with the theme. It’s a small change, but it can make your project look much more polished.

One snippet, two themes!

Here’s the magic snippet you can copy into your README (or any Markdown file):

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark-mode-image.png">
  <source media="(prefers-color-scheme: light)" srcset="light-mode-image.png">
  <img alt="Fallback image description" src="default-image.png">
</picture>

Now, we say it’s magic, but let’s take a peek behind the curtain on how it works:

The <picture> tag lets you define multiple image sources for different scenarios.
The <source media="..."> attribute matches the user’s color scheme.
- When media="(prefers-color-scheme: dark)", the browser loads the srcset image when GitHub is in dark mode.
- Similarly, when media="(prefers-color-scheme: light)", the browser loads the srcset image when GitHub is in light mode.
If the browser doesn’t support the <picture> element, or the user’s system doesn’t match any defined media queries, the fallback <img> tag will be used.

You can use this approach in your repo README files, documentation hosted on GitHub, and any other Markdown files rendered on GitHub.com!

Demo

Check out the gist here for a demo of how an image can change between dark mode and light mode on your profiles, READMEs, and moooore.

Until next time!

Things I learned while upgrading my iPad

Mon, 07 Apr 2025 00:00:00 GMT

Normally, when I get an electronic device, I use it and wear it down until it’s nearly unworkable. Probably not very “high tech” of me, but that’s how I do it (I only recently replaced my 14+ year old Kindle, for example).

I have blogged about this already.

For once, though, I decided to upgrade my iPad setup before I ran my existing one into the ground. Mine was decent, maybe 6 or 7 years old (and I got it refurbished), and was a 2018 iPad Pro. I began the trade-in process when I started getting flashbacks from my previous iPad before that, where I wore it down so much that it barely charged, it had a $0 trade-in value, and Apple wouldn’t help me service it because it was so old and no longer supported… so I decided to be a bit more proactive this time.

I admit I’m not a hardcore tablet user, but I do juuuust enough that I wanted something with decent horsepower. On my iPad, typically, I:

Draw (with the Apple Pencil and Procreate)
Edit videos (with LumaFusion)
Write (with Obsidian, but not as much as I would like because I haven’t had a keyboard setup I liked)
Play games (Not wildly graphic-intensive ones, but like Clash of Clans, Civilization VI, and my daughter likes Lingokids)
Edit photos (mostly with Affinity Photo)
Watch shows (on various streaming platforms)
Read sheet music
Use it as a teleprompter

So anyway, not like… wildly ridiculous usage, but juuuust enough that I liked the idea of getting a Pro again.

My plan was to get the 11” one again, and potentially nab a keyboard case too. An 11” iPad Pro (M4) if you wanna look it up.

I… learned a lot during this upgrade process, both in good and frustrating ways, and I wanted to pass along my learnings here since I fell down so many YouTube rabbit holes trying to solve my exact wants.

If you have any knowledge of the Apple trade-in process, or even the common sense that “Apple is Apple” and that they change things a lot to make money… your reaction to this post might be, “well duh, Cassidy,” but I’m WRITING IT ANYWAY.

The size

They changed the proportions of the 11” tablet juuust a bit, and the back camera size changed, so I couldn’t use my previous case. I was not fully disappointed with that because I was considering a keyboard case anyway, but I was still surprised to see it.

The Apple Pencil

I was planning on just keeping my previous Apple Pencil, but when I got home after the tablet swap, I noticed that the magnet just wasn’t… sticking like it used to. The Pencil was flailing around a single magnet and falling off way too easily.

I thought it might be because of the lack of case, and then learned later (via a somewhat random video) that my 2nd generation Apple Pencil was not compatible with this new iPad. That was VERY annoying to learn, because the salesperson didn’t tell me that in the store! Oh well. I got a better deal on one with a 3rd party seller, heh.

A keyboard case

At first, I got the Apple Magic Keyboard case, and… nearly instantly returned it. Don’t get me wrong, it was a nice keyboard case, but it didn’t protect the sides of the device much, and it felt like it was turning my iPad into a laptop with almost no flexibility. I couldn’t remove the keyboard part from the case, and I couldn’t flip it around or anything to “just be a tablet” if that makes sense. It was rigid, and on top of that, wildly expensive.

Anyway, from there I did far too much research about cases, and the one thing that was still annoying to me was the fact that no keyboard cases on the market had a covered Apple Pencil holder. Like no pockets or sleeves or anything. I guess it kind of makes sense, in that a keyboard user is probably not drawing at the same time, but… I am that person that wants both.

It was quite frustrating searching for this, because I want to be able to toss my iPad in a backpack without worrying about the Pencil detaching. But, if I wanted a dedicated slot for it, I had to do a non-keyboard case. I literally just saw people using rubber bands and 3D printed brackets with their cases all over Reddit.

What I ended up getting (and we’ll see in a few months how I feel) is the Logitech Combo Touch keyboard case (refurbished, because it was still a bit too pricey for my taste), and a separate Apple Pencil holder to stick on the outside from the brand ESR.

I picked the Logitech keyboard case because the keyboard is detachable, and it had good coverage on the sides of the tablet. I have a toddler at home so I tried to look at robust-ness outside of just the case’s function, and it seemed to be the best of both worlds. I like that I can still have “just” a tablet, that it has multiple viewing angles with its stand, and that I can use the keyboard, too.

Miscellaneous things

Overall, not too many wild surprises, and a lot of this I could have known earlier if I did more pre-research, but… here we are. Here’s some final things I learned that are worth noting:

The camera moved on this iPad version, so it’s more landscape-mode friendly rather than portrait-mode. Not a big deal, but lightly affects FaceTime with iPhones.
If you don’t have iCloud storage, you can temporarily work around that when transferring iPads by doing a “backup to transfer” and get your current iPad backed up for around 2 weeks. If you want to do the transfer at an Apple Store, have your backup ready in advance.
You can’t trade in an Apple Pencil.
The final trade-in value of my older iPad was $214. Interestingly, a couple months ago it was at $230, so my own hemming and hawing cost me a bit, there. I don’t know how often Apple reduces the value of a device, but if you’re considering a trade-in, think about that!
You can’t trade something in for a refurbished item. I originally tried doing that by like “trading in” my older tablet for an Apple gift card and then using it on a refurbished one online, but something stopped that from happening and I didn’t bother to remember what that was.

I hope this is helpful to someone out there!

I don't know what MCP is and at this point I'm too afraid to ask

Fri, 04 Apr 2025 16:37:50 GMT

It feels like everyone’s talking about MCP (Model Context Protocol) these days when it comes to Large Language Models (LLMs), but hardly anyone is actually defining it. Let’s go deeper!

The context problem for LLMs

LLMs struggle when they are asked for information outside of their training data. They’ll almost always either hallucinate and say something incorrect, or simply say, “I don’t know.” Giving them the right amount of context they need when you prompt them (whether it’s your codebase, your repository data, your documentation, etc.) is necessary for AI agents built on top of them to be useful.

Usually, to give LLMs that context, you have to really refine your prompting, or use some sort of external tool. For example, something like GitHub Copilot has tools like @workspace to give relevant information from your codebase to your prompts. This type of “extra tooling” is cool, but can get fairly complex fairly quickly.

The solution: MCP

In November, Anthropic open-sourced the Model Context Protocol as a standard for connecting LLMs and AI assistants to data and tools!

MCP grew the way you sleep… slowly and then all at once. As tools and organizations have adopted the MCP standard, it’s only become more and more valuable. And because MCP is model-agnostic, anyone can use and create MCP integrations. As with all open standards, a rising tide lifts all boats: the more people use it, the better it becomes.

I think that MCP has “won” the hearts of so many AI developers and tools because of this openness, and also because it’s a very “AI-first” version of existing ideas.

Back in 2016, Microsoft released the Language Server Protocol, which provided standards for code editors to support programming languages. Fast forward to today, because of LSP, programming language support across editors is better than ever, to the point where it’s not even a consideration for developers to have to think about anymore!

MCP takes a lot of its inspiration from LSP, and could be absolutely transformative for AI tooling. It will allow for everyone, from the largest tech giants to the smallest indie developer shops, to enable robust AI solutions in any AI client with minimal setup.

That’s why this is a huge deal! An open standard that is backed more and more by the tech community will mean better tools, better developer experiences, and better user experiences for everyone.

I’m sold! How do I contribute and learn more?

Hoorah, I thought you’d never ask! Here’s some resources to get you on your way:

Geek mama... saying no... part 2

Sun, 30 Mar 2025 00:00:00 GMT

Unlike my first baby where I was going into things very ignorantly (I would tell people, “oh, hey, if my new baby is chill I’ll do this podcast recording, no problem!” and existing parents would give me knowing looks and be like “…yeah okay Cassidy”), this time around… I know it will be harder than I can imagine.

As a result, I’m finding myself approaching every single project, chore, whatever, with, “will I be able to get this done before the new baby is here?” and if it isn’t a definite yes, it’s a definite no. This has admittedly been a bit of a bummer because I like signing up for new things and trying new ideas, but I just know that my time is limited more than ever, and it will get worse in that regard before it gets better.

That being said, that’s not a terrible thing! I have gotten wildly efficient at decision-making over over-thinking, and have been mentally “preparing the nest” way better than I did the first time around.

I talked about having to say no more than I’d like a little over a year ago, and it’s still hard. I just want to do everything! And I just can’t!

I’m so nervous about baby #2 (and have also written about this already, too), but also excited, and I genuinely can’t wait for the day I can do fun projects with my kids and know that the harder moments will be worth it. I am so happy when I see families with older kids doing road trips, and crafts, and just eating out peacefully, because it gives me a glimpse into the future!

So anyway: don’t ask me to take on a new project right now.

…but please do keep me in mind for later.

Create an HTML dialog when you click an image

Fri, 21 Mar 2025 20:13:30 GMT

On my blog, I have everything as a set width. All of the lines and code blocks and images are within its container, and I like it that way!

But, I did notice that it made some images on my blog a bit smaller than I’d like. When I published this post on GitHub Copilot Edits, the screenshots needed to be wider, but I didn’t want to change my container setup.

So, I worked some HTML <dialog> magic (using one of the tips I shared here) and set it up so that as I add images to a post, you can click on them and see them a bit bigger in a pop up! You can try it out here:

What this does, more granularly, is it:

Adds a zoom-in cursor over images so that a user can tell that they can zoom on the image
Styles the dialog so that it has a blurred backdrop
Uses CSS clamp() to control the image size and not make it too big if it’s a smaller image
Adds a little “fade in” animation
Adds a click listener for if the user clicks outside of the dialog, it will close the dialog (otherwise they can hit ESC)
Only runs on non-mobile devices (since it’s easier to zoom on a phone)

So, without having to adjust how I write my posts in markdown, I have this functionality attached to every image in every post!

And if you want to see the code in action to use it yourself, check it out on CodePen:

See the Pen Dialog on image click by Cassidy (@cassidoo) on CodePen.

I am going to have a second baby and my brain is spinning

Sun, 16 Mar 2025 00:00:00 GMT

In case you missed my mentions of it before/on the internet, I’m pregnant again, and due relatively soon, and… man I am feeling weird about it. I went to the doctor the other day and she said, “how are you? Eh, don’t tell me, you’re afraid of the newborn phase again but you’re excited to not be pregnant anymore.”

She’s… spot on, heh.

I’m so nervous. And it’s such a strange feeling, because on top of the nerves, I’m also so excited, because my firstborn daughter (who is almost two years old! Ahh!) is awesome. Even though we have ups and downs of being able to sleep well and trying to potty train and all that jazz, watching her learn and take in the world and laugh (and JOKE AROUND! This being who was once an actual blob can now make a JOKE!!!) has filled me with the greatest joy and love that words really can’t describe.

I’m so thrilled to make her a little friend. I’m so afraid of dealing with postpartum recovery and depression again. I’m hyped to not be pregnant. I’m terrified of giving birth again.

It’s been a better pregnancy this time around. I think it’s because I know what to expect compared to last time. Like whenever I get a certain pain or twinge or rush of feelings, I’m like “oh yeah, this again,” rather than, “WHAT IS HAPPENING TO ME??” which… is good? But also it’s still not my favorite state of being. I really, really want salmon sashimi, specifically. I can’t wait.

And to add more to the pile of feelings, I’m also both grateful and nervous about leaving work. I have been really enjoying my role at GitHub, and their parental leave policy is so much better than the typical U.S. startup that I’m used to. But… I also suffer from fomo and know that there’s some really cool stuff coming soon that I’m kinda bummed to not be a part of. And I’m also so grateful for having more than 3 months off. But I’m also hoping to not miss too much. Why is my BRAIN like this??

Anyway.

Brain is wacky. Body is tired. Baby #2 is coming.

We should have more friction in our lives

Sat, 15 Mar 2025 00:00:00 GMT

This is kind of an incomplete thought that I’ve been thinking as I see people boycotting very convenient things like Amazon and Target and even TikTok: I think it is an incredibly good thing that people are doing this.

Yes, it’s mostly political, and I do agree with the politics behind the boycotts. But, beyond that, I think it’s really good for our mental health.

Right now we live lives of incredible convenience. Everything that comes out is designed to introduce more and more instant gratification. And that’s a really nice thing… to a point.

I see so many stories of people, daily, talking about how people (especially students) today have worse and worse attention spans and patience than ever before, and I think that’s the result of our world working as designed. We’ve made people addicted to instantly getting the object they want, the food they want, the information they want, the answers they want, to the point of them not being willing to do their own research or wait just a bit longer for… anything. We’re lazy about seeking answers and unhappy with having to wait for results. We can’t be bored.

This is a sweeping generalization, of course, and I’m also guilty of this. I do still occasionally ask a question on Stack Overflow, but it’s nice to get a potentially incorrect instant answer from an LLM instead. I do still occasionally order something from Amazon if I want it quickly, and scroll the mindless video feeds of the internet for a quick dopamine hit. But… I really am trying to be better in general at this, and move a bit more slowly.

Being a parent has definitely helped me in this regard. I want kids to learn to work for things, and I want to see my daughter take in the world without an algorithm deciding how she should think. So, because I want that, I have to change my own behavior (which is easier said than done, but worth the effort). I’ve been picking up a book more often than my phone, and letting myself “be bored” instead of filling every waking moment with shopping or scrolling or getting angry about the up-to-the-minute headline in the news that pops up in my feed.

Anyway. I think we could all benefit from a bit more friction in our lives, whether it’s via boycotting something, adding limits to something, cutting something out entirely, or just stepping back before letting ourselves succumb to the addictive feeds of the world. There’s strength in numbers, so if you don’t mind the call to action: Let’s work on that, together!

Think less, ship more

Wed, 26 Feb 2025 20:19:40 GMT

I need to learn to (over)think less. Every time I “just write” or “just record” or “just post” or “just deploy” I end up coming up with more genuine content that people like more, and that I enjoy making more.

It’s easier said than done, because sometimes if I’m making something for work, I want it to be somewhat strategic, or if I’m writing something that is meant for someone to learn a concept deeply, I want it to be very clear and thorough. But… I think a lot of that overthinking and “being in my head” about stuff stops me from doing a whole lot more.

Anyway, there’s not much more of a point to this. I sat down and wrote this to force myself to write, because too many ideas were trying to be a bit too perfect in my brain.

I have to beat the shipping drum in my head more and more. Things can always be perfected and iterated upon later, but V1 still needs to be shipped before that happens.

Debugging my Micro Journal

Sun, 16 Feb 2025 00:00:00 GMT

I wrote about building my digital typewriter in the past, and it has worked fantastically for me so far!

…until today.

I had hid the device for a couple weeks because I didn’t want my toddler to break it, and the battery died out over time, as expected. I had tried charging it overnight, but it wasn’t working the next morning. When I plugged it in on the other side (there’s a separate plug for if you want to run the device without the battery), I noticed several keys weren’t working.

I tried not to be upset by this, assuming my toddler did indeed find it and dropped it or something.

First problem: not working keys

Since I’ve built several mechanical keyboards before, I did my first round of “debugging” by doing the classic “unplug and replug them all back in” method. That didn’t work, but I realized that the switches that weren’t working were just the furthest right two columns of keys.

Googling this proved to be nearly impossible, until I found a Reddit comment buried in an old post:

There’s sometimes a glitch when powering the device with the left-side USB-C that’s farther from the keyboard, where some keys don’t work. The left-side USB-C that’s closer to the keyboard doesn’t have this issue.

THANK you u/Either_Coconut, turns out this was the issue! As soon as I adjusted my cable, the keys worked great.

Second problem: battery not holding a charge

I was really worried about the fact that the device’s on/off switch wasn’t working. I couldn’t tell if the battery was dead, or if it was the switch, or a hardware issue that might be scary to try to solve. I noticed too that there was no charging light indicator when I did plug it in, which was a bit nerve-wracking.

Thank goodness though, the documentation proved to be so helpful!! Turns out PD chargers and USB-C to USB-C chargers aren’t fully compatible with the hardware, and I needed to use a phone charger (a USB-A to USB-C one)!

Now, hooray, my device is happily charged and working just like new.

Reflections, a few months in

A full ~7 months into using the Micro Journal for blogging and general writing, and I’m still so, so happy with the device! The fact that it’s open source, well-documented, and consistently updated is just delightful.

These problems I ran into (which prompted this post) were minor, relatively speaking. I solved both in less than a half hour, thanks to the docs and community around the project. I love having this single-purpose machine that does exactly as it says “on the tin”, one that I can repair and mess around with without too much worry. And yes, I’m writing this post with it to test it out and make sure that it all still works smoothly, heh.

If you get a chance to nab one, I highly recommend it!

Convert a video from dark mode to light mode with FFmpeg!

Thu, 13 Feb 2025 00:00:00 GMT

Let’s make it so you can record a demo (assuming you recorded it in VS Code) once in dark mode, and then convert that into light mode, in a single command!

Install FFmpeg

FFmpeg is the brains behind pretty much all video editing softwares. It’s a really awesome tool beyond just this use case!

You can go to their downloads page to clone the repo or go into details about how it runs, but here’s some shortcuts.

If you’ve already installed it, skip this section!

MacOS 🍏

If you’re on MacOS, you can use Homebrew to install FFmpeg:

brew install ffmpeg

Linux 🐧

If you’re on Linux:

sudo apt install ffmpeg

Windows 🪟

And if you’re on Windows:

Download the pre-built binaries. Choose the Windows version and click on the link to download a static build.
Extract the downloaded ZIP file to a folder of your choice, e.g., C:\ffmpeg. I personally have a babyscripts folder for small CLI apps like this or yt-dlp.
Add the bin directory to your system’s PATH:
- Open the Start Menu and search for “Environment Variables”, and click “Edit the system environment variables”.
- In the System Properties window, click the “Environment Variables” button.
- In the Environment Variables window, find the “Path” variable in the “System variables” section and select it. Click “Edit”.
- Click “New” and add the path to the bin directory of your FFmpeg installation, e.g., C:\ffmpeg\bin.
- Click “OK” to close all windows.
Verify the installation by opening Command Prompt and typing ffmpeg -version.

Running the command

Now, whenever you have a dark mode video, let’s say it’s named input.mp4, you can run this command in the folder where it’s located to get a light mode version named output.mp4!

ffmpeg -i input.mp4 -vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" output.mp4

🛑 You can stop here if you want to rest your brain 🛑

Creating a reusable alias

Now, this may be hard to remember, so what you can also do is create an alias for this in your terminal!

If you're on MacOS/Linux 🍏🐧

For MacOS/Linux, run the below command and then restart your terminal:

newCommand='
# Alias for converting videos from dark mode to light mode
convert-to-light-mode() {
    inputFileName=$1
    outputFileName=$2

    if [ -z "$outputFileName" ]; then
        fileBaseName="${inputFileName%.*}"
        suffix="-light-mode"
        fileExtension="${inputFileName##*.}"
        outputFileName="${fileBaseName}${suffix}.${fileExtension}"
    fi

    ffmpeg -i "$inputFileName" -vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" "$outputFileName"
}
'

# Add command to bash and zsh
echo $newCommand >> ~/.bashrc
echo $newCommand >> ~/.zshrc

(thanks to @chriswblake for help with this part!)

Now, when you want to run the command, you run:

convert-to-light-mode input.mp4 output.mp4

# or

convert-to-light-mode my-video.mp4
# the output here would be my-video-light-mode.mp4

If you're on Windows 🪟

And here’s the equivalent for Windows!

# A function for converting videos from dark mode to light mode
function Convert-ToLightMode {
    param (
        [string]$inputFileName,
        [string]$outputFileName
    )

    if (-not $outputFileName) {
        $fileBaseName = [System.IO.Path]::GetFileNameWithoutExtension($inputFileName)
        $suffix = "-light-mode"
        $fileExtension = [System.IO.Path]::GetExtension($inputFileName)
        $outputFileName = "${fileBaseName}${suffix}${fileExtension}"
    }

    ffmpeg -i $inputFileName -vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" $outputFileName
}

$profileContent = @"
function Convert-ToLightMode {
    param (
        [string]`$inputFileName,
        [string]`$outputFileName
    )

if (-not `$outputFileName) {
        `$fileBaseName = [System.IO.Path]::GetFileNameWithoutExtension(`$inputFileName)
        `$suffix = "-light-mode"
        `$fileExtension = [System.IO.Path]::GetExtension(`$inputFileName)
        `$outputFileName = "`$fileBaseName`$suffix`$fileExtension"
    }

    ffmpeg -i `$inputFileName -vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" `$outputFileName
}
"@

Add-Content -Path $PROFILE -Value $profileContent

To use this, you would run it like so:

Convert-ToLightMode -inputFileName "input.mp4" -outputFileName "output.mp4"

# or

Convert-ToLightMode -inputFileName "my-video.mp4"
# the output here would be my-video-light-mode.mp4

After creating the alias, an added bonus 👀

Something that you can ALSO do with this script is export the light mode version as a .gif image!

MacOS/Linux:

convert-to-light-mode input.mp4 output.gif

Windows:

Convert-ToLightMode -inputFileName "input.mp4" -outputFileName "output.gif"

Wow! By the way, if you want your original video to be a .gif too, you can run it fairly plainly with FFmpeg:

ffmpeg -i input.mp4 output.gif

Happy converting!

Let me know if you have any questions!

So far, this script seems to work best with the theme Dark Modern. If you try other themes, let me know and I can add them here!

Re-ordering Git commits

Sat, 01 Feb 2025 00:00:00 GMT

I was streaming this past week and there was a good question about re-ordering Git commits that I thought would be worth sharing here.

Let’s say you have commits in the order of a, b, d, and c, and you want their order to be a, b, c, and d, instead.

This is a job for git rebase! The “official” description for rebasing is “reapply commits on top of another base tip” which is… kind of helpful. There are docs. Let’s just go over our use case because there’s a lot you can do with rebase and not enough time to go through it all.

Start an interactive rebase

In this case, you use what’s called an “interactive rebase”! A regular rebase is used to move commits to a new base commit, which is typically for keeping a branch up to date with another branch. An interactive rebase lets you do much more, like reordering, editing, removing, or squashing commits.

Anyway, first, we’ll start an interactive rebase for the range of commits we want to reorder:

git rebase -i HEAD~4

Edit the order

This will open a text editor (for me it opens vim, but depending on your setup it could be something else). The commits will look something like this:

pick <commit-c> Commit message for c
pick <commit-d> Commit message for d
pick <commit-b> Commit message for b
pick <commit-a> Commit message for a

Re-order the commits in that file!

pick <commit-d> Commit message for d
pick <commit-c> Commit message for c
pick <commit-b> Commit message for b
pick <commit-a> Commit message for a

(if it opens vim and you aren’t sure how to edit things, you can move your cursor down and up with j and k respectively, and type ddp to move a line up, ddkP to move a line down. Use :w to save and :q to quit. It sounds jank but I promise it’s a really intuitive editor once you give it a chance!!)

If there’s something wrong

If everything works at this point with no issues, skip this section!

Otherwise, when you save and edit the text editor, if there are issues, Git will shout at you a bit and tell you about conflicts.

Open each conflicting file and resolve the conflicts manually. The conflicts will be marked with conflict markers (e.g., <<<<<<<, =======, >>>>>>>) and you have to pick which pieces of code you want to keep.

After you resolve a conflict in a file, write in the terminal:

git add <file name>
git rebase --continue

Then, repeat this until all of the conflicts are resolved!

Cancelling all these changes

If at any point during the rebase you’re like “wait, this was a bad move,” (been there) you can type:

git rebase --abort

This will return your repository back to its original state!

Pushing all these changes

Blammo, you made it to the end! Push your changes with a git push at this point and be free. You might have to add the --force flag to your push, depending on your setup.

I mentioned before that this came up while I was streaming! If you’d like you can watch on GitHub’s Twitch or YouTube every Thursday! It’s a new series I started called Rubber Duck Thursdays, which is basically my excuse to hack and yap in public on their channels, heh. See you next time!

A couple CSS tricks for HTML Dialog elements

Thu, 09 Jan 2025 00:00:00 GMT

I recently was messing around with the HTML <dialog> element. It’s really handy for native dialogs without a ton of JavaScript.

If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the Settings gear button at the top.

Anyway! There’s a couple tricks that you might find handy when you’re implementing your own <dialog>s on your websites!

Blur the `<dialog>` backdrop

The ::backdrop CSS pseudo-element isn’t limited to <dialog>s. You can style it however you want, but if you want to keep it simple, you can add a blur filter like so to be able to blur the background ever so slightly:

dialog::backdrop {
  backdrop-filter: blur(2px);
}

You can add other properties, of course, like background-color for example. I also wrote about styling pseudo-elements with JavaScript if you want to do more with this in general!

Disable page scrolling when a `<dialog>` is open

This is a funky selector here, but it’s pretty cool. When a <dialog> is open, it adds an open attribute to the tag.

body:has(dialog[open]) {
  overflow: hidden;
}

This selector checks to see if the <body> has a <dialog> with the open attribute. If so, it disables scrolling on the page!

Granted, the weirdness is that if your dialogs are tall, you might need to enable scrolling in them separately, but it keeps the page behind your dialog from moving around when you scroll.

That’s all, folks! I hope this was helpful for you!

Making my startup come back to life

Wed, 08 Jan 2025 20:29:33 GMT

I built a GitHub Copilot Extension recently that made me unreasonably happy for one major reason: it made my old startup’s app, Brainstory, come back to life, in a very small way!

Now for those who don’t know, I used to work at a company that built AI tools, and I wrote about what we made and why we said goodbye in more detail here.

One of our tools in particular was Brainstory, and it was my favorite of the bunch. It was an app where you could speak out loud with a digital coach, and it used socratic questioning to force you to speak more and get your ideas out. Unlike ChatGPT and other LLM chatbots, it didn’t give answers, it just kept pushing you.

I really love using AI and LLMs for specific use-cases like that, and using it as a thinking tool was so, so helpful for me in producing blog posts, games like Jumblie, apps like W-9 Crafter, and a bunch of conference talks, too. Having a “judgement free” space to literally just verbally get ideas out and pull at threads was perfect for someone like me.

Anyway, I was very sad to see Brainstory go. We open sourced it, but the infrastructure we had set up (particularly with the “live voice to media to prompted text”) was juuust complex enough that I didn’t have the time (nor patience) to stand up my own version of it again.

And then… GitHub released GitHub Copilot Extensions.

Fast forward to this past Fall 2024 as a fresh new GitHub employee. I was poking around with the Extensions documentation, seeing what possibilities there were with it, not fully sure why someone would extend Copilot unless you wanted it to call some kind of external API (or make it talk like some kind of funny character in all of its responses).

And then I realized… all of the tools I needed for a Brainstory clone were suddenly available to me: VS Code had a Speech Extension that let me verbally dictate what I wanted into the editor. Copilot Extensions and Chat let me query an LLM API with a prompt and get a response. The editor itself was a UI I didn’t have to maintain!

Y’all, I hacked together something that was so, so messy. But, within an hour, my brainstorming buddy extension was working. I slowly said into my IDE, “I’d like to plan out a blog post around [a topic], but I’m not sure how I want to structure it.”

I fully felt like Dr. Frankenstein shouting, “IT’S ALIIIIIIIVE!” when it responded back!! It felt like it was an old friend responding to me and I was able to fully outline my post I wanted to write while just talking it out.

This post definitely sounds like I’m trying to shill Copilot, I’m fully aware, but it’s really not about that: There’s a lot of tools that become a part of our workflows and day-to-days, and when they die off for whatever reason, it’s a real bummer to not have an alternative at the ready if it doesn’t exist. Startups like Polywork and Stashpad (that I genuinely really liked!) recently announced shutdowns and I’m already trying to think about how I’ll replace their functionality in my regular work.

Being able to find alternatives is one thing, but for the really specific tools, being able to hack something together yourself can be arduous. It’s really, really awesome (and empowering) when it’s made a bit easier and faster.

Anyway, that’s all, and I’ll write more about how to build a Copilot Extension at some point in case you want to do something similar! One last note, check out this similar post called “File over app” by Steph Ango when you can, I think it articulates what I mean here pretty well. Smell ya later!

How to use GitHub Copilot Edits

Mon, 06 Jan 2025 00:00:00 GMT

Did you know that GitHub Copilot can edit files directly? And multiple at once?

It can! And it’s awesome. Copilot Edits is a feature we launched in preview at GitHub Universe this year, and it helps you iterate on changes across multiple files.

Full disclosure: yes I work at GitHub and you can find this in the docs, BUT I wanted to share this tidbit here because I get asked about this feature a lot.

Anyway!

To try it out, open your favorite repo and head over to VS Code. There’s a button in the Copilot Chat window that opens the Copilot Edits view:

From there, you can add any files you’d like to your working set, which are any relevant files you want to work with. Copilot Edits won’t make changes to any files outside of the working set, unless it wants to suggest creating a new file!

And finally, it’s time to ask for what you’d like to change. You can ask for a new component based on existing ones, you can ask to write tests, you can ask it to add certain features, or you could even ask it to fully restyle a page.

Whenever you make a request, you’ll see a full diff of the changes, so you don’t have to accept anything until you’re happy with the results! Iterate on your prompts and hit “Accept” when you’re ready for your changes to be saved. You can save each change one at a time, or all of them at once.

And voilà, you’ve edited files with GitHub Copilot Edits, without having to write a line of code for yourself! You can always undo changes or make tweaks, because of course, you’re the developer.

If you want to see this in action, check out a demonstration at GitHub Universe, or this short walkthrough here.

Happy coding!

Adios, 2024

Tue, 31 Dec 2024 00:00:00 GMT

It’s incredibly hard to believe that 2024 is already over. It’s felt like both the slowest and fastest year ever.

Similarly to my recap in 2023, I’ve got about an hour and a half to recap it until midnight strikes here, so let’s boogie.

Work things!

Whew, ch-ch-changes! I am now Senior Director of Developer Advocacy at GitHub. I didn’t think I’d be here one year ago, but life happens!

At the beginning of this year, I was CTO of a small startup, building an app that we ultimately open sourced. I did a more in-depth recap of that here. Long story short… we just couldn’t make it work as a sustainable business. Our team is a group of awesome people, and we stayed friends! All of us are working on different projects and different organizations now.

So, when we said goodbye, I took a little bit of time to interview, do some freelancing, work on projects, and speak at events.

One of the contracts I worked on was such a cool company that I can’t talk about because they’re in stealth, but at a high level, I got to build an app that customized physical goods! I had the creative freedom to build it from scratch, so I used Astro, React, and PixiJS for it. I learned a ton and I’m hoping to open source at least some aspects of what I was able to build someday.

In person, I spoke at Front-end Design Conference in St. Petersburg, Florida, The Merge in Berlin, and Figma Config in San Francisco! It had been a while since I had spoken at most in-person events since I had a baby last year, and it was really fun to see old and new friends and talk about cool things.

While I was at these events, I got to talking to a few folks more seriously about roles I was interested in and applying for, and very long story short, several humans and rounds of interviewing later, I joined GitHub in September! It’s been really cool so far. I wrote a short post at the 2 month mark there and a lot of what I’ve seen has been holding true. It’s an unusual company that feels both small and large at the same time, has massive impact, and really deeply cares about enabling developers to build better. So far, I’ve gotten to speak at GitHub Universe during the keynote and the livestream, and at Microsoft Ignite during their breakout sessions and CIO Summit, and I worked hard with the team to launch the free tier of GitHub Copilot as well as the new OpenAI o1 model in Copilot (which, by the way, I was proud to be able to get some cheeky commentary in that o1 blog, if you wanna check it out).

Anyway, it’s been quite the year for the full-time job side of things, but I’m happy where I’m at there.

Outside of that, I’m still advising companies, but a little bit less admittedly while I get my footing still at GitHub! I finished up with Netlify and Chainlink, I’m still working with Plasmic and The Sukha Company, and I took on helping Convex as well! This year has been so weird for startups. So many companies have either restructured, or shut down, or laid folks off, or gone stealth, or pivoted. It’s been really interesting to be a part of that as a participant and a witness, and I’m hoping that hiring in the tech industry gets stronger and stronger in 2025.

Personal things!

It has been such a good, growing year. I spent a lot of time learning, and being with family and friends!

On the learning side, I took voice lessons for the first time, and Korean lessons! Learning with a teacher (rather than doing something self-guided) always produces good results for me, and I too often don’t take up the opportunity to learn with someone (specifically on things outside of tech). It was really nice to make a change in that regard this year and have some fun doing it.

As a side note, learning-wise, it has been absolutely incredible watching my toddler learn to speak more and more this year. Language development in toddlers is truly fascinating and humbling. A year ago she couldn’t even walk, and now she’s babbling in English and Spanish and Korean without breaking a sweat, and switching between the languages depending on who she’s with. I am truly in awe!

We traveled a bunch this year as a family, in the U.S. mostly to Seattle and Florida to visit family, and then all the way across the world to Singapore and South Korea for family weddings and vacations! It was very challenging to do the international trips with a toddler who can walk and does not want to be contained (I recommend traveling if you have a baby between 6-9 months, where they eat solid food but can’t go anywhere, OR later when they know how to sit still). Anyway, it was wonderful all the same to see so many people.

Our community here in Chicago is really great. It’s kind of hard to explain it. We’ve figured out, somehow, how to have friends as adults (some with babies, some without) who we hang out with regularly! They can drop in on us and we can drop in on them, and they’re from all walks of life and places around the country and the world. It feels like the community I had in college, which I really didn’t think I’d ever have again! It’s genuinely changed how I live day-to-day, and improved my mental health, and that’s been amazing. I don’t take for granted how uncommon it is to have this opportunity to have… a village of people, for lack of a better way of phrasing it. If you take anything away from this entire post, it’s that you should reach out to folks to hang out more, open your home to people, cook with people, do hobbies with people, and get to know folks you wouldn’t normally talk to on a daily basis. It’s worth it!

And of course, outside of Chicago, my internet friendships are going strong and I love you nerds. You are definitely the ones who actually read what I write here, heh. I’m so grateful to all of you being there, in 2024 and beyond!

Okay also one last note, fully buried the lede: I’m pregnant again, AHH. Baby #2 due in the Spring! I do not like bring pregnant. But, this time around, I have experience, and just knowing what to expect this time has made all the difference! I know there’s some pregnant folks out there now who occasionally read my stuff, and I want you to know: you aren’t alone, and I’ve written a bunch about it here on this blog too if you want more reading (or you should DM me if you want to talk)!

Side project things!

This year has been pretty fun for my projects!

First and foremost, my weekly newsletter is going strong! We crossed the 7th year anniversary this year, and it is still my biggest labor of love for the tech community. I tried a few things that didn’t scale this year to improve both my subscriber retention/experience and also my personal workflows, and it seems to be going well. I’ve been using a sales team for some sponsorships, and I admit it’s going okay in that regard (figuring out the balance of quality and quantity and maintaining relationships has been weird, not bad, but definitely a learning experience), and I’ll be experimenting with that more in the new year. This month we crossed 17k subscribers, and I would love to hit 20k (purely for the fun, round number) in 2025, but I know that’s a big leap so we’ll see how far we get!

I worked pretty hard on my game Jumblie for the first half of the year, and I finished making puzzles in October. I already wrote about why I finished in the link in the previous sentence, but long story short: it was really fun, and it almost got acquired even, but it was way too time-consuming and took a lot of time away from my other projects. But, I’m glad I did it, and I still play it regularly (and you can too)!

I also shipped my first paid app called W-9 Crafter this year! I wrote about how I built it, and it’s been a pretty low-maintenance one to have around. Long story short: it generates W-9 forms for you. It’s a glorified button. “It does what it says on the tin,” as one of my internet friends says. It’s saved me a ton of mental overhead when I need to give a newsletter sponsor or contracting org a W-9, so I’m proud to have it shipped purely for my own selfish purposes, and it makes me happy to see others using it, too!

There’s way too many projects of mine waiting in the wings to be released (which I have blogged about), with domain names fully purchased and implementations halfway done. I’m hoping I can actually ship some in the next year before the domains renew, but we’ll see about that!

I did have a goal this year of blogging more, as well, and it worked! I more than doubled my number of blog posts this year (I did 68, including this one)! I probably spent as much time blogging as I did on making very tiny improvements to my blog, but I have really enjoyed it and plan to keep it up in the new year. You can read “meta” posts about how I build my blog here, and my blog template is open source if you want to use it to make your own! I also built myself a digital typewriter to help with blogging, and I’m still absolutely loving it.

And finally, not really a side project but I’m including it anyway, I’ve been actively playing go almost daily! It’s something I’ve done for several years, and my strength there has plateaued a little bit (…I should probably get a teacher, wow, full circle), but I really love it. There’s a local go club in Chicago that I try to visit on occasion and it’s really been a treat to play whenever I can.

There’s probably more that I worked on, I know I’m forgetting something, but this blog has gotten long enough, let’s get on with it.

Phew!

With all that, adios 2024. It’s been a year of big ups and downs and changes. Last year I predicted it would be full of “funky transitions” and past Cassidy was spot on. Maybe 2025 will stabilize? Maybe I’ll actually use some domain names? Maybe I’ll just be happy to sit still on occasion? Who knows.

Thank you for reading all of this! Here’s a joke for you as a reward: What’s the best thing about elevator jokes? They work on so many levels!

The beautiful sentence that is the web

Mon, 30 Dec 2024 00:00:00 GMT

I was asked recently on a livestream about people being against JavaScript on the web. I think it’s a hot take that… doesn’t actually exist. JavaScript is one of the building blocks of the web.

The metaphor I like to use is that web development is like a sentence. When you read a sentence, there’s nouns, adjectives, and verbs (and other things, sure, but let’s stick with this for now). In web development, HTML is the noun, CSS is the adjective that describes the noun, and JavaScript is the verb that makes it do something.

You can have websites without JavaScript, of course. They’re static and still, which is not a bad thing. It’s like the sentence:

“A quiet night under the stars.”

It’s peaceful. Nothing’s really happening. And that’s okay, and lovely, even!

But what if we changed it with just a little verb?

“A quiet night erupted under the stars.”

Whoa. It erupted. Something happened. That adds some excitement. And you can keep going, and going, and going.

“A quiet night erupted under the stars, as fireworks blazed across the sky and laughter echoed through the air.”

Just like a sentence can get more magical as you add more to it, websites can, too. We could really go deep on this metaphor talking about how you can add too much to a sentence or poorly construct it and lose the meaning, but you get the idea.

Nobody wants you to get rid of verbs, and nobody actually wants you to get rid of JavaScript. Do it the right way, and your websites can be as magical, powerful, simple, peaceful, useful, or useless as you want them to be.

Wrapping up Blogvent 2024

Tue, 24 Dec 2024 00:00:00 GMT

It’s been a hectic, busy month, but I blogged every day for Blogvent! In case you missed it, my goal was to blog daily in December.

I missed it!

No you didn’t! Check out alllll the posts here:

Phew, so many words. It might be considered cheating for my last post before Christmas to be a list of posts I already wrote, but I don’t CARE. It’s DONE. I’m going to eat food with family and be a blob!

…and I’ll probably blog more soon too, but until then, thanks for following along! Let me know (on whatever socials you prefer, lately Bluesky is my fave) if you have a favorite or want to hear more about anything!

I really love entering raffles

Mon, 23 Dec 2024 00:00:00 GMT

Welcome to Blogvent (where I blog daily in December), day 23!

I love raffles. Gimme a chance to win something for minimal effort, and I’m THERE. I’ll almost always fill out a survey, almost always drop an email, almost always enter a low-effort contest, almost always provide feedback in exchange for a chance to win.

I know it’s probably a dumb thing to do “data privacy”-wise or something, or even just from a time management perspective… but I just love entering raffles.

I think it started when I was in middle school and I actually won a raffle for the first time, and the prize was an iPod Nano. That baby could hold 500 songs!! Spotify who?? I OWNED my music. And I OWNED the moment where I, shockingly, won something.

Now, obviously, I don’t win often, because… it’s rare to ever win a raffle, ever. BUT, when you enter a lot of raffles? You win sometimes!! Those little winnings are FUN!

I haven’t won a ton of raffles in my life, and a grand majority of the winnings are like $5 Amazon gift cards or t-shirts or something. But, over the years, I’ve gotten a few good prizes, including my first Mac desktop in college, my husband’s iPad Mini, and a printer!

…yes, I can afford to buy most of these things and could probably work on something valuable and earn enough money to buy these things instead. But they’re free!!! And fun!!! I don’t care!!!!! LET ME LIVE!!!!!!!!!

(this last bit is mostly a message to my relatives who have told me I should stop entering raffles)

(bye)

How I use Obsidian Dataview

Sun, 22 Dec 2024 00:00:00 GMT

It’s day 22 of Blogvent, where I blog daily in December!

Yesterday, I wrote about how I use Obsidian Templater to generate templates across similar notes.

I also really like to use Obsidian Dataview! Dataview lets you query your notes as data, which is pretty dang powerful, especially when you have a lot of notes that follow similar structures and patterns.

Because I write all of my newsletter issues in Obsidian, and they all use the same template (which again I shared in yesterday’s post), I often want to see all of my issues at a glance.

I have a “Newsletter Dashboard” note in my Obsidian vault that has links to other notes of mine (like notes about feedback from subscribers, sponsor notes and ad copy, blurbs I want to remember, or just various things I regularly keep track of), and then a table of all of the issues I’ve written.

Normally, it would be a small task to plop a link to the latest issue I wrote into the table. Not a time-consuming one, definitely small, but one that I’d have to do every week.

…which means of course, I had to automate it.

It’s the perfect use of Dataview! In my vault, I have a Dataview block:

```dataview
TABLE striptime(dates.created) as "Issue Date"
FROM #newsletter
WHERE contains(aliases, "Newsletter")
SORT dates.created desc
```

It looks a lot like a regular markdown code block, BUT notice that it has dataview at the top as the language. This toggles the plugin!

Broken down:

A table is generated with two columns, one with the file name (which is a default), and then another with the “Issue Date” (which comes from the newsletter’s frontmatter)
The table is populated with any files in my vault that have the tag #newsletter
Because I have other “meta” notes about my newsletter with the #newsletter tag, I also make sure that the files queried have the word “Newsletter” in the file’s alias (which my issues will always have, because of their template)
The table is sorted by date, where the newest issue is at the top

This has made my life so much easier for organizing my newsletter issues!!

A generic, generated “dashboard list” template

That being said, I also have a much simpler Dataview usage that combines with Obsidian Templater in a way that you might enjoy using.

Sometimes, I have a lot of notes that reference a certain topic with the Obsidian [[linking]] syntax. For example, when I take notes at church, I might reference a book of the Bible like [[Matthew]] or I might write notes about a book I’m reading across several files, and will use [[Book title]], or if I’m taking a class, I’ll use [[Class Name]].

Obsidian has native ways of viewing the links between files, but if you want to make your own “dashboard” of sorts about a given topic and all of its references, you can use this template:

---
cuid: listdashboard<% tp.file.creation_date("YYYYMMDD-HHmmss") %>
aliases: "List of notes about <% tp.file.title %>"
tags:
---

# <% tp.file.title %>

References to <% tp.file.title %>:

```dataview
LIST
FROM [[<% tp.file.title %>]]
```

It’s FUNKY but it’s so powerful! What it does is:

Creates an ID for the dashboard based on the date
Creates an alias for the dashboard
Offers the line to add tags in the frontmatter
Generates a heading for the note based on the topic
Generates a list of all notes about that particular topic with Dataview

So, for example, I sometimes write down pieces of advice I read from the Indie Hackers Newsletter that I want to remember. Whenever I do, I reference it with [[Indie Hackers Newsletter]], and my note generated from this template looks like this:

---
cuid: list20210727-223242
aliases: "List of notes about Indie Hackers Newsletter"
tags: advice, startups, saas, projects
---

# Indie Hackers Newsletter

References to Indie Hackers Newsletter:

```dataview
LIST
FROM [[Indie Hackers Newsletter]]
```

(and then more general notes below this)

The generated list here has over a dozen of my notes linked, and I can have a more “meta” overview of the topic about the newsletter (like who writes it, what else I might need to know, etc) by just writing more in this generated markdown file.

It’s SO handy for lectures I watch (or create), books I read, recipes I follow, and even just certain kinds of meeting notes! I have probably over a hundred “meta” notes generated from this template alone, and it’s been great for staying organized.

It gets way more complex

These are honestly very basic usages of Dataview, but they work for me. I recommend reading the documentation for the plugin and checking out how people use it in the broader Obsidian community, because I’ve seen some really impressive usage around things like task management and even Dungeons & Dragons campaigns!

See you again tomorrow!

How I use Obsidian Templater

Sat, 21 Dec 2024 00:00:00 GMT

It’s day 21 of Blogvent, where I blog daily in December!

If you don’t use Obsidian, or haven’t heard of it, it’s a glorified markdown app. You write markdown notes and it keeps track of your notes in a folder. But, the power beyond the basics of Obsidian is that it has an open plugin system, and you can connect your notes together via tags or links (which can turn into your own personal “wiki” of sorts). I use Obsidian for nearly everything (I’m writing this blog post in Obsidian now), and have written about it before, but I want to focus on a one of my favorite plugins in this post.

I really love the Obsidian Templater plugin. It lets me move super quickly when I create notes with certain structures, big and small.

I have examples of what I mean!

My own “contact” app

Every “contact” type app I’ve tried has fallen short for me in one way or another. It’s hard to keep up to date, or it’s expensive, or it requires too much to fill out. I kind of use Obsidian for that, in the place of a dedicated app.

When I want to make a new “person” note, I tag a person with [[@Their name]], or make a file called @Their name. I set up a little automation that adds my “Person template” to that kind of note.

The person template looks like this:

---
cuid: human<% tp.file.creation_date("YYYYMMDD-HHmmss") %>
alias: ["👤 <% tp.file.title.substring(1) %>", "<% tp.file.title.substring(1) %>"]
tags: person/friends, person/family, person/coworker
---

# 👤 <% tp.file.title.substring(1) %>
🎂 **Birthday:**
💌 **Email:**
☎️ **Phone:**
💼 **Occupation:**
🌎 **Location:**
🏡 **Address:**

| Socials       | URL      |
| ------------- | -------- |
| Bluesky       | https:// |
| GitHub        |          |
| LinkedIn      |          |
| Twitter       |          |
| Personal Site |          |
| ...           |          |


## Quotes

## Related people

## Notes

I’ll break it down:

Everything with <% tp. ... %> is a Templater script that uses JavaScript to manipulate the passed parameter.
The frontmatter of the template generates an ID for the file based on the creation date (I call it a cuid instead of a uuid because instead of it being a Universally Unique Identifier, it’s Cassidy’s Unique Identifier, heh). That ID doesn’t mean anything, but I try to have some kind of ID for every file I make in case I need to query my data somehow later on.
It also generates aliases for the person, so I can tag them in a note with just their name (without the @) or with an emoji
It automatically gives the person tags for the relationship I have with them (I show just friend, family, or coworker here, but I have other more specific ones too)
It creates a heading of the person’s name, without the @
The rest I manually fill out!

Here’s an example of a generated person named Fakey Fake:

---
cuid: human20241221-234513
alias: ["👤 Fakey Fake", "Fakey Fake"]
tags: person/friends
---

# 👤 Fakey Fake
🎂 **Birthday:** 12/21/2024
💌 **Email:** fakeyfake@fakeyfake.fake
☎️ **Phone:** 123-456-7890
💼 **Occupation:** Loser
🌎 **Location:** #fakeland
🏡 **Address:** Hidden

| Socials       | URL         |
| ------------- | ----------- |
| Bluesky       | https://... |
| GitHub        | https://... |
| LinkedIn      | https://... |
| Twitter       | https://... |
| Personal Site | https://... |

## Quotes

"I'm tired of being fake"

## Related people

[[@Fakey McFakeFace]]

## Notes

- Not real
- Just a faker

It’s not a perfect system, BUT it helps me find a lot of info quickly when I’m contacting a friend of mine or need an address of a family member or something! Sometimes I think I should just go back to a plain ol’ paper address book, but this has been working for me, for now.

If you are subscribed to my weekly newsletter you might notice that it follows a certain structure in every single issue.

That’s a template! I’ll share just the frontmatter for that one:

---
cuid: newsletter<% tp.file.creation_date("YYYYMMDD-HHmmss") %>
alias: "Newsletter on <% tp.date.now('MMM Do YYYY') %>"
dates:
  created: <% tp.file.creation_date("YYYY-MM-DDTHH:mm:ss") %>
tags: newsletter
---

Once again, it’s using that Templater <% tp. ... %> syntax to generate something that looks like this:

---
cuid: newsletter20241221-232944
alias: "Newsletter on Dec 21st 2024"
dates:
  created: 2024-12-21T23:29:44
tags: newsletter
---

Having an alias pattern generated like this makes it super easy for me to search for specific issues, and I have some cool patterns for viewing issues in Obsidian that I’ll talk about in a later post.

This blog post

And finally… this blog post uses a template too. I actually show the generated frontmatter I get for every post in a recent blog post, and some more details about how I blog in a different blog post. Once you get the hang of it, these templates can be used for anything!

Anyway, I hope you found some of this useful, in case you’re looking to level up your Obsidian usage.

See you tomorrow!

It would be cool for 2024 to just calm down

Fri, 20 Dec 2024 00:00:00 GMT

It’s time for day 20 of Blogvent, where I blog daily in December!

I feel like everyone I talk to is wildly busy at work this month compared to every other year before this. Even at my own job, we not only did a mega launch of making GitHub Copilot Free, but we also added the new o1 model to Copilot, and those launches were all planned this month. Why? Why??

I don’t know what it is about this year, but everyone I talk to is just swamped at work. Deadlines, quotas, last hurrahs, I don’t know what, but Decembers are supposed to be for saying, “let’s circle back after the holidays” and chilling with an inbox getting smaller and smaller.

Anyway, I don’t have much of a point to this, but if everyone who read this would just collectively shout “calm down” outside their windows tonight, I’d appreciate it.

Browser extensions I shipped in 2024

Thu, 19 Dec 2024 00:00:00 GMT

It’s Blogvent, day 19, where I blog daily in December!

I have a handful of small browser extensions that I’ve shipped over the years! I don’t talk about them much, and realized I should more often. Here’s a couple that I made this year that have been particularly handy for me!

Copy mailto+

When I discovered the Indie Newsletters website, I loved it! But, I noticed when I hit the “Nominate” button on the website, it was a mailto link, and it pre-filled the subject and body of the email in the link.

I was annoyed that I couldn’t right click and copy the email, the subject, and the body all at once, and I was on a machine that didn’t auto-open the link to a properly set up email client.

And thus, Copy mailto+ was born!

It is very basic. It literally just adds to the little menu when you right click the option to copy all three things from a mailto link.

Remove Gmail Categories

I was annoyed (again) that even though you could disable the Social, Promotions, Updates, and Forums categories in Gmail, you still had them in the “move email” dropdown when you were picking a folder for them. I have kind of a funky system where the most important folders I want to move things to are at the bottom of my list alphabetically, so those options were getting in the way.

And so, I made Remove Gmail Categories!

It does what it says on the tin: it removes the labels Social, Promotions, Updates, and Forums from the Gmail Move dropdown.

And now, 2025!

We’ll see what I build this next year. It’s been great being able to use these tools to solve my very minor annoyances in the browser, and they’ve saved me time, too.

See you tomorrow!

How I approach humor

Wed, 18 Dec 2024 00:00:00 GMT

Hey y’all, it’s Blogvent, day 18, where I blog daily in December! I admit this one took a while for me to write because work was so busy today (we had some big announcements, you can look it up, I’m too lazy to link here), and I didn’t really have a plan going into it. But words burst forth anyway! Let’s go.

One of the things that has come up a few times at work and on socials and stuff is how I come up with jokes or how I… “became funny”. I am always amused and taken aback by those questions (and also honored that someone thinks I’m funny), because it usually comes from developers who really want a specific formula to follow, and… humor is subjective.

But generally, here is how I approach being objectively downright hilarious to all people.

Opportunities

Every single moment in life is an opportunity for:

A pun
A rhyme
A one-liner

Your puns and rhymes and one-liners (your PROs) don’t have to be good. They don’t have to make sense. But they have to be executed consistently. Repetition is recognition!

When people start to get used to your PROs, because they’re consistently executed, they start to expect them. When they start to expect them, they feel “in” on the joke. When they feel “in” on the joke, they both feel included AND think you’re extra funny because they “got it”. People love feeling like they are in on an inside joke, even if it isn’t one. That’s why memes are such a thing, because people who “get it” are in on it, on a broader scale!

Repeating something → Recognition of the joke → Reliable laughs

I’ll give you one example: one of my favorite one-liners that I love to use with folks is, “that was my nickname in high school.”

If someone says, “oh, this code is boring but clean,” I can easily say, “that was my nickname in high school.” If someone says, “oh no, the balloon is deflated,” blammo, nickname in high school. If someone says, “the gorgeous, funny, strong woman is here,” you know what I’m gonna say.

If you’re prepared with some one-liners, and think about how a sentence might be a pun or a rhyme, you can practice being “quick” with your wit and comebacks.

High-level tips

Write down everything. Humor comes at unexpected times in unexpected places. Sometimes a joke might sit in your notepad for years, but when its moment comes, it will be beautiful. Here’s some of my dumb jokes I’ve partially written with this tip in mind!
Surprises/twists in existing phrases/concepts/clichés. Surprises undermine expectations, and a person startled by that laughs often! Fart!
Save humor for the end of a sentence or phrase. Humor is often a release of tension, so leading up to a joke makes for a better payoff.
Use contrast. Contrasting the serious and ridiculous is fun. A very techy example of this is the fact that we can laugh at developers tweaking tiny little margins of a page, when all of their tests are failing on their second monitor.
Use “sherbet lemons” and funny words. These are fun little words and small details you throw in text to make people smile! Here’s an example blog post of mine that is basically powered entirely by silliness in between code samples.
The rule of three. This is a common one you’ll see all over anything comical. I literally used it in this post already. This is where you establish a narrative with two concepts, and a twist with a third at the end. For example: “can I help you work anything? The CSS, that JavaScript, your bad attitude?”

Everyone is funny.

Even the most serious people can be funny, it all just depends on how you convey it. The things I’ve talked about in here today are definitely my definition of humor, and yours probably vary from mine.

BUT what you have to do overall is: practice what you’re comfortable with, stretch yourself humor-wise with experimental jokes (even if it’s just with a friend or two), and don’t suck. Hey, rule of three!

I have become a minor writing utensil snob

Tue, 17 Dec 2024 00:00:00 GMT

It’s day 17 of Blogvent, where I blog daily in December!

I’ve been hand-writing a lot more lately. They’re mostly just notes for classes or task lists, but I’ve really liked having a bit more analog to go with my digital workflows.

And, as you get into a given thing, you may start to improve your setup for that thing… and now that I write so much more, I feel snobbery overwhelm me if I ever have to use a normal ballpoint pen or something now.

I’m not a hardcore fountain pen nerd yet but now that I’ve tried some nicer pens and pencils, it just makes handwriting that much more fun to do. When a given writing utensil just glides across the paper in a smooth way, whew, it’s so satisfying!

Anyway, here’s my lightly snobby list of pens and pencils that I’m using now. Not mega snobby, just lightly snobby. I am not a major snob with $500 pens, just a minor one that tries to keep things in the double digits or less.

…for now.

Tombow MONO mechanical pencil
Uni Kurutoga Standard mechanical pencil
OHTO MS01 all-metal drafting pencil
Kakimori aluminum ballpoint pen
LAMY Safari fountain pen (specifically the Pikachu one!)
LAMY Pico ballpoint pen
Sharpie S-Gel pen

If I were to go more snobby, I’d love to try out more of the Caran d’Ache brand, but we’re not there yet. And may never be!!

Let me know if you try any of these though. I have really enjoyed them!

Introduce yourself to your remote team

Mon, 16 Dec 2024 00:00:00 GMT

It’s day 16 of Blogvent, where I blog daily in December!

Something that that a few of my teams have done well is introducing themselves asynchronously. It can be a hard thing to do! When you’re on a fully remote team and you’re seeing everyone’s face on Zoom for the first time, it’s a little nerve-wracking to figure out how to present yourself, how to “bring your whole self to work,” and not be a total weirdo.

What my team at GitHub does (and what I’ve seen at a few other orgs now, it’s catching on!) is we have a repository of “Human User Guides” full of details about each other.

It’s casual, but it’s helpful. We include things like:

Time zones/availability
Communication preferences (Slack vs Zoom vs email vs phone vs something else)
Things folks might misunderstand about you
Things everyone should know
How you prefer to get feedback
Things that you like to talk about, work-related and non-work-related

It’s really useful for getting to know your team, and giving your team a baseline to start with before that intimidating first call.

Some teams just call them “intro pages”, again at GitHub we call them “Human User Guides”, but I like the term “Talk to Me pages” to encourage actual chatter. I love being able to see that someone on my team also likes certain board games of mine, or even learning what not to bring up with someone. It’s really helped me jump into early conversations much faster.

If you like the idea of this and want to get started, here’s a template for a Talk to Me page that you can use yourself!

Also, one last note, you can totally implement this with an existing team, not just for new folks. I did this retroactively at one of my previous companies and it was actually really nice to have a “source of truth” for schedules and to learn/unlearn how certain people wanted to communicate who weren’t sure how to bring it up before.

Toodles!

How to make your RSS feed pretty

Sun, 15 Dec 2024 00:00:00 GMT

It’s day 15 of Blogvent, where I blog every day in December!

If you’ve seen an RSS feed link lately, you know that when you click on it, you’ll probably see a bunch of XML and might think, “eh, ugly, but at least I can pop it into my newsreader” and go about your day.

But what if you saw the link to my RSS feed?

That’s right.

I heard you gasp.

It’s beautiful.

Just like you.

I want more beauty in my life!

Same.

I found out how to add styles to RSS feeds from the website About Feeds by Matt Webb! It’s a useful website for explaining RSS feeds in general.

There’s a template linked at the bottom of the website, or you can find it right here. The file is an XSL file, which stands for “Extensible Stylesheet Language”, and it looks a whole lot like your usual HTML, and in fact, you style it with your usual CSS!

I made a gist of the XSL file that I use on my own blog here so you can see the styles I set up for it (starting on line 76).

Copy it and make it your own!

How did you add it to your website?

Oh yeah, great question. If you’re using Astro, it’s relatively straightforward by adding a stylesheet property to the rss function, like so:

export const GET = () =>
  rss({
    title: /* ... */,
    /* ... */
    stylesheet: "/rss-styles.xsl",
  });

And you put the rss-styles.xsl file in your public/ directory!

If you’re using my blog template (which you’re welcome to, it’s fully open source and free to you), I actually already added that line in the RSS feed generation, so all you have to do is pick out the styles you want and add the file to the public/ directory!

I didn’t include it by default because there’s some opinions about the limitations of styling your RSS feed, for example, styling the feed prevents the browser from automatically opening a newsreader application (which you might not care about, like me, but I didn’t want to force that opinion on folks getting started).

Anyway! I hope you enjoy making your little corner of the internet a bit more beautiful.

See you tomorrow, and don’t forget to subscribe to my blog (via email or RSS), or my newsletter (email or RSS)!

How to switch to Astro Content Collections

Sat, 14 Dec 2024 00:00:00 GMT

It’s day 14 of Blogvent, where I blog every day in December!

I wrote in a post yesterday about how I updated my blog (which is open source, and you can copy and use the template!) to use the latest and greatest from Astro and TinaCMS, and how I finally am using Content Collections now.

So… what does that even mean?

Great question. It’s all about how markdown files are ultimately converted to HTML on my website in Astro.

Before, I was using a function called Astro.glob() to load in markdown files to generate static pages in the template.

This worked well! I was able to call the function like so:

const posts = await Astro.glob("../posts/*.md");

And from there, I was able to pull the frontmatter (also known as the metadata) of each markdown file in my Astro components to build my blog layouts.

The frontmatter of all of my blog posts (including this one!) followed the same convention:

---
layout: "../layouts/BlogPost.astro"
title: "Some title"
slug: the-blog-url
description: "This is a description"
added: "Dec 13 2024"
updated: "Dec 14 2024"
tags: [technical, meta]
---

...blah blah...

Again, this worked well! Well enough that I fully ignored that Astro came out with Content Collections back in version 2.0 (and 5.0 just came out this month… it’s been a while).

That being said, when you fully ignore good things that come your way, you lose out on the quality-of-life improvements that open source maintainers make for you. Whoda thunk it?

The cons of `glob`

The main thing I didn’t like about the Astro.glob() setup is that all of my blog posts had to be in a folder inside of my src/ folder. As in, sitting right in the actual source code. I had tried some workarounds, but that was just how it had to be, all posts in src/posts/. Not the end of the world, but it didn’t feel right.

Astro.glob() also is being deprecated, in favor of Vite’s import.meta.glob(). Again, not the end of the world, and I think that function still has a place in certain instances, but it just wasn’t as optimized for content. A lot more parsing had to be done of the imported markdown frontmatter in general, too.

The pros of Content Collections

Content Collections in Astro, I’ve learned, are really what you should use for content, because they’re optimized for it.

You define a schema for your content (which introduces type safety), your folders of content can live anywhere (even outside of your repository!!), and Astro has some really nice APIs for getting single entries of content, and whole collections, as well as rendering that content.

So, all this being said, actually setting up Content Collections was a smaller lift than I thought it would be.

The first thing you do is define your collection schema:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const posts = defineCollection({
  loader: glob({ pattern: "*.md", base: "./posts" }),
  schema: z.object({
    title: z.string(),
    slug: z.string(),
    description: z.string(),
    added: z.union([z.string(), z.date()]),
    updated: z.union([z.string(), z.date()]).optional(),
    tags: z.array(z.string()),
  }),
});

export const collections = { posts };

And this assumes all of your existing content fits this schema “shape”! Astro uses Zod for schemas and typing, if you’re wondering what that z is. You might notice a couple things here:

My dates for my blog posts are either strings or dates, depending on the markdown file. This was a weird one to figure out (and it’s my own fault): The date object is the result of TinaCMS generating actual dates when I use its calendar component, and the string is the result of me generating the date in Obsidian before I publish (more on how I publish from Obsidian here). Anyway, the union function made that work great.
Where’s the layout? Oh baby, I’ll tell ya soon.

After that file is added, it’s a matter of replacing the glob calls everywhere else! Remember the glob code sample from before, now transformed:

// before
const posts = await Astro.glob("../posts/*.md");

// after
import { getCollection } from "astro:content";

const posts = await getCollection("posts");

And anything that references frontmatter, like post.frontmatter.title, would be swapped with data, like post.data.title, and that’s about it for finalizing the conversion.

You can see the full diff here of these changes.

But wait, what about that layout thing?

Okay, the one thing that I don’t really love about Content Collections is that you can’t define a layout in your markdown anymore.

I wasn’t actually using this, but I liked the idea of being able to say “this specific blog is special” and point at custom layouts from there.

That being said, there are workarounds that are actually pretty easy to work with, so I can’t complain too much.

My dynamic route post/[slug].astro (where URLs are defined for individual posts), which normally had the glob call plus the Astro <Content /> component, now has the layout defined there instead:

---
import { getCollection, render } from "astro:content";
import BlogPost from "../../layouts/BlogPost.astro";

export async function getStaticPaths() {
	let posts = await getCollection("posts");

	return posts.map((post) => {
		return {
			params: { slug: post.data.slug },
			props: { post },
		};
	});
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<BlogPost content={post.data}>
	<Content />
</BlogPost>

(this is all in the diff I linked above)

If I wanted to do a fancy layout for a certain post, I’d just have to pick a different kind of property to flag it in, and do some logic here. I don’t love it, still, but it works.

It’s done!

I hope this is helpful for you to understand why I made the switches, what it took, and how you might be able to apply them to your own Astro projects. I admit I dragged my feet for way too long on these updates because I didn’t understand the benefits (or how quick the changes could be), and I’m happy with the results!

See you tomorrow!

Updating my blog to use Astro Collections

Fri, 13 Dec 2024 00:00:00 GMT

It’s day 13 of Blogvent, where I blog every day in December!

My blog (you’re reading it!) is built with Astro, and has TinaCMS for posting content. It’s an open source template too that you can use to your heart’s content!

That being said, I have been doing a whole lot of writing lately, and not a whole lot of updating how this blog works. Now that Astro 5.0 is officially out in the world, I decided to work on some sorely-needed updates!

I’ll be pushing the updates soon after writing this post (because I’m still testing everything to confirm that everything is working as expected), but it’s been cool to (finally) learn the Content Collections API and learn about the new and improved Astro Content Layer.

Anyway short post today because I want to get back to coding and testing. Everything will look the same to readers, but under the hood it’ll be faster, cleaner, and more maintainable!

Update: It’s done!

I’m actually going to write a separate post about some technical nuances to know, but if you’d like to see what it took to update everything to use Content Collections and the latest stuff, this is the git diff for you to peruse.

Otherwise, if you’d just like to use the template, head over to the template repository and get started!

Choose kindness over pile-ons

Thu, 12 Dec 2024 00:00:00 GMT

It’s day 12 of Blogvent, where I blog every day in December!

A not so Hallmark-y moment

A few years ago (and most holiday seasons), it was trendy on TikTok to do mock Hallmark movies where some woman moves from the big city to her small town where her childhood friend works at a lumber yard and they fall in love and he’s Santa Claus. Or something. It’s pretty funny every time, so one year I joined in and made it very tech-oriented.

I don’t have the video anymore, but here’s the script I wrote for it:

I’ll have a black coffee, no sweets for me. The only cookies I care about… are browser cookies.

I’m a coder from the big city in Silicon Valley, I don’t have time for these small town shenanigans. I’ve been working for this promotion for far too long.

Wait, Joseph, is that you? The boy next door? No, you can’t buy me a coffee, I don’t have time for love. I only have time for speeding up my website, before Christmas!

You’re a single dad? I… forgot to have kids, I got so distracted writing parent components that I never considered being a parent myself.

You don’t want to be with me, I’m complicated! Wait, you know how to properly load balance a website for the holidays?

Wait… Joseph? You’re… Santa??

Ha ha ha, jokes all around.

But, little did I know, someone on TikTok thought I stole their content, specifically, because they also made a lot of “Hallmark movie” jokes.

I had shared the video, and then went to some work meetings, not really thinking about what was going on in my notifications, and came back to a FLOOD on TikTok of people threatening me, calling me a thief, and trying to pinpoint my location. I deleted the video quickly on all the platforms, and found that there was a person who thought I stole from them, and had made a video on Instagram saying to “go after me” because I stole lines that they worked hard to write.

I didn’t steal from them, of course, but I did see where they were coming from, purely because… Hallmark movies do all sound the same, heh. But at the same time, it was just so scary. I didn’t know how serious people were with their threats, and I didn’t know how to make it stop. I sent an apology DM to them, telling them I didn’t mean to take anything from them, and they took down their video about me.

I don’t join pile-ons

After that experience, gosh, I was just afraid of the internet. I got over it eventually, but comment after comment of someone yelling at you, saying that you suck in some way, feels like you’re being yelled at it real life. And as a woman, there’s an added level of being afraid for your own safety, too.

From then on, even when I disagree with the way someone approached something online, if there’s a large number of comments already yelling at them… I just don’t get involved. Until you’ve been on the other side of it, even when you’re in the wrong, you don’t know the stress that you’re contributing to.

It’s been good for me mentally and emotionally to just let things go more, in that regard. I do think it’s important to call out injustices and stuff, of course, and I still do, but if it’s a pile-on in someone’s comments, my one voice amongst hundreds or thousands is not going to be the one that changes things. It just becomes bullying, in passing. And it’s more of a burden on me than on them, at that point, thinking about what I contribute to.

There was a happy ending!

All this being said, the other creator eventually DMed me an apology, a few months later! They said that they realized that they were in the wrong when they saw that TikTok was all about remixing and riffing off of ideas, and that I was the first one who had ever made something similar to them.

It was really such a relief to get that message. I had gotten over it at that point, but it still felt like… a “lie” about me was undone.

Anyway. All this being said, the world is stressful enough: Be kind on the internet.

See you tomorrow!

The developer relations pendulum swings again

Wed, 11 Dec 2024 00:00:00 GMT

It’s day 11 of Blogvent, where I blog every day in December! I admit I don’t know where I want to go with this post, so I’m just going to write until I hit publish.

It feels like every 3ish years or so, there’s people saying that developer relations (or developer advocacy, or whatever you want to call it) is either essential, or expensive, or powerful, or useless. Dev rel is dying, and dev rel is thriving. So many opinions.

Now, it’s time for MY opinion!

When should I hire my first dev rel person?

Depends on your customer, depends on what you think a dev rel person can do, and depends on how much you’re going to be willing to trust that person.

If your core customers are not developers (like you have an API or something but it’s not something you’re actively using to gain more of your customers), you probably don’t need that person.

If you need someone to work on your docs, you may need a technical writer.

If you need someone to build demos for clients, you may need a solutions architect.

If you need someone to maintain a community for product retention, you may need a community manager.

If you need someone to make witty, viral content, you may need a marketer or technical content creator.

Dev rel does overlap with these things (and sometimes is these things and more), but it should be clearly defined (with success metrics!) before you throw a person into the deep end doing all of the above.

Who should I hire?

Honestly, some of the best dev advocates I’ve seen are engineers who just happen to really enjoy writing (or speaking or whatever medium they use to communicate with others), and understand the developer experience really well. Finding someone who can articulate a technical concept in a way that is understandable and clear is the key, and if I’m being honest… makes for the most fun job interviewing processes, too.

Should I hire an influencer?

Maybe. But that semi-famous person isn’t going to make your product successful if it’s not a good product. They might help you get eyes on the product initially, but it’s temporary unless you/they have a strategy to keep customers around.

If you don’t mind me wearing my smugness hat for a minute: I have warned so many companies about this. I feel like I say “I told you so” to so many startups I’ve advised over the years. Founders and leaders and VCs often love having someone on the payroll with a lot of followers because it means their product might also get a lot of followers. That doesn’t happen. I had a founder of a (now fairly large Series C) company actually DM me once saying that they wished they had listened to me on this point, saying that they had hired someone “YouTube famous” who worked so hard on their personal brand that they never really did anything for the company besides occasionally mentioning they worked there, and they had to start hiring again from the beginning.

Now, not all influencers are the same, blah blah. A lot of them are really excellent and have a following for a reason. But you shouldn’t hire them for the following.

(Hiring them for part time contract work though or for big launches to post on socials… that does seem to work pretty well for individual marketing campaigns if it’s in the budget and strategy!)

How should I structure a dev rel organization?

This is another “it depends” but I think that we did it really well when I first joined Netlify. Sarah Drasner blogged about it at the time, but as a bit of a TL;DR, we split up the org into 3 main pillars:

Technical writing: documentation, writing tutorials, and blog posts.
Integrations: building tools, it’s 100% engineering but building tools that make it easier for external developers to use our platform.
Advocacy: 50% engineering, 50% marketing. We built the demos, wrote tutorials, made content, had engineering team rotations, and served as the bridge between integrations and docs.

This worked super well for us. I’m at GitHub now, and it’s a larger org that covers a much broader spectrum. There, “Developer Relations” is the overall umbrella that advocacy, open source programs, education, and more are under, and there’s even more specificity in those categories. The company very much relies on dev rel to exist, honestly, which is cool (and hectic, but still cool).

I think once again, depending on what your strategy is, that will help you determine what your organization needs in terms of structure.

In terms of where dev rel is on the org chart… I personally think that it should be its own pillar, separate from marketing and engineering and customer success, but again, it’ll depend on your strategy.

Elephant in the room: should I go into dev rel? Layoffs are happening a lot and the vibes are weird.

Ugh layoffs are happening a lot and it sucks. But, I think if you want to go into dev rel, now is the time. The companies that are hiring for developer advocates and have a good strategy for them now, of all times, are the ones that probably have a sustainable organization going. Generally. It depends, again.

When sentiment is not great about developer relations, it’s usually the result of it not being done well.

“Not being done well” can look like a lot of things. It could be that it’s not measured in a way that proves to a business it’s worthwhile. Or, it’s the result of folks trying to just sell their products at conferences rather than providing something valuable to the tech community. Or, it’s folks yearning to be famous while working for a company that’s yearning to be famous. You get it.

Developer relations isn’t dying. I think it’s going through a period right now of evolving (just like it did in the pandemic when everything went remote, and in the years before that). If you can roll with the changes in the world, and have a good strategy, you’ll be sitting pretty.

See you tomorrow!

Noticing the little things

Tue, 10 Dec 2024 00:00:00 GMT

It’s day 10 of Blogvent, where I blog every day in December!

One of the things that I’ve learned from my toddler is just how many little things I’ve stopped noticing. It’s normal, of course, as adult humans, the things that are “usual” and not threats to us become basically invisible. But watching my baby run around and then pause to look at how a wheel turns, or how a closet opens, or how a plant looks, or how a light switch works… it’s magical. It’s all new, and that has made those things “newly new” to me.

I think as software engineers (or experts in any field, really), we develop our expertise by being able to notice those little details, and being willing to learn what those little details are. If a new developer comes to me with a React bug, for example, I’m often able to point it out relatively quickly, because I know which details matter, and which ones don’t.

It’s easy to get frustrated (or worse, complacent) about learning those little details, particularly when you’re picking up a new skill. If you’re trying to learn how to draw, you might not know how certain line placements will affect your overall drawing. If you’re learning how to play guitar, you might not know how fingerings for certain chords might change how you transition to the next portion of the song.

I don’t think I realized just how much I was willing to forget the beauty of little details in everyday life until I watched my baby start to learn the world around her. There’s always little details in everything, just below the surface, that we used to pay more attention to when time felt like it was infinite. I’ve learned that I can choose to notice those things again. I can be content with being more still in a given moment, to notice those things again.

Actively learning languages

Mon, 09 Dec 2024 00:00:00 GMT

It’s day 9 of Blogvent, where I blog every day in December!

I have been trying to learn Korean lately, as well as improve my Spanish (as we teach my toddler the languages at the same time). I’ve realized that without immersion or dedicated learning time, I simply don’t retain them as much (and I’m often just confused).

The classic learning apps

I’ve tried Duolingo for a while, and also LingoDeer, but they simply haven’t worked very well for me.

I’ve realized that Duolingo (and related apps), while fun, is… not a language learning app. Not for me, anyway. It has occasionally provided me with some nice refreshers, but I almost never actually remember what I “learn” on the app. Wondering if I was alone in this, I asked my mom, who had a ~3 year streak on Duolingo, for a basic sentence in her language of choice, and she wasn’t confident in her eventual answer.

I think it’s a really well-done “streak” app that makes you feel good about self-improvement, without much… actual self-improvement.

So, I decided to try different routes.

New approaches

For Spanish, because I lived in Spain for a bit and know the language fairly well, I’ve mostly gone about keeping up my skills in the context of my own life. I’ve been watching shows in Spanish more, listening to more Spanish media in general, and speaking with friends who know the language.

I also found an audio course app called Language Transfer that I highly recommend! In the app, you listen to a new learner pick up the language (they have other language options too, by the way), and the teaching methods are so impressive. In the words of my husband, “I’ve learned more from 10 minutes with this app than I did for years on Duolingo!” I promise I’m not paid or anything by the app, I just genuinely think it’s wonderful.

On the Korean language side, I found out that Korean consulates in various cities offer free Korean language classes! I just finished the “101” version of the class a couple weeks ago and it was a really cool learning experience. They offer them both in-person and over Zoom, all over the world! Two friends of mine took the same courses in San Francisco and Budapest, and we’re all able to practice with classmates and ask an actual teacher questions about what we’re learning.

These approaches have required more dedicated learning time, which admittedly has been hard to come by (especially with a toddler at home), but the results speak for themselves.

Passive vs Active learning

I’ve written about passive learning in the past, and I think Duolingo (and related apps) are really good at that. You might not pick up a lot, but you might remember a word or phrase here and there with enough repetition. I think there’s merits to passive learning, still, for certain skills.

But, for actual language learning (or deeply learning any specific skill in general), there needs to be an active element. There are so many options for active learning, whether it’s a class, a focused listening time, or just a conversation, but if you want to learn, you have to put in the effort beyond maintaining a streak.

I promise this wasn’t a blog meant to bash Duolingo, or any particular learning style. This is a call out to you, out there, those who may want to learn a language: look into classes. Figure out how to put in a bit more effort. It’s worth it!

안녕히 가세요 y hasta mañana!

Tracking side project income

Sun, 08 Dec 2024 00:00:00 GMT

It’s day 8 of Blogvent, where I blog every day in December!

This year, I put more effort into tracking how much money my side projects, contract work, talks, and other “non-day-job” projects made.

Why?

I mostly started because I was a part of a cohort of folks in a group called Big Cash Money (also known as DiscoLink Club, which sadly no longer exists) run by Saron Yitbarek, in which we had weekly check-ins about how we were making money in our day jobs, our side projects, our contracting gigs, everything.

The group was so refreshing, particularly because money is still a taboo subject! We would all talk about our goals and struggles regularly, and it was nice to have a private space to do that, (mostly) guilt-free. Ryan, the professional coach in the group, was great at yelling at us (lovingly) to push for more money and be less afraid to price things better.

Though the group doesn’t exist officially anymore, it was a really good mindset shift for me to work on. Tracking money, and actually putting more value on my own time, was really helpful for me in helping re-assess my own goals, and where I was putting my efforts.

How did you do it?

I did it in an incredibly manual way, with a plain ol’ JavaScript array of “activities” for a given month, and had a monthly goal number I tried to hit. I put it all in a CodePen template, so I could access it on any device I was using, without having to set up an actual database or anything!

My arrays literally looked like this (this is an actual copy and paste from one of the months I tracked):

//...
[
	{ name: "Newsletter sponsorship", amount: 1000 },
	{ name: "W-9 Crafter sales", amount: 317.95 },
	{ name: "GitHub Sponsors", amount: 26 },
	{ name: "Stack Overflow newsletter", amount: 250 },
	{ name: "Newsletter sponsorship", amount: 2575 },
	{ name: "Twitch subscribers", amount: 86.78 },
	{ name: "Newsletter sponsorship", amount: 1102.5 },
	{ name: "Redbubble sale", amount: 1.69 },
	{ name: "Udemy sales", amount: 3.58 },
];

(by the way, if you’d like to use the template, you can click the “use this template” button at the bottom to clone it to your account, update your goal amount, and then activities in that top array)

As you can see, it was not a particularly fancy setup, and the ranges of what money I actually made per line item were pretty wide. Some months consisted of a bunch of small things that made me less than $30 each, and some months I had a healthy newsletter sponsorship pipeline and contract work and conference talks that added up to much more.

The goals I set each month didn’t really have any rhyme or reason to them, except I knew some months would be more busy than others. So, those numbers ranged from 4 to 5 figures, depending on the month. I rarely actually met my goals, BUT it was really nice to have them written down, just to kick myself into gear a bit more often!

Will you do it again next year?

I can’t actually decide. I did find value in tracking things better (and I’m sure it’ll be helpful during tax season to have a more proper setup, too, rather than just piles of documents to sift through), purely to give myself some more visibility into how I was spending my time.

Tracking things lead me to cut some projects that were costing me a lot of time for little to no money (like Jumblie), and putting more effort behind larger projects (like my newsletter). Having actual numbers attached to decisions like that make it a lot easier to find a good balance!

All this being said, the main negative thing in this was just… the mental overhead. Thinking, “oh, I should track this,” for every single dollar I made, even when it was literally less than $2 from a sale, made it a… less enjoyable experience. A lot of this is my own fault of course, for trying to diversify how and where I make money (I love the concept of passive income and should blog about that at some point) instead of putting more of my eggs in fewer baskets.

I’m also very aware that I’m privileged to even be able to make money in different ways, and there’s a weird guilt there that Ryan tried knocking out of me (almost successfully, but it is very strong). I’ve worked hard to be able to earn sponsorships, viewership, readership, a whole fleet of ships. And yet… talking about wanting to earn more and be better at earning more makes me feel like I don’t deserve it sometimes. Eh. I probably need more coaching.

Anyway, all this being said, assessing how and where I’ve made money has been a really good exercise this year. I’m brainstorming how I can continue, without the mental overhead, and also refine how my time is spent more and more.

Extra resources

If you want help with money and side projects and all that jazz, here’s a few things that might help!

See you tomorrow!

Doing things that don't scale is about finding value

Sat, 07 Dec 2024 00:00:00 GMT

It’s day 7 of Blogvent, where I blog every day in December!

There was a point in the past few years where it was very trendy amongst founders to say, “do things that don’t scale.” That meant doing more manual work (like individually emailing cold calls for sales leads, or not optimizing certain technical things and just ship faster, or talking to human beings in person to try your product).

I do think there’s merit to the concept. Doing things that don’t scale/are not fully optimized or automated often can mean more human connections, and even human errors, but I think it works.

Something I tried earlier this year is asking some questions of my new newsletter subscribers:

What do you do?
What do you like to read?
How did you find this?
What is your favorite joke?
What is your dream?

So, whenever someone subscribes, they have the option of responding to an email with these questions in them.

It has been delightful reading and responding to these questions!! I’ve built such nice connections with people, even if they’re small. I loved it so much I ended up sending out a survey to existing subscribers too! That was also awesome, but definitely turned into a, “oh no, this DOES NOT scale!!” situation and I am still slowly but surely responding to folks’ answers, several months later (I think I’m almost at 100 responses left? Ish? It is endless).

I did try to do some optimizations here (for example I answered these questions myself and have an AMA repo on GitHub), but have really tried to stick to just regular ol’ human emails.

Is there room for more? Maybe.

“Doing things that don’t scale” doesn’t always have to be just manual repetitive work. It could be taking courses or coaching, asking for help more often, iterating on a problem in smaller increments, or even just not optimizing something too early.

I will say, though I have loved this concept of doing things more for the human connection side of things, I am a software engineer at heart and genuinely enjoy optimizing things in a way that can automate away repetitive tasks.

But, thinking about optimization too early can stop you from shipping things. So many of my own projects (and projects that I see my friends take on) end up dying before they’re ever launched because they need to be perfect way too early.

Anyway. I think the lesson I’ve learned is to try to not pre-optimize, and do the slower thing, until there’s enough value to be gained from scaling up. Defining that value… is up to you.

See you tomorrow!

33 of my own joke concepts that have never seen the light of day

Fri, 06 Dec 2024 00:00:00 GMT

It’s day 6 of Blogvent, where I blog every day in December! It’s also my 33rd birthday, and I don’t want to spend too much time in front of a screen today.

So, here’s 33 of my own joke concepts that I had written down, that I’ve never fully finished writing. There could be something here. There could be nothing here.

I wonder if sharing only the unfinished concepts might make me actually try to turn them into something? But eh. Most will probably live and die in this post. Let’s go.

I need to stop eating cold turkey gradually
“Counter intuitive”: a detective who specializes in mysteries in the kitchen
“Barber boxers”: boxers made for barbers, endorsed by Barbara Boxer
A small girl who is an investigator and people always say that she makes cute observations but she wants to be known for acute observations
Crying by the fire means that the fireplace becomes a crier place
A fart feels winsome… or should I say WINDsome
Tim and Buck are best friends, they are the Tim Buck Two
A robber shoots through a fish store and says, “holey mackerel” before he leaves
“Apple Woman” : superhero who shoots apples out of her hands. Good at fending off doctors.
Brochure sounds like, “bro, sure”
Red head named Gail, she goes by Ginger Gail
Jen and Eric are generic
Wildebeest that is bewildered is a bewildebeest
A Pokemon and Aladdin crossover where there’s a Magikarpet
A prisoner going down a wall is condescending
Ciudad sounds like “see you, dad”
A white labeling naan business called “Naan of your Business”
Make Tests Not Testes: SDETS Against Birthing Males
Refactor sounds like reef actor
(Carpal) Tunnel of Love
Marsupial sounds like “Mars hoop eel” or “Mar soup heal”
Donkey named Hotay, sounds like Don Quixote
Poultrygeist
Reptile murder → cold blooded → you need gator-aid (sports)
If you want to date a flamenco dancer you need to castanet wide
Reality check bouncing
“Sync or swim. Why not both?”: slogan for a synchronized swimming team
to the tune of Danny Boy: Oh Poopy Boy, the pipes the pipes are clogging
Sponsors spawn sores
Professional net work on Lincoln, something about Abe Lincoln going fishing but it’s also LinkedIn
Cannibals encouraging each other: “we’re cannibals, not CAN’Tibals”
A guy named Gus who is fun is fungus
A Cass kit sounds like casket

Welcome to my brain. Hope you enjoyed the tour. See y’all tomorrow!

Ship it anyway

Thu, 05 Dec 2024 00:00:00 GMT

It’s day 5 of Blogvent, where I blog every day in December!

I often see folks online saying they don’t feel like building that app, teaching that course, or writing that blog because someone else has already done it.

Stop that!

There’s so many problems to be solved, even when some people are working at solving them already.

When you’re thinking about differentiating your idea/post/course/app/thing, ask yourself:

Can you build it better, or simpler?
Can you apply yours to a smaller or larger audience?
Can you apply yours to a different audience?
Is it something you like anyway? If not, can you shape it to be something you’ll like more?

It’s okay if the answers to these are no, but it might help you refine your concepts to think this way.

You have a unique voice that others don’t have. Not everyone learns best from the top teacher out there, not everyone enjoys the writing of the most prolific blogger you know, and not everyone uses the most popular app for their problem. You don’t know who might benefit from what you offer, and you won’t know until you go for it!

This is all easier said than done, of course. I have so many half-baked ideas in a pile that I’ve (almost!) abandoned because I see someone has solved/shared what I wanted to. But maybe if I tell you to do it, you will encourage me with the stuff you ship first. Eh? Eh??

See you tomorrow!

Writing good words for tech folks

Wed, 04 Dec 2024 00:00:00 GMT

It’s day 4 of Blogvent, where I blog every day in December!

I’m often asked about how to make blog posts, websites, social posts, and other things more interesting to developers. It’s kind of hard to answer, because there’s not really a perfect formula that has worked for everyone, and I can say “it depends” all day long. But, there’s a few rules and guidelines I’ve learned over the years that have helped me in general.

The AIDA formula

This is an older formula that’s pretty tried and true specifically around marketing and social media. AIDA stands for:

Attention: Grab the attention of the reader.
Interest: Give them facts to create (and keep) interest.
Desire: Tell them stories to foster desire. Share features and benefits.
Action: Lay out the specific action that you want the reader to take.

Developers are a small enough niche that catering these points to them is often a balance between showing how technical you/your product/whatever you’re trying to share is, and showing how you can solve their problems in an easier/more interesting way without diminishing their skills. They can see through the buzz and the big statements you might try pushing. Which brings me to…

A developer voice

Being consistent with your voice is key. You don’t want to pop out a ton of memes and then go, “hello valued customer, best regards!”

Typically, the developer voice and copy style you’ll want to go for is:

Relatable
Relatively casual
Free of jargon (unless it’s using specific terms for your developer audience)
Easy to understand

If you try to go beyond that, you’ll miss your mark and you might get snark in the Hacker News comments. This is something where I do think practice makes perfect, and the more you write, the more you’ll find your voice (for both you and/or the brand you represent).

Be useful

Beyond all of this though, I think the best advice I can give you is to be useful. Ask yourself:

How can I be helpful to someone?
How can I put out good things in the world?
How have people gotten value out of what I’ve shared?

Being useful to others helps build trust with them. Building that trust is hard to earn and easy to lose, but if you continue to try to write content and create things that are overall a net positive (and not just SEO buzzwords), you’ll actually get devs reading what you have to say! And they might even like it!

I hope this was helpful. Again, this isn’t a one-size-fits-all guide, but these points have really helped me improve my own writing skills, both personally and professionally. See you tomorrow!

Combining tools for fun and profit

Tue, 03 Dec 2024 00:00:00 GMT

Today is day 3 Blogvent, where I blog every day in December!

I love combining small tools and making utilities that make my life a bit easier. There are two tools (one I made and one I use) that I have really been loving:

My personal URL shortener cass.run
The bookmark manager Raindrop

I combined these two to make something pretty handy, and I’m gonna tell you about it!

The URL shortener

My URL shortener is on GitHub, and it is way smaller than you’d think. You can find it at cass.run/shortener.

If you want to build one for yourself, here’s how:

Make a GitHub repository with a _redirects file in it (you can see how mine’s structured in the link above, or some more details in the snippet below)
Deploy that repo to Netlify
Add a custom domain to the site you just deployed to Netlify

Your _redirects file should have a fallback URL (mine is my personal website), and then everything above it should be structured as the route that you want, and then the link to that route, like so:

/gh            https://github.com/cassidoo

#fallback
/*             https://cassidoo.co

So in this example, whateverdomain.foo/gh would point to my GitHub profile, and whateverdomain.foo/example would point to my website.

You can have as many of these URLs as you want (I have about 50 in my current shortener), and to add a new one you just make a new line with the route and URL!

There’s also an npm package that you can use to quickly add short URLs via your CLI, if you want to use that (I really like it, myself).

The bookmarking tool

I’ve talked about Raindrop before in my productivity app roundups, and I stand by it. It’s an awesome tool. It works as a browser extension, as a mobile app, and as a desktop app on all the platforms, and lets you very easily and quickly tag and categorize your bookmarks.

One thing in particular that I like, and want to talk about here, is the fact that you can use it to make public bookmark collections! I’ve seen folks use that to make “job boards” of listings they find, or collections of videos across platforms. It’s great because you get a URL that you can share with friends easily, and it’ll stay updated as you add/remove/update your bookmarks in that collection.

All powers combined??

You see where I’m going with this, eh?

My favorite combo of these tools is one that has made me some money, but more than anything it has saved me time when people ask me about it: I made a public collection of my referral links to various platforms and services, and pointed my URL shortener to it!

cass.run/ref

When you head to this very easy-to-remember URL, you can see the discounts and offerings you get from things I refer you to, from SaaS services to mattresses (literally, I bought a mattress recently and they have some pretty good deals for referrals, who knew).

Before I had this combo of tools, I would always forget if I had a referral link to a given service. Usually the perks aren’t huge, sure, but little things do add up over time if you remember. Now, if someone asks me for a particular site or service, I can keep those links all in one place, and access it in a really quick way. And we all benefit! It has saved my friends money, and it’s made me money/credits/etc. Wins all around!

But wait, there’s more!

Okay there’s not that much more. But again, I love this concept of using tools for something super specific, and making something useful. I’ve combined CodePen and Obsidian to make quick scripts, I’ve made tiny browser extensions that do one thing really well… those small utilities really make huge gains in productivity (and fun, in a lot of cases), particularly when they’re just for you!

The what and the what now: note-taking

Mon, 02 Dec 2024 00:00:00 GMT

Today is day 2 of Blogvent, where I write a post every day in December!

I am very much an Obsidian girlie. I absolutely love writing down my blogs, my newsletters, my thoughts, my snippets, my vents, my blurbs, and my bits and bobs in one place that’s easily accessible if I need to remember it. The “second brain” concept is so nice for someone like me who is admittedly forgetful about things unless it’s written down somewhere.

Collecting information is my hobby

That being said, note-taking does turn into just glorified data-hoarding, often. We have an absolutely ridiculous amount of data at our fingertips. So many of my bookmarks that I save are for “when I want to read that one article that will make me a better developer in that one aspect, someday!” So many of the courses I’ve bought are out-of-date by the time I sit down and remember that I actually want to learn the topic (but I have HOURS and HOURS of content for as long as I want!!!). There’s even memes about how book-buying and book-reading are fully separate hobbies.

We’re addicted to having information at our fingertips, even if it is information that we log ourselves, that comes from our own brains and surroundings.

Being better at thinking, not just collecting

What we really need to do as note-takers and thinkers is think less about the “what” and more about the “what now?” when it comes to writing things down.

Something that has worked for me to make my notes actionable and not just a place to hoard information (which I still do, but less) is break my notes down into two categories:

Things I want to recall later
Things I just want to write down to get my thoughts out

For the first, I try to add tags, blurbs, and search terms in a way to make it easy for my future self to find the note. Obsidian (and other software too) has concepts like tags, aliases, and linking between files that makes that part much smoother and less arduous.

For the second, I am a strong believer in brainstorming verbally and in writing to get thoughts out, and to think better. Translating ideas into your own words is how you understand a concept. I purposely have no proper system (tags, aliases, etc) for these kinds of notes. Freeform writing as a form of thinking is valuable in itself, and the relic of what you thought through is not the goal.

This isn’t enough. Can I read more about this?

All this being said, as you think about building the PERFECT note-taking system for yourself (so many nerds do it, you’re not alone), yes, there’s more for you to see.

But don’t just bookmark these links for your data hoarding. I’m watching you.

Fighting open source spam with interaction limits

Sun, 01 Dec 2024 00:00:00 GMT

Hey y’all!

I’m starting my latest Blogvent series, where I write a useful blog post each day in December! I haven’t done this in a couple years now, so it’ll be a good exercise. Let’s boogie!

Oh no, spam!

Something I ran into recently is spam in some of my open source repositories. My repos aren’t massive, but even just a little spam can seem overwhelming, whether it’s someone making a bunch of issues, or random accounts making pull requests, or random people reviewing existing PRs, or just a lot of spammy comments.

Yes, you can report the things that might be popping up, but if it’s not just one account doing it, then it can feel like you’re just stuck watching the numbers get bigger.

Moderation to the rescue!

Luckily, I learned that there’s moderation settings you can enable in your GitHub repositories (or in your account overall) that can help you!

In your GitHub profile settings, under Moderation, you can go to Blocked Users, Interaction Limits, or Code Review Limits to restrict which users can interact with you and your public repos (“interact” meaning commenting, opening issues, creating pull requests, or approving/requesting changes across pull requests).

You can say that you want this to be just for a day, a week, all the way up to 6 months! Blocking an account though is permanent until you unblock them.

This is a great way to protect your open source repositories across your account without having to make them permanently inaccessible.

If you want to do this just in one repository in particular, you can! Go to your repository settings under Moderation options and you’ll find the same settings as before.

Phew.

Now you can have a nice cool down period and write code to your heart’s content.

See you tomorrow!

Being forced to upgrade

Sat, 30 Nov 2024 00:00:00 GMT

Update: I upgraded.

I’ve been going back and forth on if I should replace my iPad for a few weeks now. It works perfectly well for how I use it (mostly watching shows, taking notes, drawing, and a game or two). I take care of it, keep it in a case, and it’s in near perfect condition after I got it refurbished a little over 5 years ago.

But… I keep getting flashbacks to my iPad before that one. That one I had for about 6 years, when I started to get notifications that apps were no longer working on it anymore, and slowly but surely it became unsupported.

It’s kind of a bummer to think that even though my iPad is perfectly good for how I use it, I probably should spend money to replace it if I want to keep using it. I actually was partway through writing this post when I saw that someone else had written almost the exact same thing about their iPhone just a few days ago. I like being able to keep my stuff well-maintained and use it until it can’t be used anymore. My Kindle from 2011 is still going strong! I replace parts of my desktop computer as needed! I replaced some parts of my headphones recently and they’re good as new!

But, alas, “planned depreciation” is a thing for so much of our hardware nowadays. I was looking at other “sustainable” tablets like the Daylight Computer which does seem more my speed, if it had all the apps I would want to use on it. I’m hoping that more companies come out with longer-lasting, maintainable options, like the Framework Laptop. Being able to fix your own stuff (or at least buy something that lasts as long as you’re willing to take care of it) might be harder for a business to grow quickly, but it’s better for the environment, and ultimately your wallet as a consumer, too, even if you have to pay a bit more upfront.

Eh. Until I decide to take the leap and upgrade because I have to, I’ll be perusing r/BuyItForLife and shaking my fist at society, as one does.

Haunted by my own projects

Tue, 26 Nov 2024 00:00:00 GMT

I feel like my own side projects haunt me sometimes. I want to build new and shiny things, I buy domain names, I get 90% of the way there… and then eh. Time for something new and shiny again.

But now, I’m at a point where I just finished a super busy time at work, it’s a holiday week without a ton to do, and I have the energy and motivation to code… and I am stuck. I really, really want to work on something new from my pile of project ideas.

But, I am also haunted by my own side projects that are almost done, some that are so close it would almost be stupid to not work on them.

…

But they aren’t shiny anymore!

And the annoying thing too is that these are projects that I really do want to exist in the world. I think I just know how much work is involved to get them going again, and that amount of work is daunting (but something new is unknown and thrilling).

I really don’t know how to overcome this. Probably with good ol’ “discipline” or something. I wrote this post with the intention to get me in the groove of just working on anything that might partially exist already. It has kinda worked. Maybe. We’ll see what I ship next.

Two months at GitHub

Sun, 10 Nov 2024 00:00:00 GMT

I’ve officially been working at GitHub for two months, today, as Senior Director for Developer Advocacy!

It’s hard to believe it’s only been two months, honestly. I joined right at “crunch time” where everyone was deep in prepping for GitHub Universe (where I spoke during the keynote as well as co-hosted the livestream), and in a few weeks we have Microsoft Ignite, and on top of all of that, I had a family wedding in Asia thrown in there, as well as a U.S. presidential election. Everything has been so dang packed, and I admit I’m exhausted.

All this being said… my team is really awesome. I work with people who really care about developers and open source, and providing the best resources we can for as many people as we can. Everyone is really into their own hobbies and interests and families, and having that be front-and-center has really dictated the team culture. Having an 18-month-old (!) now myself, I’m really happy to be surrounded by folks who know that work is secondary to life outside of work, even in crunch time. Everyone works so hard, and pursues such excellence in what we produce, and still we close our laptops at the end of the day. That’s been a welcome change from the startup life I’ve been living for so long!

I do like that GitHub feels kind of like a startup still, within the megacorp that is Microsoft. Joining a very established organization is really interesting in terms of learning processes and knowing limits of what you can pursue, product-wise, compared to being on a tiny team building something from scratch. I think being in a role that pushes me, but also that I can disconnect from, is what I need in this stage of life, and I can have fun doing it! I’m really excited to see “non-crunch time” and get to know my team even better, and build even more for open source developers everywhere. I’ll keep ya posted!

I fell asleep in a driverless car

Tue, 05 Nov 2024 22:10:13 GMT

While at GitHub Universe last week, I started trying out the Waymo service that my coworkers were raving about, which is basically… an on-demand taxi with a robot driver.

In my first ride, I solidly screamed and then video called as many people as I could to show that I was in a car that moved by itself. What a concept. It freaked me out.

But then… I took another one and another one. And I think the thing that alarmed me the most was how quickly I forgot that there wasn’t a driver in the front seat.

The thing that struck me even harder was the fact that I didn’t have to worry about the driver in the front seat. I didn’t have to keep a pulse on the doors locking in case the driver was a creep, I didn’t have to make any uncomfortable conversation, I didn’t have to have a family member follow my ride juuuust in case. I just had to get in, and wait for a ride from point A to point B. It was like being a man!!! Not a care in the world!!! Personal safety who???

Which led me to one day, being exhausted from a very full day’s work, where… I accidentally fell asleep in the car. It was playing some smooth ambient tunes and driving relatively safely, and… I woke up to it letting me know that we arrived back to my hotel. I felt comfortable enough in this driving robot car that I took a nap and just trusted that it would get me to the right spot. I don’t know what the larger implications of this are, but just know that I am kind of weirded out by this, and… I do actually recommend trying driverless cars next time you’re in the Bay Area.

A note on the future of Jumblie

Tue, 01 Oct 2024 16:00:00 GMT

Today marks a full year of Jumblie puzzles! I made the theme “appreciative” for a reason: I am so grateful for all the love the game has gotten over the past year.

Without burying the lede too much: I’m going to stop making Jumblie puzzles now.

The game will still work, daily, it will just loop from now on, where it starts from Puzzle #1 after Puzzle #365.

How the game was received

I have loved seeing how much people like the game! It made my day, consistently, to see people playing it and enjoying it.

It’s been particularly cool seeing the international community embrace it, with fans of the show The Devil’s Plan playing it, and folks making their own versions in their own languages.

I also had the pleasure of showing it to some large publications that you know of, without revealing who they are, and popular puzzle creators like Josh Wardle (of Wordle). It actually was looking like some folks might acquire the game a few times, but none of those conversations came to fruition (which is okay!).

The game averages between 800-1200 players a day, which has been really fun to see consistently happen, and again, I’m so grateful for that!

How it came together

I’ve written before about how I built Jumblie and how I upgraded it over time, and quietly added smaller features like dark mode, different accessibility modes, animations, an archive, user-submitted puzzles, and more.

Building the actual game was a labor of love, for sure. There are definitely features that I wanted to add and didn’t have time to (like different hint systems and difficulties), but overall it felt nice to have a fairly polished, legitimately used product.

How it fell apart

Y’all… being a puzzle editor is incredibly hard, time-consuming work. If you don’t have a puzzle that can “generate” itself like a sudoku or maze game or math game… you need a human in the loop.

Before you jump into solutions-mode and say something like, “BUT HAVE YOU TRIED AI???” Yes, yes I have!

Ultimately, making puzzles every day for a year for a free game (that actually costs me time and money) revealed to me that it was too much to maintain. I tried AI/LLMs to generate them, but they’re not particularly good at sticking to letter-counts in words, and would kind of fall apart after a certain number of themes (or get repetitive). I tried using human suggestions, which were awesome, but there simply weren’t enough of them. I tried using the Datamuse API and other various thesaurus tools, but they only got me so far. I tried so many more things. I even tried talking through through how to make it easier/faster/less overhead to generate puzzles with professional puzzle editors and puzzle enjoyers alike, and they all ended up saying the same thing: Jumblie is the type of puzzle that needs a human editor.

Yes, it’s only one puzzle a day. But again… I’ve been doing this for a year. It’s a lot of brain-power to try and come up with yet another theme that is accessible to enough people to keep it going. It’s time to admit that unless I actually hire a human editor (which adds more to the costs), or get the game acquired (which is still possible, and I’m still open to it), I can’t keep this up.

So… now what?

That’s about it. I’m not as bummed as I thought I would be! In a way, saying goodbye to maintaining Jumblie feels like a failure, but in a larger, louder way, it just feels like closing a chapter in this book of side projects.

The little sigh of relief I did when I chose this direction was probably the biggest indicator that it was the right move for me.

Anyway, all this being said: thank you again for playing, for reading, and for checking out my little game.

You can still play Jumblie here
You can find the source code here
You can ping me to re-up acquisition conversations on socials!

Sleep is the most magical thing in the world

Thu, 26 Sep 2024 21:53:33 GMT

My 17-month-old baby has been going through an absolutely awful sleep regression, and most of the month of September has been a sleep-deprived tornado. Because she can’t fully sleep… I can’t fully sleep. We tried everything. My husband and I switched off taking care of her, we tried rearranging her bed setup, we tried letting her sleep with us, we tried feeding her more before bed, we tried different pajamas, we tried a new bath-time routine, we tried taking her on more walks and to the park to get her more sleepy… nothing worked. We even asked our doctor, who shrugged and said, “unfortunately it’s normal, and the only fix for this is time.”

It’s a rough month for this too, because we all developed colds at one point, AND I started my new job at GitHub. It… has been very, very hard. I started cutting out side projects. I stopped watching TV. I was going to bed early, knowing that it didn’t matter, because I wouldn’t get much sleep anyway. I stopped practicing music. I stopped reading. Pretty much everything slowed to a stop.

And then today, glorious beautiful day, we all slept through the night for the first time in weeks with no interruptions.

Y’all… sleep is life-changing. Such a stupid thing to say, because yes, obviously, we should be sleeping. But everything is better now. I want to code more. I am more motivated at work. I am eating more. I want to start new projects. I want to sing and dance. I want to write. I am! I’m writing this, right now! I could fly!

Anyway. If you are reading this, this is your sign to go sleep.

If you are a new parent… the sleepless nights will end soon, I promise.

A Quick Guide for Building your own GitHub Copilot Extension

Wed, 18 Sep 2024 05:00:00 GMT

You can build your own Copilot extensions now! It’s really, really fun to be able to chat with Copilot with your own prompts and APIs, and have full integration with your codebases, as well.

There’s a few things you’ll need to do to get this working:

Register a new GitHub App
Clone an existing example app locally
Set up the Copilot settings for your app
Follow your dreams

Register a new GitHub App

To make a new GitHub App, head to your Developer Settings and hit “New GitHub App”.

You can name it anything you want (but it should be unique), and you can change any of these settings later. Under your Homepage URL and your Callback URL, for now, you can just put https://example.com, or any other website you want to use. If you don’t have something in the Callback URL, it won’t work!

Now from here, make sure you uncheck “Active” under Webhook.

And finally, under Permissions, go to “Account permissions” and set Copilot Chat to “Read-only” access!

Blammo, that’s all you need for this now. You might want to make your extension only installable on your account right now, but again, you can change that later.

Clone an existing example app locally

Now, keep that Settings tab open, but open VS Code and clone the Blackbeard Extension to your machine!

Make sure you open your Terminal from inside of VS Code for this next part:

Run npm install and then npm start. You should have a local server now running at localhost:3000.
In the “Ports” tab, click “Add Port” and plop in 3000. This will give you a Forwarded Address that we’ll need to use later!
Right click that Forwarded Address, and set “Port Visibility” to “Public” (this is very important, otherwise you won’t be able to test your extension).
Now right click it again, copy that URL, and let’s go back to your browser.

Set up Copilot settings for your app

With your GitHub App settings open in the tab from earlier, click “Copilot” in the menu on the left-hand side.

Set your App Type to “Agent”.

Put your URL that you have copied in the URL field.

Your description can be anything, and you don’t need a Pre-authorization URL at this point!

Follow your dreams

You’re all set now to test out your extension! You can open up GitHub Copilot chat in VS Code directly, or on GitHub.com.

To talk specifically to your bot, start a message with @ and then your app name, and it should appear in the autocomplete. Chances are Your App Name will be @your-app-name.

Now ask it some questions and get a pirate-y response! You can now adjust the existing prompt in the project’s index.js to your heart’s content, add whatever API calls and scripts you want to add additional functionality, and make your Copilot experience better than ever.

If for some reason you are getting a server error, try restarting your server, and recreating your forwarded URL! It’s rare, but it does happen and a quick reboot + recreation will do the trick.

Until next time!

Side quests

Sat, 07 Sep 2024 00:00:00 GMT

I think it’s a good thing for people to have side quests in their lives to keep things interesting. They don’t have to be anything particularly grand, like finding The Antidote or something, but just a passive side hobby of sorts.

I have had various side quests in my adult life, and my two longest-running ones are:

To find the perfect Bloody Mary cocktail
To find the perfect rendition of O Holy Night

For that first one… I’ve gotten close. Sadly the two most perfect ones I’ve ever tried were both at restaurants that closed in the pandemic. So, that quest continues.

For the second one… y’all, Jennifer Hudson just announced her first Christmas album coming this winter. I am THRILLED. I already asked if O Holy Night will be on it, and she responded (!!!) and said YES on track #5!! After recovering from the shock of Jennifer noticing me, I realized with a thrill that this side quest of mine that has spanned over a decade will potentially, likely, come to a very exciting close.

As a total side note, I’m really excited that Jennifer Hudson is putting out this album. My favorite singer ever is Whitney Houston (Jennifer is a close second), and I always thought that Whitney’s Christmas album arrived too late, when her voice wasn’t what it once was. I think if she had sung O Holy Night in her prime, she would have taken that top spot and my quest would have been unnecessary. Mariah Carey’s is good of course, excellent even, but it’s definitely an exploration of range more than a justice to the song, in my opinion.

ANYWAY.

I think I might need to rustle up a new side quest!

Time containers

Tue, 03 Sep 2024 16:18:46 GMT

I am jobless, and yet I am so, so busy. How the heck does that happen?

I think it has something to do with that concept of “a liquid fills its container” or whatever the exact wording is. All of the contract work, podcasts, videos, side projects, and other things I have been putting off are finally being done because I have the time to do it, and I’m filling that time.

I was talking about it with Saron Yitbarek the other day (DiscoLink Club) and we both were saying that we have become so dang efficient since becoming parents. We have much more limited time, so we know that we have to just do the thing and not procrastinate whenever we have a free minute. I think the combo of not procrastinating and my newfound hardcore efficiency have made for a really “high output” time, which is cool, but I genuinely can’t tell how sustainable it is.

All this being said… I do have a new job coming (at GitHub, next week, yay), but all I can think is… how will I have time for it?? Time to establish a new “time container” for myself, yet again.

Voice lessons taught me that I should be... true to myself

Thu, 29 Aug 2024 17:47:56 GMT

Amongst my funemployed adventures, I started taking singing lessons! I’ve always wanted to try but was… honestly kind of afraid to. It felt too vulnerable to ever try before. I like singing, I especially enjoy singing karaoke, but I definitely make up for my lack of skill with enthusiasm.

Karaoke, Korea-oke?

My family has a trip to Korea coming up to visit the in-laws, and they are very good at karaoke. The last couple times we went with them were downright embarrassing. You may say, “nooo, I’m sure they were nice!”

They were.

They were lying.

When you have an aunt beautifully belting Barbra Streisand in her preferred key, and then you follow with shouting a tragic attempt at Kelly Clarkson… you don’t feel super great about your performance.

Karaoke is a deeply cultural thing over there (as it is in many Asian countries). They have phone-booth-like booths on the streets where you can quickly belt a song on your break. They have arcades where entire floors are dedicated to karaoke. No matter your demographic, you sing karaoke in Korea.

Maybe this time I should kick off some lessons

So, I decided to actually do something about my lack of skill, in preparation for the trip ahead: I signed up for singing lessons. I was deeply intimidated and filled with regret the moment I got her intro email saying, “okay, bring a song you’d like to sing to our first lesson!” I know that I shouldn’t have been, but I just felt so vulnerable, instantly.

I drove up to the first lesson with the song Maybe This Time by Liza Minnelli. It’s a hard song, but I really enjoy it and it has a good few belts in there that I wanted to try to improve.

Each singing lesson starts with some breathing exercises (particularly to practice belly breathing, look it up), and then some scales and various exercises to relax your mouth and throat. We would also do some diction exercises, which involved saying a script that was kind of tongue-twister-y, if you wanna try it yourself:

What did you do to die today, at a minute or two ‘til two?
A thing distinctly hard to say, but harder still to do.
And the dragon will come at the sound of the drum
with a rat-tat-tat-tat-tat-tat-tat-tat-tattoo.
At a minute or two ‘til two today, at a minute or two ‘til two.
To sit in solemn silence in a dull, dark, dock,
In a pestilential prison, with a life-long lock,
Awaiting the sensation of a short, sharp, shock,
From a cheap and chippy chopper on a big black block!

In the first lesson, she had me do scales and tested my pitch-matching, to see what we needed to work on specifically. Luckily I didn’t have pitch issues, and my tone was okay, but I was doing a lot of… unsustainable singing. I wasn’t breathing well between notes (very shallow breathing), I was clearly nervous, my placement wasn’t great (she could visibly see how tense my neck would get at certain pitches), and I would sound kind of hoarse by the end of any given song. She had me do an audio recording of every lesson and whew, it is painful listening to that first one.

But, that’s what lessons are for! A lot of people go into lessons saying that they want to increase their range, or improve their pitch, or soften their tone… I admit all I really knew to say was, “I want to sound good when I belt.”

With Maybe This Time, a grand majority of my “fixes” (outside of shaking off the nerves) were just… breathing. The better I learned how to breathe, the better the song sounded, the louder I could sing, and I could actually get to the end of the song without going raspy. One of the exercises (that kind of blew my mind) was to practice singing it while sounding nasal, like by straight up holding my nose. A lot of belting happens there, and leaning into the nasal does sound better than you think, if you do it right! I didn’t ever really “perfect” this song, but it was a good one to get started, I think. It helped me learn a lot of basics and bad habits I had to break.

I felt… on my own

After a few lessons with that song, the next one I brought was On My Own from Les Misérables. Yet another fairly difficult song, but I liked how it started kind of “quiet” before ending on a big belt. Y’all… this song is HARD. There’s a lot of voice acting you have to do to make it sound the way it should. There was a point in one of my lessons where my teacher had me read it in a butchered British accent to force me to practice singing it with “rounder” vowels. Plus, throughout all of this, she was having me sing at myself in a mirror, which is horrifying. When I got to my “final” performance of that one, the main thing I really took away from it is that I had to act it out more than sing it out, and fully pretend to be the character, otherwise I’d really just get “in my head” with it and be too self-conscious.

I lamented

For the last song in my batch of lessons, I really wasn’t sure what to do. I was both feeling better about some parts of my singing, but also realizing that being self-conscious and the psychological aspect of it was holding me back more than anything else.

I remember driving to the lesson just listening to a random shuffle of all of the songs I know, trying to decide which one should be next. Soon enough, one of the songs that popped up was Diva’s Lament from Spamalot. It’s such a stupid song, but I love it. If you don’t know that musical, the whole thing is just spoofs of other musicals, and this song in particular is about a character who’s annoyed that she had a really good part in Act 1, but not in Act 2. I was laughing at it in the car and thought, “okay, yeah, that one will be fun.”

When I listened to the song with the teacher before trying it on my own, it hit me how it was just as hard, if not harder, than the other songs I had picked. It had classical elements, pop elements, and a LOT of belting. She was definitely trying to be nice to me and was like “you know… let’s try it, it might give us some interesting things to work on!” but I knew in my heart she was like, “girl, you are a fool, but I’ll let you do what you want.”

So, I got up, and sang the song with its exaggerated accents, silly lyrics, and belted as best as I could. At the end, my teacher stood up, walked up in front of me, pointed at me, and said, “this is the song we’ve been looking for.” My rendition wasn’t perfect by ANY means, but she said that because it was a silly, tongue-in-cheek song, I wasn’t in my head as much, and I was just singing theatrically, for the fun of it.

That moment… shocked me, more than I expected it to. I walked away from the lesson fully stunned. It was the first time I didn’t have to think about “myself” or the act of singing. I don’t think I realized how freeing that would be until it hit me, right then.

My goose is cooked silly

I am… a silly goose. And it took me 7 singing lessons deep to realize that if I sing songs that let me act like a silly goose, that let me be who I truly am, I can focus on my actual singing skills instead of being intimidated by the act of singing.

My last lesson (for now) was this week. I brought some other more silly and theatrical songs, and my teacher gave me some recommendations that could help me impress the family in Korea. I’ve got my marching orders, and I feel way better about the trip coming up, and how I’ll keep singing from now on. Like my teacher said, “there’s no such thing as bad singers; the ones who think they are just haven’t practiced correctly.” (by the way, if you’re in Chicago and want a teacher recommendation, reach out to me!)

This has been such an interesting and fun learning experience this summer. I feel like I know myself better, and my voice better, in ways I didn’t expect (and in ways that were truly under my nose the whole time). I’m really happy I did it, and I encourage you to try, too!

Making a simple React microphone component

Mon, 26 Aug 2024 21:36:03 GMT

More than once lately I’ve had to make some kind of React microphone component that records audio in the browser, and then you do whatever you want with the audio blob you get there (store it, transform it, use it with a transcription library, whatever).

The components out there in the wild for React microphones are… unmaintained. I’ll generally leave it at that. They’re not bad, necessarily, but some of the repositories lead to spam, some are full of broken links, and most of them that I could find haven’t been updated in more than a few years.

If you want something done, you have to do it yourself

I decided to make one of these components from scratch!

Here is a link to the 125-line gist if you just want to use it and not have to read the rest of this blog post. So impatient. But I understand. Life is challenging.

Anyway.

There’s a bunch of things you generally have to account for with microphones. I didn’t go deep into browser compatibility with this one (I’m sure like… Opera or something would probably have trouble with this), but there are some nice built-in modern browser features that’ll get you pretty far, here:

navigator.mediaDevices: this lets you access the user’s microphone (or camera, if you want that)
getUserMedia: this lets you get user permission for the aforementioned media devices, and produces a media stream.
MediaRecorder: this lets you actually record things

All of these combined with some React state variables for tracking each of them, a useEffect for doing browser-side things, and then a native <audio> tag to showcase the preview of your recorded audio, and voilà, you are all set.

It’s all easier said than done, of course, so that’s why I put it all in a copy-and-pasteable gist. Outside of the base functionality, I also made a variable for a maximum recording time (you don’t need it, but if you want to transcribe something or upload something, I figure limits are good), and some small Tailwind styles to show some animations around the button.

Use the component. Record your dreams.

Why JavaScript variables don't always update

Mon, 19 Aug 2024 16:16:02 GMT

I was helping a friend of mine with some technical interview questions, and a lot of them were very much like “what does this code output”-style questions (which I deeply dislike, I think these questions are more indicative of someone knowing really specific aspects of a language and less about software engineering, but I digress). One of them though I thought was interesting enough to write a technical explanation.

Values and objects

Look at this JavaScript code:

let [CLOSED, OPEN] = [{}, {}];

CLOSED = {
  cake: OPEN,
};

OPEN = {
  fish: 5,
};

console.log(CLOSED); // cake is {}

Why is it that CLOSED is not { cake: { fish: 5 }}?

It’s because of how JavaScript assigns values and objects. In JavaScript, when you assign an object to another variable, you’re not creating a copy of that object. You’re creating a reference to that object.

So what’s happening here is that CLOSED and OPEN are both initialized as empty objects {}. When we assign CLOSED to { cake: OPEN }, it’s pointing at that empty OPEN object.

When you change OPEN to { fish: 5 } in this way, it assigns OPEN to a new object, and leaves the previously empty object behind. I say it like that because CLOSED still refers to the old empty object, and not the new one!

I say “in this way” because there’s another way to change OPEN: modify the existing empty object in place, so that CLOSED.cake references it even as it changes.

let [CLOSED, OPEN] = [{}, {}];

CLOSED = {
  cake: OPEN,
};

OPEN.fish = 5;

console.log(CLOSED); // This now logs { cake: { fish: 5 }}

Do you see how this is different? Instead of creating an entirely new object for OPEN to be reassigned to, we modify the properties of OPEN instead. CLOSED is still pointing to that object, and it’s just not a “left behind” object anymore!

I hope you don’t have to have this as an interview question, but you may run into similar problems as you build systems that use this as a concept.

User management example

Let’s say you have some kind of user management system. You might have an initial state of user accounts:

let state = {
  users: [
    { id: 1, name: "Cassidy", role: "admin" },
    { id: 2, name: "Yesenia", role: "user" },
    { id: 3, name: "Alan", role: "user" },
    { id: 4, name: "Gabor", role: "user" },
  ],
};

If you wanted to promote a user to be an admin, you’d want to change the user object (by reference):

function promoteToAdmin(user) {
  user.role = "admin";
}

(to reiterate: this changes the existing user object)

If you wanted to remove a user, you would want to change the state object (by value):

function removeUserById(userId) {
  state.users = state.users.filter((user) => user.id !== userId);
}

(this creates a new array with the filtered result)

So, if you want to promote Yesenia to admin:

let yesenia = state.users[1]; // Reference to Yesenia's object
promoteToAdmin(yesenia); // Directly changes her object

console.log(state.users);

Try this in your console! You’ll see that the users array is all the same, except that Yesenia is an admin now.

If we wanted to remove Alan next:

removeUserById(3);

console.log(state.users);

Again, this does not change the original users array, but returns a new array and assigns users to it.

If you run this yourself, note in your console that Yesenia is still an admin, showing that the update persisted!

Wow, I love JavaScript

Good for you. I have a love/hate relationship with it. But I mostly love it too, I guess. Kind of. I should value it more. Eh?? Ehhh????

Okay anyway, I hope this is helpful!

Layering CSS gradients

Wed, 14 Aug 2024 00:00:00 GMT

Did you know that you can layer CSS gradients on top of each other?

I first started playing with the concept when checking out this tool for making mesh gradients.

But, seeing how it worked for larger background images, I decided to try it out as a background for text, and made a demo in an attempt to make it look like a marker highlight effect!

See the Pen Subtle text highlight in pure CSS by Cassidy (@cassidoo) on CodePen.

Feel free to copy it for yourself!

Traveling to technical events: A guide

Sun, 11 Aug 2024 00:00:00 GMT

I was asked recently by Schuster about my traveling “stack” as a technical person. As someone who used to travel full time for work, and still travels to the occasional conference, I do admit I’ve gotten pretty good at it. So, hopefully this can be helpful for you!

Also to be incredibly clear: this is a “guide” for work-related solo trips. When I pack for a family trip or with my child for any reason, that’s a whole other ball game.

Packing

I pack fairly light. I think people often think they will read more, code more, work out more, write more, etc. on a given trip, but the reality is… you probably won’t. Don’t bring that deck of cards. Bring an e-reader instead of multiple books. Don’t expect too many outfit changes.

I don’t use packing cubes (though I hear they are great), but I do pack things up in little rolls (kind of like the ranger roll) and follow almost the same list for every trip. I wear layers on the plane so I can use a given hoodie across multiple outfits. I never pack extra shoes unless it’s flip flops for a hot place.

My packing list is almost always, for an n day trip:

IDs/passports
Chargers + their devices (phone, laptop, maybe iPad or Kindle)
Headphones
Small notebook + pen
n shirts
n-1 pants/shorts
n pairs of socks/underwear
Pajamas (if n > 2, 2 sets)
Toiletries (toothbrush, makeup bag, toothpaste, comb, deodorant, and if it’s a nicer event, a hair straightener or curler)
Hoodie (usually I just wear this on the plane, but if n > 3, bring another)

I think packing light saves your bacon more often than being prepared for every potential scenario!

Specific gear recommendations

I have tried so many backpacks and bags, but this is my latest “stack” of them that I can happily recommend!

Eagle Creek 40L duffel - When n <= 3, this bag is perfect for me. It’s spacious enough that I can put all of my clothes in it easily, it can “expand” to a larger size if needed, and it’s light enough that I can carry it through an airport without straining my weak arms. Plus, it’s durable! I’ve been able to put it through a lot over 5+ years and it still honestly looks like-new.
Baboon to the Moon canvas tote - If you’re doing a day trip or something that doesn’t involve an airplane, this bag is sturdy and holds a ton. Literally my entire packing list above could fit in this bag if I wanted.
Topo Designs Rover Pack Tech - I got this bag as a gift and it’s a fantastic backpack. It is compact by default, but has a lot of compartments and can fit your essentials in it. When I pack this, it has all of my non-clothes items in it, with room to spare if needed. The “tech” version on their website is more expensive than their “classic” and I admit I don’t know enough about the difference to recommend one over the other, but overall I really love the bag.
Peak Design Everyday Backpack V1 - In terms of organization, I think this is the best backpack I’ve ever owned. I think it’s best for for day-trips and local trips. I did travel on flights a lot with it and I do like it for that, but the Topo backpack wins for me now purely because of weight. Because Peak Design bags are originally designed for photography, they are very padded, and can be pretty heavy with your stuff in it. That being said… I still love it and don’t mind that, depending on the trip. I think calling it “everyday” is accurate, because it’s good for around town or going to your local meetups (I specifically link to the V1 version of this backpack because it’s the version I own and it’s way cheaper than the newer versions, so you can decide for yourself if you want to go in this direction)!

I was going to link my suitcase I’ve been using here, but it was discontinued, so all I can say is… get one of those plastic or aluminum hard-back ones that you can carry on.

I also use an (also discontinued) mini backpack, often, if I don’t need to carry my laptop with me. I think this is the closest bag to what I use but it’s kind of pricey, so… you decide. For “mini” bags I’ve also seen this sling and this pouch in the wild that seem really nice. You don’t have to use a fancy brand! The fanny pack I use the most is a random one I found at TJMaxx for $10.

I mentioned notebooks and pens before, too! For notebooks I don’t really use anything fancy. I have some off-brand Field Note notebooks (I think the “real deal” are waaay too expensive for a tiny notebook, seriously, just go to your local Target or something and find the “fake” ones), and I use a pen that Ben Hong recommended to me: the Lamy Pico! You don’t need to be fancy here, I just think it’s good to be able to be analog sometimes and be ready to write things down, even when your batteries are dead or your internet is down.

Jet lag

Sleep on the plane for your destination’s time zone, and eat snacks as soon as you wake up. It helps! You will probably be tired no matter what, because events can be a bit draining, but meals and food along your destination’s general schedule helps a bunch.

I admit if my trip is short enough… I just kind of muscle through it, nap on occasion, and I’m often awake way later than I should be. When I was in Berlin a few weeks ago I watched all of season 3 of Bridgerton instead of getting proper rest, because I am a fool. Don’t be a fool.

Booking flights and lodging

Everyone has their preferences for booking their own flights and lodging, so the best advice I can give you here is: sign up for every loyalty point system you can. You might almost always use the same airlines for everything, or have a favorite, but if you’re ever using a flight or hotel that’s not your usual norm, it’s nice to get those points that you can use for later.

Pay attention to how your points can be used, if you aren’t going to be able to take advantage of them as much! For example, I had some Marriott Bonvoy points that were going to expire because I hadn’t stayed in one for a while, but I had juuuust enough that I didn’t want to waste them. I was able to redeem my points in their online shop for some room sprays and gear, instead of losing them!

Scheduling

You will almost always have less time than you think you will. People always want to meet up, last-minute events will come up, and you will just be tired. I went to Figma Config a few weeks ago and I literally had 3 breakfasts one day because there were so many people to meet!

So… prioritize. Book the things that you definitely want to go to, have a “nice to have” list, and otherwise, leave time for rest and ad hoc gatherings! My favorite thing to do when I visit a new place is to have a very high-level plan on the things I really want to see, but then truly just leave the rest to “go with the flow” and act like I live there. It’s cool to get to explore a new place and see where the people take you. Your mileage may vary, of course!

Networking/humans

The best part of events is “the hallway track” (you know how there’s different speaker “tracks” per event? The hallway track is the part of the conference where you meet people in the hallway and talk outside of the official talks)! Taking advantage of the trip and actually meeting people pays such dividends in your career. Get to know people, add them on socials, and follow-up. Email/message the people after the event and just say it was good meeting them. Start building those relationships!

I’m not going to go too deep into this now because I have elsewhere, and I think this podcast in particular that I did a few years ago will help you out, and the book Build Your Dream Network by J. Kelly Hoey is one of the best on the topic, as well!

Have fun

This might be a silly note to end on, but I mean it, technical events are so dang fun. I met my husband at one, I made some of my best friends at them, and almost all of the jobs I’ve ever had could probably be traced back to them. Don’t be too stressed about who you’ll meet. Everyone’s human, and go enjoy the humans, and then sleep a whole lot afterwards (after following up with the folks you met, of course)!

Happy travels!

Analog girly

Fri, 09 Aug 2024 00:00:00 GMT

Am I an analog girly, or am I just a snob?

Probably both. I feel like the more experienced and “deep” I get into tech, the more I retreat into… low-tech. I enjoy pen and paper. I have fun with my typewriter. I want DVDs instead of streaming. I like using a point and shoot camera instead of just my phone’s camera.

I like not relying on the internet or some level of availability to be entertained or to do tasks. I like owning the things I own, and not thinking about what algorithms are watching me back. I like not being interrupted by notifications when I’m doing something.

Granted, I say this as a software engineer who builds and relies on software and tech overall. Technology and various levels of personalization have given me and many others a lot of good. But kind of like what I’ve written about before, I really like feeling “uncontrolled” by the algorithm-fueled suggestion of the day.

Anyway, I don’t know if I have much of a point beyond this. This blog, this space for me (and you!) to have on the internet feels right, and I want more products and spaces like it, and less like the dystopian sci-fi movies. So I guess… yeah, I’m a snob.

Building the Micro Journal

Sun, 28 Jul 2024 00:00:00 GMT

I am writing this post from my new digital typewriter! It’s called the Micro Journal and it’s open source, designed by Un Kyu Lee!

I built it earlier this week, and I am already in love with it! I had been looking for a distraction-free writing device like the Freewrite or the AlphaSmart for a while, but never took the plunge because they were either too expensive, or… just not cute. I know aesthetics shouldn’t matter for a very practical device, but they really do, especially when it’s supposed to be distraction-free. You don’t want to be distracted by ugliness, heh. Anyway!

When I stumbled upon the open source project on the r/WriterDeck subreddit, it looked like the perfect combination of cute, and relatively inexpensive to put together. Plus, I had a lot of the parts already that I would need to build one!

The original creator Un Kyu Lee was a delight to chat to and work with. He printed the case and did the initial soldering, and then I took over with the rest!

The rest

When I say “the rest” I mean installing the battery, the switches, and the keycaps, making a keyboard configuration file, setting up a loading screen, setting up a Google Drive sync script, and flashing the latest firmware. It was a lot, but was easier than I expected it to be!

On GitHub, there’s a build guide that has all of the details you need, if you want to build one yourself. Because I’m a snob, I went a bit overboard on my keyboard customization.

I lubed up some NovelKeys NK Dry Black switches, and used DSS Tecla for the keycaps (which, in case you didn’t know, is a set I designed)!

I admit these steps took way longer than I anticipated. I had to take a razor to the plate to make sure the switches fit well, I had to fix some layout problems more than once… but overall, it was pretty smooth!

I spent quite a bit of time customizing and testing out my keymap until it felt natural to me. I’ve used orthogonal keyboard layouts before, but this one didn’t need most of the usual function keys, so my layers could be really intuitive! Here’s the map that I ended up with, in case you want to do something similar.

Once everything was physically finished, the only final steps were to flash the latest firmware, and set up the Google Drive script. Once again, I have to give kudos to Un Kyu Lee for making this so easy to do! The fact that it’s simply just adding some configuration to the SD card is a genuinely pleasant experience. I was able to make a little custom loading screen, change the background and foreground colors in the text editor itself… this little machine is now “done” and I couldn’t be happier with it!

Was it worth it?

Heck yes. I honestly wish I just bought one of these typewriters earlier. Not having anything to do but just write makes me work and think so much faster, I genuinely think that everyone should try this out who wants to write even a little more!

I might be drinking my own Kool-Aid on this, but I don’t care! This was such a fun project, and this simple (and powerful!) functionality I have now makes me want to gush about it all the time. Even having small sit-down sessions with it to brainstorm ideas is something I have really loved doing this week.

Anyway, one project from my never-ending pile of them is now COMPLETE!

Getting paid is weird and sometimes hard

Thu, 25 Jul 2024 17:21:24 GMT

I’m mostly just typing out my feelings right now and I don’t know if this will turn into something coherent.

Most of the projects I put out, and the work that I do in public, are free. Some of it is paid, but overall I enjoy giving away free things.

That being said, I do like getting paid on occasion (what a concept), and it’s kind of a bummer when I am hit with the realization that I should be making more than I actually am, or that I won’t make as much as I hoped to.

For example:

If you’ve subscribed to Scrimba and taken my course there, awesome. I worked hard on it. I make nothing from that. I did make some upfront, but I haven’t made money on it in about 4 years.
If you’ve watched any of the very professional-looking Prismic videos from 2022 that I’m in, thanks! I had opinions and shared them for a whole day of filming! I was never paid for that.
If you’ve bought my DSA Scrabble keycaps, amazing! They’re beautiful! I worked so hard on them! The original manufacturer/distributor Clackeys went bankrupt and I never made anything from them.

(I’m not trying to bash these orgs or the people in them, please don’t go after them)

Bleh, anyway, it’s not the end of the world to not get paid for some of these things. I’m very privileged to be in the tech industry where I make enough that it’s okay for a lot of my work to be free for others. I think I am particularly bummed these days because my startup Brainstory officially shut down this week, and because I just confirmed some of the things where I thought I would make money won’t actually make any.

I’m in the latest cohort of BCM (also known as Big Cash Money), and it’s been really wonderful to be around people trying to actively improve their lives and financial well-being. I think these non-money-making things are standing out more to me these days because of that, as well (in a good way).

I shipped a project called W-9 Crafter earlier this year (which I blogged about) and BCM helped me figure out pricing, and the conversation I had on Twitter after I made some sales floored me:

@cassidoo: It took a lot of people actually telling me that this was worth money to actually believe it! It’s wild, I’m now wondering how much I’ve missed out on I admit 😅
@ryanflorence: Literally millions in your case I’d wager 🫣
@jhooks: i’d agree
@cassidoo: oh no
Link to thread

Anyway. Getting paid is hard. Or rather, it’s both easy and hard. I think the mental shift is hard, the concept is easy, but then when things don’t go the way you expect, it’s hard again. If I never expected to make money from things where I thought I would make money, it would be easy. I don’t think I’m even making sense anymore. I should go try and ship something. Capitalism is calling!

Actually try on your job applications

Sun, 07 Jul 2024 00:00:00 GMT

I know several companies (particularly startups) who are hiring right now, and because of the state of the market, they get tons of job applications coming in. Their small teams simply can’t handle the massive influx sometimes, so they have to filter on things that may seem trivial to applicants.

If you’re going to apply to a company, big or small, I always tell people to actually write a cover letter, actually double-check your grammar, actually try to seem interested. I often get met with resistance, where folks say something like, “oh, but nobody actually reads a cover letter,” and, “how can I put in that much effort for every single application, I’ve already filled out 50!” To that I say: you’d be surprised how many humans actually read your applications, and build a workflow that works for you so you can apply to several companies without taking too much time per application.

Recently, I helped a startup filter applications. They have a very small team and needed some extra hands to work through and review the large amount of them. There’s some clear indicators (sentence structure, phrasing, etc, check out this study for some specifics) when someone is mass-applying with AI, or just throwing a resume in the pile. When I was reading through some of the answers people submitted to questions, I saw so many applications where someone thought that nobody would actually be reading them, or where they just threw in keywords but no actual responses, or they just didn’t seem to care.

There was a rubric that this startup came up with to disqualify candidates to better focus on the high quality applicants. The guidelines seemed harsh at first, but ultimately necessary. If the application fell under one of these bullets, they were no longer reviewed:

Left any questions blank or N/A
Didn’t include their full name
Didn’t capitalize their name
Didn’t respond to the location or time zone questions
Portfolio/LinkedIn/etc links in application don’t work

Now, once again, these might seem harsh or trivial, but when you think about the humans trying to hire for their small team, sifting through hundreds or thousands of applicants, this checklist is an easy way to flip through candidates quickly to see who actually put effort into the application for the role.

Some folks might say, “wow, if you reject me based on me capitalizing my name, I don’t WANT to work there,” and that’s fair, sure. But you could also just… hit shift and capitalize your name. It takes less than a second. You could give it a quick once-over to make sure your application looks good. If you put in the effort to make your job application look professional, you’ll almost always get further than someone who didn’t, especially in startups.

And because I always get messages around advice like this: I’m not saying this “appearance” of professionalism is how it should be, but it just is, a lot of the time. Play the game, get the job!

The Productivity apps I use in 2024

Mon, 01 Jul 2024 00:00:00 GMT

I often get asked what my favorite tools are and how I use them to get my work done, and I’m writing this both to answer that question, and also for me to just paste a link to this post next time I’m asked. Efficiency!

I wrote about this last year and most things are generally the same, but I do have some updates!

Also: This post will not cover my code editor(s), terminals, or other developer tools. This is just a list of the tools I use daily to get my tasks done! Also, all of them work across operating systems. I use both a PC and a Mac, so that’s important to me. There might be better options out there for one machine over the other, but that’s not my jam.

Obsidian

Website

I take notes with Obsidian, write my newsletter with Obsidian, write blogs with Obsidian (like this one), keep track of projects with Obsidian, plan classes with Obsidian… I’m alllllll in on Obsidian.

It’s a local-first markdown editor. I love that I can keep everything local to my machine (so I don’t have any slow load times and can work offline), and just write markdown without anything getting in my way. I wrote most of this post in it, on an airplane without WiFi!

Beyond that, they have an open plugin + theming setup, and you can pay for syncing across devices as well. I often jot down quick notes on my phone, and then I access them later on my computer to flesh them out, and it’s perfect for that.

Dabble.me

Website

Dabble.me is a private. email-based journal. I’ve been using Dabble.me for literally over a decade and it’s the only journal I’ve been able to consistently work with, probably because it’s just super convenient. It emails you regularly (depending on the frequency you set) asking how your day went, and will occasionally remind you of previous entries saying, “one week ago you wrote…” or “two months ago you wrote…” etc.

I have absolutely loved this service and is probably my favorite one overall, just because it’s a treasure trove of memories for me at this point. Sometimes my entries are super short like, “I played way too much Minecraft today, ugh.” and sometimes they are very long essays of me ranting about work or life or food or something. It’s not so much a “productivity” app so I wasn’t sure if I should include it in the list, but it’s a consistent enough tool for me that I thought it deserved a shout.

Raindrop

Website

Raindrop is an all-in-one bookmark manager. It’s one of those apps where I used the free version for about 5 minutes before deciding to pay for it forever, because it works perfectly. It works as a browser extension, as a mobile app, and as a desktop app on all the platforms, and lets you very easily and quickly tag and categorize your bookmarks.

It lets you do public bookmark collections, so for example if you head over to cass.run/ref, that’s a public collection of my referral links to various services. It also lets you save permanent copies of your bookmarks (so if something goes offline, you still have access to it, I’ve saved some of my favorite blog posts this way), does a full text search of the pages you save, and annotate web pages, too.

Notion Calendar

Website

Notion Calendar is a keyboard shortcut-powered calendar app. I’ve been using it for a couple years now, and it was recently acquired by Notion and rebranded (it was previously called Cron).

It lets you quickly use keyboard commands to see your teammate’s calendars, share availability, view multiple timezones, and create events. Luckily the Notion integration hasn’t taken away any of these core features, and hopefully more nice things are to come!

Sukha

Website

This used to be called Centered, but they rebranded with some leadership changes! Anyway, when I use Sukha, I get more work done, simply put. I was a little slow to get into it at first, I had to give it a second chance, but now I can’t imagine getting all that I want done without it. I sometimes have trouble focusing throughout the day when I have a lot to do, and Sukha helps a ton with that.

Sukha is a flow state to-do app. It’s kind of hard to explain quickly, because it does so much while being pretty simple, too. You plop in your to-do list for the day/session/whatever, each task has a certain amount of time assigned to it, and then you hit start. It’ll play some music designed to help you focus, and it has a coach that speaks to you about how much time is left in your current task, gives you breaks, and pokes you when you’re distracted. It also has an optional thing where you can have your camera on while you work, which is weirdly good at keeping you feeling focused.

You can use promo code CASSIDY for 20% off!

todometer

Website

This is a shameless plug, but I use todometer for task management, and… I built todometer.

Here is the repository if you’d like to see how I built it (full disclosure: I have some rewriting plans, but I’ve got other things to do, so if you make an issue, I’ll get to it… someday).

Other things

I do use some other tools for more specific tasks rather than “general productivity” so I figured they might be good to list here! Heads up, some of these are referral links.

Buttondown - I use this for publishing my newsletter, and for my blog’s email notifications.
Deckset - This turns markdown into presentations! Obsidian does this well, but Deckset has some pretty themes. It’s Mac only, which I don’t love, but for presentations on the go, I like that they can look nice with Deckset.
Google Workspaces - I admit I reluctantly signed up for this one. I wanted to be able to use multiple custom domains for my email, but the tools I use (like Notion Calendar!) were only compatible with Google products, rather than other email providers like Fastmail. But, it’s working for me, so I can’t complain too much! Here’s some referral codes for Starter (Q34YN69J9DL9TUU) and Standard (L3H6NVMMU3U377F).
Fathom Analytics - I mostly use this for my own curiosity! I use it to track metrics on Jumblie and my website, specifically.
Freshbooks - I use this for invoicing and keeping track of consulting clients! I have been eyeballing other solutions, but it works for me that I’ve been happy enough with it for a few years now.

That’s it!

I’ve tried a lot of different tools over the years, and this is just my current “stack.” I do think that it’s worth reassessing your tools fairly regularly. I used to use other ones, like Bear, and Notion, and Vimcal, and Trello, etc, and they all worked for me at the time, but figuring out what you like and don’t like about your “stack” is super helpful for upgrading how you work over time.

It’s not just the applications, it’s the dedication to them that really make them work for me. If something is scheduled on my calendar, whether it’s flow time or dedicated time to one specific task, I follow it. If I put a task in todometer, I have to get it done that day.

If you don’t commit yourself to your tools, or try to over-engineer how you use them, they become extra overhead to getting things done. You don’t want the perfect work setup to get in the way of you actually working. Keep that in mind as you hunt for tools that might work for you!

Byyyyeeee see you next year!

Figma Config recap

Sat, 29 Jun 2024 00:00:00 GMT

I spoke at Figma Config this year! The whole event was kind of a blur, but also such a great time.

I was MCing the developer track, which had some really awesome talks around design and development. Here’s a playlist of all of the talks if you’d like to watch them (you can see how they were organized in the agenda here if you want to find a specific one)! It’s hard to pick a favorite, but I did particularly enjoy hearing Josh Wardle speak about how he made Wordle (also, he played my game Jumblie backstage, which was very fun for me)! I also really loved how Sara Vieira live-coded her Figma plugin on stage.

This event was… so huge. Thousands and thousands of people waiting in lines for hours, hundreds of meetups happening in and around it, not to mention other events like the AI Engineer World’s Fair happening just down the street. It was intimidating, but hosting the track alongside Jason Lengstorf was a blast.

Probably my favorite part of the event, kind of like at The Merge a few weeks ago, was that a bunch of folks from my Discord group came!! I had never met several of the people in that group in person, and some I hadn’t seen in years, so it was really wonderful to have that time together.

Good ol’ friendship, good ol’ networking, it was a fun time.

Being funemployed, and all that jazz

Sat, 22 Jun 2024 00:00:00 GMT

In case you missed my LinkedIn post or tweet about it, my team is open sourcing Brainstory, eventually shutting it down, and we’re separating as a team.

It’s been bittersweet, but enough time has passed now that I feel less sad about it and more reflective, and looking forward more!

Reflecting on Contenda

I learned a ton in my time at Contenda. It was quite the journey and one of the biggest learning experiences of my career. Our team was (and is!) awesome. They’re scrappy, and everyone was willing to put in a lot of work to come up with good, thoughtful products. Plus we came up with really excellent memes, which was really the backbone of the company.

We went through several pivots, as young startups do, and with each one we really worked together to see what we could salvage, and what we should throw away. This last iteration, Brainstory, was probably my favorite. If you don’t know what it is/was, it’s an app where you speak out loud with a digital coach, and it uses socratic questioning to force you to speak more and get your ideas out. Unlike ChatGPT and other LLM chatbots, it doesn’t give answers, it just keeps pushing you. Anyway, it was going well enough that Contenda started rebranding, and we leaned into it as our flagship product.

Honestly, it was going well, but after a while, we realized that we had a really nice hammer, but we didn’t know what nail we wanted to hit. We were making money, but not enough to sustain an 8-person business. We kept trying different angles and avenues and target audiences, but we just couldn’t hit that inflection point for the “hockey stick growth” you need as a VC-backed business. I started spearheading some acquisition efforts, and so many of them went just well enough that they felt good, but never well enough that we were able to save everyone’s jobs.

Slowly but surely… we were burning out. The team was getting smaller. We took salary cuts. We realized that we might have to do yet another pivot, fully from scratch, and that kind of “pre-seed” level work is incredibly intense. I was grappling with my own limits as a new parent, unable to do the “nights and weekends” level of work that our investors expected, and our team was just getting… tired. Our CEO was starting to do that work on her own, and it just wasn’t fair to her.

Anyway, there came a point where we had to rip off the band-aid and part ways. It sucked. I was really happy to open source Brainstory, at least, to keep it alive in some way, but it was a major bummer to be on that call where we said that scary phrase, “I think we’re done.”

I’m particularly happy though that we’re all still friends. So many times I’ve seen startups break up because founders have a huge falling out, or people argue to the point of never wanting to see each other again. I think we were all feeling a little wounded, but also ready to move forward and be glad that we did what we could, and tried our hardest.

Looking forward

This month has been pretty dang busy, honestly. Earlier this year I booked a bunch of talks (where I originally was going to promote Brainstory, and now I can just blab about whatever I want! Woo!) at some events this month, so even though I’m thinking about my next role and what I want to do in general, I feel like I’m working as hard as I would if I still had a full time gig. I’ve been working on (read: over-engineering) my website here, planning out some of my projects that I’ve been putting off, and just spending as much time with my baby while I can between events.

After being in startup leadership for the past couple years, I’m definitely trying to be intentional about where I might go next. I made a little list of what I’m thinking of for a future role:

Musts

Flexible work schedule
Nice people
Decent salary
Ability to work on my side projects

Must nots

Heavy on the politics
They try to own my time/projects outside of work

Nice to haves

4 day work weeks
Enough comp + benefits that Joe (my husband) could be a stay-at-home dad
Education budget
Unlimited vacation
Fitness/wellness budget
Working in/on open source in some way

Now, I’m not sure if I’ll be able to find something that checks all of these boxes, and I’m sure some of these seem pretty picky. But, I figure if I put it out there, I can at least have a list to refer to if I need a gut check.

Until then, I’ll be speakin’ and hackin’ and bloggin’!

Greetings, future billionaires

Mon, 17 Jun 2024 18:38:24 GMT

You know that meme phrase, “Wow! If I had a nickel for every time [x], I’d have two nickels— which isn’t a lot, but it’s weird that it happened twice. Right?”

Today, for the second time ever, I met someone who is friends with a person who became a billionaire, and that now-billionaire has made them their personal software engineer, and they just work for that person full time and make an incredibly generous salary.

Both of them work on absolutely random projects that range from app prototypes to… fixing submarines. It blows my mind. I asked one of them how their now-billionaire friend has changed and he said, “eh, he drives a much nicer car to the grocery store, and travels really, really well, but the rest is kind of the same.”

The scale of a billion dollars is so unfathomable. You could pay someone a salary of a million dollars for a thousand years, and never run out of money, because you make more than that on just interest alone. I will never not be floored at the concept. You could solve so many of the world’s problems, and still live a perfectly comfortable life.

Anyway, hey future billionaires, lmk if you want me to be your personal software engineer. I probably can’t fix your submarine, but I could make you a reeeeally performant web app and tell you some decent jokes, all for the measly price of me never having to worry about my bills, childcare, or healthcare costs again!

The Merge in Berlin recap

Sun, 16 Jun 2024 00:00:00 GMT

I spoke at The Merge in Berlin this past week! It was a huge, 1000+ person event, with an impressive speaker lineup and a ton to do.

On a personal note, this was definitely a trip that stretched me. I traveled alone internationally, which I’ve done before, but not since the pandemic, and definitely not since being a mom. I cried… a lot leaving my baby behind (and my husband I guess, heh) and missing her (them) as I galavanted around the city of Berlin for the first time. That being said, I’m glad I did it. I missed her so much, but traveling alone felt like I grew a little bit in ways I didn’t expect. It felt like I was greeting my former self as I brushed off my dusty solo traveling muscles. I felt both more vulnerable as a person, but also stronger.

Anyway, conference things! It was a pleasure getting to know the other speakers who I had seen online before, but never in person, like JZ Zhang (who was really my conference bestie the whole time, you always gotta have one of those!) and Robby Russell and Daniel Thompson-Yvetot. It was also really lovely getting to know brand new people, like David Edoh-Bedi (who went to the same university as me, woo go Cyclones!) and John Romero (who made Doom?? I am embarrassed to admit I didn’t know who he was at first and then I was very humbled)!

I gave three talks (!) at the event. My main one was called, “Embracing the Pivot: An Engineering Perspective on Adaptability” where I spoke about both my startup pivots, and about how devs can anticipate change. The next one was a “fireside chat” style talk with WeAreDevelopers, where we talked about AI and the job market. And then finally I was on the Dev Rel & Community Panel, hosted by Saron Yitbarek! All the recordings should be up soon, and I’ll update this post when they are!

The conference had an Open Source Fair, a Doom tournament, food events (I went to a BCM dinner and the bread at the table was so good that I don’t actually remember the real meal), and ended with a karaoke party for the speakers! It was chaotic and exciting and loud, and so fun. I was wildly exhausted for most of it (both because of the jet lag and because I did so many things), but it was worth it!

And finally, probably my favorite part of the event was that a bunch of folks from my Discord group came!! Some of the people in that group I had never met in person, and some I hadn’t seen in a long time. Having moments of just good ol’ friendship and gabbing with them made my heart happy.

Gosh, it’s been a whirlwind. I’m home now, cuddling with my kiddo, tired and content!

Nice keyboards make me want to write blogs

Fri, 31 May 2024 16:55:20 GMT

This is a blog that is truly written for the purpose of me using my keyboard because it feels nice.

I’ve talked about how much I love mechanical keyboards before, and anyone who has spent time with me knows that I will talk about them at some point. If you don’t have one, I made a free email course a little while back that helps you learn how to build your own, if you want to.

The keyboard I’m typing on right how has linear switches, specifically Gateron Yellows. I normally prefer tactile switches, and clicky ones beyond that, but when I do dabble with some nice linear ones on occasion… I get it. It’s so smooth. I feel like I’m just typing on butter. Wow.

I feel like I should probably have more purpose to this blog post but I genuinely don’t know what else to write about right now. I made a new web page for my W-9 Crafter app yesterday. I ate some mango with Tajín this morning. I should fill up my water bottle. I should probably blog more in general.

Anyway. This has been fun. The words flew. The keys were typed. And now I should probably use this keyboard to like… write some emails or something. Alright. Bye.

I rewrote my blog! And website! They are one!

Sun, 19 May 2024 00:00:00 GMT

This blog is different now! This website is different now! It’s all different!

but also the same

Backstory

For a while I’ve been fairly happy with my blog and website setup. They both were separate repositories with pretty much the exact same CSS styles across them. My website was plain HTML, CSS, and JavaScript, and my blog was built with Astro (for generating pages for blog posts) with most of the same scripts.

It was nice to just be able to post to my blog (which I’ve posted about here and here), occasionally update my website, and lightly host my husband Joe’s website.

I really liked not having frameworks to build my website, because I am an arrogant snob who is better than everyone in the world. That being said… updating and adding pages to my website was not the most ergonomic experience. Also, I learned from a friend of mine who’s great at SEO things that putting my blog on a subdomain is not great for search engines (they treat subdomains as separate websites). So, I put my pride aside and combined the two websites into one!

How I did it

Luckily because the CSS was mostly the same between my website and my blog, the combining process wasn’t too bad.

The high-level steps were:

Make a new, private Git repository (because I didn’t want to deal with peeping eyes mid-update) that I called cassidoo-next
Set it up to be a new Astro website with npm create astro@latest
Add TinaCMS
Copy my existing blog into the site (I did this part separately because it was using an older version of Astro and Tina)
After verifying that worked, copy my website repo into the site
Update my bio and site images (because the image paths ended up changing)
Clean up CSS where things weren’t quite right (like my new site header)
Update my newsletter page and its styles

Once everything looked right, there were two big things to make everything work smoothly: Git and the domains.

The Git parts

I made my cassidoo-next repository a remote on my existing repository for my website, and merged it in:

$ git remote add newweb [repo url] # adding the remote of the new repo
$ git checkout -b cw/new-website # new branch on the old cassidoo.co repo
$ git merge --allow-unrelated-histories newweb/main # merge the new with the old
$ git checkout main # switch back to main
$ git merge cw/new-website # merge it allll together

This was a WEIRD Git thing to do, but it meant that I didn’t have to reconfigure my domain setup with Netlify by keeping it all in the original cassidoo.co repository!

The one thing I did have to update in Netlify was the build step (because it went from no build to… build), but besides that, it worked! The site lived!

The redirects parts

Because I now had everything set up to go from blog.cassidoo.co to cassidoo.co/blog, I had to set up my Netlify redirects and domains to not have any dead links out in the world.

The first thing I did there was set blog.cassidoo.co as a domain alias to cassidoo.co. By pointing it to the exact same Netlify site, I could have redirects in the one repository.

My _redirects file pointed everything to their new spots:

https://blog.cassidoo.co/        https://cassidoo.co/blog          301!
https://blog.cassidoo.co/post/*  https://cassidoo.co/post/:splat   301!
/posts                           /blog                             301!
/post                            /blog                             301!

#fallback
/*                               https://cassidoo.co

That 301! at the end of each line is a permanent redirect code. It tells the client that the address for this resource has permanently changed, and any indexes using the old address should start using the new one. So, all new references to older posts will use the new, correct URL!

(by the way, I ended up referencing one of my own old posts about Astro and Netlify redirects to make it work, in case you try something like this at home)

Open sourcing it all

Phew! My website exists! My blog is safe! Everything works! Ahh!

After doing alllll of this to make everything shiny and functional, I realized that the template I set up for myself was pretty handy and might be useful to someone else. So, after cleaning things up and taking my name out of everything, blammo:

This website is now an open source template for you to use as your heart desires!

If you end up using it, let me know! I’ve already been really excited to see folks like Piyush and Mark use it and customize it to their style.

See ya next time! Feel free to subscribe here with RSS for more from me, or my newsletter!

Front-end Design Conference recap

Tue, 30 Apr 2024 00:00:00 GMT

I spoke at Front-end Design Conference this past week, and it was a wonderful time!

The conference was down in St. Petersburg, Florida. This was my first in-person conference talk since the pandemic, which was kind of mind-blowing to realize, but also so fun.

The talks weren’t recorded, but if you want to get a similar vibe to the talk I gave, it was about Share Pear and it was somewhat similar to the talk I gave at TheJam.dev!

I think my favorite talk at the event was from Stephanie Eckles, who talked about Modern CSS. I highly recommend checking out her site to learn from her!! Also, Adam Kuhn made the game Doom in just CSS, if you’d like to feel bad at CSS.

I really loved speaking in person again. Seeing the actual humans in the audience reacting to what I was saying was so special compared to seeing chat on a screen. I admit… the effort of going to a “real life” event is kind of rough now that I’m used to the comfort of speaking from my own home on my multi-screen setup, but friendly events like this make it worth it!

Seattle and the internet

Tue, 16 Apr 2024 00:08:54 GMT

From the end of 2016 through the first half of 2020, I lived in Seattle. I really liked living there when I did. It was a quirky city (I had moved there after burning out in NYC), and I often called it a “hobbyist” city. Everyone there is really into the things they’re into.

Exhibit A: I moved there with a light interest in mechanical keyboards, and I left with a couple dozen boards to my name, some keycap design brand deals, after helping organize a 300+ person mechanical keyboard event annually, and being on the board of a non-profit that helped kids learn how to solder via mechanical keyboards.

Exhibit B: I love playing music, and in my time there, I was a part of the Seattle Video Game Orchestra (playing fun music from Skyrim and Zelda and more at various events and conventions), as well as an all-electric-guitar band, and almost joined another one before the pandemic hit.

I love getting into things, and if you wanted to get into something, whether it’s rock climbing or birdwatching or music or coffee, Seattle was (and is) the place to do it.

All that being said… I really, really struggled to make friends there. The Seattle Freeze is very much a thing. I would invite someone to dinner or to hang out, and it was incredibly common for them to ghost me after I asked. I would go to a tech meetup, and I would almost never actually interact with the people at the meetup (outside of the people in my group with whom I went). Nearly all of the friends I did make were people I knew from outside of Seattle.

And honestly, I didn’t mind that. I am more introverted, and I enjoyed having just 2 or 3 really close friends (one being my sister) and more distant friends that I’d see on occasion.

However, there was a point in the summer of 2019 where I spoke at back-to-back events, a couple in Denver and one in Chicago, and something hit me that I didn’t expect: follow-ups. I had so many emails from people thanking me for my talk, and asking to connect in the future next time I was in town. I had texts from people asking if I wanted to go to a café after the event to talk more. It felt like a social fog had lifted in my brain: follow-ups are normal! That human connection is what these events are for! What the heck had I been doing not meeting people for a couple years?

At that point, I kind of knew that I didn’t want to stay in Seattle forever, but I’d try to work harder at the “social” thing. It didn’t really work, and then COVID really messed with my plans. When our jobs went fully remote, my husband and I decided to move to a larger city (Chicago) closer to family.

And y’all… I’ll cut to the chase, we have made so many friends in Chicago. In that first year we were here, end of 2020 - 2021, even though it was the height of the pandemic, we made more friends here than we did in nearly 4 years in Seattle.

It is not nearly as much of a hobbyist city. Yes, they have a mechanical keyboard meetup and tech meetups and bands you can join, yes. But it’s so much more of a social city. We’ll be at a burger place and someone will ask us if we’ve seen any good movies lately. I went to a tech meetup and someone invited me to the Renaissance Fair. I’m friends with people where our Venn Diagram of interests has basically nothing in the middle, but they’re friendly, so we can gab about something on occasion. Even as an introverted dweeb, I absolutely love how many people I’ve gotten to know well, and it’s not a slog to make those connections. It’s so filling!

That level of human connection and community is so valuable, and has been genuinely great for my brain in ways I didn’t expect. I didn’t realize that I felt lonely, until I had so many people who were fun to talk to, down to grab food, asking for rides to the airport, able to help watch my baby, sharing Costco memberships, or just wanting to be around. I know other cities and places also have this type of vibe, too. But allow me to stop there and use this experience as a metaphor for…

The internet

I’ve written about human curation before, so it might sound like I’m beating a dead horse, but hang in there with me: Right now, the internet is really, really good at being geared towards your specific interests.

The internet today is a lot like my Seattle experience. The “For You” pages on the various social networks are spot on with regards to what I like, and they help me get more into the things that I like. But those aren’t really “social” networks as much anymore. They’re content networks. It’s things, not connections. Yes, some connections do happen, but the mediums are geared towards what content will keep you around.

I feel like the internet of the past was more like my Chicago experience. I made random internet friends who I’m still friends with from over a decade ago. There’s little pockets here and there on Discord (hello, nerds) and other more chat-oriented spaces, but it’s not what it once was. I saw a post somewhere the other day that was something like:

2006, everyone has a MySpace
2010, everyone has a Facebook
2014, everyone has an Instagram
2016, everyone has a Snapchat
2020, everyone has a TikTok
2024, everyone has a …?

The responses to this were filled with people saying “short attention spans” and “anxiety” and related things. Though there’s exceptions to the rule and “not everyone had every network” blah blah, the point is that there isn’t a big central place now to find or interact with friends unless you really put a lot of effort into it. Everyone feels like they have really retreated into the comfort of letting the feeds fill their minds with things that generally interest them in bite-sized pieces. We’ve gotten lazier and lazier, and the UIs are designed to be so intuitive and addicting that we’re just pulled in more. We don’t have the “social” parts of the social networks as much anymore.

Since writing my previously linked post on human curation, it’s been really cool seeing the things people have written and made that are very much not algorithm-focused (I got a lot of cool emails and messages with links, and I welcome more). I’ve been able to chat with people and discover topics I never would have known about before. I probably sound like an old woman shaking my fist at the moon when I say this, but I really feel like that’s how the internet should be.

I don’t know what the “Chicago” of the internet might be, if we’re still leaning into this metaphor. We have brains that we should be using, and social muscles that we should be flexing, no matter how introverted or shy we are. We shouldn’t just let the algorithms decide what we see on the internet. We should be able to effortlessly have human connections, even if it’s with people who are interested in different things.

Until someone solves it (please don’t make me solve it), I’d better run, some friends just stopped by with boba, and I’ve got to tell them about a book I just read!

Non-traditional push presents

Sat, 06 Apr 2024 00:00:00 GMT

Now that I’m a bit more out of the “brand new parent” phase, I’ve been thinking about gifts people got me after giving birth (AKA “push presents”), and things I give new parents now. Nearly all of these things are not ones you’d normally see on a baby registry, but they’re really, really nice/useful.

A microwavable heat pad
A water bottle with a straw (specifically a straw, so it can be hands-free)
Getting their house deep cleaned
A bidet
A really nice soap/lotion set from Lush or something
A postpartum massage
A hands-free book/e-reader holder
A Theragun

All of these were so dang helpful to me, and it’s nice to give/receive something that sees a new parent as “an adult that happens to have a baby now,” and offers convenience and comfort, rather than, “your entire life is baby now, baby baby baby.” We love baby, of course. But we gotta love the parent, too.

I love reading fantasy again

Sun, 31 Mar 2024 04:52:00 GMT

I first discovered the author Brandon Sanderson when he launched a Kickstarter in the pandemic, where he announced that he wrote 4 books. It felt like everyone on Reddit and Discord and TikTok were raving about how he’s the most productive author ever, and he’s so fun, blah blah.

So, I backed the Kickstarter, thinking I might try this author, not knowing anything about his other books and his whole “Cosmere” universe where multiple stories exist. A few friends on Discord told me which books I should try reading before getting the Kickstarter books, and I picked up the Mistborn Trilogy.

As a side note… I’d been reading a whole lot of non-fiction. Tons of productivity books and books about the world as we know it, management books, science books, those sorts of things.

But y’all, I haven’t loved reading fantasy this much since I read Harry Potter or the Hunger Games! I used to love fantasy adventure books when I was younger, and I somehow lost that, but these books have brought me back. The Mistborn Trilogy had me hooked from the start, and I’m more than halfway through those 4 Kickstarter books as well (I’ve read The Frugal Wizard’s Handbook For Surviving Medieval England and Tress of the Emerald Sea so far, and I’m reading The Sunlit Man now). I’m truly having a blast. The stories are such genuinely wonderful, wholesome, exciting adventures that I haven’t experienced in so long!

I am very happy to put aside the non-fiction for a while. I’ve enjoyed reading so much more these days, and getting immersed in the stories of Brando Sando is absolutely the reason why.

Building W-9 Crafter

Thu, 21 Mar 2024 21:25:57 GMT

Helllloooo! I just shipped an app called W-9 Crafter that generates Form W-9s for you in a single click.

I first “pitched” this app in Discord way back in 2021 when I was complaining about how I have to make W-9s for all of my various contracting clients and newsletter sponsors, and the form information is always the same except for the date.

I stewed on that for a while, and then learned that the Form W-9s in the U.S. were being updated March 2024, and figured it was prime time to actually build a generator for Form W-9s!

The initial prototype

I first started building the app in the browser, using PDF.js and Download.js to take a PDF and edit it, and then download it to your computer.

At first, I built something that would have you actually fill out an HTML form, populating the entire document, but realized all I really needed to generate every time was a new date on an existing form. Scope creep be darned!

Electron time

After that, I wanted it to generate the same form every single time I opened the app and clicked a button, just with a different date, so I decided to pull out Electron to be able to get the document path that I wanted to edit.

Normally, when you upload a file via the HTML <input> tag, you can’t get the file path, for very obvious security reasons. But, in Electron, it exposes file.path variable, so I was able to save that to local storage! So whenever you opened the app, it would edit the same form at the same location every single time. Woo hoo!

I thought I could be done there, but alas, Electron is huge. When I bundled the entire application, it was 300MB. That’s almost the entire storage a 1st generation iPod Shuffle could hold! Waaaay too big for a small app like this.

Incoming: Tauri!

Tauri seemed like the “thing” I should switch to because everybody loves Rust (heh), and because it ships significantly smaller apps.

I want to take a pause to do a quick shout out to Jacob Bolda and Alex Riviere (and other great Twitch viewers) for helping me convert the app on the stream! You saved my bacon!

Tauri was a really interesting thing to try out for this app in particular. They had just released version 2 of the framework, which made my application much easier to build, but with the con of the documentation not being fully up-to-date yet. There were some hiccups I ran into (for example permissions around opening files and writing new files) but nothing too bad.

The one thing that was particularly weird is that the default for Tauri saving files is that it overwrites an existing file instead of generating a new one when they have the same name (for example it doesn’t do blah.png and then blah (1).png), which was challenging to figure out. I ended up making a little file checker to solve that.

I will say… I found the Electron developer experience to be significantly smoother (all of my actual Electron code was less than 10 lines of code) than Tauri. Tauri though has more configuration, permissions, and is more “close to the metal” than Electron. I did like feeling a bit more in control of the outcome of the application and all that it did.

In the end, the app ended up being a teeny tiny 12MB instead of 300!! Absolutely worth it.

Gimme the app, Cassidy!

Okay! Stop shouting!

You can get W-9 Crafter from cass.run/w9, and use discount code BLAHG20 to get 20% off because I like you. Generally. Currently. We’re working on our relationship.

This is my first time ever selling an app that I’ve made. I admit I don’t know a lot about pricing, and I haven’t shipped something solo like this before, so I was pretty nervous to make this go live! I chatted with several people who were super helpful in telling me how I should price based on how much time it could save someone, and how much time it saves me on average, how long it took me to build, and also just what they would pay for it. I’ve felt some impostor syndrome asking for… literally anything beyond “free”, BUT, I’ve made sales, so it’s good to be uncomfortable! You should charge for your work! Ahh!

It’s been a cool learning experience making a Product Hunt listing, a small demo video, and allll the social posts (Twitter, LinkedIn, etc).

Thanks for following along!

Styling a CSS pseudo-element with JavaScript

Tue, 05 Mar 2024 00:00:00 GMT

In JavaScript, you can’t do some kind of query selector like:

document.querySelector("div::after");

But, with the power of CSS variables, you can still change the styles of those selectors with JavaScript!

In your CSS, pick a variable name and assign it to something:

div::after {
  /* 50px is the default value if --somewidth doesn't exist */
  width: var(--somewidth, 50px);
}

And in your JavaScript, you use the setProperty function to assign a value to that variable!

// this is just grabbing a div, you can change it to select any element
const element = document.getElementsByTagName("div")[0];

element.style.setProperty("--somewidth", "50%");

So there ya go! You can obviously make this more complex as needed. Here’s an example of all of this in action! It’s a template I made for tracking fundraising efforts (feel free to use the template on CodePen). Specifically note line 38 in the CSS, and line 25 in the JavaScript!

See the Pen Money goal tracker template by Cassidy (@cassidoo) on CodePen.

Jumblie has a database!

Sun, 25 Feb 2024 00:00:00 GMT

If you haven’t played Jumblie yet, you should!

I’ve talked about how I made Jumblie before. Long story short: it’s very vanilla HTML, CSS, and JavaScript, and doesn’t have any dependencies.

That being said, the way puzzles are generated every day is very manual: I update a JavaScript object in a plain ol’ file in the repository to add them on occasion. As you can imagine, that’s not very sustainable or practical! But, I didn’t want to make the codebase more complicated by pulling from a database and potentially having to install/rewrite a bunch of things.

I ended up coming up with a solution using Supabase and Netlify Build Plugins that I’m pretty happy with!

The Supabase side

On the Supabase side, it was pretty straightforward to throw together a table of all of the puzzles so far, as well as some upcoming ones. I did some funky conversions and scripting to turn my original large JS object into a CSV file, which I could then import directly into a new database.

Supabase does have a well-supported JavaScript client library that I almost used, but because I wanted the script to be in a build plugin, I ended up just doing a simple REST query.

const response = await fetch(`${supabaseUrl}/rest/v1/${tableName}`, {
	headers: {
		"Content-Type": "application/json",
		apikey: supabaseKey,
	},
});

Which brings me to…

The Build Plugin side

I decided on a Netlify Build Plugin approach because I realized that I didn’t have to query Supabase every single time the page was loaded by a user, but rather just when I need to load in some new puzzles. So, when I hit the snazzy deploy button, the build plugin is called onPreBuild (so right before things are built and deployed), it pulls the puzzles from Supabase, and creates a new file that has all of the content for the rest of the site to query!

const fs = require("fs");

module.exports = {
	onPreBuild: async () => {
		const outputFile = "./wordList.js";

		// ... Supabase query ...

		// content from Supabase
		const data = await response.json();

		const fileContent = `const wordList = ${JSON.stringify(data)};`;
		fs.writeFileSync(outputFile, fileContent);

		console.log(`Successfully saved word list to ${outputFile} 🔥`);
	},
};

Because the output of this combo is almost exactly the same as what it was before (the wordList file is just populated from the database instead of from my occasionally updating it), I didn’t have to change any game logic.

Installing the plugin was just adding these lines to the netlify.toml!

[[plugins]]
package = "/plugins/get-words"

And that’s it! In summary, we have a Netlify Build Plugin that creates a file, populates it with data from Supabase, and saves that file to the build, and it’s referenced throughout the codebase.

Woo hoo!

I hadn’t worked on a build plugin in a long time, and haven’t used Supabase in a while either, so it was a fun little learning experience to make something like this! My dream plan is to be able to set up accounts and stuff so that you can save progress and play old puzzles, so this felt like a good step in that direction. But until then, it’s the same ol’ Jumblie to users, but much cleaner under the hood.

All of the logic for this entire improvement was less than 30 lines of code! You can see it here, along with the rest of the Jumblie game code.

Go play Jumblie, and suggest a puzzle if you’d like!

Tips for posting on LinkedIn

Sat, 24 Feb 2024 00:00:00 GMT

I took a workshop that the LinkedIn team had about the best kinds of posts on the platform, so you don’t have to! Here’s some high level notes:

LinkedIn News loves to amplify content if it’s original/not just a link away from the platform (your content has to hit a quality bar to happen). It’s okay to link away if there’s a good amount of insight on LinkedIn itself.
You should add questions when you end a post so that people engage with your content.
Your first two lines of your posts have to be the engaging ones, don’t bury the lede.
When talking about events/talks/anything live, your “superpower” trick is to remember what it feels like to be in the audience and write about your perspective.
When it comes to re-sharing content:
- Share 1-3 insights
- Give your point of view on what content says
- Longer posts do better (at least 3 paragraphs), but short sentences in the long post do even better.
- Make sure the first two lines pull people in
The best kind of content that gets re-shared and promoted:
- Helps people get jobs
- Helps people understand their industry or a trend in their industry
If you post a video, make it 2 minutes or less, and make sure the text accompanying it is not too long (less than 100 words or so).
If you really want to be “boosted” by the algorithm, try to post 3-4 times a week.
People love polls. Add polls. Adding an “Other” option to a poll increases its visibility a bunch.

And this is a good example post that the LinkedIn team loves, that gets actual human boosts from their team!

Hope this is helpful!

How to test a browser extension locally

Sat, 17 Feb 2024 00:00:00 GMT

I built a browser extension this week, and had to do a bit of digging to figure out how to test it properly on Chrome and Edge before publishing it. It’s always important to test extensions before publishing them to stores, so here’s some quick steps for you to get started (and for my future self who will definitely forget this)!

Download/clone your repository if it’s not on your computer already (just have the one you have built ready, no need to zip it up)
On Edge, go to edge://extensions, or on Chrome, go to chrome://extensions
Toggle on “Developer Mode”
Click the “Load Unpacked” button
Select the unzipped extension folder (again, don’t zip it up yet)
Look for the lil puzzle piece icon, and make sure the extension is toggled on
And you’re installed!

Now as you develop your extension, you can hit the “reload” button on the Extensions page and the browser will automatically load your changes.

Once you’re done, you can hit the “Pack Extension” button to make a downloadable extension file (a .crx file), or you can just zip your folder up and send it to the various web stores.

Sorting Git branches

Thu, 15 Feb 2024 15:46:32 GMT

Normally when you run git branch on a repository, you get your list of branches in alphabetical order, which can be very annoying if you have a lot of them (unless you have a very rigid naming system by ticket number or something).

You can change that now!

In your repo, if you do:

git branch --sort=-committerdate

This will sort all of your branches by the date of their last commit!

You can sort by:

authordate
committerdate
creatordate
objectsize
taggerdate

Plus, you can also do this globally if you want to always do it by one of these, like so:

git config --global branch.sort -committerdate

Or, you could set an alias:

git config --global alias.brcd "branch --sort=-committerdate"

Now go on and git committing!

Use CSS accent-color to style your inputs

Tue, 30 Jan 2024 00:00:00 GMT

If you’ve ever wanted to style HTML <input> tags in your projects, you know it’s a bit tricky to deal with the labels and making everything look custom and themed.

This won’t go wildly into all the ways you can style them, BUT, if you want a quick win to change the color of those controls, use the CSS accent-color property!

accent-color works on the following HTML elements:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

You can style all of these by just plopping it in your root:

:root {
  accent-color: #ccff00;
}

Or, if you want different elements to have different colors, you can style them all individually!

See the Pen accent-color demo by Cassidy (@cassidoo) on CodePen.

Here’s the documentation if you want to learn more!

Byyyyye <3

HTML "self-awareness" with sibling indexing in JavaScript

Sun, 28 Jan 2024 00:00:00 GMT

This is a super specific use case, but if you have an HTML element and you want it to be more “self-aware”, you can do:

let element = document.getElementById('whatever');

// To get an array of siblings
[...element.parentElement.children]

// To get current index of self
[...element.parentElement.children].indexOf(element)

What we’re doing here is:

Getting our HTML element
Getting the parent of our HTML element
Getting the children of the parent
Spreading it into an array (because it’s an HTMLCollection otherwise, you can also use Array.from)
Getting the index of our element amongst all of its siblings

I figured this out after working on a framework-less project, where I wanted an HTML <button> to be able to tell the function it called its own index.

Example HTML:

<div>
  <button onclick="whoami(event)">Some button</button>
  <button onclick="whoami(event)">Some other button</button>
  <button onclick="whoami(event)">And other button</button>
</div>

And the corresponding example JavaScript:

function whoami(event) {
  let element = event.currentTarget;
  let currentButtonIndex = [...element.parentElement.children].indexOf(element);
  // ...and so on
}

Anyway, I thought this was cool, hope it’s useful for you!

Base CSS for your text-based pages

Fri, 19 Jan 2024 07:56:14 GMT

If you don’t want to deal with styling a mostly text-based HTML document, plop these lines in and it’ll look good:

html {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.3em;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  line-height: 1.5rem;
}

I use this for a bunch of projects where I just need some plain ol’ styling that is better than the defaults (and that I can easily add to), like AI Ipsum and W-9 Crafter.

You can save cass.run/basecss if you want a quick link to the snippet, and here’s a little demo of what it looks like:

See the Pen Cassidy's base CSS demo by Cassidy (@cassidoo) on CodePen.

Kind of annoyed at React

Sat, 13 Jan 2024 00:00:00 GMT

I’m kind of annoyed at the state of React lately. I still use it regularly, and am somewhat friendly with the folks that work on it still, and it’s the first library I reach for, but… it’s just gotten too confusing and frustrating.

Not to boast but I like… really know React. I’ve used it for almost a decade. I’ve seen it morph and grow and used the frameworks that have popped up to work with it, I’ve written dozens of articles and tutorials for it, I was in the React 18 Working Group and other related groups before that, and before the pandemic, I taught React full time. So trust me when I say: React’s gotten really hard to understand.

I feel like the lack of understanding comes from not communicating properly with the community (both educational content and also transparency about what/how/etc things are being built), and it frustrates me.

It’s frustrating to see that there hasn’t been a release since June 2022. It’s frustrating that the core team all spouted “use a framework!” with React 18 and then most of the vocal ones left their jobs to join [a company that owns a large React framework] and [that framework] seems to use Canary releases rather than the one that’s stable and out in the world (and it seems like a “cool kid” monopoly). It’s frustrating that they took so long to write new documentation (and the folks writing them weren’t properly supported) that if you look up “React documentation” the new docs aren’t even the first result. It’s frustrating that there’s two Reacts now (not that there shouldn’t be, but that it’s not clear/an easily understandable mental model for most people). It’s frustrating that diversity efforts visibly took a backseat with React leadership and there’s just not as many voices from a variety of different people anymore.

Bleh, anyway. I really didn’t mean for this to be a negative nancy post. I’ve harped on the React team’s communication before and I do think they’ve gotten a bit better. And again, I still reach for React when I want to build something somewhat complex, I just… wish I were happier about it when I do. I’m optimistic for the future. Kind of.

I miss human curation

Fri, 12 Jan 2024 00:00:00 GMT

I’ve been thinking a lot about the internet lately, like as a concept. It feels like… I don’t know where everyone went.

Back in like… 2007, you’d find me checking out MyLifeIsAverage, maybe StumbleUpon, and a few blogs of folks that I knew, who mostly shared videos and articles they liked. I had my own little forum (not gonna share it because I am okay with forgetting teenage Cassidy cringe), and practiced my HTML and CSS skills on a website that was… so early 2000s (which you can find in a little feature in this zine from the Glitch team).

When I say “I don’t know where everyone went,” I know everyone’s out there surfing the web, of course, but it feels like it’s a different place now. When the algorithms are determining everything we should be seeing, it’s a much less personal internet. The “For You” pages of the world are right, I am interested in that content, but I’m not seeing it from my friends, or that one author I like, or that random blog I found when I was learning about an obscure hobby.

Especially now that Twitter is kind of a mess (I won’t get into other social networks, but they all feel like this lately), the networks of people that I know are really hard to navigate. I can’t really swing from profile to profile of friends like I did before. The Algorithm wants me to see content relevant to me, not my friends. We don’t have “affiliate links” in our website footers anymore to go down rabbit holes of other websites, and I rarely see a little corner of the internet that I can bookmark and check on regularly. Those spaces do exist, but they’re just much, much harder to find.

As I noodled on this, I realized that in addition to my missing humans curating the content for me, it’s also me curating what I want to see, when I want to see it, better. There was an interesting note in Alexander Obenauer’s lab notes about notifications, and this line stuck out to me: “fundamentally, the way notifications work in modern OSes is backwards: someone else decides when (and how often) my device wakes up to interrupt what I’m doing.” In the earlier internet days, you went to a fun website or read the latest thing because you decided to go do it. Now, all of this content is pushed in your face, designed to be as addicting as possible, so you keep coming back. You can curate it to a point, but companies design these systems this way on purpose.

Eh. Anyway. I definitely sound like an old woman talking about “the good ol’ days,” but really I just miss humans driving what I see, no matter how quirky the content ends up being. I feel like the closest thing I have to that is my Discord friends (who are probably the main people reading this, hiiiiii), and I’m going to cling to them as it feels like the internet as we know it goes through some major changes with all of these AI doohickeys and algorithm thingamabobs.

Jumblie 100

Thu, 11 Jan 2024 06:52:49 GMT

I am really, really excited to have made it to… drum roll…

Jumblie #100
🟠🔴🟢🔵
4 guesses in 40s

That’s right, it’s the 100th Jumblie puzzle!

I’ve already talked about how I built it and how I’m adding features here and there, so I’m not going to get into that.

Really, I’m just excited to celebrate this small milestone for my little game. It makes me so happy to see people playing it, and hearing that folks like it (especially when people say that their non-techie families play it, that is just the best).

Please do submit your puzzle ideas! I love seeing how clever some of them are, and I’m planning out more features around submissions and stuff, too.

Experimenting with AI voice

Sat, 06 Jan 2024 00:00:00 GMT

I tried out the ElevenLabs beta in February last year, and I finally uploaded the audio of my little test!

In my experiment, I used one of my older blog posts. After passing in some voice samples to ElevenLabs, I had it read the blog post in “my” voice. Then, I recorded my own reading of the blog post, too.

So now, you can hear the synthesized version and the real version back-to-back!

AI version:

Real voice version:

The AI version is definitely pretty good. I think if someone didn’t know my voice super well, they wouldn’t really question it. I do think there’s more… “life” to the real one, but maybe that’s my own bias. In the AI one, you hear little blips where the AI “jumps” between sounds, and in my real voice, you can hear me stumble over my words a bit. What’s particularly interesting to me is that the cadence is pretty spot on; both audios are exactly 1 minute and 19 seconds.

Anyway, cool test, and I’d be down to experiment with this more in the future!

Cassidy Williams... who is she

Mon, 01 Jan 2024 00:00:00 GMT

Y’all, why is there a Scooby Doo character named Cassidy Williams?

Why is there a reporter in Connecticut named Cassidy Williams?

Because they want to ruin my SEO. That’s why. It’s personal.

But for real, you should probably Google your name, and maybe some keywords too. Your prospective employers are doing it. Your dates are doing it. The friends of your dates are doing it. Your old classmates are doing it. What comes up?

You can always fix your SEO by putting some content out there in the world, especially if it has some keywords that’ll stick out and make it obvious that it’s really you.

So excuse me while I do a lil bit of that:

Cassidy Williams mechanical keyboards
Cassidy Williams definitely not a Scooby Doo character
Cassidy Williams writes JavaScript
Cassidy Williams writes React
Cassidy Williams is seriously not a cartoon
Cassidy Williams makes memes
Cassidy Williams is 6ft 3in
Cassidy Williams made Jumblie
Cassidy Williams is 3D, not flat
Cassidy Williams lives in Chicago
Cassidy Williams conference talks
Cassidy Williams cassidoo
Cassidy Williams podcast
Cassidy Williams is alive and a real human

Buh bye, 2023

Sun, 31 Dec 2023 00:00:00 GMT

As the great philosophers of Smash Mouth once said, “well, the years start comin and they don’t stop comin,” and 2023 was one of those years. Similarly to how I recapped 2022, I’ll do my best to break down one of my most life-changing years yet!

Work things!

I’m still having a blast as CTO at Contenda, where we’ve done a pivot and are working full time on our app Brainstory now!

Pivoting was a hard transition, I’ll admit. We had originally built a product that quickly turned your videos, podcasts, etc. into blog posts (and other forms of written content), and let you compose a bunch of those things together. I really loved it, but with the release of GPT-4, tons of our work was suddenly not a competitive advantage anymore. Competitors were launching faster than ever, and sales were simply not closing. We had so many enterprise sales calls and we kept getting riiiight up to the finish line without ever crossing it, and it was really, really discouraging.

So, while we were trying to figure out how to salvage our work, we started building “mini-apps” on top of our API. I thought it would be cool for folks who didn’t have existing content be able to record it in the browser, and we would transform it from there. That spawned a bunch of products like an app that helped high school students talk through their college application essays, a productivity app that helped you take notes as you studied, a Dungeons & Dragons character sheet creator… it was really fun, but we had to figure out our direction. Brainstory is what bubbled to the top from all of our learnings, and our users… loved it.

We realized that Brainstory wasn’t just a “mini app” on top of our API, but a really valuable product for brainstorming ideas and getting feedback. We started dogfooding it by using it for prepping for our All Hands meetings, I used it to write some conference talks and blog posts, and we’ve even used it for meal prep and planning for hard conversations. The more our team used it and shared it and enjoyed it, the more we realized that we had to make it our flagship product, and that’s what we’re working on today!

Outside of that work, I’m still loving advising companies! I’m still advising Netlify, Plasmic, and The Sukha Company (formerly Centered), and I did a stint for Wix, and I recently started advising Chainlink as well. It’s been really interesting doing this for such different companies, especially in a weird economy where everyone’s trying different things to get through it and succeed.

Personal things!

I think the big, giant, massive, huge thing that really took over my whole year was having my adorable baby Nadia this April! Words really can’t describe how intense birth and recovery and parenthood has been. I did try though by writing about my c-section experience and my mindset changes and postpartum depression and schedule changes this year.

Nadia is 8 months old now, she started crawling this week and pulling herself up to stand (!), she says “mama” (but only when she’s hungry, ugh), laughs all the time, and truly the cutest thing I’ve ever seen. Our rhythm is constantly changing as we figure out childcare (so expensive!!! Like, for good reason, but ahh!!!), navigate sleep regressions, and watch her little personality grow. It’s hard, it’s so hard, but she’s worth it (and I cannot emphasize enough how good it is to feel like she’s worth it. Postpartum hit me so hard this year, and if you or someone you care about is struggling, please feel free to contact me if you need someone to talk to).

Even with late pregnancy and a baby, we did get to travel this year, where we saw family and friends both around the country and abroad! I don’t know if I’ll ever travel as much as I did pre-pandemic, but it’s nice to be able to see places again outside of our little corner of the world.

Something else that’s been genuinely lovely is just how many close friends we’ve made this year. So many kind, generous people came to us when I was struggling with the baby, and our community in Chicago is truly wonderful. I love living close to family here, and the fact that I’m within walking distance to both family and friends is the icing on this year’s cake!

And even outside of Chicago, the internet friendships are going strong, and y’all are probably the ones who are actually reading this blog, heh. I’m so grateful to all of you being there when I would be typing out my woes and live-streaming my rants. And sharing memes, of course.

Side project things!

This year was a super fun one for projects. I blogged both at the beginning and end of the year about just how much I was committing to GitHub. I really had a great time shipping things!

First and foremost, as always, my weekly newsletter is going strong! We crossed the 6th year anniversary this year, and it’s still my biggest labor of love for the tech community. I love seeing people jump into the coding questions and liking the articles, and it makes my day every time when people say they like reading it! I actually let go of the reins a little bit this year: I got a sales team for sponsorships. It was harder than it should have been to decide I needed help, but now that I don’t have to do sales calls and booking and invoicing and copy edits etc etc, I have so much more time for actually writing the newsletter!

In other newsletter news, we crossed the 200 issue mark with the Stack Overflow newsletter! I’ve been helping them write it ever since it started back in 2019, and we’re going strong. I was a regular host of their podcast for most of the year as well, but with restructuring things I’m now more of an occasional guest, heh.

And speaking of podcasts, we finished season 1 of The Dev Morning Show (at night)! I absolutely loved recording the show with my friend Zach as my co-host, and talking with incredible guests. We’re on the hunt for a sponsor for season 2 so we can record again, so if you or someone you know might be interested, let me know!

In terms of writing, I tried to blog a bunch here, and also on dev.to (where I was one of their Top 7 authors of the year!), but I admit I am working on being more consistent. Most of my writing time these days is during nap times and mostly on my newsletter, unless I can squeeze out a post here and there. I’m hoping to write a lot more in 2024!

I’m also hoping to livestream more in 2024, as well. I had a good weekly cadence going pre-baby, but as one can imagine… it’s not that easy to stream when you’ve got one of those. I have a feeling I might struggle with being regular on stream, but I’m going to try!

This year, my coding side projects were really, really fun. I made AI Ipsum, a dummy filler text generator with a dash of AI. I also updated my Obsidian theme, Cardstock, to the latest versions of the app! I did a bunch of random scripts and demos and maintenance in between these projects, but the two that I’m particularly proud of are Thirteen Potions (which is a game I made for my first ever game jam, build log here), and a jumbled word search game, Jumblie! Jumblie started as a project for a video series (more info here) and got popular enough quickly that I’ve been actively maintaining it for a few months now! I’m not sure what will come of it, but I love word puzzles, and it’s really exciting for me that others like the one I made.

And finally, not really a side project but I’m including it anyway, I’ve been actively playing go almost daily! I participated in my first in-person tournament, and I hit my goal ranking this year (6k, for those familiar)! I would love to make it to 4k in 2024, but… we’ll see about that!

There’s more side project things that I’m sure I’m forgetting, but I’ve kept my GitHub Stars profile fairly up-to-date if you wanna look there at various podcast episodes and things I’ve made for now.

Phew!

Gosh, 2023 has been quite the year. I’m so grateful to have made it through some really intense lows, and to have seen some spectacular highs. I have a feeling 2024 will be a funky transitional year, but I’m all for it.

Thank you for reading all of this! Here’s a joke for you as a reward: What do you call a bee that lives in America? A USB!

Stock options, vesting, and exercising, oh my

Sat, 30 Dec 2023 00:00:00 GMT

I got some good questions on my livestream earlier this year about stock options for startups!

In case you don’t want to watch, at a high level, here’s what I talk about that might be useful for you:

Startup Financing: When a startup decides to raise funds, it usually starts with a seed round, followed by Series A, B, C, etc. There might also be a pre-seed or angel round before the seed round. The startup gets money from investors in exchange for ownership of the company. The lead investor in each round decides the valuation of the company and invests a specific amount based on that valuation.
Strike Price: The strike price is the price per individual share. It’s determined by the company’s valuation and the amount invested. Initially, the strike price is usually small, but it grows over time as the company’s valuation increases. For example, during the seed round, the shares might be worth just a few cents each. However, as the company raises more money, the value of shares increases.
Ownership: The company is owned by the founders, and then the investors, and then eventually, the employees. When you’re an employee at a startup, you’re typically offered a percentage of the company’s ownership that the investors don’t own.
Risk vs Reward: Joining a startup at the seed or Series A stage is riskier, but your share price is less, which could lead to greater rewards if the company succeeds. If you join a startup at Series D, for example, it’s more secure, but the share price is significantly higher.
Vesting and Stock Options: Vesting is the process of earning the right to buy your ownership in the company. Once your options vest, they’re yours to buy until a certain point (typically 30 to 90 days past your last day at the company). If you don’t buy them, they go back into the company pool. If you do buy them, they’re yours forever, even if you leave the company.
Liquidation: To cash out your shares, you typically have to wait for the startup to exit, either through an IPO or a buyout. When this happens, your shares are converted to cash. Some startups also offer a “buyback” option when they raise a new round, which allows you to sell your shares back to the company at their current value.
Preferred vs Common Shares: Typically, employees get common shares and investors get preferred shares. Preferred shares are advantageous during liquidation, as preferred shareholders get their money first. More on that here.

Overall, the main thing you need to remember is that investing in startups is always a risk. Companies can fail (and often do, especially in this economy), and when they do, your investment fails with them. But, if a startup succeeds… the returns can be significant! Your equity in a company is a lottery ticket - you may not win, but if you do, the rewards can be huuuge!

If you’d like more information beyond this, I highly recommend this blog post by Julia Evans.

Until next time!

Publishing to my blog from Obsidian

Thu, 28 Dec 2023 00:00:00 GMT

I like using Obsidian for almost everything writing-wise. But, this has caused occasional friction when it comes to publishing to my blog. I’ve mentioned before that I’m trying out TinaCMS, which is generally working well for me (especially for posts with images), but I wanted to try something where I can push straight from Obsidian if I’m not able to use Tina for whatever reason.

The repository for this blog is separate from my Obsidian vault, so normally I have to do some copying and pasting across folders, which is fine but really slows me down. I also checked out Rach Smith’s script for publishing to Astro from her vault, which works great, but not quite what I was hoping for.

After a little plugin hunting and configuring, I got something that’ll work for me!

Obsidian Markdown Export plugin

The Obsidian Markdown Export plugin by @bingryan takes your current note in Obsidian, and with a command can copy that note’s markdown (or HTML!) into another folder on your machine, easily!

They actually didn’t support “out of vault” files before (which I admit I didn’t understand the use cases but eh), but one GitHub issue later, we’re cookin!

Okay so the way this works is you go to Settings > Community plugins and then search + install Obsidian Markdown Export. From there in the plugin settings, you have to put in an absolute path for your external repository, and a relative path for your media assets.

So in my case, I put /Users/cassidoo/GitHub/blahg/src/posts for the markdown file to end up in my blog repo, and ../../public/assets to put images in the folder relative to the outputted file.

Templater

I use the Templater plugin mostly for my newsletter and some other miscellaneous things not relevant here. I ended up making a “blog template” that I can use to quickly add the frontmatter I need!

Similar to the previous plugin, you can install Templater in the Community Plugins section of Obsidian, and then you can choose to configure it (I just added a templates folder to my vault for this).

My “blog template” looks like this:

---
layout: "../layouts/BlogPost.astro"
title: "<% tp.file.title %>"
slug: some-slug-example
description: "-"
added: "<% tp.file.creation_date('MMM DD YYYY') %>"
tags: [technical, advice, events, learning, meta, work, personal, musings]
---

Every blog in my repository needs to have this frontmatter, and the tp.file.whatever syntax is Templater’s way of taking the file’s metadata and inserting it when you plop in a template. So when I make a blog titled, “Publishing to my blog from Obsidian” (heyo), it populates that into the tp.file.title field, and it inserts the date under added.

The tags are just all the tags I have in my blog so far, and I usually just delete the ones that are irrelevant to the post and get writing.

Mashing them all together

I wrote this blog post in Obsidian using these plugins, and I followed these steps!

Made a file titled “Publishing to my blog from Obsidian”
Inserted my “blog template” with Templater and wrote the blog
Ran the Markdown Export plugin
Navigated to my blog repo
git commit -am "Wrote publishing from Obsidian post"
git push
Donezo!

(As a quick side note: for all plugins in Obsidian, you can either click the buttons they have, or you run Ctrl/Cmd+P and then type in the name of the plugin, or you can set up hotkeys in the plugin’s settings.)

Like my TinaCMS setup, it’s not the most ergonomic thing in the world, but it’s working well for me for now. I’m trying to embrace incremental changes more instead of trying to make everything instantly perfect, and this is definitely one of those smaller improvements that’ll keep me going fast!

Loving and hating the streak

Fri, 27 Jan 2023 00:00:00 GMT

My GitHub streak right now (January 27, 2023) is like, really good. Today marks 1 full month: I haven’t missed a day of committing since December 27th! Whew! Watch out world! She’s a woman in STEM! She’s a girl who codes! Live, laugh, love!

I’m definitely thinking those unhealthy thoughts of, “dang, if only I committed code on Christmas Eve, Christmas Day, and the day after, so the streak could be even longer.” Who needs family when you have a GitHub streak?! I haven’t really been purposely committing daily, it’s just been one of those times where I have a lot to do at work, and I have the mental energy and motivation to work on some of my side projects as well. And I gotta say, it’s pretty dang fun to see the streak work, but I also feel the unhealthy relationship with it lingering.

I don’t ever want to code just to have the streak. That kind of motivation doesn’t last very long. I feel like this sentiment is anti-”everything you read about in productivity books,” (in Atomic Habits they literally call the people who track the streak “elite performers”). But, I also know myself, and know that if I am motivated by the streak too much, the streak will stress me out and I’ll code and commit less for enjoyment and usefulness, and more purely for the streak, which feels… icky. It’s like when the Duolingo owl haunts me to practice a language and the stress and guilt stops me from actually learning. Only this time, it’s those alluring green squares dancing on the screen.

I’m probably overthinking this. I’ll probably lose my streak within 48 hours of writing this and I’ll be like “eh, it was good while it lasted,” and move on. But at this point, I’m… feeling good about the progress I’ve been making on projects, hoping to keep it up for the joy of actually getting code written, and trying very hard to not fall into streak-motivated work.

Update exactly 11 months later: I kept the streak. It was probably unhealthy. You can see exactly when I gave birth and when I went back to work. But it was FUN and WORTH IT.

I was able to ship more this year than I have in a long time. I committed code to both public and private repos, reviewed pull requests, made + solved issues, and made fun projects like Jumblie and Thirteen Potions and Cardstock! I don’t plan on keeping the pace up (especially with a baby who is increasingly aware of screens), but it was a fun year.

Ideal fishing spots

Mon, 18 Dec 2023 00:00:00 GMT

My husband Joe is really into fishing. I’ve done it before myself, but it’s a bit embarrassing because I am afraid of fish, so let’s not get into it.

Anyway, he goes fishing at really weird and specific times, like, “5am in early December is ideal for perch in Lake Michigan” (is that sentence correct? Maybe? Eh) or, “if you want sheepshead fish, you GOTTA go to Florida” (sure, Joe).

Sometimes he comes home from fishing without catching anything, and he’ll say something like, “the conditions weren’t good, I’ll just try again when they are.” He’ll be sad, but it doesn’t stop him from fishing, and he’s gotten a lot better over time.

I think this is a good metaphor for a lot of things. A lot of folks I know right now are struggling with job hunting, struggling with sales, struggling with getting things done, struggling with staying above water, etc. Maybe the conditions just aren’t good right now. You can still work with them, push through, and get better over time.

Or be a scaredy cat, like me. Wee!

Geek mama... saying no

Wed, 13 Dec 2023 05:55:07 GMT

I said no to something today. It sucks when I have to do that. Typically I’m very much a champion of, “say NO more often!” and “don’t push yourself too hard!” (and I stand by that). But in this case, bleh, it hurts a bit. I had signed up for a (live, not recorded) course that I was pretty excited about, and paid for it, and even did a little office rearranging to prepare for it.

But… I have to remember that I’m a new parent, with a busy job, with obligations, and I can’t just sign up for nerdy things that sound fun. Which sounds more depressing than it is. It’s just a mindset shift. I have more limited time, currently, and I have to pick things that I can do async, when I can grab a spare moment, until I can have a more predictable schedule. I’m learning how to be more efficient with the time I have, and more patient with myself when I can’t do as much as I want to.

Justin Jackson wrote a post kind of like this a while back, and his line, “but now’s not the time” resonates with me right now.

I really care about my hobbies, and I want my daughter to see me enjoying non-work things as she grows up. So, though I can’t do all the things as much as I used to (until she’s a bit more self-sufficient, at least), I can do the more important things. Slowly but surely, she might just do them with me, too.

Making a single line break in markdown

Sun, 10 Dec 2023 06:00:00 GMT

Sometimes when you write markdown, you’ll write some paragraph…

and then you hit “Enter” twice to make another paragraph.

Like this...

...and then this.

This will render:

<p>Like this...</p>
<p>...and then this.</p>

But, sometimes you want to make a single line break, kind of like in HTML where you have:

<p>
  Like this... <br />
  ...and then this.
</p>

In markdown, you can just drop in a <br /> and it’ll work perfectly fine. But, if you want to keep your markdown HTML-less, you can add a backslash \ after your line, like so!

Like this...\
...and then this.

This is supported in most markdown processors, but not all of them. Definitely check on the one you’re using before you push to prod. Some processors also allow you to add a double space at the end of a line as well (truly just , hit your spacebar twice), but since a lot of code editor setups trim empty spaces, I personally prefer the backslash way.

Have
fun!

Cassidy's Gift Guide 2023

Sat, 09 Dec 2023 06:00:00 GMT

I’ve bookmarked various things over the past year or so of things I would get for friends, family, and myself, and I thought I’d share ‘em with ya after seeing Chris Coyier’s very cool guide! Nobody’s paying me to share these, I just think these are fun.

Digital Things

I’m not talking about NFTs, just talking about things that are actually useful digital things! Mostly for nerds.

Frontend Masters subscription
If you have friends learning to code or wanting to get better at it, I thought the FM courses were awesome.

omg.lol subscription
I got one of these recently (check it out) and it’s a really delightful service to make a little homepage, have email forwarding, and a bunch of other nice goodies.

The Sukha Company pro subscription
I’ve mentioned this app before, it’s a pomodoro timer + task list + focus music + digital coach app that has really helped my focus a lot (plus if you use code CASSIDY you get 20% off).

CodePen Pro
I really love CodePen in general, and this would be a great little gift for anyone who uses it.

Brainstory subscription
Okay I work on Brainstory so my credibility here is waning BUT it’s a really great brainstorming app and I personally use it a ton (use code ADVENT for 20% off).

Bags and wallets

I love things that contain things. If you ever aren’t sure what to get me, just get me a cool bag or pouch or something.

Secrid wallet
I got my husband one of these a few years ago and it’s so durable and useful, he gets compliments on it regularly!

Analog Laptop Totes
I really like how practical and well-made these are.

Baboon to the Moon canvas tote
This brand is fairly pricey so I only really get things from them when they’re on sale, but this canvas tote is solid. I have two and we use them both very often.

Oceanbags: The Sunderbans
Anything that stops more plastic from getting into the ocean, I’m on board.

Stuff for your desk

Resisting making this entire section just all mechanical keyboards…

Carpio 2.0 ergonomic wrist rest
I like how subtle this one looks compared to other wrist rests I’ve seen before.

Paper Republic Notebooks
I got one of these as a gift a while back and the paper is really delightful to write on!

Scrabble keycaps
Okay, yes I designed these, but I also just love the look in general.

Lord of the Rings Elvish keyboard
This is a really unique board for your nerd friends.

Muji pen set
These pens are just so good. They’re simple and look clean, and they write super well.

Books

Support your local bookstores, but if you aren’t able to, I tried to link to some shops that are good here!

How to sew clothes
I love that this one comes with patterns, too!

The Mistborn Trilogy
This series was so fun to read. The way I describe it quickly to folks is, “imagine Ocean’s 11, but a fantasy adventure story.” It starts as a heist and spirals from there!

Think Again
I read this book a couple years ago and I reference it to this day. I genuinely think most people should read it.

Beverage things

I’ve become kind of a tea snob lately (especially after learning about microplastics in tea bags, ugh) so… join me in being a tea snob.

Purple clay teapots
I don’t have one of these but whew, they’re fancy lookin. Someday!

Jumbo glass tea cup and infuser
My friend Ann got me one of these and I’ve used it… every single day since. It’s a really great cup (made from borosilicate glass so it can handle high temps), and the infuser is perfect for any loose leaf teas you might like.

Sardine cup
I really like this green color and the little sardine art on it is just so cute.

Once Upon a Time “fairy tale” tea
I haven’t tried this but a friend of mine swears by it. This brand has edible glitter in it (did not know that was a thing) so your tea is shiny and fun.

Hot chocolate velvetizer
Probably the most extra appliance I own (my friend Jason got it for me) and yet… it’s spectacular and I am now a hot chocolate snob as well.

Other stuff

Mr. Jones watches
These are so artsy and fun for the analog lover in your life.

Pocket Tripod
My friend Tom recommended this one to me and it’s great if you wanna take a non-selfie and adjust where your phone is sitting!

Frank Lloyd Wright: Timeless art
I love Frank Lloyd Wright architecture in general, and the art prints here are a really cool homage to his work.

Rosanna Tasker art
I love this artist’s style in how she draws plants!

Canvas board game
A friend of mine introduced me to this game a couple months ago and I bought it instantly. If you like board games, imagine a combo of 7 Wonders and Century: Spice Road, but in this one, you make pretty art!

Goodbye

I don’t know how people usually end gift guides so… aggressively points finger guns while backing away

Jumblie Build Log

Tue, 28 Nov 2023 18:50:37 GMT

I built a word game called Jumblie that I’m very excited about, and I’m gonna tell you how I did it! This is gonna be long, so buckle up.

Why I built it

A friend of mine, Jason, is starting a video series where he gives 4 developers 1 idea (aptly named 4 Web Devs, 1 App Idea, wow), and he asked us to build something that could use a leaderboard.

When I see “leaderboard” I think “game” which meant I had to come up with a very fun game worth playing, and build it in less than a couple weeks.

How I came up with it

Not to be a mega-shill for my own company, but we have an app called Brainstory that I’m really into. You can use it to brainstorm ideas, and I needed to think hard about what sort of game I wanted to make!

I came to Brainstory saying “sooo I want to make a game” and slowly but surely it walked me through some of my thoughts around complexity and themes, and I came up with the concept of a jumbled word search game!

I knew I wanted to:

Make a daily puzzle that changes each day
Have 4, 5, 6, and 7 letter words, jumbled together
Make it play kind of like the New York Times Connections game
Have it be mobile and desktop friendly

What I did next

Obviously I bought the domain name first. Duh.

But actually though, what I did next: gathered words

Okay so I knew I wanted to jumble the 4 random words together, but I didn’t have piles of words to pull from. So, I literally googled “lists of words with 4 letters” (and 5 letters, and 6, and so on), and scraped the lists just in the developer console of the browser, and pasted those into text files.

Then, I wrote Python, which is not something I should ever be allowed to do, and used it to pull out words at random into a JSON array of arrays of 4, 5, 6, and 7 letter words:

import json
import random

def read_words(filename):
    with open(filename, 'r') as file:
        return file.read().splitlines()

def create_game_data():
    words_4 = read_words('4words.txt')
    words_5 = read_words('5words.txt')
    words_6 = read_words('6words.txt')
    words_7 = read_words('7words.txt')

    game_data = []

    for _ in range(min(len(words_4), len(words_5), len(words_6), len(words_7))):
        game_data.append([
            random.choice(words_4),
            random.choice(words_5),
            random.choice(words_6),
            random.choice(words_7)
        ])

    return game_data

def write_json(data, filename):
    with open(filename, 'w') as file:
        json.dump(data, file, indent=4)

def main():
    game_data = create_game_data()
    write_json(game_data, 'wordlist.json')

The output was very simple:

[
	["vote", "serve", "trucks", "upscale"],
	["fast", "point", "wooden", "general"],
	["heal", "wound", "forest", "wrestle"],
	// ...
];

But as you can imagine, when I made my first prototype of the game, it was… impossible to win.

It was just too hard! I had my braintrust (a.k.a. my cousin group chat) play it and one of my poor cousins had 81 guesses with no success. Noah, if you’re reading this, I’m still so sorry.

Back to the drawing board, I had to come up with a way to make this game significantly easier. My sister had recommended I come up with a theme for each of the groups of words, which meant I had to do some sorting.

Enter… large language models

I work at an AI company, I should probably think to use AI more in general.

I first thought that I’d keep all of my words that I had already scraped from the internet, and just ask the LLM to sort them all.

I prompted:

I have a JavaScript array of objects. Each object has a property words that has an array of 4 words (each with 4 letters, then 5 letters, then 6 letters, then 7 letters).

For example:

[
{ words: ["gods", "truck", "anodes", "bifocal"] },
{ words: ["heal", "wound", "forest", "wrestle"] },
{ words: ["shop", "bound", "august", "numbers"] }
]

I want you to rearrange all of the words across the arrays by theme (while still having each one with 4 letters, then 5 letters, then 6 letters, then 7 letters), and add a theme property to each element, providing a theme for the 4 words.

(and then I pasted my mega array)

But, this… was not a good output. I really learned that generating a new dataset is significantly easier than working with an existing one when you’re using LLMs. LLMs are good at making stuff up.

I talked to my coworker Kevin (thanks Kevin) who gave me some tips on messing with prompting and formatting. There were quite a few things I learned, for example LLMs have general semantic knowledge of words, but not really the actual length of words. I got some amusing outputs where the LLM actually knew that it was wrong:

{
	lengths: [4, 5, 6, 7],
	words: ["pear", "apple", "banana", "cherries"],
	theme: "Fruits",
	isValid: false
 },

Also, as outputs get longer, the LLMs get more and more inaccurate. I would get responses that were good for like the first 50 or so words, but if I wanted something closer to 1000, it would offer worse and worse output. There were times where it would give me the theme “finance” and the words would be like “microeconomics” and “macroeconomics” for the shortest words, or I would ask it for themes and it would start with something like “ocean” and end up with “Space Battle Royale Candyland Confectionary” (which was honestly very funny but incredibly hard to work with).

Eventually, I had a prompt that would allow for multiple kinds of words per theme, and I wrote a script on top of that to choose words from the output:

Give me a list of themes. For each theme, generate a list of words that fit that theme, broken up by length. The lengths should always be between 4 and 7 letters. Never include other word lengths! For example:

{
    space: {
        4: ["mars", "moon", "star", ...],
        5: ["comet", "earth", "venus", ...],
        6: ["galaxy",  "nebula", ...],
        7: ["jupiter", "mercury", ...]
    },
    ...
}

It wasn’t the best output, but I was able to get a solid 150 or so themes and word combos (and I decided to also let it occasionally go up to 9 letters because the poor bot couldn’t handle the restrictions), which would take me far enough that I could actually implement the game.

Actually building the game

Some might say I over-engineered this game already, but I prefer the term “thoroughly thought-out”. I decided to also continue this line of thorough thinking by building the app without any frameworks, just pure HTML, CSS, and JavaScript. Probably not the best move in hindsight. We live and we learn.

Anyway! Jumblie was about as basic as it could get at first, where it would take the letters from the day’s words, jumble them up, and plop them on the screen as clickable buttons, with the theme displayed on the screen as well.

After this, it… just worked. I added a scoring setup so that based on the word you guessed, it would be assigned to a color, and you could copy the score just like with games like Wordle and Connections:

Jumblie #12🟠🔴🔵🟢5 guesses

I went from this to adding features like keyboard support (which was painful, because events when you click buttons versus when you type are treated differently in the browser), a shuffling option (which was also painful, because I had to refactor how letters were differentiated on the screen), handling duplicate guesses (which was again painful because when you don’t use a framework, you gotta do some really funky imperative programming where you select the div, select the word in the div, compare it with the current guess, etc), and a timer (which was actually not that painful, phew).

Remember why you built this, Cassidy?

But, I still needed a leaderboard! I… ran out of time to build a real one against your friends. But the best competition is against yourself, I say! Right? Eh. Anyway.

I set up local storage to:

Save your best times while playing
Save your longest streak while playing the game
Save your current streak

You know what’s fun? Time zones. My word, time zones. A very common ask from folks was asking for pausing functionality and autosaving if you exit the game, and my word, setting up time zones with this scoring and the personal leaderboards made me lose far too much sleep and happiness. But, once I finally, finally fixed all of them (she said, foolishly), the personal leaderboard setup was complete!

Freeeeedom!

Since “finalizing” the game, I’ve been so happy with how much people play it! I added Fathom Analytics out of curiosity to see how it was doing (which was a learning experience in itself, because ad blockers made certain game functionality not work unless I “rearranged” where the analytics stuff lived), and as of writing, there’s around 800-1000 people who play it daily!

I’ve since added features like:

Ability to add the game to your home screen
A puzzle archive
A way for users to suggest new puzzles (because I am NOT going to deal with AI again for that)

I’ve gotten some other requests for things like internationalization (which would take a fairly large refactor I admit), actual shared leaderboards with friends, and a mobile app! I’m thinking about how I’ll implement those, but until then, I’m super happy where Jumblie is at right now.

Some of my favorite feedback is from folks who are not in my circles at all. Some folks have messaged me saying that this is their family group chat’s favorite game now, some others have said that it gives them the right level of difficulty beyond Wordle, and I’ve even gotten some fun traction from fans of the show Devil’s Plan, because there was a similar game on the show!

Phew, anyway, if you’d like to play it, check out Jumblie here and please do share it with your friends!

Until next time!

A use-case for CSS :has()

Sun, 19 Nov 2023 07:09:43 GMT

In case you missed it, the CSS :has() selector is now supported in all major browsers!

It’s a very weird (but cool) selector that allows you to select elements that contain a specific thing, like for example a:has(img) selects all anchor <a> tags that have an <img> inside.

I’ve thought it was really interesting, but I’ve never actually had a good use-case to use it myself besides… adding captions to images or something. But, that changed today!

On my personal website (which I first made a solid 4 years ago with plain HTML, CSS, and JS, and I admit I haven’t really updated since besides some words and links), I have a dark mode toggle. It’s probably rarely if ever clicked (I should probably modernize it with some prefers-color-scheme stuff sometime), but when you do, it does what you expect, it turns on dark mode.

Under the hood, that toggle adds a .dark-mode class to the <body>, and in the CSS, we style nearly everything based on that:

html,
body {
  /* ... */
  background: var(--white);
  color: var(--black);
}

body.dark-mode,
body.dark-mode a {
  background: var(--black);
  color: var(--white);
}

/* ... */

Now, here’s the problem: the body doesn’t always take up the entire height of the page. I was cleaning up and organizing some code, and when I put the background and color properties under html, body, that meant that the html was keeping its white background and black text color, even in dark mode.

BUT :has() came to my rescue! Because it kind of acts like a parent selector, I’m able to say “if the <html> has .dark-mode inside of it, that means it should have certain styles.” One line change later we had this:

html:has(.dark-mode),
body.dark-mode,
body.dark-mode a {
  background: var(--black);
  color: var(--white);
}

…and voilà, just like that, all of my problems I’ve ever had are solved!

My first go tournament

Sun, 05 Nov 2023 00:07:19 GMT

I just finished my first in-person go tournament! The 2023 Chicago Rapid Championship broke records this time for the largest tournament in the country outside of the Go Congress event, which is really cool.

If you’ve been around whenever I talk about it, you know that I really love playing go online, but I rarely get the opportunity to play in person. This was… a humbling experience, to say the least! Of the 5 rounds, I lost 3 games by the thinnest margin (literally the smallest margins you can lose by), and it was so painful. I did win one, though, and I’m really glad I did it! I learned a lot and I can’t wait to try out another tournament in the future.

Playing online and in-person is very different. There’s stress wondering what the other person is thinking, you have to watch out for your own “tells” and where you’re looking on the board, and also the scoring varies depending on the event. I definitely could tell that a couple of my movements made my opponents play a certain way, and I also took advantage of what I could, too.

It was really cool seeing people of all ages playing respectfully. Kids as young as 8 or 9 were playing, you saw groups of older adults who have been playing for decades, and tons of people in between. I appreciated how there was an etiquette about everything, and nobody seemed to be sore losers or winners.

I admit I didn’t stay for the closing ceremonies because I needed to head home, but overall it was a really well-organized event and I’m happy for all of the players who enjoyed themselves. It was a really unique experience and I hope to play like this again, someday!

Until then, if you ever want to play with me online, please add me on OGS, I’d love it!

Adding co-authors to TinaCMS's Git commits

Fri, 03 Nov 2023 02:39:34 GMT

One of the things that bugged me since starting using TinaCMS was that the bot for the CMS did the GitHub commit for me, and I didn’t get that juicy green square on my profile when I blogged. I thought a nice workaround would be to configure Git commit co-authors, but they didn’t have a way to customize the commit message yet.

BUT after doing some poking in the TinaCMS Discord group about it, that’s not an issue anymore!

You can now go to your TinaCMS settings to add yourself!

You’ll need to add your GitHub username, but for your email, if you want to keep that private, you need to get that from GitHub. Go to your email settings, and then scroll to the “Keep my email addresses private” to find the email address that GitHub made for you to keep your personal email private.

And now, HA, this post was written by me AND committed by me, using TinaCMS. Woo hoo!

How and when to use keys in React

Sat, 28 Oct 2023 00:34:25 GMT

Whenever you want to render a list of something in React, you need to add a key attribute to it. This helps the renderer know how to keep track of that element, kind of like an ID. That key can be pretty much anything (a number or a string or whatever), but there’s some high-level rules you should follow when using them.

Keys have to be unique - when React is differentiating things across renders, keys shouldn’t be the same as something else.
Keys should not be random IDs - if an ID is a random number generated during a render, then your items will have all new keys every time the state in your component changes. That being said, if you generate unique IDs when creating the data, that’s different and okay.
Keys should probably not be just the item’s index - if you plan on changing the order of your list, or adding or deleting items, then the indices will change whenever the list changes, and that will throw React off.

Here’s a good example of a key being set properly, using an id in the list:

const CityList = () => {
  const cities = [
    { id: 1, name: "New York", description: "The Big Apple" },
    { id: 2, name: "Chicago", description: "The Windy City" },
    { id: 3, name: "San Francisco", description: "The Golden City" },
    { id: 4, name: "Los Angeles", description: "The City of Angels" },
  ];

  return (
    <div>
      <h1>U.S. cities</h1>
      <ul>
        {cities.map((city) => (
          <li key={city.id}>
            <h2>{city.name}</h2>
            <p>{city.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

Here’s some further reading if you’d like to learn more!

Thirteen Potions Build Log

Sun, 22 Oct 2023 05:13:41 GMT

I built a game that I call Thirteen Potions, and I’m gonna tell you how and why I did it!

Backstory

I’ve always wanted to participate in a game jam, but for one reason or another, I’ve never taken the leap and done one. So, this year, I decided to force myself to actually do one that I’ve been following for a while, js13kGames!

js13kGames is a month-long competition that’s been running since 2012, and the challenge of it is that you have to make a game in 13 kilobytes or less of JavaScript, based on a theme. That is… a very small size, but I felt like the restrictions would be good for me to not over-engineer anything and just go for it.

This year’s theme was 13th Century and I noodled on some ideas that involved knights of some kind, and thought some kind of small time-based game would be good. Thirteen Potions is a game where you are a knight, and you have to get 13 potions in the map as fast as you can, using your arrow keys!

That being said, ugh, spoiler alert, I messed up a ton: I didn’t realize that the game engine that I would ultimately pick counted towards the final game size, so my game was disqualified in the end. BUT, I still had fun and finished it, so that’s a win enough for me!

Technologies and tools

I used the Phaser framework to build the game! I didn’t pick it for any particular reason, I just saw that they were offering prizes at the end of the game jam so I thought it’d be a good choice. In hindsight, once again, I should have read the fine print and realized that Phaser is very large for this kind of game jam, but MOVING ON.

I also used Aseprite for editing pixel art, which I initially got from Kenney!

To make the map, I used the Tiled map editor.

The rest of the app is built with just JavaScript on a single index.html page. The code is definitely not as cute as it could be, but I was just trying to make it work, so I didn’t do any sort of optimizations.

Setting up the game

I didn’t really know how Phaser (or game development with an engine) worked at all, so I copied from some getting started guides.

let config = {
	type: Phaser.AUTO,
	width: 720,
	height: 480,
	parent: "game-container",
	pixelArt: true,
	scene: {
		preload: preload,
		create: create,
		update: update,
	},
	physics: {
		default: "arcade",
		arcade: {
			gravity: { y: 0 }, // Top down game, so no gravity
		},
	},
};
let game = new Phaser.Game(config);

function preload() {
	// Runs once, loads up assets like images and audio
}

function create() {
	// Runs once, after all assets in preload are loaded
}

function update() {
	// Runs once per frame for the duration of the scene
}

After doing some “hello world” level stuff in here, I realized I had to get some graphics on the screen.

Making the map

When I first messed with Phaser, I just used a 2D array to plop in my tiles, but that was very tedious. That’s when I discovered the Tiled map editor! I was able to “paint” with my tilemap to create a map with various layers. I made a ground layer, a wall layer, an enemy layer, and a potion layer.

Tiled lets me export the map as JSON, and lets me also say which tiles should have collisions enabled, which is the spawn point, and also any other custom properties I might want, which was cool.

I admit I struggled with collisions and had to ask for a bunch of help online for it. I initially had the ground and the walls all on one layer and tried a collides: true property to make that work, but I found that separating them out into different layers worked a lot better (and more efficiently):

const groundLayer = map.createLayer("Ground", tileset, 0, 0);
const wallLayer = map.createLayer("Walls", tileset, 0, 0);
wallLayer.setCollisionByExclusion([-1]);

Making the main character

I loved the tilemap I got from Kenney because it had everything I could need for my map (and more). That being said, I needed to edit the knight a bit so that I could have a walking animation and multiple perspectives.

I’d never used Aseprite before, but it was luckily pretty straightforward to copy and paste and slightly edit the knight into a little spritesheet!

I really liked how easy Phaser made it to add the knight to the screen. I just had to:

Get my spawn point from the map
Add the player to the “physics” part of Phaser
Have the player collide with the wall layer and the edges of the map
Make the player animate when you hit the directional arrows

const spawnPoint = map.findObject("Things", (obj) => obj.name === "Spawn");

player = this.physics.add
	.sprite(spawnPoint.x, spawnPoint.y, "knight")
	.setInteractive(this.input.makePixelPerfect(0));
this.physics.add.collider(player, wallLayer);
player.setCollideWorldBounds(true);

this.anims.create({
	key: "right",
	frames: this.anims.generateFrameNumbers("knight", {
		start: 0,
		end: 1,
	}),
	frameRate: 10,
	repeat: -1,
});

// ...(more directional buttons)

Now the player was able to move, but I wasn’t able to see where they were going!

Setting up the camera

Making the camera and the canvas size line up was weirdly hard (I reeeeally didn’t understand how they were supposed to go together at first), but once it worked, the code was way smaller than I expected. Literally all of the final camera code was only four lines!

let camera = this.cameras.main;
camera.zoom = 4;
camera.setBounds(0, 0, 720, 480);
camera.startFollow(player);

After making a camera, I zoomed in on the player a bit, set the boundaries as the map size, and then followed the player!

Enemies and potions

Now that I had the player moving in the map the way I wanted, I was able to add in the potions and the enemies. Because I already had layers for them, it was a matter of:

Getting their layer from the tilemap
Creating a static group of potions in the “physics” part of Phaser
Creating an object per potion in the layer and adding it to the static group at the proper height and location

let PotionLayer = map.getObjectLayer("Things")["objects"].slice(1);

let potions = this.physics.add.staticGroup();
PotionLayer.forEach((object) => {
	let obj = potions.create(object.x, object.y - 16, "potion");
	obj.setScale(object.width / 16, object.height / 16);
	obj.setOrigin(0);
	obj.body.width = object.width;
	obj.body.height = object.height;
});

Once I did this, making the player collide with each potion was a one-liner!

this.physics.add.overlap(player, potions, collectPotion, null, this);

The player colliding with the potions results in the collectPotion callback. That callback removed the potion from the game, and increased the score.

function collectPotion(player, potion) {
	potion.destroy(potion.x, potion.y);
	potionScore++;
	text.setText(`Potions left: ${13 - potionScore}`);
	return false;
}

(The text part I won’t get into, long story short it’s just the text on the screen, where one thing of text is the potions left, and the other is the timer.)

Doing this for the enemies (some spooooooky ghosts) was the exact same thing, only the callback function for that collision slowed the player down and made them red for a couple seconds (as enemies do):

function zappy() {
	speed = 50;
	player.alpha = 0.6;
	player.tint = 0xff0000;
	setTimeout(() => {
		speed = 100;
		player.alpha = 1;
		player.clearTint();
	}, 2000);
	return false;
}

That’s all, folks

And after that… the game was pretty much done. I didn’t get deep into the update function (which was mostly just “if you press this button, the sprite should be facing that direction”) or the text showing how much time you’ve spent in the game, but you can find all of that code and more in the GitHub repository for Thirteen Potions.

Hopefully next year, I can make a game that actually is 13 kilobytes, but until then, I was very grateful for the feedback from the game jam itself, and all of the folks who played it online! The most humbling thing is the fact that there’s now two people who have beat my best time in my own game (52 seconds, heyo). Which is also awesome.

Anyway, thank you for reading and playing!

Trying out TinaCMS

Sat, 21 Oct 2023 05:29:18 GMT

Helllloooo so it’s been a minute! And… for good reason.

I have a workflow that somewhat works well for me in which I write my blog posts in Obsidian (with a template that helps me add tags and a description and stuff), and then when I want to post them, I copy and paste the post into the repository here, and then if I have images, I add the images to the repo, and then check all of the paths for it, and then ship it.

It works well, BUT there’s just enough overhead that sometimes I don’t write a post because there’s a few too many steps. I have a few partially-written posts that I haven’t published yet, because I keep thinking about the things getting in my way post-writing. I thought it would be nice to have a web interface for easily publishing blog posts here!

I wasn’t sure what CMS I’d use, because so many of them require quite a bit of setup, or they have more of a GUI interface rather than a markdown-oriented one. But, then I saw this blog post about how Smashing Magazine uses TinaCMS and it looked like the perfect solution for me! I love the idea of being able to have everything be Git-based, markdown-based, and very lightweight. I was able to configure Tina pretty quickly (I streamed it and luckily a core team member was in the chat and able to help me a bit when I was misunderstanding things) and it didn’t mess up my existing codebase in any way!

A few weeks ago I spoke at CodeWord Conf, and something that Chris Coyier said in his segment stuck with me when he talked about his consistency: the fact that he can just type into a CMS and hit send, with minimal things getting in his way, has kept him more consistent in his writing. I do prefer Markdown and my usual local-first workflow, but the fact that I could spit out a blog quickly without any sort of copying and pasting or editing is something I’m excited to try.

This is the first post I’ve written and published with TinaCMS, and we’ll see how I like it over time!

Calling an imported API at runtime in Astro

Fri, 22 Sep 2023 05:00:00 GMT

Astro is a web framework that I like for a lot of reasons, but in particular I like that it runs as little JavaScript as possible (at runtime) by default. When I say “at runtime” I mean as the page is run in the browser, not when your site is built (I’m not going to get into the difference in this post as much, but you’ll see why it matters in a sec).

Anyway, the lack of JavaScript at runtime makes for some really quick, lightweight sites that have a lot of power behind them, but sometimes you want to use some good ol’ scripts.

An Astro component has some frontmatter at the top, kind of like Markdown, where you can import different components and scripts, and then a JSX-like syntax below:

// index.astro

---
import BaseLayout from "./BaseLayout.astro";

let userName = "pretend I'm calling a function or something here";
---

<BaseLayout>
	<h1>Hello, {userName ? userName : "world"}!</h1>
</BaseLayout>

When you want to run a script on this page, you could import a component, or just add some <script> tags to handle it.

But, what if you want to import an API?

// index.astro

---
import BaseLayout from "./BaseLayout.astro";

let userName = "pretend I'm calling a function or something here";

import api from "whatever";
---

<script>
const res = await api(); // api is not defined
</script>

<BaseLayout>
	<h1>Hello, {userName ? userName : "world"}!</h1>
</BaseLayout>

Unfortunately, this won’t work! Because the frontmatter imports and the script is called at different points, the api function there is considered undefined when you call it.

But, have no fear, this is actually a really quick fix:

// index.astro

---
import BaseLayout from "./BaseLayout.astro";

let userName = "pretend I'm calling a function or something here";
---

<script>
import api from "whatever";
const res = await api(); // api IS defined!
</script>

<BaseLayout>
	<h1>Hello, {userName ? userName : "world"}!</h1>
</BaseLayout>

You just have to import your API at the <script> level, and you’re golden!

Did I write an entire blog post for a one-line fix? Yes.

I keep forgetting this is a thing and I figure a blog will help me actually remember this when I inevitably run into it again. Classic.

Happy trails!

Co-authoring Git commits

Sun, 27 Aug 2023 05:00:00 GMT

Sometimes when I’m pair programming (or if someone’s been just super helpful to me), I want to be able to give another developer credit in a commit I make in a Git repo.

There’s a way to do this (that is supported in both GitHub and GitLab) from the command line! In your commit, you just have to add this to your commit message:

Co-authored-by: name <someemail@example.com>

Now, if you don’t know that person’s email address configured in Git, I personally just run git log and then scroll through until I find it (which works well on small teams or when that person has a branch that you can checkout and run this on). You could also get a bit more fancy and run git show <some commit ID where you know they made the commit> --format=email to get just their email. Or you can be less fancy and just ask them.

This is fairly easy to do in the various Git clients out there since there’s a nice open text box for it, but in case you like to use the command line, this is how you’d write it:

git commit -m "Regular commit message" -m "Co-authored-by: name <someemail@example.com>"

And then, once you push, GitHub (or GitLab or wherever you host your Git projects that have this enabled) will credit that person with the commit alongside you!

Happy coding!

Why I like Astro

Thu, 10 Aug 2023 05:00:00 GMT

My blog, our website at work, and Share Pear are all built with Astro!

It has quickly become one of my favorite frameworks. Here’s why!

Comfortably Familiar: Astro doesn’t require you to learn new lifecycle methods or other complex concepts. It brings back the simplicity of web development, reminiscent of when we all started dabbling with HTML and CSS. You can build with plain old HTML and CSS and add other stuff as needed.
Flexibility: Want to use React or Svelte for certain components on your page? You can do that with Astro. It allows you to pull in different libraries and frameworks, giving you the flexibility to use the tools you prefer.
Minimalist by Design: Astro is intentionally minimal. It only runs certain things when you tell it to, which helps to avoid unnecessary bloat on your page. This design philosophy aligns with the idea of making websites faster by not adding too much rather than trying to optimize heavy pages.
File-based Routing: Astro does file-based routing, which means you just add the page to the folder and it’s done. You can make your app as React-heavy as you want without having to set up routing.
Server-side Rendering (SSR) and Static Generation: Astro supports both SSR and static generation. Whether you prefer to upload something to a CDN or want to handle things server-side, Astro has you covered.
Built-in Pagination: Astro has a built-in function called getStaticPaths that creates static paths based on whatever function you pass into it. This means you can create and paginate through pages with ease.

Astro brings a lot of exciting features to the table, offering a blend of simplicity, flexibility, and performance. It’s a tool that certainly warrants your attention if you’re in the web development space.

As always, I’m open to discussions and answering any questions you might have about Astro!

Maternity TV

Fri, 14 Jul 2023 00:00:00 GMT

I normally don’t watch a ton of TV, but on my maternity leave while holding/playing with/changing/carrying my baby I had a lot of things on the big screen to occupy my brain as my hands were full! This is a list of the TV shows I saw (or at least had on in the background), in no particular order. I watched movies too (mostly musical ones so I could sing to the baby) but I can’t be bothered to list those as well.

Shows I watched

Girls5Eva (funniest show I’ve seen in a really long time)
Veep
Bloodhounds (so violent and very much a bro show, but well done)
Poker Face (the TWISTS)
Marvelous Mrs. Maisel
Ted Lasso (very wholesome, not my favorite show in the world but it was a nice show)
Project Runway
Top Chef
Survivor

Shows I re-watched

The Office: Superfan episodes (added some new elements to the show that were so great)
Community
Business Proposal (one of my fave k-dramas!)
Alone
Kim’s Convenience (never watched it all the way through before, and I am very sad it was cancelled)
Grace & Frankie
Black-ish

Shows I purposely didn’t finish

Suits (stopped around season 3, there was a lot of “if you don’t tell the truth, I WILL” and I got tired of it)
The Good Wife (too serious)
Doogie Kamealoha, M.D.
Hack my Home
Sweet Tooth
Siren: Survive the Island (just lost interest on this one)
Workin’ Moms
Beef (a little too intense for me)
The Bear (same)
Schmigadoon! Season 2
Mythic Quest
Taskmaster
The Morning Show
I Love That For You (I couldn’t handle the cringe)
What if…?

Dear Cassidy of 2 months ago

Wed, 12 Jul 2023 00:00:00 GMT

Hey Cassidy of 2 months ago,

Baby Nadia is 2.5 months old now and is the best. Truly. The hormonal mood swings are lying to you.

You’re going to cry a whole lot over the next few weeks. You’ll feel anxious, and angry, and sad, and feel like this was a mistake. You’ll look at your baby and wonder what you’ve done. You’ll go on walks to try and clear the clouds in your head (and also to try and physically heal), and they’ll sometimes work (temporarily). You’ll have wonderful people around you to help you out, and as grateful as you are, you’ll still feel sad.

That sadness sucks. It’s irrational. You’ve got such a good baby who eats well, and sleeps (relatively) well, and loves to kick literally all day long like a little baby Mia Hamm. Even when she cries, she’s cute. But the hormones are lying to you and telling you to be sad anyway.

Finally, after a few weeks of trying therapy and a support group, your doctor is going to tell you “enough is enough” and prescribe you some antidepressants to try and get you out of the funk. You’re going to be nervous about it, but several of your friends give you stories of their experiences about how helpful they are at regulating your feelings. And then, coincidentally, the day you pick them up from the pharmacy… the clouds will clear. You’ll never actually need to take the pills (at least we haven’t so far, heh). The sadness just… stops, and you’ll suddenly enjoy hanging out with the baby.

It’s super weird how it happens. Truly you just suddenly feel like yourself again, 2 days after crying to the doctor at the 6-week checkup. Your shows will be funny again, and you like playing Zelda again, and your appetite comes back, and you actually clean your house (at least a little, you have a baby to take care of). Holding the baby is suddenly a joy, rather than a burden. Instead of thinking about how daunting it is to have this human around forever, now you’ll think, “we’ll cross tough bridges when we get there,” and just enjoy the time now.

Annnnnd then your breastmilk dries up, and you get your first period since the baby, and you’ll be sad all over again. You’ll go back on your walks, you’ll cry the whole time, and you’ll wake up each day almost angry that you can’t kick these feelings out of your system. But just make it through that for a couple weeks, and you’ll be okay again.

We’re at the 2.5 month mark now. Nadia slept 10 WHOLE HOURS last night. She’s started to laugh when you make silly faces at her, and she’s guzzling formula like a tank. She is so cuddly and loves it when you read books to her. She coos a ton and it almost sounds like she’s saying “I love you” back, and we’re just going to pretend that’s on purpose.

You can make it through, Cassidy of 2 months ago. A lot of people tell you that parenthood is hard forever, and it is. It’s unreal how hard it is. But those hormone swings (and impossible sleep patterns) make it harder than ever. It gets easier, and you get braver. You can do it. You can do it. You can do it.

Open standards, trust, and Google

Wed, 21 Jun 2023 00:00:00 GMT

Seeing Google kill off and sell Google Domains is such a big surprise to me. It shouldn’t be, given they’ve shut down waaay more than that. I’m still annoyed at them stopping the Google Code Jam competitions and Hangouts and G Suite and… way too many other services.

The domains service felt different, for some reason. It was something that it felt like they were investing a lot into (didn’t they just come out with the .zip TLD amongst others?) and that people were really trusting. And it made so much money! It served millions of domains!

But… it didn’t make enough money. Why have a business that can make millions of dollars when you can make billions on ads? It’s disheartening, but the bottom line is: Because Google is Google, the only thing that we as users can trust is that if they can make money with ads, the product is more likely to live, otherwise it’s going to die.

Google has sunk its teeth into our daily lives with Gmail and Google Calendar and YouTube and Drive (and more), and they’ve made these tools (amongst others, Google Domains included) really convenient. They all just work together, and their APIs are solid enough that third party developers can build off of them relatively easily. And because they own the APIs as a centralized system, developers are at the whim of whatever they decide to change. They can monetize it however they want, and control how content is served to an extent.

Now, don’t get me wrong, Google is not the only company that does this. Anyone can look at how Reddit and Twitter have changed things for their developers in the past few months because of the dependence on their APIs. Content creators are at the mercy of the platforms that service them, and if TikTok, Facebook/Meta, Spotify, Netflix, YouTube, Medium, Twitter, etc. change, creators have to work even harder to reach their audiences and tailor their content to The Algorithm.

All of this brings me to the topic of open standards. I listened to this 2021 podcast episode recently about the importance of open internet standards and it’s stuck in my brain as these big changes are announced. When you use communication software that is fully proprietary, you’re at the mercy of the creators of that software and how (and sometimes what) they want you to communicate. When you use software based on open standards, you’re able to more easily transfer how you communicate and work to other platforms if you want to.

Side note: open standards are different from open source, but both are good things, and here is an article about the differences between them.

Now, if you’re creating software, I’m sure you might be thinking, “why would I want to make it easy for someone to leave?” To that, I’d honestly probably respond snarkily with, “then just build better software,” heh. But real talk, it’s about building a good internet citizen. Think: A rising tide lifts all boats. When something is built with an open standard, that means it can be improved alongside that standard. When you contribute to the standard in addition to your own software, you’re benefitting everyone, which is ultimately good for your business.

Podcasting is a great example of this, being built on RSS. Listeners get to choose where they want to listen, creators get to choose where/how they want to host their shows, and developers get to choose how they support + build on top of features. Plus, RSS has gotten some great improvements thanks to the podcast ecosystem! There’s so many more examples like this that deserve credit, using HTTP and JMAP and WebRTC and mooore. The stability of the open standard enables innovation!

Anyway, because of all of these services being killed recently, I personally have been looking to switch away from Google and other softwares that I rely on that don’t use open standards, so that I can feel a bit safer about my data. I admit it’s fairly challenging (Google Calendar is the only thing supported by most of the scheduling apps I like, ugh, and some things don’t have an open standard to work with). But, I hope app devs out there see what’s happening as a result of closed systems, and move towards building more in the open and helping push standards forward. Or building new ones!

Removing trailing space underlines from groups of anchor tags

Wed, 14 Jun 2023 00:00:00 GMT

Recently as I was working on some styles for my blog, I ran into an issue where I had a block of anchor tags rendered in JSX, and they didn’t look right.

All of the links had trailing spaces, and those spaces were being underlined!

How did we get here?

I had an array of tags, and they were being displayed in a <div>, like so:

<div>
  {tags.map((tag) => (
    <a class="tag" href={`#`}>
      #{tag}
    </a>
  ))}
</div>

I didn’t fully understand why the underlined, trailing space was being rendered, and weeped as the gods of JavaScript mocked me.

After getting over it, I tried changing the word-wrap and other various CSS styles to fix the links, with no success. I admit it took me way longer than I expected to find a solution, and I wrote this blog to save me from my future self who will inevitably run into this problem again.

How did we overcome?

Turns out, if you add display: inline-block, it removes the underlines in the spaces!

Here’s a CodePen to show this lil CSS trick in action!

See the Pen Underlined spaces in blocks of links by Cassidy (@cassidoo) on CodePen.

The end, stay safe, nerds.

Turning todos into tadas

Sat, 20 May 2023 00:00:00 GMT

Having a baby really has changed my brain more than I ever expected it to. I related a ton to Rach Smith’s post about the inevitable mental breakdown you get in early motherhood, in that… everyone tells you how magical motherhood is, and how it’s the most important job in the world, and they all congratulate you on how exciting it is. And then, and then, and then: the baby gets here, and your life is no longer your own (at least it feels that way), and any semblance of control you thought you had over where things would go are out the window entirely.

Now, full disclosure, I’ve been diagnosed with postpartum depression, and it sucks. I love my baby and thank goodness don’t have the kind in which I want to cause harm to her or myself so far. But my word, what I would give to be able to think clearly and feel like myself again! I’ve been getting professional help and trying to read a lot about it to try and kick it out of me, with no dice yet, and have been learning the hard way that I can’t just… do that.

Motherhood and all of the related effects and tasks can’t just be checked off of a list. Processing that has been really hard for me. I like seeing solutions and tasks checked off and completed. Heck, one of my favorite projects I’ve built for myself is literally a checklist with a progress bar. I can’t just check off “parenting” and “third irrational/hormone-driven cry of the day” and be done with it. I love being able to finish something and just take it out of my brain and move on to the next, but with motherhood… it doesn’t end. Parts of it does, sure, and a lot of it changes, constantly, but… it’s forever.

This makes sense, of course. I didn’t get pregnant just to ship a baby, say “LGTM,” and then call it done. But living it out is so different than I thought it would be. Lack of sleep, postpartum, plus the ongoing physical recovery from actually giving birth just emphasizes even more how daunting it is to never, ever be “finished” with anything.

So, that being said, I’m trying to shift my mindset away from todo lists. It’s easier said than done, but I’m doing a little :%s/o/a/g in my brain when it comes to todos (which for non-vim normal humans, replaces the os with as, to turn “todos” into “tadas”). I want to focus less on “this is what I have to check off for the day” to feel like I have things managed and under control, and more on, “these are the things I did today, tada!”

There are days where I don’t have time to clean up as much, or the baby is fussy, or I only get things partially started or finished, and that only adds to my stress when think about what I didn’t “check off” for the day (heck, I planned on writing this blog post a week ago). But, if I can celebrate that I did clean a little, or that I did keep the baby alive, or that I at least thought about how I’d approach some other task… maybe I’ll get a little bit of my old happy brain back.

My c-section experience

Sat, 06 May 2023 00:00:00 GMT

I had a baby a couple weeks ago! Ahh! She’s an absolute delight and we love her deeply, but also… this has been the hardest two weeks of my life by far. It’s so mind-shattering how much life has changed. Everyone says that it’s the most intense thing you’ll ever experience, but those words don’t really explain it enough. It’s extreme moments of joy and extreme moments of sadness back and forth, all the time.

But anyway, I am writing down what happened with my c-section and hospital experience for anyone who doesn’t know how these things go, who might benefit from the knowledge, and who might be going through it themselves.

Content warning: I’m gonna be talking about surgery, babies, bodies, fluids, shots, the works. If you get queasy reading such things, you should probably stop reading now.

Prepping for the day of

In the days before your c-section, you’ll have to do some kind of bloodwork to make sure everything looks good. The results for that last 72 hours, and I recommend doing that as early as you can so that the needle prick can heal a bit. You’re going to have a lot more of those in the next fews days. You’ll also wanna… groom the downstairs area. If you don’t, they’ll shave you. You don’t want that.

On the day of, you can’t eat for 8 hours beforehand. If you’re going to have a planned c-section, plan it for the morning so that you can eat the night before and go straight to the hospital in the morning.

My c-section was scheduled for 7:30am, and we had to get there by 5:30am to be monitored and prepped. That involved getting in a gown, having things strapped to me, some light blood work, an IV added to the arm, and answering lots of questions about home life and health.

Side note: why did I get a c-section?

My baby was breech, aka upside down. I had actually tried to do the external cephalic version (ECV) procedure to flip her around, and that was probably the most painful thing I’ve ever experienced.

If I were to give advice to anyone experiencing a breech baby: don’t do the ECV. It’s only successful about 50-60% of the time in flipping the baby, and it was more painful than the actual birth itself. I’m very happy to share my experience with you in more detail if you want, but just know that it’s multiple adult doctors physically pushing your baby while you feel your organs being crushed. Just get the c-section.

The build-up to the actual procedure

After the initial prep, a bunch of nurses and doctors come in to tell you all what to expect. They’ll say which rooms you’ll be wheeled into, they’ll give you some initial meds, they’ll tell you what key words to listen for, and they give your designated support person a bunny suit (my lovely husband Joe was my support person, and he did not know that a bunny suit was an actual surgical outfit, and thought he was going to actually be dressed as a rabbit for the birth of our child).

They gave me a super bitter, sour drink called bicitra before going in for the epidural. It was nasty. But, it’s supposed to help you not throw up when you’re strapped to the table. Throw it back like a shot and try not to taste it if you can.

When it was time for the epidural, they rolled me into the operating room. That room is COLD. I was so shaky from both the cold and the nerves that a nurse had to hold my arms and legs still while I curled up like a shrimp. The needle they put in your back is not comfortable. On the plus side, it’s the last time you’ll feel pain until after the baby’s born.

The c-section

Okay, it’s c-section time, and it’s like you’re a race car and all of the doctors and nurses are the pit crew. A lot happens really, really fast.

You are positioned to lay out on the table like a cross, and you’re strapped down. At any point if you’re feeling nauseous, you have to say it loudly because otherwise they will miss it. They pull up a curtain so you can’t see anything below your chest, and they start poking you with something spiky in your arm, and then in your leg, to see how fast the epidural is taking effect.

I was getting particularly nervous at this point, because as you’re losing the feeling of pain, you can still feel them prodding you and positioning you for a while. It was really uncomfortable.

They brought my husband Joe in at this point, and he was on my side of the curtain holding my hand. I had him find a bunch of animal facts earlier to tell me to try and distract me, which was incredibly helpful and I highly recommend you do.

I was nervously crying as he was telling me the facts and I was trying to focus on that, and the anesthesiologist leaned in to say, “hey, I know you’re nervous, but if it helps, they actually cut you open already, they already started, and you felt nothing.” Which did help! But then the PRESSURE began.

You don’t feel pain, but whew, you feel a WEIGHT on your chest like no other. It felt like someone was sitting on me and shaking me, and I was struggling to breathe. The doctors said it was because the muscles around my lungs were numb, so I had to do extra work there. All I could really see were blood splatters (wee) on the curtain, and I was just focusing on breathing as much as I could while Joe talked to me.

The procedure’s total time was pretty fast, I think it was less than a half hour from epidural to baby exit, but it felt way longer. There was a point where I heard the baby cry behind the curtain, but I was still feeling pressure, and the doctors then gave me valium which knocked me out. Joe at that point was able to take pictures of the baby and hold her (he said he accidentally took a quick glance and saw way too many of my organs out as they were about to stitch me back up, be careful of that), and the next thing I knew I was being wheeled into the post-op room seeing him give the baby to me. I admit I was fairly loopy from the drugs for a couple hours after that, so I don’t fully remember what happened besides skin-to-skin time and being hooked up to some machines for monitoring.

The aftermath

And then… our baby was here. We were wheeled into the recovery room, and were there until Tuesday morning (the baby was born on Friday).

In that time we were in the room, the baby and I were checked every two hours for blood pressure and temperature (which does not make for very restful sleep). The nurses and technicians were all very kind though. They have lactation consultants who help with breastfeeding (and by the way, if you don’t want to breastfeed, be firm on that, because they are going to very heavily encourage otherwise), and the doctors come in twice a day to check the scar and bleeding.

Things I didn’t expect that you should be ready for:

You’re going to have a catheter for at least the first day and that is how you’re going to pee.
You won’t be able to move your legs for a while, but it’s important to try and wiggle your toes and move them around on the hospital bed until you can.
When they remove the catheter, it’s gonna hurt, and suddenly you’re going to have to get up to go to the bathroom whenever you need to.
It hurts a whole lot to get up and go to the bathroom.
The nurses will show you how to get out of the bed to get up, and you will probably need help from them and/or your support person to get up for a while. I think I was able to get out of the bed on my own on day 3 or so, but it took a whole lot of effort and you gotta use the bars on the side of the bed to pull yourself a lot. Build up your arm muscles now.
Walking is very, very hard. Your abs will not work, and the ligaments around your crotch are gonna hurt. You almost need a cane or a walker. Hold onto everything you can to help you move.
You’re going to have a mega pad in the high-waisted underwear they give you because you’re gonna bleed a ton. It’s like a really heavy period. I’m a little over two weeks post-op and I’m still bleeding (less, but still). You should try to keep as many of the pads and underwear they have as you can. It’s not cute, but it’s effective.
Your uterus is going to start to contract back into place and it hurts a TON. Imagine period cramps, but worse. Luckily the cramps don’t last long (maybe like a minute), but whew, hold onto something. You will also cramp every time you pee.
You will take a long while to be able to poop again, but you’re gonna want to as soon as you can to ease the cramping. Ask for stool softeners. Also you should probably take stool softeners the week leading up to the procedure just to prep your butt. A lot of the pain meds they give you cause constipation so you gotta fight back.
Your baby has sharp fingernails. Bring a baby nail file because those things are way sharper than they should be.
If you don’t bring a pacifier, you can use the surgical gloves in the room and have your baby suck on your pinky finger or something if they’re fussy but not hungry. Amusingly, babies suck on anything they can because of their little reflexes. There was a point where the nurses said that a lot of dads come out of the hospital with little hickeys because they’ll do skin to skin time and the baby will suck on their clavicle or something (and about 20 minutes later, that happened to Joe).
This could be a whole other blog post, but breastfeeding freaking hurts. It gets better over time, but dang, those first latches are like little razors on your nipples. Holy crap it hurts. Ask the lactation consultants for gel pads, nipple cream, shells for your bra, anything that can relieve you.
We looked up all sorts of things to include in our go bag, and honestly… we hardly used any of the stuff we brought. I was never really “bored” because I was so tired so I just slept whenever I had down time between drug checks, so I didn’t use my book or my iPad that I brought along. I switched between hot and cold so often, I didn’t use the blanket I brought. I bled and leaked milk so often that I just kept using new hospital gowns instead of any of the clothes I brought. I think the main things I’m glad we brought along were extra little snacks for between meals, and our own toothbrushes.
You can ask the nurses to help change and swaddle the baby, as well as have them help you put the baby to sleep. Take advantage of this. You and your support person are going to be so, so tired. You can also ask them to assess your diapering and swaddling techniques, which is a good learning experience.
The hormone swings started to really hit me on day 3 or so (and I’m still dealing with them today). The way the doctor put it: “when you’re on your period, you have 2 major hormone changes that cause your mood swings, and after birth, you have 20. You’re going to be hit hard.” And boy howdy, they were not joking. This could also be a whole separate blog post, because I still haven’t kicked out all of my baby blues, but long story short: talk to other parents, talk to your doctor, go on walks, and… good luck. The mood swings are probably the hardest thing for me now (she says, still bleeding and slowly using stairs again).
You don’t have to be sneaky about taking stuff from the hospital. On our last day, several nurses came by and would say, “oh wait, you should take more diapers” or “ooh, actually, take more of these ice packs” etc, and it was awesome of them. We’re still using a lot of supplies they gave us. If anything, just bring an extra large go bag that’s mostly empty so you can stuff it full!

Okay. Whew. I think that’s all I’ve got for now. Overall, obviously, we got a healthy baby out of it, so the c-section experience was positive. I think a lot of this is not talked about enough and I hope this can be a useful resource for anyone who wants/needs to know more about the procedures and what it’s actually like!

Three ways to set headers with Netlify and Astro

Fri, 14 Apr 2023 05:00:00 GMT

I recently had to build an Astro website on Netlify in which we needed custom headers. Turns out there’s several different ways to do that, some of them are weird, and some of them will work better for your use cases than others.

I’m writing this down here because I know for a fact that I will need to refer back to this again someday, because CORS errors are the worst and omnipresent.

Anyway!

There are also other ways, but I am only going to list three, because these are the three that seem to work the most for me. I’m also just doing it for the Access=Control-Allow-Origin header because you can probably figure out how to add others once you see one.

Also, here’s the Astro documentation for the Netlify integration if you need it! I’m also assuming you have the @astrojs/netlify package installed if you’re using Astro for server-side rendering or for on-demand builders.

Setting headers in your Astro config

The first way to set headers in Astro is directly in the astro.config.mjs file.

// astro.config.mjs
import { defineConfig } from "astro/config";
import netlify from "@astrojs/netlify/functions";

export default defineConfig({
  output: "server",
  server: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  adapter: netlify(),
});

This works great if you’re running your Astro site in server-side rendering mode, but it’s kind of weird on Netlify sometimes (and I admit I don’t know all the cases, like when edge functions are involved or something, etc), so if it doesn’t work, don’t fret, there’s other options!

Setting headers in the Netlify config file

You can set headers in your netlify.toml like so (docs here):

# netlify.toml
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

There’s also a _headers file that Netlify supports that’s very similar:

# _headers
/*
  Access-Control-Allow-Origin: *

And also similar still is setting a Netlify proxy redirect (again in the netlify.toml) where you take a relative route, point it to an absolute route, and add the header.

# netlify.toml
[[redirects]]
  from = "/search"
  to = "https://somewebsitethatimadeup.biz/search/*"
  status = 200
  force = true
  headers = { Access-Control-Allow-Origin = "*" }

This Netlify config method works best with static sites, not anything served with serverless functions or edge functions.

Setting headers with an edge function as middleware

This is probably the most “advanced” way to set headers, but it works really well, and you can add a lot more custom logic to it (plus I think it has the least restrictions as well).

First of all, you have to make an edge function file in netlify/edge-functions/ (I’ll call mine headers.js), and then point to it in your netlify.toml:

# netlify.toml
[[edge_functions]]
	path = "/*"
	function = "headers" # or whatever your file name is

Then, in that headers.js file, you add your headers:

// headers.js
export default async (request, context) => {
  const response = await context.next();

  // You need this if you are calling this from the browser
  // to handle CORS preflight stuff
  if (request.method === "OPTIONS") {
    return new Response("ok", {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    });
  }

  response.headers.set("Access-Control-Allow-Origin", "*");
  return response;
};

If you don’t add that OPTIONS conditional, you might see an error like this whenever you call that edge function:

Access to fetch at '...' from origin '...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Anyway, in here you can do whatever logic you’d like around adding headers conditionally, adding multiple headers, whatever your heart wants!

The end

These were all things that I ended up working with for some projects at my work, Contenda, and you can probably find some of these sprinkled in some of our open source repos if you’d like to see some examples.

All this being said…

For future Cassidy: welcome back. I see you’re running into the same CORS issues again. When will you ever learn?

For everyone else: I hope this was helpful for you, ‘til next time!

The Productivity apps I use in 2023

Sat, 08 Apr 2023 00:00:00 GMT

I wrote about this last year and realized that I both didn’t include everything I wanted to, and also had more to add, so let’s dive in!

Obsidian

Website

It’s a local-first markdown editor. I love that I can keep everything local to my machine (so I don’t have any slow load times), and just write markdown without anything getting in my way. Beyond that, they have an open plugin + theming setup, and you can pay for syncing across devices as well. I often jot down quick notes on my phone, and then I access them later on my computer to flesh them out, and it’s perfect for that.

Centered

Website

When I use Centered, I get more work done, simply put. I was a little slow to get into it at first, I had to give it a second chance, but now I can’t imagine getting all that I want done without it. I often have trouble focusing throughout the day when I have a lot to do, and Centered helps a ton with that.

Centered is a flow state to-do app. It’s kind of hard to explain quickly, because it does so much while being pretty simple, too. You plop in your to-do list for the day/session/whatever, each task has a certain amount of time assigned to it, and then you hit start. It’ll play some music designed to help you focus, and it has a coach that speaks to you about how much time is left in your current task, gives you breaks, and pokes you when you’re distracted. It also has an optional thing where you can have your camera on while you work, which is weirdly good at keeping you feeling focused.

I made a group in it if you’d ever like to flow with me! Other groups in there include students, web developers, special interest groups, and you can make private groups with your friends as well.

Raindrop

Website

Cron

Website

Cron is a keyboard shortcut-powered calendar app. I’ve tried a bunch of calendar and scheduling apps over the years, and Cron is my current favorite. It lets you quickly use keyboard commands to see your teammate’s calendars, share availability, view multiple timezones, and create events. They were bought by Notion recently, so I think we can expect some interesting integrations from them soon. My only complaint with this one is that it only works with Google Calendar so far (and I’ve been wanting to move away from Google for various things), but it’s not the end of the world.

todometer

Website

This is a shameless plug, but I use todometer for task management, and… I built todometer.

todometer is a meter-based to-do list for your desktop. I use this to keep track of things that I’d like to get done throughout a given day or week, without the restrictions of a flow state session. I made it because I am motivated by progress bars, and sometimes I just need a simple list prominently on my desktop of what I need to get done. Plus, it’s local-only, so you don’t have to worry about loading times. Here is the repository if you’d like to see how I built it (full disclosure: I want to maintain it more, I have a roadmap in mind for a few things, but I’ve got other things to do, so if you make an issue, I’ll get to it… someday).

Dabble.me

Website

That’s it!

Until next time!

Memorize quotes

Mon, 27 Mar 2023 00:00:00 GMT

When I was young, my parents gave me a poster I put on my wall of a bunch of different inspirational quotes from various people. Every morning as I got dressed, I’d have the quotes up in my face, and slowly but surely I started memorizing them and internalizing them. There were inspirational ones like:

“Great work is done by people who are not afraid to be great.”

Fernando Flores

And ones that are just good life advice, like:

“Finish each day and be done with it. You have done what you could. Some blunders and absurdities no doubt crept in; forget them as soon as you can. Tomorrow is a new day. You shall begin it serenely and with too high a spirit to be encumbered with your old nonsense.”

Ralph Waldo Emerson

And though I don’t remember all of them at all times, the whole concept of “memorizing quotes” has been a genuinely useful practice for me that I highly, highly recommend to folks in general. Both for, you know, actual life advice and encouragement, but also to pull out of your butt at any given moment.

“Wow Cassidy, this post just took a turn,” you may say, but no no, hear me out: When someone hears you quote something legit and applicable to a situation, you suddenly come off as waaay smarter and more prepared for a conversation than you did before.

No way, give me an example.

One of the quotes that I memorized on my poster growing up was from Helen Keller:

“One can never consent to creep when one feels an impulse to soar.”

I have used this quote in every written exam I’ve ever taken since middle school. Testing into Honors English courses, the PSAT exam, social studies tests, the ACT exam, taking the AP English exam, college admissions essays, testing out of English in college, some job applications… every single one. It’s just generic enough that you can apply this quote to pretty much any situation. And on almost every exam on which I’ve gotten feedback, the examiner compliments me on how much I’ve prepared for that portion of the test.

But it is all a lie.

I do not prepare.

I memorize quotes.

Oh my word, Cassidy

I know. It’s like a little life hack, but it’s so dang helpful. When I’m mentoring someone or giving some kind of inspirational talk?

“Comparison is the death of joy.”

Mark Twain

When someone is deciding if they should take action on something?

“This is your world. Shape it, or someone else will.”

Gary Lew

When I’m feeling slightly spiteful because someone questioned my ability to do something?

“The greatest pleasure in life is doing what people say you cannot do.”

Walter Bagehot

When someone is saying I’m being too paranoid and over-preparing for something?

“Luck favors the prepared.”

Edna Mode, The Incredibles

Having even just a small handful of quotes in your back pocket makes you seem credible, prepared, or at least somewhat quick-witted. It’s a small thing that you can do that genuinely pays dividends over time.

“You should always listen to Cassidy.”

Cassidy

I made a bookmark out of stickers

Sat, 11 Mar 2023 00:00:00 GMT

I really like stickers, and one of my favorite artists, Pikarar, makes cute ones.

But, sometimes I build up the pressure in my head to put the stickers on the perfect object and then I never use them.

So, in an attempt to be crafty/a better human, I pulled out my laminator and paper cutter, and made myself a bookmark today!

I plopped the sticker on a card:

Cut it to size:

And laminated it:

And voilà, bookmark!

I’m happy with it! I’ll probably do this with some other stickers, too.

When useEffect runs

Fri, 10 Feb 2023 06:00:00 GMT

useEffect is one of those React/Preact hooks that most people have a love/hate relationship with, but like it or not, it’s good to understand how it works. This is not the first blog post on the subject, and it’s certainly not going to be the last, but hopefully I can explain some things to you about when (and why!) it runs in your applications for you to use as a reference!

Please tell my friend what `useEffect` actually is

Your friend asks a good question! First of all, let’s talk about side effects in your applications. When I say side effect, I mean it is something that happens when other things are changing.

For example, if I were to have a very simple add function:

function add(x, y) {
  return x + y;
}

I could make a side effect of some other variable changing, like so:

let z = 10;
function add(x, y) {
  z = z + x; // this is the side effect, it does not change the return value
  return x + y;
}

Changing that z variable in here does not change the return value of the function, it’s just a side effect of adding x and y!

Now in React/Preact, it’s a bit more complex, and side effects aren’t always a good thing. And useEffect is “usually” for side effects. Developer David Khourshid aptly said that useEffect should probably have been named useSynchronize, because rather than it being, “an extra thing that should happen when state changes happen,” it should be more like, “things that happen to stay in sync with certain state changes.”

When does `useEffect` get called?

So, it does get a little hairy because useEffects behavior has changed a bit across framework updates, but at a high level: it’s called on component mount, and whenever anything in the dependency array changes. I’ll explain this more deeply!

So using this as our base:

useEffect(() => {
  // your fetch call, changes, etc
  return () => {
    // clean-up
  };
}, [dependencyArray]); // we're staying in sync with this

The dependency array

That second parameter of useEffect is called the dependency array. There’s 3 things that can happen here:

If the dependency array is empty, useEffect is only called once (note: this has changed in React 18 in development and strict mode because of Suspense things, but this is how it is for Preact and pre-React 18 and I will talk about a workaround later in this post)
If it doesn’t exist (like it’s omitted entirely), then useEffect is called on every state change
If it has a variable in it, then useEffect is called when that variable changes

If that dependency array is populated, you can think of the useEffect function as staying “in sync” with the variables in the array.

The return function

Whenever useEffect is about to be called again, or whenever the component is about to be dismounted/destroyed, the “clean-up function” is called.

Or to rephrase, React/Preact calls the clean-up functions when a component unmounts, or when an update is made and it needs to “cancel” the previous effect.

As another, more filled out, example:

useEffect(() => {
  let isCurrent = true;
  fetchUser(uid).then((user) => {
    if (isCurrent) setUser(user);
  });
  return () => {
    isCurrent = false;
  };
}, [uid]);

This might look a little confusing, but the way it works is when the component is mounted, the component will fetch the user.

If uid hasn’t changed and the component stays mounted, setUser will be called. If uid changes in that time, isCurrent will be set to false, so setUser won’t be called for that out-of-date HTTP call.

Stopping `useEffect` from being called on mount

Besides controlling the dependency array variables, the only other thing you might want to consider is saying, “hey, I don’t want this effect to be called on mount, but ONLY on updates in the dependency array.” This is weird but it happens.

For this particular case, you’ll want to bring in the useRef hook. I’m not going to explain what that hook does here because that deserves its own blog post (this one is pretty good from Robin Wieruch). Let’s assume you have some state variable called syncWithMe that you want to stay in sync with:

const hasMounted = useRef(false);

useEffect(() => {
  if (hasMounted.current) {
    // code here only runs when syncWithMe changes!
  } else {
    hasMounted.current = true;
  }
}, [syncWithMe]);

This is called a “ref flag”! In this example, hasMounted acts as an instance variable that doesn’t cause re-renders or effect changes (because it isn’t a state variable). So, you set it to true when the component mounts, and then whenever syncWithMe changes, the effect function is called.

Having `useEffect` called only on mount in React 18+

Because of how the new Suspense functionality works and a bunch of other changes that happened in React 18, useEffect needs to be manipulated more to run just once in development and strict mode (it should be fine in production but eh, this is still worth talking about). It’ll look a lot like our previous example, but opposite:

const hasMounted = useRef(false);

useEffect(() => {
  if (hasMounted.current) {
    return;
  }

  // do something

  hasMounted.current = true;
}, []);

What if I don’t want to use `useEffect` at all?

Then I think you should probably watch or read some thought-leadery content around why it’s bad. Heh.

useEffect isn’t bad, it just has its own time and place and a lot of people have Opinions™ about how it should be used. I do recommend watching this talk about useEffect in general. It is titled “Goodbye, useEffect” (once again from David Khourshid, who I referenced above), and explains some nuances of when you should and shouldn’t use it.

Hopefully this post was useful for you as a reference!

Quirky local delights

Wed, 08 Feb 2023 00:00:00 GMT

There’s some things that you really only appreciate when you live in a place for a long amount of time, things that are sort of a… weird constant outside of your house.

In my case, one of my favorite spots to grab lunch after church on Sundays is a no-frills deli called Manny’s. This place has been around for literally more than 50 years, and it’s got great food that the neighborhood loves.

But beyond the awesome food, I love that you can usually find parking at Manny’s, and when you open the car door, you immediately start hearing opera music. The 7-Eleven across the street consistently plays opera on their speakers outside. Why? Who knows, and who cares, it’s the 7-Eleven that plays opera.

You walk into Manny’s, and you immediately get in line and order somewhat quickly because folks are in a rush to eat, and the people behind the counter are in a rush to get you served. Once you sit down to eat, a local magician works the crowd with family-friendly tricks before he heads out to perform at the Chicago Magic Lounge in the evening.

This is just a small little picture of what I mean by these local delights. Anyone who’s just visiting might say, “huh, weird” or not even notice the consistent opera, the consistent sandwiches, or the consistent magic tricks. But when the world is chaotic and unpredictable, it’s nice to have these little things to remind you that you’re home.

Setting up Netlify Redirects with Astro

Fri, 03 Feb 2023 06:00:00 GMT

I struggled recently setting up Netlify Redirects with Astro, until I realized I needed to copy the file from the root of my directory to the built output.

Luckily, this is a very small change to make in your package.json for your project! First of all, make sure you have a _redirects file at the top level of your project.

Under your scripts, change the build command to include cp (copy) to the final built folder. I’m just using the default naming here (dist), but you can use whatever your site uses:

	"scripts": {
		// ...
		"build": "astro build && cp _redirects dist/_redirects",
		// ...
	},

And voilà! That’s all you need to get it working!

Working example

Here’s an example repository for this. The website (just using a basic Astro template) is deployed at astro-redirects-example.netlify.app, and you can go to /fart and it’ll redirect you to /fish.

The _redirects file shows you a couple options (and a fallback) for how you can set it up, and here’s what the little script looks like in context!

Update after talking to the Astro team: Putting the _redirects file in the public/ directory works now for purely statically generated sites. I think if you use server-side rendering, then you still have to do a script like the above. There’s also a Build Plugin made by one of the Astro contributors, Bryce Russell, that can solve this for you!

The small, private wins

Thu, 26 Jan 2023 00:00:00 GMT

There’s a bunch of random projects and skills that I work on where I’m hyped to make progress on them, but because it’s pre-launch or private (or just not useful/understandable for other people to know), I don’t really get to talk about how cool it is.

It’s kind of like short-term vs. long-term satisfaction, almost. It’s satisfying to work on in the moment, but then sometimes the launch doesn’t happen, or it happens so much later that it’s not as gratifying when it actually comes out.

It kind of reminds me of this blog post that Rach Smith wrote, about how learning in public is challenging when you’re very deep in layers of niche engineering. It’s hard for me to lay out, for example, a specific type of strategy I learned in the game go, because so few people I know actually play it. It’s hard for me to explain the details around keycap designs I’ve worked out, because so few people understand how much effort that takes or why it’s exciting. It’s hard for me to describe some of the little (and big) problems I’ve solved, because y’all simply don’t have the context I have to understand why it’s thrilling that it’s finally done.

I admit I’m not sure if there’s a solution here, I think it’s just a lesson in patience. And probably contentment, too. We’ve gotten so used to sharing out all the things on social media that when you have small wins that aren’t public, it’s not as intuitive to celebrate on your own. All I can really say with most people is, “I had a fun win recently!” and I gotta learn to be happy with that.

So, though I can’t really share the little wins I’ve had recently very fully, I’m going to share the little parts of them that were exciting for me that may or may not ever matter/become public later:

I got the Portuguese translation part working
I’ve fully transitioned from the lil HTML script to the lil Markdown script
The connection has finally been made between these two people who could make a cool project happen
That goal is… so… close… after literally 8+ years of effort
I think I finally got the colors right on a design I’ve been dabbling with
That episode we recorded turned out really great
The thing I learned how to do in class the other day is actually working

And… some of these, you will never know what I’m talking about, but some of these, it’ll all make sense soon, heh.

Importing SVG files as React components with Vite

Fri, 06 Jan 2023 06:00:00 GMT

Chances are if you’ve ever used create-react-app and you wanted to import an SVG file as a React component, you did something like this and it Just Worked™:

import { ReactComponent as Logo } from "./logo.svg";

But, alas, if you have moved to using Vite more often, as I have, you can’t just do that.

Never fear, it’s still possible!

Enter `vite-plugin-svgr`

vite-plugin-svgr is a Vite plugin to transform SVGs into React components! It’s super intuitive to use:

npm install vite-plugin-svgr

Add it to your vite.config.js:

import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr()],
  // ...
};

And boom, you get your expected behavior!

// somewhere in your React + Vite app

import { ReactComponent as WhateverIcon } from "./icons/WhateverIcon.svg";

// ...

export default function SomeComponent() {
  return (
    <div>
      <WhateverIcon />
      Wow, I love icons, because I am a dweeb
    </div>
  );
}

This is particularly useful if you’re using a library like MUI and you need to use a custom icon, like so:

// somewhere in your React + Vite app

import { Box, IconButton, SvgIcon } from "@mui/material";
import { ReactComponent as WhateverIcon } from "./icons/WhateverIcon.svg";

// ...

export default function SomeComponent() {
  return (
    <Box>
      <IconButton aria-label="some icon">
        <SvgIcon>
          <WhateverIcon />
        </SvgIcon>
      </IconButton>
      Wow, I love icons, because I am a dweeb
    </Box>
  );
}

There’s other things you can do with vite-plugin-svgr, and there’s a list of options here.

Hope that’s helpful for ya, happy icon-ing!

See ya, 2022

Sat, 31 Dec 2022 00:00:00 GMT

Man, 2022 was a year of extreme highs and lows, probably the most extreme I’ve had… ever.

It’s kind of hard to look back on all of them, because there’s so much to really think about. Which is not unique to me, but still. I’ll break it down and see how much I can process until midnight strikes in… 1.5 hours.

Work things!

Phew so work had some changes this year. At the end of 2021, I decided to leave Netlify, mostly due to burnout and wanting to explore tech education more.

And so, at the start of this year, I ended up joining Remote as the Head of Developer Education and Experience to do that for realzies. And, ya know, on paper, that role was pretty perfect. I had a ton of autonomy, I had kind coworkers, and I had time to spare to work on side projects that had been sorely neglected. I genuinely enjoyed hanging out with a lot of the folks there, but at the same time… I was kind of on an island. A lot of the work I was able to accomplish and put out in the world (like Remote Connect and Devs For Ukraine and the engineering blog) was reliant on me getting busy people to work with me on something “extra” outside of their day jobs.

When people inevitably had to put off the “extra” (particularly as the economy started to buckle a bit), I was very… bored. I would still work— I’d always figure out how to fill in the time with something— but I was very regularly faced with, “this is awesome Cassidy, perhaps we can do this someday,” and I was getting impatient with it. I job interviewed a few times, without ever really finding a good fit. I acknowledge I am wildly privileged to be able to have had this experience, and I’m grateful for it, but that’s what was going on!

Meanwhile, in April, I started part time work at OSS Capital! I had been in chats with them since I worked at Netlify, wanting to work with them, but not quite ready to take the leap into being a full-time founder yet. For OSSC, I joined as a Portfolio Partner for Developer Experience, meaning I was advising the portfolio companies from a dev rel perspective (helping with hiring, strategy, making introductions, that sort of thing), and I also helped out the team on technical things too (like the website)! I genuinely enjoyed doing that gig, and I actually proposed joining them full time, but the timing wasn’t quite right. In November, they sadly had to lay me off (amongst others), but I still maintain a good relationship with them and hope to do more work with them in the future.

I still love advising companies! When I left Netlify, I stayed on as an advisor, and I also joined Centered and Plasmic as an advisor this year as well. Being able to help companies grow and offer my perspective is something that’s relatively low lift, but high impact, and it’s really rewarding… which leads me to where I ultimately ended up at the end of this year!

In the summer, my friend Lilly (who is the CEO of a startup Contenda that I’ve been advising since they started) started to float the idea to me about joining the company full time. It was super appealing, but I had to think on the timing and how it might work out. The more I thought about it though, it was a no-brainer. I knew the team well, it was a product I cared about, and I could make an impact at my day job (which was something I was missing dearly). So, in September, I joined Contenda as CTO full time! It has been chaotic and wonderful all at once, and I’m so happy I joined such a great group of people building something awesome.

Personal things!

So many things happened, gosh, so many things! My sister got married, I traveled internationally for the first time since March 2020, I saw family, I saw friends, I got LASIK, my cousin got engaged… I loved being with people I care about this year. I also experienced a close family loss, which was deeply devastating, but it brought our family together to mourn with each other.

I also… got pregnant!! This has been probably the most grueling physical experience I’ve ever had (so far). I’m due in the Spring, and I have been shaking my fist at the state of research in women’s health pretty dang regularly. But, my husband and I are thrilled (and so is the family), and she’ll be a very loved baby!

Side project things!

Outside of the busyness of job things and the personal life going every which way, I’m happy with my various projects this year!

First of all, my weekly newsletter crossed its 5th year anniversary! This is one that is very near and dear to my heart. I probably spend most of my side project time on this one, and the fact that we hit that milestone and folks are actually reading it is really exciting for me. I love getting to help people with coding problems and staying up-to-date, and also love that it keeps me actually reading articles instead of leaving infinite tabs open.

In other newsletter… news… (heh), we crossed 150 issues of the Stack Overflow newsletter! I’ve been helping the team write it ever since the newsletter started back in 2019, and it’s been great to see it grow. I also joined as a regular host of the Stack Overflow Podcast! I had been speaking on the show regularly for a while now, but it’s been fun being able to consistently chat with the other hosts and guests.

Speaking of podcasts, I started The Dev Morning Show (at night) podcast with my friend Zach and LaunchDarkly! It’s been a blast working on that show and speaking with such cool people.

I spoke at a few events this year, outside of the ones I mentioned above at Remote, like GitHub Universe, and All Day Hey! I admit I didn’t speak as much as I have in the past, but it was kind of nice saying yes to less and being a very happy audience member. I will say though, I spoke at my first in-person event (a local meetup!) since the pandemic this summer, and it was incredible. I can’t wait for those to come back more and more, I loved it!

I did a good chunk of writing this year, too, enough that I rewrote my blog so I could try to consolidate posts right here on this website (how meta). I wrote some articles on dev.to, for LeadDev, for The GitHub ReadME Project, and also a bunch just for myself that I haven’t published publicly. I’ve talked before about how I like to use Obsidian for my note-taking, and it’s really helped me write more consistently, whether I publish or not!

Code-wise, I rewrote the website for Cosynd (this is a project I’ve been working on for more than 6 years now), I started updating todometer, and I built some random demos on my regular livestream, too (like Better Security Questions and a pi memorization game and various open source contributions).

Keyboard-wise, I finally (finally!) got DSA Scrabble keycaps to go live!! I first designed those back in 2017, released V1 in early 2018, and I’ve been wanting to bring them back ever since. It was a labor of love to get everything re-designed with the new branding and licensing, but it happened! I also shipped a free email course to teach people about mechanical keyboards in general.

Also, not really a side project but something I’m happy with, I read 10 books this year! It’s not a lot by any means, but I’ve been wanting to build my reading habit back, and it’s a start. Similarly (kind of), I’ve been playing a lot more go recently, and I do think I’m getting better, and hope to hit some goal rankings next year.

Phew!

Anyway, 2022 has been quite the year, and I feel so grateful and blessed to have made it through and be where I am today. Who knows what 2023 will bring? Thanks for reading so far. As a reward, here is a joke: What do you say when you see a vegetable that’s awesome, but not too awesome? That’s rad-ish!

My language brain is... broken?

Tue, 29 Nov 2022 00:00:00 GMT

I visited my in-laws in South Korea recently, and it was really awesome being able to see them. I don’t speak Korean, but I’ve picked up enough words here and there to be able to somewhat understand the high-level topic of conversation, and nodded suuuper enthusiastically if they smiled at me.

One thing that I did notice though (that kind of messed with me) is that as I was trying to pay attention to what was going on in Korean, I was thinking more and more in Spanish (my second language). A couple times I actually responded “sí” or, “puedo tener un poco más?”

This happened throughout the entire trip. I tried researching this as a phenomenon, with no results. There were lots of articles and studies like, “your language shapes how you see the world” and “music helps with learning multiple languages” and “your personality changes depending on the language you use” etc, but nothing on… thinking in one language when you hear another.

I’m sure though that there’s some kind of trigger in our brains for this. All I can think that there’s a toggle in my weird brain that says, “ah ha, it’s foreign language time, time to switch to the other language you know, but not as well as English!” I have no idea if this is true, or if there’s any science behind it whatsoever, but for now, I’ll just have to rest in my hypothesis. It might be different too because I learned Spanish a little later (after age 10), rather than from a more native perspective, so that “toggle” I’m thinking of is more of a learning toggle, rather than a language one? I don’t know.

Anyway, my brain is weird. Maybe I’ll think in Korean someday while listening to Spanish, who knows!

Two(ish) months at Contenda

Wed, 16 Nov 2022 00:00:00 GMT

It’s kind of hard to believe that it’s been two months at Contenda, mostly because time has passed both super fast and super slow. It’s a significantly more busy job than I had at Remote. I’ve got a lot of meetings, and folks reporting to me, and code to write… but it’s not overwhelming!

I think what I like the most about the role is that I feel valuable, honestly. Everyone is so fun and the memes are flowing, which is very high on the “likes” list, but I really like being in a place where I feel like I’m making a difference. At my previous job I felt like everything I did was very “extra” and not really essential to the business, and the one before was so politically driven that I burnt out from that. But here… it’s different. The team is smaller, there’s a lot of potential, there’s a lot to do, but it all feels meaningful and something that I’m interested in. That’s a rare thing to find!

Right now is a particularly busy time with our CEO being concussed (sucks, Lilly) and the holidays rapidly approaching and our API+platform being built from scratch, but it’s a good busy. I think finding that “good busy” is rare, and with any luck we’ll be able to keep it up for good, and I can help take Contenda alllllll the way to the mooooon!

Passing Markdown components to React or Preact in Astro

Wed, 26 Oct 2022 05:00:00 GMT

I am using Astro and Preact (which has the same API as React) for a project. I ran into a issue recently where I wanted to pass a Markdown component to the Preact side of the project, and it wasn’t working the way I expected.

First of all, I tried importing it into my Preact file at the top:

// Preact Component
import Blog from "./Blog.md";

function PreactComponent() {
  return (
    <div>
      <Blog />
    </div>
  );
}

But sadly, that didn’t work! Doing that type of import is only possible in .astro components, even though Astro has support for Preact and React (amongst other things) out of the box.

I realized (after actually reading the documentation, shocking) that you can’t pass Markdown directly to non-Astro components.

So, I thought it might be useful to import the Markdown into a parent Astro component, and then pass that into my Preact component from there.

// Parent Astro Component
---
import Blog from './Blog.md';
---

<PreactComponent
  blog={(<Blog />)}
  client:visible
/>

This was close, but no cigar. Turns out, you can’t pass JSX as props to framework components.

Entering… slots!

I learned about Named Slots in Astro and that changed the game! This is a concept that is pretty common in the Vue and Svelte communities, but I admit as a React person I hadn’t really tried them before.

So, what I had to do was define a slot in my Astro parent component:

// Parent Astro Component
---
import Blog from './Blog.md';
---

<PreactComponent>
	<Blog slot="blog" />
</DemoContent>

…and then from there, treat the blog slot as a prop on the Preact side!

// Preact Component

function PreactComponent({ blog }) {
  return <div>{blog}</div>;
}

And voilà, I now can render Markdown in a React/Preact component in Astro.

This is particularly useful for me because I have some non-technical folks giving me Markdown files to share on a website (with some state-driven logic determining what copy should be shown when). Now that I’m able to pass in the Markdown this way, I can have a separate Markdown file folder for them to work with, without messing with the logic of the website. Woo hoo!

Special thanks to Ben Holmes for helping me out with this, as well as Alex and Charlie! Ben made an awesome little demo on StackBlitz to illustrate the issue, and here’s a related Stack Overflow question as well if you find this helpful and want to upvote!

Managing knowledge on a team

Mon, 15 Aug 2022 00:00:00 GMT

This was originally posted on LeadDev!

As your teams grow, so does your collective knowledge of all that you’ve built together.

Managing and documenting that knowledge can be daunting, but it’s so important for remembering decisions, creating new ideas without reinventing the wheel, and bringing new teammates up to speed.

Writing notes is great! But finding notes can be a challenge…

Writing down meeting minutes, notes from conversations with teammates, or even ideas that you want to propose is essential for remembering what happens throughout your day. Our brains are pretty disorganized, and writing is the solution for that. Plenty of studies have shown that if you want to learn and remember something long term, you need to write it down. If you want to understand ideas, you have to translate them into your own words.

But, on the other side of that coin, searching amongst your own notes and documentation can be a challenge. You can rarely, if ever, remember exactly what you were thinking or what exact words or phrases you were using when you originally wrote down the ideas. We lose that essential context too quickly.

Thinking too much about making notes “searchable” can bog you down when you’re writing them. This isn’t productive – ideas are fleeting and can be very powerful over time if captured well. But, if you’re focusing too much on how you’ll organize them as you’re writing them down every time, you’ll lose what you want to capture, bit by bit.

The solution is to have a predictable system for your notes!

There’s a principle from the book How To Take Smart Notes by Sönke Ahrens: standardization enables creativity. If you don’t have a predictable, easy-to-navigate system for your notes, then whenever you want to apply your team’s decisions or ideas, you’ll end up spending unnecessary energy just trying to find what you need. Common formatting, organization, and a shared understanding of how to document things allows your team to think, discuss, reflect, hypothesize, test, and share more together. This is the creative work that matters.

The way your teams take notes is entirely up to you. As long as your team has shared buy-in and everyone uses the same approach, that’s what matters. Try building templates that people can easily pull from, have “scratch pad” spots where you can jot down a quick idea and organize it later, and don’t treat notes as if they’re permanent, precious pieces of information.

An example system for taking notes: The PARA method

There’s a system of organization by the Forte Labs crew that might be useful for you, called the PARA method, which stands for:

Projects: a series of tasks linked to a goal, with a deadline
Areas: a sphere of activity with a standard to be maintained over time
Resources: a topic or theme of ongoing interest
Archives: inactive items from the other three categories

By organizing your team’s knowledge with this method, you can more easily discern actionable vs non-actionable notes, and how every task and piece of information relates to your larger goals. It’s not perfect, but it’s a popular system that has worked well for teams and individuals across the tech industry (and beyond).

Though you don’t have to follow their rules perfectly, the thing that I think is the most important takeaway from the concept is that the knowledge organization within the system is very dynamic. Your notes as a group should not be etched in stone, but they should be moved and composed together whenever it makes sense.

The bus factor

There’s a (pretty morbid) term called the “bus factor” when a team member has too much knowledge to themselves. If they were to be hit by a bus, would the project be in jeopardy? Would the team be able to manage?

I don’t particularly like this term, but it’s an important thing to consider. The risk of not writing things down in a searchable way means that the knowledge could go away. You don’t want your teammates to not be able to take a peaceful vacation, or work on something new, or leave the team in a bad place if they leave entirely.

Establishing a culture of documentation where your team has a shared system of how and where they should write can help this. You don’t want to become data hoarders necessarily (regularly auditing notes and documents as being out-of-date/archivable is a good thing), but having the context available to anyone who might need it will pay dividends over time.

Moving forward

Keep in mind that it’s easy to either under-document everything because there’s simply too much to know and things change too often, or over-document everything and then every single page turns into a deep rabbit hole of connecting information. Finding that healthy balance is important.

If you’d like to read more on the subject, I highly recommend these resources!

Hello, world

Mon, 08 Aug 2022 00:00:00 GMT

I decided to (re)make my own little blog, but… more like the concept of a digital garden. Sometimes I might update this a lot, sometimes I might not.

I want to have a space where I can write anything, not have it be confined to tech things, and not worry about it being particularly polished. That’s what this is!

I built this in Astro, I pulled in some posts from blogs past, and… here we gooo!

Saying goodbye to my crappy vision

Thu, 28 Jul 2022 00:00:00 GMT

I’m sitting here tonight, July 28th a little past midnight, thinking about my vision, because it’s going to be fixed in the morning soon after I wake up. I’m wearing my glasses, like I have for years and years and years, and I keep taking them off and looking around at the blurry room around me.

I keep wondering… am I going to miss how blurry this is? It’s bad vision. I can’t see the mirror across the room, or the number on the scale when I weigh myself in the morning, or captions on a TV, or even the words I’m writing right now. But it’s my bad vision, I guess. I grew it myself! And now I’m going to be fixing it myself. I wonder if I’ll be overwhelmed, or if it’ll just… be. I’m probably being dramatic about it. But it does feel like the end of an era, and saying goodbye to a (flawed) part of myself.

Cami said to me when I told her I was going to do it, “wow, really, I’m surprised… you’re a glasses girl.” And I am, I have been forever, but particularly in the pandemic when I lost the interest in the effort of putting in contacts somewhat regularly. Glasses have always been my “let’s relax and just wear these today” look and contacts have been my, “okay we’re putting in effort today” look, and now… that decision just won’t exist for me anymore. The Effort with a capital E is going to be done tomorrow and it’ll just be my face and me now. It’s wild to think about.

Back in college when my sleeping habits were horrid, I almost lost my vision. My eyes turned gray and my eyelids were scratchy against them, and from wearing eyepatches to zapping them with very medicated drops, they went through some rough times. That period (a solid 10 years ago now, wow) made me so deeply grateful for the ability to see. I’ve been so protective of my eyes ever since then, and try to intentionally appreciate art and colors and faces as much as I can, because you never know when that’ll go away. It makes me nervous for the zapping tomorrow. But thousands, probably millions, of people have done this before, so… statistically speaking, we should be good, heh.

Anyway. Goodbye, crappy eyesight. I can’t wait to be able to hang out at a beach and wear cheap sunglasses and not have to worry about sand getting in my contacts. I can’t wait to shower without glasses and see my legs when I shave them. I can’t wait to rub my eyes when I’m sleepy and not have to think about moving a contact lens around. I can’t wait to not be nervous about going down stairs because my depth perception won’t be warped between my glasses and the blurry space between my actual eye and the lens. I can’t wait to be able to lay down on a pillow watching TV with no glasses frames pushing against my skin, and be able to fall asleep without worrying about taking my contacts out before doing so. I can’t wait to wear a VR headset and not have to think, “am I wearing the skinny glasses so my head can fit in these?” I can’t wait to wear headphones and not have to choose based on which ones push my glasses frames in weird ways. I can’t wait to put on makeup and not have to push my face 2 inches from the mirror while I do it. I can’t wait to see Joe make his silly faces in the morning that he does when I sleep in and he’s trying to sneak up on me. I can’t wait to hug people and not have to worry about their hair getting caught in my frames.

Tonight, I’ll appreciate the blur. Tomorrow, we’ll celebrate the clarity!

Moose facts

Wed, 13 Jul 2022 05:00:00 GMT

I started watching the show Alone on Netflix recently and I saw a swimming moose, and I was surprised thinking about how the moose was just chugging along, swimming, and started looking up moose… and now I am obsessed with moose.

This is a blog about moose.

The state animal of Maine.

It’s time for moose facts.

Moose are freakin big

The average female (often called a cow) weighs 771lbs and the average male (often called a bull) weighs 881lbs, and they can get up to 1800lbs.

A bull moose’s antlers can spread up to 6 feet from end to end, and they shed their antlers every year. Just giant stick things on their head, gone. Wow. The antlers also weigh like 35lbs. Huge.

Moose eat all kinds of vegetation and require around 10,000 calories per day. They eat about 30lbs daily in the winter and 70lbs in the summer. That’s so many plants. In the Algonquin language, moose means “eater of twigs” and it’s a pretty apt name. They eat more food than black bears! Also, they don’t have upper front teeth. I just picture them inhaling plants and going “om num nom num” very loudly. Say that out loud right now in a low voice so you can get a visual.

Moose are a part of the deer family, and they are the largest of all the deer species. They’re also the tallest mammal in North America. That’s huge. Look at these moose fighting. Look at them compared to the cars. Holy crap.

Moose can freakin dive

A moose can dive 20 feet underwater and stay down there for a minute. READ THAT AGAIN. They just go down underwater (they can physically close their nostrils??) and eat the vegetation at the bottom of the body of water. These GIANT CREATURES just act like they’re hungry fish.

They dive so much that orcas, as in, literal killer whales, are a regular predator of moose. You know in that classic Drew Barrymore movie Ever After where she’s like, “a bird may love a fish, but where would they live?” I am now doing my own variation: “a moose may love a whale, but where will they live? In the whale’s stomach.”

Moose swim a lot more than I thought in general. They can swim up to 6mph and are born knowing how to swim. Who knew? Not me. They hang out in the water to ease the pressure on their bones (because, again, they’re huge), to cool off, and to avoid predators sneaking up on them. Except whales, of course.

Moose are freakin loners

Moose are very solitary animals, and don’t travel in packs. They’re just shy. They meet up for mating season, but that’s about it. Calves will follow their mothers for about a year and then go off on their own. I think that’s a big reason why you don’t really see them in zoos, they probably wouldn’t do well there given their size and temperament.

They do live for up to 25 years though, and prefer cold climates. Lots of time for contemplation and (literally) chilling. Their hair is hollow and gets darker over time, so you can tell how old a moose is by how dark its hair is, kinda.

Moose will freakin destroy you

Okay a moose probably won’t fight you just because. They’re mostly peaceful except during mating season where the bull moose try to assert dominance with their antlers. If you see a moose, a bull moose will take any movement towards them as aggression, and a mama moose will immediately try to fight you if she thinks you’re threatening her young. Just get out of their line of sight and you should be pretty good. Their eyesight isn’t that great in general, and they have blind spots like horses do because their eyes are on the sides of their heads.

THAT BEING SAID:

A moose can outrun a person by the time they’re 5 days old. When a human is 5 days old, they just sit there not knowing how to do anything. We are inferior beings.

When they’re more than 5 days old, they get even faster, and can travel up to 35mph. Imagine a 1500lb monster running at you at that speed. They’d be like “you’re like a deer in the headlights, hahaha, except UNO REVERSE, SUCKER.”

And you might be thinking, “oh, I just have to avoid the antlers,” but no, it’s the HOOVES. They can kick their front legs in ANY direction. When they’re about to fight they lick their lips and bend their ears back. I just imagine a moose charging with legs like helicopters as they lick their lips and chase me.* I’m a goner. The moose has won.

*it is unlikely that a moose fights this way, but one cannot be too safe

The end

Just kidding, one more fun fact: in Latin, the word for elk is “alces” and thus the scientific name is alces alces, or elk elk. Moose are elk elk.

Thank you for your time.

I will not be sharing my sources because there are too many. You can google all of this. There’s also comics.

Goodbye, elk elks.

How to break the cycle of tech debt

Mon, 06 Jun 2022 00:00:00 GMT

This was originally posted on LeadDev!

As a codebase gets larger, tech debt is the growing monster that impacts a team’s ability to perform.

It’s very common that a team’s output is slowed down in one way or another, perhaps in its tooling, older components, long-running pipelines, or something else.

And because a team is slower, there’s increased pressure to fix that. Sometimes that means hiring more, sometimes that means pushing more code. The pressure is on to keep delivering. And because the pressure is on, teams often take on more technical debt with hacks and quick solutions to get their work shipped. And because the work needs to be shipped, there isn’t time to patch up the hacks that got them to where they are. The tech debt snowballs, and then the team slows down more. And repeat, forever.

This is rarely a problem associated with a particular stack. If you wanted to make a website today with Knockout or jQuery, it might not be the most modern choice, but it could probably get the job done. You don’t get to this place in a codebase because you need to just rewrite everything in a modern framework. You get here because you probably need a better plan to break the cycle of tech debt.

Make a plan!

There are a few different options for a tech debt plan that could be applied to your teams’ workflows. Have a think about which of these might work for you, whether you do all of them or mix and match:

Regularly audit debt across multiple categories, like accessibility, code duplication, code coverage, rule violations, performance, security, lack of documentation, complexity, or portability.
Establish debt limits across categories that are bought in by both engineering teams and leadership teams. If everyone agrees on a level, that makes non-new-feature-work just as prioritized as tech debt work!
Consider having a dedicated team, group. or rotation for squashing tech debt. I saw a tweet recently from Brandon Dail that hit home on this subject:

I’m starting to think that every product org should have at least one senior+ engineer who isn’t beholden to a roadmap and who just goes around making little quality of life improvements everywhere

Brandon Dail (@aweary), April 22, 2022

Whether tech debt is a part of a roadmap or not, it’s important to constantly address it. It breaks the vicious cycle of growing debt, and improves an individual developer’s experience tenfold over time!

Getting buy-in

I touched on this lightly before, but a key aspect of fighting against tech debt is making it a priority; it should be just as important as feature work, if not more.

If the team is behind on feature work, or there is a big deadline coming up, that “pressure” part of the cycle will be at the top of everyone’s minds. Timing, when speaking with stakeholders, is key, because it’s often a difficult sell to say, “instead of shipping what we promised, we want to fix what already exists.”

Addressing the below questions (or similar) with as much visibility as possible will help put tech debt front and center:

What do we gain when we opt for a “less than ideal” fix? What will this shortcut save us? If the pros outweigh the cons, the fix may be okay, but the cons are made known.
Do we fully understand what dependencies are involved and why? If there is something outdated or expensive being implemented, how will it affect the team in the long run?
How does our velocity change if we do or don’t fix things? The team might be able to work quickly now, but will they for the next feature, and the feature after that?
How long can we put this off? Some debt is expected, good even, if it means getting an MVP out the door, but how long is that reasonable?
What is the sentiment around our code? If the developers are unhappy for too long, how long will they stay on the team? How expensive would it be (in time and money) to have to recruit new team members?

This is everyone’s problem, and solution

Everyone on a team, from the developers to the PMs and from the engineering managers to leadership, should be an advocate for maintenance and breaking that cycle of tech debt. It’s healthy for end users, for teams, and for products!

You will never have a completely debt-free codebase. But, if the debt is manageable, monitored, and maintained, it can work in your favor in a healthy way.

Customizing my Zsh Prompt

Tue, 31 May 2022 05:00:00 GMT

I have a little .zshrc file to customize my terminal, and I’ve always wanted a fun prompt besides the default, but haven’t really done much to learn it.

So, after some research, I figured out the basics of how to make my little prompt useful without being too overwhelming or distracting!

Here’s what it looks like:

You might notice that I don’t have the typical things like my username or machine name or anything, because… I don’t need that personally. But, after reading this, you’ll be able to add that yourself!

What to type

If you don’t know how to open your configuration file, go ahead and open it with vim ~/.zshrc or code ~/.zshrc (or whatever editor your prefer).

First, add these two lines to your .zshrc:

autoload -Uz vcs_info
precmd() { vcs_info }

This loads the Version Control System into your prompt (here’s the documentation for it).

Next, you want to add the next line that sets up the Git branch details into your prompt.

zstyle ':vcs_info:git:*' formats '%b '

That %b is the branch name variable. I added a space after it for formatting reasons. You can add other variables in the string there (here’s a good blog of options), for example information about stashes, the name of the root directory of the repo, staged changes, etc.

Now, you’ll add these final two lines to put your prompt together!

setopt PROMPT_SUBST
PROMPT='%F{green}%*%f %F{blue}%~%f %F{red}${vcs_info_msg_0_}%f$ '

This is hairy-looking, so let me break it down.

Colors!

When you surround things in %F and %f, that changes the foreground color of anything in between them. The color in the {curly braces} is the color that’s edited. In this case, you can see green, blue, and red. There’s similar things like this with %U and %u to underline, %K and %k for background colors, and more (with documentation here, scroll to “13.2.5 Visual effects”). ZSH understands the colors black, red, green, yellow, blue, magenta, cyan and white by default!

Dates and times!

The %* that you see is the time (in 24-hour format, with seconds). There’s more options for this, like %W for the date, for example. The docs for this is here, scroll to “13.2.4 Date and time”.

The directory!

The %~ shows the current working directory, and its path. Look at “13.2.3 Shell state” in the docs if you want to replace it with something else.

The variable!

Now the next part is loading in your variable, the ${vcs_info_msg_0_}. This plops your branch variable that we made before in that red text wrapper, there.

The final $ at the end is just to lead the user input. You can replace it with > or ; or WOW or more variables, or whatever you’d like.

The end!

Here is the whole prompt that you can paste in and customize:

autoload -Uz vcs_info
precmd() { vcs_info }

zstyle ':vcs_info:git:*' formats '%b '

setopt PROMPT_SUBST
PROMPT='%F{green}%*%f %F{blue}%~%f %F{red}${vcs_info_msg_0_}%f$ '

Once you’ve saved this, run source ~/.zshrc to load it in the terminal (or just restart your terminal/open a new tab). Because I like opening and editing quickly, I added these aliases to make the opening + loading faster:

alias bp='vim ~/.zshrc'
alias sa='source ~/.zshrc;echo "ZSH aliases sourced."'

And now the world’s ya oystah. I hope this was helpful for you!

Renaming a folder on the GitHub website

Thu, 28 Apr 2022 05:00:00 GMT

I ran into an issue recently where I had started a git repository while working on my Mac, and made a folder with a question mark (?) in it.

That is a valid folder name on Mac, but not on Windows, so when I tried to clone the repository onto my WIndows PC later, the clone kept failing because of the folder name!

error: invalid path '<funky file name here>'
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'

So, I had to figure out a solution to rename my folder from the GitHub website, from my PC. It’s not as intuitive as renaming a file, but I found a couple very easy options!

Edit it from the filename editor

Did you know you can add and delete folders from the filename editor itself on GitHub? I didn’t, but there’s a nice blog post on the subject from 2013 here.

So, in my case, I could go into a file inside the folder in question, hit the button to edit the file, and then update the folder name using this method.

Change the name using the GitHub web-based editor

When you’re in any GitHub repository, you can hit the period (.) key and it will open the GitHub web editor! You can also do this by changing github.com to github.dev in the URL.

When you do that, a VSCode-like editor will open, allowing you to edit folders and files to your heart’s content! In my particular case, I was able to edit my folder in the web editor, then use the git extension in the editor to commit the change with one click.

It’s done!

Now I can clone my no-longer-weirdly-named folder onto my Windows PC with no issues! Yee haw!

Make line breaks work when you render text in a React or Vue component

Sat, 09 Apr 2022 05:00:00 GMT

Sometimes you will get a string that you can’t control in your React components (like from a CMS or API). It might look something like this:

"Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"

But, those little \n characters aren’t respected if you were to put it into a React (or Vue) component, like this:

const haiku =
  "Wow I am so cool \n I'm a JavaScript haiku \n render my newlines";

function BeautifulHaiku() {
  return <div>{haiku}</div>;
}

If you want to change this behavior and get the newlines you want, you have a couple solid options.

Replace `\n` with `<br />`

The first thing you can do is split up the string and then render the resulting <br /> tags.

function replaceWithBr() {
  return haiku.replace(/\n/g, "<br />");
}

In React, you’d then use dangerouslySetInnerHTML to make that work:

<p dangerouslySetInnerHTML={{ __html: replaceWithBr() }} />

(this is named “dangerous” for a reason, and it’s not because the React team wants to seem cool, it’s because you gotta be careful about what you put in there to avoid malicious scripts)

And in Vue, you’d use v-html to make that work:

<p v-html="replaceWithBr()">{{haiku}}</p>

Use CSS `white-space`

The other way you can do this is by using the white-space CSS property and set it to either pre-wrap or pre-line.

.css-fix {
  white-space: pre-wrap; /* or pre-line */
}

These two make sure that the text wraps when line breaks are in the content, and pre-line specifically collapses multiple whitespaces into one.

This can be applied to both React and Vue!

Prove it, Cassidy

Fine, twist my arm!

Here’s the React examples in action:

See the Pen accent-color demo by Cassidy (@cassidoo) on CodePen.

And here’s the Vue examples!

See the Pen accent-color demo by Cassidy (@cassidoo) on CodePen.

“They’re different but they’re friends” - DJ Khaled

Full disclosure: I am not a Vue developer, this just happened to work for me when I tried it. I know this is “proper” in React but I can’t speak for Vue because I am a noob. Good luck, have fun, make good choices, be kind, write code.

I hope this was helpful for you!

Use Unicode characters for bullet points in CSS using ::marker

Thu, 07 Apr 2022 05:00:00 GMT

I was playing around with making some <ul>s on an HTML page recently, and typically when I want to replace the bullet points with an emoji or an SVG or something, I’ll write something like:

ul {
  list-style-type: none;
}
ul li:before {
  content: "\2713";
}

And this works, but for longer lines of text, you get some spacing issues. You can fix it by changing the padding around the list and messing with the positioning, but that’s a lot of trial and error.

Enter, the `::marker` psuedo-element!

This is a really cool, relatively new option to solve our problem! It selects the marker box of a list item (so the bullet, or a number if you’re using ol), and you can change the font properties, the color, and some other things around it!

Demo:

See the Pen accent-color demo by Cassidy (@cassidoo) on CodePen.

It’s not fully compatible with Internet Explorer, and some other older versions of modern browsers. You can check the compatibility table here, and the documentation for it here!

Being available: The secret to great leadership

Mon, 04 Apr 2022 00:00:00 GMT

This was originally posted on LeadDev!

What makes a great engineering leader?

Often when we ask this question we hear the same answers: having a great vision of the future; disagreeing and committing; delegating; or some variation of the Amazon Leadership Principles.

None of these tips are wrong, necessarily. They successfully guide some of the largest companies in the world. But I want to argue that there’s one tip that is often left out of leadership thought-pieces: Being available.

Is this… networking?

In a way, it is. It’s not so much about building new connections (all the time), but about strengthening the ones you already have. Being there for people is about building relationships with your team and your community.

The chairman of AT&T, Theodore Vail, pointed out back in 1908, “a telephone — without a connection at the other end of the line — is not even a toy or a scientific instrument. It is one of the most useless things in the world.” A telephone network with even two users is more valuable than a single telephone on its own.

In this world of collaboration and our peer-driven economy, we have to think of ourselves as something like telephones. We need to build connections with each other in order to sustain ourselves, and our communities.

“If you want to have a successful career, it’s important that you give back into the industry that you are passionate about.”

Jennifer Johnson, CEO of Calibrate Legal

Simple acknowledgements

Whether you’re running a community or a team, or doing some good old-fashioned networking, just ‘being there’ can make a huge impact on the culture and how people work and act. Especially in the times of COVID and folks working from home, the people around you are more isolated than ever.

In a study done by Queen’s University, 27% of people said they were suffering from loneliness. Research has also suggested the link between social support and lower rates of burnout and higher rates of productivity.

What are the little things you can start doing every day to strengthen, reignite, and warm up relationships? It can be as simple as letting someone know you are thinking about them — think about how you can just proactively do little touchpoints and outreach.

Kelly Hoey, author of Build Your Dream Network

In addition to the research-backed, positive results of being there for others, it’s also just a kind thing to do. Reaching out to others, whether it’s a simple email or DM or a public shout-out, helps promote a culture of inclusion and empathy for others. Building that psychological safety is invaluable to individuals, and to the health of a team or community.

Being human is hard

These types of interactions can be awkward at times. Being there for someone isn’t always about giving a positive, ‘way to go!’. Your team or community members might be upset or frustrated about something. They might be approaching you for a second opinion or to ask for resources. You might not always be able to provide what they need. You might be having a rough time yourself, and being available might feel particularly challenging.

Human problems can’t be solved like technical ones. There’s often not a black-or-white solution. There will be gray areas, and there will be roundabout answers. Humans are not formulas to crack. We’re flawed. We can’t manage to mentor everyone who comes our way. We can’t always learn the fastest. We can’t always avoid disappointing people.

I can’t tell you how many times I’ve disappointed others because I wasn’t able to meet a schedule they wanted, or I misunderstood how they were feeling in a community situation, or I simply misspoke or didn’t act how they expected. These sorts of things make networking, team management, and community building HARD, harder than any coding problem or security issue. Recognizing that in yourself, and in others, will not only make you a better networker, but encourages empathy for the community around you.

Relationships take time, they can’t be hacked. It can be a lot of work, which seems daunting. But, all of these efforts are completely worth it for the sake of yourself, your community, your team, and making this industry better for everyone.

The Productivity apps I use in 2022

Tue, 22 Mar 2022 05:00:00 GMT

This post will not cover my code editor(s), terminals, or other developer tools. This is just a list of the tools I use daily to get my tasks done!

All of these tools you can use for free, and a couple have paid upgrades. That being said, you don’t need to pay money to use them to the fullest, if you don’t want to! Also, all of them work across operating systems. I use both a PC and a Mac, so that’s important to me.

Obsidian

Website

I take notes with Obsidian, write blogs with Obsidian (like this one), keep track of projects with Obsidian, plan classes with Obsidian… I’m alllllll in on Obsidian.

Centered

Website

When I use Centered, I get more work done, simply put. I was a little slow to get into it, but now I can’t imagine getting all that I want done without it, honestly. I often have trouble focusing throughout the day when I have a lot to do, and Centered helps a ton with that.

Centered is a flow state to-do app. It’s kind of hard to explain in one sentence, because it does so much while being pretty simple, too. Long story short, you plop in your to-do list for the day/session/whatever, each task has a certain amount of time assigned to it, and then you hit start. It’ll play some music designed to help you focus, and it has a coach that speaks to you about how much time is left in your current task, gives you breaks, and pokes you when you’re distracted. I made a group in it if you’d ever like to flow with me!

Cron

Website

Cron is a keyboard shortcut-powered calendar app. I’ve tried a bunch of calendar apps over the years, and Cron is my current favorite. It lets you quickly use keyboard commands to see your teammate’s calendars, share availability, view multiple timezones, and create events.

Update from the Cron team: anyone who signs up in the 24 hours after this was posted will get an instant invite skipping the waitlist (as fast as Cron can send them)!

todometer

Website

This is a shameless plug, but I use todometer for task management, and… I built todometer.

todometer is a meter-based to-do list for your desktop. I use this to keep track of things that I’d like to get done throughout a given day or week, without the restrictions of a flow state session. I made it because I am motivated by progress bars, and sometimes I just need a simple list prominently on my desktop of what I need to get done. Plus, it’s local-only, so you don’t have to worry about loading times. Here is the repository if you’d like to see how I built it (full disclosure: I want to maintain it more, but I’ve got other things to do, so if you make an issue, I’ll get to it… someday).

That’s it!

I’ve tried a lot of different tools over the years, and this is just my current “stack.” I do think that it’s worth reassessing your tools fairly regularly. I used to use other ones, like Bear, and Notion, and Vimcal, etc, and they all worked for me at the time, but figuring out what you like and don’t like about your “stack” is super helpful for upgrading how you work over time.

If you don’t commit yourself to your tools, they are just extra overhead to getting things done, and the tasks get overwhelming as they pile up. Keep that in mind as you hunt for tools that might work for you!

Until next time!

Adding a lang attribute to your Next.js site

Tue, 08 Feb 2022 06:00:00 GMT

Sometimes when you’re running a Lighthouse performance check on your sites, you might come across the issue:

<html> element does not have a [lang] attribute

Luckily, this is a pretty easy thing to fix, whether you’re using Next.js, or plain ol’ HTML!

Why do I need this?

It’s for accessibility! Screen readers often use a different sound library for each language they support. They can easily switch between those sound libraries, but only when a webpage specifies which language to use.

Typically in your average Next.js website, the deployed page ships only a <html> wrapped site, with no language attribute attached.

If you were writing a plain HTML website (or using some other library that allows you to update the shipped HTML files), it would be a simple matter of adding a lang="en" to your outputted HTML, like so:

<html lang="en"></html>

With Next.js, it’s a little bit more involved, but luckily not too difficult!

Create a Custom Document

Inside of your pages/ directory (or wherever you put your page components), make a file called _document.js. This overrides the default document that is shipped with your Next.js site. Don’t worry though, we won’t break anything!

Inside of that file, add the following:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      {" "}
      {/* Add whichever language you want here */}
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Boom, you’re done! Make sure you don’t delete the Html, Head, Main, and NextScript components, because they are required for your site to be properly rendered. Now, next time you run your performance and accessibility audits, your language settings should be in the clear!

Do successful products prioritize familiarity over uniqueness?

Tue, 01 Feb 2022 00:00:00 GMT

This was originally posted on LeadDev!

I’ve seen many codebases, products, component libraries, and pitch decks over the years, and I’ve noticed that everyone wants to be unique.

Everyone wants to figure out how their product can stand out and be better or smarter than the competition. They want to find a way of being different that will make their user or developer experience top-notch.

Folks tend to go for the same approach: “hey everyone, look at our super creative way of doing something you’ve totally seen before.”

And that’s fine, even clever sometimes.

This approach has pros, like the chance you might establish yourself as a brand maker, thought leader, or mind changer. Perhaps you’ll be the next React, influencing how websites are built on a grand scale. Or perhaps you’ll get the recognition of Uber or Lyft, changing how people trust and interact with technology.

But, the cons of this approach are also significant. The irony is that if you try too hard to make your product novel and new, it might not be memorable. If people have to constantly remember what your special version of something is, then… is it worth it?

I’m going to share a couple of examples of successful products that prioritize familiarity over uniqueness, and explain why you should be having this conversation with your engineering teams regularly.

Being instantly understandable is an advantage

The familiarity advantage isn’t an entirely foreign concept for technical organizations. A great example is the Astro web framework. In its earliest versions, it had a Collections API and very solid docs on how it worked. It provided a way of defining page routes for a website, and populating those routes with data. This is a concept that exists in nearly all similar site-builder frameworks.

But, in later versions, they ended up renaming a lot of that Collections API to getStaticPaths. The new function name is not special, nor is its functionality. It’s exactly what Next.js does. It’s not branded. But, as a developer, because I’m coming from Next.js, I know exactly what this function is for, and it is self-explanatory for me as a user. Having something that feels self-documenting is great because you don’t have to educate your users as much as you do with a brand new system of ideas for accomplishing the same thing. It might not be unique to the framework, but it’s almost instantly understandable.

Think about how startups pitch themselves as ’Uber for Dogs’. The startup Supabase dubs themselves ’the open source Firebase alternative.’ People know exactly what they are and what they do, which is a huge advantage in our competitive field.

It might be worth considering these trade-offs of being unique versus being familiar when building a new product/library/project/etc. If your actual feature is totally and completely new, that’s a great time to coin a new term and educate others on what it means. But, if it’s reflective of something that already exists, it might save you some time and energy to mirror what else is out there.

Reflections

In A Philosophy of Software Design, John Ousterhout teaches a key principle: make your code intuitive overall. When you’re making developer-facing products, you want to make your documentation, APIs, and concepts intuitive as well. If you can do that with completely unique names or components or packages, great, but take some time to think through how your users will respond to that first, and run with it.

Build wicked fast sites with Astro: An Introduction

Thu, 08 Jul 2021 05:00:00 GMT

One of the hot new frameworks on the scene is Astro, and it’s all about shipping less client-side JavaScript. I decided to give in a whirl and was pretty pleased with being able to write React, and see the immediate performance benefits when loading scripts only when I want to.

Astro is still early in its life (version 0.17.3 at the time of writing), but already has a great community going of folks playing with it. Let’s join them and try it out!

What comes out of the box

Astro comes with quite a bit without you having to install anything!

`.astro` files

.astro files are mostly HTML, but with some extra JavaScript goodies. If you’re comfortable with HTML and JS, you’ll be comfy in .astro.

These .astro files borrow concepts from JSX and Frontmatter to make some pretty powerful templates. For example:

---

// Area A

import MyComponent from './MyComponent.astro'

let name = 'Cassidy'
let food = ['apple', 'banana', 'cake']

---

<!--Area B-->

<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <MyComponent></MyComponent>

	{name} was here
	<ul>
	  {food.map((item) => (
        <li>{item}</li>
      ))}
	</ul>
  </body>
</html>

“Area A” in the above code snippet is the “Frontmatter” script. It’s fully compatible with both JavaScript and TypeScript, and you can import other components, or write whatever scripts you’d like there. This will be run at page build time. This area is totally optional, as well, so you can remove it entirely if you don’t need it.

“Area B” is where Astro really shines, in my opinion. It’s just HTML… until it’s not. You can add in components that you import (in any framework you choose, as in you could have React and Vue living side by side), render expressions, include fragments, use the native HTML <head>, and a lot more.

These .astro files can also take in props, so you can use them as components within each other, and import given values in the Frontmatter!

There’s even more power to .astro components than I’ve mentioned here, here’s the docs if you’d like to read more.

Renderers for your favorite frameworks and libraries

Astro is automatically configured with renderers for React, Vue, Svelte, and Preact! You don’t actually need to install these frameworks for them to work. You can override this, if you want to add or remove any renderers you’d like.

It also supports Markdown out of the box (so any .md files you might make), and you can use a <Markdown> component in your .astro files, too!

You might be wondering, “hey, I thought Astro doesn’t like client-side JavaScript?” You’re right. When you make a React/Vue/whatever component in Astro, it will render the HTML for that component by default, but not the client-side interactions! If you’d like to use your components though, never fear, there’s some built-in hydration options for you:

<MyComponent client:load /> will render MyComponent on page load
<MyComponent client:idle /> will render MyComponent as soon as the main thread is free
<MyComponent client:visible /> will render MyComponent when the element enters the viewport (so when a user scrolls to it)

Page-based routing

Just like many other frameworks these days, Astro has a pages/ directory already built, and any .astro or .md files inside of it automatically become routes in your application.

This is fully configurable, as well, so if you want to point your routes at a different directory, you can!

You can also make what are called Collections to generate pages from data! So, for example, if you have a CMS of blog posts, you could pull in and generate routes and pages from that API. You can even group content, and pagination is built in, as well. The Collections API comes from an Astro prop, and is documented here.

Styling and state management

Styling and state management are still in early implementation in Astro, but there’s quite a bit supported already.

Out of the box, global CSS is supported, and there are some limits around scoped CSS and CSS Modules. You can see the styling quickstart for more information, but chances are, your favorite way to style is possible.

In terms of state management, the support you want will depend on the framework/library you use. For React, the Context API, Recoil, and Jotai are currently fully supported, and Redux is partially supported. Vue has partial Vuex support, and Svelte has full Svelte Stores support. Their team is open to PRs and issues if something you like is not built in.

And mooooore

There’s even more in Astro that’s supported, including sitemaps and custom configurations. Check out their docs if you’d like to read up on everything.

Until then though, let’s build!

Getting started

First of all, you’re going to need Node.js on your machine, in particular a minimum version of 14.15.1. This is because it’s built with ES Modules (or ESM), so you can use import statements to your heart’s content. Adios, require!

Make a new directory, and then call:

npm init astro

This will pull up an app template selector, where you can choose from their starter kit and a few other options. I went with the starter kit, because I am snooty and like to build things my myself. Then you can go ahead and npm install and initialize your git repo if you’d like, and run it with npm start.

And with that, you’re off to the races! The default page that you’re given shows you the project structure, and you can stick with the defaults or configure them in astro.config.js.

Help me!

Don’t worry my little developer lamb, I’ve got you.

You can run this to make a new Astro project with a template I made for you:

npm init astro my-new-project --template cassidoo/astro-netlify-starter

Until next time!

React 18 Alpha is out! Now what?

Tue, 08 Jun 2021 05:00:00 GMT

Hello!

They kept us in Suspense long enough, but HECK React developers have some new features to play with!! The best part: Almost all of the benefits of the upgrade don’t require major code changes.

The New Root API

React has always had to have some kind of root. You’re probably used to seeing something like this at the top level of your applications:

import ReactDOM from "react-dom";
import App from "App";

ReactDOM.render(<App />, document.getElementById("root"));

Pretty normal, right? Right. This ReactDOM.render() is now called the Legacy Root API. It works the exact same way as React 17. You are still allowed to keep this, but it will be eventually deprecated.

The New Root API looks a little different:

import ReactDOM from "react-dom";
import App from "App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

It’s very similar! You use ReactDOM.createRoot instead of the old method.

With this change, a few things happen:

The hydrate method is gone, and is now an option on createRoot
The render callback is gone (and can now be a prop passed in to <App /> or whatever you give to the root)

If you don’t use these two functions, then you don’t have to worry about their changes. If you’d like more details on them, there’s some code change examples here from the React core team.

By switching to the New Root API, you automatically get the new out-of-the-box improvements that come with React 18!

This change is all you need to do to upgrade your client to React 18. If you only use React client-side, then you’re done and can skip to the installation section below! If you use server-side React or want to learn more about Suspense, keep reading.

Suspense

Puns aside, I think we are ALL incredibly excited for Suspense finally coming out with full support. React 16 had support for it, technically, but it was never full support, and it was not very easy to understand.

Soooo what the heck is Suspense? It’s a set of functionality that allows for waiting for data to resolve before a state transition (AKA delayed transitions), reducing UI clashes while data loads (AKA placeholder throttling), and coordinating the appearance of a set of components by streaming them in order (AKA SuspenseList).

If you played with Suspense before, you might see some “Legacy Suspense” behavior changing, but if you’d like to try it out for the first time, the summary is that you wrap your components in a <Suspense> component, like so:

<Suspense fallback={<Loading />}>
  <SomeComponentThatSuspends />
  <SomeOtherComponent />
</Suspense>

In this example, React will show the <Loading /> component at first, and then will replace <Loading /> with <SomeComponentThatSuspends /> and <SomeOtherComponent /> when the data is resolved in <SomeComponentThatSuspends />.

I want to reiterate this, because it’s different from previous versions: Nothing inside of the <Suspense /> component will be rendered until the data is resolved! You can see a code sample from the React core team using this here.

Concurrent features

There are a few methods that come with React 18 that are completely opt-in. Not all of them are documented yet, but they will be as the version is optimized:

startTransition: keep the UI responsive during a big state transition.
useDeferredValue: defer updating less important parts of your app.
<SuspenseList>: coordinate the order in which loading indicators show up.
Server-side rendering with selective hydration: has your app load and become interactive faster.

What’s nice about each of these features is that you don’t have to include all of them throughout your whole application. You can opt-in to build with them in just certain parts of the app, which is very nice and flexible.

Enough already! How do I install it?

You can use the @alpha tag to install React 18 right away:

npm install react@alpha react-dom@alpha

It will be months before the Alpha reaches Beta, and more time after that until it’s fully stable. You can see more details about the roadmap here, which also includes other functions that aren’t implemented yet.

The React Working Group has a full set of questions and discussions about these features as well, if you’d like to read more, as well as their announcement blog post!

‘Til next time!

Shallow Routing in Next.js

Wed, 02 Jun 2021 05:00:00 GMT

Hello!

Normally, I like to go deep with my posts, but let’s not this time: Let’s talk about shallow routing in Next.js!

What the heck is shallow routing?

Shallow routing is when you change your website’s URL without re-running data fetching methods again. In the case of Next.js, it means you have one page component that covers multiple URLs! This is particularly useful for adding query strings, and routes that might explain the content of your pages as they change to user behavior.

How do I use it?

If you’d like to use shallow routing in your applications, you don’t do shallow routing with the <Link> component built into the framework, which is what you might expect. Use the built-in useRouter hook, and add { shallow: true } to your router.push commands, like so!

useEffect(() => {
  router.push("/some-other-route", undefined, { shallow: true });
}, [someVariable]);

Wanna see it in action? In this Choose Your Own Adventure app, you can navigate through the story without querying the database multiple times for new characters to be a part of it! The code for the routing is here, and you can see how the entire project was built in this demo video.

Pursuing Passive Learning

Sun, 28 Mar 2021 05:00:00 GMT

I wrote this post originally in 2016 when I first started to passively learn Morse code. I added a bunch of custom vibrations for each letter of the alphabet to my phone, and when I add someone to my contact book, I assign them the custom vibration. So, as people text or call me, I’m slowly but surely learning Morse code because of their names. So my husband Joe has a J name, so it’s the .--- vibration, my sister Cami has a C name, so it’s the -.-. vibration, and so on.

5 years later, it’s going pretty well! I admit there are some letters that I simply don’t know from this method (I do not know a lot of people with Q and X names), but I’ve learned a decent amount of Morse code this way and can spell some words out.

We’re all exposed to subliminal messages. Due to the massive amounts of information we’re exposed to every single day, and our limited capacity to actively, consciously register it, there’s always small changes in our minds. But, if you’re exposed to the same information again and again over time, there’s more lasting changes. So, like in my example above, I’ve been constantly hearing vibrations for people every day, and the repetition has led to my learning without my having to think about it.

When a person is stressed, they use both their conscious memory and their subconscious memory to compensate for all of the stress. The switch from totally conscious learning to conscious+subconscious learning is triggered by mineralocorticoid receptors, which are released in response to stress. The switches are controlled by the amygdala, the part of the brain that’s responsible for both memory and emotional reactions. There’s a really interesting study by Schwabe, Tegenthoff, and Hoffken that talks about this, and you can read it here. Long story short: it turns out that when I said that I “operate well under stress” in college, I wasn’t actually making that up!

I often wonder what else I could try to learn passively. Over the years I’ve had a binary watch to try and be able to more quickly read binary, I’ve written down quotes on a post-it here and there for me to occasionally skim and eventually memorize… but I haven’t done anything particularly technical with this kind of learning, yet. I would like to try, but I’m not really sure how.

There’s probably a lot more to learn about subconscious and passive learning. Please feel free to send me anything you’ve found on the subject, anything you’ve tried, or something you’re planning on trying!

Making a virtual credits sequence for your video calls with OBS and CodePen

Tue, 23 Feb 2021 06:00:00 GMT

I saw Scott Hanselman make a tweet the other day about adding credits at the end of meetings.

I love this idea and decided to make one myself!

The Code

First, I went over to CodePen and threw together an array of text to scroll. I used a list of blog posts I wrote about Next.js:

let posts = [
  "An Incredibly Serious Discussion about Next.js at Reactathon",
  "Enabling AMP in your Next.js projects",
  "Adding Babel presets and plugins in Next.js",
  "React Children: The misunderstood prop",
  "Query an API at both build time and runtime with Next.js",
  "How to turn off telemetry in Next.js",
  "Add Web Monetization to your sites with Snippet Injection",
  "Logging in Next.js",
  ...
]

From there, I made a small function to add each of these into a <div>, which I add into an existing container on my page.

(() => {
	posts.map((p) => {
		document.querySelector(".container").innerHTML += `<div>${p}</div>`;
	});
})();

In the CSS, I made the background limegreen and did some animations to scroll it. I also added a custom font and stuff, this part you can just do to your heart’s desire.

Here’s the final Pen for you to try out:

See the Pen Cassidy's base CSS demo by Cassidy (@cassidoo) on CodePen.

Feel free to fork this if you’d like to customize it!

OBS

OBS (Open Broadcaster Software) is a free program that works across operating systems that we can use for making a “virtual camera”.

Download OBS, and make a new Scene. There’s a Scenes panel in the bottom right of the app:

Click the + sign in the bottom left corner of and name it whatever you’d like. As you can see, I named mine “Scene”, because I am not clever.

In the panel next to Scenes, there’s a Sources panel. We’re going to add two Sources to our Scene by clicking that + sign again.

First, add a Video Capture Device, and choose your webcam.

Then, add a Browser, and put in your CodePen’s URL. I personally used my Pen in Live View, but you can also use Full Page View.

Yours will probably still have the green background. Let’s remove that! In the Sources panel, right click on your Browser and click “Filters”.

Under Effect Filters, click the + and add a Color Key filter. Make the Key Color Type Green, and adjust the levels until all of the green is transparent on your Pen in the preview, like so:

Close this window when you’re happy with it, and now it’s time for the final adjustments.

Inside of the main preview window in OBS, you can drag around your camera and text until you’re happy with it. For example, I made my browser slightly wider than the preview itself, so that the scrollbar wouldn’t appear in the frame.

And you’re done! Click “Start Virtual Camera” on the bottom right so that you can use it in other applications.

Use it!

Now whenever you’re in a Zoom, a Google Meet, a conference, livestreaming, or anything else, you can choose this virtual camera that you’ve made instead of your normal webcam!

You can do more than just a credits sequence, too. You could add diagrams, fun popups, animations, and moooore. Go forth and create!

An Incredibly Serious Discussion about Next.js at Reactathon

Sun, 20 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 20!

Last week, Netlify sponsored Reactathon, and we had a blast getting to know other developers in the community in our topic tables and around the event.

One of the talks was given by yours truly, and it was a very, very serious discussion about Next.js, its capabilities, and… maybe a little bit of fun things too.

Enabling AMP in your Next.js projects

Sat, 19 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 19!

Did you know that Next.js supports AMP out of the box? Here’s how you can build with it!

What is AMP?

AMP stands for Accelerated Mobile Pages. It’s an open source framework developed originally by Google, optimized for mobile web browsing, to help webpages load faster. It works by:

Executing AMP JavaScript asynchronously
Statically sizing resources like images, ads, and iframes
Stopping extensions from blocking page rendering
Only allowing third-party JavaScript in sandboxed framers
Only allowing inline CSS + minimizing style recalculations
Only running GPU-accelerated animations
Controlling all resource downloads
Using the preconnect API to pre-render a page before a user navigates to it

How do I add it to my Next.js application?

Add the following line to your page component:

export const config = { amp: true };

This enables AMP for your page! That amp property can be either true or 'hybrid'. When it’s true, that means your page will be AMP-only, and if it’s 'hybrid' the page will have both an AMP version and an HTML version.

AMP-only pages

AMP-only pages will have no React code run client-side, and AMP Optimizer is automatically applied to it.

Hybrid AMP

In this mode, you can use the useAmp() hook by importing it at the top of your page:

// at the top
import { useAmp } from "next/amp";

// in your component
let isAmp = useAmp(); // returns true or false

With this, you can return AMP components or HTML based on if isAmp is true or false.

As for the AMP components you can use on the page, in both modes, they’re built in! Use a component from the AMP Component Catalogue and Next.js will detect it and automatically import it for you.

Caveats

You do get all the benefits mentioned above when using AMP in your Next.js projects, but there are two things you can’t use currently:

CSS Modules – You can only use CSS-in-JS libraries with AMP pages.
TypeScript – AMP doesn’t have built in types for TypeScript yet.

These things are actively being worked on at the time of writing, but as of right now you cannot use these.

You can also read more about AMP here!

Adding Babel presets and plugins in Next.js

Fri, 18 Dec 2020 06:00:00 GMT

Welcome back, for Blogvent day 18!

Next.js comes with several Babel presets built in, and chances are, it will cover most of what you’d like to use in your projects. But, it’s nice and simple to add custom presets and plugins, if you so desire!

First, make a file at the root of your project called .babelrc. You will want to include the next/babel preset to keep the ones that are built in to the framework:

{
  "presets": ["next/babel"],
  "plugins": []
}

If you want to add more presets than the next/babel one, you can add them to that array in an object, for example:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "loose": true,
          "modules": false
        }
      }
    ]
  ],
  "plugins": []
}

If you’d like to add plugins, it’s the same thing! If you don’t want to custom configure them or anything, you can name them in the file:

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

So if I had my .babelrc like this, I would be able to use this plugin without any extra steps. Neat!

I want to use this!

If you’d like to explore your plugin options, check out this page on the Babel Plugins website!

React Children: The misunderstood prop

Thu, 17 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 17!

Children are misunderstood. I’m talking mostly about React children, we can talk about human ones another time.

Let’s go through step by step why children are weird, so you can understand them better. Again: React children. Not humans.

Children are props

Chances are if you’ve written React before, you’ve dealt with props and children in some way. Let’s say we have a super simple button component:

const Button = () => <button>I am a button.</button>;

If you want to pass things to this button, you would use a prop.

// our button
const Button = ({ color }) => (
  <button className={color}>
    I am a button
  </button>
)

// somewhere else
<Button color="red" />

If you want to make our button say more than just “I am a button,” you can pass children to it.

// our button
const Button = ({ color, children }) => (
  <button className={color}>
    {children}
  </button>
)

// somewhere else
<Button color="red">
  I am still a button
</Button>

By passing children in this way, you are passing it to the component by position. Now, if you notice that little header there of this section, I call children a prop. Did you know that it can be passed as a named prop, too?

// turn this
<Button color="red">
  I am still a button
</Button>

// into this
<Button color="red" children={"I am still a button"} />

These two syntaxes produce the exact same result on the page! Children is a prop, and can be passed in to components in different ways.

Children can be an object or an array

Sometimes our children act differently, and that’s okay.

If we were to run the following what do you think would be logged?

// our button
const Button = ({ color, children }) => {
  console.log(children);
  return (
    <button className={color}>
      please, my
      {children}
      are starving
    </button>
  );
};

// somewhere else
<Button color="red">
  <h1>Oh</h1>
</Button>;

Logged here would be an object that looks something like, {type: "h1", key: null, ref: null, props: Object, ...}. Okay. So children is an object. But what if we change up the children in the button so there’s more of them?

<Button color="red">
  <h1>Oh</h1>
  <h2>My</h2>
  <h3>Goodness</h3>
</Button>

Logged in our terminal would be [Object, Object, Object], because children is an array.

Gosh, make up your mind, children!

The data structure for children can change depending on how many there are. If only there were a way to deal with these children!

A way to deal with these children

React.Children is a module that helps you use children better. It has a bunch of functionality so that you can avoid type-checking every time if it’s an object, or an array.

// Turns children into an array
React.Children.toArray(children);

// Counts the children
React.Children.count(children);

// Makes sure there's only one child
React.Children.only(children);

// Lets you run map over children without having
// to worry about if it's an object or not
React.Children.map(children, fn);

// Lets you run forEach over children without
// having to worry about if it's an object or not
React.Children.forEach(children, fn);

Can we talk about human children now?

No, unfortunately we’re out of time. React children are a funky thing to deal with, but if you use them right, you can unlock the ability to make more reusable, flexible, and composable components.

‘Til next time!

Query an API at both build time and runtime with Next.js

Wed, 16 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 16!

In Next.js, you can call an API at build time, and at runtime. There are pros and cons to this!

If you call an API at build time, that means the data is pulled only at build time, and so when your users go to your site, they don’t have to wait for the data to load. It will already be there, baked into the page! But, that means you need to run a build again if you want to update the content.

If you call an API at runtime, that means the data is pulled when the page is run, as the user queries it! It makes for a slower experience for your users sometimes, but the data will always be up-to-date.

Can I see how this works more?

Of course! Here’s a demo I built to illustrate this further.

This demo uses NASA Open APIs to pull in photos.

On the left, you’ll see an image of Neptune. That image was pulled onto the site at build time. In the code, in my page component I call the API using the Next.js function getStaticProps:

export async function getStaticProps() {
  const res = await fetch(`https://images-api.nasa.gov/search?q=neptune`);
  const data = await res.json();

  let image = data.collection.items[0].links[0].href;
  let info = data.collection.items[0].data[0];

  return {
    props: { image, info },
  };
}

In this function, I fetch the API, get the image and info data for the first image returned, and then push that to the page. You can see the full file here. This function is called once when the site is built, and then never again until the site is built again.

On the right side, the image is pulled in at runtime. When the page loads and the component is mounted, the API is fetched. You can change the text in the input, and it will fetch more data from the API. This is using the React hooks, useEffect and useState:

export function useQuery(passed) {
  let [planet, setPlanet] = useState(passed);

  useEffect(() => {
    let current = true;
    fetch(`https://images-api.nasa.gov/search?q=${passed}`)
      .then((res) => res.json())
      .then((res) => {
        if (current) {
          setPlanet(res);
        }
      })
      .catch((error) => {
        console.log("error", error);
      });
    return () => {
      current = false;
    };
  }, [planet]);

  return planet;
}

In this function, I pass in a default value (the passed variable) to the API. The data is pulled, and if the component is still mounted and up to date, I set a state variable (planet) with the response data from that API. Whenever the user passes in a different query, the API is called again. You can see how this is used in the whole file here.

Wow!

I know. Space is really cool. So is JavaScript.

But for real, this is just a small example of how you can use both build time and runtime code in your applications. Think about how you want to structure them, and how you might want to keep some things run once at build, and some things run on the user’s end, every time.

If you’d like to see the demo again, here is the site, here is the repo, and here is a button to clone it to your chosen Git provider and instantly deploy it to Netlify yourself:

Til next time!

How to turn off telemetry in Next.js

Tue, 15 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 15!

Next.js, through its CLI, collects anonymous telemetry data about general usage by default. The data collected includes:

CLI command invoked (next build, next dev, or next export)
The version of Next.js you’re using
Your operating system
Next.js plugins used in your project
Duration of next build and size of application

This information doesn’t identify you in any way, but you might not want it to be collected. To disable this data collection, run this command at the root of your project:

npx next telemetry disable
# to re-enable, turn "disable" into "enable"

Similarly, you can check the status of telemetry data collection with this command:

npx next telemetry status

If you want to ensure this is a change in your codebase, you can also set an environment variable (here’s more details how!) in your project:

NEXT_TELEMETRY_DISABLED=1

Add Web Monetization to your sites with Snippet Injection

Mon, 14 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 14!

In case you haven’t heard of it before, Web Monetization is “a JavaScript browser API that allows the creation of a payment stream from the user agent to the website.” It’s currently being proposed as a W3C standard at the Web Platform Incubator Community Group, and uses the open protocol Interledger to transfer money.

I want that!

If you want to enable Web Monetization in your websites, you first set up a web monetized wallet, and a payment pointer. Right now you’ll want to use one of these Interledger-protocol-enabled providers to do so:

Your payment pointer will be something that looks like a URL but starts with a $ sign, like $wallet.example.com/something.

Now, with that payment pointer, you can use the monetization meta tag!

<meta name="monetization" content="$wallet.example.com/something" />

Where do I put this tag?

You can add it into the <head> of your website, and it’s done! But, if you don’t want to make code changes in your repo, there’s an even simpler way with Snippet Injection.

Head do your Site Settings on Netlify, then Build & Deploy, then down to Snippet Injection. Make a new snippet, make it “Insert before ”, and add your tag in the HTML, like so:

Now, your web monetization will be automatically added into your site’s build, without you having to update your <head> across your codebase.

Enjoy! 🤑

Logging in Next.js

Sun, 13 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 13!

Next.js is a hybrid framework. Some parts of it live in the browser, and some parts live in Node.js. When you’re developing, that can make for some fairly confusing development, sometimes!

Depending on where you put your console.log() statements, your logs will appear in different spots. Here’s some rules of thumb for figuring out where they are:

If your logs are declared in a function that renders/uses React, they will appear in the browser.
Whether it is one of your React hooks, your React components, or a page-level component, that log will be in your browser console. This part of your code is the frontend of your application, so you can remember this that the frontend is client-side, in the browser! This is true for both development and production mode.

If your logs are in a data fetching function, they will appear in your terminal or build/function logs.
If you have utilities, call APIs, or render certain routes based on external data, these logs will be in your terminal in development mode. Your terminal is where the “back-end” of your application lives, and where you can see pages being built. It’s a Node.js environment! In production mode, these logs will appear at build time in your build logs at build time, or in your function/API logs at runtime.

Deploy from CodePen to Netlify in less than 30 seconds

Sat, 12 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 12!

CodePen is one of our favorite places to experiment, prototype, and build fun web projects. Deploying a Pen to Netlify is super speedy, and a great way to get your projects live on your own domains for all to see!

It took longer to write this blog post than it took to take a Pen and deploy it to Netlify. It was so fast, in fact, that I recorded it:

First, export your Pen to a ZIP file. Then, go to netlify.com/drop, then drag the dist folder from your exported Pen onto the page, and click the resulting new website. Done!

That’s right, in less than 30 seconds, a Pen on Netlify. Woo!

React Strict Mode in Next.js

Fri, 11 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 11!

You may or may not have heard of Strict Mode in React before. Strict Mode is a tool for highlighting potential problems in a Reactathon application. It doesn’t render any UI, but it adds extra warnings to any components inside of the <React.StrictMode> tags. This is something that only runs in development mode, so you don’t need to worry about it in production!

What does Strict Mode help with?

It helps you avoid legacy code, and deprecated APIs. Specifically:

Lifecycle methods deemed unsafe
Legacy string ref and context APIs
Unexpected side effects
Deprecated APIs

Seems important. How do I use it?

If you want to add Strict Mode just to certain parts of your application, you can wrap which components and pages you want with the Strict Mode tags:

function Example() {
  return (
    <>
      <Header />
      <React.StrictMode>
        <>
          <Sidebar />
          <Content />
        </>
      </React.StrictMode>
    </>
  );
}

Similar to how React Context works, this will work on the Sidebar and Content components, as well as their descendants!

If you’d like to add Strict Mode to your entire Next.js application, not just certain pages and components, you might think that you should just wrap your _app.js file like you do with Context. And, technically, you can! But, it’s actually even easier than that.

In your next.config.js file at the top level of your project, you can enable it in one line:

// next.config.js
module.exports = {
  reactStrictMode: true,
};

That’s it!

Environment variables in Next.js and Netlify

Thu, 10 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 10!

If you’d like to use environment variables in Next.js, make a .env.local file at the root and you can use them all there! It might look something like this:

# .env.local
SITE_URL=localhost
SITE_KEY=hahabusiness

That being said, these variables are only exposed to the Node.js environment like this, not the browser. If you want to use them, you’ll have to use them only in your API routes, or in the data fetching methods like getStaticProps in your page components. For example, it might look like this:

// pages/index.js

export default function Home(props) {
  return (
    // ...
  )
}

// ...

export async function getStaticProps() {
  const siteData = await someService({
  	  url: process.env.SITE_URL,
    key: process.env.SITE_KEY
  })
  // ...
}

If you want your environment variables to be exposed to the browser and be usable in your client-facing components, in your .env.local you have to prefix the variable with NEXT_PUBLIC_.

# .env.local
SITE_URL=localhost
SITE_KEY=hahabusiness
NEXT_PUBLIC_PAYMENT_TOKEN=thisispublic // this one is exposed to the browser

Setting environment variables in the Netlify UI

When you’ve deployed your site, you can set your environment variables in the Netlify UI. Head over to the Build & Deploy settings in your Site Settings, and then plug your values in under “Environment variables”:

You can also use the Netlify CLI to use environment variables set in the UI (or even set them from the CLI, too)!

Is there more?

There’s always more! There’s so many things that you can do with environment variables on Netlify. Here’s some useful docs and guides for how to take full advantage of them:

Global Styles in Next.js

Wed, 09 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 9!

In Next.js, you have TONS of support for pretty much every styling option you’d like to use. CSS Modules, Styled JSX, Sass, Less, Stylus, Styled Components, Emotion… I could go on! If you want to style a component, Next.js has you covered.

One thing that often trips people up though is adding global styles. But luckily, the framework has you covered there, too!

In your pages/ directory, add an _app.js file if you don’t already have one. Yours might look something like this:

// pages/_app.js

function Application({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default Application;

Now, to add some simple global styles to your application, it’s as simple as importing it at this level!

import "../styles/globals.css";

function Application({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default Application;

It’s done!

You now have a global stylesheet applied to your Next.js application. If you’d like to see it in a starter application, you can check out this repo here, or deploy the starter directly to Netlify with one click:

Making a custom 404 page in Next.js

Tue, 08 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 8!

If you’ve ever messed around enough with your Next.js applications and poked around with new routes, you’re probably familiar with this error page:

It’s a well-designed, simple page, but what if you want to add your own branding and linking to it? Well, luckily for you, they thought of that, and it’s as simple as adding a 404.js file inside of your pages/ directory.

Here’s a quick example of what you could do:

// 404.js
import Link from "next/link";

export default function FourOhFour() {
  return (
    <>
      <h1>404 - Page Not Found</h1>
      <Link href="/">
        <a>Go back home</a>
      </Link>
    </>
  );
}

Because this is just like any other page component in Next.js, you can add whatever styling, links, data, or copy you’d like.

For other errors, you can do the exact same thing with an _error.js file in the pages/ directory! The 404 error is special because it is always statically generated, but the others rely on the server.

Absolute Imports in Next.js

Mon, 07 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 7!

We’ve all been there, you’re organizing your files in a project, and you see a dreaded import statement:

import Button from "../../../../designsystem/buttons/Button";

Gross. Now that you’ve re-arranged some folders and files, what breaks? What imports have to change? How many files have to be updated?

Next.js has a handy little feature built right into the framework for that, called absolute imports.

With absolute imports, you can alias certain folders to a name, and not have to worry about all of the files that change when you do!

Implementing absolute imports

Make a (or use your existing) jsconfig.json at the top of your project. If you’re using TypeScript, you can make a tsconfig.json instead. Put something like this inside of that file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@designsystem/*": ["src/designsystem/*"],
      "@buttons/*": ["src/designsystem/buttons"]
    }
  }
}

The baseUrl here allows you to import directly from the root of the project (or wherever you put it), and the paths are all of the different paths that have a “nickname”.

Your import statement from earlier can now look like:

import Button from "@buttons/Button";

Now, if you ever rearrange big folders, you can change it just in the one jsconfig file, or no changes will be needed because your imports in each individual file stay the same!

Cool! How does this work in a production app?

Glad you asked! If you’d like to see a working example of this, check out the Jamstack Explorers repository:

Why you should code together: Mob Programming FAQs

Sun, 06 Dec 2020 06:00:00 GMT

It’s Blogvent, day 6!

Today I want to talk about a subject that’s less technical, but important for technical teams to consider: group programming. This has many names, “pair programming,” “group pairing,” “mob programming,” “collaborative coding,” and really it all means the same thing: You work in a group on a particular feature, bug, problem, or idea.

On the Developer Experience team at Netlify, we love mob programming. While building our Jamstack Explorers project, we mob programmed a grand majority of the features together! We try to have around one session a week where someone leads the meeting to teach the group how to do something, or to learn something from the group.

We get a lot of questions about mobbing. Here’s some answers to common ones we’ve seen!

Don’t features take more time to build because there’s more developers working on one thing at a time?

First of all, to solve a lot of problems, two (or 8) heads are better than one. If the current “driver” gets stuck on something, chances are someone in the group has the context to solve the problem, or we can “rubber duck” together and talk out the solution. This not only helps the driver solve that problem, but it gives more learning and context to everyone on the call.

When multiple people are working on a problem, there are fewer coding mistakes because there are others looking over your work. Plus, it keeps the current driver more focused than they might be if they were programming alone and had an interruption or two. Because of the quality assurance upfront, code reviews are faster because there’s more context across the team, and fewer mistakes in general.

How do you deal with egos and people taking over calls?

This is definitely something that you have to establish early with your team. Mob programming isn’t about showing off how much you know to your team, but rather information-sharing. On our team at Netlify, we designate who will be the driver of the call, and what we’ll be covering beforehand. By establishing those logistics early, it sets expectations for everyone.

Several of our calls for Jamstack Explorers (and outside of that project) involved disagreements on how something should be done, but because the team was on the call together, we talked out those decisions. It’s important to make sure everyone has a voice (we purposely pause to ask for feedback from people who haven’t spoken as much as others), and once a decision is made, we commit to it. Sometimes that involves some disagreement, but what matters is that the team decision is the final decision, not the loudest person in the room.

Mob programming is a great tool for developing a team’s interpersonal skills. If there’s someone on your team that has a tough ego to crack, this could be a solid way for you to work together and establish trust with your team.

What if someone knows a lot more/less than everyone else?

What an AMAZING opportunity mob programming provides for both teaching and learning!

My favorite example of this was when we were first using Sanity as our data layer in the Jamstack Explorers project. Jason on our team was the only one who was really an “expert” on the subject, and so for our mobbing session where we were setting up schemas, he taught us all how schemas worked, he set one up on his own, and then we all had to make our own for a different part of the project. Once we each had finished, we all went through them together, fixed mistakes, and Jason was able to teach us the nuances of the software that we wouldn’t have known without a deep-dive into the documentation. It was an amazing learning experience for us, and a really great teaching experience for Jason!

We’ve also had times on the team where someone is not sure how to implement something, and because of how we’ve established this “mobbing culture” on the team, folks will say, “can someone teach me how to make X work?” These calls are wonderful, because you can both be taught by multiple people how to do something (and how to do it properly, with less guesswork), and the team together can talk out how different solutions can come about for different problems.

What tools do you use for mobbing?

A lot of times, we just use a good ol’ video call and screen sharing. When we want to switch between drivers in a session, we often commit our work to a branch, and then the next driver pulls that branch and shares their screen.

There’s also some other tools that are built for collaboration that have been awesome for us, including VSCode Live Share, and CodePen Collab Mode!

How do I convince my team this is a good idea?

Our team first started dipping our toes into mobbing by just throwing up a video call and saying, “hey, anyone want to jump in and help me debug this?” here and there, until we established it as a pattern, and turned it into a scheduled occurrence. This was definitely a more “natural” approach that may or may not work for you and your team.

I’d recommend you start by booking a time on the calendar for folks to solve a ticket here and there, or to talk out how to use a certain feature of a framework you’re using, or even just call it a “Lunch n Learn” first and add the participation later. There’s so many ways to go about it that come down to establishing good communication, and fostering a culture of learning on your team. If you start there with your goals, there’s nothing that can stop you.

‘Til next time!

Building a custom React media query hook for more responsive apps

Sat, 05 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 5!

Chances are if you’ve written any CSS before, you’ve written media queries. And honestly, media queries overall are solid! But, they were made for an earlier time in the browser. They were not designed for some of the rendering logic that we have on the frontend now.

You can still use media queries, of course, and should, but there are some cases where JavaScript will be a smarter option. For example, what if you’re on your phone, and browsing a website, and there is a sidebar or element that is hidden by CSS, that is making network requests? For the user, that is a waste of resources!

There has to be a better way. And there is!

Media queries… in JavaScript!

So, to solve this problem, what you need to do here is conditionally render things based on the browser size, rather than render something and hide it with CSS.

If you’ll recall in yesterday’s Blogvent post, you can use React’s useEffect to access the window object in the browser. That window object has a function called matchMedia that returns a boolean based on if the window matches a certain media query passed in!

So, if we combine these with a little bit of state, you can make a custom hook that you can use to conditionally render components in your applications:

import { useState, useEffect } from "react";

export function useMediaQuery(query) {
	const [matches, setMatches] = useState(false);

	useEffect(() => {
		const media = window.matchMedia(query);
		if (media.matches !== matches) {
			setMatches(media.matches);
		}
		const listener = () => {
			setMatches(media.matches);
		};
		media.addListener(listener);
		return () => media.removeListener(listener);
	}, [matches, query]);

	return matches;
}

Let’s walk through this. In this custom hook, you have a matches state variable, and we take in a query. In the effect, we check if the query that is passed in matches the window. If it does, we set matches to true. We set an event listener in there as well, to keep that variable in sync with the window changing sizes. The event listener is removed when query changes, when the component using it unmount, or when matches changes.

Whoa. How can I see this in action?

Feel free to use this hook in your projects! You can call it inside your components, for example:

function Page() {
	let isPageWide = useMediaQuery("(min-width: 800px)");

	return (
		<>
			{isPageWide && <UnnecessarySidebar />}
			<ImportantContent />
		</>
	);
}

Have fun!

"Escaping" Next.js to access the browser

Fri, 04 Dec 2020 06:00:00 GMT

Welcome to Blogvent, day 4!

Often when you are trying to add event listeners or DOM variables outside of a Next.js application, you’ll get a particularly unhelpful error:

ReferenceError: window is not defined

To get around this, you can use the React hook, useEffect! There’s a couple options depending on what you need.

If you just need to access the window, you can use useEffect by itself, in something like this:

import { useEffect } from 'react'

function Page() {
  useEffect(() => {
    // use/set the window variable in here
  })
  ...
}

And if you need to get an object in the browser (a DOM node or something) outside of Next.js, and render something into it, you can combine useEffect with useRef!

import ReactDOM from 'react-dom';
import { useRef, useEffect } from 'react'

function Page() {
  let ref = useRef()

  useEffect(() => {
    ReactDOM.render(<OtherThing/> ref.current);
  }, [])

  return <div ref={ref}/>
}

I can’t think of a use case for this!

That’s okay! It’s something that comes up for very specific cases of “escaping” Next.js (or even Gatsby or vanilla React projects), for example using event listeners, using external JavaScript libraries, or adding certain animations. If you’d like to see an example in a real codebase, check out this part of the Activity Graph in Jamstack Explorers.

Speaking of which, if you’d like to learn more about Next.js, check out the course (with more to come) on Jamstack Explorers!

What is React Fast Refresh?

Thu, 03 Dec 2020 06:00:00 GMT

Hello friends, and welcome to Blogvent, day 3!

Chances are if you’ve looked at the latest React updates or Next.js v10, you’ve seen the term “Fast Refresh” thrown around. This is a new feature that doesn’t affect your users as much, but it makes your developer experience much better.

React Fast Refresh replaces React Hot Loader. React Hot Loader, before, wasn’t the most perfect thing. It lived outside of React, and led to some not-ideal debugging experiences. React Fast Refresh, however, has an updated API that is faster, handles errors better, and preserves state across re-renders.

So what does that mean? Let’s say that you have a simple counter component:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>You clicked the button {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Count!
      </button>
    </>
  );

And, let’s say that you hit the “Count!” button 5 times, and then you decide to add a simple change, like a new line of code.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>Counter Example</h1>
      <p>You clicked the button {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Count!
      </button>
    </>
  );

In this example, if you were to look at your browser page before without Fast Refresh, you would have to click the button 5 times again before seeing that previous state. Now, with Fast Refresh, that count would stay at 5!

This is obviously a very simplistic example, but if you think about the possibilities of a game state, user preferences, forms, client-side navigation… there’s so many problems here that Fast Refresh solves!

It also reloads the page automatically once syntax or runtime errors are resolved, and does a full reload when you update something outside of the React tree (because it’s more deeply integrated with React itself). Keep in mind, Fast Refresh only works for function components out of the box, not class-based components.

I wanna try it!

Check out this repo if you’d like to see a Next.js v10+ starter project (which has Fast Refresh automatically enabled), or click this button below to clone+deploy a new Next.js project right away:

Next.js: Should I use SSR or SSG?

Wed, 02 Dec 2020 06:00:00 GMT

It’s Blogvent, day 2!

If you use Next.js, chances are you’re aware that it can do both server-side rendering (SSR) and static site generation (SSG). It’s very powerful! But why would you choose one or the other?

It comes down to when a site is built. Static sites are built at deploy time, and server-rendered sites are built at runtime.

A case for SSG

There are a ton of benefits when you have a statically-generated site. Because a site is bundled and generated at build-time, your users don’t have to wait for a page to load or generate at runtime. They simply navigate to the page, and no code has to be run for the page to show up!

By using this as a pattern, server-side processes are abstracted to microservices. That means if some service is down, only that part of your site will be down, rather than the entire thing! This also reduces the surface area for security attacks as well.

You can read a lot more about static sites on jamstack.org.

A case for SSR

The biggest downside to static sites (and where SSR shines) is the long build times when you have hundreds (if not thousands) of pages that you have to render. If you have a ton of pages and the content is dynamic, it is something that can lead to both many builds, and long builds.

When you server-side render a page, your page is guaranteed to always be up to date, thus you don’t need to trigger a rebuild of your sites when the content changes. This can save you, the developer, a ton of time! That being said, for your users, the Time-To-First-Byte (TTFB) is slower, because the content is generated on the server for each request.

But what do I choose??

Get you a framework that can do both! Next.js allows you to both statically generate sites, and server-render pages, all within the same project!

As you are building your site and figuring out what works best for you, you can use the built-in performance monitoring functions in your project. If you’d like to learn more about those, you can check out this video on Jamstack Explorers!

On Netlify, if you’d like to run both static and server-rendered pages, all you have to do is add our build plugin to your netlify.toml:

[build]
  command = "npm run build"

[[plugins]]
  package = "@netlify/plugin-nextjs"

That’s it! What this plugin does is turn your server-rendered routes into Netlify Function API calls that serve the pages you need. You can also install the plugin via the Netlify UI (docs here, or go here).

If you’d like to see this plugin in action, check out this demo project using dynamic routes!

Using React Context for state management in Next.js

Tue, 01 Dec 2020 06:00:00 GMT

Happy Blogvent season, devs!

If you’d like to manage state across your Next.js applications, the easiest way to do it (without installing anything extra!) is using React Context!

If you’d like to use Context across every page in your application, you’ll want to go to pages/_app.js and make it look a little something like this:

// src/pages/_app.js

function Application({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default Application;

Then, make a file somewhere in your application that builds a Context object:

// src/context/state.js
import { createContext, useContext } from "react";

const AppContext = createContext();

export function AppWrapper({ children }) {
  let sharedState = {
    /* whatever you want */
  };

  return (
    <AppContext.Provider value={sharedState}>{children}</AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

Once this is done, go back to pages/_app.js and wrap your component with the AppWrapper:

// src/pages/_app.js
import { AppWrapper } from '../context/AppContext'; // import based on where you put it

export default function Application({ Component, pageProps }) {
  return (
    <AppWrapper>
      <Component {...pageProps} />
    </AppWrapper>
  )
}

export default Application

Now, in every component and page in your application, if you’d like to access the values inside of that sharedState object, you can import and call the React useAppContext hook!

Now, be discerning about how much you put into Context. You wouldn’t want unnecessary re-renders across pages when you can just share them across certain components.

Woo hoo!

If you want to see this in action in a real application, you can check out the open sourced repo for Jamstack Explorers!

Here is the code for _app.js, and here is the folder for the different providers created!

Avoiding burnout as an ambitious developer

Mon, 13 Jan 2020 00:00:00 GMT

This post was originally on The Stack Overflow Blog!

When I graduated college and started my first full-time job in NYC, I was all in. It’s a pretty common occurrence, especially in smaller companies: a junior dev thrown into the deep end, they flounder a bit, they learn a lot, and they use their youthful energy to code and work all over the place.

In my case, not only was I doing that, but I also worked on the developer evangelism side of things, which meant I was also going to hackathons and conferences constantly in addition to my 9-to-5 software engineering role. I loved it. I felt like I was growing at a super fast rate, and I was saying yes to everything. It felt good for my career and my personal brand, so I figured that meant all of the constant activity was good for my personal life, too.

Spoiler alert: it wasn’t.

I burnt out, hard. Saying yes to everything led to me going to an event almost every single night of the week—including weekends—in addition to my day job. It gave me exposure to the awesome dev community, the ability to mentor others, and the opportunity to speak to thousands of people at the cost of my own health and hobbies.

Burnout is difficult to describe to people who haven’t felt it. When I was going through it, I didn’t want to talk to anyone, I couldn’t fathom getting off my couch, I wanted to cry (and often did) at just the thought of having to go back to work the next day. I worked so much that I couldn’t pursue my hobbies anymore and had no time to myself. I felt obligated to everyone but myself and thought that I was going to let people down if I said no to anything. I wouldn’t wish those feelings on anyone. To this day, I feel a weight on my chest when I think about that time in my life.

But it was also a valuable lesson for me. After burning out several times over the course of a couple jobs, I decided to try out a different city, a different role, speaking less, and opting to pursue my interests more. I moved to Seattle and started at a creative agency, joined an orchestra, and got involved in the mechanical keyboard community in the city! To say that it was life-changing is an understatement. Going home after work to have a life, not to answer emails, not to work, but to do things that I care about… it was incredible! Now, I’ve definitely swung back a few times across different jobs, but overall, I’ve learned so much from burning out.

Be willing to say no

It’s hard to not say no to things that appear to be good for your career and personal brand. There are projects and things that I’m still dealing with that I said yes to nearly five years ago purely because I thought it’d be a good thing on my resume, even though it didn’t interest me. Don’t make the same mistake I did! Saying yes to everything will lead to you not being able to do your best on everything. Quality over quantity applies to your time spent on commitments!

Know what you want and, more importantly, what you don’t want

When you’re assessing what to say yes and no to, try to think about your goals. Yes, wanting to be at X point on the career ladder or Y point in your development strengths is important. But, do you dislike a certain language, or not want to take on certain tasks in your work? Do you have to sacrifice your “don’t want”s for your “do want”s?

I learned early on (the hard way) that I do want to keep speaking at events, but I don’t want to speak at more than three events a month. I do want to work on something that will impact others, but I don’t want to work with certain technologies. Think like that and actually write down a column of what you want and what you don’t want in your professional (or even personal) life!

Assess your energy levels day-by-day and use them realistically

When you look at your list of tasks that you have to accomplish in a given day, figure out how much you can realistically get done that day and actively move the rest to another day. By being realistic about what you’re going to be doing just today, you can set aside time to use the rest of your energy for the day on things that will give your brain a break. Actually make yourself a to-do list, stick to it, and don’t write so much that you always have tasks left over. By giving yourself dedicated time to rest up, you’ll be able to get your tasks done driven with more purpose, rather than driven by the looming feeling of being overwhelmed.

Be kind to your future self

When you’re saying yes to things, it’s easy to say, “ah, future me will have a lot to do, but they can handle it.” So many people do this. It’s like the person you’re planning on overwhelming with a bunch of tasks or events or projects is separate from the person who you are today. I can’t tell you how many times I’ve been mad at my past self for signing up for too many things. Try to avoid this by keeping a calendar and assessing how much you’ve given yourself to do in the future. If a particular day, week, or month is packed, maybe consider saying no or choosing different timing.

Doing these things are preventative, and you can start doing them right now. Yes, you can do everything at the same time, but it’s healthier in the long run to do things over time, accept tasks/events/projects that are worth it for your goals (while not risking what you don’t want), and remembering: you don’t have to set yourself on fire to keep others warm.

Many things can wait, or if anything, be taken on by someone else. If you keep that in mind, you can do your work for yourself, your community, and your career more wholeheartedly, and enjoy your life in the process!

Apollo Mission - The Pros and Cons of Being an Early Adopter of New Technology

Wed, 28 Aug 2019 00:00:00 GMT

This post was originally on The Stack Overflow Blog!

When humans decided to try and land on the moon, they had to invent a lot of the technology for the project from scratch. It was hard, expensive, time-consuming work with lots of wrong turns and dead ends. That’s what it’s like when you’re using systems no one has experience with. There are no veterans around to answer your questions when you get stuck.

Recently at CodePen we decided to switch our stack over to use Apollo and GraphQL on top of our React code, which has been an awesome learning experience. I personally love how we can organize our components very modularly, unlike the way we organized it with Redux. But, because Apollo is a relatively new technology, there have definitely been some pros and cons as the team adopts it and learns as it grows.

When I was first searching for answers to issues I had with Apollo, there wasn’t much out there. When you decide to invest in a relatively young technology, it’s harder to find support, even for simple problems. That forces you to look under the hood for yourself, which can be a great way to learn. It also means you get to help build and shape the nascent community and reap the rewards when others begin to see value in the tools you’ve helped to sharpen. For those who don’t know what Apollo is, it’s a single query system to help you run GraphQL at scale in your projects. It establishes a data graph for you to have all of your microservices and clients speak to each other in the exact same way.

It’s kind of hard to explain with just words, so let’s talk through an example. In CodePen’s front-end, in a given component we might want to have data about the current logged-in user. Previously, if we wanted that information, we had to set up either some sort of middleware to handle the calls, or call actions somewhere, or just stick an API call in componentDidMount, and then make sure we make separate calls for all of the different data elements we need. At the very least, we would need to talk to the back-end team to make sure that we get the data in the format that we want. With Apollo, at the top of a component, we can plop this little nugget in here, and it will return the current logged-in user, their ID, and whether or not they’re a CodePen Pro user. The code looks like this:

const SESSION_USER = gql`
  query CreateSessionUser {
    sessionUser {
      id
      pro
    }
  }
`;

Now, let’s say I actually need more data than that, and I need to also get their avatar and their username. Instead of making another query, or contacting the backend team to get that information added to the API endpoint, I can just modify my query:

const SESSION_USER = gql`
  query CreateSessionUser {
    sessionUser {
      id
      pro
      avatar
      username
    }
  }
`;

And voila, I have my data! That’s the power of having a single data graph. If the data is in the graph, you can query for it, and the front end is empowered to take and use that data however you want.

Now, this isn’t meant to be a sales pitch for Apollo. Apollo is awesome, but it’s also new and still getting a foothold in the dev community. Normally, when something new comes out, it’s very fresh and exciting, and if it introduces new concepts for us to work with as developers, it’s a fun new world we get to play with. At least, until we run into a problem with it.

One of the things that I have run into a lot with Apollo is that its error messages leave much to be desired. They have rather generic messages sent to you, so it can be kind of tough to debug if you’re not familiar with it.

So, one day I went over to good ol’ Stack Overflow to try and figure out what was wrong with my component. And, to my shock… there were no answers there. There weren’t even many questions on the topic at all!

Usually, when I ask something on Stack Overflow, I can get a good number of answers within an hour or so. I waited for weeks but got no response. Because I didn’t have an answer readily available, I had to look under the hood and actually get familiar with the code that makes Apollo work. Again, it was a trade-off. It took a lot of time, effort, and frustration.

But, doing it this way taught me a lot. It also helped to demystify the black box that someone else built, to give me the confidence that I could come to understand this tool as well as the creator, no matter how brilliant they seemed from a distance. My Apollo question got a few comments, but didn’t actually get answers for over a month. I ended up answering it myself after several coworkers and I pored over the issue.

Isn’t it funny how you can tell how new or popular a framework is by the number of people who have had problems with it? Vue.js has about 38.5k questions on Stack Overflow right now. React has over 150k of them. Apollo? As of writing this post, less than 5,000 and about a third of those questions are from the past 6 months! It’s good to see that Apollo is picking up speed in the developer community.

Just based on Stack Overflow questions, GitHub Issues and even Twitter threads, you can see that people are getting excited, and sharing what they have trouble with and what they’ve learned.

My action item to you, developer: when you start using a brand new, shiny technology, talk about it! Ask questions, write blog posts, share on social media, and be open about your findings. You never know who you could be helping! And the more you share, the easier it will be for other people to find you and return the favor.

Giving people what they do not need: mild panic

Tue, 30 Jul 2019 00:00:00 GMT

A little while back, I tweeted out an emoji that I made that I lovingly called “Mild Panic” and it went pretty dang viral all over Twitter and Reddit.

After the notifications died down, I thought, “hey, let’s put this emoji on things” and threw up a Redbubble page. It cost me a total of a dollar (plus some time to actually make a higher res version of the emoji) to do so, and I’ve made like… $4 total putting it on products:

It’s silly, it’s dumb, and nobody wants this, but hey, I’m a giver. ;)

A few friends of mine use these sites (plus Threadless and I’m sure there’s others) for side income, and I thought it’d be fun to check it out and see how it works! I don’t know if I’d do it more because it’s definitely more work than it seems to be worth, but it was fun laughing at this face plopped on a variety of products!

I'm going to write for Stack Overflow!

Wed, 10 Jul 2019 00:00:00 GMT

My latest endeavor I’m excited about is that I’m going to start writing for Stack Overflow’s newsletter!

It started because a friend of mine who works at Stack Overflow said that they wanted to re-vamp the blog at the company, and I offered to write a post on occasion. Cue silence for a while on their end, and I figured it fell through and thought nothing of it.

Then, some time later, their Director of Content Marketing reached out and said that he stumbled upon my newsletter, and had an idea to combine the previous blogging idea with another one: to completely overhaul the company’s newsletter!

So, I’ll now be helping write Stack Overflow’s (was quarterly, now monthly) newsletter! It’ll involve sourcing links, writing blurbs, and, I hope, adding jokes amongst the tech. It’s got something like 4 million subscribers, so I’m a little nervous about what that’ll look like, but also very excited.

How I built my CSS Rice Ball Dessert

Fri, 28 Jun 2019 00:00:00 GMT

This week I put together this cute little Pen for the Dessert CodePen challenge!

I’m pleased with it, overall. There were some really funky things I ran into with positioning, but I got to try a few new techniques on this Pen. I used this Dribbble post for art-style inspiration, and ran with it!

Texture

First of all, that texture! I have attached to this post the texture that I used for the entire Pen. I rarely use images in my CSS projects, but I wanted to experiment with multiple backgrounds and thought this would be a fun way to try. Layering the backgrounds involved some variation of these two lines across the whole CSS file:

background:
	url(felt.jpg) (0 0) / (10em 10em),
	[background color behind image];
background-blend-mode: hard-light;

Throughout the CSS you can see that sometimes I have just a plain color for the background color, sometimes I have a radial gradient, and I also change the size of that background as well in those parenthesized parts. Changing the size led to similar (but different!) variations of the pattern, which was fun to play around with.

Clip paths

Another interesting thing that was really fun to work with was the clip paths. Each of those little rice balls have a clip path that cuts off the bottom of them when they’re “in” the syrup, and it animates with @keyframes to move the path around. I almost always use this CSS clip-path tool to start off my paths. It’s a really helpful starting ground and from there I just hand-edited the animations for each of the balls there. I admit I had never animated clip-paths before, and it worked better than I expected!

Animations

Animating all of the different parts involved working on the more subtle things. If you’ll notice, the two non-scooped rice balls bob a little faster than the spoon and the third rice ball move, to make the syrup seem a little more liquid.

The spoon was a funky one where I kind of had to debated if I wanted to change the transform-origin (I ended up not after playing with it), and I wanted it to go straight up and then scoot to the left, to feel like I was more naturally “spooning up” the rice ball. The scooped up rice ball has a few different animations on it, where you can see we’re increasing the eye size and shrinking the mouth as it’s lifted, changing the position with the spoon (which was incredibly manual to do since I had to adjust for both the spoon position and rotation), and then rotating the face slightly to make it look like the ball moved with the spoon. All of these keyframes are at the bottom of the file for you to check out! With the exception of the “bobbing” rice balls, all of the rest are 3 seconds long.

Gradients and overflow quirks

I mentioned this back in previous posts, but for gradients on my Pens, I almost always start by using this CSS Gradient Generator and adjusting from there. This one was no exception, where almost everything was a gradient! Most of my experimentation in this Pen was positioning the radial gradients to make things look more round and natural (the syrup and the spoon in particular were fun to make and layer with everything). Interestingly enough, the rice balls actually are the only things that use just solid backgrounds. I relied on inset box-shadows to give them depth.

And finally, the weirdest part of the Pen: on mobile, I discovered that using overflow: hidden on an absolutely positioned element doesn’t always work! I use that property to make the syrup and the rice balls fit “inside” the bowl. If you look at the .contents class you’ll see how I kind of hacked a transparent mask for those around the bowl’s lip. Luckily I had everything positioned to the window anyway, so I could easily change the absolute positioning to fixed and didn’t have to worry about that breaking everything. I admit I don’t fully understand the issue, but hey, it works!

Anyway, check out the code, let me know if you have questions, and thanks for reading!

I spoke at DinosaurJS and React Loop last week

Wed, 26 Jun 2019 00:00:00 GMT

This past week I spoke at 4 different events, the two big ones being DinosaurJS and React Loop. It was a blast!

Both events were organized really well.

At DinosaurJS, I spoke about building CodePen’s Babel 7 processor. In the talk I went through some code samples, and talked about the steps of setting up a Babel config, navigating the Abstract Syntax Tree, writing tests, and mooore. Speaking of tests, actually, one of the things I learned about Jest is that it is not easy to deal with strings and whitespace when testing for equality, so I built on a Stack Overflow answer a custom whitespace matcher that I stuck in a Gist here for your testing pleasure. :)

At React Loop, I spoke about moving to React at CodePen! The site is a beautiful hodgepodge of different technologies. In the slides, you’ll see a bunch of colored blocks on the site, and a quick key for you is that red is for Ruby on Rails/jQuery, blue is for React/Apollo/GraphQL, and green is for Redux/React. It was a really fun talk to give and I threw in a bunch of jokes too. :)

Anyway, it was a blast speaking at these places, and I’m taking a little break from speaking for a few months! I want to work more on coding+side projects at home, and I’m looking forward to that!

How I built my (mostly) CSS Light Switch Toggle

Wed, 15 May 2019 00:00:00 GMT

Last night I put this little light switch Pen together! I have a power strip under my desk with a switch like this one, and based it on that!

So, first of all, I probably should have done this with an HTML checkbox, and then I could have killed off the JavaScript part. I didn’t feel like dealing with the positioning and hiding of a checkbox (read: I was lazy), so I stuck with a button with a simple click listener. I did the HTML with Pug (read: I was lazy), so it was only a couple words overall in that panel!

Now, the juicy CSS part. This entire switch was basically all gradients and shadows. I based some of the colors on these Dribbble shots:

When I pick a color for a Pen, I use the color picker software Digital Color Meter on Mac! I admit I haven’t found a color picker like it on Windows, very open to suggestions on that. Anyway, with the colors I was picking, I had to make gradients with them. Now, I don’t really like to hand-write all the percentages in a given gradient (read: I am lazy), so I use this gradient generator tool to put them together. For this particular Pen, I was eyeballing a lot of it in this tool, and kind of re-dragging the color handles around until I was happy with them. Along with the actual background gradients, I had some border-image gradients in there for the edges of the switch when it had the “on” class toggled, and moved the background shadows ever so slightly with the class, too.

Also in the “on” class is some fun psuedo-element work! The first one you’ll see is, yet again, adding another gradient. It’s a very light radial gradient to make it glow a little bit when you turn the switch on. I added some low-opacity onto the overall element too to make it not too bright.

The next one was more challenging, and honestly it’s not very visible on large screens (I had a minor panic seeing it on my big monitor thinking I broke everything, realizing the resolution just made it look invisible… very annoying). It’s some very tiny polka dots in an attempt to make the switch look a little more textured. I used this Pen here as a reference for the polka dot pattern, and basically just kept switching around the colors and size until I was happy with it (…on my small monitor).

Besides that, the rest of this was just adding box-shadows for some depth! It was a simple Pen, but a fun little project.

Leaky Bucket

Mon, 13 May 2019 00:00:00 GMT

So, one of my current endeavors (with friends!) is starting a group called Leaky Bucket, where we make things. Our initial idea for it was just so that we could have a little branding if we ever make something together and don’t want to just slap our first and last names on it.

The first thing we needed to really kick this off was a name, and we chose Leaky Bucket! We called it that, first of all, because we wanted it to sound casual, but catchy, and second of all because we wanted it to be somewhat nerdy and there’s an algorithm called the Leaky Bucket algorithm.

The next thing we needed was a social media presence (even if we weren’t active yet). Turns out the name “Leaky Bucket” is a common one for very inactive accounts on the internet. We ended up nabbing @leakybucket on Twitter and Instagram, and @LeakyBucketDesign on Etsy, Facebook, and Twitch. We’re not super active yet, but I’ve been occasionally sticking lasercutting and 3D printing projects on Instagram if you want to check it out and/or give us a follow.

And, of course, we needed a logo next! Cami and Jade (the other Leaky Bucket-ers) and I hung out and drew a few crappy ideas (one of them that ended up being the one I used to make the final logo is here).

After talking it out, I opened up Affinity Designer (I tried using Illustrator but I’m not as good at navigating that one yet) and got to work.

I watched a bunch of Skillshare classes (my favorite being this one) to keep refining the design until we had the image before you! I’ll definitely continue to toy with it, but I’m happy with how it turned out so far.

Initial line version:

Final version:

I made a game called Flapjack Fwop

Sat, 29 Dec 2018 00:00:00 GMT

I made a game I call Flapjack Fwop! Try to get butter on all of the pancakes!

Try it here

I started working on it last night watching Mrs. Maisel and finished it today to Law & Order! It’s my first time using CSS Grid and the new(ish) Web Audio API, too. It’s a harder game than I expected (my best score is in the high 100s), but it was a really fun one to make!

I made the corner banner here on CodePen if you want to see it.

Plus, it’s mobile-friendly, and you can add it to your home screen.

Follow your dreams (literally): How I designed and launched the Official Scrabble Keyboard

Wed, 04 Apr 2018 05:00:00 GMT

This past month, I released a project that I’ve been working on for a while that brought together a major consumer brand and a growing startup to produce a pretty amazing (if I do say so myself), officially licensed collaboration. I wanted to share my story around how I came up with this idea, worked to make it happen while still doing my day job, and what the results looked like.

The project is an officially licensed Scrabble-themed mechanical keyboard, which was made via a combination of my design, Hasbro’s brand, and Massdrop as the seller and manufacturer. Also, there’s just keycaps too, if you want to use/get your own mechanical keyboard and customize it!

I’m full time at Amazon working on Alexa, but in my free time I’m into a bunch of hobbies, especially mechanical keyboards. If you don’t know what they are, or have heard of them and don’t understand the hype, you’re not alone in that. I’ve been evangelizing keyboards wherever I go (seriously) to try and spread the good news. Mechanical keyboards are high-quality, infinitely customizable, functional keyboards. I won’t get into the details now. Livingspeedbump did that though, if you want to know more.

I first designed this keycap set after having a dream (literally, I was asleep and this is what came to me… I have very fun dreams) about typing on a Scrabble board. I mocked it up and played with the colors for a while, and got to “version 1” of the caps.

My original design definitely had the flavors of the final result, as you can see:

I had never designed a real set before, so I knew I had to have some kind of confirmation of interest. But, I realized that if I ever wanted the design to see the light of day, I had to get permission to use it.

And thus began the cold-calling. I emailed and messaged sooo many people on LinkedIn and elsewhere trying to find anyone that would hear me out.

I got plenty of rejections, from both people who couldn’t help me and also people who wouldn’t help me.

One of many messages from people who might know someone who worked at Hasbro:

Some people weren’t open to the idea at all :(

But, eventually, I found someone who had a friend who used to work for Hasbro, who knew someone else who might be helpful. It’s nuts how these connections happen! Luckily, the person I was connected to was an account executive, and he loved the idea. I had to do some back and forth to understand the legal side of things, which is not my specialty.

In another stroke of luck, I had a chance encounter (well, it was not entirely chance… it was at a keyboard meetup) last summer where I got connected to Massdrop, who would be the ideal partner to help me sort out through the legal, manufacturing, and sales piece. They told me that if I could get a license for my idea, they could help me bring it to life. And with months of several emails, signing contracts, and approval from the legal teams on both sides, it finally was starting to look like the Scrabble keyboard would be a reality!

Since signing the dotted line, Massdrop has been awesome. They launch a bunch of products with community designers, and they were really helpful working through the legal pieces, getting keycap samples from the manufacturers, getting mocked-up model images of the keycaps, and they handle the sales and distribution, too.

Having the physical color samples in my hand was one of the most exciting things I’ve gotten to do with this project. It was the first time where it really hit me that the set was happening!

When I initially wanted to put the set together, I wanted to make a keyboard, too. I wanted this set to be able to get into the hands of both Scrabble enthusiasts and keyboard enthusiasts, and supplying more than just keycaps would be key to making that happen. We ended up offering the awesome WASD Keyboards CODE Keyboard for anyone who didn’t have a mechanical keyboard yet, who might want Scrabble on their desk.

And one last thing that I was excited to include was the “Scrabble bag” set for those who might want to play Scrabble with keycaps! It has the exact distribution needed for a regulation game. It’s on the keycap sale page, if you’re interested in getting them!

I’m also working with NovelKeys and StrataKB on a 15x15 “switch tester” Scrabble board so you can play Scrabble on actual mechanical switches. You can get it here!

It’s been a lot of time and emailing and tweaking and hoping it’d work out, and it’s so satisfying to see it finally get out in the world. We’re at almost 1000 sold so far, and we’re just getting started!

If you, your family, or your friends like Scrabble, this is the keyboard for you. I can’t wait to see it on your desk!

Thanks for reading!

Building todometer: a meter-based to-do list

Sun, 30 Apr 2017 05:00:00 GMT

After a bunch of on and off development, I finally finished a side project I’ve been wanting to do for years.

In general, I love completing things. If I am playing a phone game where each level gives you X number of stars, I will make sure I get every single one. If I’m working on a project using test-driven development, I am not happy until every single test passes and I see that awesome green “all tests pass”. I wanted a to-do list that gave me that same level of satisfaction.

Thus, todometer was born! It’s a meter-based to-do list. As you complete your tasks, you fill a progress bar. If you are putting off a task, it still fills the progress bar, just in a different color. All about positive reinforcement. ;)

Building todometer was a LONG process. I’ve started and stopped development for at least 2 years now. Finally, enough was enough and I got down to it.

Before building anything, I sketched up what I wanted the app to look like. After getting a general idea in my notebook, I opened up Sketch (which I’m still learning, but hey, practice!) and kept messing with color schemes and sizes and fonts until I got what I wanted.

Yes, that’s right, I designed this back in January. It’s been a long trip.

Anyway. One thing I do want to point out is that I don’t normally design things first (I just kind of wing it), but I definitely will be from now on. Having rules to follow helps a TON when coding up the CSS.

I knew I wanted it to be a desktop app, and my main language I use regularly is JavaScript. So, the obvious choice for me was Electron. Setting that up was easy enough, thanks to its demo projects online.

My favorite framework is React, so I got to building. I used Moment.js for the date info, react-progressbar.js for the progress bars (these involved an annoying amount of math because of how the library works, but I’m not going to get into it for my own sanity), and just regular React components for the list of items, and for each item. I did the styling with LESS, mostly for the nesting and variables.

After working on this and getting everything mostly functional in React, I realized that the app would work best if I could make the app “reset” when the day ended (moving the paused items to the uncompleted list, and resetting the progress bar). But, because the date and the list components were unrelated, I had a decision to make: Do I restructure the app so that the state is in the parent component, and everything changed is passed via props, OR do I add Redux to the app to have a global store I can keep track of?

I chose Redux. Mostly because I didn’t know Redux.

Guess what? Redux is hard. But, with the help of my redux-pro friend Dan Park, I was able to wrap my mind around the mythical concepts of actions and reducers. The app was COMPLETELY restructured (seriously, if you go stalk the commit history, you’ll see some crazy things at that point), and honestly it worked much better. Adding Redux also made persisting app state with local storage super easy too (literally only took two functions, it’s beautiful). That “reset” function I wanted was an easy call with it, and the app reset on a new date. It was perfect. Except: the app didn’t do it automatically. I had to manually refresh it to make that work.

The automatic resetting on the new date was hard. I couldn’t figure out how to make a date tracker “live” within React. I could set a timer until midnight, but would it live in componentWillMount, or componentDidMount, or somewhere in Redux? That’s when I had a eureka moment: I would have Electron keep track of it at the desktop-level, and refresh the body at midnight!

It worked.

I cried.

Not kidding.

Anyway, after tweaking Electron details to make the app stay open when you close it, and having the proper metadata for installation, it was time to release.

I whipped up a quick “marketing” site, and today, I released it into the wind metaphorically.

And now, I look to you. Check it out! File an issue! Star the repo! Give me opinions! Or not, I’m not your mother!

cassidoo.github.io/todometer

Building My S60-X Keyboard

Sun, 01 Jan 2017 00:00:00 GMT

HELLO. I’m so excited to share my build log of my first custom mechanical keyboard!

So, way back in August 2016, I joined a group buy of a new keyboard from Sentraq, called the S60-X. It’s a 60% keyboard, which means it has about 60% of the keys of a fullsize 104-key keyboard. It doesn’t have the normal function row nor the arrow keys. Which will be made up for via keyboard layers. I’ll get more into that later.

So, first I’ll talk about building the board!

First, the unboxing! Inside the box was Gateron Green switches (I wanted some that were both clicky and tactile), switch stabilizers, a PCB, a back plate, a front plate, LEDs, and feet. There were also some blank keycaps (that I didn’t end up using, but were nice to have).

The first step was to add the switches to the front plate.

Once the switches were mostly added, I had to put together and add the stabilizers. That part was SO frustrating. This build guide completely saved my sanity in figuring out how to put them together. The stabilizers are for the wider keys, so that they are, you guessed it, stable when used.

After adding all of the switches and stabilizers, it was soldering time. I had never actually soldered anything before, but luckily my boothang Joe did. Conveniently, the PCB lined up with the front plate switches perfectly, so it was just a matter of lining up the holes with the pins in the switches. The LEDs also fit well too:

After soldering, we tested the PCB by just plugging it in to make sure it detected everything. It didn’t get the Backspace button which resulted in us re-soldering it, which we later found out was a firmware issue. Whoops.

But hey look, the backlights worked!

Anyway, once the soldering was done, it was time to put the case on!

And now, my favorite part, it was keycap time. I bought a DSA Overcast keycap set from a Redditor. DSA refers to the profile of the keycap, but I’ll save you the explanation of the different types.

But, as I added the keycaps, I realized that the Redditor didn’t send me a whole set! I was missing the letter I key. Conveniently though, I did also buy some fun lime green keys, so I added a bomb key on the letter I. Because I am the bomb.

And DONE. At least with the hardware part. Now I had to program the board. This part came with pretty much zero instruction, so it was a combination of a LOT of sources that it came together. Because there wasn’t a central source, let this blog serve you as the central source of all of the information I found!

So first, I tried Windows with Atmel FLIP, and just flashing some default firmware to start. My computer was NOT working with that method. It worked on Joe’s computer, though, which is weird.

As a result I got frustrated and tried OS X instead, and that worked! The software I needed was dfu-programmer, and QMK Firmware. Here’s what I did to install things step-by-step:

    $ brew install dfu-programmer
    $ brew tap osx-cross/avr
    $ brew install avr-libc
    $ git clone

Easy peasy. Now I went into the qmk_firmware folder, then into keyboards, and there you can use one of two folders, either /S60RGB, or /s60-x. I honestly can’t tell you the difference between them. LOL. Anyway. In that folder, copy the keymap.c file into another folder in the /keymaps directory. I just called it custom.

Now it’s editing time! All the keycodes you might want are on this page. All the keycodes EXCEPT the LEDs. I’ll get to that in a second.

You can go to /keymaps/custom (or whatever you named your folder) and edit keymap.c. My changes were minor, in the second layer (which is toggled via my Function key with which I replaced Caps Lock) I made HJKL the arrow keys (because I use vim and vim is great), M for Mute, and < and > for volumes down and up.

Now not listed in the keycode link I listed above are the keycodes for the LEDs and the backlight. They are RGB_TOG, RGB_MOD, RGB_HUI, RGB_HUD, RGB_SAI, RGB_SAD, RGB_VAI, and RGB_VAD. I ended up making my numbers on the second layer all of these. In case you want to see what I did, here you go:

    [_BL] = KEYMAP(
      F(0),    KC_1,   KC_2,   KC_3,   KC_4,   KC_5,   KC_6,   KC_7,   KC_8,   KC_9,   KC_0,   KC_MINS,  KC_EQL,   KC_DEL, KC_BSPC, \
      KC_TAB,  KC_Q,   KC_W,   KC_E,   KC_R,   KC_T,   KC_Y,   KC_U,   KC_I,   KC_O,   KC_P,   KC_LBRC,  KC_RBRC,  KC_BSLS, \
      MO(_FL),   KC_A,   KC_S,   KC_D,   KC_F,   KC_G,   KC_H,   KC_J,   KC_K,   KC_L,   KC_SCLN,KC_QUOT,            KC_ENT,  \
      KC_LSFT,         KC_Z,   KC_X,   KC_C,   KC_V,   KC_B,   KC_N,   KC_M,   KC_COMM,KC_DOT, KC_SLSH,            KC_RSFT,  \
      KC_LCTL, KC_LGUI,KC_LALT,          KC_SPC,                                        KC_RALT,  KC_RGUI, MO(_FL),  KC_RCTL),

    [_FL] = KEYMAP(
      KC_GRV, RGB_TOG, RGB_MOD, RGB_HUI, RGB_SAI, RGB_SAD, RGB_VAI, RGB_VAD, BL_TOGG, BL_DEC, BL_INC, BL_STEP, KC_TRNS, RESET, KC_TRNS,  \
      KC_TRNS,KC_TRNS,KC_TRNS,  KC_TRNS,KC_TRNS,KC_TRNS, KC_TRNS,KC_TRNS,KC_TRNS, KC_TRNS,   KC_TRNS,   BL_DEC,   BL_INC,   BL_TOGG, \
      KC_TRNS,KC_TRNS,KC_TRNS,KC_TRNS,KC_TRNS,KC_TRNS,KC_LEFT,KC_DOWN,KC_UP, KC_RIGHT, KC_TRNS,    KC_TRNS,              KC_TRNS, \
      KC_TRNS, KC_TRNS,  KC_TRNS,  KC_TRNS,  KC_TRNS,  KC_TRNS,  BL_TOGG,  KC_MUTE, KC_VOLD, KC_VOLU, KC_TRNS, KC_TRNS,  \
      KC_TRNS,KC_TRNS,KC_TRNS,          KC_TRNS,                               KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS),
    };

Thanks so much /u/MaltMilchek for the help here!

Now, once all of the keycodes were put in, I saved keymaps.c and went to the enclosing folder with the Makefile in it, and ran:

    $ make custom

If you named your folder something besides custom, do that instead.

Now, to actually flash the firmware, go to the parent /qmk_firmware folder, and go to the /.build folder there. Press the reset button on the back of the keyboard for about 3 seconds, and then in the terminal run:

    $ dfu-programmer atmega32u4 erase
    $ dfu-programmer atmega32u4 flash S60RGBcustom.hex

Your file might be named something else other than S60RGBcustom.hex, but just make sure that it’s a .hex file.

Now unplug and replug the keyboard, and you’re all set!

This process took me SO LONG, so hopefully this might be helpful for you.

Here’s the final shot of my board!

It was a BLAST putting this together. Definitely frustrating at times, but I’m super happy with the final product. Plus with the configuration above, I’m able to toggle through different colors and change up the keycaps to match. RIP wallet.

Thanks to everyone at /r/MechanicalKeyboards for being so helpful! Hopefully this will be useful to someone, too. :)

L4 Digital: First Impressions

Fri, 02 Dec 2016 00:00:00 GMT

Hello, world!

This week was my first at L4 Digital. I came in as a new Seattleite, nervous and excited to see what this new gig would be like, and boy, was I impressed!

On Monday, I officially joined and started setting up my computer and meeting people. It was all sorts of HR-type stuff, filling out forms and getting an office tour. The office is wonderful. The building dates back to 1893, and inside there’s classic elements like exposed brick and beamed ceilings surrounding the glass conference rooms and seas of monitors and gadgets. One of the rooms is dedicated entirely to foosball (there was a team of people who even built a live scoreboard with bluetooth button score tracking and a Slack integration for it), and there’s another room with various video games and a 3D printer that anyone can use! One thing that I also really appreciated was L4’s “phone museum” that is chock-full of old and new devices. The Director of Engineering, Ben, told me about how difficult it was to program for those old Palm Pilots and Samsung flip phones. I can only imagine!

On Tuesday and Wednesday, I got more integrated into the team. I was put on a project and started configuring my computer for some exciting dev work. While doing so I ended up open sourcing my vim configuration files, so anyone can get up and running with vim quickly: https://github.com/cassidoo/vim-up

Now Thursday was a special day (not that all days at L4 aren’t). Every first Thursday of the month, L4 has what they call “First Thursdays”, which involves a company-wide meeting of updates, project demos, and introductions. We talked about our new parent company, Globant, as well as a bunch of fun and interesting internal projects. L4 has something called “L4ge” where people can work on projects with people outside of their teams. Some of those projects included an Alexa receptionist, and a full-on classic arcade cabinet! After the meeting, everyone headed to a company happy hour nearby, where I got to meet more coworkers and be social with everyone.

Finally, Friday, I got to dive into code! My machine was finally all set up, so I made my first pull requests in the codebase. I also got to play some Super Smash Brothers, watch a pushup contest (I politely declined participating when the first person did over 50 of them), join a book club, learn how to use the 3D printer, and try out some of the great office snacks. Not bad for a Friday.

So, the first week is up! L4 has made a great first impression on me. I’m so excited to be a part of a creative, exciting group of people. Everyone has such a diverse set of interests, and they really emphasize celebrating those here. I know I made the right choice joining a team like L4, and I’m eagerly anticipating Monday!

Writing Practice: The Agua Caliente Airport

Wed, 02 Nov 2016 00:00:00 GMT

As I go through my old notes on my computer I found this old writing exercise I did that I highly recommend. You go to Wikipedia, hit the “Random” button, and you just write. For this one I decided to go the dramatic first-person route, and my topic was the Agua Caliente Airport. I had a ton of fun with it, hope you enjoy!

I sat there, alone, waiting, at the Agua Caliente airport. I’d been there for a couple hours, and still nothing had happened. I was hoping he’d be here by now.

I thought back to the times where we would camp in the area, suns at our backs, on our way down to the hot springs, just enjoying the park. We’d check out the outdoor movie theater, even when it wasn’t showing anything. We’d laugh and enjoy each other’s company, having conversations that would last for hours. But that was a long time ago, back when planes were actually based in the area, and when we were actually happy.

I checked my watch. 3 hours. I was getting impatient. I started pacing around the empty terminal, looking at the old chairs and the antique documents on the walls.

Suddenly, I hear a voice behind me.

“I thought I’d find you here.”

There he was. Exactly as I remembered. Older, perhaps, but just as confident-looking, with smile lines around his eyes.

“Of course I’m here,” I replied, “I’ve been waiting for you.”

“You have to stop waiting for me. You know why I left.” He opened the door and ushered me toward it, but I refused.

“I don’t know why. You never said. You had that cough and you left, and you never came back.”

“There was more to it than that,” he said, “you know there was.”

I looked at him, hurt.

“I was joking, you had to know that.”

“It wasn’t about me,” he murmured, looking out into the San Diego County sun, “when you said to my mother on the phone that I was terminally ill, you knew she wouldn’t get the pun. You ruined her. You ruined us.”

I sat down, realizing that I was stuck here. I’d always be in hot water with him. I’d always be in Agua Caliente.

Okay I know it’s stupid. But I had fun with it. :)

Subconscious Learning

Wed, 16 Mar 2016 00:00:00 GMT

One of the things I’ve done lately is try to passively learn Morse code. I added a bunch of custom vibrations for each letter of the alphabet to my phone, and when I add someone to my contact book, I assign them the custom vibration. So, as people text or call me, I’m slowly but surely learning Morse code because of their names. Now I definitely know some letters, like J and C, a lot more than others like Q or V. But hey, it’s something!

When a person is stressed, they use both their conscious memory and their subconscious memory to compensate for all of the stress. The switch from totally conscious learning to conscious+subconscious learning is triggered by mineralocorticoid receptors, which are released in response to stress. The switches are controlled by the amygdala, the part of the brain that’s responsible for both memory and emotional reactions. There’s a really interesting study by Schwabe, Tegenthoff, and Hoffken that talks about this. You can read it here. So, it turns out that when I said that I “operate well under stress” in college, I wasn’t actually making that up!

There’s probably a lot more to learn about subconscious learning. Please feel free to send me anything you’ve found on the subject!

Pure CSS3 Text Carousel

Fri, 04 Mar 2016 00:00:00 GMT

Recently while building a pretty typical static site, I found the need to have some quotes scrolling through a page. Classic job for a carousel. After doing some hunting online though, almost all carousels either used jQuery or Bootstrap as a dependency, and/or just had some really nasty CSS. And, also, I only found ONE carousel in all my hunting that was just for text, not for pictures.

So, it came time to act. AKA build it myself.

This is the result I came up with. It’s a little hacky, but it’s pure CSS3 and is perfect for quotes, if I do say so myself:

See the Pen Pure CSS3 Text Carousel by Cassidy Williams (@cassidoo) on CodePen.

The code isn’t too crazy, if you read it out. The first thing I had to add in the HTML was the wrappers for the quotes. The <div> tags for content-slider, slider, and mask (let’s call these the Trio of Mystery) were all purely for the actual box holding the quotes and making sure that they disappeared when they “faded away” (I use quotes because of how it’s written, you’ll see).

Then you see that there’s an unordered list, where each <li> has an animation class and contains a quote and its source. This is probably the most straightforward part of the code.

Now let’s get crazy.

So in the CSS you’ll see basic body stuff, and then the Trio of Mystery. Like I said before, pretty straightforward, just creates a container and a mask that makes innocent <div>s like you disappear. Now, you’ll notice a little further down that the .slider li section has something a little gross in there. This is where things get hard-coded.

height: 320px;
position: absolute;
top: -325px;

Here, you’ll notice that the <li> are being set at a height and positioned 325px above their normal position. That’s because the container is set at 320px high. The top part could have had -321px and it would have been fine. This is how the Trio of Mystery gets away with hiding its stowaways.

If you look after this section, you’ll get to the animations. Now, this is the part that would have been very, very significantly improved had I used a CSS preprocessor. There’s a LOT of repetition here, and a lot of things hard-coded for 5 quotes (no more, no less). The way each animation works is that each quote is hidden at -325px (just out of sight, again, thanks to the Trio of Mystery), and then when it’s that quote’s turn, it scrolls into view at 100% opacity, and after 3 seconds, it fades (when really, its position is just moving at the same time as the opacity is lowered to zero). Because each of the animations last the same amount of time and goes in one direction (15s linear infinite), we just break up the 100% into approximately fifths so that the quotes can be spread out (the first one “exiting” at 20%, the next at around 40%, etc).

But alas, what now?

Honestly, this works for what my original needs were. But, this mini-project could DEFINITELY be improved. Some of my ideas for a next time:

Use a pre-processor
Save CSS variables for the number of quotes that exist
Generate HTML code based on the number of quotes
Divide the percentages for the animations based on the number of quotes

Until next time!

Closures in JavaScript

Thu, 25 Feb 2016 00:00:00 GMT

JavaScript closures are a pretty essential concept to know if you’re a JS dev. But, sadly, if you were to ask the average junior developer what they are, more often than not you won’t get a solid answer. I’m writing this so that YOU can be the knowledge bomb-dropper in the room. Let’s do this.

Okay so the quick summary of a closure is that from an inner function, it gives you access to an outer function’s scope. So essentially, you can create private variables. In JavaScript. Whoa.

Moving backwards a bit, JS has both local and global variables. A local variable looks something like this (see magic):

function yolo() {
  var magic = 3.14;
  return magic;
}

And a global variable looks something like this (again, see magic):

var magic = 3.14;
function yolo() {
  return magic;
}

So global variables live forever (or as long as your window/website is open), and local variables are created when the function is invoked and deleted when the function has finished up. But if you have a variable that you want available to all of your functions, you might run into some security issues. Because if you use a global variable, it’s not only accessible to all of your functions in your JS, but it’s also available to any scripts that might be executed on your site.

There has to be a better way.

Oh wait, that’s the whole point of this blog post.

Closures!

Closures are the primary way to have data privacy in your JavaScript. A super duper basic example of this is a simple iterator, where every time you call iterate(), a counter is increased by 1.

function iterate() {
  var count = 0;
  return function () {
    return (count += 1);
  };
}

So to run that function, you’d run the following lines and get the shown output:

> var x = iterate();
> x();
1
> x();
2
> x();
3

…and so forth. It looks a little funny, but it’s because iterate() has become a closure. It consists of the local variable count, and the returned function.

You’ll see a lot of closures if you do functional programming in JavaScript (and along the same lines, currying), and also a lot in event handlers, in callbacks, and also just when you’re coding or reading code in JS that involve data privacy. Definitely try messing with them if you haven’t yet. It’ll be super helpful for you in the long run.

Messing with Sketch Club

Mon, 22 Feb 2016 00:00:00 GMT

So a little while back I got the app Sketch Club, but I never really did anything with it besides using it to annotate photos.

But recently, I decided to stop playing games on the subway and instead try my hand at drawing instead. My conclusion: Sketch Club is AWESOME. It handles different brushes, layers, layer styles, recordings of drawings, and it’s constantly being updated!

I personally like drawing cartoony-style doodles, here’s a couple that I did recently:

(If you play the game Neko Atsume, you’ll understand the inspiration behind this one)

I still have to improve myself on shading and drawing things other than animals that seem destructive. But hey, it’s a great stress reliever, and it’s a fun way to feel productive on the way to work. :)

5 applications of linear regression that will drive him crazy

Mon, 16 Nov 2015 00:00:00 GMT

Push these sexy applications in his mind to spice things up and drive him nuts

Everyone knows that linear regression is an approach for modeling the relationship between a scalar dependent variable y and one or more explanatory variables denoted X. But as you more vigorously apply these concepts and analyses to your everyday life, how do you keep up your own relationship with your man?

Studies show that whispering specific different applications of linear regression models will keep him begging for more. So keep your man fired up with these sexy tidbits.

Trend Lines

A trend line represents the long-term movement in time series data after other components have been accounted for. It tells whether a particular data set (say GDP, oil prices or stock prices) have increased or decreased over the period of time. A trend line could simply be drawn by eye through a set of data points, but more properly their position and slope is calculated using statistical techniques, like, you guessed it. linear regression. Just try to keep him off of you after telling him this.

Epidemiology

Early evidence relating smoking to mortality and morbidity came from observational studies employing regression analysis. In order to reduce spurious correlations when analyzing observational data, researchers usually include several variables in their regression models in addition to the variable of primary interest. For example, suppose we have a regression model in which cigarette smoking is the independent variable of interest, and the dependent variable is lifespan measured in years. Researchers might include socio-economic status as an additional independent variable, to ensure that any observed effect of smoking on lifespan is not due to some effect of education or income. However, it is never possible to include all possible confounding variables in an empirical analysis. Hint: Really emphasize how impossible these confounding variables are. He’ll never want to let you go!

Finance

The capital asset pricing model:

…uses linear regression as well as the concept of beta for analyzing and quantifying the systematic risk of an investment. This comes directly from the beta coefficient of the linear regression model that relates the return on the investment to the return on all risky assets. The point is to be playful and work him into a desire-filled frenzy by not giving him exactly what he wants (a lower measure of the risk arising from exposure to general market movements as opposed to idiosyncratic factors)!

Econometrics

Linear regression is the predominant empirical tool in economics. In modern econometrics, other statistical tools are frequently used, but linear regression is still the most frequently used starting point for an analysis. Estimating a linear regression on two variables can be visualized as fitting a line through data points representing paired values of the independent and dependent variables. Mention Okun’s Law here and he’ll be wondering, “wow, how’d she do that?”

Environmental Science

Linear regression finds application in a wide range of environmental science applications. In Canada, the Environmental Effects Monitoring Program uses statistical analyses on fish and benthic surveys to measure the effects of pulp mill or metal mine effluent on the aquatic ecosystem. After you tell him this, he’ll crave you so much that he won’t know what he did to deserve you.

Driving your boyfriend crazy with linear regression application examples is a guaranteed way to make your relationship more fun, dynamic, and sexy. If you want to drive your man wild and to make him want you even more, you have to be bold, adventurous, and sexy, and to remember to keep things feeling exciting and fresh by telling him all the exotic ways that these applications can be applied.

Go get ‘em, sister.

Adding Keyboard Shortcuts to your React Apps

Mon, 03 Aug 2015 00:00:00 GMT

I love working with React. And I love cool keyboard shortcuts. Luckily, the Mousetrap keyboard shortcut library works really well with React. Hot.

So, first you obvi have to install the two. Just use handy npm to do that, and call:

> npm install react
> npm install mousetrap

Dang. That was so easy. This is crazy.

Now that you’ve done that, go ahead and build your React app as usual. Now, let’s say that you have a super awesome component (called <SuperAwesomeComponent>), and you want to call a function letFishFly in that component’s class whenever someone hits ”* k”, “ctrl+r”, or the Konami Code. Because you feel like it.

It’s so easy to add now! In your component, you just have to bind the Mousetrap command to letFishFly in the componentWillMount function, and unbind it in componentWillUnmount.

    componentDidMount() {
      Mousetrap.bind(['* k', 'ctrl+r', `up up down down left right left right b a enter`], letFishFly);
    }
    componentWillUnmount() {
      Mousetrap.unbind(['* k', 'ctrl+r', `up up down down left right left right b a enter`], letFishFly);
    }

Oh my word. That’s it. You have keyboard commands set up in React. Congratulations.

Until next time! :)

Making the Whitney Houston API

Sun, 26 Jul 2015 00:00:00 GMT

I’m a Whitney Houston fan. Anyone who’s known me for more than a moment in time would know that (see, making references already, agh I’m so funny).

Anyway, I took a nap the other day and I dreamt that I made a Whitney Houston API. So obviously I had to make one.

But, I had never made an API from scratch before. I had nothing. But I had to try.

First, I had to get all of the songs she ever recorded. Wikipedia came to save the day. I scraped the article of all of her songs with a Python script, and then got to work on parsing it. Let me tell you, it was not fun. The HTML in Wikipedia tables is a pain in the BUTT to deal with. Sure, I could do it, but I wouldn’t wish that mess on anyone. So, I said to myself, it’s not right, but it’s okay, I’ll get through this. Once I filtered out a lot of crap (like stripping out the links and the special characters) and broke it down into something readable, it looked more like this:

    "Could I Have This Kiss Forever"
    Whitney Houston and Enrique Iglesias
    Diane Warren
    Whitney: The Greatest Hits and Enrique
    2000
    |-

So, it had the title of each song, the artists who sang (most of these were just Whitney), the writer(s), the albums on which the song appeared, and the year it was released. And the weird |- delimiter between them.

The next stop was to convert all of this to JSON. I was all, “I look to you” to JSON API and Stack Overflow at this point so I could make sure I was formatting everything properly. Some kind folks helped me refactor my original script I wrote into this efficient one here:

    from itertools import groupby
    import json
    names = ["title", "artist","writer","album", "year"]

    with open("test.csv") as f, open("out.json","w") as out:
        grouped = groupby(map(str.rstrip,f), key=lambda x: x.startswith("|-"))
            for k,v in grouped:
                    if not k:
                                json.dump(dict(zip(names,v)),out)
                                            out.write("\n")

Thanks so much to Padraic Cunningham for the assistance with this one. I really wanted to make a reference to the song, Same Script, Different Cast just because of the excellent pun but the show must go on.

Anyway.

I finally had some clean JSON that I could work with!

At this point, I was doing a TON of research into how to actually make an API just from JSON. I didn’t want anything fancy like a database or anything, because I figured just a GET would do for this project. After asking plenty of questions here and there and starting and restarting and asking myself why does it hurt so bad to just do something simple, I found Instant API! It was a great solution, and seemed pretty extensible.

After tweaking and adding some functionality of my own (like an /all/album route for example, for each of the groups), I had it! My first API. Sure, it’s not perfect, and I’d like to add in functionality for lyrics and other queries, but for now, I’m celebrating! I learned from the best people on Stack Overflow and in various Facebook groups, so thanks to all of those who helped me understand all of this!

Here’s a link to the Whitney Houston API. Again, it’s still a work in progress, but it’s been fun so far!

Picking your brain: Cold call email etiquette

Mon, 20 Jul 2015 00:00:00 GMT

I love meeting with people. Coffee chats with different people is so fun!

But, unfortunately, I don’t scale well. After talking with my friend Rebecca Garcia, I realized I wasn’t alone in this. As you get more involved with work and the community, a coffee chat isn’t just a one-off, it’s a constant stream of requests.

I’ve slowly gotten better at handling them, I use Assistant.to to schedule things and try to only meet with people a max of twice a week, but that’s created quite the backlog.

So, this is a post for you, the meeting requester, and for the benefit of you and myself/anyone busy to whom you might be reaching out. This is how to ask a busy person for a coffee chat.

1. Be specific.

Don’t just email someone saying, “Hey, I saw you once, and I’d like to pick your brain! I’m free tomorrow.”

I don’t know what you mean.

You could want to literally pick pieces of their brain out for all I know. Not to be dramatic. But you didn’t specify.

Make sure you say how you met the person you’re contacting, and why you’re contacting them. Simple stuff. Big impact.

2. Be flexible.

You’re asking the person to meet you and take time out of their day. So, you should work with their schedule! Give them several options, let them pick a location (or pick one that’s convenient for them), give them an out, and don’t be sad if they aren’t able to meet with you for a while (if at all).

At that point, just email them your questions or whatever, and have hope that they’ll email you back!

3. Don’t be afraid to ping them if they haven’t gotten back to you in a week.

If someone emails me for a nonspecific coffee chat and I have a bunch of other emails that day, I might not get back to them for a while. I personally really appreciate pings. It’s a friendly reminder, and it puts you back on someone’s radar. Now, if the busy person doesn’t get back to you after a couple pings, don’t fret, and again, don’t be sad. They’re busy for a reason! There’s plenty of other fish in the sea. And people in the world, if fish isn’t your thing.

4. Be prepared.

If you’re nonspecific in your email, that can be frustrating for a busy person among their mass amounts of meet up requests. Outside of being specific, be prepared. If they reply back with questions about what you mean, or with details, be ready to give that information up right away. This is both for your benefit and theirs, because you want to get the most out of it, and they want to give relevant, efficient information and advice!

That’s it.

A much better email is something like, “hey, I’m interested in how you got to where you are today. I’m a ____ at ____, I met you at/read about you in ____ and I just have a few questions about what classes I should take/which role I should follow/how I should format my resume. Could we meet for coffee? My treat! I’m pretty free over the next few weeks, Tuesdays and Thursdays are best! I know you’re a busy bee, so I can work around your schedule. Let me know, and see you soon.”

This is clear, it gives options for dates, it gives an out, and it lets the person know what you want from them. If I got this email, I would meet with you.

Good luck!

One year at Venmo

Mon, 13 Jul 2015 00:00:00 GMT

My goodness, I’ve been at Venmo for a year now. It’s a little mind-blowing! I still feel like I just got here, and at the same time, I feel like I’ve been here forever.

I keep this private journal (check out Dabble.me, it’s awesome), and it’s so funny reading my posts from a year ago.

Today was my first full day of work! I admit I’m pretty intimidated by what lies ahead. I’ll be working with languages I don’t really know, and I’m using technologies I’m not familiar with. I hope I can learn quickly and show them what I can do!

As I read through some of them, during my first few months I was just so worried about my performance. I was convinced that I wasn’t going anything right.

And then, in November, something just clicked. I worked at a hackathon and had a really productive week, and one of my entries simply reads:

I have a sudden motivation to really stand out and be a leader at Venmo.

Almost all of my posts after this one about work are so positive! I didn’t realize there was a shift then, but now I can see it over time. Ever since this post, I’ve been loving my work more and more. I’m getting to work on some cool projects, with some truly wonderful people, and I feel like the company is doing really well.

I love working at Venmo. I’m looking forward to helping the team grow and thrive, and I can’t wait until the day Venmo can be used for any payment in the world.

And who knows? Maybe, someday, I will get to lead something big at Venmo. Only time will tell. :)

A Brief History of the PNG

Mon, 15 Jun 2015 00:00:00 GMT

I remember clear as day several years ago (2007 to be more exact) when transparent PNGs (Portable Network Graphics) became a reality. I was pretty young, at 15 years old, and I was checking out this web design/development forum I regularly looked at for help as I was teaching myself to code.

I logged on, and the site was UGLY. I was so confused. They had pictures of what could have been beautiful icons and graphics, but they all just had these horrible off-color borders and backgrounds.

There was a banner at the top that told me to download Internet Explorer 7, and my life changed. The transparent PNG. Everything was beautiful and shiny. You could have a multi-color background and an image on top of that, and it wouldn’t have to line up perfectly to line up with the background.

Now, later, I found out that Microsoft had this whole alpha channel transparency deal figured out since IE5.5, with a proprietary filter called AlphaImageLoader. You could add this chunk of CSS and be all set:

img {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

But, back then, there was no filter property in CSS. It was a totally proprietary extension by Microsoft that only worked in IE. And there were so many bugs with it back then, it was beautiful. If you used a PNG background image, links wouldn’t often be clickable, and forms might have become unfocusable. It was slow to load. Background images couldn’t be positioned nor repeated. Ah, the past. So broken. So delightful.

The PNG was first specified in October of 1996, and became an official international standard in November of 2003. There was a period of time though when it wasn’t so popular. Fast forward to now, and the PNG is the most used lossless image compression format on the internet. It was originally created to be a replacement of the GIF, but alas, you can’t replace this:

PNG was decided early on to be a single-image format. The developers of PNG tried to change that in 2001 (again, to compete with the GIF) by making the MNG (Multiple-image Network Graphics), but that never took off. Mozilla also tried by making the APNG (Animated Portable Network Graphics) in 2008, but that never really caught on, either.

Outside of animation, though, the PNG excels relative to the GIF. A PNG file with the same information as a GIF is almost always smaller, by as much as 50%. Dang, son.

The PNG today is great. It supports grayscale, transparency, palette-based images, non-palette-based RGB[A] images, and it’s lossless. There’s whole books dedicated to how revolutionary it was back in the day.

So take some time, read up about it, and appreciate history, darn it.

The CSS Image Values Spec

Sun, 07 Jun 2015 00:00:00 GMT

I started looking at the CSS Image Values Specification recently and was fascinated by it, particularly the image rendering section.

Say you take a small image sprite, like one that you would use in a video game:

Now, when you decide to blow this picture up, something happens that’s not totally unexpected.

It’s all blurry and gross. As we expect.

But, there’s a better way to deal with it. Add the following into your CSS:

.image-class {
  /* Firefox */
  image-rendering: -moz-crisp-edges;

  /* Safari */
  image-rendering: -webkit-optimize-contrast;

  /* IE */
  -ms-interpolation-mode: nearest-neighbor;

  /* Everything Else */
  image-rendering: pixelated;
}

Yes, it’s a lot for one effect, but hey. It’s cross-browser.

Now check out your glorious image!

Whoa! Beautiful! So let’s dig into this. Why are there SO many different values? Well, put simply, each browser just hasn’t hit standard yet. But, it’s coming. The CSS Image Values spec is still being constantly updated and reviewed. It only just recently consolidated all of these values (crisp-edges, optimize-contrast, nearest-neighbor, and pixelated) by officially standardizing image-rendering to have either pixelated, crisp-edges, or auto as its values. As you can see in the example on the spec website, auto and crisp-edges have their own uses, but pixelated is best for this pixel art example.

One thing that will be interesting to look out for moving forward is the Microsoft Edge browser. They’re slowly phasing out all of the -ms prefixes, so I’m personally curious to see it they’re going to use the standard and use image-rendering: pixelated or if they’re going to stick to the nearest-neighbor idea. Only time will tell.

Enjoy making giant pixelated images, until next time!

Finding a Mentor

Sat, 06 Jun 2015 00:00:00 GMT

I feel like I see a, “how do I find a mentor?” post or an email asking about mentorship twice a week at the very least.

I wrote this to answer those questions.

Finding a mentor isn’t some magical moment where you meet and someone puts their hand on your head saying, “I will mentor you, my child.”

Finding a mentor is really just a matter of keeping communication lines open. Once you meet someone, continue talking and building a relationship with them. There’s so many ways to do this. Go to a meetup, chat with people in forums or Facebook groups, have a coffee chat, video chat someone, email someone (as if they’re your pen pal, not like a cover letter).

What you should look for in a mentor

Someone who wants a mentee. Sometimes, you won’t get a reply to that email asking for coffee. Sometimes, people won’t chat with you. That’s okay. You want someone who wants the relationship.
Someone you can be friends with. Your mentor isn’t just someone you suck advice from. You should enjoy your relationship with them, they should be someone around whom you can be yourself. If you have a very formal, not really comfortable relationship, you won’t be able to easily converse with each other to get the guidance for which you’re seeking.
Someone who doesn’t compete with you. You want someone that can help celebrate your accomplishments, not feel threatened by them.
Someone who drives you to succeed. A good mentor will be someone who can push you to be the best that you can be, even if it’s just by finding someone else that can answer your questions, or by just being a good role model.

How to be a good mentee

Don’t just suck information out of your mentor. Nobody likes someone who is just in it for themselves, who is selfish with their information. Build a relationship that’s give and take with your mentor, don’t just email them once a month with your latest problem.
Lift as you climb. As you move up with your career, help people who are like you who could use your own advice. A great mentee gives back.
Accept things your mentor tells you, even if it’s not what you want to hear. Sometimes it’s hard to absorb frank feedback. But, it’s necessary to do so if you really want to internalize the information you’re getting. Sometimes things don’t go the way you want, and sometimes you just want to be further along, like your mentor. It can be frustrating sometimes when things don’t go your way, but trust the advice you get. Sure, that doesn’t mean you have to follow all of it, but trust that it’s coming from someone who cares.

Thank you to my mentors

My mentors are amazing women who I look up to every single day as they’re making the world a better place. I’m going to link to their Twitter handles here, and tell you how I met each of them.

Jennifer Arguello - I met Jennifer at the White House Tech Inclusion Summit, where we hit it off talking about diversity in tech and her time with the Latino Startup Alliance. I made sure to keep in touch since I would be interning in the Bay Area, where she’s located, and we’ve been chatting ever since.
Kelly Hoey - I met Kelly at a women in tech hackathon, and then she ended up being on my team on the British Airways UnGrounded Thinking hackathon. She and I both live in NYC, now, and we see each other regularly at speaking engagements and chat over email about networking and inclusion.
Rane Johnson - I met Rane at the Grace Hopper Celebration for Women in Computing in 2011, and then again when I interned at Microsoft in 2012. She and I started emailing and video chatting each other during my senior year of college, when I started working with her on the Big Dream Documentary and the International Women’s Hackathon at the USA Science and Engineering Festival.
Ruthe Farmer - I first met Ruthe back in 2010 during my senior year of high school when I won the Illinois NCWIT Aspirations Award. She and I have been talking with each other at events and conferences and meetups (and even just online) almost weekly since then about getting more girls into tech, working, and everything in between.

These women have helped me probably more than they can imagine, even when they’re just a listening ear when I’m asking endless questions about what I should do next with my career or how I should approach certain situations. They’re amazing, influential, and make a real difference in hundreds (even thousands) of lives with their work, and I strive to be like them someday.

I hope that you find someone like them to work with. It’s, in the realest sense of the phrase, life-changing.

The positives coming from the negatives

Tue, 20 Jan 2015 06:00:00 GMT

There’s this great poem that my mother shared with me recently, called “If” by Rudyard Kipling.

If you can keep your head when all about you Are losing theirs and blaming it on you, If you can trust yourself when all men doubt you, But make allowance for their doubting too; If you can wait and not be tired by waiting, Or being lied about, don’t deal in lies, Or being hated, don’t give way to hating, And yet don’t look too good, nor talk too wise … If you can talk with crowds and keep your virtue, Or walk with Kings — nor lose the common touch, If neither foes nor loving friends can hurt you, If all men count with you, but none too much; If you can fill the unforgiving minute With sixty seconds’ worth of distance run, Yours is the Earth and everything that’s in it, And — which is more — you’ll be a Man, my son!

This struck me as such a wise way of thinking and has really influenced me recently. That last line isn’t lost on me, by the way. I understand that the author was writing to all young men and women.

Anyway, over the past several months, I’ve been bothered online with fake profiles made of/about me across several networks, and I’ve been sent anonymous messages to my personal phone and email. I had tried tracking them down and trying to figure out why without success.

It all culminated this past weekend at the hackathon MHacks, in which someone in these anonymous messages finally gave me an answer and said, “Some people are upset at you for your feminist influence.”

At first, I admit, I was upset. Yes, I had called people out for saying inappropriate things towards women, and I would share articles that were pro-women-in-tech. But I simply couldn’t understand why a group would be so bothered by those things, that they had to try and make me feel unsafe and vulnerable.

But this post isn’t about them. This is about the positive outcome.

The hackathon community’s response to the negativity over the weekend has been wonderful. People have donated to the Anita Borg Institute. People have been sending myself and other females in tech such positive, encouraging messages. There’s a giant thread going (literally hundreds of interactions) of people proclaiming their appreciation of their female tech role models. There’s unity in the community against the negativity, and I love it.

There’s always going to be trolls on the internet who aren’t happy about something you’re doing or saying. Unfortunately, this is especially true for women. But that doesn’t mean you stop.

“The only thing necessary for the triumph of evil is that good [people] do nothing.” — Edmund Burke

This weekend further opened my eyes to the needs of the community. Female (and other minority) role models have been silenced for long enough. It’s time to encourage them and finally make tech more inclusive. I don’t expect changes to happen overnight. Like one of my brilliant mentors Rane Johnson-Stempson told me, “Life is a marathon, not a sprint.”

Here’s some steps that you can take right now.

Support a diversity organization or community. When I say, “support,” I don’t necessarily mean monetarily. You could volunteer for the group, join them at an event, or simply tweet about what they’re doing. There’s so many of them out there. A few of my favorites include:

The National Center for Women & IT (ncwit.org/)
The Anita Borg Institute (anitaborg.org/)
Girls Who Code (girlswhocode.com/)
CODE2040 (code2040.org/)
Black Girls Code (blackgirlscode.com/)
ProjectCSGIRLS (projectcsgirls.com/)

Tell someone that they’re doing a good job. Sure, this is a small, simple task. But all of us can think of someone that is working in this field who is supportive and positive. A simple note of encouragement can go very far.

And finally, don’t stop talking. Make people aware of the negatives, and shower them with the positives. Call people out when they’re in the wrong, and help them be in the right. If someone is telling you to take down a feminist post, or to shut up about issues in the workplace, or to keep quiet about something inappropriate happening around you: Don’t.

“The greatest pleasure in life is doing what people say you cannot do.” — Walter Bagehot

Let’s build a better community right now. It starts with you!

A Weekend at BattleHack Boston

Sun, 10 Aug 2014 00:00:00 GMT

Hello!

So, this weekend was my first big event during my time at Venmo: BattleHack Boston.

Now, I’ve done a lot of hackathons, on the participating, planning, and sponsoring side.

This hackathon beat almost every single one. The PayPal/Braintree team that put it together (and lovingly allowed me to join them) was so organized and well-prepared, I can’t say anything negative about the event!

It all started with the set up the night before.

There was TONS of swag.

It felt like the swag and props were never ending. Which is a good thing.

When I first heard the term, “BattleHack,” I admit I was afraid it’d be a little cheesy. But this was far from it. This hackathon was epic. Even just from prep day, I could tell that it was going to be a really smooth, impactful event.

So, on the day of the event, we all got to our stations early. I was in charge of the swag table. For those of you who know me well, you know just how perfect that position was for me. Few people really appreciate good swag. I thrive on it.

From the beginning, we were loaded up with absolutely delicious food. It was actually shocking how well they fed us. We started with bagels (with a wide variety of toppings) on the first day, and throughout the event we had a waffle bar, a grilled cheese bar, lobster rolls, clam chowder, Italian food, Asian cuisine, candy, beer, pop, juices and teas, coffee… I could actually make a whole post about the food, but we have more important things to discuss. But seriously. Well done on the food, BattleHack team.

Before we kicked off the event, Matt Hamilton (also a Venmo rep) and I struck a pose. Because you simply couldn’t resist those costumes.

The room got crowded fast. This hackathon was geared towards anyone 18 or older, so we had a really wide range of people. The intros to the event were pretty standard, but well done. They talked about the importance of hacking for social good, and the structure of BattleHack (it’s a global competition, you can check out their website here).

And of course, we had to talk about the prizes. Throughout the event there would be smaller prizes for Best Progress and for Best Tweet, but the big prizes for hacks consisted of PS4s, cameras, and a chance to win $100,000 after being flown out to California on PayPal/Braintree’s dime.

Once people settled down about the awesomeness of the prizes, we got to demos and rules. In order to be eligible for the big prizes, one had to use a PayPal, Braintree, or Venmo API. One could still win partner prizes from the companies Twilio, Mashery, SendGrid, and Context.io if you used their technologies. I had the pleasure of demoing the Venmo iOS SDK.

Once demos were done, it was lunchtime. Everyone was eating and pitching ideas and putting together teams. Hackers had been able to pitch ideas on video before the event started, so some people knew what they were doing, and others were starting completely clean.

Finally, just before 1PM, we had a big countdown to start. We banged the gong, and we were off! Teams quickly started sketching out ideas and setting up their stations.

Over the next few hours, Matt and I were approached several times about using the Venmo API, which was great. The PayPal/Braintree dev evangelists kept thanking us on the side for coming. They said that Venmo has been one of the most popular APIs of the entire BattleHack competition so far, and they loved having us there to help.

Time went on, more food was served throughout the night. The BattleHack team brought in professional masseuses (holy crap, am I right?) and soon Matt’s and my shift was over. We were able to leave at about 9, as long as we got back by 4AM. That was one of the things I appreciated about the planning that went into BattleHack; designated shifts aren’t always thought of for the staff of hackathons.

After a nearly sleepless night, I got back at 4 and started circling the room looking for the Best Progress award. Teams had been working hard. Some included hardware components, some were trying to use every API available. It was very impressive to see the work being done. Eventually, the team we decided had the Best Progress was FundRunner, an application that assisted those running and those donating to people running in various races for charity. It checked when certain milestones were hit using geolocation, it texted donors when their maximum donation amount was hit, it sent emails… their work so far was pretty darn solid.

Throughout the morning, Matt and I were hit up with Venmo questions. Some were pretty technical, some were simply, “why would I use Venmo over PayPal?” But overall, we were kept busy. Matt and I took notes of flaws on our end and desires on the developers’ end for future reference.

Rehearsals were another big part of Sunday morning. Every team practiced their pitches (which were going to be 2 minutes long) and got feedback from the BattleHack team. This is another part of the hackathon that I appreciated and don’t often see. People in general, without feedback, aren’t successful without an outside perspective.

And finally, after a lip-smacking lunch of lobster rolls and a grilled cheese bar, it was time for presentations. There were some really cool ones, and quite a few using Venmo! A few cool ones where:

AgriGate, an “Etsy for farmers” that allowed farmers to post their produce for people to buy, and included a hardware component of a packing slip being printed
Street Music is a platform that connects users to street performers to legitimize their profession and allows donation through Venmo and PayPal (they kicked off their presentation by singing, I was impressed)
HaveKnow proves your identity for emergency rescue payments when you’ve lost your ID and/or wallet, and lets you pay people with PayPal/Venmo after they give you cash
Honk is a license plate-based messaging app that allows users to send compliments and constructive criticism to drivers (sent in the form of a Venmo charge/payment)
FundMatch is a web-based platform dedicated to efficient giving for nonprofits and allows donations through PayPal (the cool part of this one was they took in organization emails and information and parsed them into an easy-to-read form for donors to understand)
Pothole Sonar app uses audio to enhance the awareness of mobile users to the dangerous potholes nearby and compiles pothole data
Nome (short for “metronome”) is a “git for music” where people can collaborate on music projects and donate to other musicians with Venmo

There were a bunch more, and overall the event was so cool. The winners of the event made “Late Night Safety Kit,” an app with tools that allows a user to stay safe by sending alerts for crime and to the police station in the area.

And so, as the BattleHack saying goes: City Conquered! I had to run off after the presentations for my train back to NYC. Overall, I genuinely enjoyed my time at BattleHack Boston. The planning team was a well-oiled machine, on top of every single nuance. I loved helping them and being a part of such an impressive event.

Until next time! :)

My last days at ISU

Wed, 30 Apr 2014 00:00:00 GMT

This week is my last as the president ISU CSE Club. I haven’t been really emotional at all about graduating, but today, I felt it.

During the day I had some meetings with the department about my experience at ISU, and my advisor, Deb, thanked me on behalf of the department. She was so nice, she said, “We might not get the chance to tell you later, but we’re all so grateful for what you’ve done for the department.” I told her I’d be coming back. I hope to get Venmo on the Iowa State bandwagon.

I got an email from a high school student in New Jersey later. I had hung out with him and his mom when they visited Iowa State to answer their questions and give advice.

Hi Cassidy,

Well I’m happy to say that I am now a Cyclone. Talking with you really helped me make my decision and I would just like to thank you once again. Im really excited about going to Iowa State because the school and the Computer Science Department had everything I was looking for. If you have any advice for me before I go it would be much appreciated. And good luck at Venmo, I’m sure your going to do a great job and enjoy New York.

Thanks, Glenn

I’m so happy that Glenn made this decision. He and his mom were so nice, and I think he’s a very motivated young guy. He’s going to be really successful someday.

Right before our final CSE Club meeting (for those of you who don’t know by the way, it’s the Computer Science and Software Engineering Club), I got an awesome email from one of our club members.

Dear Cassidy,

It was fun having as you as the president for my first year of Computer Science at ISU. I know I wasn’t very active this second semester, but on top of my classes I had a lot more responsibilities at my church, so its been crazy. =) Being a 2nd degree student, however, last semester being my first semester at ISU, I thought I’d have a rough time finding people to connect with.

CSE club was a great place to meet people, and it helped my connect to others in my same situation. Knowing other 2nd degree students is a blessing. Having you as the face of the club really eased the transition I believe for a lot of people. You are fun, outgoing, a little crazy (don’t worry, we all are), intelligent, and you are full of showmanship(show-womanship?). I know some other fellas in the club that also were able to open up to other beautiful women on campus, after being able to interact with you. I know that sounds a little out there, but some of my friends were shy enough around guys they didn’t know and some of them even have girlfriends now. O_O

I’m proud to say I’m a member of CSE, and I know many of us were proud that you were the president the year we joined the ISU CSE family.

I wish you the greatest luck in the future, not that you’ll need it, and thank you for ensuring the club was so fun, welcoming, and exciting this year.

Sincerely, with best regards, Shawn

This email made my day! I’ve blogged before about feedback and how much I love it, but this was even beyond that. It made me feel like all of the work I put in was worth it.

After CSE Club, I got some hugs from members, they’re all so great. One girl, Kelsey, came up to me and said, “I don’t know if I’ll get to tell you this later, but I stayed in computer science because of you. You’re my role model, and you gave me something to strive for, and I wouldn’t have been as successful as I am now without you. So thank you.” Oh my goodness. I almost cried. She’s grown so much as a member of our computer science community. She’s studying abroad next year, and she has a software internship this summer! I’m so proud of her.

And finally, I checked my email again, and my professor, Dr. Mitra, sent me an email. He’s the CSE Club advisor.

Dear Cassidy,

My turn to share.

As long as I have been advisor for the club, one of my primary goals - and something that I have shared with all presidents – is that the club should make students feel at home. You have been the only one who has really made that happen to such a large extent. You have been a master organizer and have mobilized your team to achieve great things. You have been the first woman president of the club – and have done one of the BEST jobs.

I am really so happy with you and your team. Your successor will have a tough time trying to fill your shoes! Simanta

I’m completely overwhelmed at the response my work has gotten. With finals coming next week, and my last official class tomorrow, I’m realizing how much I really will miss Iowa State and the community we have here. I can only hope I’ll have a taste of a warm community like this after school.

I suppose though, if I can’t find one, I’ll build it myself.

How to ask for help

Thu, 24 Apr 2014 00:00:00 GMT

Hey cutie. Your laugh makes my morning, and your smile makes my afternoon.

So, I’ve helped as a peer mentor, as an impromptu tutor, as a friend, and just as an upperclassman with a lot of homework problems. From math to science to computing to whatever, you’ll often run into something that you just can’t figure out, and you need to ask for help.

As both an asker and a helper, I’ve discovered the best techniques for asking for help, that will actually get you help.

First: Actually try something.

People who you’re asking will be giving you help, not a solution. The first thing someone will probably ask you is “What have you tried?” If your answer amounts to “not a lot”, they have a perfect excuse to flat out say, “then why should I help you?” If you try something, then you show that you’re at least moderately familiar with your problem, that you know what won’t work, and it’ll give the helper a guide for how they could explain something to you. If you’re totally lost on what to try, search for your problem online to get some familiarity.

Narrow down your problem.

If you know that just one part of the problem is your issue (because you tried something), make sure you tell your helper (this sounds like I’m talking about some sort of designated buddy system… anyway…) what that small part is. Now, don’t show them something so small that they can’t help you at all, but give them something fairly small to work with. If it’s a coding problem, chances are they won’t want to go through 10,000 lines of code. If it’s a math problem, they probably don’t need to see ALL of your steps getting to where you’re at. Et cetera. I mean sure, be able to describe the larger context of your problem, but then focus on your problem area when you’re asking for help.

Don’t be a lazy recipient.

When someone is helping you, they’re donating their time and effort into making sure you understand something. Don’t sit there on your phone while they look at your screen or read your paper. Be an active learner, and talk through things with them. At the same time, be patient. Unless you’re paying them for their time, you’re not simply entitled to their help. I’m guilty of getting impatient if I don’t understand something right away. Let them explain how they think about the problem to you in their own way, chances are they might have a different idea than you do, and you’ll come to a mutual solution together. Lovingly.

Hopefully you’ll get the help you need on that nasty problem! I believe in you.

10 Tips for Successful Public Speaking

Wed, 16 Apr 2014 00:00:00 GMT

Hey friends!

So, not everyone likes speeches. Public speaking is the #1 most common fear out there. If you don’t get time to practice it often, it’s really just not fun.

So, here are my tips for you. I’m not just saying these. When I go out and talk to a bunch of people, I think about these all the time, and it helps. So do it.

Don’t read.

You are talking to people because you have something to say. You’re talking to them because you know what the heck you’re talking about. Speak from your head, not from your paper in front of you. In fact, try not to bring any paper at all, because they make shaky hands easy to spot. If you need notes, bring a clipboard or a notebook to help you out.

Get your hair out of your face.

The strongest hairspray can fail with the right amount of sweat and nervous touching. Give the audience an unblocked view of your face and your eyes for the best engagement. Bring a hair clip or up-do it. Or shave it. Your choice.

Take your hands out of your pockets.

It’s distracting. You look nervous. If you’re at a podium, put your hands at your sides or hold onto it. If you’ve not nothing in front of you, just keep your arms loosely at your sides unless you’re making a purposeful gesture.

Plant your feet in a comfy stance.

Nothing is more distracting than watching someone pace, rock, or fidget with their feet. Also, DO NOT cross your legs while standing. Even if you have incredible balance, you’re just asking to fall over.

Eye contact.

This is the easiest one on the list. Don’t shift your eyes around, don’t stare at the back wall. That advice is for high schoolers. Look at everyone in the eye. For every sentence you say, look at someone. Shift to someone nearby when you say your next sentence. If your transition from person to person is smooth and steady, everyone will feel like you’ve spoken to them, and spoken to them well.

Don’t touch your face.

When people make mistakes (or have their hair in their face), they touch their face a LOT. It’s distracting. Some of the best speeches I’ve ever heard we ruined because I saw someone scratching their face and playing with their hair. No. Stop. Don’t do it.

Take some time to recover.

If you make a mistake, don’t apologize profusely, don’t stammer. Audiences are very tolerant of a moment of silence. So, if you fumble, just take pause and recollect your thoughts, and then resume. It’s a much more graceful approach to saying, “oh um I forgot to mention that crap so I have to go back” etc. etc.

Tell stories.

People remember them. If you want to talk about the importance of adopting puppies, tell them about your (or a friend’s) experience in buying a puppy. If you’re talking about best practices for putting together an event on campus, tell them about events you’ve hosted. Be funny, and smile with your stories. Chances are, the audience will smile back.

Be CONFIDENT.

Public speaking isn’t as much about what you say as it is how you say it. Whether the audience is 5 people or 5,000, you have a reason to be there, and to make them really listen to what you’re saying. Sell yourself and your message to them. Deliver it like you’re the best person in the world to do it. Speak loudly, and smile. It’ll make the most boring speech more engaging.

Have FUN!

You’re going to be awesome at this. Go and tell people your message, and be proud doing it!

The laptop you need for college

Mon, 14 Apr 2014 00:00:00 GMT

Hello, cutie patootie. Your arms are so strong.

Now, let’s talk laptops.

Chances are, you’ll want one in college. They’re not absolutely necessary, but boy, are they convenient.

When I was about to go to college, I wanted the BEST MACHINE EVER. I was going to be the most hardcore computer science student in the world with the most attractive, powerful laptop that would carry me for the next four years and beyond. I dropped almost $2000 on what I thought was the coolest laptop in the world.

And you know what? It was cool. I loved that thing.

But it didn’t last.

By the middle of my junior year, I was using a different laptop, that was actually less powerful than the one I had bought. But it worked well for what I wanted.

So, moral of the story, don’t spend too much on the best, state-of-the-art laptop you can when you go to college. Every single one of my friends is on a different machine than the one they started with.

So, what laptop SHOULD you buy?

Well, that depends on what you want to do, and what you like!

I’ll give you some general guidelines that should help you. I won’t tell you straight up which laptop would be perfect for you, because everyone’s different (this is like Harry Potter getting a wand, oh boy oh boy), but these ideas should help you out.

Disclaimer: I’m biased. Also I’m going to talk about computers that aren’t as expensive, which means I probably won’t mention Macs much. But hey, Macs are good computers. They just cost an arm and a leg.

For non-technical majors:

I’m looking at you, you lovely people who write a lot of papers and proposals for your business classes and your education classes and your sociology classes. Hi. You could probably get away with something not too powerful, but still easy to use and efficient. A Chromebook might be good, if you’re okay with using something like GoogleDocs for all of your files. A Microsoft Surface might also be an awesome solution for you, because it’s lightweight and still has all of Microsoft Office and other cool applications. If you want a more traditional laptop with Windows on it, I recommend the Lenovo ThinkPad E Series and L Series, as well as the Toshiba Satellite laptops. From what I’ve seen, those computers are super functional and fast for what you need, and won’t destroy your budget.

For engineers, 3D-modelers, and drafters:

Hey, CAD-users. You’re going to need something with some pretty solid graphics and memory to handle all the things you’re making. You should have at least a 2.8 GHz CPU/Processor Speed for an i3 processor, or 1.8 GHz for an i5 or i7 processor, a 500 GB Hard-disk drive, and 4-6 GB RAM. I don’t think you’ll need as high as an i7 processor, but that’s just speaking from experience. You might be making something that is greater than I could ever imagine. Anyway, the machines that might just rock your boat are the HP Envy laptops, Asus K-Series laptops, and the Lenovo T Series laptops. These are some pretty powerful machines that’ll get the job done.

For design majors: Hey, artsy fartsy. For you, I’m going to recommend a Mac. The entire Design college at my school uses Macs. They will want you to have a Mac, even if you’ve already bought a PC. So, get one. Sorry there’s not much of an option here. But hey, it makes your choice easy. If you do get a PC, get one with a really good graphics card.

For programmers and scientific majors:

Haaaayyyy hollerrrr. I’m one of you. For you, you will need the extra RAM, at least 6-8GB, I’d say. You’re going to be sticking a lot of data on your computer. I’d also go with an i5 processor. You won’t be using THAT much power, unless you’re doing some extreme OpenGL programming (which if you are, you’re brave, and should look at the engineering bullet above). I recommend an ultrabook for you. It’ll give you the power and portability you need. I have an i5 Samsung ultrabook, and I really like it. Lenovo has some sexy ultrabooks too. If you’re in the field more often (like for biological, animal, or agricultural sciences), I recommend something more like a Toshiba. They’re really hardcore and can take a hit if you bring it outside. Boom.

So, there you have it. Now, you might disagree with my laptop opinions here. Again, everyone’s different. But, these guidelines should give you a general idea of what could be best for you. And again, don’t drop too much cash on a computer. Technology is moving fast, and you might end up getting a new one before you even graduate.

Good luck!

HackISU Hackathon!!

Tue, 08 Apr 2014 05:00:00 GMT

Hello my darling kumquats!

I hope you’re enjoying the spectacular weather outside.

This past weekend, Iowa State held its first HackISU hackathon, the largest the campus has seen yet! We had around 150 student hackers come in for the weekend and make some incredible things.

For those of you who are like, “WAIT. You make people hack into computers?” No. We don’t. A hackathon is a span of time in which you simply make something (or “hack” it together). Hackers were given 24 hours to come up with the coolest hacks they could, and they certainly didn’t disappoint!

Throughout the event we had a bunch of food and swag to give out, sponsored by some awesome companies from all over the country.

The event was organized by some groups on campus, the Computer Science/Software Engineering Club (I’m the president of that group, hollerrrr) and CyHack. It was such a successful event, and I was super proud of our team who put it all together.

What kind of cool hacks did we see?? Well, there were some incredible ones!

The winning team made what they called a “Hackulus Leap,” which was a hacked-together Oculus Rift-esque virtual reality device controlled by your head, a tablet, a headpiece, and a Leap Motion device! We had everything from games to skydiving apps to lights that changed with music to productivity apps like Tweet shorteners.

Isn’t that awesome?? It’s amazing what you can do in 24 hours. We had all kinds of majors too, not just programmers and hardware hackers! We had some economics majors, some mechanical engineers, designers, advertisers… everyone was welcome.

HackISU will only get bigger every year, and I hope you join us next year!

How to Ace an Interview

Tue, 04 Mar 2014 00:00:00 GMT

Hey cutie. Let’s talk interviews. I’ve had what’s felt like a billion interviews over the past several years, for everything from leadership positions to internships to jobs to scholarships. So, I thought I’d give you some advice based on what I’ve learned.

Right now.

Study the usual interview questions, and fit in your own experiences.

All you have to do here is go on the internet and search, “common interview questions.” Everything from “describe a time when you worked on a team” to “what was the most fun presentation you’ve ever had to plan?” is asked to everyone, engineers and business majors alike. Make sure you follow STAR: Situation (what was the situation you were in), Task (what was your job, or task, to tackle the situation), Action (what were the actions to ultimately took), and Results (what were the responses you received and the results you achieved)! Now, if you’re thinking about technical questions (which I’m a computer science chick too, I get it), my only advice here is to talk a LOT. Too many engineers just go up to the white board and start coding then and there without explaining what they’re doing. Whenever I’ve interviewed with someone, I stay sitting and talk about the problem with the interviewer. When you do it that way, they can see where you’re going with your thought process when you start writing on the board. And if you change what you’re thinking, turn around, away from the board, and tell the interviewer your thought process again. The thought process is what these companies are looking for, not just correct code. It’s better to have a good thought process and bad code than good code and a bad thought process.

Know your story well.

Instead of reflecting all the time on interview questions and rehearsing answers, try reflecting on your school and career chronology until now! Think about how you got started in your field, struggles you overcame, what you’ve learned over the years, where and how you developed certain skills, what you’re most proud of, etc. When you know your story, you can answer almost any question about anything because of your personal experiences and what you know already about yourself.

Follow the PIE.

I mean this in both senses of the word. Pie is delicious. BUT, what I really mean is, the best interviewees are the ones who are Positive, Interested, and Engaged in the interview conversations. If you keep worrying about the next question and saying things perfectly, you might forget to have your positive game face showing. Just remember to smile! If you look like you’re happy to be there, they’ll be more happy to interview you.

Consider what the company (or organization or school, whatever) wants.

When you’re at the career fair, ask companies what they look for, and what their culture is like. You don’t want to think, “oh yeah I’ll just keep practicing, if I know what I’m talking about and can show it, they’ll hire me.” Yes and no. You do want to show them that you know what you’re talking about. But, they also want to feel that you are likable, and that you’ll fit in at the company! Focus more on demonstrating aptitude while being likable rather than just spitting out perfectly crafted answers. Laugh with them, relax a bit, and let them see your personality! I mean, I like you, so why wouldn’t they? You personality is one of your skill sets that people often don’t count. Believe me, it counts for a lot.

Breathe.

You’re going to rock this! Just know that if it doesn’t work out, it’s not the end of the world, and if it does, that’s even better. Have FUN and good luck!

Things you should have on your LinkedIn profile

Thu, 27 Feb 2014 00:00:00 GMT

Hello friends!

Now I know what you’re thinking. “I’m attractive, and that’ll get me a job. Why do I need a LinkedIn?”

Well, the harsh reality is, the world thinks you’re beautiful, but that’s the least interesting thing about you. It wants to see your work ethic, your personality, and your LinkedIn profile.

So let’s give the world what it wants.

Firstly, you’ll want your professional name on there. No nicknames. As much as I want to put my common name (Cassie “The Rock” Danger Girl) on there, I know that Cassidy will have to do, and it will have to for you too. Only if your name isn’t Cassidy you should probably put your own name on there.

Secondly, you’ll want a professional photo. I know that selfie of you with 50 grapes in your mouth is impressive, but typically companies don’t put that in job descriptions. So, get someone to take a photo of you where you’re looking sharp!

Manage your endorsements! If you want more people to endorse you for the fact that you know Spanish, ask them to. They affect how you appear in LinkedIn search results. The average number of endorsements per LinkedIn user is 5, but it’s much easier than you think to get more. I recommend trying to get 12 for as many skills as possible. That’s the maximum number of pictures that show per skill, so it looks more impressive on your profile visually.

Build credibility with some recommendations! A few recommendations from respected people like a professor, mentor, coworker, or boss can really help you out and establish your credibility. You might have to ask for them, but it’s worth it!

Join relevant groups. There’s a ton of groups on LinkedIn for people from different companies, events, schools, interests, etc. 81% of LinkedIn users belong to at least one group. When you have those showing up on your profile, it can really show potential employers what your interests are and which organizations you’re a part of. Plus, you can use group messaging to contact other group members about potential opportunities.

And finally, show your stuff! Post your projects, classwork, test scores, patents, certifications, volunteer activities, extracurriculars, anything that will help you become more marketable! Add pictures, videos, and descriptions to really show what you did.

Your LinkedIn profile is your public facing profile to employers all over the country. Help them help you find a job, internship, co-op, or work study!

Talk to you soon, my lovelies <3

What is Computer Science ACTUALLY like?

Tue, 25 Feb 2014 06:00:00 GMT

Hi there cutie pie!

So, as you might already know, I’m a computer science major, and I LOOOVE it! A lot of people, though, typically give me a cringe reaction when I say that it’s my major.

And yes, I know not everyone likes the idea of coding. They picture someone sitting at a computer all day long in a crappy cubicle staring at a screen with green text and a black background.

Well, I’m here to tell you that you need to erase that image from your mind, because being a computer science major is SO much more than that!

So here’s some stereotypes that CS majors face, and then some counterexamples to show that they are not true. 😉

You’re in a cube all day staring at a screen.

False. In all of my internships that I’ve had, only one of them included a cubicle. Even then, I was only in it for a couple hours a day because I was in meetings and conference rooms and other places throughout the office. The company I’m going to work for, Venmo, has no offices at all!

Now sure, if you want an office with cubicles or offices or couches or anything, there are definitely companies out there with those, and that’s not necessarily a bad thing. But you should know that because of the flexibility of the degree and the job, you can honestly work in any type of environment you want.

It’s full of a bunch of boys.

I am not a boy. Next.

Heh okay, I admit there are a lot of guys in computer science. Overall in the US, only 18% of all undergraduate computer and information sciences degrees are received by women (stat from NCWIT). But ladies (and guys), don’t let that deter you! There are so many great opportunities in computer science career-wise, project-wise, and networking-wise that something like gender shouldn’t be a decision-making factor when deciding to go into the field or not.

It’s basically math with a computer involved. No fun.

No.

Okay, yes, math is a good thing to know. But it’s not the end of the world if you didn’t rock your trig class in high school.

Computer science is about problem solving. You’re given a set of skills with the major. Each language you learn is a tool, each idea you learn is a method of solving something. You get to be as creative as you want at that point!

Let’s say you wish there were an easier way to keep track of your calorie intake. That’s your problem. You can solve it in all kinds of different ways. Sure, you can write it in a notebook or something, but what if you don’t have a pen nearby? Let’s turn to tech. You could make a phone application that does it for you. You could even have it look up how many calories an avocado has for you so that you don’t have to do that yourself. What if you wanted to get REALLY creative with it? Let’s add some image recognition to your application. You could have your phone take a picture of an avocado, recognize what you’re eating, and then do the looking up of calories for you and list it on your calendar. You could make a website for it! A smartwatch application! A Google Glass tracker that publishes to Twitter! There’s so many options!

Computer science is great because of it’s flexibility. Do you like art? You can work with code that only works with art (there’s a whole website dedicated to that kind of coding here). You like chemistry? You can make programs that test strengths of covalent bonds between atoms (I asked my computer science/chemistry double major buddy for that example, so it’s super legit). You like math? You can work with Turing machines and algorithms exclusively. You like marketing? You can be a developer evangelist and work with events, writing, code, and competitions (here’s a blog post of someone who did just that). You like foreign languages? You can make products to bridge the gap between nations.

Also, what if you don’t want to code? You can have jobs like being a technical writer, a project manager, a technical recruiter, a patent lawyer… there’s so many opportunities for you even if you just know a little technical knowledge!

I could go on and give an example for pretty much every single other subject you throw at me. Technology is constantly growing, which only means there will be more and more ways to relate computer science to pretty much anything. Not just math.

I don’t have coding experience, so there’s no point. It is too late.

*Touches your shoulder tenderly* It is never too late for now.

Not everyone goes into CS knowing things about coding. A majority of people I knew in my freshmen classes had little to no experience at all!

Don’t let those people intimidate you. You can totally learn at your own pace, in the way that you want. Having previous experience, sure, that’s a nice bonus. But you could say that about literally every other field (I tried thinking of exceptions to this rule, and there are none). Don’t worry about getting your feet wet, or even moving a little slowly. It’s a subject that takes patience. It’s so vast that some things are pieces of cake to some people, and pure torture for others. As you go through your classes, you figure out what you like, and you can gear your electives towards your preferences.

Plus, there’s so many jobs in computer science out there that you don’t have to even think about being worried.

WHAT A CLEVER SEGUE:

Computer Science is being outsourced all over the place, there’s no jobs here.

No no no no no.

There are so many jobs here, it’s ridiculous.

Quick history lesson: Baby boomers started taking on a lot of jobs, computer-related ones too, many years ago. Now, they’re starting to retire a lot. Millions have retired over the past 6 years.

So, what does that mean for you, for us? JOBS! Not Steve Jobs. I mean careers. For you and me.

The U.S. Department of Labor estimates that by 2020 there will be more than 1.4 million computing-related job openings. At current rates, however, we can only fill about 30% of those jobs with U.S. computing bachelor’s grads (Source).

That’s a LOT of jobs. Get on it.

Computer scientists are socially awkward.

No we’re not.

Well, some are.

But honestly, you could say the same about every single other major out there. Why we were targeted with that one, I couldn’t tell you.

We’re normal. I’m normal. NORMAL.

You are probably tired of reading this.

I hope I’ve deterred some of your malicious thoughts about CS majors (okay I’m sure they weren’t malicious, more like “curious,” but whatever) and answered some of your questions!

You should totally give computer science a try. You don’t have to major in it if you don’t want to, but you could just try a class. You’d be surprised at how fun it is.

Get jiggy with it. Peace out, girl scout. (Crap, I just reread that… maybe I AM one of the weird ones…)

Feedback is awesome

Sat, 22 Feb 2014 00:00:00 GMT

Today was a great day full of feedback from people.

First of all, my tutorial I wrote (which is here if you didn’t see it) has been getting some great results! A few people I know have been checking it out, and I presented it to Twilio yesterday, and so far I’ve heard a lot of positive things!

Today I got a message from a girl in NCWIT:

This girl across from us wanted to learn HTML today at a hackathon and she was trying to watch some videos and I literally jumped out of my chair and was like “omggg i know the best guide ever!” and showed her your tutorial, and she loved it. I think she finally got some neat stuff together at the end. I’ve seen a lot of tutorials and guides and stuff, yours is hands down one of the best ones I’ve seen.

This made my day! I love getting positive feedback like this, it only makes me want to write more.

And then, I also got an email from one of the higher ups at Intuit today:

We were just talking about you the other day, in relation to the Women in Technology initiative in QuickBooks Product Dev. We rolled out a formal goal of mentorship and sponsorship to develop a pipeline of women ready for director, group manager, principal engineer, and architect roles. Since we started… we have two new women group managers, a new woman principal engineer, and several new first-time managers. We have a monthly lunch with the women PD leaders, and we feature various guest speakers— mostly women execs at Intuit. Intuit also hosted a Girl Geek Dinner… Btw, your work on …[things I worked on at Intuit]… default template is now live in QBO. So you’ve got a legacy at Intuit from your internship.

Between the two messages, I don’t know which one made me more happy. I love hearing that my views on mentorship are being spread, and that my work I’m doing is making a real impact.

So anyway, to the point.

Feedback should be given more often. Good and bad, even a pat on the back, is more motivating than almost anything else! At a majority of my internships, I’d work on something and if I finished, I’d get another assignment, and that’d be that. I wouldn’t find out feedback from my coworkers and managers until my midpoint reviews, most of the time. In fact (probably as a result of the impostor syndrome), I often thought I was doing terribly until I got such midpoint reviews, because I didn’t hear any feedback until then.

Was it my fault for not asking for it? Probably. I ask for it more often now. But it makes me wonder about everyone out there who doesn’t ask for feedback once in a while. Some people might be stopping projects, giving up on problems, or even quitting jobs, just because they don’t know they’re doing well. There’s plenty of articles out there about the importance of encouragement in the workplace.

But, there might not be as many articles about asking for feedback. I don’t want to bore you with statistics and psychology. So, I’ll leave it at this: Ask for feedback from someone this week. Ask them about a project of yours, an assignment you’ve done, even about your attitude about work or school. It could be the extra kick in the pants you need to do more of what you’re doing, or to work harder.

My Talk at TEDxDesMoines

Sat, 22 Feb 2014 00:00:00 GMT

Hello friends!

So, I don’t know if a lot of you have ever watched a TED talk before, but they usually have some interesting food for thought.

WELL, I gave a talk at TEDxDesMoines last December, and I thought I’d share it with you all!

It’s just about my growing up as a woman in STEM (Science, Tech, Engineering, Math), and about following your passions.

I hope it gives you some inspiration to go after what you want.

And, you know I like feedback! I’m so happy about some of the comments and discussions coming out of the video:

“I particularly enjoyed this presentation. For some silly reason, many of the Math, Science and Engineering academic folks do not embrace Computer Science as a core element of STEM. In reality, Computer Science is the cortex of STEM. This young woman encorages everyone to have a passion, explore, network and have fun! She is combining her avocation with her vocation! I applaud her.. clap clap clap.”

Arta Szathmary

“I believe that Cassidy is a perfect STEM model for women and humankind.”

Chris Pirillo

“Cassidy will change the world, I am honored to know and work with her! Please show this video to all your daughters!”

Rane Johnson-Stempson

“Wonderful speech and thank you for being such an inspiration for young women everywhere! I can only hope that the doors you are working to open are there for my daughter when she gets older. Keep up the great work and keep inspiring everyone! <3”

Dee Sunday

I don’t know if any of those people will read this post, but I hope they know how much I appreciated their thoughts!

My "romantic" Valentine's Day plans!

Fri, 14 Feb 2014 06:00:00 GMT

Hey cutie pie. I’d totes ask you about your Valentine’s Day plans but you’re so hot that you probably have people lining up out your window. So I won’t.

So, remember my weekend at PennApps last fall? Well, it’s happening again!

Starting Valentine’s Day, for 48 hours straight, myself and 1,200 other hackers will throw together whatever technologies we can to get something new and exciting happening by the end of the weekend!

So, this Valentine’s Day will be dedicated to my computer, to which I’ve had the longest loving relationship of my life.

It’s the relationship I’ve spent more time on than any other.

When things go wrong, I become enraged and attack inanimate objects, but I’m always willing to spend hours making things right.

I can turn it on in a snap. Come to think of it, I can turn it off in a snap.

It loves me back (there’s a reason why U and I are next to each other on the keyboard).

Anyway, this is getting weird.

I’m coding on Valentine’s Day.

I hope you have fun. <3

HTML+CSS Tutorial, Part 1

Mon, 10 Feb 2014 00:00:00 GMT

What

In this tutorial, we’ll start from the very beginning. You don’t need to know anything about HTML and CSS or anything about code to start. I’ll included some tutorial files for you to play with and check out here: HTML+CSS Tutorial Files

When

Now. Or whenever. I’m not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever.

Where

On a computer. Here. I have this tutorial hosted on my GitHub account if you’d like to look at it there, or if you’d like to suggest improvements!

Why

Because this stuff is important. Whether you’re a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn’t tried any sort of coding, scripting, or programming before, HTML and CSS are an essential part of your learning curve.

HTML
- Editors
- Tag Structure
- Text Structure
- Links
- Other tags
  - Images
  - Line Breaks
  - Tables
- Making Things Gorgeous The Wrong Way
  - Colors
  - Width and Height
  - Borders
  - Text Styles
- The <head> tag
- Putting it all together so far
CSS (this half is in a separate post, for your readability, because I care)
- Classes and IDs and other Segregation
  - Classes
  - IDs
  - Other Segregation
    - The <span> tag
    - The <div> tag
      - Background color
      - Floating
      - Positioning
      - Margins and Padding
      - Z-Index
- The <link> Tag, Comments, and other Developer Joys
  - The <link> tag
  - Commenting
    - HTML Comments
    - CSS Comments
  - Other Developer Joys
    - Forms
    - HTML5 and CSS3
    - How To Meet Ladies/Laddies (Get it? HTML Jokes are the best…)
Final Project!
And now, the end is near

HTML Time. Let’s Go.

Editors

So the first thing you’ll need is an editor to edit your jazz. There’s tons of options out there.

Notepad (that’s right, the stupid thing that comes on your PC) - This is about as basic as you can get. It’s totally okay if you want to use this, but I recommend one of the editors below just so you can see code highlighting (which will help you out later on). But, if you want to be a purist, this’ll work just fine.
Aptana Studio 3 - This is what I typically use. It’s fairly easy to navigate, you create projects in it and it supports standard web projects, PHP, and Ruby. If you’re a beginner that probably means nothing to you. Anyway, a decent choice.
Sublime Text 2 - This is a pretty popular option, and for good reason. Very clean interface. Once you can navigate it (learning curve isn’t that big), it’s pretty dreamy. Like your face.
Notepad++ - This is just one step up from Notepad. But it’s pretty dece. Code highlighting is in it, and nothing else too fancy, which is what I like about it.
IDEcoder - this is an in-browser code editor, which lets you code directly within the web browser, online or offline, it means you only need one program (your browser) to develop websites, which is cool

There’s a bunch of others listed here, I just listed the ones I’ve used and liked!

HTML Tag Structure

Here is a barebones HTML page, about as simple as you can get. You can open it up in the 1 - Structure folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you’ll see a plain webpage with the title “My Website” and the words, “Hello, World!” written on the page.

<!doctype html>
<html>
	<head>
		<title>
			My Website
		</title>
	</head>
	<body>
		Hello, World!
	</body>
</html>

So, what are we looking at here? HTML, short for HyperText Markup Language, consists of these things called tags, which are words written between < and > characters, like <sometag>. All tags (with just a few exceptions that we’ll talk about later) have a matching closing tag, which has the same name as the opening tag, except that it contains / after the first <, like </sometag>.

For example, <html> is one tag and the closing tag for it is </html>, same with <head> and </head> and <body> and </body>, and so on. You get it. The opening and closing tags together are an element (which also includes everything written in it). For example, <title>My Website</title> is one element. The text inside an element, in the title case, My Website, is called the content of an element.

Tags organize your page and tell the browser what your page consists of. There’s tons of tags out there, some that you may never use. Here’s some lists of tags if you really care to see all of them at this point:

So, if you look at our example, you can also put tags inside other tags (like we did with the <title> tags inside the <head> tags). This is called nesting elements. In this case, we would say that the <head> contains the <title>. Sometimes when you have a lot of nested tags, it’s hard to keep track, so you have to format your code with spacing, as shown. Typically, inner tags are spaced more than their outer tags (just as <title> is indented further than <head>).

Let’s take a look again at part1.html in the 1 - Structure folder. You’ll notice that the first line has <!doctype html>. Every HTML document and website has to have this special tag, as it tells the browser what language we’re using. This is one of those special tags I mentioned that doesn’t need a closing tag.

On the second line, you can see a <html> tag. Everything in the website is contained by this tag, and the last line of your entire document will always be </html>.

Inside <html>, there are two elements: <head>and <body>. Contained in <head></head>, we will put all kinds of information for the browser that the user doesn’t necessarily need to see. For now, we just have <title>. The content of <title> will be used for the name of the tab of the browser, and also by search engines.

On the other side of the planet, we have <body></body>. Everything visible to the user is contained in these tags. Right now, all that consists of is “Hello, World!” Let’s change that for fun. Replace “Hello, World!” with your own text in your favorite HTML editor, and then open the page in your browser. Neat!

Structuring text

Let’s get juicy. We’re going to talk about some new tags for structuring your text. Because you’re not going to want just one style of text throughout your whole website, right?

Check out part2.html in the 1 - Structure folder. The tags that we’ll be talking about here are <h1>, <p>, <ul>, and <li>. Open the file in the browser to try and understand what the heck is going on.

Now, let’s talk about it.

First, we have <h1>, which adds a heading to our website. Basically, a heading is just text with a bigger font. But still. Important. We’ll soon learn how to adjust any and all font sizes, but not yet. Just know that your headings should be in <h1> tags. Also, if you have a smaller heading, or sub-heading, you could use <h2>, which is smaller than <h1>, but bigger than regular text. You can keep going with more numbers until you reach <h6>, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading!

Next, we have <p> tags. <p> adds a paragraph of text to our website, which are blocks of text that have some space before and after them. Edit the text in the paragraphs given, and add your own to see what I mean!

And finally, we have <ul>. <ul> means a bulleted list (also known as an unordered list), where every <li> is an item in that list (called a list item). But what if you want a numbered list? You could change <ul> to <ol> (and don’t forget its closing tag), it’s that simple! <ol> is an ordered list, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (<li>) to the list (make sure you stay inside the <ul> tags), and then change your <ul> tags to <ol>!

Links

Links are what makes the world/Internet go ‘round. Seriously. So, let’s learn about them.

Links are made with the <a> tag, which stands for anchor.

Open up the 2 - Tags folder, and add this piece of code right after your heading in page1.html:

<p>This paragraph <a href="http://www.lalalalalalalalalalalalalalalalalala.com/">has a totally awesome link.</a></p>

Open page1.html in a browser and click on it! BEAUTIFUL.

Okay, so let’s take a look at this. First of all, you can see the <a> tag there contained in the paragraph. Beautiful. But what’s that funky milk href=? Well, that syntax called an attribute. Attributes change the way a tag works, and are not visible to the website’s user. You only add attributes to the opening tag, not a closing tag. Tags can have multiple attributes, for example:

<tag attribute="value1" attribute2="value2">Content of tag</tag>`

Got it? Good. You’re so good looking.

So, anyway, the attribute ‘href’ tells us where the link is going to go when the user clicks on it (and for those curious, it stands for hyperreference). Try adding some more links to the page to different websites!

Also, one thing you should note: Links don’t have to be in <p> tags like I put above. You could put them in <li> tags in a list, <h1> tags for a linking header, or completely on their own!

Adding links to other pages in your website

Let’s just say you have a fully functioning website called fakewebsite.com. You have your homepage and your “Contact Us” page in the same directory or folder.

Normally when a beginner links to different pages on their website, they just make links that look like <a href="http://www.fakewebsite.com/index.htmL">Home</a> and <a href="http://www.fakewebsite.com/contactus.htmL">Contact Us</a>.

This is okay. BUT, you can do better. So, what if you change your domain name to reallyfakewebsite.com? When you edit your HTML, you’d have to edit every single one of the links to match the new domain. That’s gross. There is a better way.

When you make a link to a page within your own directory or folder on your website, instead of putting in the whole URL, put in something more like this:

<a href="page2.html">Click here to go back to Page 2.</a>

Paste this line of code into page1.html. Watch the magic happen.

Now, if you were to change your domain or location of your files, you don’t have to change a thing. Boo yah.

Other tags

So, you can reference the links that I showed you before if you want to check out some jazzy stuff you can do with your page. There are some other ones though that you might want to see before we move on to cooler and bigger things.

Images

<img>. Let’s just say you want to put an image on your website. This is probably a good tag to know. Add the following to page1.html:

<img src="https://i.imgur.com/B9q0A.gif" />

Open up the page in a browser. WHOA. Image! So, the <img> tag is one of those special tags. First of all, it doesn’t have a closing tag. You just stick in a / at the end of the one tag and you’re done. Secondly, it also has a src attribute (which is short for source), and in the value of that attribute you put the URL of the image (similar to href in the anchor tag).

One attribute that might be good for you to remember for <img> tags is the alt attribute. If you changed the code above to:

<img src="https://i.imgur.com/B9q0A.gif" alt="I could have danced all night" />

When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you’ll see some words appear! WOW. That’s the alt attribute. It stands for the alternate text for an image, and it’s used when a user can’t view the image for whatever reason (using a screen reader, slow connection, error in the src attribute, etc.). Or, in the case of XKCD, it’s used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don’t know about).

Line breaks

Let’s just say you want to keep all your content in one paragraph <p>, but you still want to break it up.

That’s easy.

So, there’s two special tags here, <hr> and <br>. They are empty tags, meaning they have no closing tag.

<hr> stands for horizontal rule, and creates a visible line break. <br> is a simple line break, all it does is split your paragraph up.

Try inserting these in between some of your <p> tags to try it out!

Tables

Tables are really cool. They can also be a bit confusing. Open up tables.html (in the 2 - Tags folder) in a browser to check out the example table I made for you there.

There’s several tags for tables, but the essential ones are <table>, <tr>, <th>, and <td>. Look at tables.html in your editor.

We’re going to make our own table again on this page. You can delete the one I made for you, or just make one underneath the current one there.

So, to create a table, you start with the <table> tag. Simple enough.

This will contain all the parts of your table. Sometimes, tables have a border attribute that will equal some value for the thickness of the table’s border (it’s proper to have just “1” or nothing, for reasons we’ll explain later). Go ahead and add one so it looks like this:

<table border="1">
</table>

Boom. Let’s add some more.

The next tag we’re gonna check out is <tr>, which is for a table row. Easy peasy. So, let’s add 3 <tr> tags to our table.

<table border="1">
	<tr>
	</tr>
	<tr>
	</tr>
	<tr>
	</tr>
</table>

And finally, we have the actual cells of the table. There are two types of tags for this, <th> (table header) and <td> (table data). As their names indicate, the former is for the header of the table and the latter is for all of the data in the table.

In our first set of <tr> tags, add 4 <th> tags, and in the second and third <tr> tags add 4 <td> tags.

<table border="1">
	<tr>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Alright! Our table is all set up. We have a table with a border=1 attribute, 3 rows, and 4 columns. Let’s populate it with data so you can see a proper application of the <table> tag:

<table border="1">
	<tr>
		<th>Item</th>
		<th>Quantity</th>
		<th>Rate</th>
		<th>Cost</th>
	</tr>
	<tr>
		<td>Candy</td>
		<td>10</td>
		<td>$.50</td>
		<td>$5.00</td>
	</tr>
	<tr>
		<td>Toothpaste</td>
		<td>2</td>
		<td>$3.00</td>
		<td>$6.00</td>
	</tr>
</table>

Open the page in a browser and check out your work. Nice job! I’m truly impressed. Go eat something good and fattening.

One other fun thing you can try playing with are the colspan and rowspan attributes. If you add colspan="2" (or rowspan, or any other number) into a <th> or <td> tag, the cell will expand past their cell size. For example, <th colspan="2"> will give you a table header that spans 2 columns, and <td rowspan="3"> will yield a cell that is the height of 3 rows. Jazzy!

You can also nest tables, but I won’t get into that right now. If you want to play around with the code, try adding some <tr> and <td> tags inside your current <td> tags. MaGiCal ThInGs.

Making Things Gorgeous The Wrong Way

So, your website right now looks pretty bland, and that’s normal. But, we want a website that is hot, sexy, ravishing, and powerful. Yes, that’s right, we want a website just like you.

So first, I will show you the wrong way to style your pages. You might ask why, but trust me, if you learn in this order, you’ll understand HTML attributes a lot better, and then when you move on to CSS your mind will explode with joy. Explode.

Colors

Alrighty. Let’s get frisky. Open up the 3 - Styles folder and the file style1.html. You might notice that this file is pretty bland right now, but that’s what we’re gonna fix. Be patient, my grasshopper.

Add this line of code in the <body> somewhere below the header tags (I made a lot for fun…): <p style="color: red">This text is hot like my body</p>

Oh man. Load that baby in a browser. WHAT. MAGNIFICENT. COLOR.

The first thing we’ll look at is the style attribute. You can style all kind of things in that, from colors to widths to heights to borders to weights. But for now, let’s just talk color.

So, you might wonder, “what the heck how does that work can I just type any color in that space where red is?” And the answer is no. You can type a ton of colors there, like blue and yellow and cyan and magenta, but you can’t just say oasisorange or electricwhite and hope that that’ll work.

How do you get a specific color of your liking? Well that’s when you use RGB or HEX colors. This is kind of a pain to grasp, it took me a little bit, so I’ll explain it as simply as I can: RGB stands for Red, Green, and Blue. You can have the values 0 to 255 in each to form pretty much any color in existance. Whoa. The way to form an RGB code similarly to the one above is simple: style="color: rgb(255,0,0)". In this example, there’s 255 reds, 0 greens, and 0 blues. So, it’s all red. Boom, simple enough.

Now HEX colors is very similar. It consists of the hashtag sign #, and then 6 hexadecimal digits, which are 0123456789ABCDEF, with F being the highest digit. Like RGB, the first two digits of HEX are reds, the second two digits are blues, and the third couple of digits are greens. So, to write the same color code above, you’d do style="color: #FF0000" to get red, because you have FF for reds, 00 for blues, and 00 for greens. Simple? Simple.

Don’t worry, you won’t have to come up with RGB and HEX colors yourself. There’s plenty of websites and programs and color pickers out there to help you with that. Here’s a few:

Try adding colors to various tags on the page! You can make your <h1> the color #005DFC, your <h3> tag rgb(242,127,56), and your <p> tag lightblue. Keep playing til you’re happy.

Now, you might see the syntax in your HTML journey where you actually have the color attribute, like <p color="red">wut</p>. Though this is technically allowed, please don’t do this. Please. You’ll be so much happier in the long run, I promise.

Width and Height

So, what if you want to make a picture or a paragraph a different size? Easy peasy.

There are two options you can use, the style attribute and the width and height attributes. I’ll show you both.

Take this block of code here and stick it into style1.html:

<img src="https://i.imgur.com/wjiVXJe.gif" />

Now, let’s just say you want the image to be an exact size, say, 600x800. All you need to do is add width and height attributes to do just that!

<img src="https://i.imgur.com/wjiVXJe.gif" width="600" height="800" />

Load that baby in a browser. Boo yah. But, you’ll notice that the proportions of the image are a little off. What a pain. That’s actually pretty easy to fix. Let’s say that you absolutely have to have the width at 600 pixels, but the height can slide. It’s as easy as taking out the height attribute.

<img src="https://i.imgur.com/wjiVXJe.gif" width="600" />

Refresh dat page. Huzzah. Same works for if you have a set height that you want, just include the height attribute and not the width.

Now, you can also do these changes with the style attribute.

<img src="https://i.imgur.com/wjiVXJe.gif" style="width: 600px" />

Simple enough! Now, we’ve looked at the style attribute a bit now but I haven’t explained the syntax. The style attribute is for inline styles. This means that you’re styling your HTML directly in each element, rather than using CSS. But, we haven’t gotten that far yet, so I won’t go into that part.

Now, the syntax within a style attribute is a little funky. It is always style="property: value", where the property is literally a property of the tag you’re editing (for example, color, width, height), and the value is to what you’re changing or editing the property (for example blue, 600px, #FF0000). If you have more than one property that you want to style, for example both height and width, you put a semicolon between delarations. So, in our example, if you want to edit both height and width of our image in the style attribute, we’d do:

<img src="https://i.imgur.com/wjiVXJe.gif" style="width: 600px; height: 800px" />

Why is the syntax this funky? Well, that’s because it’s secretly CSS syntax. But we’ll get into that more later.

Borders

What if we have a paragraph IN A BOX. That’s right. Kind of like a table. But not. That’d be cool. Of course, there are plenty of other things that can have a border. Buttons (we’ll get to those later), color blocks (also later), and images, and MORE can have them. Mmmhm.

Let’s take the same image we played with before:

<img src="https://i.imgur.com/wjiVXJe.gif" />

Now, you can add border="5" to this and you’ll get a border with a thickness of 5 pixels around the image. But, this attribute is actually no longer supported for things other than tables (oh yeah, we used this for tables. Memories.), so we can do this a better way. You guessed it. style is coming to SAVE THE DAY.

The styling for borders with the style attribute is a bit different than just adding border="5", but it’s also much more powerful. Let’s change our code:

<img src="https://i.imgur.com/wjiVXJe.gif" style="border:5px solid black" />

Whoa. That’s a lot of crap in there. Let’s break it down.

The first part of the declaration is obvious, border. This is the property that we’re editing. Man, this is easy.

Next, we have 3 parts in the value section. The first part is 5px. Firstly, px stands for pixels. We used this above for our width and heights as well. You always have to include the units (just like in 5th grade math) in your styling, and our units here are pixels. Now, that whole first part, 5px, is the border’s thickness. You guessed it: it’s 5 pixels thick. Gosh you’re smart. The next part is the border style. You can plug in several words here, as indicated on this webpage. We used solid, but you can also say dotted, dashed, or double. There are some other words you can use, but those depend on the color of the border. Color? What? OH YEAH. That’s the third part of the border style. You can stick in any color for that, but in this example, we have black.

Let’s mix it up a bit with different borders for you to check out. I’m just going to keep using the same image, you can replace it with whatever. Stick this in the <body> tags of style1.html and check it out, and play with the values yourself!

<img src="https://i.imgur.com/wjiVXJe.gif" style="border:5px dotted #ffcc00" />
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:10px ridge rgb(77, 145, 99); width: 300px" />
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:8px outset red" />
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:3px double #333a21; height: 30px" />

Notice how I added width and height to a couple of them. We’re getting incestuous with our stylings. Aww yeah.

Text Styles

Besides having header tags and colors, there are other text styles that you can use. What if you want bold text, or italics? Different sizes? Once again, the style attribute comes to the rescue.

Add the following to style1.html in 3 - Styles:

<p style="text-align: center; font-weight: bold">This text is magnificent.</p>

Load that in a browser and check it out. YUS. You’ve got some magically centered, bolded text! The properties defined here are pretty simple to follow. text-align lets you align your text either center, left, or right. Mess around with that so you get it. font-weight, you guessed it, edits the weight in your text. It can have the values normal for normally weighted text, bold for thick characters, bolder for thicker characters (specific, right?), lighter for lighter-weighted characters, and the numbers 100, 200, 300, 400, 500, 600, 700, 800, and 900 (where 400 is the same as normal and 700 is the same as bold).

Play with this one now:

<p style="font-family: Arial; font-style: italic">This text is magnificent.</p>

Browser time. You’ve now got some text in the font Arial, and it’s italic! WOOO HOOOOOO. The properties we used here are font-family and font-style. For the former, you can choose a lot of fonts, but you have to be careful. Not every computer has the same fonts. This is just my personal opinion: don’t put something here besides Arial unless you’ve done some JavaScript magic. And because I’m assuming you don’t know JavaScript, don’t use this unless you’re changing this to Arial. At least not yet. :) And for font-style, it can be normal, oblique, and italic. You can play with those now, it’s pretty straightforward.

The `<head>` Tag

Before we start going insane with how good you are at HTML, let’s start looking at something that you haven’t played with yet. The <head> tag.

I mentioned before that in the <head> is information that the user doesn’t see, so it’s not that big of a deal, right? WRONG. It’s not all about looks. That’s at least what I try to tell people when they see me.

So. What else can go in the <head>? We’ve already got <title>, which we’ve talked about already to help search engines find us. What if we want to help the search engines out a bit more? Incoming, the <meta> tag.

The <meta> tag gives metadata about the HTML document. Metadata will not be displayed on the page, but machines can read it. An example of metadata not on a webpage is in a typical music file. When you have a music file on your computer and you open it in some media player of some kind, it shows the album title, the artist, the genre, and other information about the song. This information is metadata. The user can’t see it directly in the music file, but your music players can read it and will tell you what it is. So, on a website, this metadata is used by search engines, your browser, and other web services to make your website easy to find, read, and display.

There are 4 important uses for the <meta> tag. There are plenty of other uses, but let’s be honest, I don’t care about them right now, and I don’t think you do either. Open up the 4 - Head (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor.

Defining keywords for search engines. Let’s say that you have a website that’s about cooking, hence our filename. You want people searching for your website to be able to find it. So, you can add the following right before the <title> tag:

<meta name="keywords" content="cooking, cook, recipe, food, microwave">

Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice!

Defining a description of your site. Again, this one is for the search engines. Whenever you search for a website, there’s a tiny description in the search results. Go search for anything right now, and you’ll see it. So, you can define what that is with this snippet:

<meta name="description" content="The best cooking website in the entire universe. You're welcome.">

Add this right after the keywords line in cooking.html. Now if people were searching for this, they’d get this description and instantly see that your website is the best cooking website in the universe.

Defining the author of a website. Let’s say that someone’s looking for the author of your website, because your writing style is sexy. Or something. You can let them know who you are with the following:

<meta name="author" content="Sexy McGoodlooking">

Add this after your description line, and stick your name in it! I think I got it as close as possible.

Refreshing your document every 30 seconds. This one is for your browser. Let’s say that you have comments available on your recipes, and you want to have the page refresh so the comments can appear “live”. Just add this:

<meta http-equiv="refresh" content="30">

And there you have it, a self-refreshing webpage. You’re so good at this.

Putting it all together so far

Okay, you have a pretty solid understanding of stuff so far. I want you to take cooking.html, and make it shine. Resize the images so the page is more uniform. Add borders to them. Change the font styles and weights. Change the colors. Add some keywords in the metadata and change the title of the page. Using the information I’ve given you so far, you can make a pretty good looking site!

What, why did we stop?

This concludes Part 1 of this tutorial! You’ve done such a great job so far. You’re so hot. You can find Part 2 here. Go get ‘em!

HTML+CSS Tutorial, Part 2

Mon, 10 Feb 2014 00:00:00 GMT

What

This is Part 2 of this tutorial, where we start from the very beginning of HTML and CSS. You don’t need to know anything about HTML and CSS or anything about code to start.

You can find Part 1 here.

I’ll included some tutorial files for you to play with and check out here: HTML+CSS Tutorial Files

When

Now. Or whenever. I’m not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever.

Where

On a computer. Here. I have this tutorial hosted on my GitHub account if you’d like to look at it there, or if you’d like to suggest improvements!

Why

HTML (this half is in a separate post, for your readability, because I care)
- Editors
- Tag Structure
- Text Structure
- Links
- Other tags
  - Images
  - Line Breaks
  - Tables
- Making Things Gorgeous The Wrong Way
  - Colors
  - Width and Height
  - Borders
  - Text Styles
- The <head> tag
- Putting it all together so far
CSS
- Classes and IDs and other Segregation
  - Classes
  - IDs
  - Other Segregation
    - The <span> tag
    - The <div> tag
      - Background color
      - Floating
      - Positioning
      - Margins and Padding
      - Z-Index
- The <link> Tag, Comments, and other Developer Joys
  - The <link> tag
  - Commenting
    - HTML Comments
    - CSS Comments
  - Other Developer Joys
    - Forms
    - HTML5 and CSS3
    - How To Meet Ladies/Laddies (Get it? HTML Jokes are the best…)
Final Project!
And now, the end is near

CSS is magical, and now you’re gonna learn it.

So far, we’ve been making things pretty the wrong way. So, we’re going to learn it the right way. So excited.

Right now, I’m going to show you how to write CSS just straight in your HTML documents. That’s still kind of wrong, but it’ll give you the basics. After that, we’ll move into the big leagues and have separate files for everything. Pumped.

Open up your 3 - Styles folder again and open style2.html in your favorite editor. This site is pretty barebones. Let’s take out the barebones part and just make it pretty.

We’re going to be working in the <head> tag again. Underneath the <title> tag, stick in the following:

<style>
	body
	{ }

	h1
	{ }

	p
	{ }

	ol
	{ }
</style>

Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for Cascading Style Sheets. Gee whiz, that word style is everywhere. And it’s true. The style attribute is for styling inline HTML (just that line of code), the <style> tag is for holding CSS, and CSS defines the styles! Let that sink in. Nice. Stylish. Just like you.

Now, you’ll notice some familiar keywords in there, in particular, body, h1, p, and ol. That’s right, they’re the tags we know and love! But, in CSS, these are called selectors. The selector tells us what tag you’re about to style. So, whatever code you put in between the curly braces {} after the body selector will affect everything in the <body> tags. Whatever you put in the braces after the p selector will affect what’s in the <p> tags. Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the h1 selector, it won’t affect whatever is in the p selector’s tags. Each portion of code selector { code } in CSS is called a declaration. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on.

The code that we’re going to be putting in each declaration is the same syntax as the code that we normally put in the style attribute. How convenient. So, change your code above to the following:

<style>
	body
	{
		font-family: Arial;
	}

	h1
	{
		color: red;
		text-align: center;
	}

	p
	{
		font-weight: bolder;
	}

	img
	{
		width: 400px;
		border: 5px solid #333333;
	}

	ol
	{
		color: #333333;
	}
</style>

Recognize that? It’s exactly the same! For each selector, there is a property of that selector, and each property has a value, just like how we wrote it in the style attributes!

You will always have your CSS in the syntax, selector { property: value; property: value; }. I’ve only shown you some properties so far, but don’t worry. There are plenty more to come.

Try playing around with the CSS we have right now. Edit the colors, add some borders, change the font styles. Don’t forget your semicolons!

###Classes and IDs and other Segregation

So, you have some of the CSS basics down already. You’re so smart. It’s really a simple language, once you know the basic syntax. So, now we’ll get into more fancy stuff. What if you want to edit several tags differently?

Classes

Let’s say that we have 8 <p> tags on our HTML page (hint: open style3.html in the 3 - Styles folder). If we want to style each of these tags differently, we can use classes. A class is actually an HTML attribute that you can name whatever you want. Check out style3.html to see the classes I added to the <p> tags on the page. When you add a class, the user doesn’t see it. But, you can style specific classes to do what you want, instead of having all <p> tags be the same.

How about we style one of the classes specifically? It’s simple. Just take the class name you made up (I’ll use the poemtitle class for my example) and add a period . in front of it to select it in CSS, like so:

.poemtitle
{

}

And there you have it! Even though you might have different styles for your paragraphs, you can style the ones of class poemtitle individually. For this example, let’s make all paragraphs with the font family Arial, the poemtitles font weight bolder, the authors the color #555555, and the poems in italic. Try doing it on your own if you can (just put your code in the given <style> tags), but you’re welcome to cheat:

p
{
	font-family: Arial;
}
.poemtitle
{
	font-weight: bolder;
}
.author
{
	color: #555555;
}
.poem
{
	font-style: italic;
}

Gosh you’re good at this. Go eat a cookie.

[Pausing here for cookie break]

IDs

Now, let’s talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the id attribute like so:

<p id="special">This is so special that I want it uniquely styled forever.</p>

When you want to style your IDs, you put a hashtag # before it in your CSS, like so:

#special
{

}

Remember: You can only use an ID once. IDs are more helpful when you’re controlling the element with JavaScript, not styling, but that’s something for another day.

Other Segregation

Let’s say that you want to separate individual text in your paragraphs or sections on your page. Let’s introduce 2 new tags: <span> and <div>.

The `<span>` tag

The <span> tag is pretty invisible unless you style it. It’s used to group inline-elements (so like a word in a paragraph), and it doesn’t actually do anything unless you style or manipulate it with something else.

So, let’s say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes <span>. For example:

<p>"My grandmother started walking <span>five miles a day</span> when she was sixty. She's ninety-seven now, and <span>we don't know where the heck she is.</span>" </p>
<p>~ Ellen DeGeneres </p>

In the above quote, you might want to style the <span> tags differently than the rest of the paragraph. Maybe you want those words bold, or italics, or in red. Now you can.

Add some <span> tags around your favorite lines of the poems in style3.html of the 3 - Styles folder. Then, put the following CSS in your <style> tags:

p span
{
	font-style: italic;
}

Wait a minute. Hold up. p span?? WHY THE SPACE? Calm yourself, I’ll tell you. This is called nesting CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect <span> tags within <p> tags. So, if you put <span> tags around a word in your <h1> tags, your CSS will not affect it. You can still have a plain span selector, or nest it in one of your classes too:

span
{
	font-weight: bold;
}
.author span
{
	color: #999999;
}

Make sense? I hope so. To sum up: <span> tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next.

The `<div>` tag

Alrighty. Go enjoy a beach vacation and then come back to this.

Welcome back.

The <div> tag is very similar to the <span> tag, in that it separates a section of something but doesn’t do much else. However, the difference with <div> tags is that they are block level elements, not just within a line of text.

The <div> tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let’s play with it!

Open up the 5 - Layout folder, and use your editor to open homepage.html.

<!doctype html>
<html>
	<head>
		<title> My Website </title>
		<style>

		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="menu"></div>
		<div class="content"></div>
		<div class="footer"></div>
	</body>
</html>

Besides the <div> tags, everything here should look familiar. Each of the <divs> have a class, which means we should style those, right? Right.

Within those <style> tags, let’s add some pizzazz. First, let’s throw in what we’ll be styling: the <html> (it is unusual to style this, but I’ll explain why we are later), <body>, and each of the 4 classes:

html
{

}
body
{

}
.header
{

}
.menu
{

}
.content
{

}
.footer
{

}

This should be straightforward for you so far. The first thing we’ll do is create our layout by making each <div> a different size.

html
{
	height: 100%;
}
body
{
	height: 100%;
}
.header
{
	width: 100%;
	height: 60px;
}
.menu
{
	height: 100%;
	width: 15%;
}
.content
{
	height: 200px;
}
.footer
{
	height: 60px;
	width: 100%;
}

Whoa ho ho, slow down there. What the heck is with these % signs?? Well, what this means is that if, for example, a tag’s width is 75%, then it’s width on the page will be 75% of it’s containing element. So when you see that the .menu class has a width: 15%;, it takes up 15% of its containing element’s width, which is the <body> tag.

Typically, the height property defaults to 0% and the width property defaults to 100%. This is why we had to style the height properties of both <html> and <body>. If we had just made our .menu selector have a height of 100%, we know that 100% of zero is just zero, so we wouldn’t have a menu showing up!
When we made the <body> tag have height: 100%, it also would still be zero, because our <html> tag also had a height of 0 without the CSS helping it out. Now, if we had just said height: 50px; for .menu, we wouldn’t need the height fixes for <html> and <body>, because it’s given a set value, not a value dependent on others. Makes sense? I hope so. You’re hot.

Okay, so if you open homepage.html in the browser, you see nothing. That’s okay. Let’s change that by learning a few new CSS properties!

Background color

One property that you will learn to know and love is background-color. It does exactly what you would expect it to: it sets the background color of the element it is styling!
You can fill it in with HEX colors or RGB colors, just like we learned earlier, and the default color is white.

Let’s add some backgrounds.

html
{
	height: 100%;
}
body
{
	height: 100%;
}
.header
{
	background-color: #99B5DD;
	width: 100%;
	height: 60px;
}
.menu
{
	background-color: #DE90B1;
	height: 100%;
	width: 15%;
}
.content
{
	height: 200px;
}
.footer
{
	background-color: #0F215D;
	height: 60px;
	width: 100%;
}

Save in your editor and now refresh in that browser! WOW. COLOR. Now, our site definitely isn’t perfect yet. Let’s throw some MORE new CSS properties at you!

Floating

One property that you will probably use fairly often is float. This is one of those properties that you will learn to both love and hate. It’s kind of magical. So, let’s say that you want to have a picture in a paragraph. When you see a picture in a news article or even a paper you’re writing, the picture is either on the left or the right. It’s the same in CSS! If you wanted to put a picture in a paragraph, you’d make the <img> tag inside a <p> tag have the properties float: left; or float: right;. So, what does this have to do with <div> tags? Why could you potentially hate it?

I’ll tell you.

With CSS float, a given element can be pushed to the left or right, allowing other elements to wrap around it. An element with float affecting it will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

Pretty simple, right? Right. Now, here’s the cause for hate: sometimes, float just doesn’t stop. It has the potential to mess up your layouts and have things move around other things, and really just give you a headache. How do you stop that?

With the clear property! On the element(s) after any floated elements, make sure that they have clear: both; on them (we say both because it turns off both left and right floating). Let’s add float: left; to the .menu and .content sections, and clear: both; to the .footer:

html
{
	height: 100%;
}
body
{
	height: 100%;
}
.header
{
	background-color: #99B5DD;
	width: 100%;
	height: 60px;
}
.menu
{
	background-color: #DE90B1;
	height: 100%;
	width: 15%;
	float: left;
}
.content
{
	height: 200px;
	float: left;
}
.footer
{
	background-color: #0F215D;
	height: 60px;
	width: 100%;
	clear: both;
}

Now if you refresh your browser, things are starting to look a bit more sexy. Like you.

Let’s add more delight to this! So let’s think, what if you’re on your website, but you want to see the footer. You scroll down. What if, though, you want to see the header again? You’d have to scroll back up.

That’s exhausting.

Your poor finger.

Let’s make it so that your header and footer are always on the top and bottom of your screen, and only your content moves!

Incoming, the position property.

Positioning

The position property is pretty much exactly what one would expect a positioning property to do: It positions things.

It can have several states, but we’ll focus on the 3 states you’ll probably use most: absolute, relative, and fixed (the default state is static, but you will rarely need to work with this).

In absolute positioning, the selected element will be placed in an exact location on the page, and moves with the page. So, in our example, the header could be placed at the top of the page and the footer at the bottom, but when you scroll, they will move with the page and they won’t stay where they are supposed to. Some people like this, some don’t. In our case, we won’t use this.
In relative positioning, the selected element will be placed relative (fancy that) to its default position. I’ll show you an example of this later.
Now, fixed positioning is just like absolute positioning, except that once an element is placed in an exact location on the page, it is stuck there. A similar example is like a watermark on a video. It stays the same there, no matter what the content is.

How do we actually position things after you use position? You can use top, bottom, left, and right to place it. So, for example, if you want a header bar to be at the top of the page (but it’s okay if it scrolls with the page), you’ll have position: absolute; and top: 0px; because you want it to be 0 pixels from the top. If you have an image on your page that’s sitting on the left of your document, but it’s way too far left, you can do position: relative; and left: 5px to scoot it 5 pixels to the right (because you’re adding space to the left). Another more complicated example could be if, say, you want a 50px by 50px image to stay in the bottom right corner of your page as you scroll, you could do position: fixed; and right: 50px; and bottom: 50px. You’ll understand it more as we use it!

So, let’s get rid of our float on .menu and .content, and the clear on the footer. Let’s position everything using position instead, like so:

html
{
	height: 100%;
}
body
{
	height: 100%;
}
.header
{
	background-color: #99B5DD;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 60px;
}
.menu
{
	background-color: #DE90B1;
	height: 100%;
	width: 15%;
	position: fixed;
	left: 0px;
	top: 60px;
}
.content
{
	height: 200px;
	position: absolute;
	top: 60px;
	left: 15%;
}
.footer
{
	background-color: #0F215D;
	position: fixed;
	bottom: 0px;
	height: 60px;
	width: 100%;
}

We are starting to look really hot now. If you refresh your page in the browser though, you’ll notice that there’s a little space to the left of our header and footer. Why the heck is that happening?

I’ll tell you.

Margins and Padding

I made the diagram above to show you what the heck you’ll be working with.

First, let’s look at the CSS property margin. Like you can see above, margin is the space outside the content’s border. Think of it as the 1 inch margins when you write a paper, or the margins of the pages of a book.

The HTML <body> tag actually has a natural margin, which is why our header and footer have the space on their sides. S o, let’s add margin: 0px; to our <body> (that’s all we’ll change right now though):

body
{
	height: 100%;
	margin: 0px;
}

Now, let’s talk about padding. Padding is the space inside the content’s border. Now, if you look at our .content currently, it is uncomfortably close to our .menu. These things are not meant to be touching. I would insert a joke here but you can figure out what the punchline would be.

Anyway.

Let’s add some padding into our .content and .header so that our text has some breathing room. Our CSS should look like this now:

html
{
	height: 100%;
}
body
{
	height: 100%;
	margin: 0px;
}
.header
{
	background-color: #99B5DD;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 60px;
	padding: 10px;
}
.menu
{
	background-color: #DE90B1;
	height: 100%;
	width: 15%;
	position: fixed;
	left: 0px;
	top: 60px;
	padding: 10px;
}
.content
{
	height: 200px;
	position: absolute;
	top: 60px;
	left: 15%;
}
.footer
{
	background-color: #0F215D;
	position: fixed;
	bottom: 0px;
	height: 60px;
	width: 100%;
}

Oh darn! Did you see how our header expanded? If you did this right, our header is now starting to overlap the menu and content. Crap.

There is a way to fix this.

So, instead of adding space to margins and padding on all four sides, you can add them just to the top, bottom, left, and/or right. There’s a few ways to do this:

margin: 5px 10px 15px 0px;
- top margin is 5px
- right margin is 10px
- bottom margin is 15px
- left margin is 0px
margin: 15px 0px 5px;
- top margin is 15px
- right and left margins are 0px
- bottom margin is 5px
margin: 5px 10px;
- top and bottom margins are 5px
- right and left margins are 10px
margin: 15px;
- all four margins are 15px

The same goes for padding, you can also do padding: 5px 10px 15px 0px;, etc. for all of the properties above. We’re going to make some changes to both the .header and the .menu here:

html
{
	height: 100%;
}
body
{
	height: 100%;
	margin: 0px;
}
.header
{
	background-color: #99B5DD;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 60px;
	padding: 0px 10px;
}
.menu
{
	background-color: #DE90B1;
	height: 100%;
	width: 15%;
	position: fixed;
	left: 0px;
	top: 60px;
	padding: 10px 0px 0px;
}
.content
{
	height: 200px;
	position: absolute;
	top: 60px;
	left: 15%;
	padding: 10px;
}
.footer
{
	background-color: #0F215D;
	position: fixed;
	bottom: 0px;
	height: 60px;
	width: 100%;
}

Now, with all that you’ve learned so far, you should probably make this a really great, functional website. I’ll teach you just one more thing, and then I’ll set you free like a bird or something.

Z-Index

The property z-index isn’t one that you’ll run into super often, but it’s something that will help you in the long run.

Now, if you think of your screen as a stack of layers, like a stack of paper on the screen. Layer 1 is the lowest layer, and the higher the number, the higher the layer.

The numbers in z-index are the same. If an element has z-index: 0;, then it is a bottom layer. If you have an element with a z-index: 5;, it’s going to be on the 5th layer.

When you create a page and you don’t add z-index to anything, the layers are just in order. So in our example, the .header was created first, so it’s on the lowest layer, and the .footer was created last so it is on the top layer.

We don’t want that. What if your .content had a ton of information and you had to scroll the page?
The content would overlap on top of the header (because we just HAD to make our header fixed).

So, let’s add some z-index magic to our page! A couple things to note first:

z-index only works when you have already set the position of an element.
You can assign any number you want to z-index, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level.

Okay, I’m going to add some z-index properties to the page, and I’m also going to add some text changes that you have seen before (text-align, font-family) and one that you haven’t seen before (font-size… you get one guess to figure out what this does):

html
{
	height: 100%;
}
body
{
	font-family: Arial;
	height: 100%;
	margin: 0px;
}
.header
{
	background-color: #99B5DD;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 60px;
	padding: 0px 10px;
	font-size: 50px;
	z-index: 10;
}
.menu
{
	background-color: #DE90B1;
	height: 100%;
	width: 15%;
	position: fixed;
	left: 0px;
	top: 60px;
	padding: 10px 0px 0px;
	text-align: center;
	z-index: 5;
}
.content
{
	height: 200px;
	position: absolute;
	top: 60px;
	left: 15%;
	padding: 10px;
	z-index: 0;
}
.footer
{
	background-color: #0F215D;
	position: fixed;
	bottom: 0px;
	height: 60px;
	width: 100%;
	z-index: 10;
}

And there you have it! Look at your website in your browser and feel proud of yourself. Eat some cake. Do a dance.

Now you can see how flexible <div> tags really are. You can style them pretty much any different way you want without breaking a sweat.

So, you have this delightful homepage set up now, try adding some content and play with the CSS a bit to make it your own! Add colors, change sizes, the works. When you click on the links to the other pages, About and Contact, you’ll notice that they have no style right now (unlike you). Change that! Try making your own layout for each of those pages. If you’re really digging what we’ve made here, that’s cool too. You can copy over the styles to each page.

But hey, that’s a LOT of reusing code. Plus what if someone is trying to read your code, and they don’t get what you’re doing (because they aren’t as smart as you are)? Is there a better way?

Duh.

The `<link>` Tag, Comments, and other Developer Joys

Let’s just say you want to reuse your styles across your website on every page. It makes sense. It’d be kind of annoying to have drastic changes on every page.

The `<link>` tag

That’s where the <link> tag comes in! The <link> tag is an empty tag (like
and ), so it has no end tag, and it’s used to link to external stylesheets!

What the heck is an external stylesheet? Well, put simply, it’s CSS, in its own file.

You write the <link> tag like this:

<link rel="stylesheet" type="text/css" href="main.css">

Let’s take a look at those attributes. The rel attribute is for relationship. It specifies the relationship between the current document and the linked document, which will almost always be stylesheet. I’ve never actually seen it in action with anything other than stylesheet, but if you really want to know other values you can look it up. The type attribute will also pretty much always be text/css. If it’s ever anything else when you want to use it with CSS, I will be quite surprised. And finally, href. You remember this one, I hope! It’s just like our <a> tag. It is the URL of the stylesheet.

Let’s check out this <link> tag in action. Open up the 6 - Linking folder and open home.html, and paste the <link> line above on the line below the <title> tags in the <head>. Voila! That’s it. Refresh your browser and check out the magic. It should look just like what we made in the previous section!
Now, if you open the main.css file in your editor, you’ll see that it’s all the CSS you recognize and love, but there’s no <style> tags. Those tags aren’t needed when you are using a CSS file!

Commenting

Let’s just say that you want to show off your code to someone, but they’re not exactly sure what you’re doing.

You can add comments!

Comments in your code are blocks of text that will not be read by the computer. Every computer language has them.

HTML Comments

In HTML, a comment looks like this:

<!-- This is an HTML comment! -->

As you can see, it almost looks like a regular tag, with an opening . You can put this pretty much anywhere in your HTML files and it won’t affect your work!

Look inside the 7 - Project folder, and open index.html. You’ll see a few comments there. Notice how you can put them all on one line, or in a multi-line block! As long as you have a beginning , you have total freedom with comments.

CSS Comments

Don’t worry, you can comment your CSS too!

A comment in CSS is similar to HTML in that it has a beginning and end part, but it looks a little different:

/* This is a comment in CSS! */

Just like in the HTML comments, you have a beginning /* and an end */. If you open up main.css in the 7 - Project folder, you can see the comments I wrote in there!
And again, you can have single-line comments, and multi-line ones too.

Comments are great for keeping track of what you’re doing, especially if a project you’re working on spans over a period of time. You can make notes for yourself to check later, or you could just tell someone who is reading your code that they are attractive.

Other Developer Joys

There’s so many things that could go in this section for such a generic title. So, what am I going to tell you?
Well, I’m going to tell you what I haven’t taught you so far.

Forms

A common thing you’ll see on websites are forms, like textboxes, buttons, and checkboxes. I didn’t teach you these because you can’t do things with them unless you know a bit more than beginner knowledge, which isn’t the purpose of this tutorial.

If you’re really dying to see a button, here you go:

<button type="button">Click Me!</button>

And there you have it, a button on your website! If you actually want to know how to make the button or form do something, you’ll need to know some JavaScript. Until you do, here’s more information on buttons: W3Schools - HTML Forms

HTML5 and CSS3

If you’ve read anything about the internet and developing for it, you’ve probably heard some key words thrown around, and a couple of those key words are HTML5 and CSS3. What are those, actually? Well, HTML5 is the latest standard for HTML. The previous HTML version came out in 1999, which is quite a while ago. Unless you’re time traveling right now and you printed this out to read as you go.

Anyway. HTML5 was designed to deliver rich content without the need for additional plugins (for example, Shockwave Flash, Silverlight, etc.), and can handle everything from animation to graphics, music to movies, and can also be used to build complex web applications. Not to mention the fact that it works on every device, from tablets to phones to your standard computer.

CSS3 has a bunch of new features too. From new selectors to fancy text effects to 2D/3D tranformations, there’s just so much to learn!

If you want to read more about HTML5 and CSS3, check out some of the links below. If you feel like you’ve mastered the materials you learned here, you’re probably ready to start diving in further!

How To Meet Ladies/Laddies (Get it? HTML Jokes are the best…)

Honestly I have nothing to put here I just like the joke that HTML stands for that.

I hope your HTML is spin and . Heh.

Final Project!

Alrighty! So you’ve looked at the 7 - Project folder a bit, but I haven’t told you what that folder is for yet.

Well guess what.

It’s a project. [confetti]

With all that you’ve learned so far, make something! I want you to make a website about the most attractive person in the room.

You.

Put a photo up of yourself, add a biography, talk about your skills (be sure to include HTML and CSS among them) and experiences, make it the online version of you.

Use <div> tags and CSS to make a really awesome layout. Style everything in the text from <h1> to <p>.

Include lists <ul> and links <a>! Make it sparkly.

I made your homepage for you, and your main CSS document. But don’t let that limit you! Add as much as you want, and experiment!

The best way to learn is by doing. Do as much as you can until you think you have everything down pat.

And if you need help you can always come back and visit. :)

And now, the end is near

Actually, now the end is here.

You’ve learned pretty much all that I can teach you. Congratulations, really. I’m not even going to joke around here. You’ve accomplished something that will help you for years to come!

Show off your website to your friends, and be proud of what you’ve done!

And with that, I’m signing off.

Thanks for reading, you beautiful specimen, you.

Here come the 2013 Mashups!

Mon, 30 Dec 2013 06:00:00 GMT

Hey friends!

So, I think you’re really good looking.

You deserve the best.

So, I wanted to share with you my three favorite 2013 Mashups so far! I love mashup songs, the combination and layering of different music is my favorite to listen and study to!

Pop Danthology 2013: The artist here, Daniel Kim, makes my favorite yearly mashups by far. In this one, he combined 68+ songs from this year to bring you this!

DJ Earworm’s United State of Pop 2013 (Living the Fantasy): I don’t usually listen to DJ Earworm, but this is probably my favorite of his yearly mashups yet! It’s really epic sounding group of 25 songs from this year.

#AnDyWuMUSICLAND Mashup 2013: This one is SUPER fun. It might be because I like that he included a Les Miserables song in there… along with 64 others!! Something also cool about this one is that he lined up not only the songs, but the lyrics too (here’s a link to them).

So, I hope you enjoy the end of your 2013 school year, and I can’t wait to see you all again in 2014!

Inspirational quotes to get you through the day

Thu, 12 Dec 2013 06:00:00 GMT

Hey. You’re looking ravishing as always.

Sometimes when I’m working hard over several hours on homework, it’s hard to stay motivated to keep going. It’s then that I try to listen to advice that people have given me to keep me working.

Here’s some of that advice, for you.

“The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.” Steve Jobs

“No matter what you do, you’ll make it through. What doesn’t kill you makes you stronger. The thing they don’t tell you is that it nearly kills you.” Tyler Arnold

“Life’s too short to be stuck in a job you hate.” Kathryn Minshew

“If you really want to know where your destiny lies, look at where you apply your time. Time is the most valuable asset you don’t own. You may or may not realize it yet, but how you use or don’t use your time is going to be the best indication of where your future is going to take you… Don’t follow your passions, follow your effort. It will lead you to your passions and to success, however you define it.” Mark Cuban

“Do what you say you’re going to do.” Danielle LaPorte

“Work hard and be nice to people.” Marie Burns

“In chaos, there is opportunity. Most major career accelerations happen when someone steps into a mess and makes a difference.” Kristi Hedges

“You can do this. You wouldn’t be given all the work in front of you if you couldn’t do it. Also I think you’re hot.” Cassidy Williams

I am better than you at everything

Mon, 09 Dec 2013 06:00:00 GMT

Hey.

I think you’re great.

Really.

I’ve noticed that a lot of times when you’re in a tough class like calculus or physics or Russian Literature or something, something happens: It breaks you. You were a great student until you hit that class. Suddenly, you’re struggling. You’re not just “getting” it. You have to study harder than you’re used to, and things still don’t seem to make sense.

What the heck, school.

And then, here comes in that one person. The one person that ruins the class curve. The person who does just “get” it.

They’re the worst.

The worst part about them is that you don’t always hate them. Sometimes they’re even your friend. But when you happen to glance at their last test score with yours in the back of your mind, it’s all loathing. Not just for them, but for yourself.

“Why the heck don’t I understand this?” “I thought I was smart…” “Where did I go wrong?” “I’m just going to drop this class.”

Don’t drop the class.

The sad part about those people is that they often are the loudest about their grades. You notice them the most. And even worse is that because everyone is trying to hide the fact that they are also suffering as much as you are, they also murmur things like, “oh yeah it wasn’t so bad,” or, “yeah I did better than expected.” What those people don’t say is, “Well… I was expecting a low F so the D+ actually is better than I expected…” etc.

You are not alone.

Those people who act like they’re better than you at everything?

They’re not.

Don’t let that one test, that one project, that one class, and yes, that one person get you down.

Every single person hits something that gets them to this point. You’re going to be fine.

So sit down, close Facebook and Reddit and Tumblr and Imgur and BuzzFeed and Instagram and Pinterest and Twitter and Klout and YouTube and Vine.

Get to work.

You can do it.

Things you should have on your LinkedIn profile

Tue, 26 Nov 2013 06:00:00 GMT

Hello friends!

Now I know what you’re thinking. “I’m attractive, and that’ll get me a job after college. Why do I need a LinkedIn?”

Well, the harsh reality is, the world thinks you’re beautiful, but that’s the least interesting thing about you. It wants to see your work ethic, your personality, and your LinkedIn profile.

So let’s give the world what it wants.

Your LinkedIn profile is your public facing profile to employers all over the country. Help them help you find a job, internship, co-op, or work study!

Talk to you soon, my lovelies <3

Finding your dream major in college

Thu, 14 Nov 2013 06:00:00 GMT

It’s hard to pick a major sometimes. It’s scary too. I mean, you’re not DEFINITELY stuck with your choice for the rest of your life, if you don’t like it. But imagine if you loved your choice from the start, and that you can get your dream job right out of college??

I feel like that kind of happened to me. I asked myself several questions, and the job I got for after graduation is exactly what I want to do with my life!

So, I thought I’d pass along those questions. Who knows, maybe you’ll find something new about yourself.

I’ve always wondered what it would be like to do ____________, and I think it’s interesting to me because ____________.
If I had to go back to school tomorrow, I’d major in ____________, because ____________.
My co-workers and friends always say I’m great at ____________, because ____________.
The thing I love most about my current schoolwork/job/major is ____________, because ____________.
If I had the right skill set, I’d definitely try ____________, because ____________.
If my parents/boss/roommate/manager/professor would let me, I’d do more of ____________, because ____________.
If I had a free Saturday that had to be spent just “working” on something, I’d choose ____________, because ____________.
When I retire, I want to be known for ____________, because ____________.
If I could choose one friend to trade jobs/majors with, I’d choose ____________, because ____________.

What’d you come up with?

Crushing Procrastination in 3 Steps

Mon, 04 Nov 2013 06:00:00 GMT

Hey. I get you. You’re attractive, and you’re reading this.

You’re also probably not working on something you should be.

That’s okay.

BUT, procrastination is still a pain. There’s all kinds of ways to combat it so that you don’t end up suffering until the minute before something’s due. The phrase, “Due Tomorrow? Do Tomorrow.” is not something to live by. Instead think, “I will obey Cassidy.”

Prioritize! When you tell yourself, “Psh this is nothing, I’ll do it tomorrow,” you should actually block off some time the next day to work on it. Scheduling things gives you the structure and the dedicated time you need to actually make some progress.
Focus! Pick a task or assignment you’ve been putting off, and work on it for 20 minutes without looking up or stopping. Take a 5 minute break, and then do it again. This will help you form habits that will eventually allow you to be more productive, and feel like it too!
Get friends! If you’re tempted to procrastinate, ask a friend (or enemy, I guess…) to hold you accountable. Tell them what you want to accomplish, and your deadline. Ask them to check in with you for updates on your progress. You’ll be much more motivated when you know someone’s keeping tabs on your work, especially someone that you respect.

I bet you’re gonna rock this whole “not procrastinating” thing. I believe in you.

Design Your First iPhone App

Mon, 21 Oct 2013 05:00:00 GMT

Hey good lookin.

So, I’m a computer science major. Introducing myself that way usually sends people running for the hills. “I’m not tech savvy,” they say. “I could never do that,” they say.

They are wrong.

Anyone can code, if you put your mind to it. So, I’m going to show you the first steps you need to make an iPhone app of your very own. I’ll keep it general and let you follow more specific tutorials and such, but if you follow these steps, you’re on your way to building your own app. If you’ve got a great idea, and you’re good at the business side of things, there are plenty of learning resources and opportunities to help you with actually creating the next big app!

First of all, be sure you own a Mac. If you own a PC, you’re kind of out of luck. Don’t worry, I didn’t have a Mac for a while, so I just learned on lab computers and borrowed them!

If this is covered, it’s just a few easy steps:

Get an App Store Developer account. You can’t sell an app that you can’t list on the store. You have to set up an account that costs about $100 a year. Even if you don’t launch your app for a little while, it’s good to do. An App Store account provides access to helpful tools and resources for development.
Map out your app. What’s the look and feel of your app? What will the home screen look like? What pages do you need? What do you expect out of your users? How will it flow from screen to screen? There’s a great app called POP that helps you figure this out. You just draw out what each screen will look like on paper and take pictures of your drawings, and then it treats your sketches as a real app! It really helps you figure out the flow and design of things.
Put it together! The next, fairly intimidating, step is actually coding the app! But don’t let that scare you. If you’re willing to learn, you can totally learn to code with one of the following resources:

If you put your mind to it, you can learn it!

If you aren’t up for coding but you still want your idea to exist, you can hire a team. Yes, that sounds expensive, but even in just talking to friends and classmates, you might find someone!

There’s plenty of options for you to make your great ideas a reality. Good luck!

Tips for remembering names

Mon, 07 Oct 2013 05:00:00 GMT

Sup Tootsie Pop. You’re so pretty. I love what you’ve done with your hair.

So, when I’m at a meeting or in a club, and someone approaches me, here’s how the conversation usually goes: “Oh hey Cassidy, how has your semester been?” *terror* “Oh hey…you. It’s been great! How has…your stuff been?”

Then I stress eat or something while I listen to their interactions and hope they introduce themselves to someone.

“There must be a better way,” I whisper to myself, and a single tear slides down my cheek.

There IS a better way to try and remember names.

First of all, really focus. This sounds obvious, but think about it. When you meet someone, you’re often thinking about how you’ll respond next or what you look like or what they’re looking like. Stop thinking about that. Repeat their name in your head, and repeat it when they first say it. I guarantee it helps.

You can remember names based on your learning style too.\

If you’re a visual learner, look for a name tag or at their business card. If you’re in a more casual setting, ask them how they spell it. If you spell it in your head, you can better “see” their name and remember it.\

If you’re an auditory learner, repeat their name as often as you can (naturally). “Cassidy, what’s your major?” “Joel, did you go to the game last week?” “It’s so good to meet you, Shirley!” If you don’t overdo it, they’ll appreciate it as much as you do that you remember their name. If that doesn’t work, just ask them to repeat their name at the end of the conversation, like, “it was great meeting you! Remind me of your name again?” Boo yah. I mean don’t do that after a 3 hour conversation, but after a few minutes it’s totally acceptable.\

And if you’re a hands-on learner, you have to play with the name to remember it better. If you can’t write it down right away, come up with something in your head that’ll help you remember, like “Riley from Friley,” or “Jungle Jim,” or “Hannah Banana.” You interact with the name this way, and it’ll help you remember much better.

There’s always cop-out ways to find out too, like introducing a friend of yours to the person and hope they introduce themselves to your friend, or ask a buddy that might know. Those ways totally work too.

Good luck meeting people, my cream puff. I definitely don’t remember your name, and so my defense here is using complimentary nicknames to distract you. Whoops.

5 Questions to Ask Your Boss

Mon, 30 Sep 2013 05:00:00 GMT

A lot of you are working a lot. When you get a job, it’s always important to have good communication established with your boss. You should ask them these questions, not just as a student, but also in your future internships and full-time roles!

What’s the most important achievement you hope to accomplish in your current role? In asking this question, you can see what your boss/manager’s short-term motivations are, which will give you a better idea about what your goals and motivations should be. If yours match theirs, you’ll be better positioned for success to them.
What is the most important thing you care about? Chances are, your manager/boss reports to someone too. Unless your boss is the CEO. In that case, nice work, you’re pretty high up, bro. Anyway. asking this question will help you learn more about what higher-ups in your organization expect. Knowing these goals will help you better understand your own work, because you can see how you fit in the organization better.
What can I do to make you more successful today/this week/this month/etc.? You should always be trying to make your boss successful, because in turn you’re making yourself successful. When you get a direct answer to this question, you’ll know where to focus your energy at work, because you’ll know exactly what take priority. Plus your boss will like you.
How would you like to receive feedback and communication from me? Does your boss want you to respond to emails on weekends? Do they prefer phone, or email, or face-to-face? When you know how to deliver feedback, you’ll be more prepared to ask what you need, from deadline updates to project requests. If you get the insight, you’ll have a better sense of what to expect, and how you can handle it.
Why did you hire me? Especially when you start a job, you should ask this. You are often so excited to get the job that you forget to ask things like this, but it’s important, and here’s why: You know what they expect you to deliver. If they say, “you seem organized,” you know that they want you to produce organized work. If they say, “you seemed well qualified with your Excel skills,” then you know they want you to focus your work on spreadsheets. When you focus your work well based on their expectations, you’ll be up for bigger and better jobs later on.

So, I hope this was helpful to you! Good luck at your job, you’re going to kill it. :)

Networking as a college student

Mon, 16 Sep 2013 05:00:00 GMT

Hey friends!

So, an important thing that you’ll have to do in college is networking. Let’s face it, knowing people in the business you’re going into is essential.

But how do you meet said people? How can you connect with strangers?

I’ll tell you.

Build your online profile. Many people say, “oh, I can get a LinkedIn when I start looking for a full time job.” NO. Start now. Add all of your projects, skills, and experience (if any) to show you off. You can even generate a resume from your LinkedIn profile, how great is that? The next step here is actually connecting with people. Join groups you’re interested in, follow companies, and add people from whom you want to ask questions. Soon you’ll have your own network going there for people to introduce you to others and as a public profile for potential employers. Take it a step further and build your own personal website. There’s all kinds of free site makers out there, or if you’re really ambitious, you can make your own from scratch! If you want some inspiration, check out mine. I bet you can make yours better. 😉
Join professional organizations. There’s groups across campus like this. All you need to do is go to a couple meetings, and you can start to meet the alumni from the group and talk with companies that present! Myself, being a computer science major, lead the Computer Science/Software Engineering Club on campus, and we literally have companies emailing us every day asking to speak and/or hire our members. You can’t lose!
Get internships and work experience. Iowa State, for example, has some career fairs every semester, and also a whole online career management system (cleverly named CyHire), just for students to get some work experience under their belts. You can get internships in other ways too! For my first internship, I went to the career fair. My second one, I talked with my adviser and some professors in our department a lot, and when a company called them for recommendations, my adviser and professors recommended me! And for my third summer one, I went to a professional conference to their career area and interviewed on the spot. There’s all kinds of different ways to get the work, if you put your mind to it! The people you meet at your jobs are essential for your future recommendations, introductions, and opportunities later down the road.
Get a mentor. Mentors are an amazing resource that often go untapped. They are great people that have been in your shoes before, and can give you all kinds of great advice and introduce you to future connections! You don’t even have to go up to someone and say, “hey, be my mentor plz.” Just start asking them questions. Build a relationship. The word, “mentor” never has to escape your mouths if you let the relationship form naturally. My mentors that I have now are incredible. From scholarships to connections with companies to just general life advice, I feel like I can go to them for anything and they magically have the solution for me, and I love them for it!
Participate. You’re in your major because you like it, right? I hope so. So, prove it! Go out there and participate and do something with it. When you do so, you can meet people from all over who have similar interests and could potentially help you out in the long run. From conferences to competitions to events to clubs to meetings, participate in them! You’d be surprised how many people you’ll get to know.
Ask questions. I can’t emphasize this enough. It seems like a silly thing to advise you to do, but hear me out. Just ask. The worst thing someone can say is no. You want to know if an employer has an extra opening? Ask. You want to see if someone knows about scholarships for students in your major? Ask. You want an extension on a deadline? Just ask! One of my mom’s favorite phrases is, “the squeaky wheel gets the grease.” If you’re not asking for what you want, how will you ever get it?

I hope this helped you out in some way! Networking is an amazing skill that just takes a bit of practice. When used right, you can do great things with it.

A Weekend at PennApps

Tue, 10 Sep 2013 05:00:00 GMT

This past weekend I had the incredible opportunity to participate in PennApps, the largest student hackathon in the country, at University of Pennsylvania. It was AWESOME.

To those of you who don’t know what a hackathon is, basically you’re given a certain amount of time to make something. In our case, we had Friday, Saturday, and Sunday to build a working software application using technologies from companies like Venmo, Google, Twilio, Microsoft, Apple, SoundCloud, Dropbox, and more.

My team consisted of all Iowa State students; we were the first Iowa State team to ever be accepted and attend the hackathon!

Once we got on campus, we registered and got assigned tables for the weekend. There were tons of companies there who had technical mentors nearby for us to ask questions, and one company even took over a classroom and built a whole lounge for us to hang out on breaks! And then, CODING. Throughout the weekend we were fed and worked from way before dawn til way past dusk. One thing about weekend hackathons: you usually don’t get your normal sleep hours (I’m definitely still recovering). 😉

My team made a universal uploader for SoundCloud, you can check out our demo here! I made the user interface (the look and feel of the application), and my genius team members built out the backend for us to be able to upload to SoundCloud from SkyDrive, Dropbox, Google Drive, and more!

After hours upon hours of grueling, but fun work, we demoed in the gigantic gym on campus (funnily enough I slept on that gym floor for a couple hours Friday night…).

Our team was among 200 talented teams (over 1000 students) who had made everything from new texting apps to bitcoin exchangers to games to gyroscope extensions. It was awesome to see all the creativity flowing and the fast-paced energy around us.

All in all, we didn’t win, which is totally okay. We made an application I’m proud of, I got to see a lot of old friends from previous internships and events, we networked with companies, and we learned a ton!! I loved representing Iowa State there, it was fun hearing all the different places people had come from.

Now, time for a shameless plug: Iowa State is going to start hosting hackathons! We’re starting small (only Iowa State students and not for a whole weekend), and the club Digital Women will be hosting it in October. I’m helping plan it, and it’ll be so fun! If you’re at all interested in something like I’ve just said, don’t worry about how experienced you are or anything. You’ll be great!

And now, I’m going to catch some zzz’s…:)

PeAcE oUt GiRl ScOuT

Crushing the Impostor Syndrome

Tue, 23 Jul 2013 05:00:00 GMT

I originally wrote this post on CycloneLife.com for Iowa State, and it went completely viral on the front page of Reddit, featured on 99u.com, and several other blogs and websites.

So, I hope you enjoy!

Crushing the Impostor Syndrome

Hey friends. You look really good today. Nice shirt.

So, the other day, someone I work with (a genius, I might add) told me that they didn’t actually know anything about their job. I laughed it off and said they knew so much more than I did, they didn’t need to worry at all. Then they laughed at what I said, and said that I knew more than them!

What the heck.

They are lying.

Or are they?

This is a phenomenon called the Impostor Syndrome. You achieve things, you do assignments, and you go through school and work, hoping that nobody will realize that you have no idea what you’re doing. You say, “oh, I got lucky on that one,” or, “someone helped me along with that one,” or, “what I did really wasn’t that big of a deal.”

Have you ever thought that? If not, good for you. Stop reading this and go enjoy your summer. If so, welcome to the rest of the world.

Impostor syndrome is a real thing. Search for it all over the internet and you’ll find papers upon studies upon books upon articles of countless people going through the same thing.

“I have written eleven books, but each time I think, ‘Uh oh, they’re going to find out now. I’ve run a game on everybody, and they’re going to find me out.’” – Maya Angelou

Sometimes in classes and at work, I feel like I’m the only one who’s struggling. I’m the only one who’s not sleeping at night and spending countless hours on a single assignment or paper or program. Everyone else seems to just get it. It’s like I’m lying to everyone that I belong at that level, including myself. When I try to confide this in others, they just say, “don’t be silly, you’re great at this.” And all I can think is, “Crap, I’ve fooled them too.”

“The beauty of the impostor syndrome is you vacillate between extreme egomania and a complete feeling of: ‘I’m a fraud! Oh God, they’re on to me! I’m a fraud!’ So you just try to ride the egomania when it comes and enjoy it, and then slide through the idea of fraud.” – Tina Fey

Students don’t just feel this. Everyone encounters this at some points. But why? Why do we feel like this? Dr. Valerie Young says that, “The thing about ‘impostors’ is they have unsustainably high standards for everything they do. The thinking here is, If I don’t know everything, then I know nothing. If it’s not absolutely perfect, it’s woefully deficient. If I’m not operating at the top of my game 24/7, then I’m incompetent.”

“You think, ‘Why would anyone want to see me again in a movie? And I don’t know how to act anyway, so why am I doing this?’” – Meryl Streep

One day a couple of months ago at my internship, I wrote this fairly simple application for my team that would make one of their projects run more smoothly. When I showed it to them, I was terrified that they’d just be like, “that’s nice, Cassidy,” then go on with their work. But then a miracle happened. They were impressed. They asked how I did it. They asked if I’d talk at a lunch about the language and algorithm I used. I’m not saying this to brag. I’m saying this out of pure shock.

I came to a realization that can be explained by the following. I assumed that everyone around me was a super genius programmer, because they seemed like it. But in fact, everything I knew was not in their repertoire. I could teach them as they were teaching me. What?!?

So, how do you destroy the Impostor Syndrome? Here’s a few tips.

Be confident. Don’t just wait until you feel confident to act like it. Admit when you don’t know something, and be authentic and accept that you don’t need to know everything. Communicate and seek encouragement. It sounds like silly advice. But sometimes, you need a pep talk. When you’re feeling down about yourself, tell a parent, a teacher, or a close friend. Be willing to accept their encouragement and don’t just tell yourself that they’re just being nice! If you accept and internalize what they say, you might just live by it. Take risks, and get out of your comfort zone. When you tell yourself that you “fooled them again” or that you “got lucky again,” you’re going to start avoiding taking on challenges and opportunities just in case you won’t be able to pull it off like last time. Take that hard class with the difficult professor, take on the tough assignment at work, join a team that you feel is better than you are. You learn the most when you challenge yourself! So, with that, good luck. I know this was a lot to take in, but I want to tell you that you are great. You are smart. You’re about to go to the best university in the world (in my opinion anyway, people probably have others), take on impressive courses, join clubs I never could, and be successful.

You’ll do great.

Startup Weekend Ames

Wed, 17 Apr 2013 05:00:00 GMT

Have you ever thought about starting your own business?\

Well, this past weekend, Ames participated in Startup Weekend for the first time. Startup Weekend is an organization in which you spend Friday evening, plus all of Saturday and Sunday to try and build your own business or product from the ground up.

I participated with some of my friends and it was a blast! We worked hard all weekend on a phone app called “Finddit” that helps you find where you last left your car or bike or anything, plus you can share marked locations with friends (like if you’re tailgating and want to show where your tent is, or where a booth at the career fair is, etc.).

We pitched it in front of everyone there and got a lot of good feedback!

You should try something like this when you get the opportunity so you can get fabulous prizes and experience!

Happy Pi Day!

Thu, 14 Mar 2013 05:00:00 GMT

HAPPY PI DAY. For those of you who don’t know what Pi Day is, there’s the number 3.14159265358979…etc. which is a very significant number in all of our lives, and today, 3/14, CELEBRATES IT.

I’ve been celebrating Pi Day for many years now! I once memorized over 600 digits of pi to become 65th in the world and 18th for memorizing pi that year. I can still remember quite a few, but I’m out of practice.

ANYWAY, enjoy a slice of pie today, wear your favorite pi clothes (I am), and have a GREAT Pi Day!

Here’s my outfit for the day if you need some inspiration:

I went to the White House!

Tue, 05 Feb 2013 06:00:00 GMT

So, last week I told you I went to the White House for an event with my sister. NOW I AM BACK.

As a refresher (or if you didn’t read my previous post, we were invited to speak at the White House Tech Inclusion Summit! We were 2 of 10 girls in computer science picked to attend across the U.S. It was an awesome event, we got to meet a lot of cool people in technology and in the government and we spoke about women in technology and computer science education.

We also got to sight-see a little bit and eat with some important people from Microsoft and the National Center for Women & IT. It was a blast overall, and an incredibly impressive and motivating experience!

Anyway, that’s the update from this end. If you are a high schooler reading this and you don’t know what to major in, seriously consider computer science. You get to go amazing events like this one, and you’ll truly express your creativity in a fun and unique way!

What's a house that's white in Washington D.C.?

Mon, 28 Jan 2013 06:00:00 GMT

Hello my friends!

I hope you all had a splendid weekend, I sure did! I am here to tell you some thrilling news: My sister and I are going to speak at the White House!!!

We were told that we were invited early last week and of course we just had to say yes. We’re not sure of all of the details of the event, but we know that we will be speaking about women in technology and computer science education, and that only six girls were chosen to go! It’s super duper exciting, especially because we’ll be able to represent the state of Iowa and Iowa State for the first time at such an event.

We’re going this week, so plenty of pictures are to come! Have an AWESOME day!!

Grace Hopper in Baltimore!

Wed, 03 Oct 2012 05:00:00 GMT

Hey everyone!!

Right now I’m at the Grace Hopper Celebration for Women in Computing Conference in Baltimore, Maryland!! I got sponsorship from Microsoft to go and so far I’m having SO MUCH FUN. I have some friends here who came with me last year and also my sister! They got sponsorship through the Iowa State Computer Science department.

This morning we had our welcome in the Baltimore Convention Center, it was super glamorous.

Throughout the day we have seminars and sessions and later a career fair full of tech companies. It’s an awesome way to network with people and really celebrate women in computing!

So while you may be enjoying the lovely Midwest, I’ll be here in the humid East for the next week!!

SEE YA!

Facebook's 2012 Summer of Hack

Fri, 10 Aug 2012 05:00:00 GMT

Hey everyone!

So my friends and I were invited to the Facebook offices in Seattle for their Summer of Hack 24 hour Hackathon the other day. From Saturday 1PM to Sunday 1PM we had out our computers and just coded. It was SO fun! My friend Luis and I made a browser game where stars fall from the sky and you have to catch them, and you can tweet your score. Other people made things like Mac applications and collage designers! It was so fun! It took me FOREVER to recover from the lack of sleep though.

Here’s the code for our game!

But, to make it all even more worth it, I got to walk away with a nice bundle of swag.

This is how a rock star feels

Fri, 20 Jul 2012 05:00:00 GMT

SO, the other day, I had pretty much one of the best days ever.

I work at Microsoft this summer, in their advertising division. There was an email sent out to everyone asking for a trumpet player.

I am a trumpet player.

So, I replied. They immediately rented me one (I was the only one who replied) and said I’d be playing at this meeting for the end of the fiscal year (it was horse-race themed).

A week later, my team (we call ourselves The Dream Team) and I went to the meeting.

But it wasn’t just any meeting.

It was a 2000-person, division-wide conference.

Cue nerves.

So, I went to the back of the room and was told when I would be playing and how the event would work (basically I did introduction music).

And then several fast, nerve-wracking minutes later, it began. I got to the front where they had roses and fake grass (for the theme) and I blasted the horn to start the event!

AND HOORAH, I DIDN’T MESS UP!!

It was glorious. There was applause and free food.

After my introduction, they had a Microsoft-themed trivia contest for all 2000 people. They had everyone stand up and watch the big screen state the multiple choice question, and then answer it by raising hands for each option. If you got it wrong, you sat down. If you got it right, you stayed standing.

I was doing surprisingly well, some answers I knew, some were complete guesses. Eventually I turned around (I was in the front row because of the introduction), and only 4 of us were left standing. They called us up to the stage and had us introduce ourselves. I was the only intern who had made it that far!

They continued to challenge us, not just with Microsoft questions, but also with Kentucky Derby questions (thank goodness it was the ONE year I watched it!) and other general trivia.

And then, there were two, myself and one other person.

We were neck-in-neck for several questions. They actually ran out of them on the PowerPoint and were just coming up with some for us.

AND THEN, GUESS WHO WON??? (me!)

So yeah that was utterly STUPENDOUS. I got a money prize plus a big bouquet of flowers! It was so fun. My friends texted me saying, “This is how a rock star feels. Soak it in.” They had to be right.

Throughout the rest of the event I played the horn again a few times and enjoyed the free food.

At the end, everyone got free Microsoft advertising jackets! They are SWEET. Here’s the Dream Team and I together sporting them together with the flowers and decor behind us.

All in all, it was a fantastic day!!!

How my big bod broke a bus

Thu, 08 Mar 2012 06:00:00 GMT

So, every morning the buses to school (in Spain) are pretty crowded. There aren’t many regulations (actually there are none) on how many people can fit on a bus. Also, in general, it has been noted that the Spaniards are not afraid to push or cut in line to get on the bus. Normally, I usually just let them go and I get on the next bus.

On Thursday, this was not the case. When I approached the bus, there were just so many people that I was instantly separated from my friends Tasia and Madison at the stop. The bus was clearly full, and the bus driver yelled that he was going to close the door. It was at this moment my inner Spaniard came out, and pushed onto the bus anyway. I pushed about 3 people on so that I could get on too, and then a couple people saw what I did and followed. The bus was so packed that We didn’t have to hold on to anything, we were just sardines waiting to be eaten by the classroom and monotony of everyday movement.

However when the bus pulled away, I instantly noticed that we were a little heavy in front. When the bus stopped at a red light, there was air flowing out of somewhere. The bus driver looked worried. He had a student climb out to check the tires (he couldn’t get out himself because there were too many people). The student saw nothing, but there was clearly a lot of air and the bus was lower than usual. We pulled over and the bus driver called in, asking if he could keep going. His manager said no, and all of the students started yelling. Eventually the driver was convinced to keep going. The bus moved very slowly and tilted more than usual on the turns. When we finally got to the university and everyone piled off, the bus driver called in and the bus was out of commission. Supposedly there were only just a few too many students on the bus. Whoops.

Today I decided that I wasn’t going to push and I ended up missing two buses. If breaking the bus is what it takes, SO BE IT.

I can't see!

Fri, 20 Jan 2012 06:00:00 GMT

Today I was diagnosed with Thygeson’s superficial punctate keratopathy. It’s a rare eye disease. Party in the house! Naw not really. It hurts a lot. But through pain comes cool artsy stuff right? Right. If I could just see the screen in front of me properly.

I leave for Spain on Wednesday to study abroad.

I’ve taken up drawing more recently. I think it’s because of a few things, mainly because I’m bored at home while everyone’s at school, and because I can’t go do something else, I can’t drive with my eyes. :D

And now, to the sketchbook. I am going to draw… eh I don’t know. Something cartoony. Actually I’m gonna go play Tetris, THEN I will draw something.

Yeah.

That sounds cool.

System.out.print("My Major");

Tue, 22 Mar 2011 05:00:00 GMT

Well howdy! As the weather is warming up, so are my coding skills. That’s right, I’m a computer science major. I’m one of those rare cases who chose their major in middle school and I’ve been loving it since.

Many people don’t know everything you can do with computer science. You can go into Information Assurance, Computer Graphics, Artificial Intelligence, Virtual Reality, Software Engineering, and so much more! I’m not entirely sure which branch I’m headed into yet, because all sound so interesting! My classes for computer science are fun. I’m in ComS 228 at Iowa State now, and we’re learning the nitty gritty bits of the programming language Java. One of our recent projects in the class involved coding the game Tetris. Not only was making the game fun, but then we were able to play it to our heart’s content!

My second test of the semester is on Thursday! I have some more studying to do, but at least I like what I’m doing!

Just Dancing.

Sun, 02 Jan 2011 06:00:00 GMT

Got Just Dance 2. Changed my life. I recommend it.

Boo yah.

Sun, 19 Dec 2010 06:00:00 GMT

Aced all my classes for my first semester of college. BAM!!

So I’m feeling jolly.

My friend just added a new YouTube video of her singing a song called If (Bread). It sounds lovely.

The T in Often

Wed, 21 Apr 2010 05:00:00 GMT

It is common to pronounce the letter “T” in the word often. I must say this is a huge pet peeve of mine.

The stem word for often is “oft” — in which the t is pronounced. But when the ending “en” is added, the t sound is lost (though it remains in the spelling). There are, in fact, MANY examples of this sort of shift in English and in every other case the t becomes silent when followed by an -en or -le.

For example, soft (pronounced) vs. soften (silent).

More examples:

list -> listen
glisten
fast [as in ‘held secure’] -> fasten
haste -> hasten
moist -> moisten
nest -> nestle
castle; mistletoe; whistle; trestle; gristle; thistle

Unfortunately, so many people started to pronounce the “t” that many regard is as an acceptable alternative, in certain dialects. That’s the way language goes, I suppose, if enough people make the same mistake for long enough that it is no longer a mistake!

Amazing and Free Software

Mon, 22 Mar 2010 05:00:00 GMT

I’ve been “collecting” free software for ages, and now I think it’s time to start sharing the fun. Here’s a list of come of my favorite software that you can have for FREE!

Graphics

GIMP - Adobe Photoshop-like image editor
Sumo Paint - Online Photoshop-like image editor
Inkscape - Adobe Illustrator-like vector editor
ColorPic - Color picker (i.e. “Gee, I want to use the color of her shirt” *uses ColorPic*)
Blender - 3D content creation

Desktop Apps

Handbrake - Converts DVD videos to computer formats
DVDVideoSoft - Converts pretty much anything, anywhere from YouTube to PSP to MP3.
Skype - Online phone and video calls

Audio

Audacity - Incredible audio editor, plug-ins available
Juice - Organizes and captures your podcasts
EphPod - Similar to iTunes, but does more, including moving music from your iPod to a new computer!
WavePad - Audio editor (make sure you get the free version!)
Screamer Radio - Record internet radio in many different formats

Others

ADRIFT - Text/Interactive Fiction/Game generator

That’s all for now. Have fun!

The Wrist Keyboard

Mon, 02 Feb 2009 06:00:00 GMT

This looks fun, yes? It’s a keyboard for your wrist. It wraps around your arm and has a standard QWERTY keyboard. It comes in green and blue and black and “smokey,” and has glow-in-the-dark letters! It is built for harsh rain and weather conditions. Why you would be out in the rain with a keyboard around your wrist, I don’t know. Oh wait, I just read the site again and it isn’t rated yet for complete submersion in water. Darn.

Here’s the link to the site for it!

Hum de dum

Thu, 08 Jan 2009 06:00:00 GMT

I’m waiting for my internet/computer to be less slow, so I thought I’d write something.

But what to write?

Hmmm…

I’ll talk about nothing.

I have to figure out my electives next year and it’s CRAZZZZZZYYYYY.

They have to “make sense,” so there goes jewelry making or something.

I have a ton of room in my schedule for some reason, but I don’t know what to do!

AAAAHAHAHAHHAHAAAAAHHHHHHHH.

I completely forgot what I was doing (I’ve been browsing and stuff at the same time as writing this…).

Oh well.

So…

Today I had a SUPER small breakfast and I’ve been suffering throughout the day.

If you don’t have a breakfast I don’t understand you.

I have to study for math.

A lot.

I should probably stop typing.

But it’s so much FUN.

Oh well.

I should go.

I’m hungry.

But it’s too late to eat…

CANDY.

I’ll have a WarHead.

Delicious.

Yum.

I love candy.

SO GOOD.

*sigh*…

Don’t want to stop…

Fine. *Self control takes over*.

I’ll stop.

Good night.

Sleep tight.

If the bed bugs bite, harness their power and use it to take over something big like a mall or Canada.

Good bye.

Yay.

Must…

Stop…

Stalling…

Ugh.

Bye bye.

Adios.

Au revoir.

Hello.

Tue, 06 Jan 2009 06:00:00 GMT

I will post pretty much nothing that really matters here.

Cassidy Williams

Connecting the Logitech MX Creative Console to Elgato Lights

General review

Building a custom solution

Deep Dish Swift 2026 recap

Speaking at TechCamp Korea 2026

My rainbow sweater

I got yet another digital typewriter: The BYOK

A history of styling choices leading to native CSS

Styling todometer over time

postcss-nested vs. postcss-nesting

Pure CSS, baby

It’s about the journey, not the destination… but also the destination is cool

Notes for my future self on how to set up a camera for streaming

”Basic” settings for streaming

The framing

The colors

Before and after

Making art with CSS gradients and corner-shape and skew, oh my

Goodbye to an 11-year-old Issue

How passkeys work

What passkeys are and how they work

Passkeys vs. passwords

Why would I use these?

I am making videos again!

Improving my newsletter's open rate the hard(er) way

Making interesting borders with CSS corner-shape

Remaking the Linux "touch" command in PowerShell

A fun trick for getting discovered by LLMs and AI tools

Tricking the clanker… and then flipping it around

General rules/vibes

So… did it work?

Code Wave Build Log

How the game is played

Technologies and tools

Making the map

Actually coding

Scenes

Hoorah!

Appreciating Mary Cassatt now that I am a mom

Do not give up your brain

A career chat with students in the age of AI

Toodles, 2025

Work things!

Personal things!

Side project things!

Phew!

Wrapping up Blogvent 2025

I missed it!

Making the "End of Year Developer" nature documentary

CSS for markdown blockquote attribution

I like when apps are "finished"

I have become more of a writing utensil snob

Configure your repositories with .github

.github everywhere

.github in your repository

Issue and pull request templates

GitHub Actions/workflows

Community Health Files

Configuration files

GitHub Copilot custom instructions and agents

Oh my word stop

My inbox is so full

Things I would study more if I had time

Coming up with blog topics

Influencing without authority

Trying out Ente for media backup

Before: Amazon Photos

Now: Ente

All the options

Shameless referral

Bye

Vibe coding is boring

Podcasts I'm listening to in 2025

The Abilene Paradox

Food I recommend in Chicago in 2025

Pausing a CSS animation with getAnimations()

Sewing an e-reader case

Sewing is fun but inertia exists

Threading the machine is the hardest part of sewing

`postcss-nested` vs. `postcss-nesting`

`.github` everywhere

`.github` in your repository

Via `package.json`