One of the interesting projects that I came across recently was NodeGUI. NodeGUI describes itself as an enabler to build cross-platform desktop applications using Javascript (and React) and Qt5. Using NodeGUI, you should be able to - Create desktop applications that run on Windows, Linux or MacOS Styling with CSS Support for desktop events that are listenable from Qt Lower CPU/memory footprint Of course, the comparison with Electron is evident. ...
Concatenating strings is a fairly simple affair. console.log("hello" + " world"); // hello world This works because Javascript figures out the types, thinks that adding strings is not an intelligent thing to do, and therefore, concatenates the two strings. However, it may lead to problems. const one = 1; const two = 2; const oneAgain = "1"; console.log(one + two + oneAgain); // 31 The addition takes place in two parts - one + two = 3 3 + oneAgain = 31 The addition across types work, albeit different from what a beginner expects and can be confusing. ...
Let’s create a simple ’to do’ application using Svelte and GraphQL. The objective is to demonstrate getting started on a GraphQL query and insert operation in a Svelte component. If you are new to Svelte, you may want to go over what Svelte can do from the official site, or see Svelte quick overview. Also, we will not quite dwell on the backend server in this post - you can follow along if you have any GraphQL backend. If not, I suggest you get started with a GraphQL setup of your own in the next 15 min. I will use the data structure and statements from the server setup described in that post. ...
The typical Javascript frameworks love playing the middleman. They continue playing that role at development and at run time. Svelte is not your typical middleman - instead the framework lays out the path during build, and completely hands over to standard Javascript at runtime. If that does not pick your interest - I don’t know what will 😜. This is the dev cycle cycle for a typical framework - Create your application using a template provided by framework Create application using the excellent toolset provided by framework. The development is almost magical - use components for max reuse, and test/debug your code easily and quickly Package everything without fuss. The build scripts will include a lot of framework code + your own code Deploy build to your web server and reach nirvana While frameworks do an excellent job of running applications, they sit on top of Javascript and web standards to deliver that experience. ...
Beware of these null check gotchas. Consider this code - const sum = null; if (sum) { console.log("valid sum"); } // nothing printed The above code shows expected behaviour. Nothing is printed since if(sum) returns false. Now, try the code below. if (sum >= 0) { console.log("valid zero or positive sum"); } // valid zero or positive sum It can throw off your calculations by a wide margin. Strange but true null >= 0. But, null > 0 and null == 0 both return false. ...
Easily assign default values while destructuring objects. Consider below code- const obj = { x: 9, y: 1 }; const { x, y } = obj; console.log(x, y); // 9 1 A typical destructuring of objects, this code assigns x and y variables to the x/y props of object obj. This is a-ok, but what if you want to specify defaults in case any of the props are not present? Such defaults help avoid unexpected errors during further processing. Consider below code - const obj = { x: 9 }; const { x, y, z = 1 } = obj; console.log(x, y, (z = 1)); // 9 undefined 1 What’s happening here - ...
return terminates function whenever and wherever it is called. Consider this code block - function getSum(x, y) { return x + y; let product = x * y; console.log(`sum is: ${x + y}, while product is ${product}`); } console.log(getSum(1, 5)); // 6 // no other console statements return will return the control to caller - no matter what state the function is in. You can also use conditional return, or have multiple returns in different blocks. function doSomething(x, y) { if (y > 100) return false; if (x < 0 || x > y) return false; for (let i = x; i < y; i++) { // complex logic const superComplexVar = 0; if (superComplexVar == 0) return false; } } There was a time in history when I used to write code for a single exit point. The flow of control would be smooth and seamless from entry to exit. ...
As Javascript developers we dream in type. Here are three quick and easy ways to convert from one type to the other in your Javascript code. Well, just kidding about the whole dream part. Most of us don’t quite care about types as much as we should. Anyhow, here are three quick ways to convert types - Convert to number Use +. console.log(+1); // 1 console.log(+"1"); // 1 console.log(+"a"); // NaN console.log(+true); // 1 console.log(+null); // 0 console.log(+undefined); // NaN console.log(+0); // 0 Convert to string Use ''+ or ''.concat(). ...
Get factorial of a given number using memoization techniques. Previously we have seen how memoization can be used in a reusable function to get all the advantages of memoization, without the complexity. Today, let us see one more practical example - get factorial of a given number. First, create a function to calculate factorial. let factorial = function(n) { return n <= 1 ? 1 : n * factorial(n - 1); }; console.log(factorial(5)); // 120. works! Then, wrap the factorial function in memoThis. let memoThis = function(func) { const cache = {}; return (...args) => { const key = JSON.stringify(args); return key in cache ? cache[key] : (cache[key] = func(...args)); }; }; let factorial = memoThis(function(n) { return n <= 1 ? 1 : n * factorial(n - 1); }); console.log(factorial(5)); // 120
Avoid having to type your object notation multiple times using with statement. Consider the below code - const earth = { name: "earth", satellite: "moon", position: 3 }; console.log("name:", earth["name"]); console.log("satellite:", earth["satellite"]); console.log("position:", earth["position"]); /* output name: earth satellite: moon position: 3 */ Typing “earth” everywhere can be quite laborious. This is more prominent when you are retrieving a big JSON from somewhere and trying to insert specific values in different parts of the page. Ergo, this shortcut - const earth = { name: "earth", satellite: "moon", position: 3 }; with (earth) { console.log("name:", name); console.log("satellite:", satellite); console.log("position:", position); } /* output name: earth satellite: moon position: 3 */ with can also be nested. ...