Forem: Cody Pearce

Every Website Has Dark Mode. I Added Christmas Mode.

Cody Pearce — Wed, 24 Dec 2025 14:36:57 +0000

Try the Live Demo | GitHub | npm | Watch the product story

Every year, the same debate. Light mode or dark mode. As if those are the only options.

Meanwhile, the holiday season comes around and your website sits there, completely un-decorated. No snow. No lights. No festive spirit.

That changes today.

Introducing Christmas Mode

Dark mode is boring. Use Christmas mode.

Add festive Christmas decorations to any website with a single line of code. Falling snow, twinkling lights, a decorated Christmas tree, Santa's sleigh with all nine reindeer, marching nutcrackers, elves having snowball fights, and more.

Because your users deserve more than just a color scheme toggle.

Quick Start

Install from npm:

npm install christmas-mode

Or include via CDN:

<script src="https://unpkg.com/christmas-mode/dist/christmas-mode.umd.js"></script>

Then enable it:

import ChristmasMode from "christmas-mode";

ChristmasMode.init({ autoEnable: true });

Your website now has Christmas spirit.

What You Get

Falling snow with accumulation effect
Twinkling Christmas lights along the top
Icicles hanging from the lights
Decorated Christmas tree with ornaments and star
Snowman with hat and scarf
North Pole sign with candy canes
Caroler that plays Jingle Bells (click to toggle)
Santa's sleigh with 9 reindeer (including Rudolph)
Marching nutcracker soldiers
Walking elves carrying presents
Sledding elves
Elves having a snowball fight
Stockings hung along the bottom
Presents under the tree
Holly decorations
Festive wreath with bow
Toggle switch to enable/disable

Configuration

Customize which decorations appear:

ChristmasMode.init({
  toggle: true, // Show toggle switch
  musicButton: true, // Show music button/caroler
  autoEnable: false, // Auto-enable on init
  snow: true, // Enable snow effect
  lights: true, // Enable Christmas lights
  tree: true, // Enable Christmas tree
  snowman: true, // Enable snowman
  northPole: true, // Enable North Pole sign
});

Toggle Position

ChristmasMode.init({
  toggle: {
    position: "bottom-right", // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  },
});

React Integration

import { useEffect } from "react";
import ChristmasMode from "christmas-mode";

function App() {
  useEffect(() => {
    ChristmasMode.init({ autoEnable: true });

    return () => {
      ChristmasMode.destroy();
    };
  }, []);

  return <div>My App</div>;
}

API

ChristmasMode.init(options); // Initialize with options
ChristmasMode.enable(); // Show decorations
ChristmasMode.disable(); // Hide decorations
ChristmasMode.toggle(); // Toggle on/off
ChristmasMode.isEnabled(); // Check if active
ChristmasMode.playMusic(); // Start Jingle Bells
ChristmasMode.stopMusic(); // Stop music
ChristmasMode.toggleMusic(); // Toggle music
ChristmasMode.destroy(); // Clean up everything

Contained Mode

Target a specific element instead of the entire page:

ChristmasMode.init({
  target: document.getElementById("my-container"),
  autoEnable: true,
});

Try It

Zero dependencies. Works with React, Vue, Angular, vanilla HTML. TypeScript definitions included.

npm install christmas-mode

Check out the GitHub repository for full documentation.

Watch the product story to see it in action.

Try the live demo to see it on a real page.

Halloween game using js - Pumpkin Blast

Cody Pearce — Mon, 27 Oct 2025 13:21:14 +0000

Play the Game on CodePen

Pumpkin Blast is a physics-based Halloween launcher game. Click and hold to pump up pumpkins, then release to launch them at floating ghosts and ground buckets. Master trajectory arcs, chain combos for massive multipliers, collect game-changing powerups, and survive endless waves of increasingly difficult targets.

How to Play

Click (hold): Pump up power
Click (release): Launch pumpkin
Mouse Move: Aim trajectory (when aiming mode enabled)
T: Toggle trajectory preview line
A: Toggle aiming mode (mouse vs fixed 45°)
M: Mute/unmute sound effects

Launch pumpkins at targets to score points. Start with 5 pumpkins, earn more by hitting targets. Chain multiple hits within 3 seconds for 2x-6x combo multipliers. Difficulty increases every 30 seconds with new hazards and faster spawning.

The Targets

Floating Ghosts (10-75 points)

White spirits float at different heights. Higher ghosts award more points. Some ghosts move in patterns:

Static (white): Easiest targets, don't move
Horizontal (cyan): Move in sine waves, circles, or figure-8 patterns (1.5x points)
Vertical (red): Bob up and down unpredictably (2x points)

Ground Buckets (15-100 points)

Orange buckets sit on the ground at various distances. Farther buckets award more points. Land pumpkins inside to score.

Hazards and Obstacles

Spikes (Instant Death)

Dangerous purple spike obstacles appear after Level 2. If your pumpkin hits one, it pops instantly with no points. Spikes spawn at random heights and positions to block easy shots.

Canopies (Blocking)

Green protective canopies appear over some targets at higher difficulty levels, blocking direct shots. You'll need to arc over them or find gaps.

The Wall

A stone wall stands in front of your pumpkin launcher. Launch with enough power and angle to clear it, or hit the wall and lose your shot.

The Powerups

Powerups spawn randomly after hitting targets and last 10 seconds:

Multi-Shot (yellow): Launch 3 pumpkins in a spread pattern for massive coverage
Shield (blue): Protect against spike deaths, plus gain trail particles
Double Points (green): 2x score multiplier on all hits
Extra Pumpkin (orange): +1 pumpkin to your supply
Freeze Targets (cyan): Stop all moving targets for easy shots

The Combo System

Hit multiple targets within 3 seconds to build combos. Each consecutive hit increases your multiplier:

2 hits: 2x multiplier
3 hits: 3x multiplier
4 hits: 4x multiplier
5 hits: 5x multiplier
6+ hits: 6x multiplier (max)

Streak Bonus: Hit the same target type (ghost or bucket) repeatedly for an additional +50% bonus points.

The combo timer bar shows remaining time. Miss or wait too long, and your combo resets.

Progressive Difficulty

Level 1: Static targets only
Level 2: Moving ghosts (horizontal and vertical patterns)
Level 3: Spike hazards and faster spawning
Level 4+: Canopies over targets, more hazards, faster gameplay

I turned CSS in a SQL Database

Cody Pearce — Tue, 21 Oct 2025 14:17:01 +0000

Devs have been trying to avoid CSS for years with inline styles, CSS-in-JS, Tailwind. But they're not enough, these half-measures. Someone had to take it to the next level.

Introducing I Can't Believe It's Not CSS

Styling for developers in denial.

Write your styles as SQL migrations. Apply them, and your styles appear in the browser. Need to undo a design decision? Just roll back with a down migration.

Quick Example

Check out the GitHub repository or install it with npm:

npm install -D i-cant-believe-its-not-css
npx icbincss init

Here's how you style a button:

-- migrations/up/001_init.sql
CREATE TOKEN 'brand/500' VALUE #2266ee;
CREATE SELECTOR btn AS AND(E('button'), C('primary'));
CREATE STYLE SELECTOR btn (
  background = token('brand/500'),
  color = #fff,
  padding = 12px 24px
);

Apply the migration:

npx icbincss migrate up
npx icbincss build

And you get this CSS:

:root {
  --brand-500: #2266ee;
}
button.primary {
  background: var(--brand-500);
  color: #fff;
  padding: 12px 24px;
}

What You Can Do

Database Migrations for Styles

Version your styles with up/down migrations. Roll back that questionable design decision from last Tuesday.

npx icbincss migrate create --name=add_buttons
npx icbincss migrate up
npx icbincss migrate down

Query Your CSS with SQL

Because why wouldn't you SELECT your styles?

SELECT * FROM styles WHERE resp_kind = 'media';
SELECT * FROM styles WHERE selector = 'btn';

Use Real Databases

Store your styles in Postgres or SQLite. Open them in your favorite database GUI. Run JOIN queries on your button colors.

npx icbincss db init-postgres --database=my_styles
npx icbincss db sync-sqlite --file=styles.db

Catch Conflicts Before They Ship

Detect specificity issues and shorthand/longhand conflicts:

npx icbincss doctor

# Cross-context overrides for .card (spec 0,1,0) → padding:
#   - (global)
#   - @media (min-width: 768px)
#
# Shorthand/longhand conflict for .box:
#   - border (shorthand) and border-left (longhand) both defined

Framework Integrations

Vite

// vite.config.ts
import { defineConfig } from "vite";
import { icbincssVitePlugin } from "i-cant-believe-its-not-css";

export default defineConfig({
  plugins: [icbincssVitePlugin()],
});

// src/main.ts
import "virtual:icbincss.css";

Edits to migrations trigger HMR updates, because you deserve hot-reloading for your SQL.

Next.js

// next.config.mjs
import { withICBINCSS } from "i-cant-believe-its-not-css";

export default withICBINCSS(
  { reactStrictMode: true },
  { outFile: "public/icbincss.css" }
);

Advanced Features

Responsive Design

Media queries, container queries, and feature queries:

ALTER STYLE SELECTOR card
  WHERE width >= 768px
  SET padding = 24px;

ALTER STYLE SELECTOR sidebar
  WHERE container main > 600px
  SET display = grid;

ALTER STYLE SELECTOR grid
  WHERE supports(display: grid)
  SET display = grid;

Cascade Layers

CREATE LAYERS (reset, base, components, utilities);
SET LAYER = components;

CREATE STYLE SELECTOR card (
  padding = 16px
);

Keyframe Animations

CREATE KEYFRAMES fade_in (
  '0%' ( opacity = 0 ),
  '100%' ( opacity = 1 )
);

Font Faces

CREATE FONT_FACE family 'Inter' (
  src = url('/fonts/Inter.woff2') format('woff2'),
  font_weight = 400
);

Try It Yourself

It compiles to plain CSS with zero runtime overhead. It works with React, Vue, Angular, vanilla HTML. It supports both CommonJS and ESM.

Check out the GitHub repository or read the full documentation.

npm install -D i-cant-believe-its-not-css

Watch the full product release video to see it in action.

How many Oreo flavors are possible?

Cody Pearce — Mon, 13 Oct 2025 14:00:00 +0000

TLDR

I built a web app that generates 1.1 sextillion possible Oreo combinations from 406,718 flavors. Try the generator or watch the video where I explain the process. Everything from Chocolate Chip Oreo to Pokemon Sriracha Danny DeVito Oreo.

Project Summary

Metric	Value
Total combinations	1.1 sextillion
Flavors in database	406,718
Raw records processed	31 million
Manual review time	3-4 days

The math is straightforward combinatorics. The real challenge was building a comprehensive flavor database.

The Mathematical Foundation
Defining Flavor Categories
Building the Flavor Database
- Phase 1: Data Acquisition
- Phase 2: Automated Processing & Filtering
- Phase 3: Manual Review Interface
The Combination Logic
Building the Generator
The Scoring System
Using the Generator
The Numbers
Try It Yourself

The Mathematical Foundation

The formula for counting combinations is the binomial coefficient:

function combination(n: number, k: number): bigint {
  if (k > n) return 0n;
  if (k === 0 || k === n) return 1n;

  let result = 1n;
  for (let i = 1; i <= k; i++) {
    result = (result * BigInt(n - i + 1)) / BigInt(i);
  }
  return result;
}

This calculates C(n,k): the number of ways to choose k items from n total items without replacement, where order doesn't matter and no item appears twice.

For Oreos with 1-4 flavors from n total flavors:

C(n,1) + C(n,2) + C(n,3) + C(n,4)

The implementation uses BigInt because JavaScript numbers lose precision beyond 2^53. Standard numbers can't accurately represent values like 1.1 sextillion.

First, I needed to find n: the total number of possible flavor components.

Defining Flavor Categories

Looking at real Oreo releases, I noticed they fall into three distinct categories:

1. Food Flavors

Traditional flavors that you can actually taste: Birthday Cake, Red Velvet, Peanut Butter, Mint.

2. Food Brand Collaborations

Branded food products that bring their own flavor profiles: Reese's Peanut Butter Cup, Chips Ahoy!, Sour Patch Kids, Swedish Fish.

3. Non-Food Brand Collaborations

These are where Oreo gets creative with pure branding: Supreme, Game of Thrones, Star Wars, Lady Gaga, Selena Gomez.

When Oreo releases a Pokemon Oreo, they're not claiming it tastes like Pikachu (hopefully). It's about the brand association.

Building the Flavor Database

I built the database in three phases: raw data acquisition, automated processing and filtering, and manual review.

Phase 1: Data Acquisition

No single dataset contains every possible flavor. I searched for comprehensive food databases, but most had significant gaps or poor organization.

Wikipedia's food lists turned out to be surprisingly useful: easy to scrape and full of unique, high-quality entries.

Eventually, I assembled data from food databases, brand repositories, entertainment franchises, and celebrity databases.

Food Flavors

I gathered raw source files containing 427,344 total records from multiple food databases:

Source	Count	Description
Wikipedia Food Lists	261,547	Raw file entries from comprehensive food lists
USDA Foundation Foods Database	155,244	Raw database rows (nutritional data, metadata, duplicates)
Food Identicon	4,999	Community-maintained ingredients
Wikidata	3,222	Dishes, variations, and food variants via SPARQL queries
CORGIS Ingredients Dataset	2,332	Academic dataset entries
Total Raw Food Records	427,344

Food Brands

Source	Count	Description
Open Food Facts	4,000,000	1.1GB CSV database with products
Wikidata Food Brands	1,101	Structured food and beverage brands via SPARQL queries
Total	4,001,101

Non-Food Brands

I broke non-food brands into types to track totals for each category.

Entertainment Characters & Franchises

Source	Count	Description
Marvel Characters	16,376	Characters from FiveThirtyEight dataset
DC Characters	6,896	Characters from FiveThirtyEight dataset
Disney Characters	9,820+	From Disney API plus manual curation
Pokemon	900+	Pokemon with complete stats
Anime	525+	Dragon Ball (209), One Piece (316+)
Gaming	238+	Wikipedia gaming/Nintendo characters
Franchises	563	Wikipedia (425) + Wikidata (138) franchises
Total	35,318

Sports Teams

Source	Count	Description
Wikipedia Sports	1,190	Professional teams
Wikidata Sports	1,500	Sports entities with metadata
Total	2,690

Music & Celebrities

Source	Count	Description
MTV Artists	300+	Artists with social media and genre data
IMDb Names	14,681,812	Names for celebrity extraction
IMDb Titles	11,877,454	Titles
Manual Celebrities	99	Manually curated
Total	26,559,665

Non-Food Brands Summary

Category	Count
Entertainment Characters & Franchises	35,318
Sports Teams	2,690
Music & Celebrities	26,559,665
Total Non-Food Brands	26,597,673

Total Raw Sources

Category	Count	Description
Food Flavors	427,344	Raw source records
Food Brands	4,001,101	Raw product records
Non-Food Brands	26,597,673	Raw source records
Total Raw Records	31,026,118

Phase 2: Automated Processing & Filtering

The 31 million raw source records needed extraction and processing. First, I extracted actual terms from the raw files (pulling food names from nutritional databases, brand names from product catalogs, character names from entertainment datasets). Then I filtered out technical codes, duplicates, and non-food terms. Each category required different processing strategies.

Food Flavors

Starting from 427,344 raw source records, I extracted food-related terms, then filtered to remove technical codes, duplicates, and non-food terms:

For example, USDA entries like Beef, eye of round roast, raw (ER37-R-23) were filtered out as too technical.

Filtering out technical codes was straightforward. But duplicates were harder: what even counts as a duplicate?

The Duplicate Problem

Simple flavors like potato and potatoes are obviously duplicates. But what about potato vs. baked potato vs. mashed potato vs. potato salad?

Without clear rules, I might accidentally filter out valid entries that should have been kept.

If Oreo released both Baked Potato Oreo and Mashed Potato Oreo, I think you'd expect them to taste completely different (well... maybe not completely but they'd have a different vibe.) Therefore, the way a food is prepared can change whether it's a duplicate or a unique flavor.

