Learning Log: July 2017

I’m always curious about others’ learning processes, so I thought I’d share my own, stream-of-consciousness style. I should mention here that everyone has different amounts of free time and their own preferences as to how they’d like to spend it. There is no “right way” to learn new things, this is just what it looks like for me.

Subject-matter notes I updated this month: designing for small screens

Week of July 9

  • This is my first time using CSS Grid in a production site, and it’s magical! Edit: it’s the Microsoft Edge web summit site!
  • Reading in CSS 2.2: User Interface.
    • I remember the days when people would pick cursors for aesthetic reasons. I was a particular fan of crosshair…now that I’m not 13 and I know better, yikes…
    • The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow. I’ve started using outlines in cases where one state has a border and another does not—in order to prevent layout wobbles—but I hadn’t thought of it in the context of perf. Interesting.
    • I guess I didn’t know about the invert color keyword? Which would ensure that an outline color (or other property accepting this value) would get an inverted color from the pixels it lies on top of. So, one could cascade that across the whole site design instead of having to manage focus ring colors on top of light and dark backgrounds. Need to see what support is like for this because the very next spec paragraph allows UAs (user agents) to not support invert.
  • I’m now done with reading through CSS 2.2! Skipped over reading the appendices because eh. If I need ’em I’ll read ’em. Now figuring out which specs to read next, based on interest level and timeliness.

Week of July 16

  • Working on my first PWA (Progressive Web App)! It’s probably the simplest incarnation possible, because it’s a static HTML page that I’ve enabled a service worker on so it can be loaded offline. Just because it’s the “simplest” use case doesn’t make it “simple”; can’t thank my coworker Patrick Kettner enough for walking me through some concepts. Some resources that were also helpful: Service Workers: an Introduction, Service Worker Cookbook, Manifestation, Web App Manifest spec.
  • CSS spec readings: Sizing

Week of July 23

  • Reading various CSS specifications and Github issues to prepare for the CSSWG face-to-face meeting next week!

Comments

More on the blog