Versioned custom code for Webflow: GitHub, jsDelivr and SRI

How to add structured data to Webflow CMS pages (no plugin)

Paste a JSON-LD `<script>` block into the CMS template's Page settings › Custom code › Before `</head>`, and insert the item's fields with + Add field wherever a value belongs. Every item then ships its own structured data, built from the same fields as the page. Keep straight double quotes (`"`) out of those fields, because one of them breaks the whole block.

BN-01

Search + AI answers

Webflow CMS

Knowledge System

Your Webflow project pages might be invisible to Google. Check your links.

If JavaScript adds your cards' links, the HTML Google downloads may not link to your project pages at all. View the page source (not the inspector) and search for `/work/` or your collection's path. If nothing comes up, set each card's link to Current [Collection] page in the Designer so the link exists before any script runs.

BN-02

Crawlable links

Webflow CMS

Custom code

Smooth scroll without the stutter: Lenis + GSAP in Webflow

Most Lenis + GSAP stutter in Webflow comes from three things: two animation clocks running at once, Lenis's stylesheet missing, and canvas animations that never pause. Drive Lenis from `gsap.ticker`, add Lenis's CSS, and stop anything that isn't on screen.

BN-03

Motion + scroll

Mobile performance

Custom code

Interactive 3D in Webflow that doesn't wreck your mobile score

Heavy 3D doesn't have to mean a slow page. Load the scene only when it's about to be seen, pause it whenever it's off screen, render at a lower pixel ratio on touch devices, and give reduced-motion visitors a still image. The first screen stays fast because the 3D isn't on the critical path at all.

BN-04

Interactive 3D

Mobile performance

Custom code

Tap is not hover: the touch bug hiding in interactive Webflow builds

On a touchscreen, a single tap fires `pointerenter`, `pointerleave` and then `click`, one after another. If hover code opens something on enter and closes it on leave, it closes it again before your click handler runs. Ignore touch in the hover handlers (`if (e.pointerType === 'touch') return;`) and let taps use `click` alone.

BN-05

Tap vs hover

Micro-interaction

Mobile performance

Versioned custom code for Webflow: GitHub, jsDelivr and SRI

Write your custom code in a GitHub repo, tag every release (`v1.4.0`), and load it in Webflow from jsDelivr pinned to that tag with an `integrity` hash. Every deploy is a new URL, so there's no cache to fight, a bad release rolls back by changing one version number, and the browser refuses a file that doesn't match its hash.

BN-06

Versioned deploys

Custom code

Handoff

Reduced motion without losing the magic

When a visitor's device asks for reduced motion, keep everything the motion was saying and drop only the movement. Check `prefers-reduced-motion` in every animation, replace big moves with a fade or a still end state, and design the still version on purpose rather than just switching things off.

BN-07

Reduced motion

Motion + scroll

Micro-interaction

Why before how: what a philosophy degree taught me about building websites

The most useful thing philosophy taught me isn't any single idea. It's the habit of asking what something is for before deciding how to build it. In web projects, that one question saves more time than any tool: it turns "we need a new website" into a clear goal, a shorter sitemap and a design that has a reason for every section.

WB-01

Philosophy at work

Asking better questions

Discovery

One hour there, seven years here: Interstellar and why waiting feels longer than it is

In Interstellar, an hour on Miller's planet costs seven years back home, because a huge mass nearby really does slow time down relative to a distant observer. On the web, time bends in a different way: a wait with nothing to look at feels longer than the same wait with visible progress. You can't change physics, but you can change how a wait is experienced, by showing something useful immediately and making progress visible.

WB-02

Science of time

Perceived speed

Motion + scroll

The camel, the lion and the child: Nietzsche on scope creep

In Thus Spoke Zarathustra, Nietzsche describes the spirit changing three times: into a camel that carries every burden, a lion that says "no" to the rules it was handed, and a child that creates something new. A good project goes through the same three stages. First you take everything in, then you refuse what doesn't serve the goal, and only then do you build. Skip the lion and you get scope creep.

WB-03

