The Lee and Marc Show - Atomic Design in Umbraco

Written by @marcemarc on Friday, 01 June 2018

Soooo, it's that 'can I have the slides for your talk?' season... post codegarden2018, and I'm never sure if outside the context of the presentation, whether the slides from the talks I'm involved in, make any sense. (nor, to be honest, during the talk itself either) - But for 'Lee and Marc' completists - they are here.


Some explanations may be in order..

The use of sock puppets came from an anxiety dream, I had about giving a talk at Codegarden called:

"Marc e Marc’s Sock Puppet Orchestra Presents: too orangey tales of empathy and engagement with content editors in Umbraco"

heavily influenced I think by watching The Nightmare of Milky Joe.

When out of the blue, Lee and I were asked to do a talk about 'Atomic design in Umbraco', and we weren't really sure why... Why us?, Why Atomic design?, well it then became a bit of a challenge to see whether we could work sock puppets in there somehow...

... and well, I've discovered that Lee is the sort of person that 'goes along with stuff'...

We wrote the show containing the sock puppets, knowing it would only work if they demonstrably looked like Matt and Lee - but with two days to go, we didn't have any... So Helen in the early hours of the morning leading up to the CG Retreat, worked her magic, and glue gunned heavily researched, beard, hair and eye combinations to miraculous effect, the hot glue slightly painful on my hands through the sock material, but I wasn't complaining, we had a show! -  On the last night she insisted on creating the mini marcemarc puppet (even though there was no marcemarc puppet in the show, and well... I still had to pack), but, hey, that is the level of commitment, we are talking about here.


What was it about anyway?

The gist of the talk, well, we wanted people to think about the shift from inherited document types to compositions, and how there was little proactive communication at the time of the introduction of compositions, as to how you might organise them and whether the principles of front-end Atomic Design, could help people make decisions and organise their document types and compositions in the backoffice.

This led to the notion of a Periodic table of Umbraco Property Editors - and the thought that well, we might not have found yet ALL the elemental property editors in the core yet... We should think more atomically and not just use Nested Content for everything.


Stretching the science analogy further we introduced the notion of an 'Atomic Number' for organising the order of properties from different compositions on the same tab, and highlighted other improvements to the core that could make this atomic composition approach more compelling.


Finally, asking how often people revisit, listen to editors and refactor backoffice editorial experience?

You can read more about the examples glossed over in the talk here:

Editing Crops in the content section
Media Picker - List View 
Editor Journey Times
Redirect Url Management from a Content Item -  (now an exciting PR in the core)

So remember make your backoffice interactions 'S O C K', Simple, Obvious, Composed and Kick Ass!

And the end was filmed by Jeavon:


Also if anyone has any pictures of the puppets on stage, it would be ace to see them!