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.
Explore more in our section: Tech
20 things he learned about browsers and the web
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.
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
Tech Editor @ WTTJ
- Add to favorites
- Share on Twitter
- Share on Facebook
- Share on LinkedIn