Streaming Algos Suck, Rolled My Own
Streaming services keep recommending the same things, so I built ShowReco to learn what makes your taste different.
John Polacek
John Polacek is a web developer located in Chicago who is a Staff Software Engineer at VEG, ships open source web stuff and writes about web development, AI and life in general.
Latest posts
D20 Adventures
In my spare time I've been working on [D20Adventures.com](https://d20adventures.com), training an AI to be an RPG GameMaster, starting with a short basic single character adventure.
Animate In
Introduction **[ ](https://animate-in.vercel.app/)** a re-usable React component that I’ve made to drop in whenever I want to quickly add some animation effects to my projects
Websites that Create Themselves
I built [Not Yet News](https://notyetnews.vercel.app) to experiment with creating a website that generates its own content.
Making Components with shadcn
I built a [DateRangePicker component](https://date-range-picker-for-shadcn-demo.vercel.app/) for shadcn and open sourced it [on Github](https://github.com/johnpolacek/date-range-picker-for-shadcn).
My First Hackathon Win
Hey, I won an Internal Hackathon competition at my company, my first ever!
Route Chat
I built a travel app called [Route Chat](https://routechat-site.vercel.app/) for a fun weekend project
Playing with the Open AI API
I used the ChatGPT API to create [BotLuck](https://botluck.vercel.app/), a fun themed recipe generator.
Introducing Hot Sauce
Introduction [Hot Sauce](https://hotsauce-starter.netlify.app/), the fresh hot recipe for building better web apps with Remix, Tailwind UI, Firebase, Stripe, Netlify, Sendgrid, and more
I Bought a Giant Cast Iron Skillet
I'm new to cooking with cast iron, but excited to try. I bought a giant cast-iron skillet and cooked with it over the open flame several times over the summer.
TweenPages
My new project [TweenPages](https://tweenpages.vercel.app/) brings the power of the [Greensock Animation Platform](https://greensock.com/) to deliver complex, performant animations to [Next.js](https://nextjs.org/) page transitions. This was a fun problem to solve and even more fun demo to build.
Next.js Project Starters
As a big fan of Next.js, I have created some starters to quickly get new projects up and running with the “React Framework for Production”. I’ve made a little home for them at [nextjs-project-starters.vercel.app](https://nextjs-project-starters.vercel.app/)
Building a Cool Front End Thing Generator
On a [side project](https://colortocolor.com/) that I've been working on awhile back, I added an animated gradient background. It turned out pretty cool, so I was inspired to create an [Animated Gradient Background Generator](https://animated-gradient-background-generator.netlify.app/) and then decided to take it a step further...
Happy Bolivian Independence Day
This past Friday was Bolivian Independence Day. Some of the developers I’m fortunate enough to work with are from Bolivia. They all had the day off and at our standup the day before I asked if there was a dish I could prepare to celebrate them here with my family in Chicagoland.
Homemade Hot Pepper Olive Oil
We’ve been growing hot chili peppers in our backyard, picked them, dried them out in our air fryer, turned them into flakes and bottled them up into our own homemade Pola-Pepper Hot Olive Oil.
Next.js Web Scraper Playground
Was working a bit with setting up some web scraping using [Next.js API routes](https://nextjs.org/docs/api-routes/introduction), so I made a tool for experimenting with web scraping on different urls and parsing the markup with [cheerio](https://cheerio.js.org/). You can see it at [nextjs-scraper-playground.vercel.app](https://nextjs-scraper-playground.vercel.app) and check out the code on…
The Death of Flash, the Rise of React and What’s Next
A bit over 10 years ago, I was a Flash developer. We were in high demand in those days. We were building RIAs, aka Rich Internet Applications, that delivered snappy animations, all manner of graphics and fonts in a single page experience that made computer fans accelerate all over the internet..
Trick or Treat It Forward
Halloween is tricky this year so we are doing something different this year. A family project we call Trick or Treat It Forward with donations going to [Lakeview Pantry](https://www.lakeviewpantry.org/), Chicago’s largest food pantry. Check out the [demo site](https://trick-or-treat-it-forward.vercel.app/).
Growth Areas for a Software Developer
I’ve been interested in using Next.js and MDX to take a README markdown file in a Github project and transforming it into something interesting. So I wrote up a markdown document and published it at [growth-areas-for-a-software-developer.vercel.app](https://growth-areas-for-a-software-developer.vercel.app/).
Use Prettier and Stop Worrying About Code Formatting
I used to be a 4-space tabber. I remember caring enough to use my text editor to convert 2-space to code to 4-space whenever I ran across it. Then I started using [Prettier](https://prettier.io/).
How to Use Your README.md on Your Project’s Docs Page
You have a project. You want to make a Docs Page. You already wrote documentation in `README.md`. Do you need to have two copies of your ReadMe? Heck no! Here is a quick tip on how to use the content from your README on your project’s docs page.
Adding Dark Mode to a Next.js Site
A quick look at how I add dark mode to a Next.js site with code examples.
Building a Blog with Next.js and MDX
I’ve re-done my website with content authoring in [MDX](https://mdxjs.com/), powered by [Next.js](https://nextjs.org/). I’ve open sourced a [Next.js MDX Blog Starter](https://nextjs-mdx-blog-starter.vercel.app/) so you can too. I reach for Next.js because it scales to what I need it to do. It can build a simple static blog like this one, or a SaaS app with parameterized routing, serverless backet,…
Color to Color
I like to wear dress shirts with matching socks. Sometimes I buy socks in a set and have no shirts that match. How can I find a shirt to match my sock, or a sock to match my shirt? I decided to build a thing. Check it out at [colortocolor.com](https://colortocolor.com/).
Design Systems Playground
I finished a rebuild of my [Design Systems Playground](https://design-system-playground.netlify.app/) project. Open sourced on [Github](https://github.com/johnpolacek/design-system-playground). Built with [React](https://reactjs.org/) / [Gatsby](https://www.gatsbyjs.org/). Styles and theming by [Theme UI](https://theme-ui.com/). Animations with [Greensock](https://greensock.com). Deployed to…
MDX Deck with Greensock Animation
I combined my favorite new React presentation deck awesome sauce ([MDX Deck](https://github.com/jxnblk/mdx-deck)) with my favorite old do-anything-you-can-imagine animation platform ([Greensock](https://greensock.com)) to make an animated version of the MDX Deck Demo. Check it out at [mdx-deck-greensock-demo.netlify.app](https://mdx-deck-greensock-demo.netlify.app/) and [on…
ChicagoTechEvents.com Redesign
The [chicagotechevents.com](https://chicagotechevents.com) website is getting a new design and being rebuilt as a Gatsby site and hosted on Netlify. People will be able to submit events via a [Netlify Function](https://www.netlify.com/docs/functions/) that creates a new markdown file for the new event and uses the [Github API](https://developer.github.com) to [create a pull…
Making a Gatsby Events List Starter
I made a basic events list Gatsby Starter, forked from the [Gatsby blog starter](https://github.com/gatsbyjs/gatsby-starter-blog). See it in action at [gatsby-starter-events-list.netlify.app](https://gatsby-starter-events-list.netlify.app/) and check out the code on Github.
Hello World Again
As one does, I have re-done my Wordpress blog with Gatsby. *Why?* No more database. Better performance. Great developer/authoring experience. Authoring in MD.. MDX... yeah, that’s the good stuff.
CSS-in-JS or CSS-and-JS
I built [this new school/old school CSS/JS thing](https://johnpolacek.github.io/css-in-js-or-css-and-js/). It is awesome and it sucks. Maybe you can learn something from it? That would be great. That’s why I did it. You can do something better probably. Please do.
Notes from AWS Summit
I attended the [AWS Summit](https://www.youtube.com/watch?v=tMUKC6eBjL8) in Chicago this week. Like many other tech companies, we at Gesture use various AWS products so it was a nice opportunity to get exposed to what is becoming possible with their platform.
Speaking at Front End Camp Chicago and Introducing TweenDeck
Over the weekend, I gave a talk titled [Rethinking CSS - Go Functional for Scaling, Performance & Simplicity](https://johnpolacek.github.io/rethinking-css/) at Front End Camp Chicago. The event was organized by the folks at [Chicago Camps](http://chicagocamps.org/) who do a fantastic job of putting on conferences for a great price.
The Writing Bug
Just published a couple articles, Kiss My Classname, A Counterpoint on Medium, and [Build a Custom CMS for a Serverless Static Site Generator](https://css-tricks.com/build-custom-cms-serverless-static-site-generator/) on CSS Tricks.
The Atomic/Functional CSS Movement
When I published [Expressive CSS](https://johnpolacek.github.io/expressive-css/) a few months ago, I knew it would be controversial, and it was (as evidenced in the comments on my [Content & Display Patterns with Expressive CSS](https://johnpolacek.github.io/expressive-css-content-display-patterns/) post). In the time since, there have been many articles and projects published by others that also…
I Wrote Our Developer Job Description
We’re hiring a new developer, and I tried to capture a little of the flavor of what it is I love about working at [Gesture](http://gesture.com), and do it in a hopefully entertaining way.
Notes from UX Camp Chicago
It was a rainy day in Chicago yesterday, so it was a perfect time to spend inside at Columbia College for UX Camp Chicago. It was yet another great conference put on by the excellent Russ Unger and the excellent team at [ChicagoCamps.org](http://chicagocamps.org).
Content Display Patterns with Expressive CSS
See my writeup at [johnpolacek.github.io/expressive-css-content-display-patterns](https://johnpolacek.github.io/expressive-css-content-display-patterns/)
Keep gh-pages and master in sync with one line of code
If you publish projects to Github, then you may be using a [gh-pages branch](https://help.github.com/articles/creating-project-pages-manually/) to create a nice home for your project with a demo and some documentation. A common pattern is to keep the gh-pages and master branches in sync with each other — whatever code is in master is the same as your project page (gh-pages).
Expressive CSS and Using NPM as a Build Tool
Expressive CSS follows the atomic approach to writing lightweight, scalable CSS with utility classes that are easy to write and understand. Find out more at [johnpolacek.github.io/expressive-css](http://johnpolacek.github.io/expressive-css/)
Fun With Greensock Animation
Had some fun making this [Emoji Bank Robbery Animation](codepen.io/johnpolacek/pen/zvVxWx/) with the [GreenSock Animation Platform](http://greensock.com/) on CodePen.
Simple Responsive Grid
Simple Grid is my new responsive grid system I am using on all of my websites these days. [View it on Github](http://johnpolacek.github.io/simple-grid/)
Announcing Gesture
Over the last month, I’ve been working on a secret project, to help rebrand my company and launch our new website. I’m thrilled to say that I now work at [Gesture](http://gesture.com), and we make hope happen.
Funny on Github
Github projects aren’t just frameworks, libs and plugins. There is some funny in there too. Here are some github projects that will make you laugh.
Building a Game With a 6-Year-Old
I just open sourced a game I’ve been working on with my 6-year-old son Jack over Thanksgiving weekend.
Share Your Git Aliases Day
Git aliases have been around for a long time, but in case you don’t know about them, they allow you to create shortcuts for just about any git command or sequence of commands that you can think of. Beyond just the convenience of less key presses, you can use to streamline your workflow by sequencing longer sets of commands that are hard to remember.
A Year of Startup Life
It has now been a full year since I left the agency and client services world to join a startup. Going from a large multinational company that was part of an even larger global holding corporation to a business with about 20 full time employees was a big change.
How to Get Open Source Project Ideas and Execute Them
A common question people ask me is how I come up with open source project ideas. It is a pretty simple process...
One Year of Open Source Traffic
Successful open source projects can generate a lot of traffic...
AWS Notes: Mastering NoSQL – Advanced Amazon DynamoDB Design Patterns for Ultra-High Performance Apps
DynamoDB Engineer David Yanacek started things out by giving an overview of the types of tables and queries that exist in a typical social network app, and how they look in DynamoDB...
AWS Notes: Writing JavaScript Applications with the AWS SDK
AWS Developer Loren Segal introduced the [AWS SDK for Node.js](http://aws.amazon.com/sdkfornodejs/) It is open source, apache-licensed and on Github. They have full service coverage across 30 services.