Notes from the build

The Blog

Why this site scrolljacks and still ranks, what hand-coding actually buys you, and how the whole thing was built, written by the same person who wrote the code it describes. No ghostwriters, no filler.

One author, start to finish

Read up

Diagram on a blue-to-tan gradient headed "AI can write the code. Someone still has to check it.", under a kicker reading SHOULD I BUILD MY WEBSITE WITH AI? A white panel below splits into two columns. A red one headed AI on its own, each line marked with a cross, lists: new code, never run anywhere else; nobody checking it against the law; each page built fresh, nothing quite matches; nobody looking after it after launch. A blue one headed AI with a developer, each line ticked, lists: every line checked before it goes live; built to accessibility and privacy rules; one plan, carried through every page; kept up to date after launch. A white strip along the bottom reads: The tool isn't the risk. Using it with no developer is.

Should I Build My Website With AI?

Not without a developer. On its own, AI is a page builder with no track record. What a developer actually adds that AI doesn't, how to tell a website was made by AI, and the quiet failures you can check for on your own site without touching any code.

Read more — Should I Build My Website With AI?
Diagram on a blue-to-tan gradient headed "Yours to keep. Theirs to protect.", under a kicker reading DO I OWN MY WEBSITE? and the line "Owning your website means knowing which keys are yours." A white panel below splits into two columns. A green one headed In your name lists domain, words and photos, Google Business Profile, Search Console, Analytics and email. A blue one headed With your builder lists the server, shared with every site they host, and the site's top admin account. A white strip along the bottom reads: Check it in fifteen minutes. See whose name is on your domain and your Google accounts.

Do I Actually Own My Website?

Mostly, and you can check in fifteen minutes. What should be in your name (your domain, your content, your Google accounts and your email), what your builder should keep (the server and the top admin account) and why that protects you, and what to ask for if something is in the wrong name.

Read more — Do I Actually Own My Website?
Diagram on a blue-to-tan gradient headed "The bug was old. The speed is new.", under a kicker reading PHP2SHELL, EXPLAINED and the line "A decade-old flaw in PHP, found with AI, attacked within minutes." A white panel below holds a four-step timeline: August, two teams find it, both using AI; Oct 17, first attack, four days early; Oct 21, PHP ships emergency patches; 45 min, tens of thousands of attempts. The second and fourth steps are marked in red. A white strip along the bottom reads: Fewer moving parts behind your site means fewer doors to try.

The Bug Was Old, the Speed Is New: The Recent PHP Vulnerabilities and the Part AI Played

PHP2Shell is two critical flaws in PHP itself, patched October 21, 2026, that let an attacker run code on almost any PHP site without logging in. The code was over a decade old; AI helped researchers find it this summer, and attacks followed within minutes of disclosure. What happened, the part AI played, how the landscape is changing, and what to check on your own site.

Read more — The Bug Was Old, the Speed Is New: The Recent PHP Vulnerabilities and the Part AI Played
Diagram on a blue-to-tan gradient headed "The fix is the map.", under a kicker reading ZERO-DAY VS N-DAY and the line "How a security flaw goes from a private report to an internet-wide attack." A white panel holds a five-step timeline: Found, a researcher spots the flaw; Reported, fixed in secret, for weeks; Released, the fix shows what broke; Hours, sweeps hit every server; Months, unpatched sites still hit. The first two steps are marked in blue and the last three in red. Beneath them a band is split into a blue section reading ZERO-DAY: NO FIX YET and a red section reading N-DAY: FIXED, NOT INSTALLED. A white strip along the bottom reads: The part you control: how long your site stays unpatched.

Zero-Day vs N-Day: How Hackers Use a Flaw After It’s Fixed

A zero-day is a flaw attacked before any fix exists; an n-day is attacked after the fix is out, against sites that have not installed it, and n-days are what happen to ordinary websites. How a vulnerability goes from discovery to attack, why a published fix shows attackers where to look, how AI is shrinking the gap, and how to protect your site.

Read more — Zero-Day vs N-Day: How Hackers Use a Flaw After It’s Fixed
Diagram on a blue-to-tan gradient headed "Free to start. Yours to keep?", under a kicker reading ARE FREE WEBSITES REALLY FREE? and the line "The monthly fee is not the question. What you leave with is." A white panel below holds two side-by-side cards. The left card, edged in green and titled Financed, reads "Domain in your name. Cancel, and you leave with your site." and is marked Fair deal. The right card, edged in red and titled Rented, reads "Domain in their name. Cancel, and your address stays with them." and is marked Fix it first. A white strip along the bottom reads: Check it in five minutes. Look up your domain's registrar, then try to log in there yourself.

