What is JSX?
JavaScript XML like syntax..

What is JSX?
JavaScript XML(JSX) is the extension of JavaScript language to write XML like code in JavaScript.

Why do we need it?
React recommends using JSX to create React elements as it is developer-friendly, and behind the scenes, it will be transpiled to React JavaScript code by Babel.

Eg:

JSX Code 
<h1 id="test">Hello World</h1>

Transpiled code:
React.createElement("h1",{id:"test"},"Hello World");

Currying is a fundamental concept of functional programming

Currying is when you create a function that takes an argument and returns a function that takes the next argument which again returns another function when it is called until the final function is executed for the final result.
The final function will execute with having access to the arguments passed into its parent functions.

Composing is a fundamental concept of functional programming 

Composing is when you take multiple functions and combine them so that one function result would be an argument for another function and another until the final function is executed for the final result.

A closure happens when you put two functions inside of a function and you could take advantage of that by returning a function that retains access to its parent function scope even after it has been executed.

Step by step guide to integrate font awesome with React and Next Js

To get started you’ll need to install the following packages into your project using a package manager like npm and yarn.

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/react-fontawesome
/* 
solid-svg and brands-svg are free icons 
which include both solid style icons & brands like github 
*/
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-brands-svg-icons

Using Icons via Individual Use
Again, with this method, you’ll need to explicitly import icons into each component. Here’s a simple example.

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

Using Icons via Global Use
You probably want to use icons in more than one component in your project, right? Importing icons into each of your project’s components can be really tedious and prone to display errors - especially over time.

Instead, you can add them once in your React application and reference them in any component by importing them via a “library” in the initializing module of your React application.

Let’s say we have a React Application, “Blog”, that display all the social icons in various components like Footer, Contact US

We use Blog's App.js to initialize our app and library. Our app’s UI wants to use individual icons like envelope and We also add all of the brands in @fortawesome/free-brands-svg-icons to add the icons like github and twitter. 

import ReactDOM from 'react-dom'
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab, faEnvelope)

export default function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const SocialIcons = () => (
    <div className="row">
      <div className="pr-3">
         <a href="mailto:ravitejakolla29@gmail.com">
             <FontAwesomeIcon icon="envelope" size="2x" />
         </a>
      </div>
      <div className="pr-3">
         <a href="https://www.linkedin.com/in/ravitejakolla">
             <FontAwesomeIcon icon={["fab", "linkedin"]} size="2x" />
         </a>
      </div>
      <div className="pr-3">
         <a href="https://github.com/ravi-kolla">
             <FontAwesomeIcon icon={["fab", "github"]} size="2x" />
         </a>
      </div>
      <div className="pr-3">
         <a href="https://twitter.com/ravitejakolla">
             <FontAwesomeIcon icon={["fab", "twitter"]} size="2x" />
         </a>
      </div>
    </div>
)

export default SocialIcons;

Till now what ever we implemented above will work fine for React Js application, but for this to work in next js app we need to add some more configurations and  update our _app.js as well.
Follow the next steps for icons to show up in your Next Js application

We need to make sure the CSS for Font Awesome is bundled with the Next.js app.

Create or edit next.config.js in the root of your project:

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  /* config options here */
})

import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import '@fortawesome/fontawesome-svg-core/styles.css'
/* Tell Font Awesome to skip adding the CSS automatically since it's being imported above */
config.autoAddCss = false 

library.add(fab, faEnvelope)

export default function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

That's it!  Font Awesome icons should  be showing up now. 
Happy Coding! 

Integrate Font Awesome with React and Next Js Applications

This article is about the core concepts of webpack for setting up the webpack configuration file

Webpack bundles multiple static files into one or few bundles. 

Under The Hood
Webpack parses the entry file and list's out all the dependency modules and then webpack recursively run through all the dependency modules and its child dependencies and then bundles all of those modules into one or few bundles.
Different webpack configuration  files can be created for both development and production  and can have a common webpack file which will have common things for both development and production.

