Thomas Park Hops to Easy CSS Development with Flexbox Froggy – InApps 2022

The following interview is part of a series, called Open Source Leaders, where we profile project leaders in the open source IT community, to learn more about how they developed their software as well as the challenges and benefits that come with running an open source project.

Thomas Park is a researcher at Drexel University’s College of Computing and Informatics, where he earned a Ph.D. in human-computer interaction and computing education. Park’s academic research is part of openHTML, a collaborative research project — supported by Drexel, Mozilla, the National Science Foundation, and the University of Nebraska — dedicated to designing better educational tools and practices for helping beginners learn web development.

In his free time, Park works on his own open source projects — one of which is Flexbox Froggy, arguably the web’s best, and absolutely most fun, free resource for learning the ins and outs of the CSS3 Flexbox layout mode. Park is driven by the passion to create computer-based learning systems that are approachable, engaging and, above all, effective. InApps caught up with Park to find out more.

How did you get started with programming?

My first job out of college was with the online education department for Johns Hopkins University’s Center for Talented Youth, designing and teaching online math courses. Eventually, though, I became interested in finding ways to improve on the technological platforms that we used there, which led me to grad school at Drexel. While I had done programming here and there before, Drexel is where I went all in with programming as well as researching how others learn to program. This included my thesis work, an internship at Mozilla Foundation, as well as open source side projects like Bootswatch and Flexbox Froggy.

What are some of your open source project stats?

My most popular open source project is Bootswatch, a collection of open-source themes for Bootstrap, which is the web’s most popular development framework. Bootswatch launched in 2012 and has tallied millions of downloads. It has 52 amazing contributors and 9,250 stars on GitHub.

Flexbox Froggy is coding game for learning CSS Flexbox, which has about 2,175 stars on GitHub. More than 40 contributors have localized the game to 25 languages, even including Esperanto. Grid Garden is a new game in the same vein as Flexbox Froggy, which just went up in March of this year. It already has 17 open source contributors.

What inspired you to create these projects?

Bootswatch started over one weekend as a proof of concept on how one could skin the Bootstrap framework to take on very different looks by modifying and rebuilding the Less source. From the onset, it was evident that people found utility in this, so I continued beefing up the collection of themes and maintaining the project, which continues to this day.

Flexbox Froggy was inspired by other learn-to-code games like CSS Diner, and really kicked into gear when I met CSS Diner’s creator Luke Pacholski one year at the Mozilla Festival in London.

You’ve worked really hard to create three very well known, even influential, OS projects. How do you monetize to get some payback for all the time and effort invested?

My projects are primarily ad supported. In the past, I’ve also generated some consulting and contracting work through the projects, although I’m currently more interested in working directly on my projects currently. I’m working to expand on games like Flexbox Froggy and Grid Garden under the banner of Codepip.

Your contributions are popular in part because they seem to neatly fill in some gaps left by existing resources. What needs are they filling?

Bootswatch gives developers Bootstrap a drop-in solution for their Bootstrap-based site or at least a start point for creating a custom theme. Using Bootswatch is extremely easy, as simple as downloading a CSS file and replacing the one that comes with Bootstrap, so even beginners can very quickly put together a well-designed and attractive interface.

While there are plenty of amazing references for CSS Flexbox and CSS grid, Froggy and Garden give people a fun, approachable, and interactive way of learning the basics. The interactivity is important because it allows people to tinker with the code and gain an intuitive feel for how the properties behave.