FeedCity

Tweet // <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]>

From time to time, web and software developers will use bad arguments to justify their choice of technologies, workflows or org structures, or to disparage others' differing choices. I see this a lot, and I may have even dropped the occassional F-bomb myself. We're particula...

(This post was originally published on Medium, put has a permanent home here.) Flexbox—not to be confused with Sex Box, the British TV show wherein Mariella Frostrup interviews people who’ve just had sex in a box—is the CSS layout toolkit de rigueur. Of all the celebrated fe...

They say accessibility is about people. Inaccessibility is about people too, of course. In either case, it's people — flesh-and-blood, living, breathing people — that interfaces are built to cater for, successfully or otherwise. What we learn in user research is that people ...

This post is the first in a two part series examining the senescence and ultimate mortality of this blog's proprietor, Heydon Pickering. This week, guest author Malcolm Leader-Thought will make the case that, yes, Heydon Pickering is, in fact, dead; kaput; pushing up the dai...

TL;DR I'm putting together an album to raise money for an organization that supports web accessibility. I had this brainwave while nursing a hangover in Brighton after Responsive Day Out: There are a load of folks working in the overlapping fields of web standards and acces...

I have a long-held suspicion of anything directed at me — especially anything commercial — that sells itself on its "experiential" qualities. I hate the word "immersive" in particular. "Here, let me waterboard you with my new web app! You're going to love it!" Basically, I'm...

Frame Based Animation with Sass

I wanted an easy way to create traditional animations, wherein each frame is a different drawing. I created this Sass @mixin which generates keyframe animation blocks for nth children, placing each of these "frames" in an animated sequence. Note the use of the steps(1) timing function…

I had this one friend at school. Let's call him Darren. Darren was a liar — a compulsive one — and boy did he tell some whoppers. Not "the world was created in one week" whoppers, but big ones nonetheless. One lie Darren would tell, at the age of 12, was that he had lost his...

Editor's note: This article has been submitted anonymously to me as the editor of geekmentalhelp.com — the website of the #geekmentalhelp campaign. Not everyone is in a position to "come out" as a sufferer of mental health problems, but they are still out there; members of o...

Note: This article is a deconstruction of a post by Paul Boag called I don’t care if homosexuality is a sin. I recommend you read it unannotated first. Paul "agonized over writing this post", so you owe him that. I feel I have a duty to address Paul's post as an atheist, not...

Practical ARIA Examples

I have written a book about web application accessibility using WAI-ARIA for Smashing Magazine — the first of its kind. This popular page hosts all of the examples from the book and more.

REVENGE.CSS

Revenge.css is a CSS bookmarklet that reports bad html using pseudo content. If the page you use it with has malformed links, deprecated attributes, <div>s inside inline elements, inaccessible buttons, badly nested sections or other errors, you'll see some ugly, pink errors written in nobody's favourite font: Comic Sans.

Paragrabbr

I use Paragrabbr a lot. It's a lorem ipsum generator I wrote in AngularJS which includes special punctuation — like em dashes — and phrasing elements like <a>, <strong> and even <kbd>. Helps you get your type design detail right.

Auticons Icon Font

Auticons is an icon font and CSS set that harnesses the awesome power of attribute selectors. It places resolution independent icons before or after any hyperlink with an href that matches a certain, expected pattern. In other words, it's an automatic icon font.

Squib Font

The name Squib comes from "Square" and "Slab". Squib supports a total of 165 characters, including all the basic punctuation characters and common Western European accents. It also has an eszett!

Hi everybody! I've just done a lot of cocaine on the company expense account and I want to talk to you about navigational action controls called "hyperlinks" and how to design them into your enterprise-level web application portfolio. YEEEHAWWW. What is a hyperlink? Back in ...

In case you weren't already aware, I wrote a book. This is an unusual book since it is a whole technical book dedicated to making web applications accessible. Want to understand how to make dynamic, interactive applications that don't alienate and annoy folks? Using WAI-ARIA...

"I guess it all started pretty innocently enough. The UX guys would be asking for a new module or something. You know the sort of thing: a search box or paginator. Whatever. So I'd give that block a class like 'search-widget' or 'paginator'; something to make my stylesheet m...

When I’m done staring with fear-induced catalepsy at the vast array of complex and overlapping app building, testing, integration and deployment tools that are quickly amassing around me, I like to take a little break and try to solve a simple problem. The “current page” lin...