2025-09-15 15:59:06
Hellllooo!
I hope your week was a good one. Mine was tiring (what else is new?) but I had a good time with family and friends. Let's boogie.
Was this forwarded to you? You can subscribe here!
100+ new CSS features from the past 5 years
Why do browsers throttle JavaScript timers?
How I Wish Web Components Worked
Don’t Inherit the Box Model
This week was kind of chaotic in the news, but I was mostly disconnected from it while hanging out with my kiddos, seeing relatives, eating with friends, and watching the k-drama Vincenzo (it's weird and very funny). I think it was good for my brain to not be hyperaware of everything!
I did make a tree visualizer (the data structure, not the nature kind), which was pretty fun. Here it is if you want to check it out!
No sponsor this week (the economy, amirite?), but I'm still grateful you're looking here. Have a good week, check out Ductts, check out PocketCal, and dream of a calmer tomorrow.
I'd appreciate deeply if you share this newsletter with your friends, coworkers, or anyone you think might like it. Or who might hate-read it. Or who might just be bored and want another email in their inbox every week.
<3
Last week, I had you sum up neighboring elements in an array! Awesome work Sreetam, Jonathan, Mike, Collin, Miguel, David, Elke, Muhammad, Victor, Gavin, Paul, Amine, Sergio, Ten, Leyan, and Kaartic!
This week's question:
You are given an array of arrays, where each inner array represents the runs scored by each team in an inning of a baseball game: [[home1, away1], [home2, away2], ...]. Write a function that returns an object with the total runs for each team, which innings each team led, and who won the game.
Example:
const innings = [[1, 0], [2, 2], [0, 3], [4, 1]];
> analyzeBaseballGame(innings)
> {
homeTotal: 7,
awayTotal: 6,
homeLedInnings: [1, 2, 4],
awayLedInnings: [3],
winner: "home"
}
(you can submit your answers by replying to this email with a link to your solution, or share on Bluesky, Twitter, LinkedIn, or Mastodon)
You Need to Be Bored. Here's Why. (video)
How celery salt wound up on the Chicago dog
Fixing the Biggest Problem With Mechanical Keyboards (video)
7 Questions from Aspiring Board Game Designers (video)
All 54 lost clickwheel iPod games have now been preserved for posterity
Roman numeral puns are awesome, and I, for one, will continue to make them!
That's all for now, folks! Have a great week. Be safe, make good choices, and write more!
Special thanks to Ezell, Ben, Kinetic Labs, Marta, and Flora for supporting my Patreon and this newsletter!
cassidoo
website | blog | github | bluesky | twitter | patreon | twitch | codepen | mastodon
2025-09-08 13:26:49
Hey friends!
I hope you had a good week. Mine was busy, but we got to see some family and friends, so that made it worth it! Let's learn.
Was this forwarded to you? You can subscribe here!
Functional custom elements the easy way
CodePen Radio: Hot Trends of 2025
You no longer need JavaScript
CSS overrides without important using layers in Astro components
I went on a major deep dive over the past couple weeks on physical notebook planners for 2026. I saw in some of my social media feeds a bunch of posts about how the Hobonichi planners came out, and was rapidly influenced to think that a physical planner could change my entire life for the better.
...I was then rapidly deinfluenced when I tried to visit Paper & Pencil, a local stationary shop, and the lines for said planners were literally FOUR hours long. FOUR. No?? There has to be a better way??
So anyway, I did not buy a planner, but I learned a lot about that world, which was cool. I also visited Atlas Stationers in person, which was a delightful experience, and if you ever get a chance to shop there (in person or online), they're a lovely, family-owned company here in Chicago!
Think faster than you type? Flow is developer-first dictation that actually gets code. Speak naturally in Cursor, Windsurf, VS Code—even Slack or Notion—and Flow preserves syntax, variables, and context exactly how you’d type them. No typos, no break in rhythm, just… flow.
Why devs love it:
Flow is free up to 2,000 words per week. You normally get 14 days Unlimited—but cassidoo readers unlock an extra 30 days Unlimited free.
Last week, I had you implement a simplified version of the game Battleship! Yo ho Sreetam, Ten, Elke, David, Amine, Scott, and Kaartic!
This week's question:
For an array of numbers, generate an array where for every element, all neighboring elements are added to itself, and return the sum of that array.
Examples:
[] -> 0
[1] -> 1
[1, 4] -> 10 // (1+4 + 4+1)
[1, 4, 7] -> 28
[1, 4, 7, 10] -> 55
[-1, -2, -3] -> -14
[0.1, 0.2, 0.3] -> 1.4
[1,-20,300,-4000,50000,-600000,7000000] -> 12338842
(you can submit your answers by replying to this email with a link to your solution, or share on Bluesky, Twitter, LinkedIn, or Mastodon)
The story of how RSS beat Microsoft
Why All Writing Sounds the Same Now (video)
Through the Eyes of an Angel: New York Photos by Anthony Angel
Banana keyboard
Police have just arrested the tongue-twister world champion.
If found guilty, they'll be given a very tough sentence.
That's all for now, folks! Have a great week. Be safe, make good choices, and get rid of your outdated cables!
Special thanks to Ezell, Ben, Kinetic Labs, Marta, and Flora for supporting my Patreon and this newsletter!
cassidoo
website | blog | github | bluesky | twitter | patreon | twitch | codepen | mastodon
2025-09-01 13:19:52
Hey friends!
August is done, we're through! Finished! Now that September is here, I'll be napping and you can wake me up when September ends. Ha. But anyway, let's learn.
Was this forwarded to you? You can subscribe here!
HTML Partials + Server Reducers: An Alternative to React-Style SPAs
CMYK Concentric Curves
Rolling the Dice with CSS random()
Style your underlines
View Transitions: What Could Possibly Go Wrong?
This was a really exciting week for our family: my husband became a citizen of the United States! The ceremony was great. 95 people were sworn in from more than 40 countries! The judge had everyone applaud for each person's home country, and gave a really wonderful speech about how we are a nation of immigrants, and how we have to work to make our communities better for everyone. I admit when the news is frustrating and overwhelming at times, it's hard to even fathom being patriotic... but this ceremony was an exception. I'm really grateful that we've made it across the finish line after a long journey getting here!
AI is breaking the old rules. Your database has to keep up. MongoDB wasn't retrofitted for AI; it was born for it, handling the messy, dynamic data that AI thrives on. Join MongoDB.local NYC on Sept 17 at the Javits Center for talks, demos, hands-on labs, and networking. Unlock new possibilities for your data in the age of AI. Register here and use code SOCIAL50 to save 50%!
Last week, I had you make a restaurant order summary! Order up Amine, Taylor, Dennis, Miguel, Elke, Joey, Sergio, Stephen, Laasya, John, Nico, and Ten!
This week's question:
Imagine a simplified version of the game Battleship played on a 2D grid. The grid represents the sea, and each cell can either be empty (.) or contain a part of a ship (X). Ships are placed horizontally or vertically, and there are no adjacent ships. Given a grid, count the number of battleships in it. Extra credit: can you make a layout generator for the game given these rules?
Example:
const ships = [
['X', 'X', '.', 'X'],
['.', '.', '.', 'X'],
['.', '.', '.', 'X'],
['.', '.', '.', '.'],
];
numberOfShips(ships)
> 2
(you can submit your answers by replying to this email with a link to your solution, or share on Bluesky, Twitter, LinkedIn, or Mastodon)
How to poop outdoors in a way that won’t harm the environment and other hikers
Athena 1800 with GMK Hooty
Reuben Wu draws aerial geometries with drones and lasers across remote landscapes
Taco Bell rethinks AI drive-through after man orders 18,000 waters
It's amazing how much a colon can change a sentence!
For example:
Jane ate her friend's sandwich.
vs.
Jane ate her friend's colon.
That's all for now, folks! Have a great week. Be safe, make good choices, and make your community a little better!
Special thanks to Ezell, Ben, Kinetic Labs, and Marta for supporting my Patreon and this newsletter!
cassidoo
website | blog | github | bluesky | twitter | patreon | twitch | codepen | mastodon
2025-08-25 13:58:38
Hey friends!
I hope you had a good week! Mine was full of cleaning and getting excited for fall weather in Chicago. Onwards!
Was this forwarded to you? You can subscribe here!
Introduction to AT Protocol
MCSS: A modern classless CSS framework
ts-http-status-codes: A better way to manage HTTP status codes
Circular gallery of rounded images
I wrote about how I built my cry-tracking app, Ductts this week! I feel like besides that and swiffering my floors, I haven't gotten a lot done lately. My new baby is turning four months old (!) today, and between him and my toddler, we're just constantly chasing, feeding, changing, reading to, and playing with them. It's fun, it's good, and I'm grateful for maternity leave, but... I'm so exhausted all the time. I know it'll get easier eventually, so I'm staying as positive as possible and trying to savor the small moments (...and crying about them and logging into Ductts very often). Parenting is the most challenging joy, ever.
No sponsor this week! Please consider checking out one of the apps I've made recently:
Or, if you feel so inclined to help support my work financially in other ways, you can use Patreon or GitHub Sponsors (both of which get you access to a very fun Discord group)!
Last week, I had you make a laundry generator function. Squeaky clean good job Paul, Ten, Ender, Ida, Collin, Miguel, Elke, Jonathan, Kriszti, Dani, Vasanth, Andrew, Pedro, Victor, Christian, Stephen, Laasya, Amine, and Jeremias!
This week's question:
Given an array of order objects for a restaurant, each with a table number and a list of ordered items, write a function that returns an object mapping each table number to a summary of how many times each item was ordered at that table. Extra credit: Could you go so far as to make this a restaurant management game?
Example:
const orders = [
{ table: 1, items: ["burger", "fries"] },
{ table: 2, items: ["burger", "burger", "fries"] },
{ table: 1, items: ["salad"] },
{ table: 2, items: ["fries"] }
];
> orderSummary(orders)
{
1: { burger: 1, fries: 1, salad: 1 },
2: { burger: 2, fries: 2 }
}
// or, string output format:
"Table 1 ordered 1 burger, 1 fries, and 1 salad. Table 2 ordered 2 burgers and 2 fries."
(you can submit your answers by replying to this email with a link to your solution, or share on Bluesky, Twitter, LinkedIn, or Mastodon)
Landlines are making a comeback… with children
The Food Timeline
How we built Bluey’s world: tales from original series art director, Catriona Drummond
Which Keyboard size is right for you? (video)
Walking into solid objects can be painful, according to a recent pole!
That's all for now, folks! Have a great week. Be safe, make good choices, and call your parents!
Special thanks to Ezell, Ben, Kinetic Labs, and Marta for supporting my Patreon and this newsletter!
cassidoo
website | blog | github | bluesky | twitter | patreon | twitch | codepen | mastodon
2025-08-18 13:39:53
Hey friends!
I'm sleepily writing to you hoping that your week was a good one! Mine was tiring, but not all bad. Let's learn!
Was this forwarded to you? You can subscribe here!
ForesightJS
A Nice Vanilla App Architecture Using Web Components and CSS Module Scripts
5 Useful CSS functions using the new @function rule
Why LLMs Can't Really Build Software
I had an incredibly offline week, and it was good for my brain! I needed it. The two year age gap with my 2 year old and 3 month old is fun, but their sleep schedules have enabled my husband and I to unwillingly embrace our zombie form in full. We are very tired people. I'm feeling really grateful for family and friends who are able to help us navigate these harder times, while also feeling grateful for being able to raise such cute kiddos.
Secure your AI-generated code.
AI-generated code is changing development—and introducing new risks. Join Securing Vibe Coding: Addressing the Security Challenges of AI-Generated Code, Snyk's new webinar, on Thursday, August 28 at 11:00 AM ET to explore the security challenges behind AI-augmented code and learn practical strategies to safeguard your workflows.
Last week, I had you make playlists with a certain duration! La la la good job Christian, Victor, Laasya, Paul, Elke, Ten, and David!
This week's question:
Write a generator function createLaundryItem() that returns an object representing a laundry item. This object should have a method nextCycle() which, when called, advances the item through a series of laundry cycles in order: "soak", "wash", "rinse", "spin", and "dry". After the final cycle, subsequent calls to nextCycle() should return "done".
Example:
let towel = createLaundryItem();
console.log(towel.nextCycle()); // "soak"
console.log(towel.nextCycle()); // "wash"
console.log(towel.nextCycle()); // "rinse"
console.log(towel.nextCycle()); // "spin"
console.log(towel.nextCycle()); // "dry"
console.log(towel.nextCycle()); // "done"
console.log(towel.nextCycle()); // "done"
(you can submit your answers by replying to this email with a link to your solution, or share on Bluesky, Twitter, LinkedIn, or Mastodon)
Orbit 2 with Keykobo Fremen
I Saved a PNG Image To A Bird (video)
A Good Find
You do not have to use generative AI "art" in your blogs because there are websites where you can get real, nice images for free
My printer is always playing music.
It's annoying, the thing is always jamming!
That's all for now, folks! Have a great week. Be safe, make good choices, and give someone a high five!
Special thanks to Ezell, Ben, Kinetic Labs, and Marta for supporting my Patreon and this newsletter!
cassidoo
website | blog | github | bluesky | twitter | patreon | twitch | codepen | mastodon
2025-08-11 13:54:46
Hey friends!
I hope you had a good week! Mine was tiring, but overall good. My toddler has finally (!) started taking an interest in LEGO bricks so I am having a blast playing with her these days. Anyway, onwards!
Was this forwarded to you? You can subscribe here!
Creating a scroll-spy with 2 lines of CSS
Building extensible frontend systems
Building Native Plugin Systems with WebAssembly Components
CSS Logic Gates with if() Function
I launched my first app on the App Store this week, Ductts! It's an app for tracking how often you cry.
...before you ask, I'm okay, I promise, ha! I came up with the idea for this app many moons ago, bought the domain name, and finally actually implemented it over the past few months. I built it with React Native and Expo, and it's been a really good learning experience! I'll be blogging about it because it took way longer than I expected to get the little mobile details to work well and understand the differences between web and mobile, too.
It's iOS only for now, purely because I can't find my Android test device in my home and the Android simulator makes me want to throw my laptop in a fire. If you download it, please leave a review and let me know what you think!
No sponsor this week, but I'd love to do a quick little plug for my Patreon and GitHub Sponsors! If you like this newsletter or any of my open source/educational work, these go directly to offsetting my costs for making most things free.
Also, if you jump in on either one of those platforms, you'll get access to our very fun Discord group, which has been active for over 6 years (!) and is full of kind people helping each other get jobs and sharing memes.
Last week, I had you make sure monsters in a line were safe! Thanks for playing Miguel, Winnie, David, Jonathan, Josh, Diego, Elke, Tenzy, Austin, Nico, Kriszti, Nick, Sameer, Tarang, Martijn, Ricardo, and Laasya!
This week's question:
Given an array of audio file durations, write a function to group the files into playlists such that each playlist's total duration does not exceed a given limit maxDuration. Return an array of playlists, where each playlist is an array of file durations. Try to minimize the number of playlists.
Example:
const files = [120, 90, 60, 150, 80];
const maxDuration = 200;
groupAudioFiles(files, maxDuration)
> [[150], [120,80], [90,60]]
groupAudioFiles(files, 160)
> [[150], [120], [90,60], [80]]
(you can submit your answers by replying to this email with a link to your solution, or share on Bluesky, Twitter, LinkedIn, or Mastodon)
KKB Sacred Timeline on the Tangerine Bauer Lite
What Happened When I Tried to Replace Myself with ChatGPT in My English Classroom
I spent 6 years building a ridiculous wooden pixel display
If you're remote, ramble
I went on a date with someone I met at the zoo.
It was great. They're a keeper!
That's all for now, folks! Have a great week. Be safe, make good choices, and don't cry too much!
Special thanks to Ezell, Ben, Kinetic Labs, and Marta for supporting my Patreon and this newsletter!
cassidoo
website | blog | github | bluesky | twitter | patreon | twitch | codepen | mastodon
