As a self-initiated learner, being able to view source brought to mind the experience of a slow walk through someone elses map.
This ability to observe software makes HTML special to work with.
Liked https://toot.cafe/@slightlyoff/112656920041897216
Alex Russell (@[email protected])
Liked https://typetura.social/@scott/112632899898395667
Scott Kellum :typetura
Liked https://smashingmagazine.com/2024/05/naming-best-practices/
Best Practices For Naming Design Tokens, Components, Variables, And More Smashing Magazine
Naming is hard. As designers and developers, we often struggle finding the right name for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so its difficult to understand what exactly is meant. And sometimes they are too specific, leaving little room for flexibility and re-use.
In this post, we want to get to the bottom of this and explore how we can make naming more straightforward. How do we choose the right names? And which naming conventions work best? Lets take a closer look.
Inspiration For Naming
If youre looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames is a wonderful resource jam-packed with ideas that get you thinking outside the box.
The site provides thematically grouped lists of words perfect for naming. Youll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldnt instantly come to ones mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing.
Naming Conventions
What makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups and components in a consistent and scalable way.
As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and not related to visual properties. He shares dos and donts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components.
Design Tokens Naming Playbook
How do you name and manage design tokens? To enhance your design tokens naming skills, Romina Kavcic created an interactive Design Tokens Naming Playbook. It covers everything from different approaches to naming structure to creating searchable databases, running naming workshops, and automation.
The playbook also features a naming playground where you can play with names simply by dragging and dropping. For more visual examples, also be sure to check out the Figma template. It includes components for all categories, allowing you to experiment with different naming structures.
Flexible Design Token Taxonomy
How to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. The parent company of products such as Mailchimp, Quickbooks, TurboTax, and Mint developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.
Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuits design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed.
Naming Colors
When youre creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobes Spectrum Design System, shares how they master the challenge.
As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.
Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette.
Looking at what other people call similar things is a great way to start when youre struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.
The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components from accordion to visually hidden and also lists other names that the UI components go by. A fantastic resource not only with regards to naming.
Variables Taxonomy Map
A wonderful example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.
The map illustrates four collections required to support the system and connections between tokens from brand and primitives to semantics and pages. It builds on top of Nathan Curtis work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.
If you want to explore more approaches to naming design tokens, Vitaly compiled a list of useful Figma kits and resources that are worth checking out.
Design Token Names Inventory
Romina Kavcic created a handy little resource that is bound to give your design token naming workflow a power boost. The Design Token Names Inventory spreadsheet not only makes it easy to ensure consistent naming but also syncs directly to Figma.
The spreadsheet has a simple structure with four levels to give you a birds-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track and filter your tokens. And while the spreadsheet itself is already a great solution to keep everyone involved on the same page, it plays out its real strength in combination with the Google Spreadsheets plugin or the Kernel plugin. Once installed, the changes you make in the spreadsheet are reflected in Figma. A real timesaver!
Want To Dive Deeper?
We hope these resources will come in handy as you tackle naming. If youd like to dive deeper into design tokens, components, and design systems, we have a few friendly online workshops and SmashingConfs coming up:
Wed be absolutely delighted to welcome you to one of our special Smashing experiences be it online or in person!
Liked https://typetura.social/@scott/112397536211218435
Scott Kellum :typetura
Liked https://adactio.com/links/21109
Web Components from early 2024 οΏ½ Chris Burnell
This is a good description of the appeal of HTML web components:
WC lifecycles are crazy simple: you register the component with
customElements.define
and its off to the races. Just write a class and the browser will take care of elements appearing and disappearing for you, regardless of whether they came from a full reload, a fetch request, orgod forbidadocument.write
. The syntax looks great in markup, too: no more having to decorate withjs-something
classes or data attributes, you just wrap your shit in a custom element calledsomething-controller
and everyone can see what youre up to. Since Im firmly in camp progressively enhance or go home this fits me like a glove, and I also have great hopes for Web Components improving the poor state of pulling in epic dependencies like date pickers or text editors.
The power of interoperability:
Web components wont take web development by storm, or show us the One True Way to build websites. They dont need to dethrone JavaScript frameworks. We probably wont even all learn how to write them!
What web components will do at least, I hope is let us collectively build a rich ecosystem of dynamic components that work with any web stack. No more silos. Thats the web component success story.
Lots of new features landing in Safari, and it’s worth paying attention to the new icon requirements now that websites can be added to the dock:
To provide the best user experience on macOS, supply at least one opaque, full-bleed
maskable
square icon in the web app manifest, either as SVG (any size) or high resolution bitmap (1024�1024).
Here’s the video of the talk I gave in Nuremberg recently.
The `details` element is like the TL;DR of markup.
The World Wide Web is a mashup.
Extending the wheel, instead of reinventing it.
A difference of opinion regarding what the core features of custom elements should be.
A little fix for Safari.
Liked https://mstdn.social/@scottjehl/112300787798181124
Scott Jehl (@[email protected])
Liked https://mstdn.social/@scottjehl/112300670153114942