Are “Free” Websites Really Free?

No. A "free" website is paid for either way: a free builder plan with ads, a borrowed address and upgrade pressure, or a "free website" from a design company with monthly fees that often outrun a custom build. What you leave with when you stop paying, whose name is on your domain, and six questions to ask before you sign.

Read more — Are “Free” Websites Really Free?
Diagram on a blue-to-tan gradient headed "Keep five things. Perfect them.", under a kicker reading SHOULD MY WEBSITE BE MINIMALIST? and the line "Minimal suits a business whose work is its own best argument." A white panel below holds two side-by-side cards. The left card, edged in green and titled Your work is the pitch, reads "One idea per screen, the work first, one clear ask." and is marked Go minimal. The right card, edged in red and titled Abundance is the pitch, reads "Hundreds of products, a wall of proof, six services." and is marked Stay organized. A white strip along the bottom reads: Minimal is not empty. The care moves into the few things you kept.

Should My Website Be Minimalist?

Only if your brand speaks with quiet confidence. Minimalism is a design choice with a voice, and what it says is that your work speaks for itself. Why it took over (clients like it, it is in fashion, and decades of data after the loud early web), the benefits almost nobody picks it for, and three checks to run on your own site.

Read more — Should My Website Be Minimalist?
Diagram on a blue-to-tan gradient headed "No floor. A low ceiling.", under a kicker reading SHOULD I MOVE OFF SQUARESPACE? and the line "Most Squarespace sites should stay. The ones that move are the ones being judged by their website." A white panel below is topped by a dashed red line labelled The template, with three stacked bands beneath it. The top band, edged in red and labelled Your work is the pitch, reads "It looks chosen, not made. The sameness comes with the template." and is marked Move. The middle band, edged in amber and labelled Year one, reads "A booking widget, a sign-up, a pasted-in plugin. Each one matches a little less." and is marked Look closer. The bottom band, edged in green and labelled Day one, reads "A simple site you edit yourself. It all matches, and it keeps itself updated." and is marked Stay. A white strip along the bottom reads: You own your domain and your words. The design was always theirs, so a move always redoes it.

Should I Move Off Squarespace?

Sometimes, and less often than the people quoting you a rebuild suggest. Squarespace has no floor: for a simple site its owner edits, it is the right tool, and it keeps itself updated. It has a ceiling, and for a business whose work is the pitch, the template is that ceiling. What you can and cannot take with you when you leave, and four checks that tell you where you stand.

Read more — Should I Move Off Squarespace?
Diagram on a blue-to-tan gradient headed "It fits a range.", under a kicker reading SHOULD I MOVE OFF WORDPRESS? and the line "Frequently yes, frequently no. Anybody answering this confidently is selling you the migration." A white panel below holds three stacked bands. The first, edged in red and labelled Below the floor, reads "Your site is simple. You are paying for a machine you never switch on" and is marked Move. The second band is the tallest of the three, edged in green and labelled Inside the range, reading "It works, and it can carry far more than people think. Everything now depends on who builds it" and marked Stay. The third, edged in red and labelled Past the ceiling, reads "The plugins do not do what you need. Compromise the plan, or commission the build" and is marked Decide. A white strip along the bottom reads: It will never be as fast or as lean as hand-coded. That gap only decides anything at the edges.

Should I Move Off WordPress?

Frequently yes, frequently no, and anybody answering it confidently is selling you the migration. WordPress fits a range: below it you pay for a machine you never switch on, past it the plugins do not do what you need, and in between the platform was never the problem.

Read more — Should I Move Off WordPress?
Diagram on a blue-to-tan gradient headed "Eight lines, and no JavaScript.", under a kicker reading SCROLL-DRIVEN CSS ANIMATIONS and the line "The scroll position is the timeline. The card fades up as it arrives, and it runs backwards if the visitor scrolls back." Two white panels sit below. The left one, labelled THE WHOLE THING, holds a code snippet: a rule for .reveal setting animation to rise linear both, animation-timeline to view(), and animation-range to entry 10% entry 90%, followed by a keyframes block named rise running from opacity 0 and translate 0 2rem to opacity 1 and translate 0 0. The right one, labelled WHAT THAT LOOKS LIKE, holds three small screen diagrams captioned arriving, halfway and settled: a blue block labelled CARD sits almost transparent at the bottom edge of the screen, then higher and half visible, then fully opaque in the middle. A white strip along the bottom is labelled THE TWO NEW LINES and reads: animation-timeline swaps the clock for a scroll position. animation-range picks which slice of it the keyframes are spent over.

How to Make Scroll-Driven CSS Animations

