cirrus

cirrus, 6 days ago to random

Due to all the streaming services, we had barely been using our DVDs and BluRays for a long time. So, to free up shelf space, we packed them away into boxes and put them in the loft.

Literally minutes later our broadband provider had an outage. No Netflix / Prime Video / Disney+ 🤦‍♂️

cirrus, 7 days ago to random

In other #DesignTokens news, Sketch recently added a direct export to DTCG files: https://www.sketch.com/updates/design-tokens/ ❤️

As one of the spec editors, I really love seeing support for the DTCG file format ( https://tr.designtokens.org/ ) appearing in tools. The dream of seamless interoperability for design tokens edges a step closer each time.

Have you made a tool / lib / thing that supports the format too? Share it with the community here: https://github.com/design-tokens/community-group/issues/211

cirrus, 7 days ago to random

Our #DesignSystem's #DesignToken pipeline has become more of a hydra...

Figma vars & styles
|
+-> DTCG file
|
+-> CSS custom properties
+-> CSS utility classes
+-> Storybook stories for util classes
+-> TS code
+-> TS interface

...and there's more to come: React Native components, docs, etc.

Also, longterm I want to make Figma an output from the DTCG file (or have some kind of 2 way sync), rather than it being the source.

zachleat, 13 days ago (edited 13 days ago) to random

google.com search results (on a desktop web browser) have a horizontal scrollbar < 1162px viewport width and don’t use responsive design.

Sometimes the biggest web properties in the world make decisions with a completely different set of priorities, goals, budget (etc.) and those decisions wouldn’t make sense to apply to your project (with your own goals, team, and tech stack).

Their best practices are not your best practices!

DavidDarnes, 19 days ago to random

Does anyone have any #WebComponents “gotchas” that they wish they knew when getting into them?

cirrus, 20 days ago to webdev

Started writing a decision log for our #DesignSystem. Documenting why we chose to build plain ol' #HTML and #CSS where we can and #WebComponents where client-side #JS is needed is turning into a bit of a manifesto. Essentially we're using (and encouraging others to use) #ProgressiveEnhancement 😉

cirrus, 26 days ago to random

Spent this afternoon wrangling NPM dependencies in our #DesignSystem's monorepo. Managed to nuke a few and also eliminate all the vulnerable package versions being reported by npm audit.

I am so ready for the weekend!

cirrus, 27 days ago to random

Just prepping a few props for a #DesignSystem demo I'm doing at work tomorrow. 😅

heydon, 27 days ago to random

I think Angular users may even be worse than React users, on the whole, for using the wrong markup for stuff. Looking at a page with background images on <div>s instead of, well, images and a form made out of <li> and <a> elements with button roles instead of checkboxes and radios. Oh and not even in a <form> element, just a <div>.

slightlyoff, 1 month ago to random

MSFT words I have to unpack in every meeting:

• "ask" == "request"
• "inbox" == "include"
• "double click" == "discuss in detail"
• "learnings" == "lessons"
• "delighter" == "feature" (apologies to Kano)

cirrus, 1 month ago to javascript

Grumble. #Angular is doing my head in. Why do Angular packages create a new package.json in the dist folder and expect you to cd into there before running npm publish?!?!

I have a monorepo with lots of other non-Angular packages. I use Changesets to manage versioning and releases.

Now, because Angular can't just use npm like it's meant to be used, I'm stuck.

#WebDev

mikemai2awesome, 1 month ago to CSS

This is the way.

@ media (hover: hover)  
 a:hover { ... }  
}  

#a11y #WebDev

cirrus, 1 month ago to typescript

Been going down a rabbit hole today trying to get #Lit, #TypeScript, #CustomElement manifests and #Storybook to all hold hands and sing kumbaya.

Send help.

How's your day going?

cirrus, 1 month ago to javascript

Every day is #JS Naked Day on my site: https://cirrus.twiddles.com/ 😜

More info: https://js-naked-day.org/

mattwilcox, 1 month ago to random

Genuine question, because I'm starting to second guess myself.

Sites like this: https://buttermax.net/

I can't use them, and I ... I'm not sure why. I have no idea what the site was about, I literally (somehow) did not realise you could scroll the page so missed a ton of content. My eyes bounce around and I can't focus on anything to read it.

Is it just me?

cirrus, 1 month ago to webdev

Went down a rabbit hole today trying to share some CSS between a document (i.e. "light DOM") and the shadow DOMs of some #HTML custom elements (aka #WebComponents).

This article by Eisenberg Effect was super useful: https://eisenbergeffect.medium.com/

I ended up building something along similar lines, but customised for my specific needs. Needs a bit of polish, but it works.

It really shouldn't be that hard to do though. Really hope a native way to do this ends up in the #web platform someday.

sturobson, 1 month ago to random

If you had Philip’s hue and were going to watch Alien with your teenage youngling this evening what colour would you set the lights?

Dark green, right?

cirrus, 2 months ago to random

I know it's been done a million times (incl. a few by my past self), but it still feels like magic when demoing a #DesignToken pipeline.

In our case, the demo was:

• Static HTML, React & Angular web apps are all open in browser windows, displaying some of p
  our #DesignSystem components
• An Android emulator running a React Native app, also using DS components, is open too.
• I open a Figma library, edit the color of a variable
  ...

cirrus, 2 months ago to random

Current status: