DEV Community: HarveyDanger

Which programming language is the best out there!

HarveyDanger — Fri, 04 Oct 2019 05:45:52 +0000

A-HA! Got your attention.

Long story short, the answer is It does not matter

Reasoning behind that statement.

For quite a while now I am serving as a Software Engineer with two Master degrees and publication in Robotics.

Throughout my professional life I have met loads of other developers, good and not that much. The only thing though, binding them all together in one group is a simple statement : "I hate this, and I like this"

Nah.. I am not going to participate in the holy war :) Don't ask who prefers what. Though I will provide some of the examples

When it comes to development planning, you may think of the following.

"I might stick to the Node.js in my web application"

"I am the Python dood.. logic should be done in Python!"

OR even better
read with viking accent

"Ya all mates are stoopid, Functional Programming and Haskell, a sir - war axe would cut your bugs in half O_O "

Well, surprisingly you are all right. You have chosen a platform and a paradigm that comes with it for free. However, a person who has strong skills in systems development will say: "brah.. morons, C\C++ is the fastest I only make FASTEST software out there".

Why am I playing comedy here? It is very simple. Human being is very protective animal and always tries to defend the only holy opinion (not all :) but many). However, being a rough C++ bloke does not mean you are always right (I am with you guys, I am C++ dev as well, I know that feeling.)

This protectiveness defines the relationship between a technology and a choice you make when starting a new project. However, things can be achieved with different technologies and you will never know the difference as a user full stop.

Ok, a few examples from holy war book of Knowledge (HWBoK)

Nowadays, people tend to say that Node.js is the choice number one, NASA uses it; but at the same time not many of those people would think in which particular field it is used. And as a result, we have 100% "async-await hell" compatible software that runs smooth. Could you achieve the same thing with Python, PHP, JAVA, C, Rust, Go, FORT.. .. blah and blah. The answer is yes. And it would all work well on the current hardware. Let's admit, that if you are making something very very big and important, you are probably at the stage when you defo know what tech. to utilise.

Wait, hang on.. he is bu11shEEtn us!

No, unfortunately, I am a witness of having "hevay computations" on node.js, while some would say, make it on Go, it is faster. It does its job though!. Moreover, I don't want to praise node.js, instead I am not a big fan of it, but using it heavily for different tasks. What I am saying here:

It does not really matter what you choose, you can do that (if you are not programming something like Opportunity - would be funny to see it running on node.js tho)

Which means that the more technologies you know and familiar with, the more freedom of choice you have, and smarter that choice will be!

Learn as many languages and frameworks as possible.

When you will have a nice backpack of knowledge behind your back, the probability that you will choose the optimal tool will tend to reach infinity and beyond.

Don't be inside the box! Love, Learn programming and love every unicorn and crab out there. It makes you wiser and open in your choice.

Restorator.js - Synchronise your INPUT DOM

HarveyDanger — Fri, 04 Oct 2019 04:58:09 +0000

Restorator.js

Restorator - is a tool that synchronises the input from your DOM to Virtual object | Local Storage | Server

Original repo can be found here

This is a simple, yet powerful tool to make an auto save feature on your web app.

Simply put it that way

User enters information to the field, and you control, when a snapshot is synchronised between localStorage and server.

So what's good about it O_o?

Good thing is that Restorator can then obtain a snapshot from localStorage or remote server and restore the last state where the save action had been performed.

Example

Clone that boilerplate:

git clone https://github.com/HarveyDanger/WebpackBabel-minimal.git restorator_demo

this is basically a minimal setup for your demo example. Btw, do not hesitate to use it as well :)

Install dependencies and restorator:

npm install && npm install restoratorjs

Now create a public folder with index.html inside

mkdir public && touch public/index.html

Paste contents into that file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RestoratorJS demo</title>
</head>
<body>
    <input type="text" id="one">
    <textarea name="two" id="two" cols="30" rows="10"></textarea>
    <input type="text" id="three">

    <button id="sync">Sync</button>
    <script src="bundle.js"></script>
</body>
</html>

Navigate to src/main.js and insert the following

import { Restorator } from 'restoratorjs';

const r = new Restorator({

        name: "dev_to_example", // instance reference, useful if you use several of those
        applicable:['input', 'textarea', 'select'], // which data fields to sync
        ignoreIds: [''],  // ignore specific DOM ids
        debug: {use: true, highlight: true},  // funny burst in your console :)
        saveLocal: true,  // save to localStorage
        saveRemote: false,  // save to Server. Refer to github repo for details https://github.com/HarveyDanger/Restorator
        onComplete: (json)=>{
            console.log(json);
        } // callback on synchronisation

});

