August 2, 2022
Week of July 24-30
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.
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.
In the future, I would like to try using
clamp with my typography to create more flexible layouts.
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.
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.
Articles I read
- Level Up Your Headings Game
- The Unstuck Meeting: A safe failure space
- Logical Properties for Useful Shorthands – A short and practical article from Michelle Barker.
- Powerful Image Optimization Tools – One of those articles I scan and bookmark knowing I will need to reference it in the future.
- #32 almost a proper close button – Another good lesson from HTML Hell
- <article> vs. <section>: How To Choose The Right One – The article brings a little more clarity on choosing between these semantic elements.
- Recreating MDN’s Truncated Text Effect
- Cloud-work vs. Land-work – Dave Rupert considers an innovative way to frame job types.
- Individual climate action: small steps matter
- Fantastic CSS border animation – I would like to try the animated gradients solution in a future project.
- Maintenance Matters
- Rethinking Device Emulation in browsers – Looking forward to seeing where this idea goes.
- With :focus-visible, you can have focus styles when it makes sense – I have started using :focus-visible in my projects
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.