Preparation methods aren't the only thing that creates distinct flavors. Complete dishes combine multiple ingredients into something entirely new. Pizza Pringles exist as a product, which means pizza is its own distinct flavor, not just cheese or tomato or bread. A Pizza Oreo would taste different from a Cheese Bread Oreo.

Three-Tier Classification System

The solution was a three-tier classification system:

Tier	Description	Examples
Base	Core ingredients	`potato`, `apple`, `chocolate`
Variation	Prepared forms	`mashed potato`, `apple pie`, `dark chocolate`
Dish	Complete dishes	`potato salad`, `apple strudel`, `chocolate cake`

With these rules defined, I could now consistently decide what to keep and what to filter. Potato and potatoes are duplicates (keep one). But potato, baked potato, and potato salad are all unique entries across different tiers (keep all three).

Now that we have the correct classification system in place let's see the complete filtering process:

#	Step	Before	After	Description
1	Extraction	427,344	309,716	Extracted food terms from raw source files (e.g., pulled food names from 155k USDA nutritional data rows)
2	Bad Entry Filtering	309,716	229,577	Removed technical codes, overly long/short terms, entries with numbers
3	Non-Food Filtering	229,577	228,847	Eliminated non-food terms using keyword patterns
4	Classification	228,847	228,847	Sorted into base/variation/dish categories
5	Deduplication	228,847	66,745	Removed duplicates and normalized variations
Result		427,344	66,745

Food Brands

The 4 million products in Open Food Facts don't represent 4 million unique brands. Many products share the same brand, just in different sizes or formats.

For example, Open Food Facts contains thousands of Coca-Cola products:

Coca-Cola Classic 330ml can
Coca-Cola Classic 2L bottle
Coca-Cola Classic 500ml bottle
Coca-Cola Zero 330ml can
Coca-Cola Zero 2L bottle

These are all different products, but they don't all represent different flavors. I needed to extract brand variants that actually matter for taste. Coca-Cola Classic and Coca-Cola Zero taste different, so I kept them as separate flavors. But the size (330ml vs 2L) doesn't change the flavor, so I only kept one. Extracting unique brands from 4M products gave me 307,674 brand variants.

Here's the complete filtering process:

#	Step	Before	After	Description
1	Extraction	4,001,101	307,674	Extracted unique brand names from product records, deduplicated across products
2	Filtering & Cleaning	307,674	285,441	Removed 22,233 entries: pure punctuation, technical codes, URLs, entries with no letters
3	Deduplication	285,441	282,347	Merged 3,094 spelling variants like "Dr. Pepper" → "Dr Pepper", "Ben and Jerry's" → "Ben & Jerry's"
4	Database Import	282,347	281,996	Final quality filters during import
Result		4,001,101	281,996

Non-Food Brands

The real challenge with non-food brands: what even counts as a flavor? Is Microsoft Excel a flavor? Is Ikea a flavor?

I focused on recognizability. We don't want entries so obscure that nobody gets the reference. A Stormtrooper who bonked his head in Star Wars A New Hope Oreo might be fun, but it's too specific.

A Lady Gaga Oreo or Pokémon Oreo makes sense because people actually know them.

This constraint meant aggressive filtering across 26 million raw entries:

#	Step	Before	After	Description
1	Extraction & deduplication	26,597,673	150,404	Extracted individual names and deduplicated to unique terms like "Batman", "The Avengers", "Robert Downey Jr."
2	Cleaning & classification	150,404	149,884	Removed invalid entries
3	Deduplication	149,884	131,155	Removed more duplicates
4	Normalization	131,155	130,712	Standardized formats
5	Database import	130,712	130,989	Final import to database
Result		26,597,673	130,989

Total After Processing

Category	Before	After	Reduction
Food Flavors	427,344	66,745	84.4%
Food Brands	4,001,101	281,996	93.0%
Non-Food Brands	26,597,673	130,989	99.5%
Total	31,026,118	479,730	98.5%

Phase 3: Manual Review Interface

After all the automated processing, I still had 479,730 entries that needed manual curation. I built a comprehensive review interface directly into the generator to go through each entry one by one.

The manual review interface: approve, reject, or flag for cleanup

Over 3-4 days, I reviewed every entry. Bad entries like Broccoli, raw, OCEAN MIST, 4 bunches; Product of USA (NC1) - NFY0905IX got rejected as too technical. Legitimate flavors like Danny DeVito got approved. Entries with weird formatting got flagged for cleanup.

The combination of automated filtering and manual review reduced the database from 479,730 entries to 404,539 flavors, before adding the dictionary.

Final Flavor Count

Manual review filtered each category:

Category	Before	After	Rejected
Food Flavors	66,745	33,856	32,889
Food Brands	281,996	251,179	30,817
Non-Food Brands	130,989	119,504	11,485
Total	479,730	404,539	75,191

The Dictionary Addition

After reviewing 66,745 food entries, I had 33,856 approved food flavors. But I couldn't shake the feeling I was missing potential flavors.

Somewhere out there was the platonic ideal of an Oreo flavor and I didn't want to miss it.

