Jump to Navigation Menu

Weeknotes 22:20

Posted 7 days ago

Week of July 24-30

Milestone

I hit a milestone with the Kauffman Real World Learning project this week. I finished the initial development on the site. All of the pages of the site have been built. Now I will go back and fix some QA issues and polish things up.

I have mixed feelings. I have enjoyed working on this project and feel knee-deep in it so it is strange to see it winding down. But I am also excited that the client will have a brand new site that will hopefully serve their audience. We also have a contract in place to do future work so I am excited about the possibilities of improving the site in the future.

Control

One of the articles that I read this week was by Jeremy Keith. Jeremy mused about why developers would choose elements other than native HTML elements in their code. His conclusion is that is about control, the desire to have more control over how the element looks or functions.

“But I don’t think it’s a great mindset for the web. The web is filled with uncertainties—browsers, devices, networks. You can’t possibly account for all of the possible variations. On the web, you have to relinquish some control.”

Recently, I have been considering how I have been resistant to the use of newer CSS layout techniques which allow for greater flexibility of content. The biggest reason for my hesitation is giving up control. I want to have greater control over how certain elements like typography or grid columns grow as the screen size gets wider. Stephanie Eckels has been talking about a lot of these new methods and recently did an online Smashing workshop.

I decided to let go of some control and use intrinsically responsive columns in my CSS grid layout. I set a minimum size of the columns and let the grid grow instead of using media queries to add columns as the screen goes wider.

One thing I learned in the process is that you have to be careful on mobile screens when your defined minimum width is wider than the viewport. So I ended up having to add a media query to define my columns.

I also learned that Chrome does not like viewport units in media queries. I am using vw units for the padding so my media query included a calc function with my minimum width plus the padding.

In the future, I would like to try using clamp with my typography to create more flexible layouts.

Container queries

I found a great use for container queries within my flexible grid. The design calls for a card with an icon with a solid background behind it on the left and text content to the right. For larger screens, I used Flexbox to achieve the layout inside the card. But as the screen shrinks, I want to give more space to the text content and came up with a design where the flex-direction is a column instead of a row so that the icon is on top of the text content. I ended up using that layout for mobile screens.

Vertical or flex-direction: column layout on left, and horizontal or flex-direction: row layout on the right

I really wish that container queries were ready to use today because I would like to use the column layout if the container is less than 420 pixels wide and the row layout when there is more space.

I decided to go ahead and use feature queries to check for support of container queries and added the container query code into my CSS. I cannot get my flexible layout now but sometime in the future, the container query solution will be applied once browsers support it. The great thing is that I can use Chrome Canary to build and test the container query solution.

I implemented my first CSS Grid solution using feature queries a couple of months before Grid support landed in browsers so I am glad that I found a use case that I could put a solution in place that will enhance it once container query support is available.

Articles I read

Videos I watched

I learned about isolation in Kevin’s course CSS Demystified and use it quite often to create positioning contexts like some of his examples in the video. I used counters quite frequently in the past. I have just started using :markers. And I have been using the ch unit for quite awhile.

I found out that CSS Grid is more performant than Flexbox.

What I watched

  • The Mitchells versus the Machines (Netflix) – Our whole family enjoyed this one.
  • CSI: Miami and NCIS: New Orleans (ion Mystery)
  • The Bernie Mac Show (Peacock)

Books I read

What I played

  • MLB The Show 21 (Braves) – I won three straight elimination games (played 2 of those games this week) to come back and win the NL Division Series against the Cardinals. In the final game of the series, Dansby Swanson had 2 two-run homers that helped put me over the top. At the end of the week, I started playing the NL Championship Series against the Giants and took the first two games at home.

Comment on this post