DEV Community: Idrees Khan

Simple Rules to Master 'this' Context

Idrees Khan — Fri, 29 May 2020 10:50:23 +0000

When I was learning JS for the first time, the first difficult thing to grasp was this. Yes! you won't believe it but that is what I felt.
So in this article I will do my best to explain 3 basic rules that I learned at that time which will make you master the this context in browser environment.
A quick side note before we proceed, many issues of this context are actually solved in ES6+ standard and so I will be using ES5 to demonstrate it.
Consider following example and guess What's this pointing too?

Well to car. If you have guessed it right then you are at a good place. Let me change this abit and guess what is this pointing to?

Well to Window object. Yes! you heared it right. You didn't expect it to see but trust me it does!
Now consider following example and guess what is this pointing to?

In this case it will point to 'c' object. Now if I change this abit more guess what it is pointing to?

It is pointing to Window object! Isn't this weird? it is, specially if you have came to JS from other languages such as C#.
This is getting boring let me break it down into following rules.

Rule of Thumb for `this`

Dot call operator: If you see a dot call operator e.g car.beepBeep(), this will be pointing to whatever is in the left side of '.' operator
new keyword: If you are invoking a function with constructor e.g var c = new Car("Some Car!") then the context within your constructor will be i.e c (in our case)
call or apply: Finally if you are using call() or apply() function then the context will be whatever you pass in first argument e.g car.beeBeep.call(otherCar). In this case the context will be otherCar
In JS functions don't know where they live, they only know how they are called. So if none of the above rules apply then this will be pointing to global or window object

Access VS Code from your phone browser...

Idrees Khan — Fri, 22 May 2020 11:58:26 +0000

So in my last post I explained how to use your phone as a development machine. But this time I want to show you, how you can access your code from your phone browser.

How it works ?

Basically you will host your PC (probably at office or another home device) and then access it from home via phone or any other device. For this you will need a PC (where you should have already installed VS Code) and a Microsoft account. First you will need to install Remote Development Extension published by Microsoft.

After installation, open a project that you want to access and go to Remote Explorer and Double click on Register self-hosted Codespace (as shown in below image), select subscription, resource group, region, a plan and finally name this Codespace. Don't worry its free 😜 as mentioned here.

After downloading some dependencies (in my case) and setups at Microsoft cloud, you should see your Codespace as shown below 😉:

Connect it!

Perfect, all you need to do now is to grab your phone and plug it to a monitor with keyboard and mouse and go to https://online.visualstudio.com/environments. There you will see the Codespace that you named it in previous steps (in my case ik-surface-pro). Click on those dots and select Connect.

Thats it 😍, after a while you have now access to your code from a browser, which means from anywhere! 😉

Gotchas

While this all sounds cool but please note that the experience isn't perfect but it is nearly perfect. Also in mobile (specially in Android) as you touch VS Code, the screen will be zoomed in. For that I used Firefox Focus browser. You might need to try different browsers and see which one works best.

Useful LSTM network example using brain.js

Idrees Khan — Tue, 12 May 2020 13:26:59 +0000

Problem

They say every problem has a solution (not necessarily). I am using an app called Splitwise. There, as you try to type description while adding an expense (check the screenshot no 3 on PlayStore), it will automatically select a category for you. I was thinking if I can do same (without writing complex code) through any JavaScript machine learning library. And guess what? i checked out brain.js.

Solution

Fortunately the library does solve this kind of problem very easily and that is through common machine learning model called RNN (Recurrent Neural Networks). One of the special kind of RNN network (for above use-case I used) is LSTM (Long Short Term Memory) network. A tremendous explanation is done in this article which helped me a lot too.

The Data

You can find a working example in this repo. So first we will need to build a model and for model we need data. You could use data from your existing database or from any other source. But you definitely need some sort of data. For this demonstration, I have added static data in JSON here. Please note that I have not organized the data on purpose as in real world, you will not always have an organized data. A sample 1 record is shown below.

