Digital Ocean Hackathon App: Submission!
Tags: dohackathon, hackathon, digitalocean, webdev
Published: 2021-01-08 14:41:57

---
title: Digital Ocean Hackathon App: Submission!
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon,hackathon,digitalocean,webdev
//cover_image: https://direct_url_to_image.jpg
series: Digital Ocean + DEV hackathon
---

## What I built

How many times have you written a tweet just to find out it's too long and it doesn't fit Twitter's limit by just a few characters? **The solution is dwindling!**

> **dwin•dle** _dwĭn′dl_
> _intransitive verb_. To become gradually less until little remains

With [**Dwindle**](https://dwindled-plzb3.ondigitalocean.app/), you can shrink the size of your tweets and make them fit into a single post. No need to register or provide any personal data. No cookies. No ads. No third-party plugins. Just you and your tweets.

### Category Submission: 

Random Roulette

### App Link

[Dwindle App](https://dwindled-plzb3.ondigitalocean.app/): [https://dwindled-plzb3.ondigitalocean.app/](https://dwindled-plzb3.ondigitalocean.app/)

### Screenshots

<figure>
![Screenshot of Dwindle App](https://dev-to-uploads.s3.amazonaws.com/i/o9rl2ui2efwlc2dx944q.png)
<figcaption>Should I tag JLo or not?</figcaption>
</figure>

<figure>
![Screenshot of Dwindle with Lighthouse results](https://dev-to-uploads.s3.amazonaws.com/i/0raz6sc1k6cxhxu5b3u3.png)
<figcaption>Not bad numbers</figcaption>
</figure>

<figure>
![Screenshot of Dwindle showing WebAIM wave results](https://dev-to-uploads.s3.amazonaws.com/i/8tsk7bk0kwrz9nuajc8y.png)
<figcaption>Web Accessibility for the win!</figcaption>
</figure>

### Description

**Dwindle** is a web app that helps to shrink the size of your text so they fit into a single tweet.

It is developed using some refreshing **vanilla JavaScript, HTMl, and CSS**, without any framework or library. Its **main focus is on web accessibility**, so everyone can use the app independently of how they use the web.

It is really easy to use:

1. Write your text in the box
2. Click on the Dwindle button
3. Review the replacements on the result box
4. Press on the "Tweet!" button

As easy as pie... hmmmm... pie... 😌


### Link to Source Code

[Open source available on GitHub](https://github.com/alvaromontoro/dwindled)

### Permissive License

[MIT](https://choosealicense.com/licenses/mit/)

## Background

A few years back, when Twitter had a limit of 140 characters, I developed a small PHP project to help people reduce their tweets and fit in the 140-character limit.

That project was abandoned ([and I lost a nice domain I had](https://dev.to/alvaromontoro/digital-ocean-hackathon-app-dwindle-3fpj#the-app)) and, although it may not make as much sense now as it made back then. I retook it for this hackathon.

New stack. New platform. New everything... I had to code the project from scratch. On the positive side, I could use it to practice some interesting articles I had found on DEV (see reference below).

But I had a couple of things clear: I had to do it right (or at least better) and solve some of the issues I faced before:

- **Focus on accessibility**: use semantic tags, make it screen reader-friendly, make it accessible via keyboard...
- **Use better/modern practices**: load data asynchronously, convert it into a PWA, make it available online...
- **Provide a friendlier interface**: this one is trickier because I'm not a designer, but at least make it responsive.

To ensure we focus on some of those. I ran Lighthouse to test performance and best practices, and Wave to verify web accessibility (apart from other tests with assistive technologies).

The results were superb:

<figure>
![Screenshot of Lighthouse report: everything at 100 + PWA badge active](https://dev-to-uploads.s3.amazonaws.com/i/s7ijgj7k588shi9zvz5a.png)
<figcaption>Yes, that deserves some fireworks!</figcaption>
</figure>

And the accessibility tests were fine too:

<figure>
![Screenshot of Wave report: no errors](https://dev-to-uploads.s3.amazonaws.com/i/bptjd99swqid2xs7rkyy.png)
<figcaption>That deserves some fireworks too!</figcaption>
</figure>

More tests were performed, especially for accessibility, making sure that the app is fully keyboard-friendly and that screen reader users would get notifications of the different actions and possibilities.

### How I built it 

I wrote a [series of posts explaining the process and how it went](https://dev.to/alvaromontoro/digital-ocean-hackathon-app-dwindle-3fpj). Not only coding-wise but the whole process:

- Analysis
- Research and benchmark
- Design
- Development (adding functionality little by little)

I opted to go for a simple stack with **vanilla JavaScript, HTML, and CSS, without using any library or framework**. It was fun to move away from the big frameworks for a change.

This project was perfect to practice some things that I hadn't done in a long time, or that I had not done before but wanted to try:

- Played with the JavaScript console.
- Converted the app into a PWA.
- Practiced keyboard interactions.
- Explored the Digital Ocean platform.

It was the **first time that I used Digital Ocean and it was a great experience**: I used a static site because the app didn't require much more, but the experience was really positive, and will consider trying something with PHP/Node in the future.

The integration with GitHub was amazing (I love it). Pushing changes and seeing them live seconds later? Mind. Blown. Apart from that, I got to play around with different sections (as I explain in the posts) and set alerts (although they were never triggered... which is good 😊).

### Additional Resources/Info 

- [There's more than just console.log()....other useful ways to use the console in javascript](https://dev.to/developer_buddy/there-s-more-than-just-console-log-other-useful-ways-to-use-the-console-in-javascript-17l8).
- [How to build a PWA from scratch with HTML, CSS and JavaScript ?](https://dev.to/ibrahima92/how-to-build-a-pwa-from-scratch-with-html-css-and-javascript-4bg5).
- [Digital Ocean platform](https://cloud.digitalocean.com/).
- [WebAIM: Keyboard accessibility](https://webaim.org/techniques/keyboard/)