H Tags and Auto-Constructing an Anchor Index

Origin Story I got a fairly dense Word document that needed to go online in way that people could more easily navigate. After checking it out, it appeared we had a large number of sections but we were lucky in that they were designated by H tags of various levels. Now I could have gone through and added IDs to each H tag by hand but my masochism doesn’t run that way. The challenge was now to see if we couldn’t do this automatically with javascript. Build It It ended up being more succinct than anticipated and will undoubtedly be used again in other scenarios. I commented it up below to explain things. The other thing to consider is that maybe you can’t use javascript on the site. That’s ok, run it like this and then inspect element and copy the results. Now you can paste that into any place that takes HTML and you’re good to go. See the Pen health hub index by Tom (@twwoodward) on CodePen.

Checkboxes exposing more content

The basic idea here is that if you check all the boxes, more stuff will be shown. Right now it’s set to need all 6 but it could be any number.
Once again, it’s an ugly demo that we didn’t end up using but I can see this being useful …

Tracery + Ink

Tracery is a primarily JavaScript text-expansion library that works from grammar expressions written in JSON to create generative, flattened options. ink is a scripting language for creating interactive narratives. It can be written using the editor Inky. The inkjs NPM module is a JavaScript port of the ink engine. Reviewing Tracery The Tracery library works through creating a generative …

Continue reading Tracery + Ink

Learning React: Part 2: Understanding Render()

Learning React Part 1: Installing and Configuring Part 2: Understanding Render() Part 3: Building Classes Part 4: React JSX React is a popular JavaScript library for creating user interfaces. It combines many features of JavaScript ES6 together to create a powerful way to quickly create front-end functionality. Understanding Render() In the last part of this series, …

Continue reading Learning React: Part 2: Understanding Render()