Two declarations and no JavaScript. Start with a card that fades in as it arrives, add an exit, then take it up to the whole document: both timeline types, every range, drawn measurements, and the trap that ships an invisible page.

Read more — How to Make Scroll-Driven CSS Animations
Diagram on a blue-to-tan gradient headed "An answer engine reads what your server sent.", under a kicker reading "Getting into AI answers" and the line "Not what the page becomes once JavaScript has finished. View the page source, not the Inspect panel, and search it for a sentence you can see on screen." Two white cards sit below. The left one, marked with a red cross and headed ASSEMBLED IN THE BROWSER, What the machine receives, holds a code snippet: a title element reading Home, an empty div with the id root, script tags for app.bundle.js and vendor.chunk.js, a noscript line reading Enable JavaScript, and two greyed-out comments reading "every word is injected later" and "0 sentences in the response". It is footed in red with "Nothing here can be quoted, because nothing here is text." The right one, ticked in green and headed SENT AS TEXT, What this page ships, holds the same page as plain markup: an h1 reading "How do I get my website into AI answers?", an h2 reading "What an answer engine reads", and a paragraph reading "Something requests your URL and gets back a document. What is in it can be quoted. What is not in it cannot." It is footed in green with "A complete answer, in one place, in the response." A white strip along the bottom is labelled THE RULE and reads: Every answer on your site should survive being cut out and pasted somewhere else on its own.

How Do I Get My Website Into AI Answers?

Not with an llms.txt file, and I ship one. What an answer engine reads is the HTML your server hands over before a single line of your JavaScript runs, so the job is being the clearest source of a specific answer, in text, on a real URL.

Read more — How Do I Get My Website Into AI Answers?
Diagram on a blue-to-tan gradient headed "Most of the weight was never chosen.", under a kicker reading "Making a website faster" and the line "Nothing you add is heavy on its own. Nothing ever leaves." Two white cards sit below. The left one, marked with a red cross and headed WHAT ACCUMULATES, lists font services on the critical path, a chat widget nobody opens, tracking tags from finished campaigns, full-size images scaled down in CSS, and a library loaded for one animation, footed by the note "Each one was reasonable. None of them ever left." The right one, ticked in green and headed WHAT THIS PAGE SHIPS, lists 0 requests to other domains, fonts self-hosted and subset at 24 KB plus 18 KB, 33 KB of CSS and 18 KB of JavaScript, images sized and lazy-loaded below the fold, and no framework, no jQuery, no icon font, footed by the note "Nothing loads that is not doing a job." A white strip along the bottom reads: PageSpeed Insights, lab test, August 2026, Performance 100 (mobile 97-100), Accessibility 100, Best Practices 100, SEO 100.

How Do I Make My Website Faster?

Most websites are not slow because of one big mistake. They are slow because nobody ever said no. The plain version first, then how far this site takes it: self-hosted subset fonts, no libraries at all, and nothing fetched from anybody else.

Read more — How Do I Make My Website Faster?
Diagram on a blue-to-tan gradient headed "Does it carry the brand, or just the developer?", over a kicker reading "Scrolljacking, the only question that matters" and the line "The technique is identical either way. The audience is not." Two bordered columns sit below. The left one, ticked and headed USUALLY EARNS IT, lists luxury brands, architecture and design, technology and SaaS, and experiences and venues, under a WHY note reading "The visitor arrives already convinced. The feeling is the product." The right one, crossed and headed ALMOST NEVER DOES, lists libraries, banks and archives, under a WHY note reading "The visitor came for information. Every held screen is a toll." A footer line reads: not an industry list, a conscious call on every single project.

Is Scrolljacking Bad for User Experience?

Yes, mostly, and I am not going to pretend otherwise. Scrolljacking is a brand decision rather than a technical one, and even inside the industries it suits it has to be judged brand by brand and audience by audience, one project at a time.

Read more — Is Scrolljacking Bad for User Experience?
Diagram on a blue-to-tan gradient headed "Pinning a section is two boxes, not one". On the left a tall dashed box labelled THE TRACK, dot vh_3, is divided into three segments each marked 100svh, footed "height: 300svh, empty". An arrow between the columns reads "scrolls up". On the right, a browser window labelled "what the visitor sees, 100svh" holds a panel marked "Held in place", THE STAGE, dot pin, listing position: sticky, top: 0, height: 100svh. Footer: 300svh of track buys 200svh of pinned animation, no JavaScript, no scroll listener.

How to Pin a Section and Animate It on Scroll

The useful kind of scrolljacking, built from scratch: the two boxes that do the pinning, how to read and edit the vh timeline your keyframes are scrubbing, and the four shared classes that stop you writing it all again next section.