So I did the only rational thing: I read the dictionary. I processed every entry, filtered for food-related words, and extracted 2,179 additional food terms. Adding these to the existing 33,856 gave me 36,035 final food flavors.

Category	Count	Description
Food Flavors (After Manual Review)	33,856
Dictionary Addition	+2,179	Food-related words from dictionary processing
Final Food Flavors	36,035

Food Flavors breakdown by tier:

Tier	Before	After	Rejected
Base	39,114	24,275	14,839
Variation	9,803	7,449	2,354
Dish	17,828	4,311	13,517
Total Food Flavors	66,745	36,035	30,710

Final Total Across All Categories

Category	Count
Food Flavors	36,035
Food Brands	251,179
Non-Food Brands	119,504
Total Final Flavors	406,718

The Combination Logic

With 406,718 total flavor components, I needed to set a reasonable limit on combinations.

The problem: you can't just stack flavors endlessly. Mix too many paint colors together and you get brown. Mix too many flavors and you get the same result: an indistinguishable mess.

A Bacon Mango Doritos Soy Sauce Mint Tom Hanks Pickle Oreo isn't innovative, it's just noise.

Your taste buds can't process that many competing signals. So I capped it at 4 flavors per Oreo max.

The calculation counts all possible Oreos with 1, 2, 3, OR 4 flavors (because an Oreo needs at least one flavor):

k Value	Combinations	Description
k=1	406,718	Just one flavor
k=2	82,709,562,403	Two flavors combined
k=3	11,213,100,794,099,516	Three flavors combined
k=4	1,140,134,072,368,046,162,485	Four flavors combined
Total	1,140,145,285,551,550,231,122

Total possible Oreo combinations: 1,140,145,285,551,550,231,122

The 4-flavor combinations (k=4) make up 99.9990165% of all possibilities. Each additional slot increases the combinations factorially, which is why the jump from k=3 to k=4 is so massive.

Exponential growth: k=4 combinations dwarf everything else

Building the Generator

Now that I've mapped 1.1 sextillion Oreo combinations, I need to build a generator that lets people actually explore them.

The obvious approach doesn't work: you can't pre-generate and store all combinations. My computer has 1 terabyte of storage. Even at just 1 byte per combination, the total storage needed is:

1,140,145 petabytes
Storage needed at 1 byte per combination

So... obviously we can't do that.

Instead, the generator picks random flavors from the database on demand, calculating combinations in real-time.

The first version was straightforward: SELECT 4 random flavors, display them. Done.

Except it was boring. Without scores, every combination felt equally meaningless.

The Scoring System

I added a scoring system with three components: edibility, harmony, and novelty. Each combination gets rated 0-100% based on how the flavors work together.

Problem solved, right?

Wrong. Most combinations still clustered around mediocre. Strawberry Vanilla Cookie Cream Oreo scores 52%. Chocolate Banana Caramel Mint Oreo scores 48%. The mathematical average of random ingredients is... average.

Nobody wants to browse through endless 45-55% scores. The generator needed something more aggressive.

Flavor Tiers

The scoring system works by classifying every flavor in the database into one of four tiers:

Tier	Description	Examples
God-Tier	Classic dessert ingredients	`vanilla`, `chocolate`, `cookie`, `peanut butter`, `caramel`
Great	Popular fruits and spices	`strawberry`, `mint`, `cinnamon`, `coffee`
Weird	Savory foods that could work	`bacon`, `pizza`, `cheese`, `popcorn`
Terrible	Things that should never be Oreos	`soap`, `garbage`, `gasoline`

Each tier affects how the three components get calculated:

Edibility

Tier	Range	Notes
God-tier	85-100	Classic dessert flavors
Great	75-95	Popular fruits and spices
Weird	80-100 or 5-35	Unpredictable (20% chance high, 80% chance low)
Terrible	1-15	Should never be Oreos

Harmony

Pairing Type	Range	Notes
Food-food	40-100	Natural flavor combinations
Food-brand	30-90	Mixed compatibility
Brand-brand	1-80	Wildcards, unpredictable

Novelty

Category	Range	Notes
Non-food brands	50-100	Highest novelty
Food brands	30-90	Moderate novelty
God-tier foods	5-70	Lowest novelty (too common)

A combination of four god-tier flavors might score high on edibility and harmony but low on novelty. Mix in terrible flavors and you get the opposite: high novelty, terrible edibility.

But most combinations still land around 50%. The breakthrough was an anti-boring algorithm that pushes boring middle scores toward the extremes.

Anti-Boring Algorithm

When combinations score 45-55%, there's a 40% chance the algorithm pushes them to extremes:

private avoidBoringScores(edibility, harmony, novelty, finalScore, randomSeed) {
  if (finalScore >= 45 && finalScore <= 55) {
    // 60% chance: keep boring score
    // 40% chance: make it exciting
    if (this.seededRandom(randomSeed + 2000) < 0.6) {
      return { edibility, harmony, novelty, finalScore };
    }

    // Push to extreme: 60-90% if above 50, or 10-40% if below
    const targetScore = finalScore > 50
      ? 60 + this.seededRandom(randomSeed + 2001) * 30
      : 10 + this.seededRandom(randomSeed + 2002) * 30;

    // Adjust all three components to hit target
    const adjustment = targetScore - finalScore;
    const adjustmentPerComponent = adjustment / 3;

    return {
      edibility: edibility + adjustmentPerComponent,
      harmony: harmony + adjustmentPerComponent,
      novelty: novelty + adjustmentPerComponent,
      finalScore: (edibility + harmony + novelty) / 3
    };
  }

  return { edibility, harmony, novelty, finalScore };
}

This creates more polarizing results: god-tier (80%+) or terrible (20%-), with fewer "meh" scores.

Using the Generator

The Interface

The UI gives you four empty slots. You drag flavor types (Food, Brand Food, or Non-Food Brand) into each slot. You can fill all four slots, or just one. Click "Generate" and the backend randomly picks flavors matching your constraints from the database, scores them using the tier-based system and anti-boring algorithm, then returns a combination with scores.

Each generated combination shows:

Flavor Names: The selected flavors and their types
Component Scores: Edibility, Harmony, and Novelty (0-100%)
Overall Score: Final rating from 0-100%
Analysis Label: "GOD-TIER", "CHAOTIC MESS", etc.

You can copy the result as an image or share it to Twitter/Bluesky.

Drag flavor types into slots, generate, and see the scored results

Achievements

The generator tracks your session and unlocks achievements:

Milestone:

First Bite: Your first generation
Flavor Explorer: Generate 10 combinations
Combination Master: Generate 100 combinations

Discovery:

Reality Check: Match an actual Oreo product
Unique Explorer: Discover 100 unique combinations

Special:

Perfect Harmony: Score 90% or higher
Brave Soul: Score less than 10%
Speed Demon: Generate 10+ per minute

Session stats show how many you've generated, your best score, generation rate per minute, and how long you've been generating.

Tech Stack

Backend:

NestJS
TypeScript
SQLite
TypeORM for queries

Frontend:

Vite
React
TypeScript
Lucide React for icons
Canvas API for image generation

The Numbers

Final stats from the actual implementation:

406,718 total flavors in database
1,140,145,285,551,550,231,122 total possible combinations (all 1-4 flavor Oreos)

From 31 million raw records to 1.1 sextillion combinations, the Oreo Generator maps the entire flavor possibility space. Somewhere out there is the Platonic Ideal of an Oreo Flavor, and now you can find it.

Try It Yourself

Try the Oreo Generator yourself or watch the video walkthrough to see the complete story.

Michael Scott Quoted in the Scranton Times with CSS Grid

Cody Pearce — Fri, 17 Apr 2020 18:06:47 +0000

Newspapers are a great way to practice creating layouts with CSS Grid because their layouts are separated so distinctly into columns and rows. Below is a recreation of The Scranton Times newspaper from the Office created by Etsy user datemike1. The title and quotes are from season 3 episode 20, "Product Recall", where Michael holds a press conference with a reporter, Chad Light, from The Scranton Times. Earlier in the episode, Michael pitches the crazy long article headline.

This was originally published on codinhood.com

Convention banner

The banner is one of the more complicated objects to create due to its unique shapes. Essentially, there are 3 main parts: the center rectangle, left and right rectangles, and the connecting pieces between those two.

The connecting pieces, highlighted as 3, are right triangles with a darker shade of red to give the illusion of a shadow.

Scranton Times title

The newspaper's title is using the UnifrakturCook font, which does not match the font in the original very well. As far as I could tell, the original is using a paid font that I could not find a free alternative to that looked as good so I went with the best font on Google Fonts.

Main article title

The title's font is Impact, which makes the long title stand out so much more. Getting each line to line up was a challenge because each line has a different font-size. I ended up using CSS Grid to keep the required number of words per line, then played around with the font-size until each lined up how it should.

Main grid

The layout is broken into 5 columns of equal width with a column-gap of 20px. The image and quote span the middle three columns. There's several ways that this can be accomplished with CSS Grid, but I went with a nested grid where the main grid is three columns. The left and right columns are the same widths, while the middle column spans three columns including the gaps.

.newspaper__grid {
  display: grid;
  grid-template-columns: 208px 1fr 208px;
  grid-gap: 20px;
}

The middle column, within the main grid, is also a grid with three columns. Each of these sub columns has the same width.

.newspaper__threecolumn {
  display: grid;
  grid-template-columns: repeat(3, 208px);
  grid-gap: 20px;
}

Bottom Grid

The bottom grid is made up of 8 columns with different widths. The 1px columns are the divider lines. This certainly isn't the only way to achieve this effect, but it shows how flexible a grid layout can be.

.newspaper__bottom {
  display: grid;
  grid-template-columns: 270px 100px 1px 240px 1px 240px 1px 208px;
  grid-gap: 10px;
}

Conclusion

CSS Grid allows us to create complex layouts with just a few lines of CSS, which, in many cases, is dramatically simpler than previous CSS methods.

Luigi in CSS

Cody Pearce — Fri, 10 Apr 2020 16:39:46 +0000

Always the second fiddle, Luigi deserves some love. Inspired by this great dribble illustration, check out how I recreated Luigi in CSS below using a series of ovals.

This was originally published on codinhood.com

Luigi's Hat CSS

Stripping away all the details on the hat, you end up with what is essentially a fat egg shape that is thicker on the bottom. We can create this shape in CSS by providing 8 values to the border-radius property, which allows us to customize the height and width of each corner's border-radius. Check out the W3C spec on border-radius to learn more about this technique.

<div class="Luigi">
  <div class="Luigi__hat"></div>
</div>