Enough! Show me the demo

First, we need to install brain.js by simply running following command.
$ npm i brain.js --save
Next we need to prepare a training set from our data. A training set (in our case) should have an input and output properties. The input I will be passing is the description property of our data and the output property I will be passing the category property. In simple words I want to training my model on existing description which has appropriate selected category. The final code looks like below:

Training

Now that I have the data set or training data, its time to build our model. We can do that in brain.js by creating an instance of LSTM network and call train() method.

The train() method accepts the 2 parameters i.e data and optional config. The config object has several useful properties which you will need to play with as it depends on your data. You might need to specially play with iterations and errorThresh. Full config object can be found here. If you still want to know more on errorThresh and iterations properties then checkout this awesome answer on StackOverflow.

Finally as I don't want any delay while utilizing this model, I will export it using brain.js helper method i.e network.toJSON(). All we need to do now is to save it somewhere and do our predictions. I will run now the demo project using http://localhost:3000/app/build and let it generate the .json file. You will have to be patience as it will take time to build the model. Its a good idea to decrease the iterations if you want to see results soon.

Prediction

Now that our model is ready, we can simply use this .json file in our client project i.e mobile/web app. For this demo, i will simply use it in api.

Simple create here an instance of LSTM network and call fromJSON() method. This will make sure you build the model once and re-use it everywhere you want.
network.run<string>(description) wil return the predictions that we are expecting. Its time to test it.

Testing

Head over to browser in Demo project and type http://localhost:3000/app/predict?description=grocery and you will get following:

Final Thoughts

Although brain.js is making everything easy for us, but it is still good to know the basics of what you algorithm you need to use for a particular problem. Also be aware that brain.js is still in alpha. The example i have provided might not work in the future.

Using Android phone as a development machine

Idrees Khan — Tue, 05 May 2020 11:42:33 +0000

So recently I was wondering if I could use my phone as a development machine. So I give it a try and I am sharing my experience below. If you are using any Desktop mode supported devices then thats more better e.g Samsung DeX, Huawei Desktop mode.
You can go to PlayStore and find many applications that lets you install Linux without root however, I personally found two to be more easy to use i.e UserLand and AndroNix. But I choosed AndroNix due to their ModdedOS option which comes with pre-installed VS Code and other useful tools.
Once i downloaded the application, I purchased the Ubuntu XFCE environment (there are free options as well). They have plenty of options/videos on how to install this, its pretty straight forward.

And here modded OS options:

After installation (please follow their instructions. It is clear enough), I connected Bluetooth mouse and keyboard to my Galaxy S20 Ultra and went to Samsung DeX mode. Then I opened the Termux (if already closed) and ran the ./start-andronix.sh. You can learn more by checking their FAQ.

Next, I just ran the vncserver command and it was up and running. Do not forget to note the port i.e in my case :1.

Next, I downloaded VNC Viewer and entered the localhost:1 in address (as shown below) and thats it. I was then able to connect my running Linux environment😍.

Next I downloaded Node.js by following this blog using following command. I am adding commands below for reference.
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install nodejs

Now that I had Node.js, I installed Ionic, Angular and other required tools that I needed. Then ran my project in Ionic successfully.

Final Thoughts

I was really surprised about this as this was my first experience after Samsung stopped Linux on DeX (LoD) support on Android 10. Its really great alternative to LoD and I can clearly see many use cases of this e.g in case when traveling or unreachable to your PC. If you wanna add more addition to this then definitely checkout NexDock 2.
Let me know if this setup sounds useful to you. Be kind as this is my first post 😁.

DEV Community: Idrees Khan

Simple Rules to Master 'this' Context

Rule of Thumb for this

Access VS Code from your phone browser...

How it works ?

Connect it!

Gotchas

Useful LSTM network example using brain.js

Problem

Solution

The Data

Enough! Show me the demo

Training

Prediction

Testing

Final Thoughts

Using Android phone as a development machine

Final Thoughts

Rule of Thumb for `this`