Read more — How to Pin a Section and Animate It on Scroll
Illustration on a blue-to-tan gradient: two white cards. "The Navigation" shows a dark menu bar with a green focus ring around the Work link, noted "Tab — focus you can see" and "aria-expanded — state you can hear". "The Images" shows HTML for two images with their alt attributes filled in, noted "describes what it conveys" and "names where it goes". Caption: Two things. Ten minutes. No budget.

Website Accessibility Basics: The Nav and Your Images

The two things I find broken first on almost every site: a navigation you cannot use without a mouse, and images with the wrong alt text. The developer’s starting point, with the WCAG level each failure sits at.

Read more — Website Accessibility Basics: The Nav and Your Images
Illustration on a blue-to-tan gradient: five white cards fanned like a deck of slides, labeled with this site's real page URLs (home, /web-development/, /portfolio/, /blog/, /contact/), with a downward arrow beside them, captioned "Five real pages. One continuous scroll."

Building a Scroll-Driven Website: A Case Study

The whole story in order: a WordPress site I was done with, a CodePen animation worth keeping, and the chain of real pages it became: the architecture, the rules, what broke, and what shipped.

Read more — Building a Scroll-Driven Website: A Case Study
Illustration of a search results page on a blue-to-tan gradient: a white search bar reading "scroll-driven website design" above three white result cards for thebetterwebsite.com's home, web development, and portfolio pages, each marked with a green "Indexed" badge, captioned "One experience. Real pages. All indexed."

Does Scrolljacking Hurt SEO?

One URL, invisible content, heavy scripts: the classic scrolljacked site earns its bad rankings. But Google has no scrolljacking penalty. What actually hurts, and the architecture that fixes it.

Read more — Does Scrolljacking Hurt SEO?
Illustration of two white browser windows on a blue-to-tan gradient, one showing thebetterwebsite.com/web-development/ and one showing thebetterwebsite.com/portfolio/, with white motion streaks and an arrow between them, captioned "Two real pages. One seamless move. — the View Transitions API"

The View Transitions API in Practice

For a decade, seamless page changes meant an SPA framework. Now the browser animates between real pages on its own: what the View Transitions API is for, and what shipping it taught me.

Read more — The View Transitions API in Practice
Illustration of an accessibility settings panel on a blue-to-tan gradient: a "Reduce motion" toggle switched on, above a line reading "Scrolljacking heard you — this site becomes a normal, scrolling page"

Is Scrolljacking Bad for Accessibility?

No, the technique is not the problem: four specific build decisions are, and every one is optional. The keyboard, reduced motion, focus order and the back button, what the ADA yardstick actually asks of each, and the four answers that fix them.

Read more — Is Scrolljacking Bad for Accessibility?
Screenshot of the circle-graphic Q&A widget on this hand-coded, scroll-driven homepage: a large blue-to-tan gradient circle with eight numbered question prompts radiating from a center reading "I'm Rebuilding!"

What Is Scrolljacking?

It earned a genuinely bad reputation: broken back buttons, locked-out keyboard users, motion nobody asked for. What it actually is, why it went wrong, and why the View Transitions API is bringing it back.

Read more — What Is Scrolljacking?
The same vintage wind-up toy robot from 2024: still here, still not taking my job

The AI Revolution, Revisited

Two years ago I asked whether AI would take my job. It didn’t. It made me a powerhouse. On AI-built websites, the “Elementor” symptom, and using the tool right.

Read more — The AI Revolution, Revisited
Vintage wind-up toy robot, a playful stand-in for artificial intelligence

AI. Am I Worried?

While AI has been a thing for many years, it’s only recently began to impact my life. Now, website page builders can generate content for you. Photo editors can change an entire photo based on what you type into an input field.

Read more — AI. Am I Worried?
Person using a white cane while walking along a city sidewalk

Why Website Accessibility Matters

The people who can’t use your site don’t email you about it. They leave. What accessibility actually covers, what ADA compliance asks for, and the two offenders anyone can check.

Read more — Why Website Accessibility Matters

End of the shelf

Meet
the studio.

About the studio

One person writes these posts and the same person writes the code they are about: that is the whole studio. If a search result dropped you here, the short version is on the method page, the proof is in the work, and the rest of me is over here. The FAQ covers what I get asked most and home is the full tour. Rather ask me directly? Do that. Or keep scrolling, you'll meet me next.

The Better Website

The Better Website is a one-person web design studio in Raleigh, NC, serving the Triangle and clients nationwide. Every site is hand-coded: plain HTML, CSS and JavaScript by default, or a custom WordPress theme when that is the better fit.

© 2026 The Better Website · Privacy

Up Next About