My summer internship at Slido
How I implemented the “Results capture” feature, and more
“The idea is to allow users to insert poll results into their slides. Do you think you could implement this feature?” — “Sure, let’s do it!”
… thus started my 3-month collaboration with Team D, which develops Slido’s integrations with Google Slides and PowerPoint.
A month later, I was heading to the office for the first time. Needless to say, I was nervous. “Will I fit in?” “Am I actually good at what I claim I’m good at?” The impostor syndrome tends to mess with our heads in times like these.
After a short tour of the office, my new colleagues and I sat down for a spontaneous talk. They were my seniors in all respects, and yet they didn’t look down on me. I felt welcomed into the team, and my nervousness had gone away.
Over the following days, we grew closer over lunches, table football matches, beers, barbecues, and Slido’s 9th birthday party. I looked forward to going to work — I liked who I was working with and what I was working on. Speaking of which, let’s discuss the feature I implemented.
What I delivered
I delivered the beta version of a feature that allows you to insert poll results directly into your presentation. Let’s see an example. Suppose you add a fresh new word cloud poll to your presentation. This will show up as a Slido poll placeholder in your presentation:
During your presentation, the results start coming in and you will see something like this:
Once the presentation is over, you might like to share your slides. Previously, the slides would still only contain poll placeholders. Thanks to this feature, you will be able to replace placeholders with actual results. This is illustrated by the below two images:
Clearly, this feature will help users who wish to augment their slides with insights gained using Slido interactions.
How it works
Let’s start with a bit of background. The magic of Slido’s integrations lies in the sidebar. It allows you to add Slido polls to your slides, and it activates the polls as you’re presenting. The feature I implemented replaces each Slido poll placeholder in the presentation with the corresponding poll results. Now you may ask:
- What do you mean by “poll results”? Poll results are similar to the presenter view. The only difference is that the QR code and joining instructions are removed, as these have little relevance once the presentation’s over.
- Where do you get the results from? From the Slido sidebar! It has a DOM that renders the stuff that you see. But it also renders what you cannot see… That’s right, the results are rendered directly in the sidebar, just outside the viewport. To accomplish this, it suffices to set
positiontofixedon the results node and setleftto the sidebar’s width. - The results are rendered in the sidebar, but how do you capture them? I used the library html-to-image. Roughly speaking, it takes a DOM node, converts it to SVG and then to a lossy format of your choice. I picked PNG as the results inherently contain text.
- Okay, so you have a PNG with the results, but how do you insert it into the presentation? The sidebar first clears the contents of the corresponding Slido placeholder slide. It then sets the results as its background. All this is done using Google Apps Script.
- Why set the results as background? So that they don’t get moved around by accident. This will help those who may wish to further annotate Slido poll results.
- What if my presentation doesn’t use the default aspect ratio? This is accounted for by checking the aspect ratio of the target presentation before rendering. The aspect ratio of the rendered nodes is then adjusted accordingly.
Was it really this straightforward?
What I just described was a nice, linear process. It wasn’t all like that.
Firstly, at each step, multiple alternatives were considered. For example, when it comes to capturing results, one alternative was setting up an AWS Lambda that would run a headless browser using a tool such as Puppeteer. It would take in poll metadata and return a PNG with results. However, as I learnt about the capabilities of html-to-image, it emerged as the simply clever way to do it.
Secondly, I had to figure out how to go about themes. Slido allows you to choose from a selection of predefined themes or to create your own custom ones for your polls. The results node is now rendered in the DOM of the sidebar, where it no longer has access to the same stylesheets. Rather than copy over the same stylesheets, I rewrote the styles to JSS. JSS is simply CSS in JavaScript, but it goes a long way. Thanks to JSS, I was able to disentangle some complex CSS cascades that crept into the codebase over time. We ended up with an element that exposed a neat interface for theming. Then, it was just a matter of setting the theme to that of the user.
Did you face any unexpected challenges?
Most of the elements that made up the results component were written in AngularJS (i.e. Angular 1). I did not want to increase tech debt by building this feature on legacy code. Ambitiously, I decided to rewrite all involved AngularJS components to React. This naturally entailed lots of code review and testing. Amid the vacation season, this took almost 2 months to complete — we initially expected ~1 month. This was a challenge because it meant I ended up with less time to polish the feature.
What did you like the most about your project?
I liked the responsibility. The success of this project was predominantly in my hands and I knew if I worked hard, it would make it to production. The responsibility made this a completely different experience compared to university coursework, which tends to involve filling in gaps in somebody else’s code that is guaranteed to work if you get it right. Here, the implementation had to be planned from scratch, and the results would not show immediately. It was not until mid-August, more than two months in, that I was done with refactoring elements and researching how to capture results. Then, I could finally start putting it all together. And when I saw everything fall in place, I felt amazing. The whole indeed was greater than the sum of its parts (pardon the cliché).
How‘s Slido?
While my project certainly improved my technical skills, it was much more than that. It wouldn’t have been the same without the people at Slido. We’d go indoor climbing, kart racing and uh, you know, for the occasional beer.
Coming from the leading Czech/Slovak and international universities, with past experience at other renowned tech companies, Slidoers are accomplished people. Yet, they’re down-to-earth and welcoming. They were interested to hear about our stories as interns. They engaged with us and accepted us as part of the family.
Whenever I needed help, I could approach somebody without feeling like I was burdening them — even if they were on a different team. Once, I needed help setting up the Cypress testing environment, and the QA team lead kindly spared half an hour of his time to help me (shoutout to Filip).
Another thing I liked about Slido is the relaxed and flexible work environment. Colleagues often visit each other for their daily dose of banter and there’s a (very active) meme channel on our Slack. You don’t have to work 9 to 5 — as long as you do your share of the work, nobody will question your working practices. This relies on mutual trust and individual responsibility. This helped a lot when I had to run errands as I was preparing for my student exchange.
Shoutouts
I would like to thank Team D for welcoming me so warmly and for their lasting friendship. I thank Davido for his advice, support and mentorship and Ľubo for his supervision, Joži for our chill conversations over coffee breaks, Anči for her room-filling positive energy (and for testing all the meaty pull requests), Tomáš for checking in on me and explaining stuff, Dominik for his kindness and knowledge, Viki and Virpo for looking after our wellbeing as interns, Ondrej for all the good laughs. Russ, Gemma and Graeme, thank you for your feedback, which helped shape the project.
If you’re considering applying for a role as an intern at Slido, go for it! You will work on useful projects that will make it to production while working with knowledgeable, caring individuals from various parts of the industry. In the words of two colleagues who joined Slido about the same time I did: “The people here were so kind and willing to help, and we just didn’t understand why.” Well, that’s the Slido way!
