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:
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).
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.
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:
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 © Álvaro Montoro.
</footer>
Which will generate something like this:
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;
});
We ran it on the browser and...
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.
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.
Top comments (0)