Reactivity News #17
Repost of Reactivity News November 2021 edition, my Svelte focused newsletter
In this edition: SvelteKit, cool libraries and new bundlers
Svelte Trunk#
Four new releases last month. Svelte is currently at v3.44.1
https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md
SvelteKit Trunk#
Currently at v1.0.0-next.192 and at 82% done towards 1.0
https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md
News and Interesting Links#
Transitional Apps
Rich Harris gave a talk at the Jamstack conference trying to coin a new term transitional apps. In it he shares his thoughts on the shortcomings of SPAs and emerging technologies like HTML-over-the-wire. Funny, because if you think about it the only type of apps that could satisfy all the requirements are ironically only native apps.
Phoenix LiveView 0.17
BEAM is an awesome VM, Elixir is an awesome language, Phoenix is an awesome web framework and with the 0.17 release of the Phoenix LiveView framework building live apps just became so much better. Watch this keynote from Chris McCord, the creator of Phoenix framework, from the ElixirConf 2021 to understand why.
New Suspense SSR Architecture in React 18
Talking about LiveView, React doesn't want to be left behind, so they are moving to the server too, or actually already did. I stumbled on this discussion on Twitter by accident, and while it explains React Suspense in great detail, one cannot wonder about all the complexity. Do things really need to be this complex?
https://github.com/reactwg/react-18/discussions/37
SvelteKit on Firebase
One great thing about SvelteKit is its adapter architecture. If you are a fan of Firebase you can utilise the Firebase Hosting CDN with dynamic content served by SvelteKit on Firebase Cloud Functions. Adapter is still in beta, but still worth checking out.
https://github.com/jthegedus/svelte-adapter-firebase
SvelteKit SSR Forms
In frontend apps today we don't usually don't submit our forms the "old school" way anymore, but opt out of the default browser behavior. If you what to have a fallback to the server here is a nice article that explains the basics of it in SvelteKit.
https://dev.to/danawoodman/getting-form-body-data-in-your-sveltekit-endpoints-4a85
The Single-Page-App Morality Play
I am not sure how to describe the article. Maybe "personal thoughts on SPAs"? Just go and read it.
https://www.baldurbjarnason.com/2021/single-page-app-morality-play
Human friendly dates in JavaScript
Sometimes you have to show human friendly dates in your app. You know like 2 minutes ago or just now. There are plenty of libraries available to you on NPM, but it's actually pretty simple to write yourself.
https://alexwlchan.net/2020/05/human-friendly-dates-in-javascript/
Parcel 2 is released
After long time of development Parcel v2, the zero-config bundler, is finally released. I honestly don't know how it compares to other modern bundlers like Vite or Snowpack, but let's see if it catches on.
Rome will be rewritten in Rust
Talking about bundlers and tools. Rome team announced that it will be rewritten in Rust. For those of you who don't know Rome, it's a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. A one stop tool, but by being all that isn't it spreading yourself thin and what will the Rust-rewrite bring to the table except hopefully being a little faster?
https://rome.tools/blog/2021/09/21/rome-will-be-rewritten-in-rust
Favico.js
I was blown away by this small favicon library. It even allows you to stream your webcam as an icon. Check it out if you are building a messaging, e-commerce or real-time collaboration app.
http://lab.ejci.net/favico.js/
Markdown Editor
Cherry Markdown Editor is a Javascript Markdown editor that is lightweight and easy to extend. There are plenty of others, but I personally like this one. Check it out!
https://github.com/Tencent/cherry-markdown
Popper.js
Popper is a tiny tooltip library (3k) that Tippy.js is based on.
Flowbite
An open-source component (400+) library based on Tailwind CSS and an alternative to Tailwind UI. Paid pro version available.
Z-index tutorial
Z-index can sometimes be hard to understand. This interactive tutorial is using burgers. Be warned it can make you hungry!
https://imjignesh.com/how-to-use-css-z-index/
Dieter Ram and software design
Dieter Ram was an iconic designer. Here is how his 10 principles of good design applies to software engineering.
https://github.com/zedr/dieter-rams-10-applied-to-software
OpenAPI vs AsyncAPI
Today's software is shifting more and more towards event-driven async architectures. Even though it might not apply directly in the frontend, it will still influence the flows and design. There are two major standards today - OpenAPI and AsyncAPI. See how they compare and know the difference.
https://www.asyncapi.com/blog/openapi-vs-asyncapi-burning-questions
Tailwind CSS and SvelteKit - The Easy Way
SvelteKit is popular, Tailwind CSS is popular. Here is a short post on how to make them play nice together.
https://codechips.me/tailwindcss-sveltekit-the-easy-way/
Bad Joke of the Month#
Q: Why did the kids eat their homework?
A: Cause the teacher said it was a piece of cake!
That's it for this month. Thanks for reading.