.Luigi {
  height: 400px;
  width: 400px;
  position: relative;
}
.Luigi__hat {
  margin-left: calc(50% - 125px);
  height: 250px;
  width: 250px;
  background: #1ca42f;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}

Luigi Hat Logo CSS

The capital "L" logo is a little more complicated than it looks, because both the stem and branch of the "L" are different sizes, thicker on one end, and rotated slightly. Getting this to look right took a few iterations and pseudo-elements.

<div class="Luigi__hat">
  <div class="Luigi__logo">
    <div class="Luigi__stem"></div>
    <div class="Luigi__branch"></div>
  </div>
</div>

.Luigi__logo {
  background: white;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  left: calc(50% - 40px);
  top: 25px;
  position: absolute;
}
.Luigi__stem {
  position: absolute;
  top: 8px;
  left: calc(50% - 15px);
  height: 45px;
  width: 16px;
  background: #1ca42f;
  border-radius: 1px;
}
.Luigi__stem::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 12px;
  top: -1px;
  background: white;
  transform: rotate(-5deg);
}
.Luigi__stem::after {
  content: "";
  position: absolute;
  height: 40px;
  width: 5px;
  top: 0px;
  left: 12.33px;
  background: white;
  transform: rotate(3deg);
}
.Luigi__branch {
  position: absolute;
  top: 45px;
  left: 25px;
  height: 11px;
  width: 33px;
  background: #1ca42f;
  border-radius: 1px;
}
.Luigi__branch::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 20px;
  top: -2px;
  left: 11.5px;
  background: white;
  transform: rotate(-5deg);
}

Luigi's cap CSS

The cap is an oval shape with a darker inside oval to give the illusion of being "inside" the cap. The illusion won't really work until we put ahead in there, but it should overlap the white part of the logo to help give the illusion of depth on the hat.

<div class="Luigi__hat">
  <div class="Luigi__logo">
    <div class="Luigi__stem"></div>
    <div class="Luigi__branch"></div>
  </div>
  <div class="Luigi__cap "></div>
</div>

.Luigi__cap {
  position: absolute;
  left: calc(50% - 85px);
  top: 105px;
  width: 170px;
  height: 140px;
  border-radius: 50%;
  background: #025a10;
  box-shadow: 0 -0.8em 0 0 #32b744;
}

Luigi's Ears CSS

Luigi's ears are ovals with specific border-radius's on either side. The side of the ear closest to the face is less rounded while the outside of the ear is more rounded. We can use the border-radius shorthand to define each corner of the oval to create this shape as shown below.

<div class="Luigi">
  <div class="Luigi__ear Luigi__ear--left"></div>
  <div class="Luigi__ear Luigi__ear--right"></div>
  ...
</div>

.Luigi__ear {
  background: #f8ccb3;
  width: 50px;
  height: 75px;
  left: 80px;
  top: 200px;
  position: absolute;
  border-radius: 50% 40% 40% 90%;
  overflow: hidden;
}
.Luigi__ear--right {
  left: 270px;
  border-radius: 40% 50% 90% 40%;
}

.Luigi__ear--left::after {
  content: "";
  height: 60px;
  width: 40px;
  background: #e5b69b;
  position: absolute;
  right: -5px;
  top: 5px;
  border-radius: 50% 40% 40% 90%;
}

.Luigi__ear--right::after {
  content: "";
  height: 60px;
  width: 40px;
  background: #e5b69b;
  position: absolute;
  left: -5px;
  top: 5px;
  border-radius: 40% 50% 90% 40%;
}

Luigi's Face CSS

Hopefully, at this point, you've realized that I'm probably going to use an oval with border-radius to create Luigi's face, in which case, you're absolutely right. We can create the five-o-clock shadow by adding a vertical linear-gradient that does not blend.

<div class="Luigi">
  ...
  <div class="Luigi__face"></div>
</div>

.Luigi__face {
  background-image: linear-gradient(to bottom, #f8ccb3 50%, #ecb494 50%);
  height: 250px;
  width: 175px;
  position: absolute;
  top: 115px;
  left: calc(50% - 87.5px);
  border-radius: 100%;
  z-index: 1;
}

Luigi's Eyebrows CSS

Luigi's eyebrows are essentially fat arcs that taper off on the side very quickly. We can create this effect in CSS by first creating a regular circle in CSS:

Then creating another circle that overlaps the first circle:

Then changing the overlapping circle to match the color of the background to create the illusion of "cutting out" the original circle:

The second circle that overlaps the first is created with the ::after pseudo-element, but you could easily just create another full element.

<div class="Luigi__eyebrow"></div>
<div class="Luigi__eyebrow Luigi__eyebrow--right"></div>

.Luigi__eyebrow {
  width: 40px;
  height: 43px;
  border-radius: 100%;
  background: #2e0400;
  position: absolute;
  left: 37px;
  top: 10px;
  transform: rotate(10deg);
}
.Luigi__eyebrow::after {
  content: "";
  background: #f8ccb3;
  position: absolute;
  bottom: -10px;
  left: 3px;
  height: 40px;
  width: 45px;
  border-radius: 100%;
}
.Luigi__eyebrow--right {
  left: 97px;
  transform: rotate(-10deg);
}
.Luigi__eyebrow--right::after {
  right: 4px;
  left: auto;
}

Luigi Eyes CSS

The eyes are really just nested ovals (see a pattern yet?) with different colors at specific positions.

<div class="Luigi__eye">
  <div class="Luigi__iris">
    <div class="Luigi__pupil"></div>
  </div>
</div>
<div class="Luigi__eye Luigi__eye--right">
  <div class="Luigi__iris Luigi__iris--right ">
    <div class="Luigi__pupil Luigi__pupil--right"></div>
  </div>
</div>

.Luigi__eye {
  background: white;
  height: 70px;
  width: 45px;
  border-radius: 100%;
  position: absolute;
  left: 35px;
  top: 40px;
  overflow: hidden;
  z-index: 2;
}
.Luigi__eye--right {
  left: 95px;
}
.Luigi__iris {
  width: 35px;
  height: 55px;
  background: #2ba7d1;
  border-radius: 100%;
  right: -2px;
  bottom: 7px;
  position: absolute;
}

.Luigi__iris--right {
  left: -2px;
  right: auto;
}

.Luigi__pupil {
  width: 23px;
  height: 40px;
  background: black;
  border-radius: 100%;
  right: 4px;
  bottom: 7px;
  position: absolute;
}
.Luigi__pupil::before {
  content: "";
  position: absolute;
  background: white;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  left: 5px;
  top: 5px;
}
.Luigi__pupil--right {
  right: auto;
  left: 4px;
}

Luigi's Nose CSS

Luigi's nose, like most other elements in this image, is an oval with slightly different border-radius values for each side. Position the nose over the eyes to create some depth as well.

<div class="Luigi">
  ...
  <div class="Luigi__nose"></div>
  ...
</div>

.Luigi__nose {
  width: 84px;
  height: 84px;
  border-radius: 50% 50% 60% 60%;
  background: #f6b996;
  position: absolute;
  left: calc(50% - 42px);
  top: 86px;
  z-index: 3;
}

Luigi's Mustache CSS

We've come to the most important part of the face: the mustache. The mustache really brings the whole image together so it's important to get right. We're going to start with an oval:

Then we're going to create two more large ovals on either side of the main oval using multiple box-shadows, check out the image to see the placement.

box-shadow: -2.25em 1em 0 red, 2.25em 1em 0 blue;

The blue and red colors are just placeholders so you can distinguish the shapes better. Next, we're going to create another oval that spans across all three ovals on the top. This oval will have the same color as Luigi's skin, while the two box-shadow ovals should be changed to the color of the mustache.

The top oval will blend in with Luigi's skin on either side of his nose to give the illusion of cutting away the ovals, similar to his eyebrows. Finally, we need to place the mustache under his nose but above his chin.

<div class="Luigi__mustache"></div>

.Luigi__mustache {
  position: absolute;
  top: 73px;
  left: calc(50% - 55px);
  height: 96px;
  width: 110px;
  border-radius: 50%;
  background: #2e0400;
  box-shadow: -2.25em 1em 0 #2e0400, 2.25em 1em 0 #2e0400;
}

.Luigi__mustache::after {
  content: "";
  position: absolute;
  top: 0em;
  left: calc(50% - 85px);
  height: 60px;
  width: 170px;
  border-radius: 50%;
  background: #f8ccb3;
}

If you liked this CSS demo, you also might like Draw and Animate Bender's Face with CSS or Animate Octocat swimming with CSS.

Create Animated Loading Text with CSS

Cody Pearce — Fri, 03 Apr 2020 15:56:21 +0000

This was originally published on codinhood.com

Loading animations are a great way to give visual feedback when a user is waiting for some action to finish. In this tutorial, we will learn one method of animating text up and down like a wave to act as a loading animation.

HTML and CSS Setup

If we were animating the text as a group, then we could put all of the letters in one element. But this animation requires that each letter animates separately, therefore we need to separate each letter into its own element.

<div class="container">
  <div class="loading">
    <div class="loading__letter">L</div>
    <div class="loading__letter">o</div>
    <div class="loading__letter">a</div>
    <div class="loading__letter">d</div>
    <div class="loading__letter">i</div>
    <div class="loading__letter">n</div>
    <div class="loading__letter">g</div>
    <div class="loading__letter">.</div>
    <div class="loading__letter">.</div>
    <div class="loading__letter">.</div>
  </div>
</div>

The container class will center the text on the page and define the background color. The loading class uses flex-direct: row to force the loading_letter elements to render as a row.

.container {
  height: 100vh;
  background: #773d8c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  display: flex;
  flex-direction: row;
}

Finally, define some basic styling for the text. The font Audiowide can be sourced from Google Fonts.

@import url(https://fonts.googleapis.com/css?family=Audiowide);

.loading__letter {
  font-size: 88px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: "Audiowide";
  color: #fec468;
}

Loading Text Animation

The @keyframe animation uses the translateY transform function to move each letter up 40 pixels and then back down to 0 pixels. We could define the peak of the animation at 50%, or half-way through the animation, but defining the peak a little earlier (40%) and finishing the animation a little earlier (80%) means there will be a small pause in between each iteration.

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(-40px);
  }
  80%,
  100% {
    transform: translateY(0px);
  }
}

Update the .loading_letter class with the animation-name set to bounce, animation-duration set to 2s, and the animation-iteration-count to infinite.

