Making a nice 2FA / OTP / SMS field with Tailwind & Stimulus
So, I built this little bit of UI today as part of an email-based authentication flow for Becky's new app:
(I haven't shipped this yet and I'm too lazy to record a screencast, so just imagine that this field behaves perfectly, please and thank you.)
If you, like me, have ever found yourself in the thrall of a beautiful-looking 6-digit form when logging into some site, whether when filling a TOTP from your authenticator app or copy-pasting a code that's been texted or e-mailed to you, you've probably wondered "how'd they make that field look nice like that?"
Well, today I actually started digging into it, and I didn't like what I found. At all.
Epic Inbox Zero
I am generally extremely on top of my inbox, but I don't know if I can get through 18 quintillion e-mails by end-of-day.
This month's Searls of Wisdom newsletter just went out — it's all about how to travel well in an era of high prices, poor service, and crowded destinations. Sign up now and you'll get it: justin.searls.co/newsletter/
Nice set of reminders on how to validate e-mail addresses in Rails models and was glad to find his second example to be almost identical to what I found in my newest app:
class User < ApplicationRecord
validates :email,
format: { with: URI::MailTo::EMAIL_REGEXP },
presence: true,
uniqueness: { case_insensitive: true }
end
One thing I'd be sure to add, though, is the new normalizes
class
method
to ensure all email addresses saved by your app are easily compared by stripping
whitespace and lower-casing them. From my User
class:
normalizes :email, with: ->(email) { email.strip.downcase }
Never hurts to revisit the stuff you wrote on the first day of an app's life.
"It is currently estimated that new models with significant changes to the Vision Pro specification may not be in mass production until 2027," Kuo said today.
This makes me glad I bought at launch as opposed to waiting, and even more glad I opted for monthly AppleCare payments as opposed to buying the fixed two-year contract.
I started a new Rails app in January and I've now been hit by damn near decade-old bugs in 3 of Ruby's most popular gems. Who did I piss off? github.com/paper-trail-gem/paper_trail/issues/1464
Until yesterday, I had never heard anyone but me in the Ruby community express confusion over the fact that Rails produced both paper_trail the audit log gem and Papertrail the logging SaaS.
But seriously, how the hell did everyone else keep these straight in conversation? (My bet is that they didn't, actually)
I just wrote this utility class for my Rails app to ensure my Rake tasks logged their output to my terminal without screwing up anything else.
Was this actually necessary? gist.github.com/searls/a2a642520b36594bb9002e2f75761eec
Breaking Change v6 includes a (rather spicy) PSA detailing how Stripe may be inadvertently giving your product away for free—oops! Probably my best episode yet. justin.searls.co/casts/breaking-change-v6-pausing-doesnt-pause/
[UPDATE: In this episode, I referenced Stripe having an IPO in the past tense. I was mistaken, they are not (yet) publicly traded. We regret the error.]
The audio is better this week! I'm learning.
Also, I finally had something to talk about that has nothing to do with Apple! The target of the ion cannon that is my mouth this time? drumroll… it's Stripe! Sorry, Stripe. If you like rants about software quality and the systemic reasons everything is terrible, hoo boy! This one brings the heat. 🔥🔥🔥
We're starting to work down our mailbag backlog, so help me freshen it up by e-mailing the show at podcast@searls.co and our dedicated staff (me) will read it and—potentially, maybe—respond on the air!
And now, some URLs:
A lot of people are surprised Vision Pro's field-of-view is so narrow, but it makes sense if you think about it: even if Apple invents all the technologies needed to release a Vision product in an eyeglass form factor, it'll never be much wider than 90º.
Apple's resistance to proper VR features suggests they don't want us getting used to anything that wouldn't be possible in their ideal version of the product.
Better 404 design
There are exactly three things I want from a 404 page:
- Something approaching an apology
- An easy way to report the broken link
- Copy that might elicit a sensible chuckle
This page only took a few minutes to make. The "let us know" link pre-populates
the entire e-mail and is implemented in a Rails view thanks to a helper method
that makes constructing mail_to
links a little nicer:
def mail_to_url(email, **options)
"mailto:#{email}?" + options.map { |k, v|
"#{k}=#{ERB::Util.url_encode(v)}"
}.join("&")
end
<%= link_to "let us know", mail_to_url("support@betterwithbecky.com",
subject: "I got a 404!",
body: "I clicked a link that led me here, but got a 404 message:\n\n#{request.url}"
) %>
Wish people spent more time sweating details like this.
Welcome to Breaking Change, the 14th most popular technology podcast in Argentina! (And 30th in Norway!)
It's been a couple weeks since my last breaking change and, guess what, I done broke things again.
If you would prefer I not make so many breaking changes (or if you wish me to break even more of them!), e-mail me at podcast@searls.co and let me know and/or share your darkest secrets under a pseudonym using a throwaway account. Nobody needs to know.
Links and so forth: