DEV Community

loading...

Digital Ocean Hackathon App: Submission!

alvaromontoro profile image Alvaro Montoro ・4 min read

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, 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/

Screenshots

Screenshot of Dwindle App

Should I tag JLo or not?

Screenshot of Dwindle with Lighthouse results

Not bad numbers

Screenshot of Dwindle showing WebAIM wave results

Web Accessibility for the win!

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

Permissive License

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) 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:

Screenshot of Lighthouse report: everything at 100 + PWA badge active

Yes, that deserves some fireworks!

And the accessibility tests were fine too:

Screenshot of Wave report: no errors

That deserves some fireworks too!

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. 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

Discussion (5)

pic
Editor guide
Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Awesome stuff! I love how seamless the keyboard UX is.

Collapse
alvaromontoro profile image
Collapse
ikurosaki profile image
ikurosaki

Perfecta gracias por tu aporte.

Collapse
adrianbdesigns profile image
Adrian Bece

Great job, Alvaro! Congrats on making it on time!

Collapse
suvink profile image
Suvin Nimnaka

This is so cool!