React--Components and elements

React is a JavaScript library used to build a UI. It works on the concept of components.

Components are useful to break UI down into reusable, independent pieces. It accepts inputs (props in React) and returns React elements.

Elements are the building blocks of React App which describes what should appear on screen.

Components can be defined in two ways:
As a function, also called functional because they are literally functions.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}                                                                                 (1)

And second as class

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}                                                                                 (2)

Both (1) and (2) are same for React.



In HTML, following <div/> is present

<div id="root"></div>

which is called 'root' DOM. Everything inside it is managed by React DOM.
To render a React element into root DOM node, we need to pass both, the element and the root to ReactDOM.render()
e.g.

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Friendly Forwading in Rails

A user who is not logged in but tries to access a protected page is redirected to login page. After the user logs in, they should be directed to the page they initially requested for (just to make the application user friendly), rather than the default( may be the profile page of user) page. For this to achieve, the requested page can be stored in the session:

session[:forwarding_url] = request.original_url if request.get?

and then the user is redirected to the login page.

After successful login, the user should be directed to the requested page, if

session[:forwarding_url] is present, else should be directed to the 

default page:

redirect_to (session[:forwarding_url] || default)
session.delete(:forwarding_url)

Do not forget to delete the session key.

SSL Implementation

Whenever we open a web page, we can see the URL either starting with HTTP or https. On HTTP, all the data transmission between the browser and the server is a plain text. Generally, this is not an issue until a sensitive data, like login password, credit card details, bank login passwords, needs to be transmitted over the network.

Transferring such confidential data over the network need to be encrypted so that only intended receiver can decrypt it. SSL comes into the picture when such requirement arises. An SSL-enabled website has HTTPS URL.

What is SSL?

SSL stands for Secure Sockets Layer, an encryption technology that was created to establish an encrypted connection between web server and web browser.

All browsers have the capability to interact with secured web servers using the SSL protocol. However, the browser and the server need what is called an SSL Certificate to be able to establish a secure connection.

What is SSL certificate?

SSL Certificate is a key pair: a public and a private key. These keys work together to establish an encrypted connection.

To get a certificate, one must create a Certificate Signing Request (CSR) on the server. This process creates a private key and public key on your server. The CSR data file that you send to the SSL Certificate issuer (called a Certificate Authority or CA) contains the public key. The CA uses the CSR data file to create a data structure to match your private key without compromising the key itself. The CA never sees the private key.  

How SSL works?

When a browser attempts to access a website that is secured by SSL, the browser and the web server establish an SSL connection using a process called an “SSL Handshake” explained below:

• Browser connects to a web server (website) secured with SSL (https). Browser requests that the server identify itself.
• Server sends a copy of its SSL Certificate, including the server’s public key.
• Browser checks the certificate root against a list of trusted CAs and that the certificate is unexpired, unrevoked, and that its common name is valid for the website that it is connecting to. If the browser trusts the certificate, it creates, encrypts, and sends back a symmetric session key using the server’s public key.
• Server decrypts the symmetric session key using its private key and sends back an acknowledgement encrypted with the session key to start the encrypted session.
• Server and Browser now encrypt all transmitted data with the session key.

How to implement SSL on Ubuntu system?

1. Install openssl by running sudo apt-get install openssl. 
2. Generate key file by running openssl genrsa -out YOUR_KEY_NAME.key 2048 or
openssl genrsa -out YOUR_KEY_NAME.key 4096.
3. Create CSR file by running openssl req -out YOUR_CSR_FILE_NAME.csr -key YOUR_KEY_NAME.key -new -sha256
4. Submit the CSR file to the SSL issuing authority. They will issue the certificates. CSR file can be viewed by running openssl req -in YOUR_CSR_FILE_NAME.csr
5. Save your certificates and the generated key file to the server.
6. Restart your server.

CSS Animate

Animation in CSS is a very powerful tool which may make a website look interesting. One may confuse between animation and transition effect and may find a similarity, but the difference is huge.

A transition has only a start and an end state. An element changes from one state to another and the browser fills in that state change with a sequence of in-between frames. To change an element from one state to another smoothly, a transition is a good choice.

On the other hand, CSS Animations are a more powerful alternative to transitions. Rather than changing from one beginning state to an end state, animations can be made up of as many states, in-between states, as one may like. It offers more control over how the states are animated. Where a transition only goes from A to B, an animation can go from A, B, C to D. Or any number of stages as needed.

