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

Post a Comment

Popular posts from this blog

The Comeback Post

-
Image
The last time I tried growing my hair out was over ten years ago! My mom and me at the beach. When a Korean (pop) artist returns after being inactive for a prolonged period, Koreans call it a "comeback" album/concert. Often they remake their artistic style at the same time. I was sure "comeback" was a bit of Konglish because I never really heard it used outside of Korea, where I hear it all the time. However, a Google search indicates that the term "comeback" is indeed used outside of Korea/Asia. Anyhow, this is my blog's comeback post. I have made some major changes:
Read more

WMO Codes

-
Image
Periodic Table of WMO Weather Condition Codes Unlike some other " periodic tables ," this one uncovers several patterns in the WMO weather condition codes. How can you express the 28 (Open Meteo) WMO weather condition codes as distinct icons and colors? The Open Meteo documentation gives a short description of each code, but the best way to graphically visualize this information in a weather app is not obvious. Open Weather, another weather API, simply hands you everything on a single page . The previous version of my weather app used Open Weather. (My app’s icons were actually from DarkSky, one of the best weather API’s until they were acquired by Apple.) However I was not satisfied with just mapping the 9 icons onto Open Meteo’s 28 different conditions . Open Meteo provides more information, and I wanted to expose it all! Organizing the Codes There are actually 100 unique WMO codes , but Open Meteo only reports a subset of these. Open Meteo groups the codes ...
Read more

Automatic Inbox Cleanup with Two Simple Filters/Rules

-
Image
Automatic Inbox Cleanup with Two Simple Filters/Rules Only 47 important emails reached my inbox out of 1,236 total emails received in October 2023. Last month I received 1,236 emails, but only 47 emails reached my inbox. These were the truly important emails I wanted to see, mostly sent from real people. These are the only emails that triggered a notification on my phone as soon as they hit my inbox. The other 96% of the emails were silently and automatically filed into other categories/labels without a single notification. About once a day, I take a few seconds to check them in bulk. I just scan the subjects and senders to mark a few bulk/automated emails that interest me. Then two keystrokes marks all of them as read. Ten, twenty, a hundred at a time! How can you have your email sorted like this? You just have to add a few custom email filters/rules. Instructions and downloadable Gmail filter files are at the end of this article! TL;DR (Quick Instructions) Instruction...
Read more