June 22, 2019
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.
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-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 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
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.
- The CSS Mindset
- CSS Scroll Snap Updated in Firefox 68
- How to Section Your HTML
- How the dad joke was born and why it’ll never go out of style
- What Really Happened to Malaysia’s Missing Airplane
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.