Skip to content
Sandny Blog
  • Home
  • Java
  • JavaScript
  • AWS
  • Embedded
  • About
Multiple refs for an array of React Elements JavaScript

How to use IntersectionObserver to detect the position in…

  • July 11, 2021July 29, 2021
  • by Coder Kai

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” →
How to fetch data with useEffect JavaScript

How to fetch data with useEffect

  • July 2, 2021July 2, 2021
  • by Coder Kai

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” →
add styles to stripe elements JavaScript

How to add styles to stripe elements without using…

  • June 29, 2021June 29, 2021
  • by Coder Kai

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” →
Use Dynamic Segments Routing in Ember 2.0 JavaScript

The Common Errors that beginner React Developers Make

  • October 24, 2019July 4, 2021
  • by Coder Kai

1. React Must Be in Scope

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” →

GraphQL Web App with AWS Amplify and IAM Authentication AppSync

AppSync GraphQL Web App with AWS Amplify and IAM…

  • September 24, 2018September 25, 2018
  • by Coder Kai

Howdy! In this tutorial going to create an AppSync GraphQL Web App with AWS Amplify and IAM Authentication using Cognito User Pools. The reason behind this is, if you are creating an web app quickly, the AWS AppSync, Mobile Hub, DynamoDB will come with all the equipments that you need to scale it. So this is such an attempt but um not using the aws amplify cli to create since I would like to know what my configurations looks like when it comes to web. The App will be a react app to quickly show how its done.

Read more “AppSync GraphQL Web App with AWS Amplify and IAM Authentication” →

Use AWS GraphQL for react native app AppSync

Use AWS GraphQL for React Native Message App

  • June 28, 2018September 3, 2018
  • by Coder Kai

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

How to use antd components without the whole library

  • February 26, 2018August 29, 2018
  • by Coder Kai

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” →

Debounce and avoid multiple clicks JavaScript

Debounce and avoid multiple clicks event generation on React.js…

  • November 1, 2017August 26, 2018
  • by Coder Kai

There are some instances where you need to debounce and avoid multiple clicks/taps on a button so that it will not generate the same action chain immediately with a consecutive click. An example would be an application with a touchscreen. If you click a button rapidly, that event will be generated more than once. As a solution, most of the time devs would block the UI until the action chain is completed. But this would be a bad experience if the user is blocked for any other interactions. A typical example can be a fetch call to update the state and if the invocation is asynchronous it could be causing more inconvenience.

Read more “Debounce and avoid multiple clicks event generation on React.js components using Lodash” →

evolution of js apps EmberJS

Adaptation of js apps and how predesigned abstractions could…

  • October 18, 2017November 21, 2019
  • by Coder Kai

Through the last couple of years, javascript has drastically changed and the many developers have tried using different approaches to define their application structure and abstractions in a way which is best suits at that time. There is one thing to highlight which I intend to discuss, “Rapid Changes”. So how can a developer or an architect withstand these rapid changes to frameworks and awesome libraries introduced each day in the js context? With my experience, I learned a couple of facts which I think is necessary to embrace these changes until js development becomes structurally solid as engineered buildings. Read more “Adaptation of js apps and how predesigned abstractions could burn you” →

Categories

  • android 3
  • Apollo Client 1
  • AWS 8
    • AppSync 5
    • EC2 1
    • EKS 1
    • Route53 1
    • S3 1
  • AWS Amplify 1
  • Chakra UI 1
  • Docker 1
  • Embedded 1
  • EmberJS 1
  • FCM 1
  • Godaddy 1
  • GraphQL 3
  • ios 1
  • Jasper 1
  • Java 10
    • Java 11 1
    • Java 14 1
  • JavaEE 2
  • JavaScript 39
    • Express.js 4
    • Javascript Guide 7
    • Node.js 3
    • react-native 4
    • React.js 17
    • Typescript 1
  • Kubernetes 1
  • machine learning 1
  • Maven 2
  • OCaml 3
  • PostgreSQL 1
  • Python 2
  • react-native 4
  • ReactJS 3
  • sass 1
  • Server 6
  • spark 1
  • Terraform 2
  • Ubuntu 4
  • Uncategorized 1
  • webpack 2

Recent Comments

  • binance register on Chakra UI Animations
  • binance account on SSL Websocket proxy with Nginx for Graphql Subscriptions
  • Binance Pag-signup on How to fetch data with useEffect

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • October 2022 3
  • September 2022 7
  • May 2022 1
  • December 2021 1
  • August 2021 1
  • July 2021 6
  • June 2021 3
  • February 2021 1
  • July 2020 1
  • December 2019 5
  • November 2019 6
  • October 2019 3
  • August 2019 1
  • March 2019 1
  • February 2019 1
  • January 2019 2
  • December 2018 1
  • September 2018 2
  • August 2018 1
  • June 2018 1
  • February 2018 1
  • November 2017 2
  • October 2017 5
  • September 2017 1
  • June 2017 1
  • May 2017 10
Sandny Blog space
Theme by Colorlib Powered by WordPress