Philosophy at work

Scope creep

Saying no

Plato's cave: what a crawler sees is not what your visitors see

In Plato's cave, prisoners mistake shadows on a wall for the real world. A crawler reading your site is in a similar spot: it often sees only the raw HTML the server sends, not the page your visitors get after scripts run. If your links, titles or content only appear after JavaScript, some machines are reading the shadow. The fix is to put the real thing in the HTML itself.

WB-04

Philosophy at work

Crawlable links

Search + AI answers

The Ship of Theseus: when does a redesign stop being the same brand?

The ancient puzzle of the Ship of Theseus asks whether a ship is still the same ship once every plank has been replaced. Brands live that puzzle every time they refresh. My answer, from designing this site's own identity: a brand stays itself as long as a few deliberate things stay fixed (its proportions, its core colors, its rules about how pieces fit). Everything else can be replaced, plank by plank, without anyone feeling a stranger has moved in.

WB-05

Philosophy at work

Brand identity

Design systems

Amor fati: Nietzsche and learning to love Webflow's limits

Nietzsche called it amor fati, "love of fate": wanting nothing to be different, and not merely putting up with what is necessary but loving it. Every platform has necessities you can't argue with. On this site, Webflow's hard limits (a 60-field cap, nested lists that stop at five items, components that can't hold CMS lists) each forced a structure that turned out cleaner than what I'd planned. The limits weren't in the way of the design. They were part of it.

WB-06

Philosophy at work

Webflow CMS

Knowledge System

Descartes' method of doubt: publish, then check

Descartes built his philosophy on one rule: accept nothing as true unless you've seen for yourself that it is. On a website, that means a change isn't done when a tool says "saved" or "published". It's done when you've checked the live page and found it there. Descartes' four rules of method (verify, divide, order, enumerate) turn out to be a very good checklist for shipping a site.

WB-07

Philosophy at work

Asking better questions

Crawlable links

Descartes' coordinates and a star chart of ideas

Descartes' great mathematical idea was to give every point a pair of numbers, an x and a y, so that shapes could be described with algebra and equations could be drawn as shapes. The star chart on the Topics page does something similar with ideas: each topic in this site's vocabulary gets a position, a size and lines to its neighbors, so you can see how the ideas connect instead of reading a list. A map makes relationships visible that a list hides.

WB-08

Philosophy at work

Knowledge System

Micro-interaction

Less is a bore: when websites got boring, and why I built this one loud

Websites got boring around 2010 to 2013, and not because designers lost their nerve. Phones arrived, Flash died, responsive layouts and frameworks made the web usable everywhere, and flat design became the safe default. Those were good fixes for real problems. But the problems got solved, the tools got powerful, and the habit of playing it safe stayed. I built this site maximalist on purpose: planets, a starfield, warp transitions, a black hole in the footer. What keeps it from being a mess isn't restraint in what it does. It's discipline in how.

WB-09

Philosophy at work

Motion + scroll

Design systems

Mercury, Gemini, Apollo: how to start a big, slightly crazy website

Don't start a big idea by building all of it. Start by finding the one part most likely to fail, and fly that first, small and cheap. NASA didn't go to the Moon in one mission. It went through Mercury, Gemini and a string of Apollo test flights, each one proving a single scary thing. A huge website, app or redesign works the same way: keep the ambition whole, make the first step tiny, and let every step answer one question.

WB-10

Discovery

Prototyping

Scope creep

Why designers are the hardest audience for a loud website

Designers are usually the first to call a maximalist site "too much," and it isn't because they're wrong about design. Taste is trained, and a whole generation of it was trained on the same clean, minimal SaaS pages. Anything outside that pattern reads as a mistake before it reads as a choice. That reaction is worth listening to, but it's not the same as a client's reaction, and it's not always about the site. The trick is telling a flinch apart from a flaw.

WB-11

Philosophy at work

Asking better questions

Brand identity

The Alchemist and the treasure under the sycamore: why I stopped chasing design trends

In Paulo Coelho's The Alchemist, a shepherd crosses a desert to find a treasure at the pyramids, only to learn it was buried under the tree where he used to sleep. My design career went the same way. I spent years keeping up with whatever the industry was excited about, always in its most minimal form, and the work was good, but it felt a little hollow. Building this site sent me home, back to what I loved making before anyone paid me to make anything. The trip wasn't wasted, though. You don't get to dig until you've made it.

WB-12

Philosophy at work

Brand identity

Asking better questions

STAY: Interstellar, love and designing a message for someone you'll never meet

Near the end of Interstellar, Cooper is stuck in a tesseract behind his daughter's bookshelf. He can't talk to Murph. All he can do is push on small things across time: a few books, then the second hand of the watch he gave her. It works because she knows that watch, and she knows him. A website is the same kind of message. You send it forward to people you'll never meet, and it only lands if it speaks a language they already know and was made with real care for a real person.

WB-13

Philosophy at work

Handoff

Science of time

The first easter egg: Warren Robinett's secret room and why hidden things make people love a site

The first famous video game easter egg exists because a designer wasn't allowed to sign his work. In the late 1970s, Atari didn't credit its game designers, so Warren Robinett hid his name in a secret room in Adventure. When players found it, Atari decided to leave it in, and the name "easter egg" stuck. Hidden things still work for the same reason: they reward people who look closer, and they prove a real person made the thing. This site has 19 of them.

WB-14

Micro-interaction

Brand identity

Philosophy at work

How I hid a boss fight in a website (Webflow, GSAP and a little Web Audio)

The boss fight on my About page is one script. It builds a full-screen dialog, draws pixel sprites from text as SVG, runs a small real-time game on GSAP's ticker over a canvas starfield, and synthesizes its own soundtrack with Web Audio. Webflow only holds the card that opens it. The parts that took the most care weren't the game. They were the exits: Skip, Esc, retry, sound off by default, and a still version for anyone with motion turned off.

BN-08

Custom code

Motion + scroll

Reduced motion

Scope creep

AI is a brush, not a hand: using AI as a creative tool (and why taste still decides)

AI won't make the thing for you. It will help you see the thing faster than any tool before it, and sometimes it will put things within reach that used to need a team, a budget or a decade you didn't have. But someone still has to know what's worth making, what's wrong with the third version and when to stop. That's taste, and it's still the most important tool in the room. A creative who learns to use AI well will usually outrun a creative who refuses it. AI with no creative behind it just makes more of what already exists.

WB-15

Philosophy at work

Brand identity

Design systems

Follow the white rabbit: curiosity as a design material

Nobody follows a button because it's interesting. People follow things they don't understand yet. Alice chased a rabbit because it had a pocket watch, and rabbits don't have pocket watches. Neo followed one because a message on his screen told him to, and he had no idea why. Aristotle said that wondering about something is where all thinking starts. On a website, that means one strange, unexplained detail can pull a visitor further than any "Learn more." But curiosity is a loan. If you open a question, you have to pay it back.

WB-16

Micro-interaction

Philosophy at work

Brand identity

Red pill, blue pill: every interface is a choice you design

Every screen with two buttons on it is a choice someone designed, and the design always leans one way or the other. Sartre said we're "condemned to be free": we can't get out of choosing, and even refusing to choose is a choice. Websites can't get out of it either. You decide which option is bigger, which one is already ticked, which one is worded to make you feel bad. Morpheus is a surprisingly good model here. He tells Neo exactly what each pill does, holds them out evenly, and lets him pick. That's what an honest interface looks like.

WB-17

Philosophy at work

Micro-interaction

Reduced motion

The desert of the real: Baudrillard, The Matrix and websites that copy copies

The philosopher Jean Baudrillard argued that we've slowly swapped the real world for copies of it, until the copies stopped pointing at anything real at all. He called them simulacra. The Matrix put his book on screen in the first ten minutes. A lot of websites live in that stage now: a site copies a template, which copied a popular design, which copied a trend, and nobody remembers what the original was for. The fix isn't a cooler template. It's building from the one thing nobody else can copy: what's actually true about you.

WB-18

Philosophy at work

Brand identity

Design systems

Bart sold his soul for five dollars: what The Simpsons taught me about building websites

In "Bart Sells His Soul," Bart signs his soul over to Milhouse for five dollars, and nothing dramatic happens. Small things just stop working. Automatic doors don't open for him. His breath doesn't fog the glass. He can't laugh at cartoons. Websites can lose their soul the same way: they still load, the buttons still work, and something small is quietly missing in every corner. That episode, plus a few Treehouse of Horror stories, taught me more about building things than I expected a cartoon to.

WB-19

Philosophy at work

Brand identity

Versioned deploys

Interactive 3D

How I cut my layout shift from 0.40 to 0.001 in Webflow

Layout shift is the page jumping under you while it loads. Google measures it as CLS (Cumulative Layout Shift), and under 0.1 counts as good. My Observatory page scored 0.40 on phones. The fix wasn't one big trick. It was four small causes, each with its own fix: reserve space for anything a script fills in, give your web fonts a fallback with the same shape, start split headings in their final layout, and let the CMS leave out empty sections before the page is sent instead of hiding them afterward.

BN-09

Mobile performance

Perceived speed

Custom code

Webflow CMS

Ten thousand hours, give or take: Outliers and what practice looks like when nobody's teaching you

The "10,000-hour rule" from Malcolm Gladwell's Outliers says it takes about ten thousand hours of practice to master something. The researcher whose study it came from, Anders Ericsson, spent years correcting it: ten thousand was an average, not a finish line, and the hours only count if they're the right kind. He called that kind deliberate practice: working just past what you can already do, with fast feedback, on purpose. For a self-taught designer there's no teacher to build that for you. You have to build it yourself, out of real projects, honest feedback and the habit of checking your own work.

WB-20

Philosophy at work

Asking better questions

Brand identity

1984 on the web: Newspeak, the memory hole and the interface that lies politely

1984 is a novel about a government that controls people by controlling language and memory. Its tools have small, everyday cousins on the web: button labels that hide what they do ("Pause" when you wanted "Cancel"), terms and prices that change without a trace, and announcements that call a cut an improvement. Orwell's answer, in an essay he wrote a few years before the novel, was plain language: say the thing, in the shortest honest words. It's still the best defense an interface has.

WB-21

Philosophy at work

Micro-interaction

Search + AI answers

Thirty seconds of fun: what Halo taught me about the smallest loop on a website

Halo's designers talked about the game as "thirty seconds of fun" repeated over and over: see enemies, pick an approach, fight, recover, go again. If those thirty seconds felt great, the rest of the game could be the same loop in new places. Websites have loops too, just smaller: hover, click, drag, release, scroll. The lesson is to find the one small interaction people will repeat on your site, make it feel good every single time, and reuse it, instead of adding ten more features nobody plays with twice.

WB-22

Micro-interaction

Motion + scroll

Philosophy at work

Zombie websites and the hand of the maker: Ruskin, Gutenberg and building with AI

After World War II, the US built faster than ever, and builders copied modernism's look without the thinking behind it. What was left were buildings that worked and meant nothing: zombie buildings. AI has started a new building boom, and it can fill the web with zombie websites the same way. The way out is old. Have a point of view before you build. Write your standards down where the tools can follow them. Don't confuse done with good. And leave room for the strange, hand-made detail that shows someone cared. John Ruskin said it about Gothic cathedrals in 1853: you can see the hand of the maker in every column.

WB-23

Philosophy at work

Brand identity

Design systems

Micro-interaction

The problem with pasting code into Webflow

The setup

Why pin a tag and not `@main`

What the integrity hash buys you

Two gotchas from real deploys

The handoff payoff

Versioned custom code for Webflow: GitHub, jsDelivr and SRI

The problem with pasting code into Webflow

The setup

Why pin a tag and not @main

What the integrity hash buys you

Two gotchas from real deploys

The handoff payoff

Related reading

Why pin a tag and not `@main`