.loading__letter {
  font-size: 88px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Since we're adding the exact same animation to each letter, with the exact same timing, the letters will animate as a group:

To create the wave animation we need to animate the letters one after each other, or sequentially. We can do this in CSS by adding an increasing the animation-delay for each letter in equal increments. The first letter will start immediately, the second letter will be delayed 0.1 seconds, the third letter 0.2 seconds, and so forth. Finally, we can select each letter in CSS using the nth-child(num) pseudo-class by passing in the position.

.loading__letter:nth-child(2) {
  animation-delay: 0.1s;
}
.loading__letter:nth-child(3) {
  animation-delay: 0.2s;
}
.loading__letter:nth-child(4) {
  animation-delay: 0.3s;
}
.loading__letter:nth-child(5) {
  animation-delay: 0.4s;
}
.loading__letter:nth-child(6) {
  animation-delay: 0.5s;
}
.loading__letter:nth-child(7) {
  animation-delay: 0.6s;
}
.loading__letter:nth-child(8) {
  animation-delay: 0.8s;
}
.loading__letter:nth-child(9) {
  animation-delay: 1s;
}
.loading__letter:nth-child(10) {
  animation-delay: 1.2s;
}

Try playing around with different delay increments, or try a different animation-timing-function like ease-in-out and see how it affects the animation.

How to Create a Skybox With Three.js

Cody Pearce — Fri, 27 Mar 2020 23:58:26 +0000

This was originally published on codinhood.com

Skyboxes are typically used in video games to create the illusion of far off three-dimensional backgrounds. A skybox is essentially a cube with textures on each side of the cube. The player or camera is then placed within the cube so that all six textures surround them giving them the illusion that they're within a much larger environment. reactnativeinfinity.com makes use of this technique to create the illusion of spinning in space. The Codepen below has a few different skyboxes you can try out. Click and drag the screen to move around.

Three.js setup

First, set up a scene, camera, and renderer within an init function we will call to initialize Three.js. We'll use a PerspectiveCamera with a position that is zoomed out pretty far so we can see the box before jumping in. We'll also use the THREE.WEbGLRenderer and append it to the body of the page. Finally, the animate function will handle rerendering the scene with any updates we add.

let scene, camera, renderer, skyboxGeo, skybox;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    55,
    window.innerWidth / window.innerHeight,
    45,
    30000
  );
  camera.position.set(1200, -250, 20000);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.id = "canvas";
  document.body.appendChild(renderer.domElement);
  animate();
}
function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

init();

Import the core Three.js library.

<script src="https://threejs.org/build/three.min.js"></script>

Set the body height to the viewport height and add a grey background to the body so we can see the cube.

body {
  margin: 0;
  height: 100vh;
  background: #bdc3c7;
}

Since we haven't added any objects we'll only see a grey background right now.

Add Three.js box

We can add a box with THREE.BoxGeometry with width, height, and depth set to 10000. Then use THREE.Mesh to apply a texture to it, in this case, it will default to a pure white texture. Finally, add the object to the scene before calling the animate function within the init function.

function init() {
  ...
  skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
  skybox = new THREE.Mesh(skyboxGeo);
  scene.add(skybox);

  animate();

Even though it's a cube, it looks like a square because we're viewing it straight on. To verify it is a cube we can add a rotation animation within the animate function:

function animate() {
  skybox.rotation.x += 0.005;
  skybox.rotation.y += 0.005;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Skybox Mesh Material

You can find free skybox images on opengameart.org or you can search Google for "free skybox images". There should be six images that correspond to each side of the cube that seamlessly mesh together. For example, for React Native Infinity, the six space images correspond to different sides as shown below.

Each image should be named according to the side which they correspond to, for example, purplenebula_ft.png is the front image, purplenebula_rt.png is the right image, and purplenebula_dn.png is the bottom image. There are three steps we need to follow to add these images to our cube:

Load each image as a Texture
Map each Texture to a Material array
Add Material array to the Skybox cube

1. Load Images as Textures

Textures can be loaded in Three.js using the TextureLoader().load() function. The load() method takes the path of the image as a parameter. We could load each image by creating six TextureLoader() functions, like this:

const ft = new THREE.TextureLoader().load("purplenebula_ft.jpg");
const bk = new THREE.TextureLoader().load("purplenebula_bk.jpg");
const up = new THREE.TextureLoader().load("purplenebula_up.jpg");
const dn = new THREE.TextureLoader().load("purplenebula_dn.jpg");
const rt = new THREE.TextureLoader().load("purplenebula_rt.jpg");
const lf = new THREE.TextureLoader().load("purplenebula_lf.jpg");

But it would be better to create a reusable function that loops through all of our images for us. Create a function createPathStrings() that will create an array of path strings from a file image name, filename.

function createPathStrings(filename) {
  const basePath = "./static/skybox/";
  const baseFilename = basePath + filename;
  const fileType = ".png";
  const sides = ["ft", "bk", "up", "dn", "rt", "lf"];
  const pathStings = sides.map(side => {
    return baseFilename + "_" + side + fileType;
  });

  return pathStings;
}

This should create an array of strings that represent the path to each image:

['./static/skybox/purplenebula_ft.jpg', './static/skybox/purplenebula_bk.jpg', ...]

Next, load each texture using TextureLoader().load() by mapping over the array above. Let's create another function, createMaterialArray(), to generate a new array of loaded textures. We will also pass in the filename parameter into the createPathStrings function.

let skyboxImage = "purplenebula";
function createMaterialArray(filename) {
  const skyboxImagepaths = createPathStrings(filename);
  const materialArray = skyboxImagepaths.map(image => {
    let texture = new THREE.TextureLoader().load(image);

    return texture;
  });
  return materialArray;
}

2. Map each Texture to a Mesh array

The MeshBasicMaterial() Three.js method will allow us to map our textures above to a Three.js material. Instead of creating another function to do this, we can simply modify the createMaterialArray() function to return a Three.js material instead of the loaded texture.

function createMaterialArray(filename) {
  const skyboxImagepaths = createPathStrings(filename);
  const materialArray = skyboxImagepaths.map(image => {
    let texture = new THREE.TextureLoader().load(image);

    return new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); // <---
  });
  return materialArray;
}

3. Add Mesh array to the Skybox cube

We're finally ready to add our mesh array to the cube we created above. First, create a variable, skyboxImage, with the base file name. Pass that variable into the createMaterialArray to generate our mesh array. Finally, pass that array into the second parameter of the new Three.Mesh() function.

const skyboxImage = 'purplenebula';

function init() {
...

  const materialArray = createMaterialArray(skyboxImage);
  skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
  skybox = new THREE.Mesh(skyboxGeo, materialArray);
  scene.add(skybox);

  animate();
}

Our cube should now have the mesh array, click the "Outside Box" button to see how this should look.

Place camera inside the cube

We can change the camera's z position from 20000 to 2000 to put the camera inside the cube.

function init()
  ...
  camera.position.set(1200, -250, 2000);
  ...
}

Orbit Controls

While the above works to put us inside the cube, it would be better if could control the camera with the mouse and look around the environment. The Orbit Controls package for Three.js allows us to do that add a <script> import:

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

First, add another variable named controls to the initialization at the top. Then assign that variable to the OrbitControls method while passing in the camera and domElement. Enable the controls by setting controls.enabled to true. Finally, set a minDistance and maxDistance so that the user cannot zoom outside of the cube.

let scene, camera, renderer, skyboxGeo, skybox, controls;

function init() {
  ...

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  controls.minDistance = 700;
  controls.maxDistance = 1500;

  ...
  animate();
}

Next, remove the rotation in the animate() function and add controls.update();

