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.

Advertisements

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?

Continue reading

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.

Continue reading

Pseudo-Comments in CSS (Or, How Browsers Parse Styles)

The CSS spec does not mention it, but you can mimic C-style and/or unix-style line comments in CSS files (with some caveats). Others have written about them before (see in particular, SitePoint’s Web Foundations post covering CSS Comments). The present post examines them in further detail.

[Note: Thanks to Louis Lazaris and Web Tools Weekly, this post was originally published on October 21, 2015, at http://www.sitepoint.com/pseudo-comments-in-css-or-how-browsers-parse-styles/. It is actually a follow-up (slightly modified) to my earlier post on CSS line rule comments. ]

Continue reading