DEV Community: Ganeshakumar K

Animated bottom Tabs and iCons in SINGLE LINE of code!

Ganeshakumar K — Sat, 27 Mar 2021 16:41:13 +0000

Animated bottom tabs, New way for more interactive feedback

Animated bottom tab not only gives pleasure feel it also helps the color blinded people to easily detect the tab switch and a button click.

Click on the below video to learn how you can easily convert a normal plain bottom tab to animated one in a single line of code.

Here we are integrating the animated icon to bottom tabs which is created using React Navigation 5.

Fun and interesting coding go and check this out.

Visual studio code Productivity Tips | [2021 coding productivity]

Ganeshakumar K — Wed, 03 Feb 2021 14:46:15 +0000

Watch the above video for details and shortcut commands for the below points.

1. Deleting a line:

If you want to delete one line then don’t select entire line and press delete, instead of it just press command+x or control+x if you are using in windows which removed entire line of code which is way faster than the selecting and a deleting a line. The reason is it also deleted the empty line which is really magical. In a old school way selecting entire line or triple click takes lot of key strokes which you can avoid if you press cut command. Refer video for more info.

2. Copying line of code:

If you want same line to duplicate instead of selecting the entire line and pressing copy command you can directly press copy command I.e command+c or cntrl+c in windows with keeping the cursor in particular line which copies entire line and you can paste it in the line where you want which automatically will add the next line, no need of hitting enter and pasting the contrent. If you are selecting entire row and copy and paste then it will not insert new line where you need to hit enter which is not very productive compared to this.

3. Pasting line of code:

Always paste the entire line to the beginning of the line so that if you copied new line character together you won’t need to delete it or if you want to delete it just press delete, no need of going back to beginning to delete it

4. Pin the file:

Let’s say you are working on multiple file and you feel u miss the file which you use most then you can pin that file to initial place so that you will not get confused when navigating or switching between the lines

5.File search:

When you are working one deep nested files, instead navigating through file browser if you remember file name then just press cntrl+p or command+p to open a file search and here you just type the file name which displays the maching files and this is way faster than navigating through file browser.

6 Comments:

For commenting out a code always use 'command + /' together and for uncommenting as well. Never manually add a comment tags by yourself. So this shortcut or habbit increases your productivity to the next level.

7. Use Plugins:

Always use the plugins for your development environment. I know 95% of the developers using it but if anyone still not using go for it. you can get pluggins over here, and you can search and install it. So before starting any programming you first find it's famous plugin for that, install it then start learning or trying out some apps. because this saves lot of time with code auto fill, spelling mistake and word suggestions.

8. Dark Theme:

Always use a dark mode theme rather than white colour, because which is healthy and eye friendly when you are spending 7+ hours in a day. Here 90% of the developers use dark theme, still wanted to cover 10% of the developers still not compfortable to use the dark theme. It may feel irritated for couple of days if you are switching from light theme to dark but for a long run it is healthy and saves your eyes.

Flutter vs React Native performance benchmark

Ganeshakumar K — Wed, 13 Jan 2021 13:41:14 +0000

Which one is better interms of the build size, speed and CPU utlization and Hot reload.

Here is the parameters which I benchmarked.

Project creation time in React native
Project creation time in flutter
iOS build and run in React native
iOS build and run for the 2nd time in react native
iOS build and run in Flutter
iOS build and run in Flutter 2nd time
Hot reload time in flutter
Hot reload time in react native
CPU utilisation and performance for the flutter run
CPU utilisation and performance for the React native run
Android build and run time in Flutter
Android build and run time in React Native
Android app build size in flutter
Android app build size in React Native
iOS iPA build size in flutter
iOS iPA build size in React native
Flutter and React native parallel run
Dart programming cpu utilisation time
Node cpu utilisation time

Which one is better ? Flutter or React native, Who is the winner.
Is Flutter is better than React native ?
Is React native is better than flutter ?
Which one is best as a hybrid mobile application development
Flutter Vs React native.

Below video explains everything. Click to watch it!

Risk and Entrepreneurs

Ganeshakumar K — Mon, 28 Dec 2020 08:01:05 +0000

Risk factor!
Don't take risk blindly without analyzing. Now in recent entrepreneurs have "can do" attitude which drives them to take any risk thinking that we will never succeed in life until we take the risk. But it is not said anywhere else that who and all took risk they have succeeded in thiere work/life. Most of them fail because below pic is explaining that in very good manner.

Image ref : Google images.So this articles it is not about to discourage the people who having entrepreneur potential inside them, it is them to decide where to take risk and decide is that risk will take them to a goal. Blind risk or without proper analysis risk can be a dangerous.

Now people thinks who will take risk blindly, we have analysed correctly but outcome is failure only. So some times it is adviced that take risk in your compfart zone means "IF risk got failed, it should not be a dangerous to your life, you must able to come out from that and should be able to take more risks freely".

Animated Bottom tabs, new way for more interactive feedback

Ganeshakumar K — Mon, 28 Dec 2020 04:58:47 +0000

Animated bottom tabs, New way for more interactive feedback

Animated bottom tab not only gives pleasure feel it also helps the color blinded people to easily detect the tab switch and a button click.

Click on the below video to learn how you can easily convert a normal plain bottom tab to animated one in a single line of code.

Destructure & Spread operator, Learn it now!

Ganeshakumar K — Tue, 15 Dec 2020 04:39:00 +0000

Destructure is a beautiful ES6 standard which gives convenient way for a programmer to access the values from object or an array. People forget to use this and end up in bad programming habits in Javascript or React famliy.

Let's see where and all we can use destructure

Functional Component
- Inside a function parameter
- Inside a function body
Class component
Array Destructure
Spread Operator
- Array and object spread

Watch the below video which is explained in a beautiful way.

How native iOS developer picked up REACT NATIVE without learning React.js

Ganeshakumar K — Tue, 03 Nov 2020 04:05:20 +0000

Here am sharing my experience as a pure iOS developer with swift and Objective C knowledge and beginner to Javascript and css also a JSX syntax.

Yes 3 years back I decided to learn React Native as I was curious about developing the apps for Playstore/android too. The option to develop app for android is I have to learn Java or Kotlin which I was not interested because I wanted one code to work in both android and iOS hence which can save my time as well I can develop more apps and I can be a freelancer too.

Here am sharing my steps in learning the REACT NATIVE as a pure iOS Developer.

Learn JavaScript: As swift follows Javascript syntax like closures, map functions and most of the concepts like let and var so I have just read Javascript little bit, not into depth as a beginner.
Learn Styling: Went through CSS styling learnt about flex and styling a class.
React Native Documentation: Started reading about REACT NATIVE from there official documentation from here: http://reactnative.dev
Visual Studio Code usage: Installed Visual studio Code as a editor and learned about the plugins.
Start practising: Learned basic structure of the REACT NATIVE application which is something like this
import React from 'react';

import { Text, View } from 'react-native';

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Hello World! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

5 State & Props: Learned about the state and props

Custom Component: Learn about the the creation about the component and using it
3rd party libraries from NPM: Learned to integrate 3rd party packages using NPM
Redux: Learned redux for data flow. As react is one way data binding and passing all values in a props is really makes app very complex and Redux comes into picture where redux manages app state entirely for the application. i.e. you can access the state in all the component.
Learn Hooks: Now this is very important. Because React Native is now mainly using hooks in latest version. Also react makes functional component to work just like a class component hence giving more control on functional components.

This is my steps where I am able to learn REACT NATIVE and understood in depth without prior knowledge of the Javascript, CSS & React.js
Happy if this increased your confidence in learning React Native. HAPPY CODING!