Updates from April, 2018 Toggle Comment Threads | Keyboard Shortcuts

  • maravindblog 4:06 pm on April 24, 2018 Permalink | Reply  

    How Did I Decide To Learn React? 

    For starters, React is a library to create UI for a website. This technology is developed by Facebook. It is in fact very widely used in all Facebook products.

    Fun Fact: React is used more in Facebook than Angular in Google.

    So, why we are talking about React now? As it’s been for quite a long time now, almost 5 years ago (March 2013). To give a perspective with angular release timeline. angularJs (almost deprecated now) is released on October 20, 2010, and Angular 2 (a completely rewrite of angularJs) on September 14, 2016. So React was released after angularjs which by then was more stable and established. But angularJs being a framework had many goodies out of the box like router, animations etc. And in fact, bigger applications started facing performance issues using angularJs (maybe that’s why you should not develop a framework in 10days).

    Okay, Those dates are only for some history. I was nowhere near web development in 2010. I have started working on angular 2 and angularJs in 2016.

    I already knew about react then and wanted to check it as well. But there were no good tutorials and react documentation was not great. So, Since then even though many developers liked and started developing on react, I have resisted.

    But in late 2017, I wanted to give react a second chance, which by the way, got many updates and became much more stable and established. There were many tutorials as well online (mainly youtube), but were certainly not of high quality.

    At that time, I have observed 3 main issues

    1. License
    2. HTML in javascript (this is what I assumed then, I’ll clarify in a moment)
    3. Redux, for state management

    First, License, Facebook had a very lame non-open source license(BSD), which technically made all applications developed in react controlled by Facebook’s policies (which by no means are great). But due to a lot of resistance and friction among developer community the license is now revoked to MIT.

    Second, If anyone says that react is awkward as it allows you to write HTML in javascript, Just stop them right away and say that

    ” buddy, you are wrong, let me explain “

    comp

    Consider this react code, ButtonCounter is a component. why? because it is extending React.Component. If you are not aware of classes in JS (introduced in ES6 version).It is just a “syntactical sugar” over existing prototypes.  The keyword is “syntactical sugar”, This means that though the behavior is same, There is only change in the way you write that particular construct. This feature is specifically added keeping developers in mind. To make our lives easier.

    Here is how a class can be implemented in ES5.  on left ES6 class and on right es5 implementation of same.

    camp

    nice, But wait! Did we go off topic? No! not at all. Like class is just a “syntactical sugar” over prototype, The HTML-like (or more correctly XML-like) syntax is just a “syntactical sugar” over react’s way of creating an element. This syntax is enabled by JSX. Which has to be converted back to javascript before running your code on the website. How JSX code converts to javascript, you may ask! Here it is!

    camp

    This understanding immediately made me wiser and also is more clear on how it works under the hood.

    Third, Redux

    One of the reasons I did not show much of interest in react because anytime I start a tutorial (I generally prefer a video series in initial phases than documentation. Hence for me it is more important to find a great video series and well-opinionated host), They included Redux in the series which suggested react alone cannot do much  (which is a wrong assumption).

    Redux is state management library which in itself another library and has a learning curve. But that was one concept I did not focus on. But lately, I have started working on NGRX (which is greatly inspired by redux). As now I have understood the concepts of state management. I believe I will not be overwhelming anymore.

    Now, With a clear understanding and at most zero bias towards any framework or library, I have started learning/developing on react.

    Tip: Before judging make sure you have enough knowledge.

    After this long article, if you are still feeling why you may consider learning react now.  I have a couple of points for you.

    1. In 2016, Most famous JS library JQuery (yup!). But let’s understand why? why because of its compact size. JQuery can only manipulate DOM and nothing more. Which has many use cases, For example, If your whole application is one page and you just want to show top 100 movies. You wouldn’t consider angular because the angular framework itself will be more than your code!
      By 2017, React has overtaken JQuery. Because it offers same compactness and better features overall.
    2. Availability to customize and build an application. What do I mean by it? For example, Angular router comes out of the box when you install angular. But definitely, angular router is not perfect and there may be cases you want to use a 3rd party router. Even you absolutely can do that! it just does not make sense! But with react there is a separation of concerns and gives chance to the developer to make the choice.

    This article is highly opinionated. Even though if you differ with any point, I’m always open to a healthy discussion.


    Find more about me

    My youtube channel

     

    Advertisements
     
  • maravindblog 5:51 pm on February 28, 2018 Permalink | Reply
    Tags: developer, , javascript, optimization, V8   

    Javascript Optimization Choices: Part 1 

    I came across a very interesting talk where the presenter talks about the internal workings of Chrome’s javascript engine i.e V8.

    Here are points from the video which seemed very practical and useful. This talk basically concentrated on arrays.

    1. There are 2 types of  “elements kinds” holey or packed element arrays. If you are creating an array like.

    const a = new array(5) // makes ‘a’ a holey array kind

    This is bad because V8 should check many other conditions and in worst case need to check whole prototype chain before returning ‘undefined’.

    2. Never create an array like this

    const a = new array(5)

    Until and unless you are creating a huge array and want to save time on array creation.

    3. Rather consider this approach.

    const a = []

    a.push(1)

    a.push(2)

    4. for loop, foreach, for of all have equal performance.

    const a = [1, 2, 3];

    for (let i = 0; i < a.length; i++) {
    const item = a[i];
    console.log(item);
    }

    a.foreach(item => {
    console.log(item);
    });

    for (item of a) {
    console.log(item);
    }

    5. Prefer arrays over array-like objects, if you have array-like objects consider converting into an actual array and perform operations. There are many array optimizations which are lost when we use array-like objects.

    Array-like objects look like arrays. They have various numbered elements and a length property.

    function hybridToArray(nodes) {
    try {
    // works in every browser except IE
    var arr = Array.prototype.slice.call(nodes);
    return arr;
    } catch (err) {
    // slower, but works in IE
    var arr = [],
    length = nodes.length;
    for (var i = 0; i < length; i++) {
    arr.push(nodes[i]);
    }
    return arr;
    }
    }

    6. From ES6, we can use argument deconstruction to accept the arguments to methods. Previous before ES6, we can check the arguments passed to a function at run-time using ‘arguments’objects. But using […args] syntax for accepting the arguments for a method is much more efficient.

    // ES6

    function someFunc(…args) {
    console.log(args.length, args);
    }

    Here is the link to the talk, https://youtu.be/EhpmNyR2Za0

    Hope you have enjoyed this, If you have any interesting and useful performance-related optimization coding suggestions please free to comment on the post.

     
  • maravindblog 5:33 am on May 2, 2017 Permalink | Reply  

    Am; YourMove: Visualize Sorting a Stack ! 

    This blog summarization of the video from a YouTube channel AM; YourMove. This is the link to the video.

    In this video, the presenter discussed how to sort a stack by just using basic stack operations like push, pop or peek etc. Other constraints on the problem are we can only use data structure stack. But it gives us the flexibility that we can use more than one stack (if we need).

    It is one of the simple interview questions out there but the presenter made it more interesting by using a visualizing tool called processing IDE to show the viewers how the elements in the stack are pushed and popped. The video is attached at end of the post.

    The presenter informs that the algorithm’s complexity is O(n2) which by no means sounds optimal but under these circumstances this best we can get. The algorithm is discussed below.

    We need 2 stacks. The idea is to pull an item from the original stack and push it on the other stack. If pushing this item would violate the sort order of the new stack, we need to remove enough items from it so that it’s possible to push the new item. Since the items we removed are on the original stack, we’re back where we started.

    code

    Link to the visualization sample video (CLICK HERE) . You can check out the code HERE.

    This was one of the interesting topics yet on AM; YourMove. Check out the channel here SUBSCRIBE NOW!

     
  • maravindblog 2:07 pm on December 13, 2016 Permalink | Reply  

    Project: Personal website #2 

    Directives are core of angular2. Even components also come under directives. There are various kinds of directives.

    Attribute directives

    ngClass, ngStyle are 2 examples. They are used to apply css classes to the DOM elements.

    Structural directives

    *ngIf, *ngFor are 2 examples. These kind of directives are used to change the actual DOM elements. The “*” is the syntax to use these directives.
    The general syntax to use *ngIf

    <li *ngIf=”condition”>some-statement</li>

    But *ngIf can also be written differently using property binding

    <template [ngIf]=”condition”>

    <li>some-statement</li>

    </template>

    In previous post I have just used a single dummy object to display the data. After learning about *ngFor directive we can use it to display collection of objects.
    components:

    I have realised that I did not explain much about how components are laid out and various events binding used.

    about-component

    This component is same as before. There is nothing much to be done other than changing some UI. I thought I make my UI more fancy once I get core angular2 part done! As of now it looks like this (below). I have used a some dummy image.

    projects-component

    I have used *ngFor to insert multiple projects as <li> items. Actually projects component is subdivided into project-list and project-detail component. The click event on any project item is registered and that particular item’s details are displayed other right side. I have created a class of type Project.ts to store project details.

    skills-component

    Similar to projects components I have used *ngFor to display list of items. I wanted to show professional and interpersonal skills separately hence I have used 2 more components for the about under skills component. I have created a class of type Skill.ts to store project details.

    Contact-component

    I’m keeping contact component as constant footer. I made the contact strip dynamic It means that how many contact objects I add in the future the strip can adapt. Contact component might have got biggest make over by far!

    None the less I impressed by the progess I’m making. I’m also devloping another project along side to this for learning purpose. I’ll upload it to git so that you can look at it too. Right now, I’m having a bit of problem about using dropdown using materialize.css .

    skills

     

    See you in next!

     
  • maravindblog 4:03 pm on December 6, 2016 Permalink | Reply
    Tags: Angular2, , web devlopment   

    Project: Personal website 

    I went to a couple of events in the month of november. There I got a chance to talk to amazing people who have good experience in the industry. As I’m about to start my “official” professional career I wanted to get some insights about how companies work and what are the technologies are being used. To my surprise 75% of people talked about angular. How an amazing technology it is and etc. So, Naturally I wanted to learn that as well !

    Many people in the events talked about various online courses. I learned a lot of things on internet but never bought a course ! I love free stuff ! But people suggested that some paid courses are worthful. As angular2 is pretty new software there were no good free courses online. At the point of time I saw a ad on facebook that there is a black friday sale in udemy. I took no time to grab the offer and bought a angular2 course just for 14$.

    I must say the course is really good. All the topics are carefully chosen and are explained. Therefore I’m learning the technology and at the same time building a personal website project. To actually understand angular2 fully I will surely build at least couple of projects.

    Whole angular2 revolves around components more precisely directives. Therefore initially I have thought of components such as about, contact, projects, skills.

    Project as of now: I have completed 4 sections in the udemy course. I have learnt till databinding, property binding, event binding, components.

    components :

    about-component

    projects-component

    projects-component

    projects-component

    skills-component

    skills-compoenent

    contact-component

    contact-component

    So, Clearly a long way to go ! But I guarantee that learning and mastering this technology will be a great asset to my career. And by the way I’m loving angular2. 

    See you in next!

     
  • maravindblog 12:07 pm on November 26, 2016 Permalink | Reply
    Tags: data analysis   

    Beginning ML: What next? 

    Machine learning is a branch of artificial intelligence and deals with lots and lots of data. In our neural network models we have used MNIST dataset which was pre processed and can be directly used by tensorflow. And we also have used a raw dataset that we had to pre process to make use for our model. Clearly one need to understand and analyse data ( In fact large amounts of data ) .

    Data Analysis is the branch that deals with data and helps us to understand data and use to draw conclusions. Therefore in machine learning data is critical part  and we have to learn to analyse data.

    Next posts we will look how we can use python to perform data analysis. I’m looking up few courses online to learn data analysis .

    Let’s catch up in next!

     
  • maravindblog 4:48 pm on November 23, 2016 Permalink | Reply
    Tags: , ,   

    Beginning ML: Movie Review Sentiment Analyser cont. :KnowDev 

    In last post we have used pandas to extract raw data from .csv files and used bag of words model to pre process our data into feature sets.

    In this post we will train the model. It’s most simplest thing. We will use RandomForests to predict. Random forest is a collection of decision trees.

    First we initialize forest with 100 decision trees.

    forest = RandomForestClassifier(n_estimators=100)

    We will use fit function in forest variable to build a forest of trees from training set.

    forest = forest.fit(train_cleaned_data, train[‘sentiment’])

    trained_cleaned_data is the pre processed data from our last post. train[‘sentiment’] is the labels for all the data corresponding to X. And we are done with training our model.

    Now, we can test and predict using our model.

    To test we have first transform the test raw data into required format. We will use transform while testing because to avoid over-fitting.

        test_data_features = vectorizer.transform(clean_test_reviews)

    Then we will simply predict using predict function of forest variable.

        result = forest.predict(test_data_features)

    We will finish off our testing by simply loading all the predictions to a file for permanent storage. And that’s it we have used a new model and a new technique to build a sentiment analyzer. This model is not a perfect one for commercial use because one, we did not use a large dataset and also we did not use a more sophisticated model. In up coming posts we  will see what are those “sophisticated” techniques or models. I’m sure those concepts will be much more interesting, with that I’ll see you soon!

    Complete source code here

     
  • maravindblog 3:57 pm on November 22, 2016 Permalink | Reply
    Tags: ,   

    Beginning ML – Movie Review Analysis: KnowDev 

    Till the last post we have seen methods of building a sentiment analyzer using multi-layer feedforward neural network. In fact in this post also we will build sentiment analyzer which can predict positiveness or negativeness of a movie review, We can consider this as one of the user case of what we learned so far.

    This particular concept is divided into 2 parts. One, Pre processing our data. Two, Using random forest technique to predict.

    Pre-Processing :

    We will use pandas module to extract data from a csv file. As we did before we will use bag of words model to create feature sets. But before we have to clear little dirt like html tags (using beautifulsoup module), removing punctuations, and removing stopwords . StopWords  are the words like the, and, an, is etc which do not add any specific emotion to the sentence. We are removing punctuations as well to just remove the complexity, once we get quite familiar with what we are doing we add more complexities to our model. We will implement all this functionality in function clean_text.

    Now we have to apply these modifications to all the reviews in our file. We call that function as create_clean_train. This function might take couple of minutes because there are almost 25000 reviews all together.

    We will create feature sets using CountVectorizer from scikit learn.

    In next, we will complete building our movie review sentiment analyser. See you next!

    Complete source code: here

     
  • maravindblog 4:39 pm on November 19, 2016 Permalink | Reply
    Tags: , ,   

    Beginning ML – Sentiment Analysis Using Neural Network cont. : KnowDev 

    This post is a continuation from this .

    I hope you have got a good understanding why we have to pre-process. In this post we shall train our model and also input our own sentences.

    First of all we shall get our feature sets that we have created either from pickle or call the function to store into a variable.

    from create_sentiment_featuresets import create_feature_sets_and_labels
    train_x, train_y, test_x, test_y = create_feature_sets_and_labels('pos.txt', 'neg.txt')

    We will be using the same neural network model that we used here. First we have define our placeholder for features.

    x = tf.placeholder('float', [None, len(train_x[0])])
    y = tf.placeholder('float')

    len( train_x[0] ) returns the length the features.

    The neural network model is define using neural_network_model function. After the neural network is defined it’s time to train our model.

    First we’ll capture the prediction / output of neural network using

    prediction = neural_network_model(x)

    Then, we have to find the cross entropy of the prediction made by our model. We are using softmax regresstion.

    #1
    cross_entropy = tf.reduce_mean(tf.nn.softmax_cross_entropy_with_logits(
                                                          prediction, y))

    After finding the cross entropy is time to back propagate and try reduce the difference.

    #2
    optimizer = tf.train.AdadeltaOptimizer(0.5).minimize(cross_entropy)

    both #1 and #2 makes the training step. We’ll start session and using number of epochs as 10.

    The accuracy we could achieve was 55.44

    sentiment-54-accuracy

    The trained model is saved into ‘sentiment_model.ckpt’, later we can use that to restore our variables ( i.e weights and biases ) to use.

    Making predictions :

    To make predictions using our model that we have just trained we have to preprocess our input sentence so that can be passed as features to our model. After we prepocess our input sentence we predict.

    result = (sess.run(tf.argmax(prediction.eval(
    feed_dict={x: [features[:423]]}), 1)))

    we print out whether the output is positive or negative using

    if result[0] == 0:
        print('Positive:', input_data)
    elif result[0] == 1:
        print('Negative:', input_data

    sentiment_output

    As you can see our model makes pretty good prediction even though the accuracy is 54% .

    In this post we have seen how we can train our own data as well as use it. In less than a week time we are able to make a machine which can predict the sentiment of any sentence pretty interesting right ? In next post I will introduce you to more sophisticated version of sentiment analysis. See you in next !

    link to complete source code :  here

     
  • maravindblog 4:54 pm on November 17, 2016 Permalink | Reply
    Tags: ,   

    Beginning ML – First Neural Net : KnowDev 

    We have gone through some of the important topics in tensorflow and believe me there are ton of others ! but no worries.. We’ll catch up ! I always believed in project based learning. Therefore we’ll do the same this time as well. We shall be building a feed forward deep neural network which can classify handwritten digits. Sounds interesting right ? Let’s get into it. Open up any text editor or IDE. I personally prefer coding in an pycharm IDE.  It’s a wonderful piece of software to write your python scripts.So, What is the most critical part of any neural network ? Data ! right ! Neural networks shine when there is lots and lots of data to train it. We will be using mnist dataset provided in tensorflow.org tutorials.We can get the data by simply importing and loading into python variable.

    import tensorflow as tf
    from tensorflow.examples.tutorials.mnist import input_data
    mnist = input_data.read_data_sets("MNIST_data/", one_hot=True)
    

    In MNIST, Every data point contains 2 points 1) image 2) label. Every image is of size 28 x 28.

    Let’s start building our graph by creating a placeholder variable.

    x = tf.placeholder(tf.float32, [None, 784])
    y = tf.placeholder(tf.float32) # for labels
    

    xisn’t a specific value, but we’ll input when we ask tensorflow to run computations. Here x represents a MNIST image, flattened into 784-dimentional vector. We represent this as 2-D tensor of floating point.

    Now we need variables for weights and biases. These we represent with tensorflow variable as these variables can be modified by operational computations.

    W = tf.Variable(tf.random_normal([784, 10]))
    b = tf.Variable(tf.random_normal([10]))

    Notice that W, b are initialized with some random values but it doesn’t actually matter and w is tensor of shape [784, 10] because we want to generate classification for 10 classes i.e 0,1,2..9.  As we are building a deep net we need to have one or more hidden layers.

    hidden_1_layer = { ‘weights’: tf.Variable(tf.random_normal([784, n_nodes_hl1])),
    ‘biases’: tf.Variable(tf.random_normal([n_nodes_hl1])) }

    n_nodeshl1 is declared as 500. It is number of nodes in single hidden layer. We can tweak these numbers to check the change in accuracy. Moving on..

    Now we can completed the neural network model by completing the implementation of layers.

    l1 = tf.add(tf.matmul(data, hidden_1_layer[‘weights’]), hidden_1_layer[‘biases’])
    l1 = tf.nn.relu(l1)  #activaion func

    There few more steps before we start training our model i.e Actually defining classification algorithm and employ a optimizer for back propagation. We are using softmax_cross_entropy_with_logits  function.

    cost = tf.reduce_mean(tf.nn.softmax_cross_entropy_with_logits(prediction, y))

    #comparing the diff with predicted vs orginal 

    optimizer = tf.train.GradientDescentOptimizer(0.5).minimize(cost)

    There are many kinds of optimizers available in tensorflow, each one is optimal for some particular use-case. 0.5 mentioned is the learning rate of the neural network.

    Let’s train our neural network. Each cycle of feed forward and back propagation is called an epoch. I have set number of epoch as 5 and also 10. we have to start a session and initialize all variables. We can run our both optimizer and cost epoch number of times here it is called as training step.

    _, c = sess.run( [optimizer, cost], feed_dict = { x:epoch_x, y:epoch_y } )

    We are placing the values of both x and y in batches. c is the variable which holds the value of epoch loss in each epoch.

    Its time to test the neural network and check the accuracy of our model.

    correct = tf.equal(tf.argmax(prediction,1), tf.argmax(y,1))
    accuracy = tf.reduce_mean(tf.cast(correct, ‘float’))

    print(‘Accuracy: ‘, accuracy.eval( { x:mnist.test.images, y:mnist.test.labels }) )

    The accuracy I could achieve was 97.999.

    This implementation of simple deep neural network. This code is inspired from pythonprogramming.net and also tensorflow.org .

    complete source code : https://github.com/makaravind/ImageClassifier

    We shall be using this model for more couple of use-cases before we move on to another model. I’ll catch you up in next post.

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel