Weeknotes 19:07

June 22, 2019

Week of June 16-22

I started the week out with a couple of days off. It was really nice to get some space between me and an animation project that I have been working on for the last 3 weeks. It is one of those projects where I feel like I fix one thing only to have something else pop up.

Surprisingly, I had trouble finding a GIF to post to express how I felt. My daughter mentioned one of the opening scenes from The Last Jedi where BB-8 is trying to fix “holes” in the electronics but I could not find a GIF that anyone had made of that. I did finally find a GIF of the squirrel in one of the Ice Age movies.

The animation project is coming along. It is my second project to use ScrollMagic and GreenSock.

Ship It

I shipped a project on Friday. I created a new page for the Sharing Solutions site that I worked on earlier this year. I learned some new things about filtering using Javascript. It was also a nice project to work on alongside the animation project.

National Tour page I built for sharingsolutions.us in WordPress

Solving CSS Grid Problem

One of the ways I grow in my knowledge of CSS Grid Layout is by looking at questions that others posts on Rachel Andrew’s Ask Me Anything about CSS Grid. I like to take a look at issues that people are raising and try to come up with a solution. And then I will address the issue on that forum.

By default, Grid Layout auto-flows by rows. So to define a grid, we need to declare the number of columns that we want the items to flow through. You can also change the auto-flow from the default of grid-autoflow-rows to grid-autoflow-columns. But in order to do that, you have to define the number of rows for the grid.

The problem posted on the site was that the total number of items to go in the grid was unknown. My guess is that the content was coming from a Content Management System or the content had not been finalized by the client. A very typical real-life problem. The developer wanted the content displayed in 3 columns. But in order to use grid-autoflow-columns you need to define some rows, which is unknown because the amount of content is not yet set. You have to define some rows so that the browser knows the limits of a column. Another solution to the layout desired would have been to use CSS Multi-columns to layout the content. But the developer wanted the alignment from using tracks with Grid layout.

A combination of a CSS variable to define the number of rows in the Grid alongside Javascript can provide a solution to this problem. Bu defining the number of columns you want in the script, the script can do the math to determine how many rows you need. The script then updates the CSS variable to define number of rows. You could also use Multi-column as a fallback in case Javascript is not available or CSS Grid is not supported.

A New Chapter at LGND

In December, I joined the talented team at LGND. Since then, our team has almost doubled and we added an in-house video team. This past week, LGND updated our site to showcase our new in-house capabilities along with our growing team.

What I Watched

This was an unusual week in that I watched several conference videos. I normally will save videos in Pocket and then never come back to them because once I am off my computer at night, I usually don’t want to engage with videos related to my profession.

This week I took advantage of lunch hours and time that I was waiting for my daughter while she was in her ballet class.

The World-Wide Work – Ethan Marcotte

This is a very sobering talk. It got me thinking more about my responsibility to making sites accessible to everyone. I confess that I sometimes let tight deadlines and laziness (probably more of the latter) distract me from taking the time to make sure my use of JavaScript is done in a way that does not interfere with someone being able to access the content.

Refactoring (the way we talk about) CSS – Rachel Andrew

This is a great talk and much needed. We need to rethink the way we talk about and think about CSS. Especially as we seek to pass along our knowledge to those newer to the industry or just starting out. I really like how Rachel points us back to the basics of understanding what CSS does by default and understanding its design.

Hello Subgrid! – Rachel Andrew

I am very excited about subgrid. I have already played around with it a bit with Firefox Nightly. I was addressing a use-case that she talks about it the video, card layout and alignment across those cards.

Here is the Codepen I created. You have to viewed it in Firefox Nightly to see subgrid in action.

Other things I watched

  • Been watching Frasier with my wife on Netflix.
  • Watched the first episode of Endeavor: Season 6 on the PBS app through our PS4

Articles I Read this week

Having a couple of days off at the beginning of the week gave me a bit more time to catch up on some reading.

Books

I started reading Inclusive Design Patterns last night. I had started reading it when it came out. I put it down and didn’t get back to it. Watching Ethan’s talk earlier in the week got me thinking more about the need to think about accessibility and how I can do a better job of making it a regular part of my practice.

I finished reading Art Direction for the Web a couple of weeks ago. Very inspiring. I would love to take some time and create some layouts using techniques Andy highlighted in the book.

Comments are closed.