Accept several email addresses in a form with the multiple attribute

A popular tweet of mine that’s been doing rounds again (thanks to an RT by Stefan, whom you should definitely follow) is this little tip:

By setting the multiple attribute on an input[type="email"] you can have it accept multiple entries. Each entry is separated by a comma and is validated individually.

Here’s a little demo video of how that works:

💁‍♂️ For a slight moment there you can see that [email protected] is considered valid. As per RFC 822 the [email protected] format — used mainly in local networks — indeed is allowed.

~

However, it was pointed out to me that on iOS this isn’t usable by default:

On iOS, the “email keyboard” looks like this, with no comma to be found (not even when switching to numbers/symbols):

To work around this limitation you can manually override the input to use the regular keyboard by setting the inputmode attribute to text.

That way we still have the built-in browser validation rules (triggered by [type="email"]) and a means to type in a comma (triggered by [inputmode="text"]). Double win!

💁‍♂️ Sidenote: With this inputmode attribute you can create better number inputs.

~

Combining what we know, here’s a full demo for you to play with:

See the Pen
Accepting multiple e-mail addresses in one input
by Bramus (@bramus)
on CodePen.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

IMAP API – Self hosted application to access IMAP and SMTP accounts over REST

IMAP API is a self hosted application for accessing IMAP accounts over REST API. IMAP API daemon connects to user’s IMAP account, translates API requests to IMAP and also sends webhooks for changes like new or deleted emails.

IMAP API →

The Basecamp Guide to Internal Communication

From the folks at Basecamp, a guide on how/when/why they use chat/face-to-face/e-mail/… when communicating.

Below you’ll find a collection of general principles we try to keep in mind at Basecamp when communicating with teammates, within departments, across the company, and with the public. They aren’t requirements, but they serve to create boundaries and shared practices to draw upon when we do the one thing that affects everything else we do: communicate.

Ooh I like that list they’ve included. Totally rhymes with thoughts I had shared before:

The Basecamp Guide to Internal Communication →

Via Jeremy

“Can I email…” – Support tables for HTML and CSS in emails

Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client?

They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email.

Can I email… Support tables for HTML and CSS in emails →
Can I Email – Email Client Support Scoreboard →

😱 Digging back in the archive I noticed that “Can I use…” got mentioned here on bram.us about 10 (!) years ago … wow, has it been that long already?!

The dots do matter: how to scam a Gmail user

Recently James Fisher received an email from Netflix asking him to update his credit card information.

“Odd,” I thought, “but OK, I’ll check.” The email is genuinely from netflix.com, so I clicked the link. It logged me in and took me to an “Update your credit or debit card” page, which is genuinely hosted on netflix.com. No phishing here. But hang on, the “Update” page showed my declined card as **** 2745. A card number I don’t recognize. Checking my records, I’ve never seen this card number. What’s going on?

I finally realized that this email is to [email protected]. I normally use [email protected], with no dots. You might think this email should have bounced, but instead it reached my inbox, because “dots don’t matter in Gmail addresses”

Whenever you’re implementing email addresses in your code, also beware for plussing when handling them. Additionally James also offers a nice idea, in which Gmail could prevent lots of these scams.

The dots do matter: how to scam a Gmail user →

Ticket Trick: Hacking companies through their helpdesk

Clever way, unearthed by Inti de Ceukelaire, to getting access to private communications channels (such as Slack) by leveraging the create-by-email feature of issue trackers/the helpdesk of a company.

First target of Init was Gitlab’s Slack channel:

Anyone with a valid @gitlab.com e-mail address can join their Slack team. At the same time, GitLab offers a feature to create issues by e-mail by sending them to a unique @gitlab.com e-mail address.

I tried to join their Slack team using this issue creating email address, just to see what would happen. I then refreshed my issue list and saw the verification e-mails added as an issue to my project:

The freshly added issue contained the magic link needed to join their internal Slack team. I clicked the link to see if it’d actually work — and it did. I was greeted by the list of channels I was able to join.

From there one it’s only a minor thing to dig through the chat history and discover links/usernames/passwords/etc.

The fix is to provide your app users with e-mail addresses using a domain different from your main one (*). Additionally verify all e-mail addresses used to sign up.

How I hacked hundreds of companies through their helpdesk →

(*) The same goes for user hosted content, hence by Github switched from username.github.com to username.github.io domains a few years ago.

Mailtrap.io – Fake SMTP testing server

var transport = nodemailer.createTransport({
  host: 'mailtrap.io',
  port: 2525,
  auth: {
    user: 'your-mailtrap-inbox-username',
    pass: 'your-mailtrap-inbox-pass'
  }
});

transport.sendMail({ … });

Mailtrap is a fake SMTP server for development teams to test, view and share emails sent from the development and staging environments without spamming real customers.

Now this is great for testing: use mailtrap’s SMTP server and all mail sent through it will not actually be sent to the end-user but get caught in one inbox you can view. That way you can safely use real e-mail addresses in developmment environments.

Mailtrap.io – Fake SMTP testing server →

Gmail to remove CSS :checked support 😟

rebelmailshoppingcart

With a new update about to roll (already rolling?) out, Gmail has added support for – amongst other things – media queries and non-inline styles. Along with that update however, they’ve also axed support for :checked:

Also gone is the support for :checked selectors. The only pseudo-class selector supported in Gmail and G Suite webmail is :hover. In Inbox, :hover isn’t supported either.

This is a real shame imho, because it would prevent the creation of interactive e-mail using punched card coding. One of such mails is shown above. Yes, that really is an e-mail.

Embedded below a slidedeck by Mark Robbins (who kinda put it all together) on the subject, which he gave at CSS Day earlier this year:

See the Pen CSS Day slides – Mark Robbins by Mark Robbins (@M_J_Robbins) on CodePen.

And yes, even that entire presentation works *INSIDE* an e-mail.

Responsive email support in Gmail is coming →
Gmail update: A closer look at Google’s rendering refresh →
Punched card coding: the secret of interactive email →

Coding mobile-first emails

1-tVdHVHlw8RJY7cOy4DNwLQ

Typically, emails are coded starting with an old school, table based desktop version, with mobile styles applied through a max-width media query to reflow the tables. In email clients that don’t support this, this approach can result in inconsistent rendering and difficult to read emails.

We’re going to flip the formula and start with the mobile version first instead, then work our way back to the desktop version.

Great resource!

Coding mobile-first emails →

Ink: A Responsive Email Framework

ink

Reach out your tentacles to a broad range of people who subscribe to your emails. Our CSS framework helps you craft HTML emails that can be read anywhere on any device. Gone are the days where you had to choose between Outlook and email optimized for smartphones and tablets. Ink’s responsive, 12-column grid blends flexibility and stability so your readers can view your emails perfectly from wherever they may be.

From the creators of ZURB Foundation

Ink: A Responsive Email Framework →