let syncButton = document.getElementById('sync');

syncButton.addEventListener('click', ()=>{
    // Normally you would not have a save button, so you can bind it to the event
    r.Sync({repeat: true, delay: 3000})
    // Other parameters that Sync accepts are crucial for the Server sync. Refer to github.
})

Now simply run

npm start

How can I test it?

After you started a dev server, you can now fill data to your fields. open a console and then push Sync button. You will see, that Restorator has collected all the data and saved it locally. This example does not assume that you use a server for Sync (it is a separate long topic with backend part, but basically Restorator pushes JSON object with all the inputs).

Now, reload the page and hit Sync once again and voila. Previous state has been restored.

Thanks for reading!
Hope you liked it!

Vasilisk.js - Powerful HTML input validation tool

HarveyDanger — Fri, 04 Oct 2019 03:48:42 +0000

TL;DR

Vasilisk is a node.js module that allows you to incorporate HTML input validation on the fly. Original repo can be found here

What's the purpose?

Vasilisk is the lightweight tool that allows you to validate field values and logic groups (forms, but without form tag) on the fly.

Features:

Write once, use anywhere - if you may think of any rough validation, say dates between, you can easily write that function once and apply it to as many fields as you want
Create Virtual Forms - Vasilisk allows you to combine inputs of any kind to the logical group. This group is validated and fail|success callbacks are triggered once the form is completed or failed respectively.
Easy to setup settings please refer to the example below
No dependencies
Lightweight
No busy waiting because of standard js event loop utilisation

Ready to make your hands dirty?

Vasilisk can be obtained to your project in a classic way... bruh

npm install vasilisk

Quick project setup (may skip if familiar with webpack and babel minimal setup)

cd into the directory of your preference e.g. cd ~/Documents/Projects
In your terminal write:

mkdir vasilisk_demo && cd vasilisk_demo && npm init -y; \
npm install vasilisk && npm install babel-cli babel-preset-env --save-dev; \
npm install webpack webpack-dev-server webpack-cli --save-dev; \
mkdir src; touch src/main.js; echo "const path=require(\"path\");module.exports={mode:\"development\",entry:\"./src/main.js\",output:{path:path.resolve(__dirname,\"public\"),filename:\"bundle.js\"},devServer:{contentBase:path.join(__dirname,\"public\"),compress:true,port:8989}};" > webpack.config.js; echo "{\"presets\":[[\"env\",{\"targets\": {\"browsers\": [\"last 2 versions\", \"safari >= 7\"]}}]]}" > .babelrc; \
mkdir public; touch public/index.html;

In the package.json file, add new script instructions:

"scripts": {
   "build": "webpack --config webpack.config.js",
   "start": "npm run build && webpack-dev-server"
}

Example

Navigate to public/index.html file and paste the following snippet. Basically it is a simple web page with 3 input fields

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vasilisk demo</title>
</head>
<body>
    <input type="number" name="one" id="one">
    <input type="text" name="two" id="two">
    <input type="text" name="three" id="three" value="bar">
    <script src="./bundle.js"></script>
</body>
</html>

In your src/main.js insert the following snippet

import { Vasilisk } from 'vasilisk';

const v = new Vasilisk({
    callBackOnEveryValid: true
})

v.CreateGroup(
    'inp-group', // Group ID
    (gid) => { // Success callback
        alert("All fields are just fine")
    },
    (gid, failed) => { // Fail callback
        alert(`Bugga, ${failed[0].e.internal.name} has incorrect value`)
    }, [{ // Input fields
            id: 'one', // DOM id
            validation: (elem) => { // validation rule, must return bool
                return elem.value >= 5
            },
            failed: (elem) => { // what to do if validation failed
                alert(`Input one can be only 5+, your input is ${elem.value}`)
            }
        },
        { // Input fields
            id: 'two', // DOM id
            validation: (elem) => { // validation rule, must return bool
                return elem.value === "foo"
            },
            failed: (elem) => { // what to do if validation failed
                alert(`Incorrect secret word ${elem.value}, should be foo`)
            }
        },
        { // Input fields
            id: 'three', // DOM id
            validation: (elem) => { // validation rule, must return bool
                return elem.value === "bar"
            },
            pristine: true, // Identifies that by default, on DOM load, this field is correct and valid
            failed: (elem) => { // what to do if validation failed
                alert(`Incorrect secret word ${elem.value}, should be bar`)
            }
        }
])

Now run webpack development server by executing npm start and follow the link: http://localhost:8989/ in your browser.

That was easy, wasn't it? =).

All other useful features can be found in the repo

Thanks for the reading, next chapter will have Restorator.js introduction.