web

SPA

SPAs or Single Page Application

routing

Two methods exist: URL (domain.com/about) or hash (domain.com/#about).
URL is SEO friendly but without server configuration, routes will return a 404 error.
hash avoids such issue but is less prone to SEO, and hash routes may unset users.

path routing

Problem:
If user reloads a page with a specific path, a 404 error is returned from the server.
Solution:
Such page being only reachable from the SPA logic, webserver must first redirect all such paths to the SPA entry point. Then the SPA must forward client to the specific path.

On Apache, avoid 404s by redirecting all unexistant routes to root:

.htaccess

FallbackResource    /?fwd=%{REQUEST_URI}

or with regex:

.htaccess

RewriteEngine On
# First be sure that URI different from '/',
# otherwise conflicts with server wide redirects (loop)
RewriteCond %{REQUEST_URI} ^\/.+$
# Seems first '/' is omitted by OVH config
RewriteRule ^\/?(?!(assets\/)).*$ /?fwd=%{REQUEST_URI} [L,R=301]

Path is now included as param in the redirected request.

App.svelte

import router from 'page'

let page
let params
router('/', (ctx, next) => { params = queryString.parse(ctx.querystring); next() }, () => page = board)

links: `<a>` vs `<span>`

With a SPA and hash routing, you can use <a> and its href attribute, it wouldn't trigger a page request.
With path routing, that is something you want to avoid. So there are 2 ways to create a link to navigate: <a> with preventDefault() or a clickable <span>.
There are pros & cons:
<a href="/" on:click={(e)=>go(e,'/user/register')}>Create account</a>
It is the natural way, but it would force to have a function, go(), to encapsulate preventDefaut() and redirection.
And Svelte preprocessor will complain if href="#"...

<span class="spnlnk font-weight-bold" on:click={()=>page.redirect("/user/register")} aria-hidden="true">Create account</span> It has the advantage to avoid the browser status change (when mouse on:hover, a.href value is shown). There is no need to preventDefault().
But we have to change cursor CSS property to 'pointer' (here with .spnlnk class), and define aria-hidden attribute.
All-in it's a bit more verbose and maybe less intuitive.

page.js

query-string

docs
npm install query-string

Do

svelte-spa-router

Hash-based routing. Better use page.js.

API

docs

libs

color gradient

Install javascript-color-gradient

import Gradient from 'javascript-color-gradient'
const colors = new Gradient()
colors.setColorGradient(color1, color2)
colors.setMidpoint(100)
colors.getcolors(69)

CSS

fonts

@font-face {
    font-family: 'GoodName';
    src: url('/path/to/file') format(<FORMAT>); // format: woff, woff2, otf, truetype
}

Then declare given font-family in chosen class/id.

UI

General frameworks

Opiniated ranking:
Svelte >> Vue >> React >> Angular (jQuery being past)

UI Frameworks

Bootstrap and Bulma are quite similar: highly standardized & ready-to-use vs flexibility. Customization can be tricky.
TailwindCSS is more low level and offers better customization. Can be considered as an anti-pattern regarding CSS.

Bootstrap

docs
Load .js and .css:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Bulma

WYSIWYG editors

Editor.js

Toast UI

docs
Markdown focused. npm install @toastui/editor

TinyMCE

FlexBox

blog

neumorphism

tailwind

Websocket

Close

Exception codes

web

SPA