teleren/devto huggingface dataset:
Formula - A Zero-Configuration Reactive Forms Module for Svelte
Tags: svelte, webdev, showdev, opensource
Published: 2021-02-13 11:47:40

---
title: Formula - A Zero-Configuration Reactive Forms Module for Svelte

published: true

description: Create fully reactive HTML5 forms in Svelte with ease

tags: svelte, webdev, showdev, opensource

canonical_url: https://tane.dev/2021/02/announcing-formula-a-zero-config-reactive-forms-library-for-svelte/

cover_image: https://dev-to-uploads.s3.amazonaws.com/i/c4b8xu3gq3yeik18o73m.png
---

* [Demo](https://svelte.dev/repl/7ec545c5415049d1a51167d1ac10b137)
* [NPM Page](https://www.npmjs.com/package/svelte-formula)

Today I'm happy to announce the release of [Svelte Formula](https://www.npmjs.com/package/svelte-formula) - a new forms
library for [Svelte](https://svelte.dev).

Formula is a `Zero-Config` library - what this means is that you do not have to pass any settings to the library itself to handle form validation and submission - it uses the validation properties of HTML5 forms directly, meaning you can create progressive, accessible forms first.

The library is for use with the [use directive](https://svelte.dev/docs#use_action) and can be bound to any element, not just `<form>` ones and the library automatically handles subscription and unsubscription to any form element with a `name` attribute.

Here is the example from the demo:

```html

<script>
  import {onDestroy} from 'svelte';
  import {formula} from 'svelte-formula@0.0.5'

  const {form, formValues, validity, touched, formValid} = formula();

  const sub = formValues.subscribe(v => console.log(v));

  onDestroy(() => {
    sub();
  })
</script>

<form use:form>
  <div class='form-field'>
    <label for='username'>Username</label>
    <input type='text' id='username' name='username' required minlength="8" class:error={$touched?.username &&
           $validity?.username?.invalid}/>
    <div hidden={$validity?.username?.valid}>{$validity?.username?.message}</div>
  </div>
  <div class='form-field'>
    <label for='password'>Password</label>
    <input type='password' id='password' name='password' required minlength="8" class:error={$touched?.password &&
           $validity?.username?.invalid}/>
    <div hidden={$validity?.password?.valid}>{$validity?.password?.message}</div>
  </div>

  <button disabled={!$formValid}>Save</button>
</form>

<style>
  .form-field {
    margin-bottom: 10px;
    border-bottom: 1px solid lightgrey;
  }

  .error {
    border: 1px solid red;
  }
</style>
```

In this example the only validations are `required` and `minlength` applied directly to the HTML element itself - displaying errors and error states are via the `validity` object and the `touched` object allows us to only apply it when the form element is first focused on.

The release is considered an `alpha` version - the API may change and there are still tests and documentation to right - but you can try it our right now in your own project with `npm install svelte-formula` - any bugs, issues or suggestions please feel free to [leave them here](https://github.com/tanepiper/svelte-plugins/issues)
[Free Script] Basic Ecommerce PHP MySql
Tags: php, mysql, code
Published: 2021-02-13 11:42:01

Get started with eCommerce website development from scratch with my new basic eCommerce development script

[Download For Free](https://www.biggidroid.com/product/basic-ecommerce-php-mysql/)

Features:

Admin Dashboard

Cart Page

Checkout Page

Customer Account Page

Login Page

Registration Page

Category Page

Support Product Image Compression

Payment Gateway Included

and many more …
How to create digital clock in Vanilla JS
Published: 2021-02-13 11:27:47

I can create a digital clock in two ways the first one is using setInterval method.
![digitalclock](https://dev-to-uploads.s3.amazonaws.com/i/incoxtebclulsakmo8di.gif)
And the second way is using setTimeout function but a little bit confusing and challenging.

## Creating digital clock using setInterval
### HTML Part
```
<h1 class='time'></h1>
```
### CSS Part
```
body {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
background-color:#333;
}
h1 {
font-size:2rem;
color:#fff;
}

```
### JavaScript Part
```
setInterval(showTime,1000);
function showTime(){
let date=new Date();
let time=date.toLocaleTimeString();
document.querySelector('.time').innerHTML=time;
}
```
> 1000ms=1second

## Creating a digital clock using setTimeout
### HTML Part
```
<h1 class='clock'></h1>
```
### CSS Part
```
body {
font-family:'Poppins',sans-serif;
height:100vh;
background-color:#333;
display:flex;
justify-content:center;
align-items:center;
}
h1 {
font-size:2rem;
color:#fff;
}
```
### JavaScript Part
```
let clock=document.querySelector('.clock');
function showTime(){
let date=new Date();
let h=date.getHours();
let m=date.getMiuntes();
let s=date.getSeconds();
let session='AM';
if(h===0){
h=12;
}
if(h>12){
h=h-12;
session='PM';
}
h=(h>10)?'0'+h:h;
m=(m>10)?'0'+m:m;
s=(s>10)?'0'+s:s;
let time=`${h} : ${m} : ${s} ${session}`;
clock.textContent=time;
setTimeout(showTime,1000);
}
showTime();
clock.addEventListener('load',showTime);
![chrome-capture](https://dev-to-uploads.s3.amazonaws.com/i/6lgcraigdjbmtdcen349.gif)
 
```
Андрей Мелихов — Cовременный бэкенд для фронтенда на Node.js
Tags: node, youtube, architecture
Published: 2021-02-13 11:00:45

На правах блога я так понимаю можно какие-то интересные для себя ссылки давать. Поэтому дам ссылку на [доклад Андрея Мелихова](https://youtu.be/QirEXoeDJzs)

Для себя я узнал несколько интересных фактов. Два вывода я сделал:
1. Желание *"Попробовать тут, потом там и вот здесь NodeJS"* уменьшилось.
2. Появилось понимание где это *"Попробовать тут, потом там и вот здесь NodeJS"* будет к месту.
I invented the most practical IQ test in the world using vanilla JS, HTML and css
Tags: watercooler, fun, privacy
Published: 2021-02-13 10:56:01

No more hour-long sessions to test someones IQ! Just do it now in ~5 minutes (yes, this is actually a serious test!): 

https://jankapunkt.github.io/real-iq/

## :fire: Warning spoiler alert! :fire:

Please do the test before you read this to not bias yourself.

The test is about online privacy and how people perceive their ability to manage this privacy and data usage. It won't actually gather any data but raise awareness about the user's decision on privacy settings.

## Spread the word

You can use the link to the test and send it to your friends, especially the non-technical ones to raise their awareness on online privacy.

## Contribute and raise awareness

The test is not perfect and I did it in one day in my freetime. However, I think the topic is very serious and therefore I'd love to see people starting to improve the test to become a serious tool to raise awareness.

The test is published using a free and open license [on GitHub](https://github.com/jankapunkt/real-iq) and requires improvement in English grammar (I'm no native speaker) and translation into other languages.

I am also not the best CSS/design person, so I would be more than happy if there is someone ready to lift the design to a modern 2021 style.

I'd love to get any feedback on the test from you DEV people here to improve it, where possible :-)
How to retrieve GET parameters from JavaScript
Published: 2021-02-13 10:48:36

window.location.search will return everything from the ? on. This code below will remove the ?, use split to separate into key/value arrays, then assign named properties to the object:

```var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})```

Read more solutions on [How to retrieve GET parameters from JavaScript](https://codingfixes.com/answers/how-to-retrieve-get-parameters-from-javascript-solved)!
Adding a README to the GitHub profile |2021| 💪Step by Step Tutorial
Published: 2021-02-13 10:47:29

⬇️ Step by Step guide ⬇️


1. Open Github and click on create a new repository
![Alt Text](https://community.codenewbie.org/remoteimages/i/8fnsdhrmqhxy63sr7xrt.PNG)
2. Name the new repository with your GitHub name and add the "README" file from the options
![Alt Text](https://community.codenewbie.org/remoteimages/i/p09g0m28fqdu7lmi44zq.PNG)
3. Edit the file and add whatever you want :)
4. Click commit changes and you're ready!
![Alt Text](https://community.codenewbie.org/remoteimages/i/qxfstp6c53f3usps2xr1.PNG)
5. Optionally: Click edit or preview to edit or preview the changes. 
![Alt Text](https://community.codenewbie.org/remoteimages/i/pp7k8enyyedk1lhzbf3v.PNG)


[My repository](https://github.com/EleftheriaBatsou/EleftheriaBatsou/blob/main/README.md)

{% youtube i8pBJYDNq9I %}

Do you have a github account? and if so, do you have a README file? Let me know in the comments :)

----------------------------

👋Hello, I'm Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.

🥰If you liked this post please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)
YouTube channels and developers that will make your life and development career easier
Published: 2021-02-13 10:40:31

Hello everyone, I would like to share with you the YouTube channels of developers I follow and learn from that I believe provide a great value.

Go wild and explore their content but don't get too carried away.

Start building and creating your ideas and projects you'll enjoy A.S.A.P. :)

[Check it out in a CodePen I created to dynamically show a list of channels I follow on YouTube](https://codepen.io/nemanjapesic/pen/JjbENVg "Check it out on a CodePen I created to dynamically show a list of channels I follow on YouTube").
Getting out of my comfort zone
Tags: webdev, learning
Published: 2021-02-13 09:55:20

I've been learning React this month. I've been working through a tutorial, but all the time thinking "This is hard, I'm never going to be able to do it". It was earlier this week when I read something about your comfort zone that I realised why: I'm out of mine.

I've been learning and working with HTML, CSS and JavaScript for long enough that I am comfortable with them. I don't know everything there is to know about them, but I know that I can find out what I don't know and implement it without too much trouble. I'm in my comfort zone when using these languages.

React, though, feels so different that I am out of my comfort zone. As much as I tell myself that it's just JavaScript structured differently, it's that different structure that's tripping me up. And I know that there's a lot I don't know (of course there is, I'm only just starting on it) and I can't imagine how I'll make my own project with React (but I will and that's when I'll understand it better).

Once I understood why I was feeling this way I found learning React easier. I know I'm not comfortable, I'm learning. And one day, React will also be in my comfort zone, I just need to keep learning it until it gets there.
How did I start with Machine Learning?
Tags: machinelearning
Published: 2021-02-13 09:47:10

As of writing (2021), I am last-year ICT Bachelor student of [USTH](https://www.usth.edu.vn/en/programusth/bachelor/information-and-communication-technology-11.html). 

## 2019

When my second year started, I knew nothing about machine learning nor artificial intelligent. I just knew these words existed. During this year, I learned Probability and Statistic, Digital Signal Processing, Image Processing, Numerical Method. My GPA for these subjects are not significant. I admitted that I am not good at math not I am still not. If you tell me to multiply 3 by 3 matrix with 3 by 2 matrix, I will probably do it badly. Fortunately, I'm not so bad at Calculus.

## 2020

The covid outbreak in Vietnam, I had more time for myself and staying at home. I watched a lot of videos on You Tube about people making AI to do this do that. [Code Bullet](https://www.youtube.com/channel/UC0e3QhIYukixgh5VVpKHH9Q) is one of my favorite channels. There was a professor who was working on forecasting political trends from news. He sent an invitation to my class. I signed up then I told him I didn't know anything about machine learning. He said that was fine then let me join the project. Most of the time, I did not understand any concepts or any terms. He explained what he was trying to do. My job was to label news manually. In order to learn basic concepts, I googled a lot. I found two ways of machine learning. There are top-2-bot and bot-2-top.

- top-2-bot: you learn what is AI, ML; what are the problems; what are the methods, till you reach math

- bot-2-top: you learn math, learn programming, learn applying the math into the programming, learn the methods, know the problem

I didn't follow one of them. I followed a way that I felt easy. I was not good at math, knew nothing about ML. As a result, I should choose top-2-bot, right? I was too dumb to run a neural network with instructions. The way is to combine both ways. 

To know what is what, I use top-2-bot to learn general idea about machine learning.  The blog I read is [Start here with Machine Learning](https://machinelearningmastery.com/start-here/#getstarted). Then I read [Machine Learning with Python](https://machinelearningmastery.com/start-here/#python).

To learn how does it work, I use bot-2-top. You should apply this technique with small algorithms such as linear regression, logistic regression, etc.

To learn how to apply the method, I use top-2-bot because practice make perfect. You may treat a method as black box. You understand the input, the output and the idea of it. You should apply this technique with neural network or probabilistic models. For neural network, I read [Deep learning with Python](https://www.manning.com/books/deep-learning-with-python). 

## 2021

From a guy who is bad at math (still) to the guy know to apply Mask RCNN to segment nodule from lung ct scan is a long journey. I feel more confident and am ready to learn more.
Setting up a basic environment with Jasmine to test pure JavaScript logic
Tags: testing, javascript, node
Published: 2021-02-13 09:35:34

In a lot of use cases, Jasmine is used together with test runners like Karma. However, if we do not want to run the JavaScript code in a browser, but only using Node, then Karma is not necessary. 
In this case, we can use Jasmine directly and in this post, I'm going to describe, how can we do that and how can we use breakpoints in Visual Studio Code in it.

This project setup can be useful for example in those cases, when we are practicing for interviews, coding competitions, or when we take out a code part from a legacy system to check some edge cases with tests on them.

So let's get started.

As a prerequisite make sure that Node.js is installed on the machine.

Initialize a `package.json`:
```bash
npm init -y
```

Install Jasmine:
```bash
npm install --save-dev jasmine
```

Initiate Jasmine:
```bash
npx jasmine init
```
This will generate the `spec` folder and a default jasmine config in `spec/support`.

In `package.json` update the `test` npm script to 
```javascript
"scripts": {
  "test": "jasmine"
}
```

Create the `src` folder and put a file in it with simple logic. For example, I create the `adder.js` which looks like this:
```javascript
function adder(a, b) {
    return a + b;
}

module.exports = adder;
```

To write a test for it create the `adder.spec.js` file in the `spec` folder with the following content:
```javascript
const adder = require('../src/adder');

describe("adder", () => {
    it("should add the values", () => {
        // ARRANGE & ACT & ASSERT
        expect(adder(1, 2)).toEqual(3);
    });
});
```
Note that based on the default configuration of Jasmine only test files in the `spec` folder will be detected with the `*.[sS]pec.js` ending.

And run the Jasmine test with the following command
```bash
npm test
```

We can see the test case was executed successfully
![image](https://dev-to-uploads.s3.amazonaws.com/i/qzry2q7x725uno0kq2kq.png)

Now the test runs let's see how the debugger can be used. 

Put a breakpoint in the `adder` function:
![image](https://dev-to-uploads.s3.amazonaws.com/i/j3fwe36ky4nwftprtscv.png)

Press `F5` and choose `JavaScript Debug Terminal`
![image](https://dev-to-uploads.s3.amazonaws.com/i/dhdufk0vmtlkbg9pse93.png)

In the opened terminal run `npm test` and the breakpoint will be hit:
![image](https://dev-to-uploads.s3.amazonaws.com/i/7ptaihz9vm4mbjph0ks6.png)

And that's it. If you don't want to go through the steps, the environment can be found on [GitHub here](https://github.com/milantenk/jasmine-node-starter).

Note that in this case, Jasmine works with Node. It does not support using the ES6 module imports out of the box. It follows that the `require` module syntax can only be applied.
What is Git and how does Git work?
Tags: github, git
Published: 2021-02-13 09:02:22

#What is Git?

Git is a Source Code Version Control and Source Code Management System, an ideal system for storing version or revision control and version or revision of what code you wrote on your computer before and where you changed it later. Linus Torvalds designed and developed the Git for the Linux kernel in 2005. Like Linux under GNU General Public License, Git is also an open source and by far the most popular version control system for software development.

#Why use Git?

Since Git is a Version Control Software, it can be easily controlled through any version of Git. Through Git, different developers can participate in the development of the same software, make changes, and a specific developer can finalize those changes. Since Git is a distributed version of the control system, it can also be used as a server. A dedicated Git Server software adds access control to a variety of features, including displaying Git repository content across the web and managing more than one repository. A big advantage of Git is that many developers can work on a project at the same time. You can work without internet connection if you want. Although Git was initially developed for Linux, it also supports other operating systems, such as BSD, Solaris, OS X, and Microsoft's Windows.


#Before you start working on Git, you need to know about the most commonly used commands:

git init - Used to create a new repository.

git config -Git is used to set configurations.

git status -Check the current status of Git.

git add -Used to bind one or all files together in a repository.

git clone -Used to download complete data from a pre-existing repository.

git commit - Used to permanently attach work to an offline repository.

git pull - Used to download files from a remote repository and merge with an offline repository.

git log - Used to check the log of git.

git push - Used to upload files from offline repository to remote repository.

git branch - used to create new branches in the repository.

git checkout - Used to switch from master branch to another branch.

git merge - Used to merge one branch with another.


#Git Installation and Configuration on Computer:

In order to start working with Git, you need to make your computer suitable for using Git. That's why you need to install Git on your computer. Let's take a look at how to install and configure Git on different OS.
รู้จักกับ slot fallback ใน svelte3
Tags: slot, webcomponents, svelte, slotfallback
Published: 2021-02-13 09:25:53

บทที่แล้วเราได้ทำความรู้จักกับ slot ไปแล้ว บทนี้เรามาเรียนรู้ในการใช้ slot เพิ่มมากขึ้นไปอีกนิดนึงกัน

บทนี้จะอธิบายถึงว่า ถ้ามีการเรียกใช่้งาน slot element แล้วเราไมไ่ด้มี custom content ให้ slot แล้วให้ slot default content ให้ เราวามารถทำได้อย่างไรได้บ้าง

### ตัวอย่างประกอบ
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/acheow2zks7pigwjct5w.png)

ถ้าเรามีใช้งาน slot แล้วมีการทำ custom content ให้ slot ก็จะแสดงผลปกติแต่ถ้า ไม่มีการ custom content ไปให้ slot ตัว slot เองจะมีการทำ default content หรือที่เราเรียกว่า. slot fallbacks ให้เราแบบนี้เลย

### เตรียม component กันก่อนนะครับ
```javascript
/** App.svelte */

<script>
	import Box from './Box.svelte';
</script>

```

```javascript
/** Box.svelte */
<style>
	.box {
		width: 300px;
		border: 1px solid #aaa;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding: 1em;
		margin: 0 0 1em 0;
	}
</style>

<div class="box">
   <slot />
</div>
```

ถ้าเรามีการทำ custom content ให้ slot ก็ได้แบบนี้

```javascript
/* App.svelte */
<script>
	import Box from './Box.svelte';
</script>

<Box>
   <h2>Hello!</h2>
   <p>This is a box. It can contain anything.</p>
</Box>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3d29xm9h0scau6r1klth.png)

ถ้าเราไม่ได้ pass custom content เข้าไปจะได้แบบนี้
```javascript
/* App.svelte */
<script>
	import Box from './Box.svelte';
</script>

<Box />
``` 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uw4j8ng0p6pjrze3lfgn.png)

จะเห็นว่ามันได้กล่องปล่าวมาแบบนี้ ถ้าเราต้องการให้มีค่า defualt content ละแทนที่จะเป็นกล่องปล่าว ทำงี้ครับ

```javascript
/* Box.svelte */

<div class="box">
  <slot>
    <em>no content was provided</em>
  </slot>
</div>
```
ใน slot element เราสามารถใส่ content ลงไปได้เพื่อให้เป็น default content เพียงเท่านี้เราจะก็มี content fallback มาแล้วครับ ดีกว่าเป็นกล่องปล่าวๆ

```javascript
/* App.svelte */

<script>
  import Box from './Box.svelte';
</script>

<Box>
   <h2>Hello!</h2>
   <p>This is a box. It can contain anything.</p>
</Box>

<Box/>

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/acheow2zks7pigwjct5w.png)

เพียงเท่านี้เราก็มี fallback content ใน slot เรียบร้อยแล้วครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ [slot tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)

หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
[Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก](https://medium.com/@tanangular/svelte-framework-not-framework-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1-%E0%B9%81%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-434fde7ff97f)

ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