function animate() {
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

You should now be able to click and drag the environment around to see whatever part you want. If you want the environment to rotate again, like you're in space rotating, you can use the autoRotate property:

function init() {
  ...

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  controls.minDistance = 700;
  controls.maxDistance = 1500;
  controls.autoRotate = true;
  controls.autoRotateSpeed = 1.0;
  ...
  animate();
}

Resize window

If you resize your browser window after initialization the canvas will not resize to fit the new window size. To fix this create a function to redefine the camera.aspect and renderer size to the height and width of the window:

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

Then add an event listener on the window resize event and pass this new function. Add this event listener to the init() function right above the animate() call.

function init() {
  ...
  window.addEventListener('resize', onWindowResize, false);
  animate();
}

The canvas will now resize with the window.

Conclusion

Skyboxes are a neat way to create the illusion of a 3d environment quickly. Although generally used for video games, there might be some creative ways you could implement them in a web project.

10 Dropdown Menu Animations with CSS Transforms

Cody Pearce — Thu, 19 Mar 2020 15:00:06 +0000

This was originally published on codinhood.com

Dropdown menus allow the user to see more information about a particular topic without overwhelming the page with too much information. Most dropdown menu animations follow one of two patterns, animating the whole menu as a group or animating each item within the menu individually. CSS transforms allow us to animate either pattern with great performance because CSS transforms affect the Composite step in your browser's Critical Rendering Path rather than the Paint, Layout, or Styles step. Below are five animations using CSS transforms for both the whole menu and each item individually. The CSS syntax is Stylus, which is a similar to SASS.

While animations can add some fun visual flair, keep in mind these examples are slightly exaggerated to make the mechanics of the animation more obvious.

Animating the Whole Dropdown Menu

The structure is the same for all menus: dropdown is the container for the menu title and the hidden menu. dropdown_menu is the actual menu itself, which is by default hidden.

<li class="dropdown dropdown-6">
  Scale Down
  <ul class="dropdown_menu dropdown_menu--animated dropdown_menu-6">
    <li class="dropdown_item-1">Item 1</li>
    <li class="dropdown_item-2">Item 2</li>
    <li class="dropdown_item-3">Item 3</li>
    <li class="dropdown_item-4">Item 4</li>
    <li class="dropdown_item-5">Item 5</li>
  </ul>
</li>

The dropdown_menu is displayed only when the whole dropdown (the title and button) is hovered. This will display the dropdown menu on hover without any animations.

.dropdown_menu
  position: absolute
  top: 100%
  left: 0
  width: 100%
  perspective: 1000px
  display: none
.dropdown:hover .dropdown_menu--animated
  display: block

To animate the menu we need to add the animation property to the dropdown_menu. The animation-name property should be set the name we give to the @keyframes rule, in this case, growDown. The animation-fill-mode property defines what styles should be applied at the end of the animation. In our case, we are animating the menu from the closed state to the open state. This means we want the dropdown menu to preserve the styles of the final animation state, the value forwards allows us to do that.

.dropdown_menu-6
  animation: growDown 300ms ease-in-out forwards

The last property we need to consider is transform-origin, which defines where the animation is applied. For our animations, this property defines where the menu originates from physically. The default setting of transform-origin will scale the menu from the "center of the menu" not from the button. For example, animating the roateX transform property will look like this with the default transform-origin value.

Changing transform-origin to top center will make the animation rotate from the button.

.dropdown_menu-6
  animation: growDown 300ms ease-in-out forwards
  transform-origin: top center

We can choose from any of the 21 transform functions to animate our menu using a @keyframes rule. The only rule we need to follow is that the final state of the animation, the 100% property, must be the normal state for the menu being open. For example, if we animate the scaleY of the menu, we need to make sure that scaleY is set to 1 so the menu looks normal when the animation is finished.

You'll notice that each animation "goes past" the intended end state around 80% or 70% then returns to the end state at 100%. This is a common technique in animation to create the illusion of momentum or "bounce" to give it more of a natural feel. Two examples are shown below, but check the Codepen above for more examples.


@keyframes growDown {
  0% {
    transform: scaleY(0)
  }
  80% {
    transform: scaleY(1.1)
  }
  100% {
    transform: scaleY(1)
  }
}

@keyframes rotateMenu {
  0% {
    transform: rotateX(-90deg)
  }
  70% {
    transform: rotateX(20deg)
  }
  100% {
    transform: rotateX(0deg)
  }
}

Animating Each Menu Item

The HTML structure is identical to animating the whole menu. Each menu item, however, needs to set opacity to 0 in addition to setting display: none. We do this is because we don't want all menu items to be visible immediately, like we did when animating the whole menu. Instead, we will animate each into view individually by animating opacity with a transform.

.dropdown_menu li
  display: none
  color: white
  background-color: #34495e
  padding: 10px 20px
  font-size: 16px
  opacity: 0
  &:hover
    background-color: #2980b9

.dropdown:hover .dropdown_menu li
     display: block

Animating the whole menu meant we only needed to add an animation for each menu, but animating each menu item individually means we need to add a separate animation property for each menu item. Fortunately, all menu items will share the same @keyframe rule, same duration, same timing function, same animation-fill-mode, and same transform-origin property. The only property that needs to be different is the animation-delay to stagger each item's animation.

We could manually write a CSS selector for each dropdown menu item with a different animation-delay or we can take advantage of Stylus's for loop to iterate over each and generate those selectors automatically. The end result will be the same so let's use a for loop to make our lives easier.

There are five menu items for each dropdown, to iterate five times we can use the following syntax: for num in (1..5). Each dropdown_item has a class with a sequential number: dropdown_item-1, dropdown_item-2, etc. Therefore, we can select each by using the num variable and selector interpolation: .dropdown_item-{num}. Finally, we can use the num variable to delay each item by an even amount. If the animation duration is 300ms and there are 5 items overall, then we can delay each item by 60ms increments: (num * 60ms). Putting this all together produces the following:

.dropdown_menu-2
  for num in (1..5)
     .dropdown_item-{num}
        animation: rotateX 300ms (num * 60ms) ease-in-out forwards
        transform-origin: top center

The @keyframe rules are almost the exact same as the whole menu animations, with the exception of also animating opacity from 0 to 1.

@keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

Visualizing the 71 Times Apple Has Been Declared Dead with React and Nivo

Cody Pearce — Fri, 13 Mar 2020 20:05:52 +0000

This was originally published on codinhood.com

Doomsayers have been declaring the death of Apple for decades. Apple is not unique in this regard, of course. Every company has had its share of dedicated detractors announcing their demise. Blockbuster's end was predicated for years before it formally announced bankruptcy, while Bitcoin has been declared dead over 380 times since 2010. Some harbingers were right, some were wrong. This article is not here to pass judgment on those predictions or prophesize the future of Apple but simply to visualize some fun data points using Javascript, React, and Nivo Charts.

If you're only interested in the charts themselves and not how they were made then checkout the Apple Doomsayers Demo Page.

Apple Death Knell Data

The data is sourced from The Mac Observer's excellent Apple Death Knell Counter, which is a collection of predictions from public figures, mostly journalists, about the end of Apple. The Mac Observer staff curates the list to include only instances where the speaker is specifically stating the demise and doom of Apple and not include a simply negative sentiment.

Articles where Apple is referred to as "beleaguered" are not necessarily eligible, and in fact, the vast majority of such references are simply colorfully negative descriptions that do not qualify as an Apple Death Knell. - The Mac Observer

Unfortunately, some of the earliest death knells no longer link to live web pages. A few of these can be found on the Wayback Machine, but others cannot. For visualization purposes, we're just going to trust that all accounts are accurate.

I scraped the data from MacObserver using Beautiful Soup to scrape the Title, Author, Date, Source, and Publisher for each entry.

This gives us an array of 71 objects where each object represents one predication. From this data alone we can create our first graph. Rather than build these charts from scratch, we're going to use Nivo, which provides a set of highly customizable React components built on D3 for visualizing data. We're also going to use Day.js for dealing with dates and times.

Deaths Per Year - Data Transform

What we want to display is the number of deaths per year, which means we need to transform our array of deaths into an array of objects with two keys, one for the year of deaths and one for the number of deaths. Since Nivo requires data along the x-axis to be named x and data along the y-axis to be named y, we'll add the year to x and number of deaths to y.

function calculateYearsBetween(startYear) {
  let currentYear = new Date().getFullYear();
  let years = [];
  startYear = startYear;
  while (startYear <= currentYear) {
    years.push({ x: startYear, y: 0 });
    startYear++;
  }
  return years;
}

Next, create a function that loops through the death array and increments the correct year in the yearArray. Nivo again requires a special object format that includes a unique id to name the chart and data property to contain the actual data we want to visualize, which is the yearArray.

function deathsPerYear() {
  const yearArray = calculateYearsBetween(1994);

  appleDeaths.forEach((death, index) => {
    const dayjsDate = dayjs(death.Date);
    const yearOfDeath = dayjsDate.get("year");
    const inYearArray = yearArray.findIndex(year => {
      return year.year == yearOfDeath;
    });
    yearArray[inYearArray].y++;
  });

  const formattedData = [{ id: "deaths", data: yearArray }];
  return formattedData;
}

The result of the two functions above is an array that looks like this:

[
    id: 'deaths',
    data: [
        {x: 1994: y: 0},
        {x: 1995: y: 1},
        {x: 1996: y: 2},
        {x: 1997: y: 7},
        ...
    ]
]

Deaths Per Year - Charts with Nivo

Using Nivo's Line chart we can graph the above data for each year. Although Nivo charts have props for practically every part of the graph, all we need to get started is a defined height and width. We'll also define a container with overflow: auto so we can see the full chart on mobile by scrolling.

import { Line } from "@nivo/line";
import React from "react";
import { deathsPerYear } from "./data";

const DeathsPerYearGraph = () => {
  const newData = deathsPerYear();

  return (
    <div style={styles.container}>
      <Line data={newData} margin width={780} height={500} />
    </div>
  );
};

const styles = {
  container: {
    height: 500,
    maxWidth: 780,
    overflow: "auto",
  },
};

export { DeathsPerYearGraph };

Nivo Chart Margins

The first problem is that there is no margin between the graph itself and the edge of the container, which means the row and column labels are hidden. The margin prop allows us to define this margin and reveal the labels.

...
<Line data={newData} width={780} height={500} margin={styles.chartMargin} />
...
chartMargin: {
    top: 50,
    right: 50,
    bottom: 50,
    left: 60,
},
...

Nivo Axis Legends and Grid Lines

By default, Nivo charts do not have axis legends, but we can add a legend to any side of the chart using axisBottom, axisLeft, axisRight, and axisTop props. These props take in an object with various properties that allow us to, among other things, add legends, position legends, define axis tick size, padding, and rotation.

We can also remove the grid lines, which I think are distracting, by passing false to both the enableGridX and enableGridY prop.

...
<Line
    data={newData}
    width={780}
    height={500}
    margin={styles.chartMargin}
    enableGridX={false}
    enableGridY={false}
    axisBottom={styles.axisBottom}
    axisLeft={styles.axisLeft}
/>
...
axisLeft: {
    orient: "left",
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: "Apple Deaths",
    legendOffset: -40,
    legendPosition: "middle",
},
axisBottom: {
    orient: "bottom",
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: "Year",
    legendOffset: 36,
    legendPosition: "middle",
},
...

Nivo Theme and Points

Out-of-the-box Nivo charts can utilize color schemes from the d3-scale-chromotic module, but we can define a completely custom theme by passing in an array of colors to the colors prop. Passing in one color will define the color for the line, however, it will not define the color of the actual data points, that is, the circles on the line. To change the point size and color we can use the aptly named, pointSize and pointColor props.

Nivo charts also accept a theme prop that will allow us to style the text color and text size to make it readable on dark backgrounds.

...
<Line
    data={newData}
    width={780}
    height={500}
    margin={styles.chartMargin}
    enableGridX={false}
    enableGridY={false}
    axisBottom={styles.axisBottom}
    axisLeft={styles.axisLeft}
    colors={["#03e1e5"]}
    theme={styles.theme}
    pointSize={10}
    pointColor={"#03e1e5"}
/>
...
theme: {
    fontSize: "14px",
    textColor: "#7b7b99",
},
...

Nivo X-Axis Scale

Now that the labels are much easier to read, you'll notice that the x-axis column names are overlapping. The chart is trying to show a label for every single data point along the x-axis, which is the default behavior for scale type point. We can change the x-axis scale type with the property xScale. In this case, we want to change the scale type to linear, which will display labels evenly across a specific range. If do not provide that range, then the chart will start from 0 and show equal increments to our end date 2020. But we don't care about dates before 1994 (where our data starts), so we need to set a minimum date for the x-axis to start at, which we can do using the min property.

<Line
  data={newData}
  width={780}
  height={500}
  margin={styles.chartMargin}
  enableGridX={false}
  enableGridY={false}
  axisBottom={styles.axisBottom}
  axisLeft={styles.axisLeft}
  colors={["#03e1e5"]}
  theme={styles.theme}
  pointSize={10}
  pointColor={"#03e1e5"}
  xScale={{ type: "linear", min: "1994" }}
/>

Nivo Hover Labels

Adding the useMesh prop will display a label next to each data point when you hover over it with the values for that data pont. To customize this hover label, however, we need to provide our own label component. First, create a custom label component, Tooltip, which takes slice as a prop. Nivo will pass each data point (slice) to this component with other useful information about the chart to create a custom label.

const Tooltip = function({ slice }) {
  return (
    <div
      style={{
        background: "#09001b",
        padding: "9px 12px",
      }}
    >
      {slice.points.map(point => (
        <div
          key={point.id}
          style={{
            color: point.serieColor,
            padding: "3px 0",
          }}
        >
          <strong>{point.serieId}</strong> {point.data.yFormatted}
        </div>
      ))}
    </div>
  );
};

Now we can pass this custom Tooltip into the sliceTooltip prop with the slice prop. Also, enable custom tooltips (hover labels) by providing the enableSlices prop with the string, 'x'

<Line
  data={newData}
  width={780}
  height={500}
  margin={styles.chartMargin}
  enableGridX={false}
  enableGridY={false}
  axisBottom={styles.axisBottom}
  axisLeft={styles.axisLeft}
  colors={["#03e1e5"]}
  theme={styles.theme}
  pointSize={10}
  pointColor={"#03e1e5"}
  xScale={{ type: "linear", min: "1994" }}
  enableSlices="x"
  sliceTooltip={({ slice }) => {
    return <Tooltip slice={slice} />;
  }}
/>

Now when you hover over the chart, a tooltip will display the number of deaths.

Nivo Area Chart

We can easily convert this line chart into an Area chart by adding the enableArea prop.

<Line
  data={newData}
  width={780}
  height={500}
  margin={styles.chartMargin}
  xScale={{ type: "linear", min: "1994" }}
  enableGridX={false}
  enableGridY={false}
  axisBottom={styles.axisBottom}
  axisLeft={styles.axisLeft}
  colors={["#03e1e5"]}
  pointSize={10}
  pointColor={"#03e1e5"}
  theme={styles.theme}
  enableSlices="x"
  sliceTooltip={({ slice }) => {
    return <Tooltip slice={slice} />;
  }}
  enableArea={true}
/>

Nivo Highlight Markers

The last things we're going to add to this line chart are markers to highlight specific events in Apple's history on the chart to give more context. Nivo allows us to create vertical or horizontal lines with labels at any point on the chart by passing an array of objects to the markers prop. Each object in that array is a separate marker with properties that define which axis it should display along, the point or value to display, the style of the marker, and the text, if any, to show. Let's create three markers, one for the introduction of the iPod, the introduction of the iPhone, and Steven Job's death.

const contextLines = [
  {
    axis: "x",
    value: 2011,
    lineStyle: { stroke: "#09646b", strokeWidth: 2 },
    legend: "Steven Jobs' Death",
    textStyle: {
      fill: "7b7b99",
    },
  },
  {
    axis: "x",
    value: 2007,
    lineStyle: { stroke: "#09646b", strokeWidth: 2 },
    legend: "iPhone",
    textStyle: {
      fill: "7b7b99",
    },
  },
  {
    axis: "x",
    value: 2001,
    lineStyle: { stroke: "#09646b", strokeWidth: 2 },
    legend: "iPod",
    textStyle: {
      fill: "7b7b99",
    },
    orient: "bottom",
    legendPosition: "top-left",
  },
];

<Line
  data={newData}
  width={780}
  height={500}
  margin={styles.chartMargin}
  xScale={{ type: "linear", min: "1994" }}
  enableGridX={false}
  enableGridY={false}
  axisBottom={styles.axisBottom}
  axisLeft={styles.axisLeft}
  colors={["#03e1e5"]}
  pointSize={10}
  pointColor={"#03e1e5"}
  theme={styles.theme}
  enableSlices="x"
  sliceTooltip={({ slice }) => {
    return <Tooltip slice={slice} />;
  }}
  enableArea={true}
  markers={contextLines}
/>

Deaths Per Author - Data Transform

The next chart will be a pie graph displaying the number of death predictions per author. First, similarly to the deaths per year data, we need to transform the death array into an array that shows deaths per author. The Nivo pie chart expects the data to be an array of objects with each object containing an id and value. Creating this array will reveal that the vast majority of predictions were made by different people. To avoid graphing 50+ data points with only 1 value, we will filter the results for authors that have more than one prediction on our list using the filter method. Finally, we only want named authors so we will also filter out all "Unknow" authors.

export function deathsPerAuthor() {
  const perAuthorArray = [];

  appleDeaths.forEach((death, index) => {
    if (index == 0) {
      perAuthorArray.push({ id: death.Author, value: 1 });
    }
    const inPerAuthorArray = perAuthorArray.findIndex(author => {
      return author.id == death.Author;
    });
    if (inPerAuthorArray > -1) {
      perAuthorArray[inPerAuthorArray].value++;
    } else {
      perAuthorArray.push({ id: death.Author, value: 1 });
    }
  });
  const filtered = perAuthorArray.filter(author => author.value > 1);
  return filtered;
}

The data will end up looking like this:

[
  {
    id: "Michael Dell",
    value: 2,
  },
  ...
];

Deaths Per Author - Nivo Pie Chart

We can create a simple Pie chart using the data above in a similar way to the line chart above. Remember, we need to set margins within the chart so nothing will get cut off. Let's also set the scheme to set2.

import { Pie } from "@nivo/pie";
import React from "react";
import { deathsPerAuthor } from "./data";

const DeathsPerAuthor = ({ version }) => {
  const newData = deathsPerAuthor();

  return (
    <div style={styles.container}>
      <Pie
        data={newData}
        width={780}
        height={500}
        margin={styles.chartMargin}
        colors={{ scheme: "set2" }}
      />
    </div>
  );
};

const styles = {
  container: {
    height: 500,
    maxWidth: 780,
    background: "#09001b",
    overflow: "auto",
  },
  chartMargin: {
    top: 40,
    right: 80,
    bottom: 40,
    left: 80,
  },
};

export { DeathsPerAuthor };

Nivo Donut Chart and Section Styles

Nivo allows us to create a donut chart by defining the size of the inner radius using the innerRadius prop, try playing around with this prop on Nivo's interactive documentation for pie charts. We can add some padding in between each data section using the padAngle prop, which will make it easier to distinguish each section. The cornerRadius prop defines the radius of each section of the pie.

<Pie
  data={newData}
  width={780}
  height={500}
  margin={styles.chartMargin}
  colors={{ scheme: "set2" }}
  animate={true}
  innerRadius={0.5}
  padAngle={0.7}
  cornerRadius={3}
  borderWidth={1}
  borderColor={{ from: "color", modifiers: [["darker", 0.2]] }}
/>

Nivo Radial Labels

The chart labels are hard to read on dark backgrounds, luckily Nivo gives ample customization of these labels. We can change the label color with the radialLabelsTextColor prop. The radialLabelsLinkDiagonalLength and radialLabelsLinkHorizontalLength props allow us to customize the exact length of each part of the line to the label, while radialLabelsLinkStrokeWidth defines the line's width. The radialLabelsLinkColor defines the color of the line, setting this to from: "color" will make the line match the color of the section it's coming from. Finally, we can also customize the spacing between the line, label, and data section, but I think the defaults are fine here.

<Pie
  data={newData}
  width={780}
  height={500}
  margin={styles.chartMargin}
  colors={{ scheme: "set2" }}
  animate={true}
  innerRadius={0.5}
  padAngle={0.7}
  cornerRadius={3}
  radialLabelsTextColor="#7b7b99"
  radialLabelsLinkDiagonalLength={16}
  radialLabelsLinkHorizontalLength={24}
  radialLabelsLinkStrokeWidth={1.3}
  radialLabelsLinkColor={{ from: "color" }}
/>

Nivo Legends

Nivo legends are available for each chart type and are defined as an array of objects on the legends prop. The legend position, in relation to the chart itself, is defined by the anchor property, for this chart let's define it at the bottom. The direction prop can either be a row or a column. Each legend item can further be customized with the specific props itemWidth, itemWidth, and itemTextColor. The symbol that appears next to the text can either be a circle, triangle, square, or diamond. Finally, we need to change the bottom chart margins to give room for this legend.

<Pie
  data={newData}
  width={780}
  height={500}
  margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
  colors={{ scheme: "set2" }}
  animate={true}
  innerRadius={0.5}
  padAngle={0.7}
  cornerRadius={3}
  radialLabelsTextColor="#7b7b99"
  radialLabelsLinkDiagonalLength={16}
  radialLabelsLinkHorizontalLength={24}
  radialLabelsLinkStrokeWidth={1}
  radialLabelsLinkColor={{ from: "color" }}
  legends={[
    {
      anchor: "bottom",
      direction: "row",
      translateY: 56,
      itemWidth: 120,
      itemHeight: 18,
      itemTextColor: "#999",
      symbolSize: 18,
      symbolShape: "circle",
    },
  ]}
/>

Deaths Per Publication - Data Transform

This function is almost identical to the per author function except we're looking for publications that have multiple death knells, instead of authors. We could create a shared function that accepts a property to filter for, but we can just as easily copy and paste for now.

export function deathsPerPublication() {
  const perPubArray = [];
  appleDeaths.forEach((death, index) => {
    if (index == 0) {
      perPubArray.push({ id: death.Publisher, value: 1 });
    }
    const inPerAuthorArray = perPubArray.findIndex(author => {
      return author.id == death.Publisher;
    });
    if (inPerAuthorArray > -1) {
      perPubArray[inPerAuthorArray].value++;
    } else {
      perPubArray.push({ id: death.Publisher, value: 1 });
    }
  });
  const filtered = perPubArray.filter(author => {
    const isAboveOne = author.value > 1;
    const isNotUnknown = author.id !== "Unknown";
    return isAboveOne && isNotUnknown;
  });
  return filtered;
}

The data will end up looking like this:

[
  {
    id: "Mac Observer",
    value: 2,
  },
  ...
];

Deaths Per Publication - Pie Chart

The data here is so similar to the per author data that we're going to resuse the pie chart we created above and simply provide this publication data.

import { Pie } from "@nivo/pie";
import React from "react";
import { deathsPerPublication } from "./data";

const DeathsPerPublication = ({ version }) => {
  const newData = deathsPerPublication();

  let chart = (
    <Pie
      data={newData}
      width={780}
      height={500}
      margin={styles.chartMargin}
      colors={{ scheme: "set2" }}
      animate={true}
      innerRadius={0.5}
      padAngle={0.7}
      cornerRadius={3}
      radialLabelsTextColor="#7b7b99"
      radialLabelsLinkDiagonalLength={16}
      radialLabelsLinkHorizontalLength={24}
      radialLabelsLinkStrokeWidth={1}
      radialLabelsLinkColor={{ from: "color" }}
    />
  );

  return <div style={styles.container}>{chart}</div>;
};

const styles = {
  container: {
    height: 500,
    maxWidth: 780,
    background: "#09001b",
  },
  chartMargin: {
    top: 40,
    right: 80,
    bottom: 40,
    left: 80,
  },
};

export { DeathsPerPublication };

Word cloud

For fun, I generated a word cloud using wordclouds.com with all the relevant death knell quotes.

Conclusion

Nivo charts contain a lot of functionality out-of-the-box while allowing developers to customize almost all aspects of a chart. However, there are numerous other charting libraries for React and Javascript, check out How to Build a Bitcoin DCA Chart with React and Recharts to see how Recharts differs from Nivo.

USA Flag in CSS

Cody Pearce — Fri, 06 Mar 2020 19:51:25 +0000

This was originally published on codinhood.com

Recreating the Stars and Stripes of the United States Flag in CSS is another fun exercise to practice your CSS skills. Although each element of the flag can be recreated in numerous ways, we're going to try to keep it as simple as possible.

Background and Colors

The official colors are Old Glory Red (#B22234) and Old Glory Blue (#3C3B6E), but using those colors makes the flag look a little washed out on the web, so we're going to use #9b1c2c for red and #041E42 for blue. We can create a simple linear-gradient that goes from left-to-right by rotating the default linear-gradient position by 90deg.

<div class="container"></div>

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(90deg, #041e42 20%, #9b1c2c 100%);
}

Flag container

The official dimensions of the flag, from Wikipedia, indicate that width should be 1.9 the height, but we will approximate this by setting the width to 900px and the height to exactly half, 450px. We can scale the flag down using the transform property and scale() function at various screen widths to make our flag responsive. Finally, we're going to overlay the blue star section over the stripes using position: absolute, so we need to set this flag container to have position: relative.

<div class="container">
  <div class="USA-flag"></div>
</div>

.USA-flag {
  width: 900px;
  min-width: 900px;
  height: 450px;
  box-shadow: 0px 20px 80px 10px rgba(0, 0, 0, 0.25);
  position: relative;
}

@media (max-width: 1000px) {
  .USA-flag {
    transform: scale(0.75);
  }
}
@media (max-width: 725px) {
  .USA-flag {
    transform: scale(0.5);
  }
}
@media (max-width: 475px) {
  .USA-flag {
    transform: scale(0.375);
  }
}

@media (max-width: 340px) {
  .USA-flag {
    transform: scale(0.325);
  }
}

USA Stripes CSS

The USA flag has 13 stripes, 7 red stripes and 6 white, of equal height and width. One easy way to create this with CSS is to set the background to white and add 7 red stripes evenly spaced. However, if you want to add an animation to the stripes, or want more control over each stripe individually, then creating a separate HTML element for each stripe makes sense. Create 13 divs with the class name stripe and every other one stripe with the class name stripe stripe--white. Since each needs to be the exact same height, we can use the CSS function calc() to divide the total height of the flag (450px) by 13 to get the exact height needed for each stripe.

...
<div class="USA-stripes">
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
  <div class="stripe stripe--white"></div>
  <div class="stripe"></div>
</div>
...

.stripe {
  background-color: #9b1c2c;
  width: 100%;
  height: calc(450px / 13);
}
.stripe--white {
  background-color: white;
}

USA Blue Star Background

Since we set position:relative on the flag container, we can easily overlay the blue star background ontop of the stripes by using position:absolute, top: 0, and left:0. The blue background size stretches to the edge of the 7th stripe. This means that the height of the blue background is equivalent to the height of 7 stripes. From above, the height of a stripe is calc(450px / 13), so 7 times that height gives us the correct height calc((450px / 13) * 7). We also need to set a bit of padding to push the stars out from the edge of the blue background.

<div class="container">
  <div class="USA-flag">
    <div class="USA-stars"></div>
    <div class="USA-stripes">...</div>
  </div>
</div>

.USA-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 378px;
  height: calc((450px / 13) * 7);
  background-color: #041e42;
  z-index: 1;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

USA Stars CSS

Alfred Genkin's article, Five Methods for Five-Star Ratings, dives into the tradeoffs of creating star shapes using HTML and CSS. The pure CSS methods are, while quite impressive, complicated and tricky to implement. For this tutorial, we're going to use the suggested method from that article, the Unicode character ★ which you can copy and paste straight into the HTML. One problem with Unicode characters, unfortunately, is that they often contain extra margins built into the glyph itself, which can mess up the spacing of each element. For this particular glyph, we can add margin-top: -4px to offset some of the glyph's internal margins.

<div class="star">★</div>

.star {
  font-size: 20px;
  color: white;
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

Star Rows

The USA flag has 50 stars broken into 9 rows that alternate between 6 stars and 5 stars per row. For both types of rows, we need to space each star out evenly across the container. We can do this easily with flexbox by setting justify-content to space-between.

<div class="star-row">
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
</div>

.star-row {
  display: flex;
  justify-content: space-between;
}

Rows with 5 stars, however, need to be inset from both sides so that they fill the "gaps" in between rows with 6 stars. We can do this by simply adding padding on either side of the row.

<div class="star-row star-row--five">
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
  <div class="star">★</div>
</div>

.star-row--five {
  padding: 0px 33px;
}

Finally, just add the rest of the rows with the appropriate number of stars for each row.

Expanding the Demo

We could expand this demo by adding a flag pole, making the flag wave in the wind, or fold the flag up in an interesting way. One example, that I made a few years ago, spins the stars around and animates the stripes downward. Click rerun to see the animation again.

How to Setup React Native Web with Storybook

Cody Pearce — Tue, 25 Feb 2020 16:42:40 +0000

This was originally published on codinhood.com

TLDR

Create a file named webpack.config.js within the .storybook folder with an alias for React Native Web.

module.exports = {
  ...
  resolve: {
    alias: {
      "react-native$": "react-native-web"
    }
  }
};

Intro

Storybook is an excellent component development environment for React and other frameworks. However, if you're using React Native Web or would like to create some RNW components with Storybook you'll need to add some more configuration. If you already have a React or React Native Web app setup then you might want to skip to the Render React Native Web with Storybook section of this article because the first section will start from scratch.

Basic React Setup

First, initialize a package.json.

npm init

Then, install React, Babel, Webpack, and the usual loaders for running a typical React app.

npm install react react-dom babel-loader @babel/core @babel/preset-env @babel/preset-react html-loader html-webpack-plugin webpack webpack-dev-server webpack-cli

Create Webpack config

Create webpack.config.js at the root of the project with the following basic react configuration.

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!()\/).*/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: "./",
    hot: true,
  },
};

