At BrowserStack, we rely on various open source projects in order to build world class products. In this new series, we talk to the stand-out developers who have made amazing contributions to the world of open source and bring you their stories.
Featured in this week's spotlight is Álvaro Trigo, creator of fullPage.js. It's one of the first, and simplest, libraries for creating full-screen, auto scrolling websites. Álvaro is a self-taught programmer from Spain and one of the top 5 JavaScript developers on GitHub UK today.
Q: How did you come up with fullPage.js?
Álvaro: At my last full-time job, I had to design a webpage based on the concept of a PowerPoint presentation. So I started looking into different full-screen concepts until I came up with the idea of a full-screen slider. At the time, there was nothing out there for creating this type of page, so I built one myself from scratch.
Back then, I also wanted to learn how to build a jQuery plugin, but I was waiting for a good enough idea to take forward and learn on the way. Then the full-screen concept came to me and it seemed like a great idea for my first jQuery plugin!
To be honest I didn’t expect much. It was, after all, my own little experiment on the side. I remember sending a few emails trying to spread the word about it—see if anyone found it useful. In a matter of days, I noticed the stars on the GitHub project increased by hundreds and people started opening issues and sending me emails about it. And then it snowballed from there.
Q: How did you start monetizing fullPage.js and the extensions?
Álvaro: I didn’t really think about monetizing it at first. It was totally free for 3 years.
Over time, a few developers started asking for certain features that were not available in fullPage.js, and they were willing to pay for them. So I customized the component for some of them on a one-to-one basis and started charging for it.
When more than a few developers began asking for the same features, I thought I could make them available—as extensions to the main component—and charge for them. So that’s what I did.
One and a half years after launching the paid extensions, I made a big change in fullPage.js. I completely rewrote it—along with all the extensions—and I got rid of jQuery dependency. I took this opportunity to change the license, and start charging for use in non-open source projects. There were other JavaScript libraries out there that were doing quite well by charging in this way, so I thought I would give it a try too.
“When more than a few developers began asking for the same features, I thought I could make them available—as extensions to the main component—and charge for them. So that’s what I did.”
It seems it has been quite well received, so I’m quite happy about it. Thanks to it, I can dedicate all my time to fullPage.js and create an even better product. I really believe this is a win-win for all.
Q: What are your favorite development tools?
Álvaro: I definitely can’t live without Chrome DevTools. It has been years ahead of other browsers and it has gained our love and respect for that. It makes web development easier. There are other alternatives nowadays but I still like working with it every single day.
I can’t imagine myself creating websites without Photoshop for prototyping either. Same for designing websites, or any kind of visuals for that matter: from images I post on Twitter to the ones I upload on my blog, on the newsletters, etc.
I also use GitHub every day. I use it for all my open source projects and even for private ones. I find it simple to use and idea for dealing with bugs, issues or even a list of tasks to do.
And BrowserStack. Whenever someone reports an issue, I ask them to provide browser version and device so I can try to reproduce the issue in the exact same environment. This is of vital importance because not all bugs take place in all browsers or devices. BrowserStack allows me to help others and keep improving my open source project.
“Whenever someone reports an issue, I ask them to provide browser version and device so I can try to reproduce the issue in the exact same environment. This is of vital importance because not all bugs take place in all browsers or devices. BrowserStack allows me to help others and keep improving my open source project.”
Q: What does your average workday look like?
Álvaro: I wake up around 10:30 in the morning (I know, I know…). I have a shower, breakfast, and then I open my laptop.
First thing I do is check my email inbox. Every day I get support requests that I have to deal with, then I check the GitHub repositories issues and provide answers to all of them. This takes me about 1 to 2 hours.
Then I get some lunch, rest a bit and I head out to some place to work in the afternoon—a co-working space (Google, WeWork, etc.) or a coffee shop nearby.
I use Todoist prioritize tasks and I go about ticking them off the list. Sometimes it’s fixing bugs in fullPage.js or any related project (React, Angular, Vue, WordPress). Other times it could be about improving my workflow, releasing a new version, recording a video tutorial, enhancing documentation, adding something in the web page, changing online services or even creating new products.
I add a couple of tasks to the list if required. I commit my changes and I go home at around 6-7PM.
Fridays are usually a bit different. I dedicate the evenings to invest in my own knowledge—reading programming books, watching tutorials, or working on side projects that are not related to my main ones.
Q: Which open source projects do you rely on (outside your own)?
Álvaro: Most of the tools I use in my everyday work are open sourced. Gulp, Webpack, npm, Vue, React, Angular, etc. Besides those, some other open source projects come to my mind, such as:
- Chart.js
- Highcharts.js
- iScroll.js
- WordPress
- Audacity
I don’t necessarily use them all directly in my projects but sometimes in the side.
Q: How’d you describe your JavaScript coding pattern?
Álvaro: I wouldn’t consider myself an expert on JavaScript by any means. And I’m not saying it trying to be humble! Bear in mind fullPage.js was my little pet project and I created it to learn how to build a jQuery plugin!
I would say I am still learning every day and trying to improve my coding skills, but if I have to define my style somehow, I would say I try to write easy-to-understand code without much sophistication, emphasizing clarity and maintainability. I usually make use of the module pattern and I tend to work with objects too.
"I try to write easy-to-understand code without much sophistication, emphasizing clarity and maintainability."
Q: What advice would you give to developers who’re new to open source?
Álvaro: Be persistent. We achieve great things not by being great once, but by doing small things a great number of times. If it’s your own project, keep working on it if you see there’s interest for it. You’ll learn plenty of things along the way and it will be able to become something.
When I created fullPage.js there was another open sourced JavaScript library with similar functionality. It was gaining traction, and there was a point when some people started considering using that library over mine. But it motivated me to push myself harder and work harder to provide more value with fullPage.js.
What made fullPage.js stand out and get ahead in the race again was the fact that I kept working on it, day after day. Eventually, the other library stopped receiving updates, solving bugs or answering people on the forum. Soon it lost traction and became one of the thousands of unmaintained open source projects in GitHub.
I quit my full-time job in 2017. I now dedicate all my time to my open source project and everything there is around it. I managed to make a living out of it by selling non-open source licenses for those who don’t want to license their code under GPLv3 license.
Whether you just want to learn, build a better curriculum or create your own project, being consistent over time will help you achieve any or all of them.
"What made fullPage.js stand out and get ahead in the race again was the fact that I kept working on it, day after day. Eventually, the other [competing] library stopped receiving updates, solving bugs or answering people on the forum. Soon it lost traction and became one of the thousands of unmaintained open source projects in GitHub."
Q: What’s the most troublesome bug you’ve come across? How did you fix it?
Álvaro: The use of the tabulation key to change from one focusable element to another. For example, input boxes. Because fullPage.js disables the scroll bar of the site and simulates the scroll by using CSS transformations on full-screen slides, the use of the tab key was completely breaking the site layout and jumping to the next focusable element, which could be in any vertical or horizontal slide. fullPage.js was not able to detect the change in the layout and the scrolling functionality stopped working.
Browsers don't always work the way we would like them to, so developers like us have to come up with little hacks to solve certain issues. After trying different approaches to this problem I came across an article regarding accessibility in the Google Web Fundamentals website. There was a section for the focus feature and some recommendations for its proper use. Within the tabindex option there was a paragraph talking about limiting focusable elements to the ones in the open modal and completely ignoring the rest. That was very similar to what I wanted to do! They even had a link to a code example in Udacity repository to solve the issue.
So after playing with it for a while, I managed to take that concept and adapt it to my needs. Sounds easy explained like this, but the bug took about 3 years to get fixed after being postponed multiple times!
"Browsers do not always work the way we would like them to, so developers like us have to come up with little hacks to solve certain issues."
Q: What do you do in your spare time? Have you created programmatic fixes for real-life problems?
Álvaro: Besides being with friends, I like video and photography. I recently started traveling far away about once a year so I take the opportunity to create small videos and pictures to document the trip. Editing the video takes me some time but keeping a good memory of it is totally worth it. Apart from that, I go to the gym, I like to play squash, table games, watch movies and TV series; nothing out of the ordinary.
I would also consider programming a hobby. I like to have small projects on the side that I like to work on during some weekends too. For example, recently I found myself having to create some invoices in a repeated manner, so I came up with a web development solution to fix the issue and save me some time. Now I’m also considering improving it and perhaps make it available as an online service.
Another time, one of my brothers wanted to purchase a ticket for a Real Madrid football match. New available seats appeared from time to time but he had to reload the page each time to see if there was any new seat available. Every time he tried to purchase one it was already too late, someone else took it before him. I saw him reloading the site again and again and I thought, "Hey! I can help you there! Let me make a JS script."
A couple of hours later, I had the script reloading the site automatically, clicking on the available seats if there were any and going to the purchase form. It even played a loud sound when this happened so he could be away from the screen and be aware there was a potential seat to buy waiting for him to confirm. (Next day the Real Madrid page added a Captcha box for this process, I think it was my fault!)
Q: The people / projects / books / habits that changed your life (and how).
Álvaro: I think there isn’t any particular book or person that changed my life. It is more like a collection of things I guess. When looking back, it seems one simple decision in the past can lead to a whole new world of opportunities in the future, but would our life be totally different if we had chosen a different path? Or will we end up moving towards the same direction no matter what?
If I have to choose, perhaps it was the high school teacher that taught me how to create websites using Microsoft Word when I was 16. Or perhaps the day I decided to enroll in a Computer Science degree. Or the day I applied to one of the job positions that I finally took and where I had the idea of building fullPage.js.
All I know is that I like what I do for work and no matter what, if you like what you do, you’ll end up changing your life in some way or another. In my case, I would say that building fullPage.js has changed my life. I was able to quit my 9-to-5 job and dedicate full time to something I created and that I like working on. Question is, would I have done something similar if I had chosen another path? Perhaps it wouldn’t be fullPage.js, but would it be a different product?
I think being a bit like a kid can be quite powerful in life. Acting from inexperience, free from judgment, energetic, curious, creative. I tend to get excited about my own ideas and believe in them before anyone else does. Perhaps that’s something that helped me along the way. Maybe Steve Jobs was right when he said: 'Stay hungry, stay foolish.'
Check out fullPage.js on GitHub.
(Responses are edited for clarity).
We ❤️ open source. Fill out this form to get free, unlimited access to BrowserStack for your project's testing needs.
