JavaScript is not available.

@shopify

@MelbJS

organiser / dad x4

Melbourne, AustraliaJoined February 2011

9 Following

72.6K Followers

🎄🧁 Mark Dalgleish’s Tweets

Pinned Tweet

Mar 26, 2021

👇 NEW CSS-IN-JS LIBRARY ALERT! 🧁 vanilla-extract 🔥 Zero-runtime Stylesheets-in-TypeScript ✨ Minimal abstraction over standard CSS 🦄 Works with any front-end framework 🌳 Locally scoped classes + CSS Variables 🎨 High-level theming system github.com/seek-oss/vanil

read image description

ALT

298

1,494

🎄 Merry Christmas everyone 🎄

1:33

2.6K views

Dec 22

Please help. When I close my eyes, all I see is esbuild plugins.

124

When you post a GitHub link in the chat and the embed is a giant picture of your face.

read image description

ALT

434

I've wanted this feature in TypeScript for so long. This is a really great video explaining why.

Quote Tweet

Steve (Builder.io)

@Steve8708

The `satisfies` operator in TypeScript 4.9 is a game changer Here is a quick overview of how it compares to a couple alternative ways of annotating types Learn more about the `satisfies` operator here: typescriptlang.org/docs/handbook/

Show this thread

1:53

70.2K views

160

Here's the trick. I'm using Babel to transform these: import "./styles.css"; require("./styles.css"); Into these: import "./styles.css?__remix_sideEffect__"; require("./styles.css?__remix_sideEffect__"); This allows them to be treated differently from existing CSS semantics.

Made good progress on handling CSS side effect imports in

feat: CSS side effect imports by markdalgleish · Pull Request #4919 · remix-run/remix

, mainly to support npm packages that import CSS from JS files. Draft PR is open now if you wanted to take a look and see how it works 💿👀

github.com

NOTE: Since this work builds on top of the @remix-run/css-bundle package introduced in #4852, this is currently a draft PR targeting the markdalgleish/css-modules branch rather than dev. Closes: #4...

Native support for leading trim coming to Figma! This is amazing news. Even though this has been addressed via plugins, including my own "Leading Trim", it's a bit awkward that trimming text requires a separate step. Having it natively built into Figma is obviously the ideal.

Quote Tweet

Nima Owji

@nima_owji

Dec 17

#Figma is working on “Vertical trim” for texts!

Dec 16

Screenshots look so boring. Photos of your screen are just way more ａｅｓｔｈｅｔｉｃ.

Quote Tweet

Dec 15

I think I'm officially the first person to see a react-spectrum component rendering in @remix_run. cc @devongovett

Screenshot of a button labeled "Hello from Spectrum" highlighted in dev tools showing it's use of react-spectrum class names

read image description

ALT

You've gotta help me out here. Can you explain it again, but a bit slower this time, like you're explaining it to someone who's not as smart as you, e.g. me.

My brain right now.

read image description

ALT

I think I'm officially the first person to see a react-spectrum component rendering in

. cc

@devongovett

👇

read image description

ALT

104

vanilla extract’s API is so good! Building my first UI library with it, and making use of all the goodies like sprinkles for utility classes and recipes for variants feels like cheating. All the component styling logic now has become a single js object!

Dec 14

Wooo thanks for having me

🙌🏽 Awesome community here, so happy to have experienced it for myself ☺️

Dec 14

I'm currently looking into CSS import side effects support in

and it's already looking pretty promising. If you've had trouble trying to use npm packages that import CSS files from JS, we should hopefully have a solution for you soon!

feat: CSS Modules support by markdalgleish · Pull Request #4852 · remix-run/remix

Dec 13

This tweet is currently sitting at 8 likes. Maybe I found them after all.

Who are these mysterious "8 more" people? I guess we'll never know.

Tooltip of a party popper reaction to a GitHub PR showing a list of 10 usernames, followed by "and 8 more reacted with hooray emoji"

read image description

ALT

I told you it was a good idea to skip university.

ChatGPT conversation:

Me: What's the best data structure to use if I'm wanting to match optional path segments in a URL against a set of routes?

ChatGPT: If you want to match optional path segments in a URL against a set of routes, a good data structure to use would be a trie, also known as a prefix tree. A trie is a tree-like data structure in which each node represents a single character of a word. By using a trie, you can efficiently match a URL against a set of routes by traversing the trie, starting from the root node, and moving down the tree one character at a time. This allows you to quickly and easily check whether a given URL matches any of the routes in your set.

read image description

ALT

💿👀

Closes: #4632 Docs Tests Note that docs will definitely some need more holistic changes once we've removed the feature flag and added more bundling features, but this is PR contains a minim...

107

Dec 12

Me: Hey Glen I'm in Melbourne, want to hang out?

@glenmaddern

: Oh no, what have I signed up for

: Yeah I'm not so sure about this guy either Well, hopefully I can make it worthwhile tomorrow at

😄 Come find out!

Taz pointing at Glen who's clearly not to blame

read image description

ALT

Taz disappointing Mark who's now reconsidering why he agreed to let Taz speak at MelbJS

