React state management. clean sate mess, loading and error handling in react
React state management. clean sate mess, loading and error handling in react
Photo by Unsplash

User-facing applications deal with different states of the data. There are many ways to show the UI based on the states of the applications. Here we will be taking an example of the Application which is mainly based on HTTP requests.

Most of the react front-end application is mainly doing HTTP request and shows the response to the user. For a better UX, our UI needs to communicate user about the whole process.

Let’s write it in the product requirement statement. Fetch users list and show the user. Meanwhile, data is being fetched, show Loader/message. …


React Rendering javascript data types

React uses jsx for the HTML templating. This is very powerful and easy to get started with. It is great while displaying data to using the power of JS in templating.

But still, I see many developers making mistakes and confused about how React will interpolate and render the native data types on the HTML.

Below is the snippet for the thoughts to get started with

{props.heroList.length && <HeroListContainer list={list} />}

What will be rendered if heroList=[]. If you know what is the problem in the above snippet then you can skip this article. If not then follow.

The problem…


terminal commands, shell commands, linux terminal
terminal commands, shell commands, linux terminal
Photo by Joshua Sortino on Unsplash

before taking a course on the Introduction to Shell for Data Science I thought I know about the shell.

Here is what I learn

  • cat
  • cut
  • tail/head
  • grep
  • history / !<command number>
  • !<command you last used> it will remember the other parameters
  • Paste will join data from the files

What other wildcards can I use?

The shell has other wildcards as well, though they are less commonly used:

  • ? matches a single character, so 201?.txt will match 2017.txt or 2018.txt, but not 2017-01.txt.
  • [...] matches any one of the characters inside the square brackets, so 201[78].txt matches 2017.txt or 2018.txt, but not 2016.txt.
  • {...} matches any…

Although react is JavaScript it Html and seems easy to get started with it.

There are followings small topics, I came across.

  1. A component should be camelCased.
  2. Component composition or content projection in Angular achieved using
    `props.children`
  3. some changes in HTML htmlfor, className
  4. Special prop key which is used for array iteration and isn’t accessible in the component.
  5. Special template Fragment used to hold elements shorthand for this is <></> .
  6. For forms management user Formik as handling forms are tuff.
  7. for styling user camelCase e.g. styles={backgroudColor: 'red'}
  8. ref to manipulate HTML element in the components programmatically.
  9. Lazy component loading…

  1. About the data types supported in the jsx .

It Supports the following in the jsx.

  • numbers/ string
  • Array
  • Set
  • any iterables
// this is valid jsxconst testVar = new Set([2,3,3,4]);function App() {return (<div className="App"><h1>Hello CodeSandbox</h1><h2>Start editing to see some magic happen!</h2><button onClick={()=>console.log(window.location.reload())} >Test</button>{(testVar)} {`testVar Hellot ${testVar} {good for the printing}`}{ `Hello {testVar}` }</div>);}

2. How to print {} in the jsx.

// use template literal string for this 
// if you want to print {myVar} in jsk. do it this way
return <div>
{ `{myVar} // will print…

Python is a great programming language. I am here including all the really required small information and tricks that will be used in our daily coding and debugging.

Python shell/python cmd command`

If you just want to run small code use -c .

python -c "print('Hello!')"
> Hello!

If you want to include a module then use -m .

python -m pdb mycode.py

This will include pdb module and run our code file.

And another helpful is -i this will open python shell after the file execution python -i myCode.py .

Python string and indexes

Photo by Science in HD on Unsplash

I am sure every angular developer has used this directive ngClass once. They are used to add/update CSS class or classes (as shown in the below code) dynamically based on the condition.

<iclass="fa fa-lg fa-fw"[ngClass]="{'fa-check-square text-primary': vendor.id,'fa-window-close text-danger': !vendor.id}"></i>

In the above snippet, we are adding a different set of classes based on the condition.

But the condition for the adding classes changed. I have to check if these ids are there is a collection or not?

so the code became.

<iclass="fa fa-lg fa-fw"[ngClass]="{'fa-check-square text-primary': collection.includes(vendor.id),'fa-window-close text-danger': !collection.includes(vendor.id)}"

New web APIs

Yes, the title you are reading is almost true. Browsers are getting more and more powerful and with the new, Web APIs it gets most of the necessary power that we need for a native mobile APP.

This article is inspired by this talk on Google I/0 2109. You can to the talk and get the sense of the possibilities that a website can a better solution to the native apps.

I will list done all the new web APIs that gives the power to a web page to leverage mobile hardware and do things that weren’t possible before. …


In an Angular application, for routing we use routerActiveLink to add CSS class to the link or the parent element when the user navigates to the links.

<li routerLinkActive="active activeClass2">
<a routerLink="/page">Inicio</a>
</li>

The above code will add active and activeClass2 to the li element when the user navigates to the /page URL.

But sometimes we want to navigate to the section on the page using old school with the help of segments having id attached to the segment/div.

For our project, we used the same page navigation using these segments(id). For the segment navigation on the page, Angular has…


I recently got an opportunity to so some big data analysis. The work was to get some data from large files and create an analysis.

For this task, I was introduced to Spark on Databricks. We can use the following languages to write our logic in the notebook.

  • Python
  • R
  • Scala
  • SQL / Hive context

I new Python before, and a little bit of Scala programming. Obvious i was confused which will be better for the given task and for the long term benefit.

I search on the internet to get some opinion on this. …

Lokesh kumar Jain

Love Web building technologies working as frontend team lead loves working on JavaScript tech stack, as Reactjs, Angular, HTML5

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store