nobalG

"May be these guys have deployed their personal staff(real human beings-agents) on client locations, who may have been suffering from some bad health and are unable to show up to work. Man, these agents must have been hired for field jobs and thier life seems to be tough."

JavaScript's callback - Unpredictable

The year was 2017-2018, I was having my new interaction with JavaScript, There was a Junior developer with whom I used to work; however he was having more JavaScript experience than me at that point in time.

One day we were writing some code. The code was working sometimes, and sometimes it was not. Actually there was a callback which was relying on some global variables inside its body. Because the other functions were changing the global variables as well, So we were receiving different outputs.

The manager(who had java experience) came and asked the other developer,

"What's taking so long to finish this functionality?" and the developer replied:

"The code is jumping here and there, there must be some problem with the JavaScript"

At that moment, I became afraid as I am just like other humans who are afraid of uncertainty , but I am more afraid of code that cannot be interpreted or can be made sense of.

However, later 'Promises' came into my life after a month and they made me believe that JS world was not actually that bad, and they made me realise that my actual fear was 'Unawareness of basic concepts in JS'

Null values after two hours

This goes back to 2015-2016 again may be. One of the service deployed on dev environment was getting stuck, for at least two hours, then waking up and giving Null Pointers in logs

My team lead(13-14 years experienced) asked us the reason. We told the above scenario and started diagnosing.

The manager came and asked the team lead about the ETA.

He told, "Sir, due to two hours of program being stuck, variables are getting emptied or nulled by something, we are looking into it."

I am not sure whether the manager bought this or not, but it remained a matter of laugh among friends for so many years.

Security

I always understood that securing the application is stopping some hacker to get access to your systems, or identifying some attack on your applications and then recover from the damage etc.

But I realized after going through some spring applications and tutorials, the for a developer it may or may not be same what I used to think.

It was more about Authentication/Authorization/Roles etc.

Hackers were never in the picture(at least while development).

It was really about the Authentication of the user and providing access to the user of the data which he is Authorized for.

It was never like stopping someone working on CMD with green text and typing some commands with pace of light and bringing the whole system down.

It was something else.

UI Development - Pixel By Pixel

For most of the time,(even though I was aware of android at the start of my career ). I always was afraid of Frontend development.

I was unaware of the tools, languages of the UI world.

I used to think, that these screens and the interactions are being written from scratch. May be each pixel is being deigned by some UI developer like a bee creates her home and honey.

Backend Development, everything is Either 'If' or 'else'

Well some developers (old me may be), still believe this. BE is nothing but the ladder of if and else.

Atleast I have heard this from seniors when they assigned tasks to us for a customer change request.

"Oh Man, this is going to be easy, you just have to do this, if this happens otherwise do that, just a game of one or two hours(with unit testing)".

Resource

What I was trying to do was, to track that what value the object was holding at a particular timestamp, and how the value was being mutated with the flow of the program. Obviously the original implementation was a little more complex and the piece of code I have written is just for reference and may include some syntactical anomalies, But you got the point , right? I hope so

To my surprise, console was having output something like below

{

key : true // line2

}

"key" //line3

false //line 4

It was obvious, Javascript and the interpreter cannot be wrong, then why line 2 is showing an object with true in it, but line 4 is false. I thought that may be I am having two different keys somehow in the object, however that was not the case.

I just wanted to track the change in object's value with time. I discussed the problem with my younger brother who happens to be a hardcore frontend guy. He told me that are you mutating the object somewhere down the line. After recalling my memory, I asserted, that "yes, there is something like line number 5 in my code."

He asked me to replace line 2 with below

console.log(obj) ---->--------> console.log(JSON.stringify(obj));

to my surprise, this printed below

{

"key":"false"

}

This time the value was not true.

We searched and found over the internet, that console, actually refers to the reference of object, the unexpanded version of the object in console may display the value of the object at that particular instance when the code was executed, but on expansion inside console, it reflects the latest value of the object, which is kind of lazy loading of object and have no direct mapping with the timestamp(which I think should be the case).

However, I was curious that If it is so, then, object creation and normal code, what about these things, I have never seen someone writing any code like this in these static blocks ever, So I was curious and gave it a try. See the output of the code and the comments along side the code carefully.

long result = 2147483647*2; //RHS will still return int, so result will have value -2;

long mutiplier = 2;

long result = 2147483647 * multiplier; //RHS have a long operand, hence now multiplication will result in a long

float num = 1.0; //error....every decimal number is double in java by default

However,

float num = (float)1.0 // works, double typecasted to float

