惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园_首页
AWS News Blog
AWS News Blog
阮一峰的网络日志
阮一峰的网络日志
Vercel News
Vercel News
C
Cybersecurity and Infrastructure Security Agency CISA
P
Proofpoint News Feed
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
T
Tailwind CSS Blog
PCI Perspectives
PCI Perspectives
Application and Cybersecurity Blog
Application and Cybersecurity Blog
博客园 - 叶小钗
IT之家
IT之家
V2EX - 技术
V2EX - 技术
Cloudbric
Cloudbric
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
宝玉的分享
宝玉的分享
Know Your Adversary
Know Your Adversary
爱范儿
爱范儿
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
S
Schneier on Security
博客园 - 【当耐特】
G
Google Developers Blog
S
Security @ Cisco Blogs
N
Netflix TechBlog - Medium
T
Tenable Blog
C
Check Point Blog
The Cloudflare Blog
J
Java Code Geeks
The Register - Security
The Register - Security
Google Online Security Blog
Google Online Security Blog
Security Latest
Security Latest
T
Tor Project blog
T
The Blog of Author Tim Ferriss
S
Security Affairs
S
Securelist
P
Privacy & Cybersecurity Law Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
P
Privacy International News Feed
博客园 - 三生石上(FineUI控件)
D
DataBreaches.Net
N
News and Events Feed by Topic
Hacker News - Newest:
Hacker News - Newest: "LLM"
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
A
About on SuperTechFans
G
GRAHAM CLULEY
Jina AI
Jina AI
Spread Privacy
Spread Privacy

CodePen

433: CodePen 2.0 is Backward Compatible with Any Classic Pen or Project 432: Trends of 2026 (So Far) 431: Versions are Deeply Integrated into CodePen Chris’ Corner: Layers of Layers 430: The Wild World of Keyboard Shortcuts in Web Apps Chris’ Corner: Makin’ Stuff 429: Why CodePen Rebuilt Its Realtime Service Chris’ Corner: The Edge, Man 428: Improving The Entire Billing System (is Very Worth It) Chris’ Corner: Design Chris’ Corner: A11Y 427: Next.js and The Journey of SSR 426: Browserslist in CodePen 2.0 Chris’ Corner: Finding Type Chris’ Corner: View Transitions 425: Help Your Users Help You with Debug Logs Chris’ Corner: Check It B4 U Wreck It Chris’ Corner: Import Maps 424: File List Optimization 423: 2.0 Templates Chris’ Corner: URLs 422: Supporting Packages Chris’ Corner: Share What You Do 421: View Control of the 2.0 Editor Chris’ Corner: Design Chris’ Corner: Even Grids Chris’ Corner: Processing 420: What are Blocks? Chris’ Corner: Anchors 419: Why 2.0? Chris’ Corner: Cool Things Chris’ Corner: SVG Tools 418: CodeMirror 6 Chris’ Corner: All Together Now Chris’ Corner: Light & Boxes Chris’ Corner: Lovingly Esoteric CSS Chris’ Corner: Type Chris’ Corner: Two Liners Chris’ Corner: Type Chris’ Corner: Freshly-Fallen CSS Chris’ Corner: Cloud Four Chris’ Corner: HTML Chris’ Corner: Web Components Chris’ Corner: Kagi Blog Typography 417: Iframe Allow Attribute Saga Chris’ Corner: Cursors Chris’ Corner: Browser Feature Testing 416: Upgrading Next.js & React Chris’ Corner: AI Browsers 415: Babel Choices 414: Apollo (and the Almighty Cache) Google Chrome & Iframe `allow` Permissions Problems Chris’ Corner: Stage 2 413: Still indie after all these years Chris’ Corner: Design (and you’re going to like it) 412: 2.0 Embedded Pens Chris’ Corner: Discontent 411: The Power of Tree-Sitter Chris’ Corner: Word Search 410: Trying to help humans in an industry that is becoming increasingly non-human Chris’ Corner: Little Bits of CSS 409: Our Own Script Injection Chris’ Corner: Terminological Fading 408: Proxied Third-Party JavaScript Chris’ Corner: Simple, Accessible Multi-Select UI 407: Our Own CDN Chris’ Corner: Clever Clever 406: Hot Trends of 2025 Chris’ Corner: Pretty Palettes 405: Elasticsearch → Postgres Search Chris’ Corner: Faces Chris’ Corner: Browser Wars Micro Edition 404: Preventing Infinite Loops from Crashing the Browser Chris’ Corner: Scroll-Driven Excitement 403: Privacy & Permissions Chris’ Corner: AI for me, AI for thee 402: Bookmarks Chris’ Corner: We Can Have Nice Things 401: Outgoing Email Chris’ Corner: Tokens Chris’ Corner: Modern CSS Features Coming Together Chris’ Corner: Liquid Ass Chris Corner: For The Sake of It Chris’ Corner: Type Stuff! Chris’ Corner: Doing a Good Job Chris’ Corner: Design Do’s and Don’ts Chris’ Corner: CSS Deep Cuts Chris’ Corner: GSAP, more like FREESap Chris’ Corner: Reacting Chris’ Corner: Rounded Triangle Boxes and Our Shapely Future Chris’ Corner: Fairly Fresh CSS Chris’ Corner: 10 HTML Hits Chris’ Corner: CSS Powered Componentry Chris’ Corner: The New Web Safe Chris’ Corner: PerformanCSS Chris’ Corner: Color Accessibility Chris’ Corner: onChange Chris’ Corner: Accessible Takes Chris’ Corner: Creative Coding
Chris’ Corner: ZIP first?
Chris Coyier · 2026-04-28 · via CodePen

