banner
sturobson.com
Stuart Robson
@sturobson.com
5K followers 430 following 2.7K posts
👋 currently looking for new client work 🖤 Design Systems Practitioner 🛠 Front-End Developer 📰 Curates Design Systems News 🏎️ Formula One Watcher 🧟‍♂ Horror Fan 🍖 BBQ’er 🖥️ www.alwaystwisted.com 📜 news.design.systems
Posts Media Videos Starter Packs
Pinned
sturobson.com
Stuart Robson @sturobson.com · Jun 5
👀 Looking for Design Systems consultancy or front-end development for your project?

📅 I have availability and would love to assist!

👇 Here's some of my recent work

💡 If you’ve got something coming up, let’s chat!

🌐 Visit www.alwaystwisted.com or email me at [email protected]

🙏🖤
A composition of elements from the Monotype Marketing Design System, featuring interactive type specimens, bold typography, and a user-friendly interface. The design adopts a minimalist aesthetic with black and red accents. The caption reads, 'Created the Monotype marketing Design System, developed tools for interactive type specimens, launched the Shopify storefront.' A composition of elements from the Elements Design System homepage, featuring clean layouts, design tokens, and component guidelines. The design utilises a light theme with blue accents. The caption reads, 'Assisted with front-end work across multiple sites, helped create the new Design System documentation site, implemented design tokens.' A composition of elements from the Visual Framework homepage for EMBL, showcasing design system guidelines, component examples, and accessibility features. The design employs a green and white colour scheme. The caption reads, 'Developed the front-end architecture and guidelines for EMBL's new Design System, ensuring scalability and maintainability throughout the project.' A composition of elements from the UCL site-wide search system, highlighting search functionality, filters, and a clean user interface. The design features a modern layout with blue and white tones. The caption reads, 'Created the front-end for a comprehensive site-wide search system, enhancing UX and the existing Design System.'
2 22 21
sturobson.com
Stuart Robson @sturobson.com · 2h
#Traitors Time.
sturobson.com
Stuart Robson @sturobson.com · 5h
banger à la bang
A glass Pyrex dish with “toad in the hole” a risen, cooked batter mix with 6 browned, cooked sausages.
1 4
sturobson.com
Stuart Robson @sturobson.com · 6h
and finally … no, no, no, no JS

a bookmarklet that looks for a class of 'js' on the HTML element and swaps between that and 'no-js'.
a man in a suit is holding a sign that says no no no no no .
Alt: the character Jim Trot, from the Vicar of Dibley holding up a sign that says 'no no no no no' they then flip it to the other side that says 'yes'
media.tenor.com
3
sturobson.com
Stuart Robson @sturobson.com · 6h
then we have a bookmarklet that lists out any and all third party links to CSS and JS
The image displays a list of external CSS and JavaScript (JS) files used in a webpage. Each entry specifies the type (CSS or JS) and the corresponding URL for the resource.
1 2
sturobson.com
Stuart Robson @sturobson.com · 6h
next a bookmarklet that displays any inline <style> tags on a page
The image displays a code editor or development environment showing an inline CSS style block. The CSS defines various font-face rules for the "GH Guardian Headline" and "Guardian Egyptian Web" fonts, specifying their sources and styles. Below the code, there is promotional text from the Guardian Weekly magazine, encouraging subscriptions for in-depth news coverage, with a special offer of 50% off for three months. The bottom of the image features a partially visible graphic related to news content, likely from the Guardian.
1 1
sturobson.com
Stuart Robson @sturobson.com · 6h
first up, but this is still a prototype.

'Design System checker'

A simple bookmarklet that marks anything without a define class prefix with a red outline, instead of a green outline.
The image features a webpage header titled "Exploring the secrets of life," highlighting the European Molecular Biology Laboratory (EMBL) as a key institution in biological research. Below the header, there's a section labeled "Latest updates from EMBL's six sites," showcasing recent articles with illustrations related to scientific advancements. The articles include topics like a partnership with Google DeepMind, microbial DNA research, embryonic development, and an interview with Amandine Nunes-Jorge about ocean research. Each article is accompanied by a date indicating its publication.
1 1
sturobson.com
Stuart Robson @sturobson.com · 6h
going to try and carve out some time to write up about some recent bookmarklets I've been working on.

As well as a little article explaining them all I'm wondering if a fresh 'bookmarklets' page on my site would be a nice to have.
2 3
sturobson.com
Stuart Robson @sturobson.com · 7h
I should put my spark amp on top really (and get my Iceman out of storage (and conduct some cable management))
A metal storage unit for guitars with three guitars resting inside and a NAS and other network devices sat on top of the
2 4
sturobson.com
Stuart Robson @sturobson.com · 7h
"and in the third season of Monster, we'll just make some stuff up"
1
sturobson.com
Stuart Robson @sturobson.com · 7h
reminded today of this ol' thing from @tkadlec.bsky.social

Setting a performance budget