float num2 = 1f; //works

float num3 = 1.0f; // works

byte num = 255; //error.... byte ranges from -127 to 128

However, 

byte num = (byte)255; // works, num gets assigned a value of -1

char ch = ‘X’;

ch++;

System.out.println(ch); // will print ‘Y’

Arrays

int array[ ] = new int[12]; 

int[ ] array = new int[12];

int  [ ]array = new int[12];

int array[ ] [ ] = new int [5] [6];

int [ ][ ]array = new int[5] [6];

int array[ ] [ ] = new int [5] [ ]; ///First index is always required

int arrayOne[ ], arrayTwo[ ];

int[ ] arrayOne[ ], arrayTwo[ ];  //declaring two references for ‘two’ 2-dimensional arrays

int [ ]arrayOne,arrayTwo[ ]; //

APPROACH 1

I thought of having a table with three columns and then adding adding labels in the left most and right most columns. In the center, I planned to create circles using html and css border-radius.

The next task was to make a line flowing through the circles and also changing the color of the circles along the way. I tried to create a line from a div and giving border to only one side of the div, and somehow placing that border on the center of the table by using absolute positioning. 

The problem was that I was unsure that where to place that line as I wanted the steps to be dynamic and hence the length of the line should be. The view should also respect the container it is placed in and also the size constraints defined by the user of the API. Also to change the color of the circles, a timeout or interval function was planned but all of the approach seems like too much of an effort and seeming like forced solution. 

APPROACH 2 

Now this is the approach which I have implemented, I planned to take a CSS grid which has been recently added to my knowledge arsenal. I divided the Grid into three columns and dynamic number of rows, Along the columns in the center, I placed a canvas ,which lies as a gird item and is spanning across all the rows.

Now rest of the task left was to draw the circles with canvas API at appropriate positions aligning with the step labels which I already added in the left and right of the columns.

For animating the view, I used ‘requestAnimationFrame()’ function. More of the codebase can be checkout out from the GitHub link I posted above. Note that you can increase and decrease the speed of the flow of animation by controlling the below code line in the repository

y= y +3;

if you want to increase the speed of flow, replace 3 with some slightly bigger number and vice versa.

The above example can easily be implemented in plain javascript as well, just checkout the ‘drawCanvas()’ method in the repo. Its written in javascript.

The controls present inside the form which angular should consider as part of the form object must have ngModel as a directive.

[ngModel] can be used to assign a default value to the controls inside the form.

[(ngModel)] can be used to create two way binding.

 The properties in the form object will have name as that of the value specified by ‘name’ attribute of html elements.

The properties can be grouped inside a form object using ngModelGroup

The reference to the html elemnents can be created, like below

<input type=“text” name=“username” ngModel #username=“ngModel”>

The reference for the model groups can be created as below

<div ngModelGroup #someModelGroup=“ngModelGroup”> <input type=“text” name=“username”/> <input type=“text” name=“firstName”/> </div>

The form, elements which are have ngModel directive and the groups, all have properties like touched, dirty, valid, invalid, which can help in validating the form

For enabling HTML5 validations which might be disabled by default, place ngNativeValidate on form.

setValue method of ngForm can be user to set the value of complete form and it is directly available on ngForm object.

pathValue can be used to update the partial value of the form and it is available on form property of the ngForm object,(not directly on ngForm)

reset() function on the ngForm can be used to reset the form, which will clear everything.

and there are many more categories which I can define and the list will just bore you, however I have listed the main categorization of various teams to deliver a full fledged product for web.

But specifically I want to talk about CSS today, Its not long ago that applications following MVC for example Spring MVC/struts/JSP-servlets etc, mainly handle the Backend/frontend of specific page/feature was done by a single developer.

However due to breakdown of responsibilities, some organizations divide frontend itself in categories.

Framework Developer : Angular/React/Vue

Styling Developer: CSS/SASS/SCSS

User Experience

Wire frame creator: To create a dummy design which will help the investors/Product owners that how the final product will look like.

All these years, I have seen that not all the companies follow these structures. The possible factors which impact these categorizations is funding of the project, number of people in the project with skills, timelines, principles followed by the organization for the delivery of the product.

Because let me tell you this, I have seen(and have done my self) most of these tasks which should be done by the specialists in their domains by myself, But I don’t take it as something wrong, but the inclusion of terms like Full stack and the competition demands from you to be good at multiple skills today.

But I have seen that while interviewing for such positions, people tend to prepare less for CSS and also the organizations hiring for the roles like Full Stack/Frontend technologies ask very less questions from the person in the interview.

