Author: chris

Games I Enjoyed Enough to Put On a List: 2017

Posted on by chris

I wrote one of these last year and found that it sparked some good conversations and also that I checked it throughout the year to remember what the heck I played in 2016.

Always blog so you can remember it later.

In 2017 my wife and I bought a house and our baby became a toddler, which means my time for gaming was drastically reduced while we packed, unpacked, did projects, and wrangled a suddenly very mobile little child.
Also, Scope Creep Studios, the videogame studio I run with a few friends, released Night Lights Toddler Toy, a simple toy app we made for our toddlers. It was supposed to be a simple few week project that, of course, took a few months to get launched.

The Second Half of Final Fantasy XV (PS4)

After loving the first part of this game I put it down for almost a year. I’m glad I did. In fact, this is the first game I’ve played in which I wish I’d just waited a year to play it in the first place. They seem to keep shoving in features and story tweaks into the game with every patch to the point where I’m not when you call the game “finished” vs. “minor improvements”. It’s a fascinating historical problem that I hope academics figure out how to deal with. For those living through it can be obnoxious. If I was younger I’d eat it up. Bring on the content! Now though I do not have time for that and would rather play the game when its “done” (or at least closer to the developer’s vision than hitting a release date set by Marketing).

That’s enough griping about a game I really enjoyed. Huge over-the-top setpiece boss fights, frenetic combat, emotional road trip bros, and the general whiplash of going to “the world is ending because of the gods” to “monologue about Cup Noodles” completely won me over. Final Fantasy is at its best when the stakes are impossibly high but you instead spend hours, say, playing a snowboarding mini-game. It’s melodrama rolled in the banal and I love it.

Obduction (PC)

It’s a very pretty and mysteriously charming game that only Cyan seems capable of really pulling off well. I got bogged down about halfway through by house whatnot. I don’t love playing this sort of game on a PC though because it’s a lot of sitting and thinking I’d rather do on the couch, plus I had a few hard crashes that took me out of the experience. Going to pick up the ps4 port in 2018 to finish it.

The puzzles I did get to were, of course, well designed and integrated into the world. The in-game world seems to expand and also come into focus as you learn new information through the puzzles. A vast setting coming into focus as you wrap your mind around its rules and places. Riven did this incredibly well too and Obduction has a similar feel.

Mario Kart Wii (Wii)

I almost forgot to put this on the list somehow! I think it occupies a different space in my head than other games. It’s inherently a social game. The only time I played by myself was to unlock more tracks for us to play together. My wife and I would play after our daughter would go down for bed. We even had a friend over to specifically play it for a game night. My mother-in-law played with us once too!

And then recently our daughter started asking to watch us play. She and I even tag teamed an adorable, although frustrating, lap in which she handled accelerating and I handled steering. Needless to say she took her power seriously and refused to accelerate at all … we eventually finished a lap in 11 minutes by me sneaking in button presses.

Universal Paperclips

The first draft of this post included it twice I liked it so much.
I’m a sucker for clicker games and this took up an entire weekend. It’s a refined clicker/energy mechanic game, which is to say after you get past the initial flurry of clicks you likely are barely ever madly clicking again. Just managing your spreadsheet of inputs and outputs and enjoying the ride as you accumulate resources as you race towards your goal.

What I liked most about it was that it had a fantastic sense of humor and progression curve. It’s not for everyone, but it certainly got its hooks in me fast.

Honorable mention here is Realm Clicker, a game that Andrew Brooks showed me on New Year’s Eve that I played incessantly on NYE and New Years Day itself. It didn’t make the list as its own game because it doesn’t have an easily accessible ending like Universal Paperclips. I hit a point where the game started playing itself with me checking in now and then. I’m quitting cold turkey before it becomes a chore. It’s really good though.

Professor Layton and the Diabolical Box (DS)