Entry
The entry point is the starting point of the application bundling process. it can be a simple string to define one path, or can be array of paths, or an object to have multiple entry points.
Note: We should have only entry per page and dynamic modules cannot be provided as entry points.

module.exports = {
  entry: {
    main: './src/index.js'
  }
};

Output
The output property configuration tells webpack how to write the compiled files to disk. we can configure filename property to either single file or multiple files as specified below. 
[name] property will be generated from the keys mentioned in entry option.

const path = require('path');

module.exports = {
  //...
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  }
};

Loaders
Webpack only understands Javascript and JSON files. Loaders help webpack to process non Javascript file types and convert them into valid modules. The webpack community has built loaders for a wide variety of popular languages and language processors.

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      },
      { 
         test: /\.css$/, 
         use: ["style-loader", "css-loader"]
      },
      { 
         test: /\.scss$/, 
         use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

/**
In test property, we provide file name extensions using regex to match files.
$ defines the end of the file name.
**/
/**
loader take priority from left to right.
So first sass-loader converts scss files in to css files.
Then css loader converts css into JavaScript string.
Then style loader injects it to the DOM by adding <style> tag.
**/

Plugins
Plugins give us additional functionality to make things simple. It takes array of plugins as input.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  //...
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Dynamic caching of a web page created using content management system (CMS)

There are many techniques which help organizations improve the performance of their web site and reduce the load on servers. Dynamic Page caching is one of such technique and I will provide a brief overview about this technique used in the Content Management System (CMS) and Content Delivery Network (CDN) world.

Dynamic caching of a webpage reduces the number of requests to the origin infrastructure and improves the Time to First Byte (TTFB) and overall performance.

A common use case would be identifying a first-time user vs returning user and generating content accordingly to increase the conversion rate. Often times, a cookie is set, or can be set, to identify the returning user. CDN can check the cookie presence in the HTTP request and serve its respective HTML content from cache.

Creating Dynamic content on a CMS needs integration of multiple technologies. We have successfully used the HTML Template Language (HTL), introduced with Adobe Experience Manager (AEM) 6.0 as a server-side template system for HTML page in combination with Sling selectors to generate dynamic content. Integration between Dynamic Page Caching and Dynamic CMS Webpage is done by implementing the Apache module mod_rewrite, a very powerful and sophisticated module which provides a way to do URL manipulations. Using rewrite conditions and rewrite rules we can fetch dynamic content from different selectors and map it to the requested URL based on cookie conditions and this will be cached on CDN based on same cookie conditions.

While the web page performance may represent a sub set of the overall transaction it plays a very critical role in improving the overall user experience.

This article is about detecting IE10 & below browser versions and have a custom view

We all agree on one thing! It’s hard to support IE browsers and even Microsoft realized it, so they have made their move out of their proprietary browser engine Trident towards the Chromium open source project.
At the time of this writing Microsoft Edge beta version for Mac is out 👏👏

To detect IE9 & below we have conditional comments in place. We can wrap any content whether it is html or css in side conditional statements to work only for IE 9 or below browsers.

Everything between  will be picked up by Internet Explorer (This only works till IE9).

<!--[if IE 8>…
<!--[if IE 9>…

To detect IE10, we do not have any conditional statements in place, & I would suggest having an inline script to fetch user agent to identify the browser.

Inline script is suggested here because let’s say if any javascript file has ES6 syntax or some error then it will block the remaining JS from execution and will break the page. So having inline script will execute without any issue and can detect the browser type.

For browsers IE 10 & below we have a key word MSIE in userAgent value and value ranges for 8 to 10 to detect specific version of IE browser.

html[data-useragent*='MSIE 9.0'] .css-selector { 
    display: block !important; 
}
html[data-useragent*='MSIE 10.0'] .css-selector { 
    display: block !important; 
}

html[data-useragent*='MSIE'] .css-selector { 
    display: block !important; 
}

This is actively maintained documentation on GIT commands

Switch to the branch you want to work and build in your local

Let’s say you created a new branch in your remote repository and need to checkout in local the first use fetch command and then checkout command

git commit -i file_name -m “commit message"

Option 1: First Create a Branch and then checkout

git branch branch_name
git checkout branch_name

Option 2: Single command to create a new branch and checkout.

Option 3: By providing existing branch name, we can base new branch from it

git checkout -b branch_name existing_branch

Set Remote Repo
If origin is your forked remote repo, set upstream to original repo

git remote add upstream original_repo_url

Git Logs
See all commits with one line message

Cherry pick range of commits after commit A and till commit B

Cherry pick range of commits including commit A and till commit B

Let's take an example of squashing last two commits

It will give list of commits with the tag "pick", we can update one with "reword" and other commits as "squash"  and save it by executing :wq

on the next step, update the commit message and comment remaining lines of commit messages and save it by entering :wq
Finally, force push the commit

Let’s say you’re working on two different features, and you don’t want to commit them, then use git stash command to save and retrieve it whenever needed.

git stash push -m “commit message“ file-path-1 file-path-2

Detail process documentation on git cherry-pick

Cherry picking is the act of picking a commit from a branch and applying it to another.

Even though git cherry-pick is just a single command, it needs a whole process to get that right. So below are the list of commands need to be executed to have a successful cherry picking 😊

Step:1
Clone the remote repository in to local machine and change the root to your repository

git clone remote_repo
cd local_repo
eg: 
$ git clone https://github.com/ravi-kolla/git-cherry-pick.git
$ cd git-cherry-pick

Step: 2
Checkout the branch you have changes in and pull all the commits from remote repo

$ git checkout branch_with_commit
$ git pull //pulls all the commits from from your branch

Step: 3
Checkout the branch you want to add the changes

$ git checkout branch_to_add_changes
$ git pull 
//pull all the commits to make sure your new branch is up to date before adding new changes

Step: 4
Cherry pick a commit which you want to be added to the new branch by passing commit hash

$ git cherry-pick #commit-hash 
$ git cherry-pick 29cebd92

Step: 4.1 (Incase if you get merge conflicts on executing git cherry-pick)
Lets say after executing step:4, you came across bellow error 😒

$ git cherry-pick 29cebd92
error: could not apply 29cebd92… commit_message
hint: after resolving the conflicts, mark the corrected paths
hint: with ‘git add <paths>’ or ‘git rm <paths>’
hint: and commit the result with ‘git commit’

check git status to identify the conflicts and resolve the files mentioned as both modified.

$ git status
On branch pre-release
Your branch is up to date with ‘origin/pre-release’.
You are currently cherry-picking commit 29cebd92.
(fix conflicts and run “git cherry-pick — continue”)
(use “git cherry-pick — abort” to cancel the cherry-pick operation)
Changes to be committed:modified: file-path/sample.css
new file: file-path/sample.js
new file: file-path/sample.txtUnmerged paths:
(use “git add <file>…” to mark resolution)both modified: file-path/main.js
both modified: file-path/main.css

Once the merge conflicts are resolved add those files to git and then continue with git cherry-pick.

$ git add file-path/main.js file-path/main.css
$ git cherry-pick --continue

Step: 5
You’re all set to push the cherry picked commit(s) to your new branch 😄

$ git push //commits you selected will be pushed to the new branch

$ git cherry-pick A^..B
where A is the commit hash you want to start from (the ^ will include commit A instead of starting at next commit after A) and B is the commit you want to end after being applied.
$ git log --oneline
Gives you list of commits in single line so you can easily select commit hash codes for cherry picking

This is a multi variant UI card Component

Back-end logic for email subscription component

Hey, I’m Ravi.

Software Engineer

Recent Posts

Projects

React Smart Card NPM Package

Hindustan Daily, A Media Website

Email Subscription Component

Ravi Teja Kolla

Subscribe for latest blog posts