This project was created for HackTX 2019. We created it in a single night, and it mostly worked! Haiku.js provides the user with a stress-free JavaScript experience by converting JavaScript code into executable JavaScript code (but in haiku format). The features in this project include

  • Github code import
  • Cherry blossoms on click
  • Lofi beats playing 24/7 in the background
  • A voice reading your generated haiku
  • An executable Javascript Environment

Check out the GitHub Repo

Made with Sriram Hariharan, Chris Nunes, and Suchir Angana

Full demo of the site. Audio wasn’t recorded though so just imagine soothing lofi beats and an automated voice reading out the code.

Inspiration

JavaScript can be a frustrating experience, so we wanted to make something that made the experience more zen. Haiku.js provides the user with a stress-free JavaScript experience by converting JavaScript code into executable JavaScript code (but in haiku format).

Haiku.js splash page

Haiku.js splash page

How we built it

We built the back end using Python and Flask to build our web application. For the front end, we used HTML, CSS (SCSS), and JavaScript.

Challenges we ran into

One of our biggest challenges was getting started. It took us a while to decide on a fun idea that our entire team wanted to work on. However, after getting started, we realized that there wasn’t much documentation online for generating (or detecting) haikus from Javascript code, so one of our biggest challenges was creating that algorithm from the ground up. On the front end, our main challenge was fine-tuning the Web Speech API to work exactly as we wanted, and creating a great UI that isn’t too over-the-top or overwhelming for the user. This would defeat the entire point of our project, so we carefully considered the effect of each addition to the interface.

Code being executed in the haiku.js playground

Code being executed in the haiku.js playground

Accomplishments that we’re proud of

We are extremely proud of the look and feel of Haiku.js. What started as a simple de-stressing idea eventually evolved into a beautiful UI, with additional features of a built-in editor, falling cherry blossoms, calming lo-fi music, a soothing voice reading out the haiku code, and a wise man guiding you along. We feel like these features create the perfect mood that we want users to experience while programming. We are also proud of the algorithm to generate the haikus, which we thought would be simple at first but turned out to be more complicated and interesting than expected.

What we learned

In developing the back end, we discovered how to use NLTK to count the syllables of most words. We also learned how to scrape webpages (GitHub) to get the information we need and convert it into a useable format. On the front end, we learned how to use the Web Speech API and adjust the voice to mimic human inflections. We also learned how to connect the back end and the front end so that the experience is seamless.

What’s next for Haiku.js

As software developers in today’s society, we are all at risk of feeling burnt out and overwhelmed. Our algorithm of converting words to syllables can be adapted to many programming languages. Each language can have its own unique user experience. After all, we all deserve to experience zen.

Haiku.js splash page

Another Haiku.js splash page