DEV Community: Ryan

Making your :focus style fit in with one line of CSS

Ryan — Fri, 29 Apr 2022 05:54:10 +0000

I read a post the other day about bad devs removing focus styles, which really harms accessibility.

The usual reason for doing so is that the browser native focus style is ugly and clashes with the site theme. And fair gripe, it is ugly.

So here's the simple fix, which is just as easy as removing the style:

:focus {
    outline-color: /* your foreground text colour */;
}

Since we're just defining outline color, this won't add an outline to things that don't already have one. If you have a more descriptive rule for specific elements, they'll simply override this 0-specificity rule.

Please make sure the colour you use has high enough contrast to be noticeable -- although if the colour you're using for text doesn't, your site has another problem 😀

Do validate your HTML

Ryan — Sun, 24 Apr 2022 05:04:35 +0000

I'd been pulling my hair out trying to get a perfect score in Chrome's Lighthouse audit. I had only a few tiny icons, not many deeply nested elements, no blocking javascript, I had used preload tags to avoid request chains, and the page sure seemed fast to me. There was no reason I should be capped at 95 for performance. But the audit would always tell me 900ms was being spent on "Unattributable." Gee, very helpful!

A post I happened to read here on DEV linked the W3 Validator so I thought what the heck, let's see if anything is wrong, and ran my site through it. Sure enough I had a few mismatched tags. And wouldn't you know it, fixing that made the problem go away and showed me those beautiful fireworks.

Most browsers will silently fix mismatched tags, so you won't notice any errors on the site or console and it will even be corrected in the source code. But I suppose this makes the renderer waste some time re-parsing the DOM -- not enough for me to notice on my notebook, but substantial on Lighthouse's simulated slow device.

How do you use Night Mode?

Ryan — Wed, 09 Jan 2019 05:00:21 +0000

Cover: Patrick Brinksma on Unsplash

I notice that some sites and apps have night mode as an immediately accessible toggle, some have it on the first level of a popout menu, and others still have it buried a few menus deep in the settings.

Do you find yourself often switching to and from night mode? Do you set it once and use it all the time, day and night? Or do you ignore it?

Personally, I tend to prefer the darker scheme so if there's a night mode I'll leave it on all the time.

Two conundrums with implementing social login

Ryan — Mon, 07 Jan 2019 03:32:18 +0000

Implementing social login is simple enough at first but there are a bunch of weird cases to think about with a lot of different potential ways to handle them.

For example, I am developing a web app where users can register with an email address, or certain social accounts. Users should be able to freely link or unlink any social accounts, right? I'm struggling to think of a way to handle a couple of cases without being too complicated for the user.

Example 1

Suppose a user registered with an email address, and now they want to link their Facebook account. However that Facebook account is already used on another account (most likely the same user clicked login with Facebook once and created a new account without meaning to.)

Would you prompt the user in this case to merge their accounts? (tricky to implement and destructive -- maybe they could merge the wrong account and you can't fix the mistake) Or would you tell the user "you must log on to the other account and unlink it first"? (difficult/time-consuming for the user)

Example 2

A user first registered with a social account, but now wants to unlink that account. There must be a way to verify the user's identity, so they'll need to provide an email address. It seems wrong to require the user to give up personal information in order to delete other information. But the only alternative I can see is giving the option to delete their account entirely which also seems hostile (you want to remove Facebook? Give me your email or kiss your account goodbye 😨) Or I could prompt them to set a username only to log on with, but that could be confusing too and they risk locking themselves out of their account with no way to recover it. They will need to provide a valid email for verification anyway so it seems like a pointless extra step.

Seems like there are no good answers! Social login is supposed to make things easier, isn't it? What to do?

I reported a security vulnerability. Now what?

Ryan — Wed, 03 Oct 2018 01:30:49 +0000

I recently discovered a vulnerability for the first time. I found the product's security contact and sent some information. Ideally they will respond acknowledging the issue and provide a timeline for a patch.

What if that doesn't happen? How long is appropriate to wait before following up? When do you promise public disclosure? What if they disagree that it is a vulnerability?

Is there a guide for reporting vulnerabilities somewhere? I thought I'd be able to find one but I wasn't able to. A resource like that would be handy.

I don't like exit intent popups.

Ryan — Fri, 27 Jul 2018 16:43:02 +0000

Cover illustration adapted from wired.com

You know the thing. Your cursor leaves the window, and suddenly a pop up appears with... something or other, honestly I don't read them. The idea is that if the user is about to leave your site, you should do something to try and retain them -- after all, the worst case is they leave anyway, right? But I always trigger these accidentally. Perhaps a site is too slow to load, so I open another tab while I wait (Shame if your site takes more than two seconds, by the way.) Or perhaps I'm just careless, or I have a nervous habit of moving my cursor. Whatever the case, there are lots of reasons my cursor might leave the window before I'm ready to leave. And now, the content I was waiting for has a giant box blocking it. I'm likely to abandon the site at this moment.

But I wonder if I am the only one. A cursory search on this subject shows a few sites promoting exit intent because they are selling some code that will do it for you (of course), but also a few sites that cite some data showing an increase in conversions. There is surprisingly little hate for something that seems so annoying.

So I'm left with a couple of questions:

Is this really a positive feature? And if so
Is it ethical or wise to implement a feature that you personally find annoying, if data proves it's beneficial?