“I’m not watching a horror movie tonight but I *am* doing a website migration which is its own kind of horror.”
Microblog
GitLab don’t know how to act this morning. https://status.gitlab.com/
Continuing in my quest for nice Vue DX without build steps… I’ve learned two things:
- Even tho I’m using a downloaded ESM browser version, I can still install the Vue npm package and refer to its types from JSDoc.
- The composition API is much easier to type than the options API.
Turns out you can place this over a function to explicitly type the `this` keyword.
/** @this MyType */
Vue devs, help!
Trying to get type support in regular JS using Vue’s ESM browser build.
Inside of the hasName computed value, VSCode thinks `this` refers to the `computed` object rather than the Vue app. What can I do here?
Another piece of nice-vue-but-no-build-step is using ES modules. That let’s me separate out components into their own files.
Still exploring type support, but adding a jsconfig.json with checkJs turned on is the first step. It kinda misinterprets things when using Vue’s options API, so it might be that the composition API is better for this use case.
I have a personal side quest going to see how far I can push using Vue without a build step, but with similar DX to using a toolchain (except for the sucky parts).
Making template literals nicer to work in was one piece of it.
If you often embed other languages into JS template literals (and you use VSCode) then I have the extension for you.
This baby lets you hit a shortcut, pops open a tab with just the contents of your template literal, and sets the syntax mode accordingly. Now you have full editor support for the given language!
It syncs everything you type back to the original file and saving the tab just saves the original file. It’s a lil weird, sure, but kinda neat.
https://marketplace.visualstudio.com/items?itemName=plievone.vscode-template-literal-editor
Frontend people are scared of YAML and backend people are scared of CSS.
People seem to enjoy my shakes-fist-at-cloud npm rant.
I hate npm so much. I had a situation where I couldn’t work on a project because I couldn’t get the dev environment running locally.
I’ve gotten to the point where I hate even having a build step at all. The benefits are not worth it in the long run.
I feel like I should be able to create a moderately complex website (or even a web app) and it should be able to run for a minimum of five years without needing compatibility updates.
The worst part of this is that the web platform is probably one of the most backward compatible runtimes in the history of computing. You can take some HTML/CSS/JS from 20 years ago and it will probably run just fine in a modern browser now. Build steps ruin this.
If you build a web application with no build steps, you could pick up working on that project a decade from now and not have to worry about not being able to work because of compatibility issues.
There has really never been a better time to ditch build steps. CSS is awesome now. It has variables. It has nesting (maybe not everywhere yet but still).
Code organization? Modern browsers support ES modules, so it’s not like you need one gigantic bundle.
As @jimniels@mastodon.social said, if you are writing JavaScript in VSCode, you are using TypeScript. You get a lot of editor support without actually needing to build anything.
I can’t speak to other frameworks, but Vue works great in the browser without a build step. No, you don’t get to use the official single file component feature, but with ES modules, you can get something kind of close.
There is also Alpine.js which works really great with existing HTML.
I can’t speak to other frameworks, but Vue works great in the browser without a build step. No, you don’t get to use the official single file component feature, but with ES modules, you can get something kind of close.
There is also Alpine.js which works really great with existing HTML.
https://vuejs.org/guide/extras/ways-of-using-vue.html#standalone-script
There has really never been a better time to ditch build steps. CSS is awesome now. It has variables. It has nesting (maybe not everywhere yet but still).
Code organization? Modern browsers support ES modules, so it's not like you need one gigantic bundle.
As @jimniels said, if you are writing JavaScript in VSCode, you are using TypeScript. You get a lot of editor support without actually needing to build anything.
https://blog.jim-nielsen.com/2023/the-flavors-of-typescript/
The worst part of this is that the web platform is probably one of the most backward compatible runtimes in the history of computing. You can take some HTML/CSS/JS from 20 years ago and it will probably run just fine in a modern browser now. Build steps ruin this.
If you build a web application with no build steps, you could pick up working on that project a decade from now and not have to worry about not being able to work because of compatibility issues.
I hate npm so much. I had a situation where I couldn't work on a project because I couldn't get the dev environment running locally.
I’ve gotten to the point where I hate even having a build step at all. The benefits are not worth it in the long run.
I feel like I should be able to create a moderately complex website (or even a web app) and it should be able to run for a minimum of five years without needing compatibility updates.
We’re looking for a backend engineer for NASA projects (US remote). .NET (C#, Web API), Postgres, CI/CD.
I made a lil Simon-style memory game (warning: flashing colors). https://codepen.io/blakewatson/pen/NWBrzrj
For the lazy vanilla JS peeps out there, I submit to you the following:
```
const qs = (selector) => document.querySelector(selector);
const qsa = (selector) => Array.from(document.querySelectorAll(selector));
```
Regarding the Cloudflare app, I used 11ty to generate the frontend site. It uses Alpine.js for interactivity and Pico CSS for styling. Deployed to Cloudflare Pages.
The backend API is Hono running in a Cloudflare Worker. I used Cloudflare’s embedded SQLite database (D1) for data storage.
It was a little bumpy figuring things out, but the docs are pretty helpful. I find Cloudflare’s UI and docs less intimidating than AWS.