Digital Ocean Hackathon App: styling and (more) research

While we decide what way to do some of the replacing, we can work on the styling, and also look for sources of data (in particular for text/chat dictionary in English).

Styling

In the previous post, we came up with a design to follow and we can do that for now. Now, it's time to apply it to the website

We can play a little with Grid to create the input boxes and the button in desktop mode, and it will be straightforward on mobile as everything is just displayed vertically:

For large displays, we will have to create a simple grid with 2 columns and two rows. The columns will have the same width, while the rows can adjust automatically to their content.

We will apply the large display when the screen is wider than 600px.

These were some small CSS changes, but it was cool applying them because I got to use some FlexBox, and Grid, and fancy positioning. Come on! I cannot be the only one that really enjoys CSS!

Some other style decisions:

• Limit the width of paragraphs to 60ch to improve readability.
• Increase font size and use sans-serif.
• Organize HTML content a little differently.

Still to decide:

• Color palette.
• More consistent styles.
• Styles of extras and options.
• How the header/footer will look.

Micro-Interactions

There may not be much, but there are already some interactions added: the character count will update on change, the color of the boxes will change on submit...

Those were done in JavaScript and may seem like little things, but in the end, it is the little things that count.

Dictionaries

I found a text/chat dictionary on the Webopedia. It seems really complete (it's huge) but I still need to see how many will really work and if all of them are worth it.

Apart from that, some other "easy" reduced text to produce is numbers. Not too common, they are always shorter in digits than in letters.

One ==> 1 (gain 2)
Ten ==> 10 (gain 1)
Twenty ==> 20 (gain 4)
...

As the goal of the tool is to be used on Twitter, I thought that another dictionary could be one of famous people and celebrities. If their twitter handle is shorter than their name, then we can replace it.

The Wikipedia has a list of 50 and SocialBlade's list has 100. It is not much, but it could do for now.

Barack Obama ==> @BarackObama (gain 0)
Cristiano Ronaldo ==> @cristiano (gain 7)
Justin Timberlake ==> @jtimberlake (gain 5)
...

This also causes the person to be tagged which could be annoying. May need to decide about it later. Maybe make it optional?

Another replacement opportunity would be company names. We can add them either with a tag to their Twitter account or even better with the dollar sign in front of them (no tag, and common in Stock Twitter?). And replace them with their stock symbol.

Google ==> $GOOG (gain 1)
Southwest Airlines ==> $LUV (gain 13)
Visa ==> $V (gain 2)

I could use a list of companies from S&P or the Fortune 500... but after looking at the replacements, I can see. a lot of confusion and issues coming this way.

The company name option is probably something to park or make optional.

JavaScript

Before I continue with this, the code needed a little bit of tweaking. So far all the variables and functions were in the global scope and not well organized. I moved everything into an object, so all the needed elements and functions are encapsulated.

Maybe not a great improvement, but I feel everything looks better and more organized now. Also, it avoids collisions with other function/variable names.

const dwindle = {
  // the DOM elements needed   
  elements: {
    button: document.querySelector("#dwindle-button"),
    fromBox: document.querySelector("#text"),
    toBox: document.querySelector("#result"),
    fromCount: document.querySelector("#text-count"),
    toCount: document.querySelector("#result-count")
  },
  // the reduction/dwindling function
  dwindle: function (text) {
    return text.replace(/ one /ig, " <span class='key' data-original='one'>1</span> ");
  },
  // component initialization: add events, load data, etc.
  init: function () {
    dwindle.elements.button.addEventListener("click", function (e) {
      const originalText = dwindle.elements.fromBox.value.trim();
      if (originalText !== "") {
        const transformedText = dwindle.dwindle(originalText);
        dwindle.elements.toBox.innerHTML = transformedText;
        dwindle.elements.toBox.classList.add("processed");
        dwindle.elements.toCount.textContent = dwindle.elements.toBox.textContent.length;
      } else {
        dwindle.elements.toBox.innerHTML = "";
        dwindle.elements.toBox.classList.remove("processed");
        dwindle.elements.toCount.textContent = "0";
      }
    });

    dwindle.elements.fromBox.addEventListener("input", function () {
      dwindle.elements.fromCount.textContent = dwindle.elements.fromBox.value.length;
    })
  }
}

// initialize the object
dwindle.init();

Another decision: the replacement words will be in separate JSON files organized by language: the key will be the word to replace, and the value will be its replacement:

{
  "one": "1",
  "two": "2",
  "three": "3",
  ...
}

That way, we can get the page, and trigger the loading of those JSON files when the page load finishes and the app is initialized. Making things a little bit more efficient. (Remember that everything will be in JavaScript).

I also got to play with the console too. I always wanted to do something silly and test the different console options like color, grouping, table... Maybe not something to do commonly, but this is a fun hackathon, so...

Metrics

After the latest changes, we ran Lighthouse and Wave and we still got good metrics:

Tools like Wave only catch a certain number of the accessibility issues –some people say 20%, some others say 30%–, what matters is that we keep an eye on them apart from running other manual tests (e.g., use the keyboard or a screen reader):

Now let's keep these numbers going!

Digital Ocean

I kept playing a little bit with the platform, exploring and trying to see what they have and what to do.

I ended up checking the Insights section. It seems a little basic and it is unclear what each of the metrics represents. It would be nice to have some type of quick info/details as they do in other sections.

Jokes aside, it is nice that they offer metrics. It saves me from adding external code (that I didn't want to add to keep the app simple and free).

Summary of the day

Positives:

• Refactored the code to make it easier to follow (for me)
• Played with the console messages
• Got the data to load asynchronously
• Completely changed (or planned on) the replacing function and now it does things!

Not so positives:

• Still a lot of work to do
• Just 7 days left!