These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.
This looks like an excellent, accessible starting point for the priority navigation pattern:
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.
There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website…
We agreed it should be a one-liner because the amount of tab items is unknown and narrowed our options down to two: horizontal scroll and adaptive with “more” button. Firstly, the problem with the former one is that horizontal scroll as a feature is not always visually obvious for users (especially for narrow elements like tabs) whereas what else can be more obvious than a button (“more”), right? Secondly, scrolling horizontally using a mouse-controlled device isn’t a very comfortable thing to do, so we might need to make our UI more complex with additional arrow buttons. All considered, we ended up choosing the later option[.]
media attribute on a
<link> element seems the next best thing. Andy Kirk has come up with a few combinations:
Code language: HTML
<!-- Print (Edge doesn't apply to print otherwise) IE 10, 11 Edge Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+ FF 29+ --> <link rel="stylesheet" href="your-stylesheet.css" media=" only print, only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active), only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none), only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0), only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) "> <!-- Print (Edge doesn't apply to print otherwise) Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+ FF 47+ --> <link rel="stylesheet" href="your-stylesheet.css" media=" only print, only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none), only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen) ">
See also: Cutting the mustard with only CSS
This excellent video by Physics Girl breaks down some of the misconceptions about what we programmers actually do and why we do what we do, with a focus on women and femme people in the field. I could relate especially to the discussion about it being very much about enjoying problem solving.
Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.
Stencil takes features such as
- Virtual DOM
- Async rendering (inspired by React Fiber)
- Reactive data-binding
and then generates standards-based Web Components with these features baked in.
There’s something appealing about the roundness of this font, especially at heavier weights.