tag: Learn

Can you use the Date object without brackets? Yes, apparently - to a friend’s delight and my chagrin. I should know better than to rely on my somewhat shaky Javascript knowledge. This is the format for a sane Date code.. const today = new Date(); console.log(today); // 2019-08-23T09:31:12.181Z If you want to pass parameters - const firstDay = new Date(2019, 0, 1); console.log(firstDay); // 2019-01-01T00:00:00.000Z This simply means that firstDay is created by passing variables to Date, which are in turn being used by the date constructor. ...

Why do I use GraphQL? Also, the case for not using GraphQL. You must have seen the previous post where I waxed eloquent about how I mess up my Rest APIs. There was no way I would be satisfied doing that to a single technology stack. Ergo, GraphQL. What is the need for GraphQL? Google GraphQL and refer docs- there are smarter people with better answers than me. But, since the Internet can be a scary place and I love to write about things that I am not an expert in - here’s a gist about what I think. ...

How not to design Rest services? This is not a theoritical introduction to Rest - there’s something called the ‘Great Internet’ for that. But, what I do want to (cautiously) write about is how I mess up the design principles carefully laid out by smarter people. Practice 1: Use verbs in resource names We typically use the following API names - GET https://api.com/contact PATCH https://api.com/contact This is not a problem in the normal course of designing services. But, when it is time to get some complex queries - I always do a rain dance and come up with stupid names. ...

Load external scripts asynchronously in Javascript. We have seen about loading functions asynchronously in Javascript. But, what about the scripts that you load from other files, CDNs or other external sources You can do a simple async to load scripts without impacting the loading speed as perceived by the user. <script src="loadMe.js" async></script> This will load loadMe in the background without impacting any elements displayed on the page. Alternatively, you can also do a defer. ...

Arguments object throws an error when used with arrow functions. Consider this code - function getSum() { return arguments[0] + arguments[1]; } console.log(getSum(1, 2)); // 3 The result is as expected. But, you cannot do the same using an arrow function. const getSum = () => { return arguments[0] + arguments[1]; }; console.log(getSum(1, 2)); // gobbledygook or error You will see a function definition, or an error depending on the runtime engine. Arrow functions do not provide the binding for arguments object like regular functions. ...

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

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