How (and why) to use shadow DOM, now that the declarative syntax is here.

https://www.youtube.com/watch?v=8Z8H2NEbLtE

shadow DOM has lower precedence than regular styles

(X, Y, Z)
#id, classes and attrs, elements

[id="myid"] is (0,1,0) not (1,0,0)!

You can duplicate classes to increase specificity! (0, 4, 0)
.button.button.button.button
or
.button {
&&& {
}
}

is( .button, #hammertime )
.button:not(#id1#id2) -> "impossible" because two IDs, (2, 0, 0)!

Decreasing specificity

:where( .button) -> (0,0,0)

** Very useful for css reset!
input:where([type="checkbox"])

17:55 - meta keyword in sass

** Might need to use !important in layers (dialog: display:none)

OpenFreeMap – Open-Source Map Hosting lets you display custom maps on your website and apps for free.

Who is behind this project and how can I follow it?
I’m Zsolt Ero (blog, email).

After 9 years of running my own map tile infrastructure for MapHub, I’ve open-sourced it and launched OpenFreeMap.

X: @hyperknot (for details)
X: @OpenFreeMapOrg (for announcements)

GitHub: openfreemap and openfreemap-styles

Little relatively unknown fact, if you have an id attribute on an element, you can reference it in this way:

<button id="yo">…</button>

yo.onclick = ...

Furthermore, child elements with a name attribute can be referenced in this way:

<form id="x"> 
  <input name="em"> 
</form>

x.em.onclick = ...

A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.

Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.

What it takes to craft great animations.

• Great animations feel natural
• Great animations are fast
• Great animations have a purpose
• Great animations are interruptible

So you think you know box shadows huh? I bet you didn't know they could do this.

About a year ago at Wix, we abruptly realized that, too often, we were not giving users the answers to these questions. When we got this wake-up call, we felt compelled to act swiftly, and not just to address the one error message that woke us up.

This is an example of a bad error message. It uses an inappropriate tone, passes the blame, speaks in technical jargon and is too generic.

https://medium.com/deliveroo-design/how-to-write-any-error-message-7a3348cce594

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

I get asked this question often, and my answer is always the same: Use SVG if you can! I have nothing against SVG. It’s just another approach for creating shapes using another syntax with another set of considerations. If SVG was my expertise, then I would be writing about that instead!

The text will be off! Even though rectangles are perfectly centered.
But even if font can have its metrics unbalanced, it doesn’t mean it does. What happens in reality?
In reality, most of the popular fonts have metrics slightly off. Many have it significantly off:

🎨 Curated collection of 93 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.

Five tips to design a convincing sales page by better using typography.

Visual Focus

Accessibility is for everyone. I like using keyboard navigation to tab through interactive elements. Sadly I’ve lost count of how many clients have asked me to “remove that ugly border” around focused buttons.

Button focus state can be improved with two tricks:

.button {
  &:focus-visible {
    outline: 2px solid magenta;
    outline-offset: 2px;
  }
}

First, I replace the default focus pseudo-class with focus-visible. MDN has a long section on focus vs focus-visible. Basically it’s what the original should have been in hindsight.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible

Second, I use outline-offset to give some breathing room between the focus ring and the button itself. If the button has a prominent border style the outline would sit flush against it looking like a double border. Adding an offset makes the focus state more visible.

One thing to note is that ::file-selector-button does not get focus, rather the parent input does, so apply styles there.

Bookmarklet creator tool.

An interactive guide on designing better target sizes on the web.

Unsure how to design and implement user-interface patterns? Use this collection of links to our content about specific patterns.

• A Note on Interface Guidelines
• Input Controls
• Forms and Wizards
• Tooltips, Dialogs, Instructional Overlay
• Icons and Indicators
• Menu Design
• Site Navigation Elements
• In-Page Navigation
• Search
• Errors
• Privacy and Ethics

I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined

A faster youtube embed. Contribute to paulirish/lite-youtube-embed development by creating an account on GitHub.