The One Who Experiments

Hakim El Hattab is a Swedish front-end developer who co-created Slides.com, a full-featured presentation platform built on top of his open-source HTML presentation framework, reveal.js. At the December 2019 edition of dotCSS, he discussed how he learned programming, the creation of reveal.js and Slides.com, his approach to producing creative visuals and the importance of questioning things.

Learning how to use Flash

So I studied digital animation, which, when I decided to study, I thought was going to teach me about Flash, which I was super-interested in then, having seen Flash websites and what they could do at a time when it wasn’t really possible to do those interactively, graphically rich things with HTML. So that’s when I decided to pick a school based on just wanting to learn Flash. But it turned out my school was more oriented towards animation in terms of video as a medium. So I ended up—and this sounds very counterintuitive—but I bought the ActionScript Bible. I can’t remember if it was a bible or manual. It’s a 2,000-page book, just a language definition for all the things that ActionScript can do in Flash. And I actually started turning, page by page, and looking over all the properties, reading it like you would a novel and understanding what the language was capable of. And then, to find a way to actually use that knowledge, I ended up building a lot of portfolio sites for myself, because you can’t really get information to stick, unless you put it into practice as well. I built, like, six or seven sites in a year. So, eventually, that got me to a point where I knew enough and I was able to feel like I could at least do the basics of Flash.

20 things he learned about browsers and the web

Google’s “20 things I learned about browsers and the web” was a really eye-opening moment for me in terms of what HTML and JavaScript could do. At the time, Google was very heavily promoting what HTML5 could do, and we were kind of spearheading implementing those things at that specific time. So they really wanted good demonstrations of what HTML could do and then they got in touch with us because they’d seen some of my projects, and that led to building that at my employer at the time, Fantasy Interactive. And it was a really fun opportunity, because Google allowed us to go really wild, to use as much as possible from what HTML5 was introducing in one project. So we built this book that teaches you about the basics of how browsers and the web works. And we used canvas for a flip-page effect, so you flipped pages of the book graphically, and we used the history API to update the URL, and we started using Application Cache to store parts of the book offline and make that available without having an Internet connection, and many, many other things as well. People saw it and were impressed by it, like, ”Wow, so this is possible with HTML now.” So it was really fun.

Creating an open-source HTML presentation framework

So reveal.js—which is my personal HTML presentation framework and is open source—is something that started because I was giving a tech talk at a small meetup in Stockholm and, at the time, you had to pay money for PowerPoint or Keynote. I didn’t have either installed on my computer and I thought, “How hard would it be to build this with HTML?” I’d learned what HTML can do and, at the time, what CSS could do as well, with transforms and transitions in particular. So I just tried to build my own slides that I was going to present, and that’s kind of how reveal.js was born, because the format I came up with, which was very simple—it had this kind of 3-D rotation of the slides—drew a lot of attention. People got interested and I released it, released the source code, and from there it very organically turned into a framework that a lot of people started using.

Starting with a blank canvas to enhance creativity

When I start working on more experimental projects—because I’d like to put those in a separate category—I work on a lot of graphical things that serve almost no purpose except being visually interesting and pleasing, enjoyable and interactive. And when I work on something like that, I always try to start with a completely blank canvas. I have a very rough idea of what I want to do, maybe. I’ve often started out without an idea at all, and just kind of sat down at the computer. I think the HTML5 canvas elements especially, which are what I really fell in love with, kind of let you do that, because it is literally just a canvas that you can draw things on. You can put pixels on it. So you start by putting a pixel on the screen and then you add a four loop around it and now you’re drawing a hundred pixels, and then you maybe move them a pixel a time, and you start to see things moving. And I think, when I see something happening on the screen like that, I start picturing different options for what it could do and I exchange a variable and that whole process is what really kind of inspires the ideas, I think. And I never really know exactly what I’m doing when I’m setting out to work on one of those projects—I think that defeats the purpose, because it’s a really visual play for me to sit down and just kind of build something. If I had a perfect idea of what I wanted to do from the start, I 100% think I would fail to do it. I think you make some of the best decisions when you’re in the middle of the process, not before you start, when you’re planning everything out, because you don’t know what all the factors are going to be then. You make some of the more interesting decisions if you can actually see the thing and can change it quickly. I think it’s really important to allow yourself to work on really meaningless things. I talk a lot about how useful it can be to work on things that don’t really serve a purpose, because when you do, you allow yourself to use a completely different set of parameters, which can really free you and allow you to work in a very different way, which is creatively—and we’re all creative. There’s not one brand of creative developer and another of non-creative developers.