Public Folder and HTML

Create a public folder at the project root. Inside that folder, create a index.html with the following HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>React Native Web Storybook</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

App Entry and Component

Create a folder src at the project root. Inside that folder, create index.js with the following React setup code:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("app"));

Next, create App.js inside the src folder with the following "Hello World" code

import React from "react";

export default class App extends React.Component {
  render() {
    return <div>Hello world</div>;
  }
}

Running Hello World

Add the following two scripts to the scripts object in package.json for running and building the app with Webpack.

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
},

Finally, run npm start in your terminal and hello world should be shown at http://localhost:8080/.

Setup Storybook with React

First, install Storybook.

npm i @storybook/react

Create a script, storybook, for starting the storybook dev server.

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "storybook": "start-storybook"
},

Create a folder, .storybook, at the project root. Create another project file, main.js within that folder and add the following:

module.exports = {
  stories: ["../src/**/*.stories.[tj]s"],
};

Create index.stories.js within src to test that Storybook is configured correctly.

import React from "react";

export default { title: "Hello World" };

export const withText = () => <div>Hello World</div>;

Finally, run npm run storybook, and the storybook server should start running on the port indicated in your terminal. In my case, the server is running on http://localhost:57823/.

Setup React Native Web

First, install React Native Web.

npm i react-native-web

