Photo by on . Jantine Doornbos Unsplash I had a problem. I would go to a shop, maybe or , sit down, and realize that somehow I did not have the WiFi password. As I discreetly looked around for the username and password I’d inevitably come to the conclusion that I should just ask the barista as I picked up my drink. Social interaction isn’t the worst thing in the world but it usually results in a finger pointing to a sign, in plain view, that I had somehow missed. coffee Blacksmith Morningstar In order to avoid the situation described above I could just keep a running list of places I’ve visited with their associated WiFi networks and passwords. Or I could scour Foursquare for the comment with the password in it (probably from two years ago). Or I could build a single page website with a nice little 🗺 that holds all the information I need. Glitch Glitch was announced back in the December 2016. (who at the time had just become CEO of ) describes it best: Anil Dash Fog Creek Many geeks of my cohort came of age building things on the desktop using HyperCard or Visual Basic, or by using View Source in their browser to tweak HTML pages that they uploaded to Geocities. The web’s gotten a lot more mature and a lot more powerful, but the immediacy of that kind of creation has been lost. Today, even if you’re a skilled developer, the starting point you’re working from is usually a pile of unassembled parts. Glitch lets you start from a working app (or bot, or site, or whatever) and then remix it into exactly the app of your dreams. It’s an excellent place to take someone else’s template and modify it or host a prototype of an idea you have. The Glitch homepage when you’re logged in. I chose to remix an existing template that was setup to use and a simple map. jquery-csv Mapbox I added some text, modified the CSS a little, adjusted the size of the map on the page, added extra JavaScript from Mapbox for additional functionality, and populated the map with a decent initial cohort of coffee shops. What it looks like when you’re editing code on Glitch. At each step, Glitch automatically updates your site ( ) so you can see what you’re changing in real-time. This removes the headache of setting up a local testing environment and allows you to just build something 💯 insert-whimsical-name.glitch.me Mapbox I’ve always been impressed with Mapbox. Like with most of the top-tier internet companies started in the last decade, they’ve taken something would be very difficult for individual developers to implement over and over and simplified it down to a few short code snippets on a web site. In addition, allows anyone to infinitely customize their maps. Mapbox Studio I experimented with several different map styles but ultimately returned to the standard Streets style. It looks most similar to the Google and Apple Maps style and the usability is 👌🏼. I wanted zoom controls to overlay the map. Zooming in and out of a map on a mobile webpage is sometimes a little difficult and controls alleviate this slightly. In case the map is not automatically centered on the user, a geolocation button was also added. Finally, I added a search box because I would expect that on any map that I’m viewing. In the future I would like to add driving or walking directions from the current user location ☑️ Netlify I bought the domain on early on and knew that I wanted to eventually move off of . I briefly considered hosting on but decided the easiest route was using Github as the server. It’s relatively simple to set up a custom domain using Github Pages but there are always a few quirks. password.coffee Google Domains Glitch Linode I don’t know when I first came across but for whatever reason I came back to it for this. It was far better, faster, and easier than I remembered. Provided you have all the necessary files to build a functioning website, the process of setting up continuous deployment takes under a minute. Really incredible for a site hosted on GitHub, Gitlab, or Bitbucket. Netlify It takes three screens to get set up. You connect your Github (in my case) account and choose the correct . repository First step when creating a new site on Netlify. Then you select any build options, like for Jekyll, and click . jekyll build Deploy Site Deploying a site on Netlify using custom build settings. It took just a few more minutes to setup the custom domain, change nameservers, and enable HTTPS by default. Most of that time was waiting for DNS to propogate. End Overall, I’m pretty satisfied with this first iteration. If you’d like to check it out, just go to . And if you want to update an existing location or add a new one you can do that . password.coffee here

Dash

Apple

Geeks

Google

Instagram

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building password.coffee ☕ ️with Glitch, Mapbox, and Netlify

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Colin Dismuke

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building password.coffee ☕ ️with Glitch, Mapbox, and Netlify

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Colin Dismuke

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES