6 ms·

A masochist's guide to web development

285 points by sebtron 1y ago

udev4096 1y ago
What's with the use of port 48 for SSL? Any particular reason?
- sebtron 1y ago
  Ah, that's a good question. It's kinda random (except that the name of the solver is "H48"). Setting up that web app required some extra HTTP headers (I explain that in the post), and the easiest way I found to do that without messing up the rest of my website was using a different port. https://h48.tronto.net https://h48.tronto.net redirects there too. Later I looked into a better way to do this, but I could not fully work it out. I use OpenBSD's httpd, which does not support setting extra headers, and relayd. At some point I'll take a look at this again, or I'll move the tool to another domain.
wmichelin 1y ago
`var myLibraryInstance = away MyLibrary();`
lerax 1y ago
Masochist? that's much more sane than the js clusterfuck ecosystem
- deleted 1y ago
  [deleted]
- deleted 1y ago
  [deleted]
- rapind 1y ago
  "Clusterfuck" is implicit and may be omitted.
broken_broken_ 1y ago
Good article, I also have a C program (a compiler) that I would like to compile to webassembly to offer a playground web page, so that is good information. Thank you! About the file system stuff: modern browsers ship with SQLite which is available to JavaScript (is it available to webassembly? No idea) so I would probably use that instead. Ideally you could use the sqlite API directly in C and emscripten would bridge the calls to the browser SQLite db. Something to investigate.
lscharen 1y ago
> Notice I have changed the extension from .js to .mjs. Don’t worry, either extension can be used. And you are going to run into issues with either choice As someone that has used module systems from dojo to CommonsJS to AMD to ESM with webpack and esbuild and rollup and a few others thrown in ... this statement hits hard.
- bubblyworld 1y ago
  Yeah, modules in jsland are just trauma... now we have import maps in the browser too. Let's see what kinds of fun we can have with those.
  - ajayvk 1y ago
    A recent improvement in import map support in the browser https://shopify.engineering/resilient-import-maps https://shopify.engineering/resilient-import-maps
    - hdjrudni 1y ago
      The interesting bit is this: https://philipwalton.com/articles/cascading-cache-invalidation/ https://philipwalton.com/articles/cascading-cache-invalidati... Without that one sentence, the entire article is moot because I thought bundlers solved the problem. I haven't thought about that in years. I didn't realize it had been solved. Browser support looks pretty good. I guess now I have to figure out how to get this to play nice with Vite and TypeScript module resolution.... and now it's starting to hurt my brain again, great.