Go to webpack.config.js at the project root and add an alias for react-native to react-native-web so Webpack will pull components from react-native-web instead of React Native. Add the following below plugins and above devServer:

...
  resolve: {
    alias: {
      "react-native$": "react-native-web",
    },
  },
  ...

This is the only config necessary to use React Native Web components given our current simple setup. Let's test this configuration by adding a React Native component to src/App.js.

import React from "react";
import { Text } from "react-native";

export default class App extends React.Component {
  render() {
    return <Text>Hello world</Text>;
  }
}

Run the app server again with npm start and you should see "Hello World" just as before, except this time the syntax matches React Native. The main app is now set up to render React Native components.

Render React Native Web with Storybook

Assuming you have React, React Native Web, and Storybook set up properly, the only step left is to add an alias for the Storybook Webpack server to look for react-native imports within react-native-web.

Create a file named webpack.config.js within the .storybook folder that resolves an alias for React Native Web as shown below.

module.exports = {
  ...
  resolve: {
    alias: {
      "react-native$": "react-native-web"
    }
  }
};

Now, open src/index.stories.js and create a component with React Native.

import { Text } from "react-native";
...

export const reactNative = () => <Text>React Native Web is Awesome!</Text>;

Run Storybook again with npm run storybook.

We can use any of the API's found on React Native Web's README. For example,

import { ActivityIndicator } from "react-native";
...

export const reactNativeActivity = () => <ActivityIndicator />;

Conclusion

Getting React Native Web working with Storybook can be extremely simple, but it can also be more complicated depending on the third-party libraries your app is utilizing.

Forem: Cody Pearce

Every Website Has Dark Mode. I Added Christmas Mode.

Introducing Christmas Mode

Quick Start

What You Get

Configuration

Toggle Position

React Integration

API

Contained Mode

Try It

Halloween game using js - Pumpkin Blast

Play the Game on CodePen

How to Play

The Targets

Floating Ghosts (10-75 points)

Ground Buckets (15-100 points)

Hazards and Obstacles

Spikes (Instant Death)

Canopies (Blocking)

The Wall

The Powerups

The Combo System

Progressive Difficulty

I turned CSS in a SQL Database

Introducing I Can't Believe It's Not CSS

Quick Example

What You Can Do

Database Migrations for Styles

Query Your CSS with SQL

Use Real Databases

Catch Conflicts Before They Ship

Framework Integrations

Vite

Next.js

Advanced Features

Responsive Design

Cascade Layers

Keyframe Animations

Font Faces

Try It Yourself

How many Oreo flavors are possible?

TLDR

Project Summary

Table of Contents

The Mathematical Foundation

Defining Flavor Categories

1. Food Flavors

2. Food Brand Collaborations

3. Non-Food Brand Collaborations

Building the Flavor Database

Phase 1: Data Acquisition

Food Flavors

Food Brands

Non-Food Brands

Entertainment Characters & Franchises

Sports Teams

Music & Celebrities

Non-Food Brands Summary

Total Raw Sources

Phase 2: Automated Processing & Filtering

Food Flavors

The Duplicate Problem

Three-Tier Classification System

Food Brands

Non-Food Brands

Total After Processing

Phase 3: Manual Review Interface

Final Flavor Count

The Dictionary Addition

Final Total Across All Categories

The Combination Logic

Building the Generator

The Scoring System

Flavor Tiers

Edibility

Harmony

Novelty

Anti-Boring Algorithm

Using the Generator