iiinova — where your digital self keeps evolving

hrbrmstr's Daily Drop [Unofficial] @dailydrop.hrbrmstr.dev.web.brid.gy · 15/07/2024

WinterJS is a new serverside Javascript option developed by Winter Community Group (WinterCG). It's written in Rust, uses Mozilla's SpiderMonkey engine, and can handle over 150,000 requests-per-second. It supports various JavaScript runtimes and can […] [Original post on dailydrop.hrbrmstr.dev]

$<p><em>WinterJS; Echo-Chamber; So. Many. JS. Cheatsheets</em></p> <p>Now that I’ve cranked out a couple JS/WASM chapters in the “Cooking With DuckDB” book, I’ve got JavaScript on the noggin’ so, today, we focus on three different (and fun!) JS-resources.</p> <div class="wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions"> <div> <div> <div> <p> <a href="https://dailydrop.hrbrmstr.dev/?post_type=post&p=139502882" style="font-size: 16px; padding: 15px 23px 15px 23px; margin: 0; margin-left: 10px; border-radius: 0px; border-width: 1px; background-color: #113AF5; color: #FFFFFF; text-decoration: none; white-space: nowrap; margin-left: 0;">Subscribe</a> </p> </div> </div> </div> </div> <h3 class="wp-block-heading" id="winterjs">WinterJS</h3> <p></p> <figure class="wp-block-image size-full"><img alt="" class="wp-image-139502887" height="1258" src="https://dailydrop.hrbrmstr.dev/wp-content/uploads/2024/03/pexels-photo-20681552.jpeg" tabindex="0" width="1880" /><figcaption class="wp-element-caption">Photo by Elena Golovchenko on <a href="https://www.pexels.com/photo/stream-in-a-coniferous-forest-covered-with-snow-20681552/" rel="nofollow">Pexels.com</a></figcaption></figure> <p>As if there weren’t enough choices in “server-side javascript”-land to already cause analysis paralysis, we have a new WASM-y entry into the field with the official release of <a href="https://github.com/wasmerio/winterjs">WinterJS</a> (<a href="https://wasmer.io/posts/winterjs-v1">announcement</a>).</p> <p>Before we talk aboot that, we need to kick back and learn about the Winter Community Group (<a href="https://wintercg.org/">WinterCG</a>) — an organization within the World Wide Web Consortium (W3C) that focuses on developing standards and technologies related to Web Integration Technologies. Some key areas the group works on include:</p> <ul class="wp-block-list"> <li>WebComponents: Encapsulated, reusable custom elements for web applications</li> <li>Service Workers: Scripts that run in the background, separate from web pages, enabling features like offline support, push notifications, background sync, etc.</li> <li>Web App Manifest: JSON files that provide metadata about web applications to enable app-like behaviors</li> <li>Import Maps: Mechanisms to control how JavaScript modules are resolved and loaded in a web page</li> </ul> <p>The goal is to enable more powerful, feature-rich, and superfast web applications through these interoperable technologies and standards. The group collaborates with browser vendors, web developers, and other stakeholders in the web community to define and evolve these web platform capabilities.</p> <p>There are plenty of WinterCG-compatible Javascript runtimes including Bun, Deno, and others (even Amazon’s llrt — mentioned in a recent Drop — has a long-term plan for WinterCG-compatibility). What’s so special about WinterJS?</p> <p>Well, for starters, it is written in Rust, uses Mozilla’s <a href="https://spidermonkey.dev/">SpiderMonkey</a> engine, and can handle over 150,000 requests-per-second (pretty sure that can handle the traffic for any app that I might write). One especially cool feature of it, though, is that it can be compiled down to WebAssembly — specically, <a href="https://wasix.org/">WASIX</a>. This means it can squeeze into places other JS app servers cannot.</p> <p>While I am loathe to encourage normalizing the use of <code>curl-bash</code> idioms, they do make it super easy to show you how to test this out:</p> <div class="wp-block-syntaxhighlighter-code "><pre class="brush: bash; title: ; notranslate"> $ # install wasmer $ curl https://get.wasmer.io -sSfL | sh $ mkdir -p test $ cat<<EOF>test/simple.js addEventListener('fetch', (req) => { req.respondWith(new Response("'sup?")); }); EOF $ wasmer run wasmer/winterjs --net --mapdir=tests:tests tests/simple.js $ # SEPARATE TAB/WINDOW $ curl -s http://localhost:8080/ 'sup? </pre></div> <p>You can also <code>cargo install --git https://github.com/wasmerio/winterjs winterjs</code> to have a proper local binary</p> <p>It can run in a Cloudflare Workers environment or <a href="https://wasmer.io/products/edge">Wasmer Edge</a>, and also supports many frameworks:</p> <ul class="wp-block-list"> <li>Next.js</li> <li>Next.js React Server Components</li> <li>Hono (one I’m presently playing with off-and-on)</li> <li>Astro.build</li> <li>Remix.run</li> <li>Svelte</li> <li>Gatsby</li> <li>Nuxt</li> </ul> <p>It turns out that the migration to WordPress borked <a href="https://dailydrop.hrbrmstr.dev/2024/03/28/bonus-drop-36-2023-12-16-knowl-edge-drop/">Bonus Drop #36</a>, but I just restored it (yay for writing locally in Markdown first!). That covers a self-hosted similar thing by Supabase. It’s not paywalled, so give that a read to see where WinterJS fits into things, and check back for when I get more of a chance to kick the tyres.</p> <h3 class="wp-block-heading" id="echo-chamber">Echo-Chamber</h3> <p></p> <figure class="wp-block-image size-full"><img alt="" class="wp-image-139502885" height="1300" src="https://dailydrop.hrbrmstr.dev/wp-content/uploads/2024/03/pexels-photo-15172344.jpeg" tabindex="0" width="867" /><figcaption class="wp-element-caption">Photo by Magda Ehlers on <a href="https://www.pexels.com/photo/vaulted-ceiling-and-arched-window-of-corpus-christi-chapel-in-kutna-hora-czechia-15172344/" rel="nofollow">Pexels.com</a></figcaption></figure> <p>This resource is just bonkers fun/cool and anyone can get started with it right after reading this section. I’m going to quote the author directly as it says it pretty plainly:</p> <p><a href="https://github.com/tessalt/echo-chamber-js">Echochamber.js</a> is a 3rd-party script you can install to add a simple comment form to your blog post or website.</p> <p><em>Why not just use disqus?</em></p> <p>Because then there’d be a chance that someone would read the comments. You might have to read those comments. You don’t want that.</p> <p>When a user submits a comment, <code>echochamber.js</code> will save the comment to the user’s <code>LocalStorage</code>, so when they return to the page, they can be confident that their voice is being heard, and feel engaged with your very engaging content. It does not make any HTTP requests. Since LocalStorage is only local, you and your database need not be burdened with other people’s opinions.</p> <p>Super fun way to pwn verbose visitors!</p> <h3 class="wp-block-heading" id="so-many-js-cheatsheets">So. Many. JS. Cheatsheets</h3> <p></p> <figure class="wp-block-image size-full"><img alt="" class="wp-image-139502884" height="1253" src="https://dailydrop.hrbrmstr.dev/wp-content/uploads/2024/03/pexels-photo-357514.jpeg" tabindex="0" width="1880" /><figcaption class="wp-element-caption">Photo by Pixabay on <a href="https://www.pexels.com/photo/pile-of-folders-357514/" rel="nofollow">Pexels.com</a></figcaption></figure> <p>Codeacademy has a great set of <a href="https://www.codecademy.com/resources/cheatsheets/language/javascript">JavaScript cheatsheets</a> that are done with a twist. This isn’t some simple three-column JS language map. The sheets have themes like “<a href="https://www.codecademy.com/learn/intro-sql-back-end-development/modules/webdev-sql-manipulation/cheatsheet">Create a Back-End App with JavaScript – SQL for Back-End Development</a>” which give you a head start on digging into an area you’re not familiar with or get you started — quickly — in a new area.</p> <p>They aren’t all-in-one solutions articles; and, you will most certainly have to put in some work and thought. But, they may help you get unstuck or get you pointed in the right direction faster than trying to burn through a tome, or hack-and-pray your way through a new project.</p> <div class="wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions"> <div> <div> <div> <p> <a href="https://dailydrop.hrbrmstr.dev/?post_type=post&p=139502882" style="font-size: 16px; padding: 15px 23px 15px 23px; margin: 0; margin-left: 10px; border-radius: 0px; border-width: 1px; background-color: #113AF5; color: #FFFFFF; text-decoration: none; white-space: nowrap; margin-left: 0;">Subscribe</a> </p> </div> </div> </div> </div> <h3 class="wp-block-heading" id="fin">FIN</h3> <p>Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via <code>@dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev</code> <img alt="☮" class="wp-smiley" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/262e.png" style="height: 1em;" /></p>$

010