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. ...

Blazor has three hosting models - as I see it :) Server Client Client++ We will look at them in brief below. Server Server hosted implies the entire application being hosted on server. A razor-thin (no pun) app is delivered to client and there on client relies on server for everything. I mean everything - All clicks, user input, gestures etc. will be transferred to server through a SignalR connection. Server figures out what to do Server does DOM diffing, keeps track of updates that are done client-side and what should be sent to client. Server delivers those changes to client over the ever-persistent SignalR Server sees any connection drops and maintains state if client reconnects Client reacts, and keeps reacting with help from server Can work on older browsers (though, to be frank, if you are using old browsers - you should be upgrading old browsers and the apps rather than reading this article) Though this may sound primitive, but works wonderfully well - provided you have good connectivity to server and a fast-enough server. ...

Vuetify has been an excellent companion to me. I absolutely suck as a designer. I can hide behind libraries like Vuetify and unleash my web app creativity on this poor planet. So, it was with lot of excitement that I looked forward to Vuetify 2.0, which had been sometime in the making. Meanwhile, my lack of interest in following up on beta news meant that I merrily continued to use Vuetify without a care of the world. That’s the reason the many breaking changes came as rather shocking news. My enterprisey application background, and a somewhat pseudo-hobbyist mindset for a few applications did not help one bit. ...

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 - ...

Format your markdown using prettier and you are off to the races. Hugo static site generator keeps everything simple. I just love the power of typing in something in markdown, and seeing the finished HTML pages and blog formatted to specs (in no time, I might add). I use VSCode for writing markdown text. This works out beautifully - I can save markdown files and prettier kicks in to format everything - the markdown within those files and the code within markdown. ...

Use light-weight functional components if you want stateless components. Components consist of many different parts in Vue - Data computed properties methods etc. Data property in particular stores states of the component, and enables the component to react to prop changes by keeping track of all that the component has to go through. What if you want no states? For e.g. you have a ‘Contact Service’ component that is statically displayed as an icon on the main page, or a footer component that takes in a prop and displays its value. ...