timkadlec.com/2013/01/sett...
Setting a performance budget - Web Performance Consulting | TimKadlec.com
timkadlec.com
1
Reposted by Stuart Robson
bram.us
Bramus @bram.us · 1d
What are your favorite CSS functions?
23 4 18
sturobson.com
Stuart Robson @sturobson.com · 1d
color-mix()

www.alwaystwisted.com/articles/qui...
Quick and Dirty Colour Palettes using color-mix() Always Twisted
Learn how to use CSS color-mix() to create tints, shades, opacity variants, and even dynamic palettes for your projects. From simple setups to advanced techniques, this guide explores how to enhance y...
www.alwaystwisted.com
1 4
sturobson.com
Stuart Robson @sturobson.com · 1d
👀

www.theguardian.com/australia-ne...
Deloitte to pay money back to Albanese government after using AI in $440,000 report
Partial refund to be issued after several errors were found in a report into a department’s compliance framework
www.theguardian.com
1 1
Reposted by Stuart Robson
penpot.app
Penpot @penpot.app · 1d
Just one day to go!!! We couldn’t be more excited! 😍

🤩See you tomorrow!

And if you can’t attend in person, don’t worry, we’ll be broadcasting live🔴

⬇️⬇️⬇️
penpot.app/penpotfest
1 2 5
Reposted by Stuart Robson
rosenfeldmedia.com
Rosenfeld Media @rosenfeldmedia.com · 1d
Rosenfeld's turning 20! 🎂

We want to say a HUGE thank you to everyone who supported us over the years with a special gift:
20% OFF EVERYTHING.

Books. Conferences. Workshops. Gold Membership.

Get everything at 20% off for ONE DAY ONLY with the code BIRTHDAY20!
2 5 12
Reposted by Stuart Robson
piccalil.li
Piccalilli @piccalil.li · 1d
Set your alarms and clear your inboxes: JavaScript for Everyone launches in 7 days, on October 14th.

The drafts are done, the editing is *nearly* complete and let us tell you, Mat has written a masterpiece.

Get alerted on launch day by signing up for updates: piccalil.li/javascript-f...
JavaScript for Everyone. A new course by Mat Marquis. Launching in 7 days
3 10 31
sturobson.com
Stuart Robson @sturobson.com · 2d
Got one! #OnlyConnect
1
sturobson.com
Stuart Robson @sturobson.com · 2d
… but in the interim, after spending weeks banging my head against a wall using Storybook, I might get back to this 11ty component library / docs site idea I started working on a while back.
A screenshot of a component library documentation page featuring a section for "button" components. It includes a list of components, a code snippet for a default button, and SCSS styles for button variables. Below, there are design tokens with names, previews, values, descriptions, CSS custom properties, and Sass variables for button background color and border radius. The layout is clean with sections clearly labeled.
2
sturobson.com
Stuart Robson @sturobson.com · 2d
Hello World

I'm nearing the end of my current contract and on the lookout for my next adventure.

I'm a Front-End Developer and Design Systems specialist, excited to dive into new projects and tackle new challenges!

Let’s make some rocking websites!

[email protected]

🙏🖤
2 9 20
sturobson.com
Stuart Robson @sturobson.com · 2d
yesterday I spent some time (between cooking a #StusRoast and watching the Grand Prix) revisiting this side project idea.

A 'countdown' of sorts for the web platform Baseline information.
sturobson.com
Stuart Robson @sturobson.com · 3d
vegetables prep'd … one more little (prototyped) feature…

"add to calendar"

(thanks to a work colleague this week stopping our 1-to-1 to add the estimated color-mix 'widely available' date to their calendar)

now the F1.
a similar screenshot like before. titled - baseline components an input to add what feature you want to check the results and an 'add to calendar' feature. Baseline Countdown Enter a CSS / Web Platform feature Lookup color-mix Newly available: 09-05-2023 Now available Widely available: — Estimated widely-available date: 09-11-2025 color-mix() Baseline 2023 NEWLY AVAILABLE Add to calendar: Add to Google Calendar (09-11-2025) Download .ics (estimated date)
4
sturobson.com
Stuart Robson @sturobson.com · 2d
ship it!
a small part of the Safari browser which has a lighter border at the top but darker rounding the corner and down the side
1 4
sturobson.com
Stuart Robson @sturobson.com · 2d
I've just plugged my laptop into an external monitor -- the rounded corners are ridiculous.
6
sturobson.com
Stuart Robson @sturobson.com · 3d
as it's got access to 'all the data' … gonna treat myself to this little feature
a two column grid showing what is recently available or widely available in the last 30 days, or the last 7 days from the web platform status
1
sturobson.com
Stuart Robson @sturobson.com · 3d
No Horner, no sister team orders.
2
sturobson.com
Stuart Robson @sturobson.com · 3d
I blame @miriam.codes for this idea 😂

bsky.app/profile/stur...
sturobson.com
Stuart Robson @sturobson.com · Aug 13
brb, seeing if TheBaselineCountdown.com is available, as there’s a couple of things I want to use on a project but the guard rails are “widely supported” rather than “newly supported”
TheBaselineCountdown.com
2