- SCLeo 1y ago
  Yeah, the commonjs to esm transition has been the python 2 to python 3 transition of JavaScript, except the benefits are limited (at least compared to the hassle created). There are many libraries that have switched to esm only (meaning they don't support commonjs), but even today, the best way to find the last commonjs version of those libraries is to go to the "versions" tab on npm, and find the most downloaded version in the last month, and chances are, that will be the last commonjs version. Yes, in a vacuum, esm is objectively a better than commonjs, but how tc39 almost intentionally made it incompatible with commonjs (via top-level awaits) is just bizarre to me.
divbzero 1y ago
I always assumed that compiling code to run in the browser would be slow, but OP points out that this is not the case. As the Emscripten project describes: > Thanks to the combination of LLVM, Emscripten, Binaryen, and WebAssembly, the output is compact and runs at near-native speed. https://emscripten.org/ https://emscripten.org/
- RobRivera 1y ago
  Yellow bus syndrom in action for me today. Last week I never heard of Emscripten. Integrating SDL for a project, there were CMake callouta for APPLE, MSVC, and EMSCRIPTEN. And here we are seeing it again on hn in a few days. I should put an afternoon aside for some deep diving on it for context.
  - scubbo 1y ago
    > Yellow bus syndrome in action for me today There's a certain irony to being able to introduce you to the term "Baader-Meinhof Phenomenon" (which is the more-common name for what I assume you're referring to, as Google searches for "Yellow Bus Syndrome" didn't bring anything up for me). Now you know the name, you'll see it everywhere!
    - 57473m3n7Fur7h3 1y ago
      The colloquial term they were misremembering is “yellow car” effect.
      - phatskat 1y ago
        Funny, I always called it “the GTA effect” as in either Grand Theft Auto 1 or 2, one of the top-down ones, once you got a particular kind of car you would see more of that same car on the road. I don’t know if it was an optimization strategy or just me falling victim to the effect I ascribed to the game.
        57473m3n7Fur7h3 1y ago
knallfrosch 1y ago
Nice writeup! You definitely chose a pretty hard way, but the project setup is always the most complex part. Bonus points for immediately running into security/header issues, but my bet would have been CORS. At $WORK, we're also building with emscripten/C++. We'll add WebGPU/shaders and WebAudio for bonus pain.
socalgal2 1y ago
There is more here that is likely to cause problems in the future. One is the author's use of var instead of let or const. var continues to work but most JS devs have linters that ban the use of var. The issue is, var has function scope, not brace scope. Most non-JS devs coming from other languages will eventually run into this issue. Another issue porting native apps is, native apps are compiled for a specific platform and hardcoded to that platform's conventions. A good example of this is hardcoding Ctrl-C (copy), Ctrl-V (paste) at compile time, which maybe works on Linux and Windows but doesn't work on Mac. IIRC the way you're supposed to handle this on the web is listen for copy and paste events. AFAIK Unity has this issue. They hard coded Ctrl-C, Ctrl-P and so copy and paste don't work on Mac. Most games don't need copy and paste but once in a while someone does something that does need it, then exports to the web and runs into this issue.
maximevince 1y ago
Thanks for this wonderful writeup!
apatheticonion 1y ago
God I hate multi-threading on the web/nodejs. Rather than implementing syncronization primatives like mutexes or rwlocks that capture the contained values and make them "transferrable" between JavaScript contexts (v8 isolates) - they introduced SharedArrayBuffer that is almost entirely unusable for anything meaningful. Syncronizing between threads involves thunking and copying data through RPC layers. Sucks for me because our production app has grown faster than we are able to rewrite it and uses 70-100gb of ram (written before my time). To try to get around this, we are investigating exotic solutions like using native code to manually manage pages of shared memory that contains custom data structures and as little serialization/deserializing logic as possible - but of course v8 uses utf16 for string encoding which means working with JavaScript values in the native layer is expensive.
- knallfrosch 1y ago
  100GB of RAM — I'm curious, why is this a web app? Sounds like an internal tool that could have been written in, for example, C#.
  - jiggawatts 1y ago
    Microsoft doesn’t exist in the hive mind of Silicon Valley. That’s the only reason. “We’d rather spend 3x the effort to bash things with open source rocks than ever use a proprietary hammer!” “.NET is open source. It also comes with a steam roller.” “We’ve made up our minds!” PS: I just had to work on a Node.js app for the first time in my career. After dotnet core it feels like working with children’s wood blocks.
    - apatheticonion 1y ago
      Similar experience here. Though I moved from C# to Rust and it's become my favorite language of all time. I'd write everything in it if I could, haha
      - jiggawatts 1y ago

285 points by sebtron 1y ago

udev4096 1y ago

What's with the use of port 48 for SSL? Any particular reason?

sebtron 1y ago
Ah, that's a good question. It's kinda random (except that the name of the solver is "H48"). Setting up that web app required some extra HTTP headers (I explain that in the post), and the easiest way I found to do that without messing up the rest of my website was using a different port. https://h48.tronto.net https://h48.tronto.net redirects there too. Later I looked into a better way to do this, but I could not fully work it out. I use OpenBSD's httpd, which does not support setting extra headers, and relayd. At some point I'll take a look at this again, or I'll move the tool to another domain.

wmichelin 1y ago

`var myLibraryInstance = away MyLibrary();`

lerax 1y ago

Masochist? that's much more sane than the js clusterfuck ecosystem

deleted 1y ago
[deleted]
deleted 1y ago
[deleted]
rapind 1y ago
"Clusterfuck" is implicit and may be omitted.

broken_broken_ 1y ago

Good article, I also have a C program (a compiler) that I would like to compile to webassembly to offer a playground web page, so that is good information. Thank you! About the file system stuff: modern browsers ship with SQLite which is available to JavaScript (is it available to webassembly? No idea) so I would probably use that instead. Ideally you could use the sqlite API directly in C and emscripten would bridge the calls to the browser SQLite db. Something to investigate.

lscharen 1y ago

> Notice I have changed the extension from .js to .mjs. Don’t worry, either extension can be used. And you are going to run into issues with either choice As someone that has used module systems from dojo to CommonsJS to AMD to ESM with webpack and esbuild and rollup and a few others thrown in ... this statement hits hard.

bubblyworld 1y ago
Yeah, modules in jsland are just trauma... now we have import maps in the browser too. Let's see what kinds of fun we can have with those.
- ajayvk 1y ago
  A recent improvement in import map support in the browser https://shopify.engineering/resilient-import-maps https://shopify.engineering/resilient-import-maps
  - hdjrudni 1y ago
    The interesting bit is this: https://philipwalton.com/articles/cascading-cache-invalidation/ https://philipwalton.com/articles/cascading-cache-invalidati... Without that one sentence, the entire article is moot because I thought bundlers solved the problem. I haven't thought about that in years. I didn't realize it had been solved. Browser support looks pretty good. I guess now I have to figure out how to get this to play nice with Vite and TypeScript module resolution.... and now it's starting to hurt my brain again, great.
SCLeo 1y ago
Yeah, the commonjs to esm transition has been the python 2 to python 3 transition of JavaScript, except the benefits are limited (at least compared to the hassle created). There are many libraries that have switched to esm only (meaning they don't support commonjs), but even today, the best way to find the last commonjs version of those libraries is to go to the "versions" tab on npm, and find the most downloaded version in the last month, and chances are, that will be the last commonjs version. Yes, in a vacuum, esm is objectively a better than commonjs, but how tc39 almost intentionally made it incompatible with commonjs (via top-level awaits) is just bizarre to me.

divbzero 1y ago

I always assumed that compiling code to run in the browser would be slow, but OP points out that this is not the case. As the Emscripten project describes: > Thanks to the combination of LLVM, Emscripten, Binaryen, and WebAssembly, the output is compact and runs at near-native speed. https://emscripten.org/ https://emscripten.org/

RobRivera 1y ago
Yellow bus syndrom in action for me today. Last week I never heard of Emscripten. Integrating SDL for a project, there were CMake callouta for APPLE, MSVC, and EMSCRIPTEN. And here we are seeing it again on hn in a few days. I should put an afternoon aside for some deep diving on it for context.
- scubbo 1y ago
  > Yellow bus syndrome in action for me today There's a certain irony to being able to introduce you to the term "Baader-Meinhof Phenomenon" (which is the more-common name for what I assume you're referring to, as Google searches for "Yellow Bus Syndrome" didn't bring anything up for me). Now you know the name, you'll see it everywhere!
  - 57473m3n7Fur7h3 1y ago
    The colloquial term they were misremembering is “yellow car” effect.
    - phatskat 1y ago
      Funny, I always called it “the GTA effect” as in either Grand Theft Auto 1 or 2, one of the top-down ones, once you got a particular kind of car you would see more of that same car on the road. I don’t know if it was an optimization strategy or just me falling victim to the effect I ascribed to the game.
      - 57473m3n7Fur7h3 1y ago

knallfrosch 1y ago

Nice writeup! You definitely chose a pretty hard way, but the project setup is always the most complex part. Bonus points for immediately running into security/header issues, but my bet would have been CORS. At $WORK, we're also building with emscripten/C++. We'll add WebGPU/shaders and WebAudio for bonus pain.

socalgal2 1y ago

There is more here that is likely to cause problems in the future. One is the author's use of var instead of let or const. var continues to work but most JS devs have linters that ban the use of var. The issue is, var has function scope, not brace scope. Most non-JS devs coming from other languages will eventually run into this issue. Another issue porting native apps is, native apps are compiled for a specific platform and hardcoded to that platform's conventions. A good example of this is hardcoding Ctrl-C (copy), Ctrl-V (paste) at compile time, which maybe works on Linux and Windows but doesn't work on Mac. IIRC the way you're supposed to handle this on the web is listen for copy and paste events. AFAIK Unity has this issue. They hard coded Ctrl-C, Ctrl-P and so copy and paste don't work on Mac. Most games don't need copy and paste but once in a while someone does something that does need it, then exports to the web and runs into this issue.

maximevince 1y ago

Thanks for this wonderful writeup!

apatheticonion 1y ago

God I hate multi-threading on the web/nodejs. Rather than implementing syncronization primatives like mutexes or rwlocks that capture the contained values and make them "transferrable" between JavaScript contexts (v8 isolates) - they introduced SharedArrayBuffer that is almost entirely unusable for anything meaningful. Syncronizing between threads involves thunking and copying data through RPC layers. Sucks for me because our production app has grown faster than we are able to rewrite it and uses 70-100gb of ram (written before my time). To try to get around this, we are investigating exotic solutions like using native code to manually manage pages of shared memory that contains custom data structures and as little serialization/deserializing logic as possible - but of course v8 uses utf16 for string encoding which means working with JavaScript values in the native layer is expensive.

knallfrosch 1y ago
100GB of RAM — I'm curious, why is this a web app? Sounds like an internal tool that could have been written in, for example, C#.
- jiggawatts 1y ago
  Microsoft doesn’t exist in the hive mind of Silicon Valley. That’s the only reason. “We’d rather spend 3x the effort to bash things with open source rocks than ever use a proprietary hammer!” “.NET is open source. It also comes with a steam roller.” “We’ve made up our minds!” PS: I just had to work on a Node.js app for the first time in my career. After dotnet core it feels like working with children’s wood blocks.
  - apatheticonion 1y ago
    Similar experience here. Though I moved from C# to Rust and it's become my favorite language of all time. I'd write everything in it if I could, haha
    - jiggawatts 1y ago