Bisvarup MukherjeeDeveloperStory tellerPolyglot ProgrammerAbout ‧ Videos ‧ GitHub01 May 2021#mac1 min read ⏱How I recovered 30+G from my MacIntroduction This guide is for web & mobile developers who are facing disk space issues using Mac. Steps Use either npm or yarn. Both of them cache stuff and using both of them would bloat the system. If you are using IntelliJ products, they cache a…11 Apr 2021#leetcode #coding2 min read ⏱LC - Longest Increasing Subsequenceleetcode https://leetcode.com/problems/longest-increasing-subsequence/ editorial There are two solutions which I liked about this problem. I got both of them by going through the editorial. Solution 1 - Recursion The idea behind recursion is at evert…09 Apr 2021#pwa #css1 min read ⏱Making PWA feel more like an app using CSS overscroll behaviorIntroduction The reason I went about looking for this is because of pull-to-refresh. Here is a demo of pull to refresh. pull to refresh I am not sure why this is the default behavior but this is not what I would like my apps to have. For my blog post…06 Apr 2021#pwa #frontend #UI #app3 min read ⏱Learnings from some of the best PWAs - Part 1Introduction The observation which drove me to do this analysis is, although Flipkart/Amazon is spending so much effort on its web presence, still it shows a prompt to the user when they land on the web app to “Open in an app”. I want to understand…06 Apr 2021#pwa #frontend #UI #app2 min read ⏱Learnings from some of the best PWAs - Part 2Introduction The observation which drove me to do this analysis is, although Flipkart/Amazon is spending so much effort on its web presence, still it shows a prompt to the user when they land on the web app to “Open in an app”. I want to understand…03 Apr 2021#rasberry-pi8 min read ⏱Configuring Rasberry PI using MacA Short Introduction Although this title says, configuring Rasberry PI using a mac, I am sure the steps I took for this can be done for any other OS, such as windows/Linux. I know someone who had received a raspberry-pi, let’s call it r-pi from now…02 Mar 2021#frontend #ui #threejs #ar #webxr3 min read ⏱Rendering a basic scene using Three.jsIntroduction To render any scene in Three.js we need the following things: Scene Camera Light Object The geometry of the object The material of the object Mesh of the object Let us try to understand each of the components one by one. Dependency…23 Jan 2021#react #frontend #ui1 min read ⏱UI coding gotchasHere are the list of coding gotchas you should keep in mind while coding: When using anchor tag (or react-navigation) keep in mind if the transition should be a push event or a replace event. We should not use UNSAFE_ methods. This breaks the flow…19 Jan 2021#babel #html #react #web worker2 min read ⏱What I learnt from reverse engineering the Babel websiteHere are the points: run-s: A CLI command to run given npm-scripts sequentially. Get a filesize of a code snippet Evaluating user code inside an iframe. Creating an iframe with width=height=0 and using iframe.contentWindow.eval(user_code). Wrapping…14 Dec 2020#chrome #browser-api1 min read ⏱JavaScript Clean APIs Part 1Introduction Do you want to write clean APIs like this. Admit it, this looks so clean. We are not writing APIs like Let's see how we create such APIs. Working demo https://codepen.io/pritammukherjee16/pen/ZEpLVWq?editors=001028 Nov 2020#chrome #browser-api2 min read ⏱Contacts Picker APIIntroduction Android and IOS applications (native apps) inherently had the capability to access contact list of a user. Ofcouse the user needs to provide permission for that (I think) but it was there. The web however did not have this feature…26 Oct 2020#infosec1 min read ⏱Cookie TossingIntroduction The way cookie headers work is a cookie is set for a domain, example.com, insert actual data then it cannot be accessed from cookie.io or subdomain.cookie.com, but if we are setting a cookie in subdomain.example.com it will be sent to…26 Oct 2020#javascript #optimization #performance1 min read ⏱JS Performance TipsSome Performance tips in no specific order getElementsByClassName & getElementsByTagName are faster than querySelecterAll Do not attach event handlers to window scroll events, as this event may fire a lot and it may slow down performance for the…26 Oct 2020#java #dropwizard1 min read ⏱Mime SniffingFrom mdn In the absence of a MIME type, or in certain cases where browsers believe they are incorrect, browsers may perform MIME sniffing — guessing the correct MIME type by looking at the bytes of the resource.” This is fixed with X-Content-Type…26 Oct 2020#browsers #optimization1 min read ⏱Backward Forward Cacheback/forward cache to cache pages in memory (preserving JavaScript & DOM state) when the user navigates away. A back/forward cache (bfcache) caches whole pages (including the JavaScript heap) when navigating away from a page so that the full state of…25 Oct 2020#java #dropwizard4 min read ⏱Getting started with Dropwizard Part 1Table of Contents Introduction Some Basics about Dropwizard Prerequisites Getting Started Resources Configuration Application Conclusion Introduction Before starting with any project we must ask ourselves the why. Why do you want to start this…15 Aug 2020#mysql2 min read ⏱Optimized MySQL queriesTable of Contents Tips #1 Be more specific #2 Avoid SELECT DISTINCT #3 WILDCARDS #4 LIMIT #5 INNER JOINS vs WHERE #6 UNION vs OR #7 Indexes Resources Tips #1 Be more specific Be more specific in your queries, for example, prefer over #2 Avoid SELECT…30 Jul 2020#tcp #http2 min read ⏱HTTP 0.9 to HTTP 1.1Table of Contents HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP Connection Proxy Gateway Tunnel References HTTP/0.9 Server response only in HTML One request per TCP connection No headers in the response document The server serves the whole document then…29 Jul 2020#react #javascript #read-more2 min read ⏱The feedback frameworkTable of Contents Backstory Overall breakdown Objective feedback Documenting the review received by talking to the manager Creating a goal sheet The goal sheet The objective action items Manager’s periodic review of the action items Conclusion…24 May 2020#react #javascript #read-more4 min read ⏱Creating a read more component in reactAdd a '...read more' text to your long content Table of Contents Introduction Motivation The art of creating it So what's novel about this approach? Caveats The code References Introduction Here is an example of how the component behaves. I figured…24 May 2020#node #javascript #npm #package-json3 min read ⏱The ultimate guide to create a npm packageTable of Contents top 10 things to put in package.json Explanation Additional goodies Testing Conclusion Introduction The following is the file which I used for my ReadMore project. Sample package json top 10 things to put in package.json files…22 May 2020#frontend #docker2 min read ⏱The docker handbook for frontend devsGeneral docker commands Pulling an image from dockerhub Login to your own dockerhub account (optional) List your docker contains, which you have installed Create an instance of the image, and run it in detached (-d), -i (interactive) and attach a…20 May 2020#react #npm #react-component2 min read ⏱The snackbar componentTable of Contents Introduction The hidden PRD Triggering from redux store Context API Introduction So for your app, you need a good old snackbar component. How difficult can it be? This was my initial thought as well. Let's find out 🙄 A note of…18 May 2020#ios #otp #focus #WkWebView #UiWebView2 min read ⏱IOS webview focus issueTable of Contents Introduction The OTP component The Issue The research Solution Introduction So, currently I am working a lot of mobile version of our website, and a lot of the code runs on webviews as well. While, it's mostly sane to work with…18 May 2020#prettier1 min read ⏱My preferred prettier configThis is going to be a short post, I just wanted to share my preferred prettier config 😇16 May 2020#problem-solving #algo #ds1 min read ⏱Word break 2Leetcode: https://leetcode.com/problems/word-break-ii/ Editorial: https://leetcode.com/problems/word-break-ii/discuss/44167/My-concise-JAVA-solution-based-on-memorized-DFS Create valid sentences from the initial string and the word directory provided…16 May 2020#problem-solving #algo #ds1 min read ⏱Hit the lotterycodeforces: https://codeforces.com/problemset/problem/996/A The problem states you have n rupee and have a1, a2, a3 ... denominations Concept The thing I liked about this problem is representation. We can represent the problem in this mathematical…15 May 2020#babel #loaders1 min read ⏱ts-loader and babel-loader | hensel and gretel🚨Short story alert.🚨 Directly quoting from stackoverflow ts-loader: convert typescript (es6) to javascript (es6) babel-loader: converts javascript (es6) to javascript (es5) and Typescript doesn't do polyfills, which babel does. If you write client…10 May 2020#linux #file-permissions1 min read ⏱File Permission and RWSTable of Contents File Permissions Details File Permissions _ rwx rwx rwx 1 2 3 4 File or directory _ or d Owner's permission Group's permission All other users' permission Details r w x read (4) write (2) execute (1) so means Find Files Find all…06 May 2020#npm #npm-integrity #checksum3 min read ⏱npm integrity, checksum and integrity errorTable of Contents Introduction NPM's security Validating the signature NPM install with a new cache folder Download a pacument Download a tarball Resources Introduction Suppose you want to install a node module like this, npm i oauth-sign You may…06 May 2020#webpack #tree-shaking2 min read ⏱Webpack and tree shakingTable of Contents Problem statement & example The Fix Problem statement & example Turns out tree shaking, which is compiler removing unused code is pretty hard. So by default webpack 4 does few checks to remove unused code, but it is very basic. Let…04 May 2020#jenkins #build1 min read ⏱Silly me and my dear friend jenkinsSo, for work we have two Jenkins jobs, one is the actual building and the other is deploying. So here I am done building the job and trying to check my changes and cannot find them. I am like wtf, what is this strange bug? Turns out I forgot to…02 May 2020#react #commonjs #typescript1 min read ⏱import React from react vs import * as React from reactReact uses CommonJs module system so we cannot use We can use this line and there is no error because Babel tries to take care of this so that we don't have to. On typescript, we use to true so this masks the above behavior. The idea is you do not…02 May 2020#input #frontend #react1 min read ⏱Transition between focused elementsSuppose you have a list of input tags and one of them has focus enabled on them. You want to hit tab and the next input gets focus. To detect the hitting of the tab you add an event listener to input tag, specifically the blur event listener. So when…29 Apr 2020#algorithm #data structures2 min read ⏱Rotting OrangesLeetcode: https://leetcode.com/problems/rotting-oranges/ Editorial: https://leetcode.com/problems/rotting-oranges/discuss/238681/Java-Clean-BFS-Solution-with-comments Solution Concepts First Concept What I liked about this problem was that I had to…29 Apr 2020#algorithm #data structures1 min read ⏱K Frequent ElementsLeetcode: https://leetcode.com/problems/top-k-frequent-elements/ Editorial: https://leetcode.com/problems/top-k-frequent-elements/discuss/81602/Java-O(n)-Solution-Bucket-Sort I will have a list of elements and I need to output the list of most…