I’d played this one a while back and it’d been long enough to have forgotten most of the puzzles. I love the fiction of going into towns where people are so obsessed with puzzles that they will stop whatever is going on to give you one. The story is mostly a glue to give you opportunities to meet weirdos who NEED you to solve a puzzle before they can tell you an important factoid. Lovely music, lovely artwork (heck, they had a Color Design Team on this game), and a solid lineup of fun puzzles.

10 More Bullets (iOS)

A very simple game that I played in one extended sitting. You have 10 bullets left and are trying to use them as best you can. You slowly upgrade as you collect resources until every time you fire the game explodes in a cascade of debris from ships. Really satisfying.

Night in the Woods (PS4)

Delightful writing and wonderful art. Plus it says something about the experience of coming home after being away in a way I don’t think I’ve encountered in other media. The ennui of adulthood setting in and trying to recapture something you will never get back. I didn’t love the game-y platformer parts of it. I did love the little mini-games peppered throughout it though. I’ll likely play through it again in a year or two purely for the writing.

This game was also very wrapped up in the experience of following their kickstarter updates and the creators on social media. I’m not sure it’s possible to divorce the game from the backer updates and twitter exchanges. The creative team on the project seem like cool and thoughtful folks and I’m excited for whatever it is they do next.

ABZÛ (PS4)

A PS+ freebie that hit me at the right time during house buying and moving. I found this to be an utterly relaxing experience. I meandered through it slowly and my toddler watched now and then and pointed out fish. Soundtrack is delightful too. It’s not a hard game by any means, but I never felt like it was wasting my time being overly clever about how I should progress to the next rich environment. It’s a hangout game. A game you want to inhabit for a while. Most of the games on this list are hangout games in some way, actually…

Hollow Knight (PC)

A very moody metroidvania with inspiration from Dark Souls and a style all its own. I picked this up on a recommendation from a friend towards the end of 2017. The first part of it was fine and then I picked up a few of the movement based items and it started to shine. The art direction is highly controlled and the soundtrack is lovely. You don’t feel like you need to rush through it (although I’m sure a speed run would be impressive). My complaint with it is that it’s stingy with save points. Likely no more stingy than, say, Super Metroid itself, but dying in Hollow Knight often than not leads to me to quitting until tomorrow rather than diving right back in.

Dungeons & Dragons and 7th Sea (Tabletop)

Another big change to “gaming time” was that I started running (a few) D&D games. After years of swirling sort of around the tabletop RPG hobby we got a group together. My wife had finished up listening to The Adventure Zone’s Balance arc and I asked her if she wanted to play. I volunteered to be the DM and quickly am realizing that I really enjoy prepping and thinking through what would be fun for everyone. We’re playing through the Starter Set, which is 20 bucks and so well designed I recommend it to anyone and everyone who has been curious but not sure where to start. Or talk to me in person and I’ll talk your ear off.

Videogames learned a lot from tabletop games, and in turn tabletop games seem to have (finally?) picked up on certain things (like approachable rulesets) from videogames.

I’m also playing in a 7th Sea game which has consistently been some of the most fun role-playing I’ve been involved in. It’s a system designed to make you feel like a sea-faring swashbuckling (and/or sorcerous) hero while telling interesting stories.

Notes on other games

What Remains of Edith Finch? and The Vanishing of Ethan Carter are like tailor-made for Chris, but I haven’t had a chance to play them. I’m putting bets that they’ll both be on my 2018 list. Firewatch too, which I keep forgetting about.

And for reference’s sake, here’s a list of friends who have written 2017 wrap-up posts. I’ll add to this as y’all get yours published. It’s nice to go back to these when wondering what to play:

Upgrading the Site to use CSS Grid

Posted on by chris

A few months ago I wrote a blog post about how amazing CSS Grid is and how I think it’s the future. And then proceeded to not actually update my personal site to use CSS Grid for 3 months.

I finally got to working on that a few weeks ago, then ran into hugo version issues, then got those sorted out, and now here we are: the site’s now using grid and all is right in the world.

