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.