Moving on to dfkaye.com

Started blogging with Hugo at https://dfkaye.com/ which you can link to here.

Custom Attributes are Fast, Good, and Cheap

After years working with HTML and CSS, we have come to a surprising conclusion.

Avoid using CSS classes and className and classList when deriving styles based on some “state.” Instead, prefer HTML element attributes, and CSS attribute selectors.
— Me, this week, all the time

Advertisement

Events Are Changes That May Or May Not Matter

This is kind of a programming essay, focused on understanding events and actions. All mistakes herein are mine.

Systems are abstractions of our understanding of {x}.

Understanding is never entirely consistent nor entirely complete. We receive new information (an event) and may update our understanding – we may accept or reject the new information, and take any resulting action.

We can choose to ignore information, but we cannot choose to be “clueless” – that is our given state from which we grow.

Within any system, then…

TIP: Set “type” attributes explicitly on <button> elements

File under “Tiny little HTML5 useful tip.”

TL;DR

Apply this habit to all buttons contained within a form. Buttons outside of forms are just
buttons, not form controls.

This week in front end architecture

In a react/redux application:

• add a checkbox
  in jsx

• capture its state by setting its vDom state with { [name]: !this.state.checked }
  in a switch statement

• unit tests are jest snapshot diffs
  in typescript

• className="bootstrap" or className={style.injection}
  incompatible

Making simple things hard in the front end again.

The HTML <time> element

Sometimes in UI, it requires more brain power to understand “15 hours ago” than “2018-01-10 7:35PM”
– https://twitter.com/ghiden/status/951179673072881665

Hidenari has a point. Sometimes our UI could use a bit more precision. We as developers could be a bit more formal. But how to strike the right balance here?

Two object definition refactorings from 2017

Original gist for this post

Earlier this year a colleague was tasked with modifying an application that defined a very large object (i.e., containing 20+ properties). The troubling part was that the object was entirely defined twice, first in an if-block, then in an else-block, all 20+ properties spelled out in each. That made the differences between the definitions difficult to detect just by scanning.

Number().toFixed() rounding errors: broken but fixable

Original gist for this post

I found a rounding bug in Number().toFixed() in every JavaScript environment I’ve tried (Chrome, Firefox, Internet Explorer, Brave, and Node.js). The fix is surprisingly simple. Read on…

Why input string format matters for JavaScript (and moment.js) dates

Original gist for this post

Given this format, '2017-05-01', I want the date of May 1, 2017.

Using only Month and Year in jQueryUI Datepickers

User interface components in general are built with an expected user behavior. We used the jQuery-UI datepicker, to save time, but in an unusual way, which cost us a lot of time discovering what we’d missed. We re-learned a key insight, namely, month and year are navigation, not selection controls.