The actual conversion itself was pretty easy to do and it was very refreshing to flat out replace many lines of boilerplate divs with semantic tags. The source for each post is much cleaner than it was previously and is something you can follow.

I, of course, coupled the grid changes with a full rewrite of the site’s styles and other template changes. Other parts of the site are likely broken, but what’s the fun of a personal non-commercial site without a few lingering bugs?

Now that the basics are working I’m excited to slowly, over the course of many years, add in features and tweak it. Grid is good.

Royal Emotional Mirror

Posted on by chris

The “Royal Emotional Mirror” technique is when a brand refers to it in the second person plural while reflecting back the emotional state of the customer on social media.

  • Royal: think the “royal we”. A distant familiarity.
  • Emotional: focused on emotional states (happy, sad, etc.)rather than facts
  • Mirror: generally repeats the emotion of the person interacting with the brand rather than reacting to it.

It’s related to empathetic listening just adapted for organizational use (or “abuse” depending on your stance.

This should, at a minimum, be an entry point into also solving the customer’s problems, but is often merely the only agency that customer service reps have at their disposal until kicking it to another tier of rep. It’s a gentle way to complete a connection with a user, show that they’re recognized and valued, and/or complete the social loop of a “conversation”.

“Me, a representative who is speaking on behalf of the company, understand where you are coming from and now that you and I have connected and are aligned we can solve the problem while feeling good.”

Once you see this pattern it’s hard to not see it.

Oculus provides a great example of this in a basic form:

Customer: “I want one. Loved the concept”
Brand: “We’re pretty excited too, [Person’s Name].”

https://twitter.com/oculus/status/918235457917370368

Starbucks gets points for hashtags

Customer: “Oh yay!!!! Love it!! My Favorite coffee #NationalCoffeeDay #CoffeeLoveCups “
Brand: “Happy #NationalCoffeeDay! What do you love most about coffee? #CoffeeLoveCups”

https://twitter.com/Starbucks/status/913742272784605184

Samsung loves it

Customer: “Can’t wait to get my #galaxynote8 from @tmobile”
Brand: “We’re doing a happy dance in anticipation.”

https://twitter.com/SamsungMobileUS/status/918511007911350273

Customer: “Dope”
Brand “Our thoughts exactly.”

https://twitter.com/Deandre_Turrey/status/917800649257095170

I’d actually love to hear a statement by the president of Samsung in which he agrees that describing their flagship phone with a word that also has–let’s call them–drug connotations is representative of the company. It’s important to not overthink these things.

Anything by Slack

Slack is the best at this, just go read through their twitter stream:

https://twitter.com/SlackHQ/

McDonald’s would like you to come visit it more

Customer: “yum”
Brand: “We think it would be cool to see you in our drive-thru, Darry! Better yet, come on in.”

How I Spent My Friday Night, or Why Framerate is the Wrong Choice for Managing Time-based Animations, Actions, and Effects

Posted on by chris

Of the bugs I have written a lot the one that keeps biting me is improperly locking an animation, effect, or action to the framerate of the game rather than to an elapsed time on a clock. You can never depend on your game running at a specific and consistent framerate across every device it’ll get played on. This seems obvious, but is a very easy assumption to make when you’re in the thick of it. If a device slows down, or speeds up, suddenly that tuned animation that elapsed over the course of 60 frames might take 2 seconds to complete.

For a background animation this might be fine and this isn’t necessarily that bad. However, what if it’s a function that the user is relying on for either visual feedback, or to take their next action?

That’s bad.

The Dark Souls of This Bug

There was a bug in Dark Souls 2: Scholar of First Sin in which character equipment was breaking very fast on the PS4. Equipment in that game has a durability rating that goes down as you use it. If you go too long without repairing it it will break.

Turns out, they’d linked that decrementing of durability to the framerate. On the PS4 the game ran at a nice steady 60 frames per second and thereby was resulting in equipment breaking very fast.

Thankfully we have this lovely bit of honesty from the patch notes:

“Fixed issue whereby weapon durability was decreased drastically when used on enemy corpses, friendly characters, etc. (Especially apparent for users running the game at 60 fps as the durability decrease rate was linked to the frame rate).”

Source: IGN

Scope Creep Studios is Not a AAA Studio, but We Have Similar Problems

A common way that I’ve introduced these problems is by doing something like the following:

public IEnumerator moveItOverSome() {   
    while (gameObject.transform.localscale.x >= 0f) {
        gameObject.transform.localscale -= new Vector3(.1f, 0f, 0f);
        yield return null;
    }
}

Every frame the Coroutine is running you shrink the scale of the object a tenth of a unit until it’s below 0, which functionally means that it’s invisible. Please ignore the other four or five problems with that coroutine. I’m going for simple readability right now.

The issue with this is twofold:

  • If your framerate dips or spikes or whatever the movement isn’t going to work as expected
  • Coroutines sometimes don’t behave exactly how you want them to

Give me a specific example, please

We were running into an issue on our upcoming app, Night Lights: A Toddler Toy, where every once in a while the coroutine to shrink our object refused to add the Vector3 how we wanted it to be added. This would result in the coroutine running for seemingly forever as it slowly decremented the size of the object by .0000001f every frame, or it’d shrink part of the way and then get caught somewhere and looked to be about half the size it should have been or looked like a speck, or generally just wasn’t what we wanted.

After a lot of hours debugging—_a lot of hours_—we finally stopped and did what we should have done from the start: wrote the corotuine to shrink from it’s full size to 0 over the course of 1 second using a lerping function.

Lerping interpolates between two values based on a third value between 0 and 1. Roughly: how far along in this process am I? At the start: 0, at the end: 1. Unity includes a Lerp method that returns a Vector3.

For the coroutine then we need to note the values we want to go between and the start time and then every frame the coroutine runs we can determine how far along we are in the shrink.

To whit:

public IEnumerator shrink() {
    Vector3 startSize = new Vector3(2f, 2f, 1f);
    Vector3 endSize = new Vector3(0,0,1f);

    //When does all this start?
    float movementStart = Time.time;

    //While current time is less than when we started
    //Plus how long we want it to go for (1 second)
    while (Time.time <= movementStart + 1.0f) {

        //Calculate our new size using the current time (Time.time)
        Vector3 updatedSize = Vector3.Lerp (startSize, endSize, (Time.time - movementStart));

        //Update the gameObject’s size using the new Vector3
        gameObject.transform.localScale = updatedSize;
        yield return null;
    }
}

To the toddler both approaches—when they work—visually look similar. Our latter example is reliable though and thereby the better solution for our needs.

A Note About Toddlers Tastes for Bugs

We found in testing that toddlers often like it when the app breaks in strange ways, but they also tend to then want it to rebreak in those exact same ways again, which is hard to do.

If you’ve spent any time with toddlers that will not surprise you in the least.

What Did You Learn?

Tozier reminded me what’s really important in life when I subtweeted the very short version of this blog post:

“Imagine how much you’re _learning_ though!”

Here’s what we learned:

When it comes to determining how something happens over time in your app or game you need to tie that action to some sort of timer. That timer could be the framerate, system time, game time, a clock in your basement that you have a webcam pointed to, or something else. Unless there’s a strong reason to do so one should reference a clock that isn’t tied to system performance.

DIY Discovery Tower for Under $50

Posted on by chris

One thing about toddlers is that they want to see whatever it is you’re doing up there. This leads to plaintive pleadings for “up, up, up, up, up” whenever we are doing anything in the kitchen.

We needed a solution to this that didn’t devolve into ignoring her until we finally caved and picked her up. I posed a question on Workantile’s slack and Andre replied to say that they’d had luck with the Ikea BEKVÄM stool.

In googling for it I stumbled across a DIY project to turn one of them into a “discovery tower”. Real Discovery Towers run in the hundreds of dollars and I’d bet they’re worth it. If you’ve ever bought good furniture you know that there’s a hundred small decisions that go into each piece that can make or break it as a useful object.

However, right now, all we needed was something to get her safely up higher than she is right now. You can buy this mod already done off of etsy, but I’m never going to turn down a chance to make something like this myself.

Which Plans?

There’s a lot of these projects out there on the internet. Everyone does it slightly differently.

Which then sent me over here to this Ikea Hackers post which is what I really used as the basis for our design.

My wife ordered the stool and it arrived a week or so later. I put it together and Scout immediately did this:

Sitting at her table

Affordances are an amazing thing. We had to put her on top of it for her to get the intended use and then she loved it.

Materials and Tools

Aside from the stool the other materials were a spare 2×3 that I had left over from another project, some scrap 1”x4” boards, a dowel, and 2” drywall screws. Paint came from a leftover testing pint we had around.

Tools were a miter saw and a drill with a bit for predrilling and a bit for drilling the dowel hole. You’ll also need a bit for your screws.

The first major step was cutting the 2×3. The 2×3 runs about 1.5” by 2.5” so I took it to the table saw and ripped off an inch to make a roughly 1.5” by 1.5” 8 foot long board. If you don’t have access to a table saw you could skip that step. The tower will just look a bit chunkier. Alternatively, buy a smaller board. That made up the majority of the tower, with some extra scrap used for the top supports and a dowel for the back support.

You can absolutely use nicer materials, but that wasn’t a priority for us for this project.

Also I’m not giving measurements, because it’s very important that you make your own. When following someone else’s plans on the internet I’ve found that what you’re really getting is the general shape of the finished project. Your tools’ tolerances and your materials are always going to be different. This goes double when you’re using scrap wood and framing lumber.

Project Overview:

I’d recommend doing this project in this order, which differs from how I did it. Learn from me!

  • Vertical Supports: measure from top of stool to counter height, cut, drill holes for dowel in back two supports, sand, attach
  • Side Supports: measure between vertical supports, cut, sand, attach
  • Dowel: cut to length and thread through with a dab of glue on each end
  • Top Supports: measure sides, cut, sand, attach. Then measure the front piece, cut, sand, attach

Note that sanding before attaching will save you so much time in the long run. I just did a rough sanding to knock down any sharp corners and clean up splinters. We want the “natural beauty” of the rough lumber to shine through (ha!).

Vertical Supports

First step was to measure from the top of the stool to the top of the counter. I was looking for an exactly even surface because that’s the sort of thing that really makes me happy. Your milage may vary on whether you care or not. If you don’t care, at least going lower than your counter height so you don’t create a lip that is going to get in the way.

The vertical supports are each attached with two screws drilled from the bottom of the top part of the stool. Predrilling with wood like this is a must or you will split it. What I did was predrill through the top board, then put the screws in so they poked through the top just a bit. That let me press the vertical supports down into them to mark them. Then predrill those, then screw it all the way through.

That’s a lot of steps, but the upshot is that nothing split and all the supports are aligned well.

Here’s the underside with a few of the holes predrilled

Side Supports

Once the vertical supports were in I marked off the position for the side supports about 10 inches up. These act mostly as additional handholds for her as she’s climbing into and out of it. They honestly might not be necessary.

Picture of the side supports and the top supports attached

Dowel Support

We originally didn’t have the dowel in place because I didn’t understand why you’d have that there. It only took about 5 minutes for her to be standing up there and lean back to realize that the dowel’s purpose is containment. She can still duck underneath it to get up and into the tower, but the dowel keeps her from flying back off into the void. Parenting is sometimes merely risk mitigation. I’d recommended putting one in, and I’d also recommend putting it in before you screw everything together and fill in the screws with wood putty.

Unpainted without dowel. This is what it looked like without the dowel. This is regret because I had to pull the top supports back off to get the dowel in

She was still happy with it, but we were not.

Happy even in its unfinished state

I used a 1/2” diameter dowel, which felt about right to me. Very little flex at this length and doesn’t require a ton of additional space. I drilled direcly through the vertical supports—trying to stay as level as possible and then threaded it through both of them. It’s tight enough to friction fit, but a dab or two of glue wouldn’t be the worst thing. Then when the top supports go on it covers up the end of the holes.

Top Supports

Finally the top supports go in a 3 wall surround. These provide structural support as well as gives her plenty of room to hold onto something when she’s up there. We could have done something similar to the side supports, but I don’t think it’d be as stable. If I ever did a version two of this I’d be tempted to try it to keep it more compact.

Painting

Finally, we painted it using a leftover paint sample pint. For a job like this that was plenty and we have some leftover for touchups later on. There are plans for additional decoration, will update this when and if that happens.

Here it is drying

She loves it. This morning I showed her how she can push it around to different “stations” in the kitchen. She happily moved it over to get a banana and then to wash her hands. Later she used it to put her plate in the sink. She will surely use it to do more nefarious things later on, but for now it’s giving her more independence and that’s a very cool thing to see.

Picture of her on top of the finished product

Tools for Diagnosing Domain Name Issues

Posted on by chris

Oftentimes when inheriting a web project you also inherit myriad domain name related issues. And, as always, the command line is your friend for finding quick information associated with that domain name. Here’s a few tools I’ve been using a lot lately:

Whois lookup

A simple whois lookup will give you basic information on a domain name. It’s a good way to check for availability or when a domain name is going to expire. Use it like the following:

whois chrissalzman.com

If you just want the line for when it expires you can grep your way there:

whois chrissalzman.com | grep "Registry Expiry Date"

This should print something like the following:

Registry Expiry Date: 2018-08-08T14:10:49Z

Redirect testing with curl

curl is one of those tools that I’m constantly finding uses for. Recently a tech I was working with showed me this trick:

curl -IL google.com

This’ll show you just the headers and the redirect path a domain takes to its final destination. It’s especially helpful for debugging redirect rules on your server. Or in a recent case it helped me diagnose an issue I was having with a forwarding service from an unnamed large registrar.

Anyway, running the above command will show you that going to google.com has one 301 redirect to www.google.com. This is a pretty standard setup (although fascinating to note they don’t redirect to https).

The -L flag asks curl to follow any redirects. Without it it will just return whatever is at the first page. Try a curl request on just google.com with no flags and you’ll see that it returns a terse page:

<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>301 Moved</TITLE></HEAD><BODY>
<H1>301 Moved</H1>
The document has moved
<A HREF="http://www.google.com/">here</A>.
</BODY></HTML>

The -I or --head flag fetches “the HTTP-header only!”, according to the man page. This is useful when you don’t care about the page itself, but do care about the headers relating to redirects and IP addresses.

Combine these two flags and you’ll get the chain of redirects to the final resting place when you to to a site.

I also found out that it will give you a response of about any SSL issues you encounter. I was hitting one for my domain that required an nginx restart.

host -a

This allows you to request “all” which theoretically returns any records setup for that hostname. This is most useful on, say, a base @ record so that you can see any of the mx, txt, ns, or other records for it:

host -a chrissalzman.com

I’ve found that occasionally this doesn’t return everything to you. I need to investigate this more, but my assumption is it’s due to network speeds. If you run this and don’t get all the records you’re expecting it’s worth rerunning. Some nameservers deny this request, but most don’t. They should notify you if they are denying it

If all you need is A record for that hostname you can drop the -a flag.

dig

Shortly after publishing this post Benedict Singer showed me dig!

dig is powerful. From the man page under BUGS it says “There are probably too many query options.” That is true, it seems like it can do almost everything you need related to DNS.

Basic usage let’s you do a similar lookup to host. The result is extremely similar in terms of response time and output:

dig chrissalzman.com

Adding in any is equivalent to -a for host:

dig chrissalzman.com any

Drop any and add in +short to only return the IP address for the record you’re looking up:

dig chrissalzman.com +short

For my purposes one thing that looks interesting is that you can feed it a bunch of domain names from a text file using the -f flag.

dig -f dignames.txt

dignames.txt contains a list of domain names, one per line, and it quickly iterates through them. I could see this being useful for scripting purposes if you wanted to, say, periodically check if an IP had changed on a host record (sometimes these things get changed by maybe not evil, but certainly incompetent, registrars). Adding in +short will also strip out the boilerplate surrounding the response.

This one will show you the “delegation path from the root name servers”:

dig +trace chrissalzman.com

And this is great for reverse DNS lookups:

dig -x 1.2.3.4

A non-command line bonus tip: whatsmydns.net

After you make a change to your host records it can take a while for it to filter out across the internet. For checking to see the status of that change around the globe I like using whatsmydns.net. They have servers around the world that do an host name check and return the results.

This is also a very useful tool to see if your name server is using multiple IP addresses for your host records. Oftentimes if you use a forwarding service or have a parking page put up you’ll run into this.

Any others?

If I missed something you use day to day, please share!

Posted in y

CSS Grid is Good

Posted on by chris

The short version of this post is that CSS Grid has me excited about the prospects of web layouts again. From here on if I have the option to use CSS Grid I’ll be using it. Go to Rachel Andrew’s fantastic Grid By Example site and do some examples.

Longer Version

This all kicked off when a friend shared this talk by Marten Rand-Hendriksen about CSS Grid:

It had me hooked for the full 30 odd minutes. It’s rare for a conference talk to grab me enough actually try something, but I opened my text editor immediately after watching it. If video isn’t your thing, here’s his slides.

There’s a lot of reasons why I think that styling on the web is hard for people. Mostly it comes down to a question of mental models. Folks who are learning naturally think that CSS will be able to easily do something it can’t. If you’ve ever watched someone try to put two columns side by side or center something you’ve seen this firsthand. I’d argue that CSS Grid’s primary strength is that it closely fits the mental model most poeple are already trying to apply to web layouts. They want to draw boxes and put them next to or on top of each other. CSS Grid allows you to go from low fidelity to sketch to working version in a more intiuitive way.

That’s very powerful and I’m excited to see what emerges from it.

Semantic Markup Tho

Ease of coding is one thing, but grid also makes it far easier to separate the semantic markup of a page from the visual styling. Your templates don’t need to be strewn about with div’s to make it all work. Instead you piece the page together semantically and then visually it can match your…well, your vision.

The Basic “A-ha!” Example

I’d recommend working through this basic example yourself. Pick your classic website template: a header, two columns left to right, and a footer. This is difficult–although not impossible–to pull off without grid and shockingly easy to pull off with grid. I’m still a bit stunned at how minimal the css is to make it work even responsively.

You really should go do it yourselves. Here’s a working solution. And here’s a gist of the code.

Note: you don’t actually need the line grid-template-columns:1fr 1fr; if all of your columns are going to be the same width as they are in this example. I find it’s better to be explicit though because future you needs all the help they can get.

A Few Things That Caught Me Up

Here are a few issues I ran into. Putting them here in hopes you don’t also make my mistakes:

Don’t Forget Your Display

Just don’t forget this line in your css on the main parent grid element or you will be sad for 45 minutes wondering why nothing was working:

display:grid;

Get your grid numbers straight

Off by one errors are easy to run into. The grid designations start with “1” on the far left and end with one more than whatever you’ve designated for your columns.

So if you’ve done this, as I did:

grid-template-columns: 1fr 1fr;

And you want something to span the width of the grid you need to set it to the following:

grid-column: 1 / 3;

That will go from the left edge to the right edge. To me it made more sense to do “1 / 2” (“the first box to the last one, of course…?”), this is actually how Microsoft did it for the initial spec. There are good reasons to get away from this, but it’s not as intuitive to me.

Firefox is Good

Firefox has a grid inspector built into the dev tools. Navigate to the element that has display: grid on it and click on the little grid icon to toggle it on.

Super useful for seeing how it’s all fitting together.

Draw it Out

If you’re having issues with getting it all aligned I found it useful to roughly draw out the layout(s) and put boxes around discrete chunks. It helps to visualize your intended output. Code is great, designing using code is not.

Is it supported everywhere? What about IE?

Edge has full support as do the other major browsers and mobile devices. IE 11 has support with a prefix for an older spec.

You should be designing with progressive enhancement on the mind though. I liked what Rand-Hendriksen had to say in his talk about this: “Accessible mobile-first layouts work well on all screen widths”. You can deliver the “mobile experience” to users whose browser’s don’t support the latest and greatest fancy specs and it’s probably fine.

Rachel Andrew is the expert on all of this. She has a great blog post on the pros and cons of trying to use it in IE:

https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

The good news is that the IE implementation is pretty much frozen in time between IE10, 11 and current versions of Edge (presumably until Edge updates to the new specification). So work you do to implement grid in IE should work in those versions without needing to do different things for different IEs.

Do remember that Edge is now “the” browser for Windows 10 and beyond. It’d been a few years since I took a look at the browser marketshare and it was englightening: Chrome is very much in the lead these days.

Special Thanks

Thanks to Sam Firke for moral support and editorial comments on this post!

A2 Local Politics: In Which I Link to a Sports Blog

Posted on by chris

A2 local politics filter: I really liked this piece by MGoBlog about the upcoming election.

Been thinking about this quote for the past day:

“Denying the fact that Ann Arbor will change with weak appeals to parking, traffic, and floodplain development is pure NIMBYism and should be rejected out of hand. Keeping Ann Arbor “funky” or “unique,” which seems to be the main goal cited by development opponents, is 1) impossible and 2) detrimental to everyone in the community who isn’t already locked into a mortgage they intend to keep until they die.”

