Wednesday, August 12, 2020

random gripe - why are html checkboxes so 1997?

 In an HTML/CSS world that has grown into flexbox and grids and typeahead and disclosures (details/summary element) it is really bizarre that stuff like checkboxes don't have CSS styling, and if you want something pretty you have to build it up from div scratch (hiding the actual element but leaving it there for screenreaders)

Thursday, August 6, 2020

typescript-y factoids

I need to up my typescript game so I've been reading the full docs.

I know a lot of people complain about about JS's loosey-goosey ducktype nature, but didn't realize til I read the TS docs that
1 < x < 4
is true no matter what numeric value x is.

Also, I was wondering if typescriptlang.org was the canonical site, with a name like that - guess so. Seems like Typescript is a 2007-2010 era CMS that grabbed the better domain...

Also I'm sort of glad to see that according to the excellent typescript playground, this kind of shenanigans will produce an error:

interface Person {
  name: string;
}

interface Teacher extends Person {
  id: string;
}

interface Student extends Person {
  id: number;
}

interface StudentTeacher extends Teacher, Student {
    catchphrase: string;
}

I remember an old compsci teacher, back when C++ was sort of new, warning us about diamond-shaped inheritance trees. Maybe more problematic when those members were functions vs variables? But still. 

turn.js for a highly skeuomorphic magazine page turn effect

Years ago I had a side project to make the web version of the WhiteWave Foods Company Annual Report - they request I use turn.js which makes an intensely skeuomorphic page flip effect, using the mouse or pointer to drag the page over:


A bit gimmicky but rather satisfying! It was pretty easy to setup if memory serves (it has been a while)

Tuesday, August 4, 2020

conventionally committing

My current team has adopted the Conventional Commits standard, a way of bringing some of the chaos and messiness to heel.

The format is:
<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
where type is fix: feat: build: chore:, ci:, docs:, style:, refactor:, perf:, test:, etc. And I think description is meant to be imperative, "do ___". So the example on that page:

feat(parser): add ability to parse arrays

(I'm mostly making this entry to remind myself of the name, "Conventional" has poor mental stickiness for me, and by putting something on my blog I have easy access to both the term and then the example...)

Monday, August 3, 2020

typeahead in html5 (datalist)

I was surprised to find out out html5 now has suport for "typeahead" - where you start typing and then get suggestions that match in a dropdown.


w3schools has a pretty good example:
<form action="/action_page.php" method="get">
  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>



gettin' old

Ctrl-Alt-Delete: The Planned Obsolescence of Old Coders - as a 46 year old, I think I'm lucky because I kind of "pass" younger, in outlook, life circumstance, and appearance. And I haven't had much drive to go into middle management.