https://twentyse7en.vercel.app/posts/ Recent content on Notes Hugo -- gohugo.io en-us Tue, 22 Oct 2024 21:40:41 +0530 https://twentyse7en.vercel.app/posts/react-native-new-architecture/ Tue, 22 Oct 2024 21:40:41 +0530 https://twentyse7en.vercel.app/posts/react-native-new-architecture/ Here we are trying to explore the issues with current react native architecture and what’s exciting about new architecture. What is React Native? React native allows developers to create native apps. Native apps can be android, ios, tv, web. There tagline itself is “Learn once, write anywhere”. How are they making this possible? Developer can write business logic in javascript just like react. For building UI, React Native provide building blocks like View For using hardware and other resources there will be third party libraries (for using camera and gps) With all this we can build each platform. https://twentyse7en.vercel.app/posts/simple-server/ Sat, 28 Oct 2023 12:44:41 +0530 https://twentyse7en.vercel.app/posts/simple-server/ Motivation I was curious how a http request was working. Yeah, I too had networking in my college, but wasn’t that curious back then. Now for living I do web development for past two years. I took a pause and wanted to know how things were working under the hood. What are we builting A http server in go, without a http package. But why? There is a lot of framework that let you build stuff without much effort. https://twentyse7en.vercel.app/posts/react_18/ Sat, 01 Apr 2023 12:44:41 +0530 https://twentyse7en.vercel.app/posts/react_18/ How to upgrade Install latest react and react-dom npm install react@18 react-dom@18 Change your index.js import ReactDom from 'react-dom/client'; import App from './App'; // ReactDOM.render(<App />, document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); Yay! that’s it. Welcome to react 18 🎉 Changes to take care So before jumping into latest features, let’s go through some changes that might effect our existing code. Automatic batching let’s check how react handles multiple state updates before react 18. https://twentyse7en.vercel.app/posts/use-reducer-101/ Tue, 28 Feb 2023 12:44:41 +0530 https://twentyse7en.vercel.app/posts/use-reducer-101/ Do we need useReducer? We already have useState which manages the state. If we look at functional level useReducer doesn’t bring anything new to table. Both are used to store the value and manipulate it. So fundamental question is then why do even care about useReducer? Code readability When we are working on a project with other member, one of the most important aspect of the code is how readable it is. https://twentyse7en.vercel.app/posts/use-context/ Sat, 14 Jan 2023 12:44:41 +0530 https://twentyse7en.vercel.app/posts/use-context/ Why do we need Context? Primary way of passing the information to child would be through props. Sometimes we might need to pass the same prop through children in different level, which is called prop drilling. Context allows to avoid prop drilling, we can pass the data to parent and it can be accessed from any children of that parent. How to use Create a context use the context from the component that needs the data. https://twentyse7en.vercel.app/posts/singleton/ Wed, 12 Oct 2022 12:44:41 +0530 https://twentyse7en.vercel.app/posts/singleton/ Singleton Singletons are classes which can be instantiated once, and can be accessed globally. This single instance can be shared throughout our application, which makes Singletons great for managing global state in an application. Usecase I want to connect to a chat service once and use the instance of connection across components (React) instead of connecting every time. Boilerplate class Connection { static _instance; client; constructor() { if (Connection._instance) { return Connection. https://twentyse7en.vercel.app/posts/async_performance/ Sun, 22 May 2022 11:14:59 +0530 https://twentyse7en.vercel.app/posts/async_performance/ This is the summary of book Async & Performance from You Don’t Know JS series. When I started JS journey Asynchronous was a new pattern. I didn’t deeply explored at that point. Now It’s very critical time to deeply understand this pattern, as it is very important part of everyday JS coding It might introduce lot of bugs due to partial knowledge. Callback How can callback introduce asynchrony? // A let data = [] setTimeout(callbackFn() => { // B data. https://twentyse7en.vercel.app/posts/in_operator_in_js/ Fri, 08 Apr 2022 22:04:16 +0530 https://twentyse7en.vercel.app/posts/in_operator_in_js/ It’s easy to get started at JS, also very easy to make bugs. It may be due to our prejudice or may be JS’s fault. At the end of the day I have to write js, As I have no other choice at my work. What happened So breif of what happened today. My task was to check if a string exists on array of strings. coming from a python background, I thought of using in operator. https://twentyse7en.vercel.app/posts/tmux-copy/ Thu, 07 Apr 2022 21:36:59 +0530 https://twentyse7en.vercel.app/posts/tmux-copy/ I have been using tmux for a while. I usually have two window, one for nvim and another for running the server. Sometimes my server crash with weird error message and copying that was a bit diffcult for me. It was embarrassing if you are in call with a colleague. (I’m kinda hacker for my buddies as they only use vscode :p) So it was actually easy and you can do it with vi key bindings, just awesome. https://twentyse7en.vercel.app/posts/dotfiles/ Sun, 03 Apr 2022 02:12:32 +0530 https://twentyse7en.vercel.app/posts/dotfiles/ What is dotfiles Basically configuration files. For example nvim comes with default configuration say 8 spaces for tabs, but mostly people configure it to 4 spaces by editing config file of nvim. Config file will be located in ~/.config/nvim/init.vim Why manage dotfiles? I have two systems, one for work and other for personal use. I would like to sync my nvim config in both. It would be good to backup and you don’t lose your precious config made of so many tweaks. https://twentyse7en.vercel.app/posts/update_nested_state/ Sat, 12 Mar 2022 17:46:37 +0530 https://twentyse7en.vercel.app/posts/update_nested_state/ State updation 101 We only need to re-render when a state have changes, for more clarity, when values changes. /* wrong way */ const [data, setData] = useState([]); const addData = (newValue) => { data.push(newValue); setData(data); } But this won’t trigger a re-render, why? we have added a element to array, so it should change right? But it’s expensive to make such comparison. To improve performance react is using shallow comparison. https://twentyse7en.vercel.app/posts/scroll_value/ Sun, 27 Feb 2022 20:14:19 +0530 https://twentyse7en.vercel.app/posts/scroll_value/ I was assigned to make InfiniteScroll component in react. Luckly I got a working InfiniteScroll. But It support infinite scrolling to one direction alone. My use case requires to load new data if user scroll to top and bottom. Now I should construct one. Basically the task was to trigger API, if scroll cross some threshold in top and bottom. Initially the scroll will be in middle. I was using data from scroll event for first time, It was little confusing. https://twentyse7en.vercel.app/posts/usememo_usecallback/ Wed, 09 Feb 2022 20:12:32 +0530 https://twentyse7en.vercel.app/posts/usememo_usecallback/ tldr; Don’t overuse useMemo and useCallback, Optimization comes at a cost. use useMemo when there is expensive calculation that only need to be re-calculate when dependencies change, not on every render. use useCallback when it is passed as dependency to other hooks. Intro useMemo and useCallback is all about memoization. Both accept a function and a dependency list as arguments. useCallback returns memoized function, while useMemo returns the result of running the function. https://twentyse7en.vercel.app/posts/bem-css/ Fri, 04 Feb 2022 21:36:59 +0530 https://twentyse7en.vercel.app/posts/bem-css/ For me naming css class names took more time than writing actual styles. usual I get bored and end up review comment to alter names. One of my seniors suggested to checkout BEM. So what is BEM? BEM is methodology introduced at yandex for building sites fast and supported for a long time. It helps to create extendable and reusable interface components. BEM stands for block--element__modifier Block Element Modifier Block Indepedent page component that can be reused. https://twentyse7en.vercel.app/posts/react-from-scratch/ Sun, 30 Jan 2022 11:20:42 +0530 https://twentyse7en.vercel.app/posts/react-from-scratch/ React is javascript library for building user interfaces. I was interested to know about magic behind the react. Rodrigo pombo have done a great work on his article build your on react. I tried creating a react clone with the help of this blog. I highly recommend to go through his article for deeper understanding. This blog will be a comprehensive notes. Basics At first I thought I was writing html inside javascript. https://twentyse7en.vercel.app/posts/reconciliation/ Fri, 28 Jan 2022 20:23:35 +0530 https://twentyse7en.vercel.app/posts/reconciliation/ Reconciliation ~ The process of comparing different records in order to check that they add up to the same total or to explain any difference between them. React re-render when state or props changes. React internally creates a new tree of react elements. Which needs to be compared with old tree to update the UI. The state-of-art algorithms take O(n^3) for generating the minium number of operations to transform one tree to another. https://twentyse7en.vercel.app/posts/closure/ Sat, 22 Jan 2022 12:44:41 +0530 https://twentyse7en.vercel.app/posts/closure/ what is closure? A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. MDN 1 In simple words we can access variables declared outside the function. https://twentyse7en.vercel.app/posts/let_for_loop/ Sat, 22 Jan 2022 12:44:41 +0530 https://twentyse7en.vercel.app/posts/let_for_loop/ I was going through closures in javascript, found something interesting. for(var i = 0; i < 3; ++i) { console.log(setTimeout(() => { console.log(i); } ), 1000); }; /* output 3 3 3 */ This is pretty much what we expect, after 1 second value of i will be 3, then setTimout call the callback fn, when callback try to reference i, it’s value will be 3 in that environment. Ok, let’s move to next example. https://twentyse7en.vercel.app/posts/hoisting_js/ Thu, 20 Jan 2022 00:00:00 +0000 https://twentyse7en.vercel.app/posts/hoisting_js/ What will be the output? let b = 'hello (*_*)' function barFoo() { console.log('b from barFoo is', b); let b = 'hello'; } barFoo(); It will throw a Reference Error. But why? we have already declared and initialised b on outer scope. So it might be available till we declare the b again. well thats not how things work in javascript, lets checkout hoisting. What about this? var b = 'hello (*_*)' function barFoo() { console.