Analog clock with sveltekit

One among series of svelte tutorials

---

What is svelte?

I see the wikipedia article and see a lot of praise and interesting remarks on it. It definitely looks very encouraging considering the fools that swear by React.

Svelte is a great alternative and it appears the other cool framework we talk a lot, vue.js actually got some of its ideas from svelte.

Who created it?

Rich Harris created it in 2013. It has grown to large user base. The difference with other JS frameworks is that this one compiles templates into its internal language, so there is no runtime overhead.

I also find svelte faster and it has the best in built packaging tool unlike others where I used rollup.js. If your SaaS product is a UI toolkit then these things matter.

How to setup svelte?

This is better than the junk I got from official docs.

npx degit sveltejs/template moz-todo-svelte
cd moz-todo-svelte
npm install
npm run dev

Source code for sample

Here we have a sexy analog clock which you can use at home if you have a large led display. You can play with various background colors if you want.

<script>
	import { onMount } from 'svelte';

	let time = new Date();

	// these automatically update when `time`
	// changes, because of the `$:` prefix
	$: hours = time.getHours();
	$: minutes = time.getMinutes();
	$: seconds = time.getSeconds();

	onMount(() => {
		const interval = setInterval(() => {
			time = new Date();
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

<svg viewBox="-50 -50 100 100">
	<circle class="clock-face" r="48" />

	<!-- markers -->
	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
		<line class="major" y1="35" y2="45"
transform="rotate({30 * minute})" />

		{#each [1, 2, 3, 4] as offset}
			<line class="minor" y1="42" y2="45"
transform="rotate({6 * (minute + offset)})" />
		{/each}
	{/each}

	<!-- hour hand -->
	<line class="hour" y1="2" y2="-20" transform="rotate({30 * hours
+ minutes / 2})" />

	<!-- minute hand -->
	<line class="minute" y1="4" y2="-30" transform="rotate({6 *
minutes + seconds / 10})" />

	<!-- second hand -->
	<g transform="rotate({6 * seconds})">
		<line class="second" y1="10" y2="-38" />
		<line class="second-counterweight" y1="10" y2="2" />
	</g>
</svg>

<style>
	svg {
		width: 100%;
		height: 100%;
	}

	.clock-face {
		stroke: #333;
		fill: white;
	}

	.minor {
		stroke: #999;
		stroke-width: 0.5;
	}

	.major {
		stroke: #333;
		stroke-width: 1;
	}

	.hour {
		stroke: #333;
	}

	.minute {
		stroke: #666;
	}

	.second,
	.second-counterweight {
		stroke: rgb(180, 0, 0);
	}

	.second-counterweight {
		stroke-width: 3;
	}
</style>

Above code is Clock.svelte. You need main.js , both inside src directory.

import Clock from './Clock.svelte';

const app = new Clock({
	target: document.body,
	
});

export default app;

Code walk thro’

Very straight forward. svelte is easy to follow syntax, we use an SVG or vector graphics to represent the clock UI. We use the onMount() lifecycle hook which must be familiar for you from react and vue world.

svelte does not need a template element like react or vue. You can invoke the code using yarn like this.

$ yarn dev

Answer

What is splunk?

Splunk is a nearly billion dollar company that specializes in logfile automation and handling big data.It comes with various Python plugins to setup alerts and do various things with log data. I remember doing some coding for my friend long ago.

Question

What is header checksum?

Feedback

I hope you find the newer newsletters more interesting as we now have a repository of a lot of code samples which we can use to learn the tech that interests me and also helps you create your own SaaS if you so wish.

---