Animation in CSS provides many animations like bouncing, fading, flipping etc.

To include animations, some easy codes needs to be written in the .css file of application.

For example, if one wants to give a sliding out animation to its element, one should write:

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

jsTree in Rails

jsTres is an open source jquery plugin which provides interactive trees. It supports HTML and JSON data with AJAX. It is easily extendable, themeable and configurable. It is useful in creating static and as well as dynamic trees. Dynamic tree works with AJAX, which fetches data from the server.

To begin, download it from jstree and include the dist folder in your assets folder of Rails application.

Setup a container in the view page where the tree should be shown. The container can be as simple as just a div, for example:

<div id="jstree_demo_div"></div>

Once the DOM is ready, jstree instance can be created like:

$(function () { $('#jstree_demo_div').jstree(); });

The selected node can be inspected with:

$("#jstree").on("select_node.jstree", function (event, node) {})

Data about the selected node can also be obtained, some examples:

.text will return the name of node,
.id will return id of the node.

Static tree can be created just by giving some attributes like text, children etc. Children attribute is given as an array of strings. One example is as:

<div id="jstree"></div>

<script>
    $(function () {
        $('#jstree').jstree({
            'core': {
                'data': [
                    'SocialMatic',
                    {
                        'text': 'Accounts',
                        'children': [
                            {
                                'text': 'Users'
                            },
                            {
                                'text' : 'Campaigns',
                                'children' : [
                                    {
                                        'text' : 'MarketPlaceConfig',
                                        'children'  : [
                                            {
                                                'text': 'Products',
                                                'children': ['GooglyResponses', 'Postings','BrokenPostings']
                                            }
                                        ]
                                    },
                                    {
                                        'text' : 'SocialMediaConfig',
                                        'children' : [
                                                'Postings', 'BrokenPostings'
                                        ]
                                    },
                                    'TwitterSms', 'PinterestSms',{
                                        'text':'FacebookSms',
                                        'children' : ['FacebookPageSms']
                                    },'FacebookPageSms','GoogleSms','GooglePageSms'
                                ]
                            }
                        ]
                    }
                ]
            }
        })

The above will generate a static tree. 

An example of script for a dynamic tree:

$('#jstree').jstree({
    'core' : {
        'data': {
            'url': function (node) {
                return node.id === '#' ?
                        '<%=trees_tree_path%>' :
                        '<%=trees_treec_path%>';
            },
            'data': function (node) {
                return {'id': node.id, 'text': node.text};
            }
        }
    }
});

The jsTree will automatically place AJAX request on the url path.

 

Active Admin

Active Admin is a Ruby on Rails plugin for creating and managing admin page.

The available gem can be included in the gem file like this:

gem 'activeadmin'

Run bundle install to install the gem into your rails application.

In the terminal, run:

rails generate active_admin:install

Migrate the database after installation:

rake db:migrate

Run rake db:seed because active admin adds username and password for first the admin in seed.rb file. The first admin can then add more admins.

Some may face following issues while running bundle install:

Your bundle requires gems that depend on each other, creating an infinite loop. Please remove gem 'meta_search' and try again. 

Solution: Replace

gem 'activeadmin'

with

gem 'activeadmin', github: 'activeadmin'

Or, something like this: 

 

Bundler could not find compatible versions for gem "actionpack":
  In snapshot (Gemfile.lock):

    actionpack (= 5.0.1)

  In Gemfile:
    activeadmin was resolved to 1.0.0.pre4, which depends on
      inherited_resources (~> 1.6) was resolved to 1.6.0, which depends on
        actionpack (< 5, >= 3.2)

    activeadmin was resolved to 1.0.0.pre4, which depends on
      inherited_resources (~> 1.6) was resolved to 1.6.0, which depends on
        actionpack (< 5, >= 3.2)

    rails (>= 5.0.0.1, ~> 5.0.0) was resolved to 5.0.1, which depends on
      actionpack (= 5.0.1)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

Solution: Add this in your gem file

gem 'inherited_resources', github: 'activeadmin/inherited_resources'

 

transition in css

To change property values smoothly, CSS transition can be used. CSS transition allows us to transform any rapid or sudden change in property values smoothly over a period of time.

The syntax for transition is : 

"transition: property duration timing-function delay;"

• Property can be any value which is changing, be it be height, width etc.
• The duration is the time over which the transition should take place.
• Function is the way the transition would take place.
• Delay specifies the time after which the transition period starts.

The example:

<style>

      transition: width 2s linear 2s

<style>

The above example will change the width linearly over the period of 2 seconds with an offset of 1second.    

The transition-function property can have the following values:

• Linear:  Transition effect with the same speed from start to end.
• Ease: Specifies a transition effect with a slow start, then fast, then end. slowly. This is default, if nothing is specified.
• Ease-in: Transition effect with a slow start.
• Ease-out: Specifies a transition effect with a slow end.

WhatsApp Security - 1

Ever hesitated to share confidential details with your close ones over a phone call or a text message because of security reasons? Here's a messaging service which not only provides you with secured and protected message sharing over text messages but also over Internet calls: "WhatsApp". 

WhatsApp is something with which we all are familiar. Many of us use it daily for exchanging messages and all it uses is small Internet data. On March 31, 2016, WhatsApp came up with a release which supported end-to-end encryption of messages between sender and receiver. The end-to-end encryption protocol was designed by Open Whisper Systems. Private keys, Public Keys and Session Keys play a role in secure message exchange.The protocol is open source and available at: https://github.com/whispersystems/libsignal-protocol-java/. Lets take an overview of the protocol.

1. It all starts with installing the WhatsApp. During Installation time, the WhatsApp client generate public keys. These public keys gets stored at the WhatsApp server during client registration. At no time, WhatsApp have access to the private keys.

2. Next stage is session setup, which starts when a initiator (sender) sends the message to someone for the first time. This stage can be divided into two: Initiator session setup and Receiver session setup.

Initiator Session Setup

• Initiating client request public key of the receiver. 
• Server returns the public keys and Initiator saves them.
• Initiator generates a master key using one of its public key, receiver's public keys and self generated Curve25519 key.
• Initiator now generates Root Key (Session key) and Chain Key (Session key generated using Root key) using the master key.
• Now sender sends its first message to the receiver with one of its public key (Identity Key) and self generated ephemeral Curve25519 key in the header of the message.

Receiving Session Setup 

• Receiver also generates master key using own private keys and public keys received in the message header.
• Receiver then generates its session keys using the master key.

3. Now comes Exchanging Messages after session setup. Clients exchange messages using Master Key (Session key generated using Chain Key). Message key allow encryption and authentication. Its changes for every message transmission and cannot be reconstructed after a message has been transmitted or received.

After all these WhatsApp also provide its users to verify the other user to whom they are communicating so that they are able to confirm an authorized user at the other side and no man-in-the-middle attack. WhatsApp provides this facility by QR code and a 60-digit number, which can be compared for verification.

In the later posts, we will discuss about the exchange of media, attachments, group messages and call setups.



Ref.: https://www.whatsapp.com/security/

Keep Learning...Keep Sharing..~~!!

Ta-Ta.

Mobile Networks

The mobile network didn't started with all those facility we see or use today. It all started with analog communication, known today as 1G network. Later with the advancement it was digitalised in the name of 2G. Then we saw 3G and 4G comming. We will discuss them all in detail:

1G: Stared in 1987, mobile commmunication was analog in nature. It worked as normal radio transmission. One could use 1G network for only calling purpose. The channel used for communication was split between users using FDMA technique. In FDMA (Frequency Division Multiple Access) the users are distributed over the network by spliting the fequency band. The available spectrum was divided in 30KHz band channels and each channel was dedicated for only one user. Though the same the same frequency channel was resued at other mobile user away from the user aleady using it. This concept is called as frequency reuse. The drawbacks of 1G was:

• Not able to support the increasing number of users.
• Security issues as it was analog in nature.
• Disturbance, interference, background noise were the other concerns.

2G: 'G' means generation. So, the next generation of mobile network was named as 2G and previous was given the name 1G. (1G got its name after second generation was introdued. 2G was a jump from analog communication to digital communcation. Digitalization brought security, more clear voice, and transfer of data packets for the internet. 2G worked on TDMA. In TDMA (Time Division Mulple Access), each channel band was again didvied using time parameter, which helped in accomodating more number of users. 2G made possible to communicate with anyone around the globe. 2G brought so many possibilities but, it also had limitations.

Limitation with 2G will discussed in the next post, along with 3G and 4G.

Keep Learning, Keep Sharing..~~!!

Ta-Ta

Secured HTTP

Sharing data over the internet is very easy, whether we send a general data or we send a confidential data, such as credit card details for payment. Both the transfer of data follows slightly different protocols, these are HTTP and HTTPS. When we browse a normal data, we can observe 'http' prepended to URL and when we visit  a payment site we can see https prepended to the URL. Let's see the difference between them:

HTTP: To communicate data and exchange information over the internet, a procedure was developed called as HTTP - HyperText Transfer Protocol. The data over HHTP can be seen by anyone over the internet but when it was necessary to transfer confidential data over the internet, a modification was needed. This introduced to HTTPS - HyperText Transfer Protocol Secure.

HTTPS: HTTPS relies on SSL certificate to securely transfer the online data. SSL certificate is a document which enables the sender to encrypt the data so that only intended receiver can decrypt it.  This procedure of encryption is called as HTTPS.

SSL: Every user has a public key and a private key. A Public key is shared with everyone with whom the user wants to communicate, but the private key is never shared. If user A wants to send some data to user B, the B sends A its own SSL certificate which contains B's public key. Now, user A encrypts the data with user B's private key, which can only be decrypted with B's private key. This way no other can decrypt the data along the way. This encryption is called SSL encryption.

So, when you browse a site which should be encrypted check for https in the URL. If you don't find https, then that website in not encrypting your data.

JQuery part I

Introduction

JQuery is a JavaScript library, written in JavaScript, to simplify the JavaScript programming. JQuery completes a task in much less lines of codes than JavaScript to complete the same task.

  

Including JQuery in JavaScript

JQuery can be included in the JavaScript code either by downloading the library or by Content Delivery Network (CDN). CDN is provided by Google and Microsoft.

Advantage of including via a CDN

When a user requests a file from CDN, it is served from the closest server to the user, making it faster to load.

Basic Syntax

Basic syntax is: $(selector).action()

• $ sign indicated its a JQuery.
• selector indicates on which element to work.
• action indicates what action needs to be performed over the element.

some examples are shown below:
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
$(this).hide() - hides the current element.

Keep Learning, Keep Sharing..~~!!

Ta-Ta

Ref.: w3school.com/jquery
 

Ruby - 1

Ruby is an interpreted language. Interpreted languages are those in which instructions are executed one by one.

If some one is new to programming field, he/she  will not be able to understand my above lines. Don't worry, my very next post will be dedicated to the it. Before starting any programming language, it is necessary to understand what actually a programming language is (especially if you are going to start your first language) and why it is different from others. Read my next blog and you will be able to understand what actually is programming language, why are we even learning it and what is the difference between scripting language, markup language and programming language. So for now, I will just introduce Ruby.

Ruby is object oriented. Don't worry, I will definitely explain "What does being Object Oriented mean?" and will explain after all "why we needed the language to be Object Oriented?" in my next to next blog.

After all these I will start with Ruby and will strictly talk about technology. I will also complete the topic on Git and explain SSH.

Before starting Ruby, we should keep following points in mind:

• Ruby looks easy and indeed the written code is easily understandable, but Ruby actually is very complex and error prone. 
• Ruby is more famous because of Rails, Rails is a web development framework.

Keep Learning, Keep Sharing..~~!!

Ta-Ta
Click Here for my Blog (advertisement may come; skip if you want to)

Using Git

Everyone must have an idea of Git. If not, you are not following my blogs. Find it here: "Why Git?" (advertisement may come; skip if you want to)

Git is used to push repository from local to remote, clone and pull repository from remote to local. Lets get to the steps to do that directly. We will use terminal to write commands:

From Local to Remote

1. Go to the folder where your file is stored using 'cd' command. Suppose you are at home and the file is stored in Downloads. Go to Downloads by writing the command 'cd Downloads'. By the way, home can be reached by just typing 'cd' in the terminal. After reaching the Downloads, you need to initialize git here. Git can be initialized by writing 'git init' command. This should create a .git folder in Downloads.
2. Next step would be to add your file to the Git. Adding can be explained as picking a particular file from a list of files in that folder. This can be done with the command 'git add file_na, me.txt'.
3. git commit -m "any message". This command will commit the file to your git. Your push will come the message you write under the double inverted commas.
4. git remote add origin ...... This command will link your local to the remote. The address of the remote is written after origin. Origin is just name of your local repository. You can give any name.
5. Now this command will push your file to the remote: "git push origin master".

From Remote to Local

1. git clone ...... write this command in your terminal and repository will be saved into local.  The address of the remote is written after clone. Folder with the same name as the repository will be created in the directory where where you are currently.

Well this was all about pushing and cloning from local to remote and vice-versa. Any time you can run the command git status to check which files are added, which files are committed and which files are needed to be commit. There are many more thing which needs to be discussed about Git, but will leave it for the next time. I will also discuss about SSH.

Keep Learning, Keep Sharing..~~!!

Ta-Ta
Click Here for my Blog (advertisement may come; skip if you want to)

From WINDOWS to UBUNTU

After using Windows OS for many years, it was quite difficult to switch over to UBUNTU. First impression for Ubuntu was: Its not that user friendly. The fact is, its simple, user friendly and programmer friendly.

Ubuntu is Linus based OS. Linux is the kernel of Ubuntu. kernel is something which makes possible for the OS to interact with the system's hardware. Fedora, Debian are other examples of Linux based OS.

Command line interface for Ubuntu is known as Terminal. (Ctrl+Alt+T) will open the Terminal for you. Following are some useful commands for Ubuntu beginners:

man : Opens Manual page of any command

ls : list of files and directories in your present directory

cd : change directory, (type cd name of directory)

mkdir : create a new directory

rm : remove files or directory

rmdir : removes directory

mv : rename files and directories

pwd : shows your current directory

vi : a editor

cat : shows content of a file on the Terminal

nano : a editor

cp : copies content

Above given were some commands of many. Anyone can google for Ubuntu commands which comes handy when using Ubuntu and eases the life on Ubuntu.

This was nothing but a introduction for Ubuntu. I will definitely go into the details in my coming posts. There are various things lined up, various knowledge is lined up for sharing, e.g., detailed Ubuntu, detailed Git, ruby a programming language. As more posts will come I will go more and more technical.

Till the next time

Keep learning, keep sharing..~~!!   

Ta-Ta
Click Here for my Blog (advertisement may come; skip if you want to)

Why Git?

Hello, and welcome again. I will continue from where I left. Remember what I said in my previous blog? --Keep learning and keep sharing!!--

If you haven't read it yet, here it is :"My First Blog" (advertisement may come; skip if you want to)

My blogs will be all about sharing what I learn and my experience. Post by post the blogs will become more technical.

Before proceeding further answer this question: Why is it important to share the knowledge?

What I learnt this week was totally new to me but was totally exciting- "Git".

Git is a software used for software development. Create a repository in the cloud and upload your locally created work. The uploading process is called push. Every time you push it gets saved with a new head so that you can download your previous works. Suppose you push something and you have been updating it for the past 10 weeks, you can still download your work what you updated after your update of 6th week because Git saves your every push with a new head or version and hence, Git is called a Version Control System. The downloading process is called pull.

Git makes it easier for a team with distant members to work on a single project. Each member can push their work on the cloud and pull other's work from the cloud. It is decentralized and hence, it is a Distributed Revision Control system. 

So, Git is a very essential software for a team in software development. This was more like an introduction, details will be in the next post. Till then, keep learning, keep sharing because learning and sharing both are important. One learns because someone else shares. What if scientists stop sharing? What if Newton, Franklin, Einstein and others hadn't shared their inventions and discoveries?

Keep Learning, Keep Sharing..~~!!

Ta-Ta
Click Here for my Blog (advertisement may come; skip if you want to)

First Job Experience

My first blog comes after getting my first job. First job in general is a really big step change in life, but not in my case. From school life to college life we all enjoy a ‘bindas’ life, with a right amount of ‘swag’. Max fun, min responsibility and min tension  is what we know as school and college.

There is a very negligible change in life from school to college, but then comes the final year of graduation. We start preparing ourselves for the professional world and start wondering how it is going to be.

Professional life means start acting like what you were not in college.  You start hearing words like increased responsibility, more tension, politics, sycophancy, race and the list goes on.

Well, my experience? Yes, I was also getting myself prepare for these things.  There is definitely increased responsibility, but I got my first job at such a place which doesn't make you feel like you are somewhere else. Here, acquaintances are friends, no race, environment is as cool as possible with a lot of positive energy. They mix work with a right amount of fun, which is possibly the main reason of their growth and achievements.

Learning over? If you think leaning part is over, then you are over. After graduation, study life finishes but the real leaning phase starts. 

Care for some tips? Keep everything managed, do what you love or find a way to start loving what you do. Money is important but as a fresher, learning is far more important. Learn more, earn more!!

I will keep sharing my experience and keep posting what I learn, so..

Keep Learning...Keep Sharing..~~!!

Ta-Ta.
Click Here for my Blog (advertisement may come; skip if you want)