Safehou-se

Simplifying down HTML templates to be more accessible and visual

Safehou-se started off as a simple web application built in a two day sprint. The project involved creating Template objects from a user given code template input (after sanitizing the input, of course), which could then be filled in by the user through inputs rather than having to go through the entire code themselves.

The Safehou-se homepage

One of the biggest questions that comes up from Toyhouse users is "how do I edit a template?". Many users are unfamiliar with HTML and struggle with navigating a template. For those uninterested in learning HTML, filling out a template can be a daunting process. Safehou-se is meant to be a solution to this problem.

The project started as Bruhhouse, a site created by Carter. The site offered form versions of a few templates, although the list of accepted templates were a carefully curated list that was manually added to the site. Submitted templates had to be manually added, so the options for templates were somewhat limited.

Working off Carter's prototype, I created Safehou-se (named after one of his aliases). Instead of manually reviewing templates, Safehou-se employs a template language similar to jinja2 or terra. Any template written in this syntax is easily convertable to a Safehou-se fillable form.

An unfilled form

Safehou-se presented some unique challenges. Parsing the Safehou-se syntax was one of the primary challenges, as nested loops, if statements, and content blocks had to be considered. As of now, the application supports all of these features. Additionally, different input types were necessary for different modifiable sections (text, color, number).

A comprehensive guide on how to create an HTML template in Safehou-se syntax can be found here.

Enhancements

Another common question that comes up is changing Bootstrap colors to inline CSS colors (also referred to as custom colors). I decided to do a one-day sprint on November 4 to quickly add this feature as well. HTML that is submitted through the color changer does not need to be in the Safehou-se syntax as it just removes Bootstrap classes and replaces them with inline CSS.

One of the common modifiable sections in toyhouse templates are icons. Toyhouse uses the Fontawesome to let users add fun icons to character profiles. While a few libraries existed online for dropdown menus of Fontawesome icons, many did not suit my specific use case. I ended up building my own JavaScript module for creating a Fontawesome dropdown menu.

Read About My Journey

I have also written several blog posts about my development journey over on my dev blog.