Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

Jill's Husband

Digital Ocean Hackathon App: initial prototype

dohackathon hackathon digitalocean

We have the metadata and the basic skeleton of a page, but we are missing the most important part: the content!

As mentioned in the previous post, we want to have:

  • Logo
  • Instructions
  • Textbox
  • Character counter
  • Submit/Dwindle button
  • Dropdown to pick the language (optional, as English only for now)

We could even have a decode/encode option as an extra... but that would come later. Another addition to the to-do list 😅

Note: I am not a designer, so many of the things in the sections below may be terrible for web design. Forgive me in advance.

Inspiration

This app is going to be a "translation app": it will take some text in a language (English), and it's going to translate/encode it into a different language (in this case a shortened English version).

So we are going to look at translation/encoding sites for reference. I can think of three from the top of my head:

  1. Google Translate
  2. Bing Translator
  3. URL Encoder
  4. Base 64 Code

All four services look quite similar:

  • Two boxes: one for entry and one for output (the alignment is horizontal in translators, and vertical in encoders).
  • One action button (which does different things in translators vs encoders).
  • Some options (more in the encoders than the translators, probably the reason why the boxes are vertically aligned).

Screenshot of URL encoder page

URL Encoder's design looks a bit basic but it's really usable

Based on this, our initial element list is missing a textbox: the one for the translation/encoding.

The app should probably go with a design closer to the encoders, but I personally like the design from Google, which is horizontal on large screens and vertical on smaller ones.

Screenshot of google translate from English to Spanish, with the sentence "hello world"

Google's design is responsive and clean

That design is really convenient for translators because they don't have many options, but doesn't work that great with encoders with options... will Dwindle have many options? Can we put them on top instead of in-between?

Sketching/Designing

In this case, these are questions that we'll answer while we create a prototype/demo. I started sketching without weighing too much into them.

This is an initial sketch:

Sketch of the screen with two boxes side by side and the button overlapping both on large screens, while one box on top of the other with the button in between them for small screens

Sorry for the potato quality 😳

The idea is based on Google's design (design) and tries to look like the translation pages on larger screens, and like the encoders on smaller screens.

Prototyping

This is how the <body> looks after adding the different elements of the sketch into the code:

<header>
  <h1>Dwindle</h1>
</header>
<main>
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Pellentesque habitant morbi tristique senectus et
      netus. Vitae tempus quam pellentesque nec nam aliquam sem. Arcu dui vivamus arcu felis bibendum ut. Sit amet risus
      nullam eget felis eget nunc.
    </p>
    <div class="form-control">
      <textarea name="text"></textarea>
      <button id="dwindle-button">Dwindle</button>
      <textarea name="result"></textarea>
    </div>
  </div>
</main>
<footer>
  2020 &copy; &Aacute;lvaro Montoro.
</footer>

Which will generate something like this:

Screenshot of Dwindle with the elements needed for the sketch above, but in plain HTML: title, instructions, one textarea, a button, another textarea, the footer.

No options and no styles for now

It looks ugly, but it needs to look ugly because it doesn't have styles. We want to make sure that it works. There's always time to get creative and do something fancy.

So time to do a little JavaScript!

...Although sorry to burst the bubble, the initial JavaScript is going to be incredibly simple. It will just copy the text from one textarea to the next one... maybe we can add a couple of changes to claim it works just fine.

This is the code:

const button = document.querySelector("#dwindle-button");
const fromBox = document.querySelector("#text");
const toBox = document.querySelector("#result");

function dwindle(text) {
  return text.replace(/ one /ig, " 1 ");
}

button.addEventListener("click", function (e) {
  const originalText = fromBox.value;
  const transformedText = dwindle(originalText);
  toBox.value = transformedText;
});
Many unnecessary steps, but goal is readability

We ran it on the browser and...

Two text boxes and a button in between. The first textbox says "Hello World! I have one car!" ("one" is written in letters), while the second box says "Hello world! I have 1 car!" ("1" is written in numbers).

Holy shrinkage*, Batman! It works!

It works! Let's stop everything and complete the submission! ...Wait, no? I'm been told that we are not done yet! This is only a simple replacement that won't work that great anyway... Ok... I guess it makes sense...

But now that we know that it works, it's time for the fun part: expanding the app and making it look pretty.

For the "look pretty" part, we'll follow the design above. For the expansion, we want to include many other replacements, not just "one" for "1":

  • Transform from plain English to "text-message" English
  • Replace certain numbers for their number equivalent
  • Replace company names for their stock market symbol
  • Remove unnecessary spacing.
  • Replace certain celebrity names for their Twitter handlers
  • ...any other rule we can imagine.

Let's do this!

Metrics

One important thing to keep an eye on is the app metrics. We are going to use Lighthouse (incorporated in Chrome) for performance, SEO, accessibility, and best practices; and WebAIM Wave to get a slightly deeper look into web accessibility.

Screenshot from Lighthouse results: every section is at 100

This numbers look good 😊

Also, as part of the accessibility testing, I'll use the keyboard and a screen reader (Chromevox, which may not be the best, but it is handy for this.)

Digital Ocean

On a side note: it is great seeing how every time I push code to the GitHub repo, I can go to the website, and within seconds the updates are there. Amazing!


Summary of the day:

Positives:

  • The prototype works!
  • Digital Ocean doing a great job at detecting changes and rebuilding.

Not so positives:

  • Need to find an English to "text-message" English dictionary.
  • Only 8 days left!

*This is an actual quote from the 60's Batman TV show.

Article originally published on