how it got madep. 5

how it got made

feature 01 · mike's ice creamp. 5

mike's ice cream

my first paying client. mike's has been on 2nd avenue since 2003, and its old wordpress site took 7 seconds to show up on a phone. so i rebuilt all of it by hand... the website, the admin the staff use, and the tv in the shop.

  1. homepage on a phone7.4s0.8s
  2. pages under google's “good” line1 of 66 of 6
  3. downloaded to see every page6.9 mb2.7 mb
  4. cookies on a visitor50
  5. security headers0 of 66 of 6

measured sept 28 on a phone over slow 4g, the way google's own speed test does it. old site vs new, middle of three runs.

the problem. the old site was a wordpress theme with its demo pages still in it (a medical practice's, somehow). slow on a phone, five cookies, no security headers.

what i built. the website, phone first, for people standing on 2nd avenue deciding on dessert. behind it, an admin made for phones too: staff turn a flavor off when it runs out, managers build the schedule, everyone gets their messages, and a photo editor cuts scoops out of their backgrounds. the tv in the shop reads the same flavor list.

the fun part. every drawing is drawn in code and builds itself as you scroll... scoops drop onto the cone and a cherry splats on top. a hand drops a cherry on the see all flavors button, and the 404 page drops a cone. no framework, no database, no cookies.

see it live at mikes.tue.lol ↗

the website

the cone builds itself
the cherry drop
the 404 drops a cone

the staff side

the admin's flavors list, each flavor with an on and off switch and a tv button
flavors on and off
the photo editor with a scoop of ice cream cut out on a halftone card
a photo editor that cuts out scoops
the shop tv settings, picking which drawings take turns on the tv
what the tv shows
the sundaes menu in the admin, each item with edit and on and off
the menus, drag to reorder
the hours screen with a switch and times for each day
hours, summer and holidays
the homepage tiles map, tap one to change it
the homepage, tile by tile

the tv in the shop

the shop tv flavor board, cream, on the tv now
cream, on the tv now
the shop tv flavor board, pistachio
pistachio
the shop tv flavor board, strawberry
strawberry
the shop tv flavor board, night
night
the shop tv flavor board, haunted night, candy corn for a cherry
haunted night, candy corn for a cherry
the shop tv flavor board, pumpkin patch, with a bat
pumpkin patch, with a bat
feature 02 · textuep. 5

textue

the other thing i make... after effects panels, under the name studio.tue (see p. 2). textue is the biggest one so far.

the promo, 20 seconds, sound on

the problem. after effects ships with hundreds of text animation presets and most people use the same four, because the only built in way to preview them is adobe bridge, a whole separate app.

what i built. a panel where every preset is a card with its own motion preview, right inside after effects. play the whole page at once, compare six side by side, apply one in a single undo, and take it back off with one button.

the fun part. it reads your preset files and never writes to them, it fits a skinny dock without scrolling, and the real panel runs live in a browser demo on the studio.tue site.

it's free, pay what you want. i also build custom panels for studios... see p. 2 for the site.