Web Development

tags : DOM

Sever and Network side §

• Congestion control (to protect the network)
• Flow control (to protect the server)

CSS §

• lol
• rem:
  • 1rem is 1 times your base unit in your HTML root (hence root em), it can be anything.
  • Most use (tailwind included) 16px
  • Eg. For font-size, if you set html { font-size: 10px; }, 1rem would be 10px;

Development Frameworks §

Web Components §

• My current conclusion is that, i’ll not go near web components.
• Web Components Will Outlive Your JavaScript Framework | Lobsters

Frameworks §

HTMX §

• “All HTMX does, is make the browser better at hypermedia by giving us more options regarding what can trigger an HTTP request and allowing us to update a part of the page rather than a full page reload.”
• Hypermedia Systems (Book)
• Hotwire is a library with similar goals to HTMX, driven by the Ruby on Rails world.

AlpineJS §

LitJS §

React §

See React Framework

Svelte §

See Svelte

• Routing in Svelte

  • We could use conditional components but using SvelteKit with @sveltejs/adapter-static along with disabling SSR is much more straightforward

• State Management in Svelte

  • See State Management Libraries
  • See Svelte State Management Guide (Flowchart in button)
  • state in svelte inherently is not global, but we can create a global state in a dedicated file such as store.ts but there is no such requirement.
  • Since we’re using connect for Protocol Buffers, it has something called connectrpc/connect-query-es which branches of TanStackQuery
    • Issue is the svelte variant is not very well supported yet

  • Pre-render

    • We want a SPA which talks to our own backend not the sveltekit backend, we don’t need sveltekit backend
  • What’s the combo of transtackQuery, svelteStore and PageLoad?

  • Other notes

    • +page.js can’t use the $ (autosubscribe) shortcut to access the value from a writable store.
      • You’ll need to explicitly subscribe
      • Make sure to unsubscribe if not using $

Others §

• SolidJS: https://www.solidjs.com/guides/comparison