JavaScript
When working with web we often need to animate or reveal html elements by detecting the scroll position. One such example would be to display a container for a state variable and scroll. The IntersectionObserver is a useful interface to achieve such functionality.
Read more “How to use IntersectionObserver to detect the position in React”
JavaScript
React components offer many advantages to break the code and implement web features. But when it comes to some features it could bit difficult to make it work. One such problem would be to listen to document click events and making the changes to components like dismissing dropdowns when pressed on the background.
Read more “How to dismiss dropdowns when pressed on background with React.js”
JavaScript
Every programming language has strings that represent a set of characters. Javascript strings have some properties which are unique to the language. This guide covers these properties and important facts when using strings.
Read more “03. Javascript Guide – Strings”
JavaScript
React hooks have been very promising solution for most of the coding issues that React framework had in old days. But for novice developers, it could be hard to understand. Especially if you are moving from old react to new. One of the main problem is how to fetch data with useEffect in a proper way.
Read more “How to fetch data with useEffect”
JavaScript
Stripe is a great way to make payments for your web or mobile platforms. Being a full service payment platform, Stripe also gives you a variety of SDKs to implement your backend and frontend code with the best compliance options. In this tutorial you will learn how to add styles to stripe elements if you don’t want to use existing styles of the card input.
Read more “How to add styles to stripe elements without using CardElement”
JavaScript
Array is used to store a sequence of elements as references. When declaring typescript array, the type of the elements should be defined in its syntax.
Read more “How to use Typescript with arrays”
JavaScript
React native always has been quite painful when it comes to performance compared to a native application. Today we will focus on increasing the performance and how to optimize react-native map view which has many pegs or markers.
Read more “How to optimize react-native map views”
JavaScript
Why debounce with react hooks? We all come across that one button users keep on pressing until the data is loaded. Without guarding your code with every sort of if conditions, you can guard this by debouncing. For multiple tap scenarios, you can either propagate the event at the first tap/click or the last one.
Read more “Avoid multiple clicks using debounce with react hooks”
JavaScript
The numbers in Javascript has many subtle things to understand it fully. In this section, we are going to discuss the following points.
JavaScript
In this introduction to Javascript, we are going to discuss the following points.
Docker
Nginx Load Balancer with docker has become a fine recipe for managing services in closed systems. Although services like Kubernetes provide container orchestration, sometimes architecturally it could be an overkill. In this example, I will be showing how to use docker services using Nginx load balancer.
Read more “Nginx Load Balancer with docker for nodejs services”
JavaScript
Here we are discussing creating react app using npx create-react-app. npx comes with npm 5.2 and higher.
Prerequisite: You need to install Node >= 8.10 on your machine.
npx create-react-app my-app
create-react-app set up the main structure of the application.
Important: If you previously installed create-react-app using npm, uninstall before using npx. Because npx always refer the latest version of libraries.
JavaScript
npx comes bundled with npm version 5.2+.
If you want to run a package using npm, you must specify that package in your package.json file and install a package locally on a project:
npm install package-name
npx is a npm package runner.
JavaScript
This article will guide you on how to create a simple tab component using the react-tabs library.
Install react-tabs using
yarn add react-tabs why yarn ?
JavaScript
Let’s assume we are creating “helloWorld.jsx” like below, you can see there is a compilation error display as “’React’ must be in scope when using JSX react/react-in-jsx-scope.”
const element = <h1>Hello World!</h1> export default element;
This happens due to “React” import necessary in JSX file.The React library must also always be in scope from JSX code. To overcome this error “import React from “react”;” must be added into the file as follows.
Read more “The Common Errors that beginner React Developers Make”
FCM
If you are new to firebase and FCM this article will be useful to setup FCM Push Notification with React Native application. We will be using react-native-firebase(doc: https://rnfirebase.io/docs/v5.x.x/getting-started) module to retrieve token for the push notifications.
First, create the Firebase account and download the google-services.json file from the console.
Read more “How to setup FCM Push Notification with React Native App” 
Apollo Client
Query definition in GraphQL is will be something you know now but not mastered. If you were going through the pages to troubleshoot frequent errors with Apollo Client which makes no sense, this post might help. First, the reason to create this post is,
And most importantly if I get into a trouble again, I can refer this 😉 Read more “Query definition in GraphQL and frequent errors with Apollo Client”
AppSync
Recently, I had to create a AWS Lambda trigger for the AWS DynamoDB table events. The tricky part on this thing was to mutate AWS GraphQL using AWS Lambda with this DynamoDB event. The reason was I wanted all the clients which were subscribed to GraphQL to get this event with modified data.
AppSync
Recently I came up with a react native app which needs to integrate AWS GraphQL. Its actually provided with AWS App Sync and a very convenient way if you want a quick pub-sub. The problem was I had to do mutations as a background asynchronous process and wanted to update the app state from that. When I went through the documents I found the AWSAppSyncClient which is an Apollo Client. Although it was promising the react native examples were more focusing towards react or react-native Components which was really making a mess. Read more “Use AWS GraphQL for React Native Message App”
JavaScript
Recently I got the opportunity to use DatePicker of antd library https://ant.design/components/date-picker/ for a react.js project. It was really cool to use that until I found it was using the whole antd library to import this single antd components. It wasn’t right and there was a solution introduced by the antd team. I just blogged it for anyone who will find it interesting. Read more “How to use antd components without the whole library”
