Did your jaw drop when you first saw the iPhone 4, which was rendered completely in CSS and JavaScript code?
According to the website where you can view the iPhone, it was created with “no images… just 3,395 lines of CSS code and 335 lines of JavaScript code.”
We talked to the creator of this very impressive project, Vasiliy Zubach, to find out more about him, and learn how he actually made all the thousands of line of code work.
Q&A with Vasiliy
Pingdom: Tell us a bit about yourself.
Vasiliy: My name is Vasiliy Zubach, or TjRus, for short. I’m a web developer (mostly front-end) from Ukraine, working at MacPaw. I was born in the small village of Vorokomle and grew up there with only one goal – to move to a place with great opportunities. When I had just turned 13 years old, I started that journey by entering the Kiev Physics and Mathematics Lyceum. My main goal was to study to be able to get a good job. But that all changed at university, actually during my second course, when I found a good job and became much less interested in studying. However, I did finish my master’s degree in information security in 2011.
Pingdom: How did you get started with web development?
Vasiliy: When I was searching for my first job I was just looking for vacancies and compared them with what I could do, what skills I had, and what I was interested in. It was very clear my main interest was web development. After studying HTML and CSS for about a month, I managed to get offered a job. So in March of 2008 I started my front-end developer career and I’ve not questioned this even once since then.
Pingdom: How did you come up with the idea of making the iPhone 4 in CSS3?
Vasily: One day at my current job a coworker showed me some cool icons made entirely in CSS3. If you know anything about CSS, you would have been amazed just as I was, so when I saw that, I just said to myself “I can do that too and I can make it even better!” But I couldn’t just do the same thing, that didn’t make any senses. So I decided to go further. I decided to make a whole iPhone with icons and everything in CSS3. That was a real challenge, and as far as I knew, no one had done it before me.
Pingdom: How did you build it?
Vasiliy: I have some experience in creating an interactive iPhone from before. About six months ago, we launched an iPhone wallpaper sharing service (ensoul.me). For this service I’ve already developed an iPhone, so to speak, but with images. But that meant that the main algorithm and how pieces of code would have to interact were in my head. From that I just started writing code. In fact, the idea was so strongly stuck in my head that I even thought about it every day, going back and forth to work. At work there were too many other interesting things to do, so the iPhone became something I did with my spare time.
Pingdom: How many hours, in total, did the project take?
Vasiliy: All in all it took about 35 hours. I worked on it for a period of time, about 1-2 hours every day after work and on weekends. That may not sound like a lot, and perhaps it isn’t, but my previous experience helped me understand what needed to be done. That saved time, I think. It was all clear in my mind, and I did not have to redo anything once I had started. So that was the start of success.
Pingdom: What equipment (software and hardware) did you use?
Vasiliy: I worked with my personal notebook, an Apple MacBook Pro with 2.4 GHz Core i7 processor and 8 GB RAM. I’ve actually tried my CSS3 creation on iPad and iPhone as well, and they run, but way too slow. In terms of software I use Espresso for HTML and CSS3 coding, and Coda for writing scripts. At one point I tried to use Adobe DreamWeaver, but it didn’t work very well with the FTP account I was using.
Pingdom: What was the most difficult thing in this project?
Vasiliy: The most difficult part was creating the icons. Some icons are simple, with few lines of code, like Calendar and Notes. Many others were very hard, like App Store, because of the huge amount of gradients and rotations. However, when I had finished it all, I realized there were really no hard parts. I just had to learn a few more things, and all that I can now use in future projects. Drawing every part of the iPhone is simple. Now I can even paint pictures with CSS3! Just kidding.
Pingdom: Can you tell us if you have any future plans to build something else using the same or similar techniques?
Vasiliy: I don’t think that it would be good to tell you all my secrets but I can just say that in the near future I will be revealing something just as cool as the iPhone. Also, an off shoot of the iPhone in CCS3 will be used in another project, to demonstrate an application that I’m working on.
Pingdom: So you’re leaving us with a cliffhanger, that’s not very nice of you. But let’s move on. If someone else is considering starting a similar project, what advice or suggestions would you have for them?
Vasiliy: If you have any ideas for things you want to create or implement, do not put them in the future. Just do it! If an idea appeared in your head, it’s worthy of implementing. Not all may become a full project, but you will learn something from each and every one. Often when I’ve had an idea I tell someone about it, they think I’m just kidding with them. Then I do something with it, like write a piece of code to try it out, and show the same person the result. Often they don’t believe me, saying that they didn’t think it was possible. Every idea should have a chance to come alive. Just do it!
Onto the next project
As we finish our interview with Vasiliy, he’s already on his way to the next project. He won’t tell us what it is, as you could read in the interview, but we’re sure it’ll be something really exciting. Vasiliy has however said that he’ll let us in on some of the cool things he’s working on as soon as possible.
Are you working on something cool and exciting for the web, the Internet, or just tech in general? We would be interested in featuring you here on Royal Pingdom.
To get in touch with us, you can leave a comment below or find us on Twitter, Facebook, and Google+.
