DayPath Journal

Angular JS 1.x: code-penning my way to a new Blog layout

There are three CodePen presentations I have written that take me step-by-step to a new layout for this Blog. First, I start with the basic layout (something just beyond Photoshop):

See the Pen Songhay Studio: Day Path Index Layout by Bryan Wilhite (@rasx) on CodePen.

Then, I ‘pen’ the live JSON payload that will drive the Blog index:

See the Pen Songhay Studio: Day Path Index JSON by Bryan Wilhite (@rasx) on CodePen.

This second CodePen effectively shows what I decided upon after writing “Songhay Studio: Web Index Design Study”: I’ve decided to use the Accordion from Angular UI to visually group index data (one might call this a UX capitulation for a cliché instead of trying something new).

Finally, I take the learnings from the first and second CodePen presentations to make the third and final CodePen presentation:

See the Pen Songhay Studio: Day Path Index Layout with Grouping by Bryan Wilhite (@rasx) on CodePen.

So what I am seeing here is an ‘armadillo’ index grouping (each collapsed Accordion reminds me of the scales of an armadillo or a pill bug). This grouping summary defines the first feature of the Index HTML5 App to be standardized across all Songhay System web sites indexing content. Literally, for my health, I will make the concept count that gets me to this new moment in Internet time:

First, I had to work with NBlog (to actually see MVC in real life) and see the need to generate an index offline instead of generating one on the fly (especially from static JSON data). Second, I had to choose an HTML5 App platform which left me stuck with Angular 1.x (with no plans/desire to move to Angular 2.x, respecting the public observations of Rob Eisenberg). Third was my move away from 960.gs to Bootstrap (it took me quite some time to realize that Bootstrap is not just a grid system but a responsive grid system). Fourth, I had to choose CodePen.io over jsFiddle. Sixth is surely a bunch of personal-life issues not worth mentioning here…