Web Weekly #175
- Published at
- Updated at
- Reading time
- 10min
Do you know what autocomplete="one-time-code" does? Or have you used the command HTML attribute already? And do you think it's OK to call CSS custom properties "CSS variables"?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Lars listens to "The Meltdown - Better Days" and says:
There's no song I've been listening to more than this one. I love the mix of nostalgia and optimistic desire for brighter days!
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.
Let's open this Web Weekly with some form tips and tricks people were talking about this week!
Tyler shared how you could build a one-time password UI. And look at this beauty!
The inputmode="numeric" enforces numbers on all the virtual keyboards, autocomplete="one-time-code" enables automatic autofill for password managers, and the input values are restricted to six numbers using the pattern attribute. Man, I love HTML!
If you wonder why the input isn't of type number, even though one-time passwords often consist of number characters, they're not really number values.
Speaking of numbers, Ollie shared how to build a step counter with attached increment/decrement buttons.
Do you see what's going on there? The buttons trigger events for the input element using command and commandfor. And these events are then caught in a single event listener on the input itself.
![const numberInputs = document.querySelectorAll('input[type="number"]'); numberInputs.forEach((input) => { input.addEventListener("command", (event) => { if (event.command === "--increment") { input.stepUp(); }}); });](https://images.ctfassets.net/f20lfrunubsq/6hdKzNdqSl3blmc4lOdXOl/1eb8a31b7a0208ccb828cc74d5b469e1/Screenshot_2025-11-17_at_14.32.04.png)
Isn't this wild? I didn't realize that the new command attributes will work like that. Now, you probably wonder if you can use these attributes already? command and commandfor work in Chromium and Firefox, and will land in Safari soon. So you might want to check them out!
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter grow. Thank you! ❤️
Get 50% OFF for 3 months on Cloudways managed hosting. Plus, 50 free website migrations & $50 credits. Build faster, scale easier, and enjoy 24/7 support. This exclusive offer is for a limited time!
A huge bag of karma points goes to Tony, Lars and Kristofer this week! Thank you for buying me a monthly coffee and covering a small fraction of sending over six thousand emails every week! ❤️
If you enjoy Web Weekly, join 29 supporters and support this indie newsletter on Patreon or GitHub Sponsors. It really makes a difference.
I probably won't buy the Doctype magazine but I love everything about it! If you miss the good old days of reading source code on paper, you'll enjoy it!
And, by the way, if you enjoy this one, you're gonna love the Internet Phone Book!
- Derek's post is not the usual Web Weekly material because it covers men, society and gambling but, oh boy, it ends with a banger quote worth sharing:
If you want two people who disagree to actually talk to each other, you build them a space to talk→ The Monks in the Casino. If you want them to hate each other, you give them a phone . - And here's another banger from Brooklyn:
You can't call it the "online world" if you never leave your feed→ How to use the internet again: a curriculum. - The older I get the more I start to question myself. Who am I and who do I want to be. I haven't done this exercise yet, but it's a great starter to figure yourself out. → 10 Values Discovery Questions
I recognize that this week's "No code" section is a bit different than usual. What do you think of it? Yay or nay? Let me know!
I've had some time on my hands this weekend and blogged some quickies:
- A Raycast confetti shell command
- How to "officially" deprecate methods with Node.js utilities
- Syntax-highlighting for JS template strings in VS Code
- Three conditional border-radius CSS snippets
I still remember how intimidated I was when I started to learn TypeScript. Saying that it was challenging would be an understatement. Who did need types anyway, right?
If you're starting out today, "Visual Types" is a fabulous tool explaining the type system and it's so much fun that I just did all the lessons myself.
Una shared that the range syntax works with style queries now which, of course, is pretty cool. I just checked the style query browser support and it turns out Chromium and modern Safari support style queries already. CSS if is still a Chromium-only thing, though.
But regardless of the browser support, can we take a moment and appreciate the beauty of this CSS snippet? 👆 CSS has come a looooong way!
If this post isn't enough fancy CSS, this guide on style queries, CSS if and container queries is also worth a read.
You probably have seen these "fancy" notifications that usually show up in the bottom area after you click a button or complete a task. They're called "toasts" — no idea why they're called like that — and GitHub's design system team now published a new rule. Don't use toasts because they're bad for UX and accessibility.
I can't say that I've ever noticed GitHub making heavy toast usage 🥪, but I feel like this page might become a reference piece for frontend developers! It includes recommendations on what to do instead, too! 💯
Node.js allows you to run TypeScript for a while but now with v25 type stripping is considered stable! If you haven't heard and want to learn more about erasing all the types, this official Node.js guide will get you up to speed!
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
This link brings back many happy memories. If you've ever wondered if it'll be possible to play Super Mario Bros in the URL bar (who doesn't, right?), here's your answer!
What rules do you follow when you want to write "good code"? Do you religiously believe in DRY code ("Don't repeat yourself")? Is KISS your thing ("Keep it simple and stupid")? Or do you ignore all these old school "computery terms"?
Kilian shared his approach to coding and his post includes quite some wisdom!
Let me be honest; when people call CSS custom properties "CSS variables" something in me wants to say "But they're not called like that!". Well, it turns out I was wrong.
Side note: Roma has been blogging the entire November and you should definitely check out his work when you're into CSS nerdery!
If you want to stand out, make your colleagues' lives easier and land your PR changes quicker, do everyone a favor and review your own pull requests. It'll make a huge difference!
From the unlimited MDN knowledge archive...
Did you know that there's an :out-of-range CSS pseudo-class? Now you do!
![[].every((item) => item === 'great'); // true [].every((item) => item !== 'great'); // true [].some((item) => item === 'great'); // false [].some((item) => item !== 'great'); // false](https://images.ctfassets.net/f20lfrunubsq/2zrNOvndBMmRpGf5yfj2Wh/56f4d0492e8d7fc730d739d1382633d5/Group_710.png)
Let's pretend that I didn't spend 1 1/2h debugging simple array operations this week...
Do you know how the every and some Array methods treat empty arrays? 👆 Isn't this super confusing and strange?
Find more short web development learnings in my "Today I learned" section.
I haven't seen any great baseline updates this week, but Jen posted about interop 2025. And I think this is very interesting!
This year's focus areas have a 92 interop score right now. This sounds great but what were the focus areas again? My favorites are:
- an interoperable
detailselement (done) - CSS
@scope(done — yes, it's shipping in Firefox soon!) - View transitions (not done, but close)
- Core Web Vitals (not done, but close)
- CSS anchor positioning (not done, but close)
When you look at the list, it's huge to see how much the web progressed in a year. However, have a look yourself.
- cloudflare/telescope – A cross-browser web performance testing agent.
- tj/git-extras – Handy Git utilities.
- sindresorhus/image-dimensions – Get the dimensions of an image.
If you want to quickly check if your (or your friends') browser supports a certain CSS feature, browserscore does this for you!
Find more single-purpose online tools on tiny-helpers.dev.
I won't spoil what you'll find in this comic about AI art, but if you don't enjoy looking at AI-generated pictures and videos, you'll love this one because it's creative, cute and made by a human.
AI art is an interesting technology because despite its growing popularity, nobody seems to want it.
❤️ If so, join 29 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
Loved this email? Hated this email? I want to hear about it!
If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!
And with that, take care of yourself - mentally, physically, and emotionally.
I'll see you next week! 👋
Join 6.2k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.