PWA notes: CSS Grid
20 April 2019
(update 21 Apr 2019: copy edit, add some explanation.)
I'm learning how to make a Progressive Web Application. Progressive Web Applications are a good thing because they give people a lot of the features of mobile apps, but run in the browser where it's easy to turn on privacy protection features.
Here's how it's going so far. A simple polyhedral dice roller for Dungeons and Dragons, and similar games that use many-sided dice.
Links: standalone, source.
(Yes, I know real dice are better for a real game. This is for when you forget your dice but not your phone, or have a few minutes to prepare something.) This is mainly designed to run on a phone, but it does take keyboard input, and if you can see it here it also works in an iframe.
I ran into some browser compatibility problems trying to do the ASCII Art as real ASCII Art, so the ASCII Art is really a PNG. To look on the bright side, though, finding a browser incompatibility issue means that this is now a Real Web Project.
Here's how I got the help to work the way it does, with CSS. In its regular place, the keypad is laid out calculator-style, and on the help page, the buttons are laid out in a column on the left with the explanation of what they do next to them.
The keypad and the help page are really the same
content, so each button's help is a p element
that lives right next to the button element.
Turning help on and off doesn't navigate you to a
separate help page, it just moves the keypad to a
new parent element where it is styled differently.
The #keypad div starts off as a child of the #compact
div. Inside of #compact,
the grid is four columns:
grid-template-columns: 1fr 1fr 1fr 1fr;the help text is styled with
display: nonethe tall button is
grid-area: span 2 / span 1and the wide button is styled withgrid-area: span 1 / span 2;the
0-9button, only used in help, is alsodisplay: none
Moving #keypad to be a child element of #help means that different styling applies.
the grid is two columns:
grid-template-columns: 1fr 4fr;All the help elements are
display: blockso they show up, and take up positions in the grid.The tall and wide buttons are single sized.
The individual numbers are
display: noneand the0-9button isdisplay: block.
Putting the help text next to the button it applies to should make it easier for me to check that the help text for each button is there and up to date, and I don't have to make a separate help page.
Next step: figure out how to make this Do The Right Thing with a screen reader.
Related
Turning a GitHub page into a Progressive Web App by Christian Heilmann: another dice PWA (with animations, d6 only)
Bonus links
Hands off Brock! EFF pleads with Google not to kill its Privacy Badger with its Manifest destiny
Publicis Buys Epsilon For $4.4B – But Will It Be Able To Integrate The Frankenstack? (one possible metric for success of privacy tech and regulation: by how much do they have to write this acquisition down?)
Why I Replaced Disqus and You Should Too