I know that stackoverflow/some website/blog will always solve your issue, given that you are not working on some custom created APIs which may have custom exceptions etc specific to the organizations you are working in.

But from my recently gained knowledge about CSS/SCSS I want to tell you that CSS is so powerful technology in itself now, that inclusion of flex and Grid have powered CSS to be taken as A framework in itself now. I was also reading somewhere that animations written in pure CSS are having best performance of all available options and are recommended also. CSS itself have a architecture and project structure for itself for applications. I know JavaScript is magic but sometimes CSS can add more fun to that magic and with very less effort. 

Well if you are a programmer for at least 5 years or so(even with lesser folks) can agree with me, that global variables/events etc. can be pain at some point of time in applications. While creating modules for the functionalities help us to debug and maintain the code base easily.

Why, because when something wrong goes with these global things, we have to track down and spent a lot of time on the fact that which function have changes the value of the global variable, which component have generated the event which triggered some specific action. As the events may be global and may be originating from number of components.

While with Angular, the first thing the Angular Devs/Team have done is to enforce the Application Developers to follow the best ever Programmatic Development Solution. and i.e creating reusable components.

In simple words, when you want a label in your html page, you will do something like following:

<label>Test</label>

Now you can write your custom events on this, can put validations if it was an input field etc.

Let you have an html page with login form, the login form can be as simple as below

<app-header><app-header>

<login-form></login-form>

<app-footer><app-footer>

While one would argue that these are not html tags I have used above, but this is where the magic is. These are reusable components which can be used any where in the whole application, just like that with their collaborative controls onside them.A component have its very own css respectively.

Their can be components inside components, components can interact with each other and much more. 

Learning algorithms/Data structures is the process of setting and training your mind to pick up the appropriate set of decisions towards solving a problem.

I am going to discuss a very simple problem which will depict the same.

Consider the following question,

From a given array of integers, find the ‘k’ max numbers. Let the array be [17,25,85,46,32,45]. Then for k = 2, output will be 85,46. You are not allowed to use Collections API or any other utility methods.

How will you approach to this problem?

A naive approach will be to loop through the array, find the max, save it somewhere else. Then find the next max. Well this is the first thought of every programmer not having knowledge of Algorithmic approach. Well it may yield the result for you, but its not efficient.

Well what we have to do is, just to sort the array using any algorithm, and get the last ‘k’ elements from the array. Now comes the question which sorting algorithm we must go for? Let that I have merge sort and bubble sort to choose from. Which one will you choose to solve this problem.

What is Merge Sort? Check here

For Bubble Sort, Go through this

What I learned about the sorts is that Merge Sort is one efficient algorithm, having time complexity as O(n log(n)), and Bubble Sort is the algorithm having the complexity O(n2). Let me tell you that these are the time complexities the algorithm will take on the basis of the input size. As log N is less than N, so the time complexity in case of merge sort is less.

So clearly merge sort should be my pick, but No, bubble sort will be performing better in this case for smaller ‘k’ values in the above problem. Because , we are not asked to sort the whole array; but just to pick the max ‘k’ values.  In bubble sort, the core for loop will run up to only ‘k’ times and will give us the final result more quickly. And there will be very less trade off for memory also, as merge sort uses more memory for storing the temporary values while performing split and merge operations.

What are apps? Why are android apps are ‘apps’, not web apps, and angular apps are ‘apps’ and not web apps? Because in the world of software development,  Apps are referred to as piece of software, whose most of the code and logic is on the machine where the client is interacting with user interface.

If you ever tried to write code for angular(as of angular 6), you will write your code in pretty cool language developed by Microsoft known as ‘TypeScript’. and  in case you are using editor like VScode, let me tell you that it is like sliding on a boat in a river full of butter. May be I am getting too emotional, but believe me, I loved this combination.

TYPESCRIPT

Typescript is super set of Javascript. I was not happy(will not say hate) with the absence of classes and objects in Javascript (yea objects like java). But Typescript made me feel at home. A constructor in type script class is  a function called as constructor() And Oh boy look at the below syntax,

and what if I tell you, below will create properties like age and address in the constructor itself, and will behave similar to the above code.

and if you create a property in a constructor and used some existing class of angular/or your own, then with the magic of ‘Dependeny Injection’, that object will be available in your code, like the following

SINGLE PAGE APPLICATION

Does this mean, URL will not change through out the app life cycle?This is what I was most curious about. Just like those shopping websites, where you scroll and scroll and they keep loading data in batches.