Taking time to experiment out of work hours

I think if you want to really get into the kind of things that I work on, with experimenting with UI concepts and other types of visual programming, you really have to do it outside of work, because the parameters of work don’t really allow for it. It depends on where you are, and if it’s at a medium-to-large company, it’s very hard to find room for that. It’s also very hard to get approval for working on those types of things. So it’s been a lot easier for me to do that sort of thing during my personal projects, and I think that’s the best way to do it, because you don’t set so many expectations for what it needs to be. You let yourself roam free and just build whatever it is that you want, and there’s really no pressure if you’re failing. If it doesn’t end up being what you wanted to build, you don’t have to have this perfect plan for what you want to do and deliver on that. You can really let loose and experiment. I’m not saying everybody has ample free time to work on programming day and night, but it’s really hard to do it within a work setting. Even though you can try, you’re always going to be kind of limited by pressure to deliver something, which really suppresses that whole creative flow, because now you’re feeling like it’s not really a creative process anymore, it’s just something that you need to deliver on and accomplish.

Keep questioning existing things

When I build Slides now, I allow myself lots of time to really experiment with some very niche parts of our UI that I’ve been annoyed by in other places. So for example, I built this hover menu, where you go over a button, the menu appears, and when you cross from the button to the menu, the menu won’t go away because I drew a dynamic-hit area for it. So when you cross that distance, the menu remains visible. And I think that technique… I just started with a realization that I was frustrated by the current implementation that I had. Then I try to challenge myself to find a better way to do it, and I always try to apply that frame of questioning to whatever I’m working on. Whatever I’m looking at, if I’ve implemented it, I think, “How could this work differently? Why does it work this way?” Even for fundamental things. So I’ll build custom versions of components just to really learn how they work and what the factors are. For a hover menu, even though I’ve already seen a lot of them that have worked poorly, it doesn’t mean that they couldn’t work better and, after a while, you just start accepting things because of the way they are. You forget to question them. So it’s really, really hard to remember to keep questioning what you’re doing and looking at it with fresh eyes. It’s really a superpower for the people who are able to do that.

Turning an open-source project into a business

The thing I’m most proud about that I’ve worked on is the evolution of reveal.js to Slides, which I’m working on today. Being able to work on a project that was initially only an open-source project, and turning that into a business that is profitable, has been something that makes me immensely proud. I always wanted to start my own company. I was itching to do that and I was always imagining that I wanted to do that eventually. I never thought it would happen so organically from working on something just for the fun of it, a passion project. reveal.js is just open source that gradually led to something that actually pays my bills today and allows me to go back to what I was working on in the very beginning and experiment more and take my time working on the things I really enjoy.

Limitless hardware

I’m mostly excited about the performance we’re getting out of browsers now. There are a lot of technologies that are exciting as well, but I think, generally speaking, working on an application that is relatively complex, and seeing what is possible with JavaScript engines on every device today, is super-empowering. We built our very complex presentation editor for Slides that I worked on, and it was actually very simple to get that whole thing to work on my phone as well. And that just goes to show how thankful you can be for living in a time where we have these supercomputers in our pockets and everywhere. So I’m not excited about a specific technology, I’m excited about where hardware is today and how it feels essentially limitless in terms of what we can already do today and there’s really nothing holding us back. I think that’s super-exciting.

This article is part of Behind the Code, the media for developers, by developers. Discover more articles and videos by visiting Behind the Code!

Want to contribute? Get published!

Follow us on Twitter to stay tuned!

Illustration by WTTJ