reactive declarations with the $ syntax is pretty neat.

not only is it used to create computed values:

$: doubled = count * 2;

but code can be reactively run if the dependency has changed too:

$: {
	console.log(`the count is ${count}`);
	alert(`I SAID THE COUNT IS ${count}`);

big gotcha with svelte is that array methods like pop, shift, unshift and splice don’t work as expected. Svelte needs a re-declaration to work


let numbers = [1, 2, 3, 4];

function addNumber() {
	numbers.push(numbers.length + 1);
} // DOESNT UPDATE `numbers`

function addNumber() {
	numbers = [...numbers, numbers.length + 1];

A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment

{#each things as thing (}
	<Thing name={}/>
{#await promise}
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>

TBC - 6.Bindings

Three.js only supports typeface fonts, its; possible to convert fonts with something like this -

    (font) =>
        const textGeometry = new THREE.TextGeometry(
            'Hello Three.js',
                font: font,
                size: 0.5,
                height: 0.2,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 0.03,
                bevelSize: 0.02,
                bevelOffset: 0,
                bevelSegments: 5
        const textMaterial = new THREE.MeshBasicMaterial()
        const text = new THREE.Mesh(textGeometry, textMaterial)

to animate and add other materials, we do it all inside the callback function.