@cirrus@mstdn.social
@cirrus@mstdn.social avatar

cirrus

@cirrus@mstdn.social

#DesignSystems aficionado. Classically trained #webmaster. Slayer of pixels. DTCG spec editor.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

cirrus, to random
@cirrus@mstdn.social avatar

Nice summary by @donnie of some of the #DesignTokens formats that are currently out there: https://blog.damato.design/posts/spicy-specifications/

FWIW, an analogy the #DTCG editors have used in the past is vector graphics formats:

The #DTCG format aims to be to tokens what SVG is to vector graphics. Standardised, widely supported as an import/export format and (somewhat) human editable.

However, lots of design tools also have their own, proprietary formats - e.g. Illustrator has .ai files. These may have additional...

Robb, to random
@Robb@front-end.social avatar

Has anyone else noticed that what is considered shippable code has absolutely tanked lately? My phone provider's newly launched website is totally unusable. 50% of the time my energy company's site can't retrieve my data. Even big name stuff like the YouTube app routinely loses sound and needs a restart.

I feel like I'll often have to argue the case why a modern, fluid website being off by 1px isn't an issue and yet somehow people are getting this shit past QA?

cirrus,
@cirrus@mstdn.social avatar

@Robb So. Much. This!

cirrus, to random
@cirrus@mstdn.social avatar

Current status: Deriving a mini #DesignSystem from a #DesignSystem site.

cirrus, to random
@cirrus@mstdn.social avatar

It was waaaay overdue, but I finally updated the Universal Design Tokens (UDT) website to explain what my current ambitions for it are: https://udt.design/

#DesignTokens #DesignSystems

Olliew, to random

@cirrus is there much difference between design tokens CLI and Universal Design Tokens?

cirrus,
@cirrus@mstdn.social avatar

@Olliew Design Tokens CLI (I assume you mean this one https://github.com/Heydon/design-tokens-cli) is a translation tool that reads DTCG files and exports the tokens as code (CSS, Sass, JS, etc.). StyleDictionary (https://amzn.github.io/style-dictionary) and Cobalt UI (https://cobalt-ui.pages.dev/) are alternative tools that do the same kind of thing.

UDT (https://github.com/universal-design-tokens/udt) on the other hand aims to provide a suite of libraries that handle parsing, manipulating and...

cirrus,
@cirrus@mstdn.social avatar

@Olliew ...serializing design tokens in the DTCG format. The idea is that developers can use those libs to build tools like Design Tokens CLI - or anything else that wants to read/write DTCG files - more easily.

I should add that UDT is very much a hobby project of mine that I tinker with here and there, but is still quite a way off being production ready.

cirrus, to random
@cirrus@mstdn.social avatar

I wish YouTube had an option to filter out all those fan-made, fake movie trailers.

Sure, some are quite cleverly cut together. But when I'm just trying to find a legit film trailer (or checking to see of one exists), I'd love not to have to wade through so many fakes.

cirrus, to random
@cirrus@mstdn.social avatar

Today I wrote some React code that loads a copy of jQuery. I feel so dirty!

(For the curious amongst you: lt's to load a Jira issue collector form within a Gatsby site using a custom trigger. I really wish Jira issue collectors were also available as a standalone page on the Jira instance that I could just link to. Would have been much easier and not forced as much JS code onto users)

cirrus, to random
@cirrus@mstdn.social avatar

Despite frequently seeing code snippets that evoque a "WTF were they thinking?!" reaction, I quite enjoy refactoring and tidying up "old" code.

cirrus,
@cirrus@mstdn.social avatar

...and, to be fair, that knee-jerk "WTF?!" reaction is sometimes followed half an hour later by an "oooohh... now I see why they had to do that weird-ass thing".

Sometimes things are genuinely daft though!

heydon, to random
@heydon@front-end.social avatar

📝 Functional Documentation https://heydonworks.com/article/functional-documentation/

I've been thinking a lot about ways to make documentation more DRY/modular/functional. What are some ways you do this? I can add some notes to the end.

cirrus,
@cirrus@mstdn.social avatar

@heydon Excellent stuff! We're in the process of building out a DS docs site and I'd love to incorporate some of those ideas. Already have a lot of other necessary stuff on our backlog though, so making our content more modular and functional will likely need to come further down the road.

ilpeach, to random

I'm starting a new project with @eleventy and I'm looking into a good SASS/CSS component library: being able to put together a page should be easy enough (classless and semantic should be the prio), but should allow me a good level of customisation. Any hints? I got people suggesting me tailwind, I've just discarded Bulma (since it's heavily class-based).

cirrus,
@cirrus@mstdn.social avatar

@ilpeach Gravity? 😜

Kidding aside, forking and reviving it might not be a bad idea...

cirrus, to webdev
@cirrus@mstdn.social avatar

Curious if there are #ProgressiveEnhancent approaches people are using to recent #CSS features like cascade layers, nesting and proposed ones like scope.

I get that older browsers will just ignore @ rules they don't support and you can probably feature detect some of this via supports.

But, these aren't new properties for adding some optional visual flourish. These fundamentally alter how you organise your CSS code.

I struggle to see how one might use them in a way that there's enough...

cirrus,
@cirrus@mstdn.social avatar

...not layered, not nested and/or unscoped CSS rules to provide an adequate fallback experience to users stuck on old browsers/devices.

So, would love to hear tips or see examples of how people are tackling that.

keithjgrant, to programming
@keithjgrant@front-end.social avatar

Why is @scope different than Shadow DOM? There are a number of similarities, but a couple things make @scope different:

  • it's more lightweight, so it's easy to sprinkle onto the page where Shadow DOM would be overkill
  • it allows for multiple scopes to overlap and provides control over styles when they do
  • it offers fine-grained control over which styles do or do not reach from an outer scope into an inner one

#css #webdev #ScopedCSS

https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

cirrus,
@cirrus@mstdn.social avatar

@keithjgrant Wow! This looks so useful! I really hope Firefox & Safari back it and make this a thing! 🤞

ilpeach, to random

choosing a specific technology/library/framework without knowing what you're going to build is going to impact you in many different ways. It's always good to start from the product definition, your personas and your UX to understand your use cases and applications, together with product vision and mission. This will lead to more lean and productive approaches, short and long term.

cirrus,
@cirrus@mstdn.social avatar

@ilpeach Are you sure? I heard some 10x developer said this is the stack to use in 2023:

  • TailfartCSS v23
  • Erotion v3 CSS-in-TS-in-XML framework
  • NextNextJS v42
  • Redact v19
  • GruffQL backed by a NoDB SQL DB
  • De-Oh-no runtime

...and it must be in a monorepo and deployed as a containterized microservices.

Makes building those 3 page marketing sites and absolute breeze!

cirrus,
@cirrus@mstdn.social avatar

@ilpeach LOL. Yeah, your users love it when the tech stack is rewritten. They really appreciate the value it adds for them!

cirrus, to random
@cirrus@mstdn.social avatar

Personal life's super hectic at the moment, so I have (even) less time than usual to spend on stuff like the Community Group (DTCG) spec (https://tr.designtokens.org/format/), Universal Design Tokens (https://github.com/universal-design-tokens/udt/) and massive backlog of things I want to blog or do talks about. If you're following or interested in any of those things, your patience is much appreciated!

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • anitta
  • InstantRegret
  • mdbf
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • osvaldo12
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • tacticalgear
  • ethstaker
  • provamag3
  • cisconetworking
  • tester
  • GTA5RPClips
  • cubers
  • everett
  • modclub
  • megavids
  • normalnudes
  • Leos
  • lostlight
  • All magazines
    •