day 343 — code 365

Mon 21 Nov 2016

Code

Learnt some more valuable lessons about writing cleaner code and refactoring code today.

I ended up being caught in a mess of content-driven CSS classes:

me-item-count
me-item-count-text
me-item-count-separator
me-item-count-wrapper

and so on….

I found it much easier to debug and compose when I ripped it all out and re-wrote it using location-driven CSS classes:

me-item-count__top
me-item-count__top-left
me-item-count__top-right

This allowed me to know exactly WHERE things are (allowing me to re-order / hide / re-position them with viewport sizes), instead of trying to remember where a particular CONTENT descriptor was supposed to be when inspecting it in the Elements tab.

CSS

I managed to get print styles working! After a LOT of searching and frustration, I got pointed towards WeasyPrint by a colleague. This is a layout engine that is written in python, and implements the @print rules, so that:

@page {
@bottom-right {
content: counter(page);
}
}

works! as does the magic cumulative pages counter! (without needing to increment it):

content: "Page " counter(page) " of " counter(pages);

Very exciting.

I ran the program from the command line (after installing it, and its dependencies with HomeBrew and pip).

weasyprint <file-path> <output-path>

Immutable

Today I learnt that toArray() still produces an immutable object if the original Immutable List is a complex List (many layers deep (I think)). Instead, I needed to use .toJS(). This is from the documentation:

All immutable Iterables can be converted to plain JavaScript Arrays and Objects shallowly with toArray() and toObject() or deeply with toJS()

Because of this, I was implementing a check that always returned true because the 2 arrays (one plain JS, another the incorrectly-converted List) were never returning the same upon comparison.

Like what you read? Give Ampers Smith a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.