Scott O'Hara · <name>Scott O'Hara</name> · Jan 31, 2023
You may be familiar with ChatGPT. But if you’re not, it’s a very cool chat interface using artificial intelligence to provide human-like responses to the questions you ask it. It is, however, still rather new and depending on what you ask it… well… As the FAQ for ChatGPT explains:
EightShapes · Dan Brown · Jan 27, 2023
Expositions, Illustrations, and Annotations to Scott Kubie’s 21 Small Thoughts on IA Scott Kubie wrote 21 thoughts on information architecture, perhaps because he’s too modest to call them truths about information architecture. Scott’s methodical approach to understanding and explaining information architecture appeal.
Manuel Matuzovic · Jan 27, 2023
Rules within a container query only apply to descendants of that container. If you write a media query and you put rules in the media block, the rules apply to the entire document. Apply rules @media (min-width: 1024px) { * { outline: 4px solid } } @media (min-width: 1024px) { .demo1, .demo1 * { outline: 4px solid } }.
Scott O'Hara · <name>Scott O'Hara</name> · Jan 26, 2023
Today, the HTML specification landed a very important change to the dialog element. One that resolves a multi-year discussion on how the dialog element should handle initial focus.
GOV.UK User Research · <name>Paloma Jain</name> · Jan 16, 2023
Good communication with participants is a foundation of user research. But how can you get meaningful insights when communicating isn't straightforward.
Manuel Matuzovic · Jan 12, 2023
You can use the @supports rule to check whether a browser supports a specified font technology or font format. font-tech() @supports font-tech(palettes) { .palette { display: block; } } @supports not font-tech(incremental) { .incremental { display: block; } } @supports font-format(woff2) { .woff { display: block; } }.
Manuel Matuzovic · Jan 9, 2023
You can use the override-colors property to override colors in a font palette. Color fonts come with one or more predefined color palettes. You can select them by using the font-palette property. You can also define your own color palettes or change specific colors in a palette using the override-colors property. @fon.
Manuel Matuzovic · Jan 6, 2023
Apparently, multicolored typefaces on the web are a thing. You can use and modify them in CSS. @font-face { font-family: 'Rocher'; src: url('/blog/2023/100daysof-day76/RocherColorGX.woff2'); } @font-palette-values --pink { font-family: 'Rocher'; base-palette: 1; } @font-palette-values --green { font-family: 'Rocher';.
Manuel Matuzovic · Jan 3, 2023
If you’re creating a masonry layout, the packing algorithm puts items into the column with the most space by default. This can cause accessibility issues. The masonry-auto-flow property gives us control over the automatic placement of items in a masonry layout. In the following layout, you can see how the tile for “Da.
Manuel Matuzovic · Dec 29, 2022
In a media query, it’s obvious what width means. It always refers to the width of the viewport. With size container queries it’s not that obvious. /* Kicks in when the viewport has a minimum width of 500px */ @media (min-width: 500px) { body { background-color: hotpink; } } width in a size container query queries the.
Manuel Matuzovic · Dec 23, 2022
Relative units used in container queries work differently than relative units in media queries. If you use em in a media query, the font-size of the , , or any other element on the page doesn't matter. That's because relative length units in media queries are based on the initial value , which means that units are nev.
A List Apart · by <a itemprop="url" class="author" rel="author" href="https://alistapart.com/author/colineagan/">Colin Eagan</a>, <a itemprop="url" class="author" rel="author" href="https://alistapart.com/author/jeffmacintyre/">Jeffrey MacIntyre</a> · Dec 8, 2022
As a UX professional in today’s data-driven landscape, it’s increasingly likely that you’ve been asked to design a personalized digital experience, whether it’s a public website, user portal, or native application. Yet while there continues to be no shortage of marketing hype around personalization platforms, we still.
EightShapes · Nathan Curtis · Nov 26, 2022
Notes from design token projects, from audits to implementation Design token dreams have turned to reality across most design systems. Yet some teams now see a years-old inventory as out of step with how naming design tokens has evolved. Others lack alignment across outputs and continue the struggle with libraries and.
Manuel Matuzovic · Nov 21, 2022
Let’s say you want to swap the background image of an element based on a certain condition, like whether it’s pressed, using custom properties. button { --background-image: "/not-pressed.svg"; background: url(var(--background-image)); } button[aria-pressed="true"] { --background-image: "/pressed.svg"; } This looks fin.
Heydon Pickering · Nov 18, 2022
Material Design · Nov 8, 2022
Six strategies for making your data visualization accessible, scalable, and helpful
Scott O'Hara · <name>Scott O'Hara</name> · Nov 7, 2022
Like it or not, even though content can be made to adapt to different viewport sizes and zoom levels by use of CSS media queries, sometimes the end result can be a bit awkward without further adjustments that go beyond visual presentation.
Manuel Matuzovic · Nov 1, 2022
Adjustable features of a variable font are called axes. You can use the font-variations-settings property to change these features by specifying the four letter axis name along with a value. @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/blog/.
Material Design · Oct 24, 2022
Design, code, and tools: everything new in Material at this year’s ADS
Material Design · Oct 20, 2022
with Material Design 3 shape guidance and improved a11y