I love ideas that feel clearly better than what was before. I used to feel that way about curved shower curtain bars. Like, instead of the shower curtain being perfectly straight against the edge of the shower, it curves outward. No harm in functionality, but it gives more space inside the shower. It’s just better. There are more factors, though, sadly. Surely they are harder to manufacture, package, and ship, and thus more expensive. Maybe you need longer shower curtains, too? Maybe there isn’t always space for it in smaller bathrooms? I still generally prefer it when possible. It’s an optional improvement.

Here’s another thing like that: Put the ZIP code first.

The big idea is that we should ask for the ZIP code in an address first, not last. Here’s what address forms often look like:

ZIP code is 2nd to last there. Notably, before the City. But if we asked for the ZIP code first, the city would just be implied, saving time filling out the form. Time saved during e-commerce checkouts is a proven way to improve conversion rates.

As that microsite says:

From those 5 characters you can determine the city, the state, and the country. That’s 3 fields. Autofilled. From one input.

That’s just better, right?

Seems better to me, but I bet there are more factors. For one, it’s different, and different might feel weird to users and throw them off, maybe not saving time at all. People have addresses in their head in a certain way/order, and matching that might have its own benefit.

For another, this requires extra code to work. You need some kind of reliable and updated ZIP code matching software. Extra notably, the demo on that page doesn’t even work. I get a 404 for the API they are using:

Also, and this I know is true, but I am ignorant about the details: ZIP codes are weird. They have different formats and aren’t necessarily globally unique. So asking for the country first is actually probably best, even if that’s one of the most painful parts of address forms.

Still, maybe it’s an improvement! Maybe try it!

Ya know that screenshot from above? That’s actually from Stripe Elements, which is super incentivized to make payment forms that convert well. This is what they actually do by default (in their own demo):

Me, I’d think that Address field would be full of magic. You could drop in the ZIP code and it would prefill stuff. Or you could single-line type your entire address and it would just know what you mean and deal with it. But no, actually, that’s just what it wants for your street address line, and if you fill it out and press Enter or Tab, it expands to show you all the fields it actually needs. Weird.

The more magic at helping me fill out forms, the better really. Make them accessible. Use all the fancy attributes to make them more understandable for tools and improve UX. Do fancy backend processing. Use the geolocation API. Whatever. Nobody loves filling out forms, they love what the form helps them do.