Image for post
Image for post

In Grace Omele’s article “How to Apply CSS to HalfStyle a Character or a Text” she covers a “plugin” to aid in styling text. Whilst the concept is good, the execution leaves a lot to be desired in that the scripting it uses is utter junk, and the technique used is brute forcing stuff that CSS can actually do all on its own with linear-gradient and background-clip!

The Problems

  1. It creates duplicates of every character layered atop each-other with absolute positioning and overflow:hidden to clip off the parts. …

So many JavaScript examples I see in articles are the opposite of how I go about solving problems. They all seem to carbon-copy bloated, slow, and inefficient techniques that are rooted in a “brute force” mentality.

I caught myself doing that about a decade ago. What really turned the corner for me was I stopped following tutorials and started reading actual references and specifications. So many things people are actually doing “the hard way” and don’t even realize it as it’s the only way they know.

Things such as:

  1. If you’re doing stuff during the page load it’s often easier—…

Image for post
Image for post
IBM Model M. When you have to type every last switch-clicking character in ASCII, accept no substitutes!

I’ve seen a lot of articles and posts on this the past couple years, and it is indeed a very handy thing to have. Still, too many implementations have gaping flaws, crippling implementations, etc, etc.

The overall concept is sound: Use HTML 5 properties to restrict what can be sent to the server, and then enhance it with Javascript to restrict what the user can even type into it in the first place.

So let’s go through the issues, and implement this better.

Issue #1, Bad Scripting

The most common flaw is a lack of graceful degradation “scripting off”. Whilst that’s fine if you’re…

Image for post
Image for post

I am oft disturbed at how people can claim to know accessibility, and then claim that somehow, magically, these systems of client-side scripting based rendering meets accessibility minimums.

I’ve been programming for four decades, and working as an accessibility and efficiency consultant for ten years, and let me tell you something. If your page does not have scripting off graceful degradation — a big fancy way of saying “if JavaScript is blocked/unavailable your page still works” — then it does NOT meet accessibility minimums. …

Image for post
Image for post

For some time we’ve heard anti-vaxxers, Trump supporters, Libertarians, and others complaining about how their “rights” are being violated. The loudest of which seems be those incapable of social virtues; much less describe what rights are, why they are important, and more importantly where they end.

Rights are not carte-blanche to run around like a greedy narcissistic sociopath, no matter how hot and trendy that behavior is in society at the moment.

The simple fact is that most of those screaming loudest about their “rights” in American society have no clue what they’re talking about.

What Actually Are “Rights”?

The dictionary definition always left…


Image for post
Image for post

The majority of people are “visually oriented”. They like to think about how things look before most other concerns. When it comes to web development this is a hard “habit” to break oneself of, but it’s an essential one given that HTML is for more than just perfectly sighted users. It’s why bass-ackward nonsense like artists under the DELUSION they’re “designers” pushing pixels around in Photoshop are able to sucker nubes and rubes alike, flipping the bird at UX and accessibility in their ignorance of anything other than art. …

Image for post
Image for post

Over the past decade the improvements to CSS have transformed how websites are built, mostly for the better. One of the most powerful of these has been the CSS transition, allowing us to make animations without the slew of JavaScript we threw at sites in the past.

Yet frustratingly the one transition that’s hard to do is between “0” and “Auto” values. The automatic size calculation — sizing to the content — simply isn’t something browser makers seem to be willing to even consider implementing.

This makes show/hide animations of all sorts a lot harder than need be. I’ve seen…

In my voyages from company to company as a freelance accessibility and efficiency consultant, I am constantly butting heads with web developers who have some genuinely queer notions of what semantic markup is and isn’t. From those saying “Isn’t that just for SEO?” to “It really doesn’t matter”, to “Well that’s just for coders to look at”, there’s a lot of disinformation, misunderstandings, and just plain lies out there.

To put it as plainly and succinctly as possible:

Semantic markup is nothing more than a sick euphemism for “Using HTML properly!”

Semantic markup is the reason HTML existed from the…

I want to like BEM — Block, Element, Modifier — I really do! Any time someone comes up with a uniform consistent naming scheme, I’m usually all-in… BUT… when it comes right down to it how it works and what it does defeats most if not all of why HTML exists and why CSS is separate from it.

It reeks of people too stupid to understand the simplicity of selectors, combinators, and proper semantics trying to just slop classes everywhere to fix their own ineptitude; when really if using combinators and the proper markup is “so hard” you need this…

If you’ve not already read it, be sure to check out part 1.

In part 1 I showed how to take someone else’s simple example, and give it a bit of spit and polish cutting the code size almost in half. Since it was already tiny, that now gives us room to enhance it with more functionality.

In particular the use of two objects containing our sort types and data gathering methods lays the groundwork for easily adding more types of sorts.

New CAPTION and THEAD Markup

To show off our new filters we need a new table with new data.

The table caption/header is…

Jason Knight

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store