John Polacek

scrollorama. The jQuery plugin for doing cool scrolly stuff. NOTE: No longer under active development. New version is ScrollMagic.js

superscrollorama. The original jQuery plugin for supercool scroll animation. NOTE: No longer under active development. New version is ScrollMagic.js

BigVideo.js. The jQuery Plugin for Big Background Video (and Images)

stacktable.js. jQuery plugin for stacking tables on small screens

date-range-picker-for-shadcn. DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison

scrolldeck.js. jQuery plugin for making scrolling presentation decks

imagefill.js. The jQuery plugin for making images fill their containers (and be centered)

controldeck.js. control html5 presentations with node.js

Responsivator. Website for viewing and sharing how web pages look at different screen sizes

expressive-css. An approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.

extra-strength-responsive-grids. A Fluid CSS Grid System for Responsive Web Design The Fluid CSS Grid System for Responsive Web Design. Take total control of your layouts.

TweenPages. Build complex animated page transitions with GSAP and Next.js

nextjs-mdx-blog-starter. Next.js MDX Blog Starter for building blogs with Next.js and MDX, including Theme UI Component Design System, Vercel Deployment and more.

design-system-playground. Play with typography and colors to generate a design system theme you can use in your projects.

Front-end-Developer-Interview-Questions. A list of questions you can use to help interview potential candidates for a front-end development position.

ResponsiveThumbnailGallery. jQuery Plugin for creating image galleries that scale to fit their container.

animated-gradient-background-generator. Animated CSS Gradient Background Generator

styled-starter. Starter Kit with React, Next.js, Styled System and Catalog to get projects going with a design theme, built-in styleguide and browser testing

tweendeck. Next level animation for web presentations

MagicNav.js. The jQuery Plugin for generating nav links from page elements

styled-system-html. HTML elements extended as styled components via styled system, ready for theming.

serverless-cms. Proof of concept demo for creating a custom serverless CMS for generating static websites

nextjs-scraper-playground. Build and test your own web scraper APIs with Next.js API Routes and cheerio

the-case-for-atomic-css. A collection of various content detailing and demonstrating the benefits of Atomic CSS, also known as Utility First or Functional CSS.

SimpleVid. jQuery Plugin for Fluid Video

react-widget-library-starter. React boilerplate for producing libraries of embeddable widgets

Match-The-Letter-Game. Match The Letter is a cross-device mobile educational game for kids built with the Corona SDK

sizeit.js. sizeit.js is a JavaScript utility that detects the screen size and loads external css based on the settings you configure. Works kinda like media queries.

open-source-for-fame-and-fortune. Open Source For Fame and Fortune Slide Deck

free-summer. A game by Jack and John Polacek

Video-Gallery. A template for a video gallery app built in the Corona SDK

vibecode.party.starter. The full stack Next.js starter project for vibe coding.

WhatTheHeckIsResponsiveWebDesign-impressjs. An impress.js presentation on responsive web design.

simple-grid-generator. A SASS grid generator for creating responsive grids with some nice features.

Simple-Single-Page-App. Recipe for building a single page app

notyetnews. Satirical news site from the future. Generates its own articles every day with AI.

next-project-starter. Get your next React project up and running quickly with Next.js, Theme UI, MDX and more.

css-in-js-or-css-and-js. This is a thing built with old fashioned CSS and JS and another same thing built with new fangled CSS-in-JS. These are both fine.

html5project. Template for HTML5 Websites

serverless-cms-2. Proof of concept demo for creating a custom serverless CMS for generating static websites

simple-grid. A simple, easy-to-use 12-column responsive grid with some nice features.

jquery.configurator. The jQuery plugin for injecting url parameter options into webpages and JSRender templates

team-health-checker. Help your team improve by taking a Team Health Check

animate-in. React UI Component for animating elements in with Tailwind and CSS Animation (...and plays nice with shadcn)

learning-node. Collection of tutorials I've taken to learn node.js

background-pattern-overlay. Demo showing how to make a transparent background pattern on top of background colors.

responsive-utilities-generator. A SASS generator for creating responsive utility classes.

bucket-cms. Bucket CMS is the world’s first headless drop-in CMS, no database necessary.

chicagotechevents.com. Website for chicagotechevents.com - The best web, tech and startup events in Chicago

cardtable. A responsive table component with CSS Grid, React and Tailwind CSS

expressive-css-starter-kit. Get your project up and running quickly on a foundation of Expressive CSS.

video-js-swf. Custom Flash Player for VideoJS

image-crossfade. Image Crossfade Component for Next.js Image

growth-areas-for-a-software-developer. Examples of how to improve as a software developer over 5 different areas: Understanding, Planning, Collaborating, Writing and Developing

jquery-databinding. Some initial thoughts on a simple way to use jQuery event handling inside objects for data binding, Observer, Pub/Sub stuff.

styled-starter-basic. Basic Project Setup for Styled Starter, built with React, Next.js, Styled System and Catalog to get projects going with a design theme, built-in styleguide and browser testing

vibecode-party-starter. Bootstrap for a Next.js Vibecode-Friendly SaaS Starter Project

trick-or-treat-it-forward. Print a QR Code to put on a sign in front of your house so trick or treaters can click a button to pledge a donation to the charity of your choice

bootstrap-project. JavaScript

covidcost. Tracking the cost of COVID-19 across China, Europe and the United States in human lives and economies.