lacikawiz

Svelte App or Module Starter Template

This is a template to start an app or component. It contains all the commonly used elements with comments explaining what the elements are. These can, of course, be removed.

Based on the Svelte guide: https://svelte.technology/guide

lacikawiz

<Modal> Component

A simple Svelte component to create a lightbox style modal window with slotted content. It closes by clicking on gray area, the X in the corner or pressing ESC on the keyboard. The ability to exit can be disabled and controlled from the App using it.

For live example see: https://svelte.technology/repl?version=2.15.3&gist=a14904a7ee58a3756bb766ef2b514cdc

lacikawiz

<Money> Component

This is a component for a specialized input that only allows the user to enter valid numbers, also limits the precision of the number, breaks up large number with commas & displays a $ sign in front of the field. Eg: $1,234.56

For live example see: https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e

lacikawiz

<Section> component: A styled section with slots for Title, Header, Content & Footer

A simple Svelte component to make styled sections group things together. It uses <fieldset> tag to make the section stand out.

For live example see: https://svelte.technology/repl?version=2.15.3&gist=cf3d25a679ced9fbb73ead6501113dce

lacikawiz

<FixedBottom> Svelte Component

It generates an always visible content on the bottom of the page. You can use it to add buttons, messages, etc that are always visible.

For usage examples see the Svelte REPL: https://svelte.technology/repl?version=2.15.3&gist=7c741d58745e2cd27dde18ce6a8cd384

lacikawiz

<InputBlock> component

An <InputBlock> is a unit that contains all the necessary elements for a form input element.

• The label (with indication whether it's a required field)
• The input component itself
• The Explanation (short note or explanantion on the what needs to be inputted)

It also handles the validation (as given by a parameter) and displaying an error message if there's one.

lacikawiz

Run JS code on DOM elements as soon as they appear

This code is written to handle cases when the DOM is being generated, like Angular, Ractive or Svelte, etc. It does a quick (100ms) repeated check for the existence of the DOM elements and when they appear it runs the given function on each elements.

lacikawiz

#How to find the parameters of a circle based on 3 points on circumference

I spent some hours with WolframAlpha, paper and a text editor to distill the mathematical formula to find the center coordinates of a circle and its radius. I tested it with a few random coordinates and it returned precise results each time.

I provide here a Go code for my testing. It's very trivial to convert it into any other language.

Laszlo

lacikawiz

/*
	Calling of simple Google API to translate short pieces of text.
	Requires no API key :)
	WARNING: This call has a severe rate limitation. Frequent calls will result in a temporary block for your IP address for a few hours.

	INPUT:
	- source language code, eg: "ru"
	- target language code, eg: "en"
	- text to be translated

lacikawiz

Svelte Components Collection

REPL Examples & Code

Modal

https://svelte.dev/repl/514f1335749a4eae9d34ad74dc277f20?version=3.37.0