Create form component for drag-drop in Atri projectA form component can have different kinds of form controls such as input, radio and checkbox etc. For a more detailed example, you can see the code here. A minimal boilerplate to start can be found here. Create manifest In the manifest, notice the cu...May 11, 2023 · 5 min readshyamswaroop.hashnode.dev
Use framer-motion & IntersectionObserver to build scroll animationsScroll-based animations can be triggered in two ways - by listening to the scroll event or by using IntersectionObserver. In this article, we will go through step by step process of building the scroll animation using IntersectionObserver. It's no fu...1AMay 5, 2023 · 5 min readshyamswaroop.hashnode.dev
IPC between NodeJS & PythonAt Atri Labs, we are making it easy for web development and ML product development to go hand-in-hand. One of the challenges is how NodeJS and Python processes can communicate with each other. I am sending and receiving data between Python and NodeJS...Apr 4, 2023 · 4 min readshyamswaroop.hashnode.dev
Configure node externals in a NodeJS code that bundles React codeScenario In most cases, we bundle TypeScript/JavaScript code to run in NodeJS only when we are doing SSR with a frontend library such as React. We generally use webpack-node-externals to create a JS bundle that will be run inside NodeJS. We use webpa...Mar 27, 2023 · 1 min readshyamswaroop.hashnode.dev
Planning a React componentThis article assumes that all react components in a code base are Functional React Components as opposed to Class Components. Whenever we write a React feature, we should break the feature into a set of responsibilities. These responsibilities can be...Mar 19, 2023 · 4 min readshyamswaroop.hashnode.dev