We’ve been in A2 for 8ish years now (I really need to do the math on that). I’ve said goodbye to A LOT of people who would have loved, or at least liked, to settle down here, but it just doesn’t make financial sense. The only way out of that is to build more places for people to live (or to make it unattractive to investors looking to diversify their investments by buying up single family homes, but good luck defending that position (shout out to my landlord friends! I don’t hold this against you and would do the same if we had the capital!)).

Unless, of course, you don’t want new people to settle down here. If that’s the plan, well, yeah, don’t do a thing to anything.

My wife and I were able to buy in because of generational wealth, two steady incomes, and a willingness to put in sweat equity. Yes, it’d be easier money-wise if we didn’t have a kid. I’d like to think that “raising future consumers and citizens” shouldn’t preclude home ownership though. If prices continue trending upwards as quickly as they are we wouldn’t be able to afford to be within the city limits in a few years.

Anyway, long-winded and not very concise way of saying I’m voting for Ackerman for Ward 3 because he’s pro-development. My political stance these days is that we should so many buildings that you wonder how in the world so many buildings could be built at the same time.

Fitting a Stove in a 2003 Honda CRV

Posted on by chris

Yes, a standard issue stove (or an oven or a range depending on what you want to call it) can fit in a 2nd Generation 2003 Honda CRV if you put the seats down and finagle it a bit.

If your car is somehow magically clean too you could probably put the seats all the way up and not have to finagle as much. You might even be able to keep the left passenger seat up, although I wouldn’t count on it.

Inside the Car
Hatch Open

I do not have a 2002, 2004, 2005, or 2006 CRV to test this on, but I’m pretty sure it’ll fit in those too.