Thursday, September 21, 2017

Emulators for react native mobile apps


We can use react native to create mobile apps and target multiple platforms like android and IOS. During development phase we need  emulators before  publishing the app.

These are some options. 

Android studio

Install android studio and then we can configure the device which we need to target. Link for the download





However I found this option time consuming as we need to select the specific device which we are targeting. We have to install android studio to run the virtual devices

Genymotion






        Note: Only basic version is free for personal use.

 Expo

  • Based on my experience this is the best option as it is easy to set up and and open source
  • Enable developers to build and share true native apps that work across both IOS and Android
  • We can a have desktop version, android or IOS app.


NoteAfter building the app we need to scan the QR code using our device. We can share this QR code to anyone via mail or text message. While sharing both party needs to have installed Expo app in their device



Wednesday, September 20, 2017

Portable color emulators for windows




  • Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. 
  • It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start


Tuesday, September 19, 2017

Class component in React


Functional component

Simple react component which renders a button
const Button= function () {
return (
 <button>Go</button>
);
};
//Syntax to mount a component is ReactDOM.render
//First argument is the component and the second argument is where the 
//component needs to be rendered
ReactDOM.render(<Button/>,mountNode);


React Component, State and JSX


Component

  • It takes an state and properties and uses those object to render html.
  • State can be changed but properties cannot be changed
  • They are written in a special syntax known as JSX
  • All react component must have a render function
  • We should always return one elements from the render function

Overview of React Native


  • Provides native experience with less hassle and leverage existing skills using  JavaScript and React
  • UI consists of 100% native ios/android controls without performance issues
  • A web like user interface which allows us to refresh app from the simulator
  • Apps can be debugged using chrome developer tools
  • We can style views decoratively similar to css
 

Thursday, August 31, 2017

Java script cheat sheet



Push to an array

 outArray.push(arr2[k].charCodeAt()-64)
Convert number to character using ASCII

 outArray.push(arr2[k].charCodeAt()-64)
Convert character to number using ascii

/convert the character value to number
           //note we are subtracting 64
              outArray.push(arr2[k].charCodeAt()-64)

Get first character from a string
function validatePalindrome(word)
{
   //charArray = word.split;
   return word[0];
}
//Function call 
console.log(validatePalindrome("BOB"));


Overview of React


  • Is a JavaScript framework for building User interface
  • It is not a framework
  • It is considered as an view in MVC
  • Virtual DOM gives React it's edge and makes it fast
Virtual DOM:
  • Uses a virtual DOM to push only changes to the DOM instead of re-rendering everything
  • V-Dom allows  rendering on the server side and sending the final HTML to the browser (SEO friendly )
JSX;
      Allows html in JavaScript which results in self contained components

Local storage in the browser


  • The read-only local-storage property allows you to access a Storage object for the Document's origin;
  • The stored data is saved across browser sessions. 
  • local-storage is similar to session-storage, except that while data stored in local-storage has no expiration time, data stored in session-storage gets cleared when the page session ends — that is, when the page is closed.

Classifying data into predefined categories


Input and output for classification problem


  • Input to classification problem is a feature and output is called as label
  • Problem statement and training data is where we spend amount of time

Lets talk about 2 types of problems

  Problem statement 1
     Email, tweet or trading day
  • Types of problems are Spam or Ham
  • Tweet positive or negative
  • Trading day up-day or down-day

ngx-bootstrap in angular 2


Create a new project
ng new wakeGenie

Create a new component
C:\Development\Wakegenie\webApp>ng generate component modal

Install bootstrap in angular 2

Use of Export and Require


Export
  • The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement
  • Along with export we also need require or import
Require

  •  Used to consume modules. It allows you to include modules into your programs. You can include built-in core Node.js modules, community-based modules (node_modules) and local modules

String to JSON object

  •  A common use of JSON is to exchange data to/from a web server.
  • When receiving data from a web server, the data is always a string.
  • Parse the data with JSON.parse(), and the data becomes a JavaScript object.
Edit in plnkr

We would usually receive text from the server. We need to convert it into JavaScript object. In this scenario we use JSON.parse() function.

console.log("** Convert string into JSON object *****")
  
  var jsonstring='{"firstName":"Prathap","lastName":"Kudupu"}'
  
  console.log("\n string-->",jsonstring);
 
  var obj=JSON.parse(jsonstring);
  
  console.log("\nJSON-->",obj);

Multiple panels with css



In this sample we are using bootstrap panel and modified css. This can be used as a standard panel in your website


JSON object to string

 
  •        A common use of JSON is to exchange data to/from a web server
  •       When sending data to a web server, the data has to be a string
  •       Convert a JavaScript object into a string with JSON.stringify()
Edit in plkr

 console.log("*** Convert JSON object to a string");
  var obj={
    firstName:"Prathap",
    lastName:"Kudupu"
  }
  console.log('\n obj', obj)
  console.log('Convert JSON object to string',JSON.stringify(obj));

Output

Note: The difference between string and object is that the property name is the object is not a string


Split and join in JavaScript


Split a phrase into words
This function takes a given phrase and splits based on space into a new array
ex : It would take "Prathap  Kudupu"  it would add it to an array with prathap and kudupu

Edit in plnkr
 console.clear();
  console.log("**** Split a phrase *****");
  
  function splitPhrase(str){
    console.log(str);
    return str.split(' ');
  }
  console.log(splitPhrase('Prathap Kudupu'));
  

Transcript vs caption


