UltraWeather (Development of 2021 version)


Quick note: my tech stack of choice has evolved since I wrote this draft in 2021. UltraWeather 2023 will be developed with the following technology:

Development/hosting platform: Vercel

JS framework: SvelteKit

Language: TypeScript

Templates: Vanilla HTML

Chart library: ChartJS

JS package manager: PNPM


UltraWeather was originally named HyperWeather after HyperDev, the platform it was developed on. (Now known as Glitch). I had a certain way I wanted to see the weather forecast that no weather service provided. Glitch helped me implement my vision by providing:

  1. A simple (and free) method of hosting server-side code
  2. Motivation with a contest

Server-side code was needed to proxy API calls; DarkSky did not allow direct calls from the browser. So, I figured out how to used the Express server on HyperDev. Along the way, I also discovered some other nifty tech based on the Glitch samples I started with.

I renamed HyperWeather to UltraWeather as I ported it to a new platform. “Ultra” is kind of a superlative of “Hyper,” and this new version was going to be better and faster!

I used even cooler tech for the 2021 version:

 20152021
Development/Hosting PlatformGlitchNetlify
JavaScript libraryjQuerySvelte
TemplatesJadePug*
Chart libraryChartistJSChartJS
JavaScript Package ManagerNPMYarn

Netlify

Netlify was the biggest change. The main reason for switching was because Glitch projects take too long to load, especially when the VM is put to sleep. Netlify is blazing fast, even on the free tier! Compare:

  1. hyperweather.glitch.me hosted on Glitch
  2. uw.leftium.com hosted on Netlify

Now, Netlify and Glitch aren’t exactly the same. Glitch gives you a full Node.js server environment, while Netlify mainly just hosts static files. However, Netlify allows you to do server side-side computation via “serverless” functions. Netlify supports a new development paradigm called JAMstack.

I should also mention that the Netlify developer experience is amazing:

  • Very nice integration with GitHub (automatically build and publish your projects when changes are pushed to GitHub.)
  • When developing locally, netlify dev automatically detects my Svelte project and knows how to build/run it.
  • When I edit a local file, the project is automatically built and live-reloaded. Unlike Glitch, this never interferes with your ability to keep editing the file.
  • Automatically loads environment variables from the .env file. No more need to use dotenv!
  • Simulate serverless functions locally! When I first looked into using Netlify Functions, I thought it was going to be a problem to develop/test from a local development environment.
  • There is also an option to share your development server live through a tunnel. It works, but the serverless functions are super-slow for me (takes over 90 seconds to complete a single request.)

The Glitch editor is cool for tiny projects and experiments, but prolonged use gets tiring. I prefer editing files locally in Vim. And although Glitch has a “rewind” system and supports git/GitHub I found it clunky.

Svelte

The second biggest change was Svelte. At first I left the jQuery logic intact and used Svelte for the new features. Later, I started replacing the jQuery code bit by bit with Svelte. For the most part, Svelte was more readable. The only thing I missed from jQuery was the ability to quickly bind a single event handler to multiple DOM objects with just a common class name. I’ve also dabbled in React, but I find Svelte more elegant, expressive, and concise.

I like to use CoffeeScript. Svelte doesn’t support CoffeeScript directly, but CoffeeScript compiles into JavaScript and it usually works. However, there is some Svelte syntax that is incompatible with CoffeeScript. While working on UltraWeather, I finally figured out a work-around.

Svelte reactive declarations (ab)use JS labels in a way that is incompatible with CoffeeScript. So I used to just escape to JavaScript via tick marks. Later, I figured out how to write Svelte reactive code in CoffeeScript by sandwiching it between two snippets of escaped JavaScript:

    `$: {`  ## Start Svelte reactive block.
        console.log 'CoffeeScript allowed here!'
        # And it's Svelte reactive!            
    `}`     ## End reactive block.

Pug

Pug is actually pretty much the same as Jade templates. Just a different name. I really like how I can quickly whip up HTML pages using Pug. Svelte supports Pug unofficially. Sometimes the syntax is a little confusing because Svelte’s template syntax is not valid in Pug. So you have to do a little mental transformation after looking at Svelte documentation. I think the oddest transformation is Svelte template directives like {#if}/{#else} and {#await}/{:then}/{catch} must be indented in Pug, instead of staying at the same level.

svelte-coffeescript-pug

I created a starter project that combines and lets you use Svelte, CoffeeScript, and Pug right out of the box. It’s not difficult, but I found myself doing it over and over (and making the same little mistakes over and over.)

ChartJS

I switched to ChartJS because it supports multiple types of charts in a single chart. I wanted to show the temperatures as lines and chance of precipitation as bars. I started with version 3, but had to revert to version 2 when I couldn’t get the datalabels plugin to work.

I originally used Chartist because its charts looked the best out-of-the-box and it was simple to use.

Yarn

These days there isn’t much difference between NPM and Yarn. Yarn used to be much faster than NPM. The Yarn interface is a little more user-friendly.

Comments

Popular posts from this blog

The Comeback Post

UltraWeather (Original HyperWeather Post)

My Personal Branding Part II: Leftium