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 sethtml { 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
- We could use conditional components but using SvelteKit with
-
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
$