read image description

ALT

Quote Tweet

Only 1 day to go! Join us tomorrow night, 6pm at Culture Amp. Building 3D Websites and Apps using ThreeJS —@dr1337 Durable Objects for Dummies... Like Me —@evanderkoogh React Native Everywhere —@tazsingh

Dec 12

CSS Modules and Vanilla Extract doing pretty well on this chart 👀

Quote Tweet

I like how CSS modules became a "boring tech" It's not the shiny new toy, a bit verbose, but it just works and is a very good default for many projects Will use again 2022.stateofcss.com/en-US/css-in-j

Window.matchMedia() - Web APIs | MDN

Dec 12

“jQuery was the first package manager” ~

The inline script tag should try to get the color mode out of local storage, but if it's not there, fall back to window.matchMedia:

developer.mozilla.org

The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to...

Here's how I avoid the dreaded Flash of Light Mode™ — while also supporting user toggling + local storage. Don't use media queries! Instead, use root-level selectors like html.dark. Then, add a tiny inline script tag before any visible content that applies the correct class.

262

This looks interesting. Optimizing compiler for Sprinkles 🍨👀

Quote Tweet

alex

@astahmer_dev

Dec 9

[a month later] done

I made a vite plugin to only generate & inject CSS that you actually use, even outside of css.ts (meaning even at runtime

) this works no matter the size of your vanilla-extract/sprinkles config, tested with a config generating 177k CSS rules 1/n twitter.com/astahmer_dev/s…

Show this thread

Dec 9

My favourite thing about the

codebase so far is that there's a script that generates a new playground app which runs against the local dev version of Remix. This is super handy if you're working on compiler features, like I am right now.

One challenge with CSS Modules is that CSS can get new custom identifiers at any time (e.g. grid line names, container names) which ideally get scoped automatically, but this is a huge change to the semantics of your CSS. Vanilla Extract fixes this since all scoping is explicit.

If you're wondering where this image came from, it was already in the

codebase for some reason.

The

test suite is pretty fun to work in. There's a test helper for generating an entire Remix app with all files defined via a JS object, then it spins up a server and lets you run Playwright tests against it. Super slick.

Look at that CSS Modules hash. This can't be a coincidence. What does it mean.

Photo of a web browser with a picture of a dog in a suit, highlighted in developer tools, the class name contains a hash ending in DoG

read image description

ALT

118

Someone needs to start a CSS dinner party. - Olive - Tomato - Wheat - Salmon - Bisque - BlanchedAlmond - Orange - Plum - Lime - HoneyDew - PapayaWhip - LemonChiffon - MintCream - PeachPuff

marketplace.visualstudio.com

Wow. The Playwright plugin for VS Code is really good.

Playwright Test for VSCode - Visual Studio Marketplace

Extension for Visual Studio Code - Run Playwright Test tests in Visual Studio Code.

Dec 7

An underappreciated benefit of Vanilla Extract over CSS Modules is that dependencies between .css.ts files follow the semantics of JavaScript imports rather than CSS imports. This solves an entire class of potential ordering issues.

Dec 7

Hey, that's a pretty good answer.

ChatGPT conversation:

Me: Who invented CSS Modules?

ChatGPT: As far as I know, the concept of CSS Modules was first proposed by Mark Dalgleish in 2014. However, it is important to note that CSS Modules is not a specific technology or product, but rather a concept and a set of best practices for writing modular, reusable CSS. As such, there is no one person or group who can be credited with inventing CSS Modules. Rather, the concept has evolved and been refined over time through the contributions of many people in the web development community.

read image description

ALT

376

Show this thread

Dec 6

Hyped to be speaking at the legendary

alongside this lineup, and to hang out with good friends

@glenmaddern

😍 What a way to end the year! See you soon, Melbourne! 👋🏽

Quote Tweet

MelbJS

Dec 6

Only 1 week to go! Join us next Wednesday, 6pm at Culture Amp for our last event of 2022! React Native Everywhere. —@tazsingh Building 3D Websites and Apps using ThreeJS. —@dr1337 Durable Objects for Dummies... Like Me. —@evanderkoogh

Dec 2

Heading back to Melbourne after a great

Summit. It was amazing getting to speak at an in-person conference again. Thanks

@johnallsopp

for having me, and for all your hard work supporting the Australian tech community over the years.

Dec 1

Hanging out with these nerds

It was a nice surprise hearing Capsize getting a shout out in

@Mandy_Kerr

's talk at

Summit about text on the web. If you haven't seen Capsize before, you've gotta check it out: seek-oss.github.io/capsize

Photo of Mandy Kerr presenting with a slide showing unwanted vertical space between text elements due to leading.

read image description

ALT

Adam Bottega

@adzbottega

Dec 1

As someone who created and maintains our internal design system at TeamForm I really loved

talk about vanilla extract at

#summit2022. Really keen to have a play with it, I see the benefits and utility of this for writing maintainable type safe CSS 👌

Almost 3 years later, I’m thankful to hang out with my brother

once again while enjoying his content here at