Bye-bye Weeds! Digital gardening with Astro, SolidJS, & MDX — Kathleen McMahon Senior Design Systems Engineer — JSDay IE
JSDay IE — Thank you organizers
https://noti.st/resource11
@resource11 Twitter | Instagram | GitHub
Kathleen McMahon | Engineer • Designer • Speaker
Cyclocross! [image] various pictures of me racing cyclocross
image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes
image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases
image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide
image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.
image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.
image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.
image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table
image: Otis, the black wonder cat, steps into the frame of my crystal collection
image: Otis' paws walk through my crystal arrangement on the kitchen table
image: grouping of citrine, amethyst, and celestite glowing in the sun-washed windowsill
image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.
image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement.
image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.
image: Otis looking very cute as he lays upside down on my bed, gazing at me.
Northwestern Mutual
Design Systems are ALWAYS the hotness [image]: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.
image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success
Image: Gatsby and MDX logo
Image: KathleenMcMahon.dev homepage
A digital what?
What is a digital garden? [image]: Small potted plant next to a rake with caption, My blog is a digital garden, not a blog
Image: Gatsby and MDX logo
image: ALL THE THINGS Hyperbole and a Half
Perfection is the enemy of done
image: A Lexus with a big red bow juxtaposed next to a tiny floofy beige kitten with a red bow
There be weeds [image]: Two fluffy dandelion weeds in a green field
JavaScript is hard
JavaScript is hard …maybe you should build a Squarespace site?
image: Judy Hopps from Zootopia, shakes her head in disgust
10 hours later…
image: Judy Hopps from Zootopia, shakes her head in disgust
image: Shrimp and lime jello mold, plated with apple slices
"if you want a static site, why are you using a whole JavaScript framework to render it?"
Why use JSX to create HTML when you could just… use HTML?
I don't need a suite of combine machines. [image]: Large agricultural harvesting machines in a vast golden field
A hoe and rake will do. [image] Small rake, pronged fork and clippers in a modest garden
Weed out the Complexity [image]: Gloved hand digging weeds out of a garden
image: Astro.build homepage
Why Astro?
Why Astro? [image] Astro documentation page
MDX support
PostCSS support
Astro Islands
Convert some components or all components
I can try out different UI frameworks in Astro
MPA Architecture
Leaner configs
image: side-by-side comparison — gatsby-config.js 😀 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😶 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 🤔 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😐 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😬 astro.config.mjs 😀
image: side-by-side comparison — gatsby-config.js 😳 astro.config.mjs 😀
image: side-by-side comparison — gatsby-node.js 🫣 astro.config.mjs 😀
image: side-by-side comparison — gatsby-node.js 🙄 astro.config.mjs 😀
image: side-by-side comparison — gatsby-browser.js 🙃 astro.config.mjs 😀
Till the soil [image] Person digging with a spade into the soil
From React children to Astro slots
image: side-by-side comparison — layout.js Layout.astro
image: side-by-side comparison — layout.js Layout.astro
Add mulch [image]: Hands holding soil
From GraphQL to Content Collections
image: Astro config.ts
Dynamically generating routes
image: […slug].astro file
Type-safe Markdown & MDX!
Zod say what?
Plant new starters [image] hand planting starters in soil
Images
image:assets
image: <Image /> example file
image: <img /> example file
What I’ve learned
Big Lexus bows vs. Tiny kitten bows
Schemas are tricky and dynamic imports
CSS load order is no joke.
ViewTransitions are Tricky …and buggy
Clean up your files, or Netlify will break your build
Demo
Everything Everywhere at Once [image]: woman screaming
‘scuse me? Where’s the SolidJS, yo?
What didn’t port over (yet)
Card
Custom MDX components
aria-current SEO Card (into an actual component) custom CodeBlock with react-live/ DisplayBox
JSDayIE Thank you.
@resource11 Twitter | Instagram | GitHub