html – Page 2

HTML attributes to improve your two factor experience

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.

In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users’ two factor authentication experience.

…

Phil Nash (Twilio)

Summary: simple changes like making your TOTP-receiving <input> to have inputmode="numeric" gives user-agents solid hints about what kind of data is expected, allowing mobile phones to show a numeric keypad rather than a full keyboard, while setting autocomplete="one-time-code" hints to password managers and autocomplete tools that what’s being collected needn’t be stored for future use as it’ll expire (and can also help indicate to authenticators where they should auto-type).

As my current research project will show, the user experience of multifactor authentication is a barrier to entry for many users who might otherwise benefit from it. Let’s lower that barrier.

Making It Boring

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Jeremy Wagner / JSConf (YouTube)

“Why make the web more boring? Because boring is fast, resilient, fault tolerant, and accessible. Boring is the essence of unobtrusive designs that facilitate interactions rather than hinder them.” says Jeremy.

He’s right. I’ve become increasingly concerned in recent years in the trend towards overuse of heavyweight frameworks. These frameworks impose limitations on device/network capabilities, browser features, caching, accessibility, stability, and more. It’s possible to work around many of those limitations, but doing so often takes additional work, and so most developers, especially junior developers raised on a heavyweight framework who haven’t yet been exposed to the benefits of working around them. Plus, such mitigations tend to make already-bloated web applications – full of unnecessary cruft – larger still; the network demands of the application grow ever larger.

What are these frameworks for? They often provide valuable components and polyfills, certainly, but they also have a tendency to reimplement what the browser already gives you: e.g. routing and caching come free with HTTP, buttons and links from HTML, design from CSS, (progressive) interactivity from JS. Every developer should feel free to use a framework if it suits them and the project they’re working on… but adoption of a framework should only come after consideration and understanding of what it provides, and at what cost.

HTML Movies

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

1. a (1998)

Documentary about the Buddhist sect responsible for the 1995 Tokyo subway Sarin gas attack.

2. body (2003)

Also known as Jism. No, really. A tale of passion and murder featuring an alcoholic lawyer and the wife of a travelling millionaire.

3. canvas (1992)

Gary Busey stars as an artist who takes part in a heist to save his brother from murderous art thieves.

…

Matt Round

We could have had so many HTML-themed Troma Nights, if we’d wanted…

Browsers are pretty good at loading pages, it turns out

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

The <a> tag is one of the most important building blocks of the Internet. It lets you create a hyperlink: a piece of text, usually colored blue, that you can use to go to a new page. When you click on a hyperlink, your web browser downloads the new page from the server and displays it on the screen. Most web browsers also store the pages you previously visited so you can quickly go back to them. The best part is, the <a> tag gives you all of that behavior for free! Just tell the browser where you want to go, and it handles the rest.

Lately, though, that hasn’t been enough for website developers. The new fad is “client-side navigation”, where instead of relying on the browser to load new pages for you, you write a bunch of JavaScript code to do it instead. It’s actually really hard to get it right—loading the new page is simple enough, but you also have to write code to display a loading bar, make the Back and Forward buttons work, show an error page if the connection drops, and so on.

For a while, I didn’t understand why anyone did this. Was it just silly make-work, like how every social network redesigns their website every couple years for no discernable reason? Do <a> tags interfere with some creepy ad-tracking technique? Was there some really complicated technical reason why you shouldn’t use them?

…

Carter Sande

Spoiler: good old-fashioned <a> hyperlinks tend to outperform Javascript-driven client-side navigation. We already learned about one reason for this – that adding more Javascript code just to get back what the browser gives you for free increases the payload you deliver to the user – but Carter demonstrates that progressive rendering goes a long way to explaining it, too. You see: browsers understand traditional navigation and are well-equipped with a suite of shortcuts to help them optimise for it. They can start rendering content before it’s all downloaded, offset (hinted-at) asynchronous data for later, and of course they already contain a pretty solid caching engine and you don’t even have to implement it yourself.

Our Web Developer’s “Line Of The Day”

Yet again my concern for the value of an Internet Computer Science degree from UWA is raised, as a dippy co-worker with two years of such a degree behind her asks me for help:

“Dan,” she begins, “How do I make a table in PHP?”

For those of you that don’t know quite as much about web design as she should, PHP is a programming language used, amongst other things, for developing dynamic, flexible web sites which integrate with other data sources. This weblog, for example, is powered by PHP. It is most frequently used to output HTML, the language of the web.

“I think you mean HTML,” I reply, seeing what she’s trying to achieve – the alignment of two text fields with their corresponding labels. She’ll need a simple two-by-two table. The code for this is as follows:

<table>
  <tr>
    <td>
      Top-Left Text
    </td>
    <td>
      Top-Right Text
    </td>
  </tr>
  <tr>
    <td>
      Bottom-Left Text
    </td>
    <td>
      Bottom-Right Text
    </td>
  </tr>
</table>

What are they teaching them these days? I remember learning this at about age 14, using Netscape’s examples. This young woman has been studying Internet-fucking-Computing at degree level for two years and hasn’t been shown this?

Don’t even get me started on the fact that she shouldn’t be using a table for the purpose she was trying to use it for.

Update 2023-12-07: In hindsight, I made a knee-jerk reaction in writing this blog post. I should have treated this junior developer as what I’d now call “one of the lucky 10,000” and been more-supportive and a better teacher. We’re all learning, and back in 2004 I clearly had a lot of learning still to do.