Captions 

  • Appear on screen simultaneously with the audio and video, and follows the same timing. 
  • It exists within the video player, and generally speaking, can’t be referenced outside of the video. 
Transcript
  • A transcript is the same word-for-word content as captions, but presented in a separate document, whether it is a text file, word processing document, PDF, or web page. 
  • The transcript of a video could easily be generated from a script, if the video was scripted before production. If the video was not scripted, then the same process of transcribing the audio from the video into typed words is required.

Difference between let and var



The difference is scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.
Also, variables declared with let are not accessible before they are declared in their enclosing block. As seen in the demo, this will throw a ReferenceError exception.
They are very similar when used like this outside a function block.
let me = 'go';  // globally scoped
var i = 'able'; // globally scoped
However, global variables defined with let will not be added as properties on the global windowobject like those defined with var.
console.log(window.me); // undefined
console.log(window.i); // 'able'

Tuesday, August 8, 2017

All about angular CLI



BEFORE YOU INSTALL: please read the prerequisites
npm install -g @angular/cli

Usage

ng help

Using bootstrap in angular 2

To use bootstrap in angular 2  we need to add ngx-bootstrap



  • install ngx-bootstrap and bootstrap
  npm install ngx-bootstrap bootstrap --save
  • open src/app/app.module.ts and add

Add Extensions for visual studio code

We can add extensions to visual studio code using


Example:
If we want to use TSLint (extensible static analysis tool that checks TypeScript code for

Wednesday, June 14, 2017

Nth Digit

Problem Statement

Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ...
Note:
n is positive and will fit within the range of a 32-bit signed integer (n < 231).

Link to gitHub :Code

Add Strings

Problem Statement

Given two non-negative integers num1 and num2 represented as string, return the sum of num1 and num2.
Note:
  1. The length of both num1 and num2 is < 5100.
  2. Both num1 and num2 contains only digits 0-9.
  3. Both num1 and num2 does not contain any leading zero.
  4. You must not use any built-in BigInteger library or convert the inputs to integer directly.
Link to GitHub :Code

Sunday, June 11, 2017

Minimum Moves to Equal Array Elements



Problem Statement
Given a non-empty integer array of size n, find the minimum number of moves required to make all array elements equal, where a move is incrementing n - 1 elements by 1.

Link to GitHubCode

Wednesday, June 7, 2017

Max consecutive ones


Problem Statement

Given a binary array, find the maximum number of consecutive 1s in this array.

Link to GitHub :Code


Reshape Matrix array manipulations

Problem statement

In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new one with different size but keep its original data.
You're given a matrix represented by a two-dimensional array, and two positive integers r and c representing the row number and column number of the wanted reshaped matrix, respectively.
The reshaped matrix need to be filled with all the elements of the original matrix in the same row-traversing order as they were.
If the 'reshape' operation with given parameters is possible and legal, output the new reshaped matrix; Otherwise, output the original matrix.
Link to GitHub Code

Missing Number

Problem Statement

Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missing from the array.

Link to GitHub code

Tuesday, June 6, 2017

Array partition



Problem Statement

Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1, b1), (a2, b2), ..., (an, bn) which makes sum of min(ai, bi) for all i from 1 to n as large as possible.

Link to Github :Code

Find All Numbers Disappeared in an Array


Problem Statement

Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others appear once.
Find all the elements of [1, n] inclusive that do not appear in this array.
Could you do it without extra space and in O(n) runtime? You may assume the returned list does not count as extra space.

K diff pairs in an Array

Problem Statement

Given an array of integers and an integer k, you need to find the number of unique k-diff pairs in the array. Here a k-diff pair is defined as an integer pair (i, j), where i and j are both numbers in the array and their absolute difference is k.

Link to GitHubCode

Monday, June 5, 2017

Move Zeros

Problem Statement

Given an array nums, write a function to move all 0's to the end of it while maintaining the relative order of the non-zero elements.

Example


For example, given nums = [0, 1, 0, 3, 12], after calling your function, 
nums should be [1, 3, 12, 0, 0].

Two Sum

Problem Statement

Given an array of integers, return indices of the two numbers such that they add up to a specific target.
You may assume that each input would have exactly one solution, and you may not use the same element twice.

Link to GitHub : code

Remove element


Problem Statement

Given an array and a value, remove all instances of that value in place and return the new length.
Do not allocate extra space for another array, you must do this in place with constant memory.
The order of elements can be changed. It doesn't matter what you leave beyond the new length.

Link to GitHubCode

Remove duplicates from the sorted array

Problem Statement

Given a sorted array, remove the duplicates in place such that each element appear only once and return the new length.
Do not allocate extra space for another array, you must do this in place with constant memory.
For example,
Given input array nums = [1,1,2],
Your function should return length = 2, with the first two elements of nums being 1 and 2 respectively. It doesn't matter what you leave beyond the new length.

Contains Duplicate II


Problem Statement


Given an array of integers and an integer k, find out whether there are two distinct indices i and j in the array such that nums[i] = nums[j] and the absolute difference between i and j is at most k.

Basically we need to validate if we have near by duplicate

Link to Github :code

Plus one

Problem Statement


Given a non-negative integer represented as a non-empty array of digits, plus one to the integer.
You may assume the integer do not contain any leading zero, except the number 0 itself.
The digits are stored such that the most significant digit is at the head of the list.

Link to GitHub :Code

Example
input = {1, 4, 9, 9}
output ={1, 5, 0, 0 }