Ocado: Workshop

Written by on CSS Wizardry.

When I got an email from Dan Horan asking me if I’d like to help him and his team at Ocado level up their CSS skills, I didn’t even have to give it a thought: my answer was an instant yes! Ocado is a really great brand, held in high regard in the UK, and I very much wanted to be part of their story. I mean, check this out:

Ocado is a British online supermarket […] Ocado has been voted the best online supermarket in the UK […] every year since 2010. The company […] is currently a member of the FTSE 250 Index.

Highly regarded, and no small setup. However, there were several other interesting things that I learned in my time at Ocado. Firstly, I got to understand the sheer size, breadth, and scale at which they work: Ocado is not only an online-only grocery supermarket, but they also manage stores for pets , kitchen appliances, and even cosmetics. Although they don’t have the same physical presence as other retailers, being 100% online brings its own interesting and fun challenges that others perhaps don’t encounter in quite the same way. It was fascinating to learn a little more about how they use very modern technology to service one of the oldest industries on the planet: selling people food and drink. Dan and his team are part of Ocado Technology, a separate division within Ocado that tackles everything from automation, robotics, and AI, to big data, cloud, and IoT.

Day One

Everyone thoroughly enjoyed it and took a lot away; we couldn’t have asked for more.

Dan Horan, IT Team Lead, Ocado

The format of our engagement was to be a two day workshop, filling a room full of designers, front-end developers, software engineers, and even some very keen and interested mobile developers, and learning anything and everything about CSS architecture. On the morning of our very first day, Dan and I had a quick look over the itinerary that I had drawn up, and decided to make some last minute tweaks. We moved a block of work forward so that we could move a more relevant bit of work back to the second day, which would give me chance to add some new materials and demos overnight. This gave us the chance to focus more heavily on a topic that was going to be a lot more pertinent for the team.

We started off nice and slow, with a small task to get people warmed up. We looked at what people in the room already knew, and I was very happy to see that a good number of developers were working in a fairly consistent way already.

We then progressed onto more in-depth studies of designing for performance, CSS architectures (namely ITCSS), naming conventions, and principles. After much scribbling on whiteboards, many discussions, deep-dives into specific tools, and much much more, day one began to wind down.

A few of us headed for dinner and a drink or two together right after leaving the office, which gave us a chance to hang out, get to know each other a little better, and—more importantly—discuss work more openly without the pressure of being in ‘office mode’. I find that this is a really valuable time for development teams, as I usually get to hear some of their frustrations in a slightly more candid and honest way. After a couple of hours, we headed our separate ways: I went back to the hotel to recharge and to work on some additional materials for day two.

Day Two

Harry was incredibly knowledgeable, and was able to tackle a complex technical topic with ease and also make it very easy to follow. He used anecdotes and stories throughout to keep us interested and to explain more difficult concepts. I thought the style worked brilliantly and I found him easy to pay attention to—even in a 2 day intensive training session.

Day one had felt pretty intense—we’d certainly covered a lot of ground—so I was absolutely thrilled to see everyone return enthusiastic and on time to begin our second day together.

We began by tidying up any loose ends left over from the previous day, and answering any questions that had occurred to people in the meantime. Then we got stuck right into things. We had a very detailed interactive session demoing and experimenting with the materials I had prepared overnight. This section of the workshop was intended to help address issues very specific to Ocado’s needs, which is why it was so important to cover it in a much more direct and bespoke manner.

After covering this section off—which made up the lion’s share of day two—we opened the floor up to requests and suggestions for what to tackle next. Everyone seemed pretty keen to look into the performance stuff I had prepared, but given that they were a particularly motivated bunch, I decided to take things up a level for them:

I’m currently writing a performance workshop from the ground up, so I offered to freestyle a new performance section for them based purely off of the back of notes I have stored in a Trello board. We covered a lot of different aspects of front-end performance, as well as diving into tooling and auditing, and ended up uncovering some interesting insights about Ocado’s own online products. This highly interactive session rounded off day two.

We decided to pack up a few minutes early because almost everyone was starting to show early signs of information overload—we covered an almost unprecedented amount in two days, and any more would have been to our detriment. Again, a couple of us went for a drink together to round things off, and with that, I was on my way home.

My time with Ocado was insightful, intense, and enjoyable. In our wrap-up emails, Dan shared a particularly pleasing bit of feedback with me which I found echoed my own thoughts very well:

Best training I’ve ever had at Ocado! He introduced really fancy stuff. Live coding is really good for me to detect important points and I can also learn his coding style. He introduced some really good tools, which I will surely use in the future. It was quite intensive but I never felt tired. My overall feeling is absolutely positive.


Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q3–4 2017

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.