Tag: css

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don't necessarily change at the same rate or ones that have essentially different rules for how they behave. For example, take this (contrived) grid setup: .grid { display: grid; grid-template-columns: 1fr minmax(50px, 100px) 20% auto; } Each of those columns will behave differently. I'm just wrapping my head about this, and definitely don't fully understand it. Here's what it seems like to me, numbered 1-4 based on the "strength" (I guess?) of the width. .grid { display: grid; grid-template-columns: 1fr /* #4 - Weakest, will fill remaining space */ minmax(50px, 100px) /* #3 - Will only...

A plain-language romp through the trials and tribulations of z-indexby Isabel Brison. On the surface, z-index seems simple. It's a number and it represents what is on top of what... assuming it is positioned... and assuming it is within the same stacking context as the other things. ... that is the gist of it: stacking contexts are caused by a variety of properties and the main reasons for their existence are performance concerns and ease of implementation by browsers. They are not always related to z-index or ordering; they pop up wherever it makes sense to have several elements all on the same layer for rendering purposes. Direct Link to Article — PermalinkThe post Putting things on top of other things appeared first on CSS-Tricks. Source: CSS-tricks.com

You never know where the next Grand Debate™ in front-end is going to come from! Case in point: we just saw one recently based on a little Twitter poll by Max Stoiber in which 57% of people got it wrong. There were reactions ranging from the innocuous hey fun a little brain teaser! to the state of web education is in shambles and beyond.   I heard from a number of folks that they just felt sad that so many people don't know the answer to a fairly simple question. To be fair, it was (intentionally, I'm sure) rather tricky! It wasn't really a question about CSS — it was more about the idea that the order of HTML attributes doesn't matter. It's the order of CSS that does. One extreme response I saw said that front-end stuff like this is needlessly complicated and getting it wrong...

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer? Here's what a few folks have to say on the topic. I’ll argue that front-end developers need to master four different skills. Empathy Code Design Communication Zell Liew Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into account when creating user experiences or making sure that the two disciplines work as one from a development perspective. They become all-rounders, having to understand what is actually happening between the AJAX data and the PHP file that’s sending off a mail or returning errors. Daine Mawer In my opinion, what defines a good front-end developer is one that has skilled knowledge of H...

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer? Here's what a few folks have to say on the topic. I’ll argue that front-end developers need to master four different skills. Empathy Code Design Communication Zell Liew Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into account when creating user experiences or making sure that the two disciplines work as one from a development perspective. They become all-rounders, having to understand what is actually happening between the AJAX data and the PHP file that’s sending off a mail or returning errors. Daine Mawer In my opinion, what defines a good front-end developer is one that has skilled knowledge of H...

If you need an aspect-ratio sized <div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width. But media elements like <img> don't have children. The <video> tag isn't self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don't control. Besides, these are the only two elements that "size to an external resource." So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that's nice. But it also means they don't know the height while they are loading and it may cause performance jank...

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase: We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs. The team explores how using tools like eslint-plugin-jquery discourages developers at GitHub from using jQuery, but the team a...

We've all seen articles like "The Top 5 Ways To Fix Your Sign Up Flow and Get On With Your Life." Articles like this aren't wrong or bad, they are just shallow and a bit junk food-y and BuzzFeed-y. Of course, a designer's actual job is complicated, nuanced, and difficult. But deep dives into all that are far less common. Khoi Vinh has been writing about this and points to some heavy self-reflection from Fabricio Teixeira and Caio Braga, publishers of the very popular UX Collective. It’s clear that the currency of design discourse is really concerned with the “how” of design, not the “why” of it. As Teixeira and Braga write: While designers tend to be skeptical of magic formulas—we’re decidedly suspicious of self-help gurus, magic diets, or miraculous career advice—we have a surprisingly ...