Na, it can and it can not. You can handle this logic in your code with the RouterModule present in angular, which will intercept form submissions and links which you will provide in the angular app itself according to the logic written by you. We don’t navigate through ‘href’ links, but provide our own configurations in HTML tags to handle navigation and can do the same programmatically. 

FORMS

Forms can be created by two ways in angular, and no server submission is there in both cases.

Template Driven Approach

Reactive Form Design

Let me explain this to you in simple words.

Template driven is more configuration in HTML code , less code logic

Reactive design is more of code, but less configuration in HTML.

 I was surprised at first, because the services were working well on Tomcat. So was wandering that what went wrong with the JBoss. I searched and went through some articles over the internet and gathered some sequential steps to get my work done. While following the solutions , i came across few new errors/exceptions, so here goes the list and their solutions:

Only One JAX-RS application allowed

When my war file failed to deploy in JBoss, I ran an enquiry on logs and came across this line in the Server log, “Only One JAX-RS application allowed”. Its ambiguous message. It seems like it depicts that only one war file with JAX-RS application can be deployed, but this can become a major flaw of JBoss if it is unable to run multiple JAX-RS applications.

But the real issue was something else. The issue was the REST-EASY implementation already provided by JBoss. I was creating the Rest Services using jersey and hence deploying them on JBoss, but JBoss was already shipped with REST-EASY packages. So I need to tell JBoss by some way that use jersey and ignore the REST-EASY implementation. So for doing that, I added  following lines in my web.xml file .

<context-param>    <param-name>resteasy.scan</param-name>    <param-value>false</param-value> </context-param> <context-param>    <param-name>resteasy.scan.providers</param-name>    <param-value>false</param-value> </context-param> <context-param>    <param-name>resteasy.scan.resources</param-name>    <param-value>false</param-value> </context-param>

By adding so, JBoss was atleast understanding that which implementation is needed now, but a new issue was awaiting.

java : Unsupported major.minor version 52.0

Now what?, I said to myself. One gone another came. But in an instant I asked myself, is there any difference between the JRE of client machine and the machine on which the webservices were compiled. And there was the resolution of this issue as well. I was compiling the services in JDK 1.8 and deploying them on a system having java 1.6. I recompiled my services and deployed them, and the error was gone. But this was not the end yet.

Package Scanning is not possible

As I progressed,  I came across another issue in server log. There was no way the server is going to package scan my Java packages to know that which service classes I have implemented. In other words,for everything to work as expected We have to annotate our classes with some special annotations to let servlet container know that which are web service implementation classes. I had already done that. But this new issue came up along with a suggestion in the logs. The suggestion was to manually implement an application class by myself and register the Resource classes in it rather then depending on annotations. So I added something like following into my existing package.

and the error was gone.

Issue with the Filters

As explained in the above issue that I had to register my rest resources(classes) in application class itself, In similar way I registered my filters there and added them in the existing set. However the filters were not getting executed even after doing so. Hence I removed the filter from application class and mentioned them in web.xml of my project. Magically they started executing.

No more..........

After getting these issues and resolving them one by one,my half a day was spent but I was able to get them working and deliver the build on time. The more exciting thing about this chain of issues was that; this was my first rest deployment project and was an immediate requirement by the client. So, I was happy that I managed to get that in time and so I am sharing the my experience, so that if any of you may come across these will be able to solve them.

lets understand static first.

Understanding static in Java quickly

static members belong to the class instead of a specific instance.

It means that only one instance of a static field exists, even if you create a million instances of the class or you don't create any. It will be shared by all instances.

Since static methods also do not belong to a specific instance, they can't refer to instance members (how would you know which instance Hello class you want to refer to?). static members can only refer to static members. Instance members can, of course access static members.

static members can access instance members through an object reference.

SCENARIO

Lets say you have a class ,

Now you know that static methods don’t need an instance of a class to make a call and can be called directly from class name as follows.

and also, static methods of the class can be accessed by the reference of the class too.So following code is valid too.

Whats strange is the following piece of code, it will compile as well as execute successfully, The sysout of the method body will be printed in the console.

How come? The object reference was null and the method was called on a null reference . It should throw NullPointerException. But the program executed successfully.Why?

Now, Repeat with me, 

“When accessing a static member through an object reference expression, only the declared type of the reference matters. It doesn't matter if the reference is actually null, since no instance is required“ .

If you would have called a non-static method on a null object reference, you would be getting the Null Pointer Exception, but not in this case. It was because your method was static.

