Some text input/textarea fun with svelte

svelte code samples for how to do text input

---

What is sveltekit?

Svelte is a pleasant UI framework used for web applications. You can use it for websites too. Svelte unlike other JS frameworks does compile time checking and converts source code into an intermediate state before running.

That gives svelte a performance advantage over other single page application frameworks in JavaScript ecosystem.

What is SPA?

A single page application stands for complex web projects that can be executed using single page click. Obviously most SPA frameworks support routing as well for multiple pages.

Usually we are interested in one page. That is how it got the name, but this is computed and not like a typical HTML web page as the websites of 1990s.

How to setup svelte?

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

Code sample and demo

TextFun.svelte

<script>
	import { fade } from 'svelte/transition';
	import { marked } from 'marked';
	let visible = true;
	let text = `Some words are *italic*, some are **bold**`;
	let name = '';
</script>

	<h2> Text area in svelte </h2>
<textarea bind:value={text} />

	<h2> Text input in svelte </h2>
<input bind:value={name} placeholder="enter your name" />
<p>Hello {name || 'stranger'}!</p>

{@html marked(text)}

	<h2> Fade in demo </h2>
<label>
	<input type="checkbox" bind:checked={visible} />
	visible
</label>

{#if visible}
	<p transition:fade>Fades in and out</p>
{/if}

<style>
	textarea {
		width: 100%;
		height: 200px;
	}
</style>

main.js

import TextFun from './TextFun.svelte';

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

export default app;

We see some markdown code used for showing how literal HTML can be used so easily in svelte.

We also demo how text inputs are coded. Really easy code. No complex tricks at all.

Conclusion

I think svelte is really pleasant to work with. It is not complicated and fun to use.

Alas, most people are caught up with the react ecosystem that is way too complicated for simple tasks like this.

We saw how to use animations and text inputs today. We shall see more svelte in the future.

Answer

What is Pandas dataframe?

Pandas stands for panel data and is a very important Python data science library. Many use Python for Pandas. The dataframe is the fundamental data structure when you use Pandas to solve real life problems involving data.

Question

What is security by obscurity?

Feedback

To build a SaaS biz is a lot of work. If it was easy everyone would do it and there would not be fun at all.

It is like fitness. Only some are able to achieve big success in calisthenics. You need to keep grinding day in day out to achieve a healthy monthly revenue.

---