!Who gets the job?https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/01/jobbs.png?ssl=1 In 2019, Chris Coyier wrote The Great Dividehttps://css-tricks.com/the-great-divide/ where he discusses the differences between different types of front end developers. This post will explore the great divide: what is it, are we still experiencing it, what makes the issue more complicated than what we think and where to go from where we're at right now. What is the great divide? In this context the divide refers to people who have the same job title, front end developer but with very different skill sets. Paraphrasing Chris' articlehttps://css-tricks.com/the-great-divide/: On one hand, we have a group of developers whose...
In episode 629 of Shoptalkhttps://shoptalkshow.com/629/ Davehttps://x.com/davatron5000 and Chrishttps://x.com/chriscoyier had an interesting discussion about Design ain’t a democracyhttps://robinrendle.com/notes/design-aint-a-democracy/ an article by Robin Rendle, published in July 2024 and Miriam Suzanne's We don’t need a boss, we need a processhttps://www.miriamsuzanne.com/2024/08/08/vision repsponse. Whenever I think of the concept of a dictator in a software development community I think about Guido van Rossum, the BDFLhttps://en.wikipedia.org/wiki/Benevolentdictatorforlife Benevolent Dictator For Life in the Python world the fact that Guido stepped down from his BDFL positionhttps://lwn.net/Articles/759654/ is only partially relevant for the purpose of this post since a steering council took over the jobs of the position....
In macOS we have a few disadvantages when it comes to software version management. The good thing is that macOS developer tools do come with versions of Python and other software bundled as part of the X-Code comand line tools. The bad part is that those versions are not updated often and we can't update them manually. If you want to update Python, for example, you must do it manually, or use a package manager like Homebrewhttps://brew.sh/. However, Homebrew presents a different set of problems. The specific case is this: I installed Jupyterhttps://jupyter.org/ via Homebrew. That worked without problems. I...
Javascript has access to the conditional CSS tools that we have to work when working directly with CSS. This post will cover matchMedia script support for media queries and CSS.Supports programmatic access to CSS' @supports at-rule. We will also discuss some reasons why would you want to use these Javascript functions rather than doing it straight in CSS. When working with CSS in JS, you can leverage these methods as one-time events or inside a changehttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/changeevent event listeners to trigger new tests if the media query matches or not when building interactive web content or we're not certain of what...
The PageVisibility API lets your application know when a page is visible to the user. While this information may seem irrelevant it enables the creation of Web pages that behave differently when they are not being viewed. For example: You can throttle or pause data-intensive activities like data updates when the page is not visible You can pause video/audio content until the user displays the page again You can choose to have your application display notifications to the user only when the tab/window is hidden from view You can choose to pause animations and automatic actions like carrousel navigations until...
What browsers should we support? This is an interesting question: What browsers should we support? This is a deceptively simple question to ask and even harder to answer. This post will try to address this question along with different ways to address browser support issues. Why browser versions don't work We used to say that supporting the last two versions of major browsers was enough to cover our bases. But that is not enough. Unlike the times of monolithic, month-long development cycles, browsers are updated monthly and may or may not contain all the latest CSS and Javascript features. The...
Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to have this post as a reference. Explicit positioning With the following HTML: html 01 02 03 04 05 06 07 08 09 10 This CSS lays out the grid with six equal columns; it repeats the 1frhttps://css-tricks.com/introduction-fr-css-unit/ value 6 times when defining the columns with grid-template-columns. css .container { width: 60vw; inline-size: 60vw; display: grid; grid-template-columns: repeat6, 1fr;...
We can control the color schemes for light and dark modes through CSS using the prefers-color-scheme media query. These media queries will match the system's color scheme and will allow us to select what colors to use when on each mode. The two possible values for prefers-color-scheme are: light and dark. In the first example below, the default is the light color scheme so we define a dark color scheme inside the media query. css { background: oklch85.05% 0.049 84.53; color: oklch40.9% 0.105 43.91; } @media prefers-color-scheme: dark { { background: oklch47.78% 0.067 65.07; color: oklch85.46% 0.03 67.41; outline: 5px...
New properties and functions will enable you to animate properties that, until now, were not animatable. We'll look at the following properties: transition-behavior calc-size @starting-style used to: Change the height of an element from 0 to auto Change the value of display from none to block The code These are the properties we'll use for these examples. transition-behavior The transition-behavior property specifies whether transitions will be started for properties whose animation behavior is discretehttps://developer.mozilla.org/en-US/docs/Web/CSS/transition-behaviorexamples. Discrete properties' values are not additive, and interpolation swaps from the start value to the end value at 50%. Specifically, denoting p as the progress value:...
There are four properties that I've always been curious and confused about: initial inherit unset revert These values are specified in the Values and Units Module Level 4https://drafts.csswg.org/css-values-4/textual-values specification. Resetting a Property: the initial keyword The initial keyword applies the property's default value to an element. It can be applied to any property, including the all shorthand property. With the property set to initial, all properties can be restored to their respective initial values in one go instead of restoring each one separately. css .demo { all: initial; } The initial value for inherited properties may be unexpected. You should...