You shouldn’t ever try to call static methods on object references rather they should be called on the class names only, as they belong to the class, not to the instances of the class.

Why should you avoid ?

Because  it gives a very misleading appearance on what it's actually doing. For instance think of it as you are reading someone’s code to make a fix or feature addition. You came across something like this.

while adding your feature, you will be thinking that the ‘object’ reference is not null, and hence you can add other method calls below this piece of code. Hence you added a call to your own newly created non-static method below this code like following

what if the someMethod was a static method and object reference is null. Your code will fail in that case.

can you write a Java class for me that will depict your daily routine of your day in methods in a package named facade.

Person 2 : Haha..not again, What are you up to?

Person 1 : Do it man..... will tell you soon.

Person 2 : Ok, so here it is...

Person 1 : Well you have done it right, but Man I don’t want to know your daily routine but still want you to live for me, spend your day for me. So without further ado I am going to create another class from your class.

and when ever I will want you to spend your whole day, I will not have to know that How you are going to spent it, but still your day will be spent in the same manner you want. So following piece of code will hide the complex code for me and will still work like charm.

Person 1 : Just above code and I can make you spent your whole day.This way of hiding complexities in your code and wrapping them under some other class is a special design pattern and is called as FACADE DESIGN PATTERN.

There are different ways in which this design pattern can be implemented , however the above given example is the best and easiest. This pattern is mainly used to simplify the existing classes and methods and bundling up the behaviours and workflows of consecutive methods in one place or more than that. 

So if you will ever make up your mind to learn about the JAX-RS  , believe me whatever book or tutorial you will pick, the first chapter will have that bold dark line in it. Annotations , customisation and each feature you will  go through while learning will be fun stuff and will never bore you,(unless you are not practising the small code examples along the way).  

JAX-RS utilises the already existing HTTP specifications, which are the backbone of all web interactions happening over internet all over the world to create and share Resources on servers.So you know its easy for someone who wants to learn how to ride a a bike who already knows how to ride a simple scooter(atleast easier than learning some out of the world new vehicle).

You just need to stick to the basics, the accelerator is still there,the  brakes are there but the clutch is added, You can learn it with practise right. 

I liked the idea when developers of the Android framework picked up JAVA as there primary language, (although under the hood there is no JVM , or byte code is involved. ) as JAVA community is one of the largest developer community across the globe. Developers learned the skills quickly and now Android Developer community has grown in number  considerably.

Back to the Road, REST is so easy in comparison to SOAP, and implementations like Jersey, RestEasy and RestLet are the way to go with it. Application endpoints are  easy to develop and manage.  

Whenever I see some Job posting in Android or any other  profile, JAX-RS is one of the requirements.  Web is prevalent, and hence web services are. JAX-RS also provides cross points called as filters and Interceptors, that will make life easy for you when you think of reusing some code across your applications.

BUT...

The one and only pain I found in the API implementation, was the long running arguments in the methods.For example see the syntax of following abstract method of MessageBodyWriter

public void writeTo(TableData data, Class<?> type, Type genericType, Annotation[] annotations,MediaType mediaType, MultivaluedMap<String, Object> headers, OutputStream out)

Cmmon Guys, you know Robert Martin is gona hate you for this, he clearly mentioned in his book that avoid these long running argument scenarios, However, Lets just compromise for now.

I hope you will also love to learn it, Do some code practices along the way and you will master it easily. I am polishing myself too.

However last night I had a long chat with one of my Great friend(not best) about the Android applications published in Android Market by the company where I work. We were discussing the Goods and Bads’ , the use of intranet android applications uploaded by my company and etc. In between our talk full of buts and ifs, he suggested that why not having a developer account of your own on Google Play and upload whatever small piece of application I use to create. It stuck me that I was developing Android applications for production since last two years, but haven’t uploaded anything of my own. So, why not buying an account and start uploading some simple , old applications which i used for my learning.

Hence here we are

https://play.google.com/store/apps/details?id=realmknight.toss_it&hl=en

The above link will redirect you to google play to my application which I developed, I guess last year. Its a one page application of a flipping coin. i I named it ‘TOSS IT’.You can use this free application as a replacement for the real world coins you use for ‘Toss’ before any sports to make certain decisions .Track your own ‘Luck Factor’ if you are alone.

How to use It?

Simple, Shake your phone up, down, right , left, flip coin make your call, HEADS OR TAILS..............and there you go.

While developing and uploading it I learned a few more things in practise, some of them was new to me.But all of development was a great experience .