Javascript tips

Get Query Params

window.location object has a bunch of utility methods and properties. We can get information about the protocol, host, port, domain, etc from the browser URLs using these properties and methods. One of the properties that I found very useful is,

window.location.search

The search property returns the query string from the location URL. Here is an example URL: https://tapasadhiary.com?project=js. The location.search will return, ?project=js We can use another useful interface called, URLSearchParams along with location.search to get the value of the query parameters.

let project = new URLSearchParams(location.search).get('project');

Output: js Read more about this topic from here.

Compress your files

Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files. With a smaller sizes file, users will be able to download the asset faster, resulting in improved performance.

Packer

Paste your code into Packer and hit "Pack" to condense your code in seconds. Packer also offers on the fly decompression.

Dojo ShrinkSafe

ShrinkSafe uses the rhino library to parse your code and produce compressed versions of JavaScript files that you can drop directly into your webpages.

YUI Compressor

YUI Compressor is a command-line tool that was created by Yahoo! It delivers a higher compression ratio than most of its competitors. YUI Compressor can also compress CSS files. Different code compression tools may be better suited for certain applications.

Avoid Using JavaScript

You must be wondering what’s the point? That's because even with ES6 and other features added by ES2016/ES7, it still has its quirks. If you are open to exploring other options, you can highly benefit from minimal setup. Based on the requirement, expertise level and the nature of the app, you can do better with TypeScript or Flow which provides strong typing. Some other options include Elm or ClojureScript which are purely functional. On the other hand, there is CoffeeScript which is another great option. When you have a requirement for a few macros, not an entirely new language, you can consider Sweet.js. It does exactly what you want. It will allow you to write code that will generate code. If you take the non-JavaScript route, you should still include the compiled code because developers may not understand your language well enough and therefore may not be able to build it properly. Here is a quick example for you to understand. Think of the VS Code which is one of the largest TypeScript projects. It uses TypeScript to patch the Node’s core module with types. Therefore in the vscode/src/vs/base/node/ of VS Code repo, you will observe familiar module names like crypto, process, etc. yet with the ts extension. You will find other ts files in the repo. But, they included vscode/build with native JavaScript code.

Start to Use Functional Inheritance

JavaScript makes use of prototypal inheritance whereby objects inherit from other objects. This is interesting and simplifies many things. The class operator also comes bundled with the language with ES6. But the fact remains the same that it is overly complex compared to functional inheritance. Even though many Node experts prefer the simplicity of the latter. It can be implemented by a simple function factory pattern. It does NOT require the use of prototype, new or this. Also, there are no implicit effects when you update the prototype which causes all the instances to change as well. This is because in functional inheritance each object makes use of its own copy of methods. Here is a code from TJ Holowaychuk, the genius behind Express, Mocha, Connect, and dozens of other Node modules. The source code describes the uses of functional inheritance. You can check out the full source code here. Many developers aren’t aware that they should not be checking their node_modules folder. Many learn this the hard way. In fact, there is no reason for you to check this folder. Think of a scenario where someone checks your source out and at the same time run npm install and download all the modules required. You may think, it’s not a big deal if you check in node_modules or anyone else does. That’s because from the surface nothing may appear wrong. But if the person checking out your source is on a different operating system (other than yours) and at the same time one of the modules that your app uses gets compiled when it’s installed via npm, the app will crash. This happens because the modules like bcrypt and sentimental are compiled on the host system because they have native components written in C. The best way to avoid this situation is to completely avoid checking the node_modules folder.

Nodefly to Gauge the Performance

After developing the node.js app and once it is up and running, you will want to check its performance to make sure it is running at optimum speed. It’s a logical step for any developer to monitor their node.js app’s performance and profile. You can easily monitor the performance and profile of node.js apps by using the service called Nodefly. With few lines of code, Nodefly will start to monitor the application for issues like memory leaks, and measure how long it takes for Redis, mongo queries, and quite a few other important stuff.

Use npm Scripts

Developers create npm scripts for builds, tests, and to even start the app. This has become almost a standard now. Naturally, this is also the first place developers look for when they encounter a new Node project. Other than this, you could also take a look at other front-end development tools. Many developers have ditched Grunt, Gulp, and the likes in favor of more low-level but more dependable npm script and there is understandable reasoning behind it which we will save for the next blog post. However, here we will point to that fact that npm scripts have pre and post hooks which can help you handle the very sophisticated level of automation: "scripts": {  "preinstall": "node prepare.js",  "postintall": "node clean.js",  "build": "webpack",  "postbuild": "node index.js",  "postversion": "npm publish" } While developing the front-end, often you must have come across a scenario where you wanted to run two or more watch processes to rebuild your code. Take for example you wanted one for Webpack and another for nodemon. You can easily achieve this with the help of && because the first command will not release the prompt. To handle this situation, there is a module called Concurrently that can spawn multiple processes and run them all at the same time. You can also install dev command-line tools such as Webpack, nodemon, gulp, Mocha, locally to avoid conflicts.

Use Built-In Debugger - Node Debug

If you are coming from a language with heavy IDE integration like Java or C#, debugging Node.js apps could get quite confusing. Many Node.js developers resort to using the “flow” debugging pattern by making use of console.log. However, there are better alternatives that are more convention to debug Node.js apps. For example, Node.js comes packed with its own built-in debugger that you can run by calling node to debug. Node-inspector is also another interesting tool to debug your Node.js apps. According to a GitHub report, Node Inspector is a debugger interface for node.js while using Blink Developer Tools (former WebKit Web Inspector). You can use node-inspector to debug your applications using any editor of your choice and chrome web tools. You can do some really interesting stuff with Node-inspector such as live code changing, step debugging, and scope injection.