Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links, among other things. Enjoy.

Toggletip widget pattern (tooltip alternative)

A screenshot of the Toggletip demo, with the Toggletip displayed. Please open in the CodePen link below to interact with the demo.

Permalink to this heading.What it does

  • Uses a real button as a control.
  • Places the displayed content next in DOM order after the button.
  • Uses some ARIA magic to augment the semantics and behaviour.
  • Displays or dismisses content on click, press or tap (also dismisses on esc key press).
  • Conveys state (collapsed or expanded) to AT users.
  • When initially displayed content is announced by (most) screen readers that support aria-live.
  • Screen readers users can also virtual cursor through and interact with the displayed content.
  • keyboard only users can interact with controls in the displayed content.

Permalink to this heading.What it does not do

Display content on mouse cursor hover.

View Toggletip demo on CodePen

Tags: 

Making input type=date complicated

Screenshots of the date picker interface in different mobile browsers: Samsung Internet, Firefox, Edge, Chrome, Opera, and Safari.

Everyone who’s ever messed around with dates knows that they are terribly user-hostile — not only for software developers, but also for users. True, users will be able to tell you their date of birth or today’s date without trouble, but ask them to fill them out in a web form and they will encounter problems.

Month first, day first, or year first? And what about slashes, dashes, and other separators? Usually the website engineer has a strong personal preference and enforces it religiously upon unsuspecting users with stern and incomprehensible error messages in a lurid shade of red that are too tiny for anyone over 25 to read.

Permalink to this heading.input type=”date”

In theory, there’s a solution to this problem: <input type=”date”>. It offers a special interface for picking dates, and it enforces a standard format for the value that’s sent to the server. Better still, the mobile browsers support it.

[...]

Here’s a test page for <input type=”date”> and a few related types. Remember that some don’t work in some browsers.

[...]

I think it’s time that we trust browser vendors a bit more. The days of useless features for the sake of having a longer feature list are long gone. Nowadays, browser vendors try to add features that are actually useful for users, and are actually implemented by web developers. If a browser says it supports <input type=”date”>, you should trust it to deliver a decent experience to its users. If it says it does not, and only in that case, you should use a custom widget instead.

Tags: 

A Priority+ Navigation With Scrolling and Dropdowns

Exposing long navigation menus on small screens is tricky. Hamburger menus are everywhere, although often discouraged. Displaying "just enough" navigation at every breakpoint can feel like an impossible task. This is especially true for template developers needing to accommodate an arbitrary number of menu items.

The Priority+ design pattern seeks to display as many items as possible given an arbitrary screen width, while making the rest accessible via a single click. I'll go over the implementation I worked on at Goshen College that includes both dropdown menus and horizontal scrolling, which I've yet to find in the wild:

Tags: 

People’s Names That Break Websites

The intersection of rushed (or careless) development and unintended consequences:

We're doing a story about people that have names that websites and computers don't seem to like - for example, we spoke to a guy named William Test, and a woman named Katie Test, both of whom can't seem to keep a hotel or airplane booking because the name "test" is flagged by internal systems.

We also spoke to a guy named Christopher Null who had the same problem, and woman named Joan Fread, who can't use paypal because her last name is the same as a PHP command.

I'm curious if there's anyone in the dev community that is thinking about this, and how to deal with it. Is it even considered a problem? Is the population that this affects so small that people don't even think about it?

Tags: 

Pages