First steps
The first step was to create an account on Digital Ocean (DO). It was easy and straightforward, although I'm not a big fan of having to add a credit card number for a supposedly free service.
As Dwindle will be a static app, I opted for the Starter plan, which is free:
That plan has the option to deploy from GitHub –nice!–, so the next step was to create a GitHub repo for the project (that I called Dwindled by mistake).
The steps to connect the repo with Digital Ocean were also really easy to follow. My only problem was that I initially just had the README and the License files and it didn't connect correctly. I had to create a really basic index.html to link the repo with DO.
<!doctype html>
<html lang="en">
<head>
<title>Dwindle</title>
</head>
<body>
<h1>Dwindle</h1>
</body>
</html>
Once the index.html was online, Digital Ocean detected the repo successfully and it automatically ran an initial build and deployment of the app.
It had a URL for the project –dwindled-plzb3.ondigitalocean.app– and I was able to visit it:
One thing to point out, the site includes automatic HTTPS, so the page is secure over SSL. And DO doesn't add any additional code to the page (something I've seen other free services do.)
Hackathon notes
According to the post announcing the hackathon, I have already completed some of the steps:
- Selected a category (the app doesn't fall in any of the three main categories, so Random Roulette it is).
- Created a Digital Ocean account.
- Created the app on Digital Ocean platform.
- Used a valid license (MIT)
And the rest of the steps probably need to wait until the app is completed. Cool! And there are bonus points for:
- Writing about the process (what I'm doing right now, yoohoo!)
- Using the Deploy to DO button on the app... don't know what that is, I'll read about it in a sec.
Ok... adding the Deploy to DO button was super easy too following the instructions on the documentation.
I also got to look into Digital Ocean's settings and billing options, and added an alert in case I get charged:
In theory, it shouldn't happen as I'm in the Starter plan and the app shouldn't take much build/deployment time, but better safe than sorry. It would be nice to add the alert before you incur any expense, but it is not clear if there's an option for that.
Enough of Digital Ocean settings for now. Let's focus on the app.
Dwindling!
I want to keep the page simple, or as simple as possible. It will only have a few elements:
- Logo
- Instructions
- Textbox
- Character counter
- Submit button
- Dropdown to pick the language (optional, as English only for now)
Metadata
But before even starting coding that, we are going to work on the hidden part of the website. Content that is there, but people don't see and it is key for proper visualization, social media, and SEO: the metadata.
We are going to add:
- Character set
- Viewport
- IE support tag (although probably not needed anymore)
- Meta-information (author, keywords, description)
- OpenGraph meta-information
- Twitter card meta-information
- Favicon
That is a lot! But it will ensure that we get 100% in the SEO tag when we run Lighthouse.
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Alvaro Montoro (alvaromontoro@gmail.com)" />
<meta name="keywords" content="dwindle,twitter,text.shortener" />
<meta name="description" content="Dwindle sorts text to fit in Twitter's 280-characters limit." />
<meta property="og:title" content="Dwindle" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dwindled-plzb3.ondigitalocean.app/" />
<meta property="og:image" content="./images/thumb.png" />
<meta property="og:description" content="Dwindle sorts text to fit in Twitter's 280-characters limit." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://dwindled-plzb3.ondigitalocean.app/" />
<meta name="twitter:title" content="Dwindle" />
<meta name="twitter:description" content="Dwindle sorts text to fit in Twitter's 280-characters limit." />
<meta name="twitter:image" content="./images/thumb.png" />
<link rel="author" href="https://twitter.com/alvaro_montoro" />
<link rel="shortcut icon" href="./fav.ico" type="image/x-icon" />
<link rel="icon" href="./fav.ico" type="image/x-icon" />
There are many more that we could add, but let's move on for now. Another thing for the to-do.
Monetization
On top of that, we are going to add the monetization meta-tag. This way, we could get donations from users while using our app:
<meta name="monetization" content="$ilp.uphold.com/WUdKN2pAgLAG" />
Or even better, maybe we could add different languages as an extension if they activate the monetization. That way we can practice the code later. Let's add that to the list of nice-to-haves.
Styling and code
With that, the only thing left to complete the "hidden" part would be adding the styling and the code. We don't have any yet, but we can create empty files and point to them:
<script src="./js/code.js" defer></script>
<link rel="stylesheet" href="./css/styles.css" />
They will soon be used... but for now, we will only add basic styling to place the title on the center of the page.
Another cool thing is the interaction between GitHub and Digital Ocean: as soon as I push code to the repo, DO detects the changes and triggers an automatic build and deploy.
Summary of the day
Positives:
- GitHub repository set up
- Digital Ocean set up and with nice features (automatic HTTPS, automatic deployment from GitHub, free...)
- First iteration of the app is live (even if it's just the skeleton)
Not so positives:
- It is unclear if it's possible to prevent Digital Ocean from making a charge.
- Only 9 days left!