Students in India apply to campus placements with resumes that span a surprisingly wide range: clean single-column PDFs, two-column Canva exports, .docx files with embedded images, and occasionally .doc files last touched in 2019. When we built ResumeGrade, a placement readiness tool for Indian universities, we had to handle all of it reliably. This post covers the three parts that were harder than we expected: parsing, scoring, and multi-tenancy.

Here’s the full pipeline before we get into the details:

Why pdf-parse v1 is locked and you shouldn’t touch it

The parsing pipeline lives in a single Next.js route handler at app/api/analyze/route.ts, and the first line of that file says:

export const runtime = "nodejs";

That declaration is load-bearing. pdf-parse, mammoth, and word-extractor all need Node APIs that aren't available in Vercel's Edge runtime. If you deploy this to Edge, you get a silent failure at cold start rather than a helpful error. We learned this after a confusing 30 minutes of undefined is not a function in production.

For PDFs, we use pdf-parse v1. Not v2. The v2 API switched to a class-based interface and changed how it handles password-protected and malformed PDFs. Since we can't control what students upload, we stay on the functional API:

const pdfParse = (await import("pdf-parse")).default;
const result = await pdfParse(buffer);
// result.text, result.numpages

The dynamic import matters. pdf-parse reads test fixtures from disk at require time when it detects a test environment. If you import it at the top of the file in certain environments, it throws on the fixture path before you get to call it.

For .docx, we use mammoth. For old binary .doc files, we use word-extractor. The page count for Word documents is estimated from word count divided by 400 (rough words-per-page for a resume), since neither library exposes actual page metadata.

What we don’t handle well: multi-column PDF layouts. pdf-parse extracts text in reading order based on character positions, but two-column PDFs often interleave content from the left and right columns. A resume with skills on the left and experience on the right comes out as "Python JavaScript React Java Spring AWS Led a team of..." with the skills and experience merged into one stream. We detect two-column layouts with a separate vision call (more on that below) and flag them in the score, but we don't fix the extraction.

Why a deterministic rubric alone gives you a score nobody trusts

The first version of our scorer was purely rule-based. It checked ~40 things: presence of quantified bullets, buzzword density, passive voice (“was responsible for”), date format consistency, contact info completeness, section headers, action verb distribution. Each check contributed to a weighted score. We could explain exactly why a resume scored 68 instead of 74.

The problem: a resume that passed every check could still read like it was written by someone who memorized a checklist. “Led a cross-functional team to achieve a 15% improvement in delivery timelines” passes our action verb check, our quantification check, our passive voice check. It’s technically correct. It’s also the exact sentence pattern that appears in thousands of bad resumes.

We added a second layer: GPT-4o with structured JSON output.

const response = await openai.chat.completions.create({
  model: "gpt-4o",
  response_format: { type: "json_object" },
  messages: [{ role: "user", content: prompt }],
  temperature: 0,
  max_tokens: 2000,
});

The LLM does four things the rubric can’t:

Bullet-level feedback:

For each work experience bullet, it rates quantification (0–10), action verb quality (0–10), and whether it describes an accomplishment vs. a duty. It flags generic filler (“Worked on various projects”) and returns rewrite suggestions.

Rubric corrections:

Some rubric checks produce false positives. “Managed a team” passes our action verb check but is weak. “Ensured quality” sounds like an action verb but isn’t. The LLM layer can override specific rubric outcomes with corrections, so the final score is a merge of deterministic checks and LLM overrides.

Holistic score:

The LLM generates an independent 0–100 placement-readiness score with its own reasoning. We show this alongside the rubric score so students can see whether the two agree. When they diverge significantly, it usually means the resume passes technical checks but has substantive content problems.

Visual signals via vision:

A separate call sends a PNG render of the resume to GPT-4o vision to detect layout type, photo presence, decorative icons, and visual clutter. This runs concurrently with the text analysis.

The tricky part is merging all of this reliably. GPT-4o with response_format: { type: "json_object" } is good but not perfect. The model occasionally returns valid JSON that doesn't match the schema we specified in the prompt. We handle this with a parseLlmJson utility that validates the structure and falls back to defaults on unexpected shapes rather than throwing.

One constraint we enforce at the prompt level for the rewrite feature:

“Do not add achievements, numbers, or claims not present in the original. Only rephrase and restructure.”

Without this, the model freely invents metrics. Students have caught this when GPT suggested they “reduced deployment time by 40%” for a project where they never measured deployment time. The guardrail makes rewrites less impressive but actually trustworthy.

Multi-tenancy in Supabase, and the RLS recursion trap

Each university is an organisation. Students, placement officers, and advisors belong to an org. A placement officer at one university should not see students from another. This is the core isolation requirement.

The data model is:

organisations
  └── org_members       (who belongs to this org + their role)
  └── students          (student roster, imported by placement officers)
  └── cohorts           (graduation year batches)
      └── scans         (each resume upload + score result)

We use Supabase RLS policies on every table. The organisations table policy checks is_org_member(id):

CREATE POLICY "org_members can read their org"
  ON organisations FOR SELECT
  USING (public.is_org_member(id));

And students checks org_id:

CREATE POLICY "org_members can read students"
  ON students FOR SELECT
  USING (public.is_org_member(org_id));

This worked fine until we hit an infinite recursion in production.

is_org_member() checks the org_members table. The org_members table has its own RLS SELECT policy that calls is_org_member(). So: SELECT on org_members triggers the policy, which calls is_org_member(), which runs SELECT on org_members, which triggers the policy again. Infinite loop. Postgres returns ERROR: infinite recursion detected in policy for relation "org_members".

The fix is to make is_org_member() a SECURITY DEFINER function that bypasses RLS on its own read:

CREATE OR REPLACE FUNCTION public.is_org_member(p_org_id UUID)
RETURNS BOOLEAN
LANGUAGE plpgsql
STABLE
SECURITY DEFINER
SET search_path = public
AS $$
DECLARE
  v_result BOOLEAN;
BEGIN
  SET LOCAL row_security = off;
  SELECT EXISTS (
    SELECT 1 FROM public.org_members
    WHERE org_id = p_org_id
      AND user_id = auth.uid()
  ) INTO v_result;
  RETURN v_result;
END;
$$;

SET LOCAL row_security = off disables RLS for that session scope. Because the function is SECURITY DEFINER, it runs with the privileges of its owner (postgres superuser), not the calling user. The SET search_path = public prevents search path injection. This is the standard Supabase pattern for breaking RLS cycles, and it's in their docs, but it's easy to miss when you're in the middle of a late-night incident.

Why Supabase over a custom auth setup? Mostly because we needed Postgres, not a black-box database. The auth model, RLS, edge functions, and row-level policies all live alongside the actual data schema. When something breaks, we can inspect and fix it in SQL. We didn’t want to own a user management service on top of everything else.

What we’d do differently

The parser handles about 92% of uploaded resumes cleanly. The 8% failure rate is mostly two-column PDFs and old binary .doc files with complex formatting. We've considered switching to a PDF rendering approach (convert to image, use vision to extract structure) but the latency tradeoff isn't worth it for most uploads.

The LLM cost per analysis is around $0.006 at current GPT-4o pricing. That’s fine for individual student uploads but adds up fast for batch processing. We run batch analyses with gpt-4o-mini for the bullet feedback pass and reserve gpt-4o for the holistic score and visual analysis.

The RLS recursion issue showed up six days before our pilot launch with the first university. It was in production, not dev, because the query patterns that trigger it require a logged-in user with a real org membership. Unit tests don’t catch this.

If you’re building something in the same space or have questions about the parser or scoring architecture, you can try the tool at resumegrade.ai or reach out directly. The resume builder and scoring engine are the same ones used in the university portal.

We parsed 10,000 resumes in Next.js. Here’s what actually broke. was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

React Router is a popular JavaScript library for building single-page applications with React. It provides a set of components and functions that enable you to declaratively define your application’s routing and navigation.

In this blog post, we will look at how to create a custom 404 page with React Router v6. A 404 page is a page that is displayed when a user tries to access a URL that does not exist on your website. By default, React Router will display a simple “404 — Page Not Found” message when a user tries to access a URL that does not match any of the routes in your application. However, you can customise this message by creating a custom 404 page using the NotFound component provided by the library.

const NotFound = () => {
  return (
    <>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for could not be found.</p>
    </>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        {/* This is where magic happens */}
        <Route path="*" element={<NotFound />} />
      </Switch>
    </Router>
  );
};

“The NotFound component should be placed at the bottom of the Switch component in a React Router application so that it will only be rendered if none of the other routes in the Switch component match the current URL. This allows the NotFound component to act as a catch-all or wildcard route that handles URLs that do not match any of the defined routes in the application."

Happy coding👩‍💻👨‍💻

React is a library for rendering UI, it doesn’t care about styling. It is a nice thing about React, but it also leaves us alone in a big ocean with a lot of options.

Usually, choosing the style system for your React application is not as hard as it seems. Also, you don’t have to use all the 10 ways listed in the article.

It is good to know the all available options, so you can choose the best based on the situation.

1. Inline Style
2. Style Sheets
3. CSS Module
4. CSS Pre-Processor
5. Styled Components
6. React JSS
7. Radium
8. JSX Styles
9. React Shadow
10. Utility CSS Frameworks

1. Inline

Inline CSS are the same as like regular style tag.

2. Style Sheets

Stylesheets are very common in the react eco-system and it is cool. The only problem is isolating the styles from another component is pretty hard.

We create regular stylesheets and import them on your components

.container{
  width: 100%;
  padding: 12px;
  background: red;
}

By default, the Create-React-App did some steps to make it production-ready by using PostCSS.

3. CSS Modules

CSS module solves the style isolating issue by creating a unique class name for every class.

Create-React-App has inbuild support for the CSS Modules. CSS Module allows us to use the same class name with files without worrying about the CSS name clash.

For example, we have the same class container on two different files

// homepage.module.css
.container{
  padding:12px;
  background:red;
}

If we have the same class name in another file.

// contactpage.module.css
.container{
  padding: 12px;
  background:green;
}

4. CSS Pre-Processor

We can use SASS , SCSS , LESS , STYLUS , etc by using webpack loader. But unfortunately, none of them is supported by default in the CRA.

We can use SCSS or SASS by installing node-sass

npm i node-sass

For more, please check out the official docs.

5. Styled Components

Instead of writing CSS as JS, the styled-component is allowing us to write the actual CSS.

Install the styled component via npm

npm i styled-components

Let us create the same style using styled-componets

Styled-Component uses the Tagged Template Literals to create the styles.

6. React JSS

JSS is allowed to create CSS by using Javascript in a declarative, conflict-free and reusable way.

Install the react-jss using npm

npm i react-jss

Then create the style using createUseStyles

7. Radium

Radium is a set of tools to create inline styles using javascript. The Radium did some tree-shaking to eliminate dead code.

By default, react doesn’t allow inline style with pseudo selectors like :hover ,:focus, etc.

Install the radium using npm

npm i radium

8. React Shadow

React Shadow allows us to create the Shadow DOM in React with all the benefits of style encapsulation.

Install the using Reach Shadow using npm

npm i react-shadow

9. JSX Style

jsxstyle is an inline style system for React and Preact. It provides a best-in-class developer experience without sacrificing performance.

Install the jsxstyle using npm

10. Utility Frameworks

Utility frameworks are created to avoid creating a style sheet. The most famous utility framework is tailwindcss

CRA is doesn’t support tailwindcss natively, we need to use some CRA override like CRACO.

For more info, please check out official docs

Hope you enjoy this article.

Happy reading ❤️.

More content at plainenglish.io

10 Ways to Style a React Application was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Edit:

By Default, the display property of div and span is inline not block and inline. The rest of the article is telling about the same thing. So skip this article and try to read another interesting article.

— Sorry to waste your precious time —

You might know, a div is a block-level element and the span is an inline-block level element. And you might know the difference between display:block and display:inline.

Why div is equal to span?

When you inspect the div it shows display:block

A div is a block-level element and span is an inline-block level element, then why is it equal.

div and span both are inline-block element

Have ever wonder why the browser shows the user agent stylesheet in the styles tab.

These styles are provided by the browser.

When you reset the display using display:initial , you will find the display default value for div

Please check out the first comment, which is far far better than this post itself. Also, it contains excellent information.

Happy reading ❤️.

More content at plainenglish.io

In the JavaScript world, the term tree-shaking refers to the removal of dead code. But this terminology is not limited to JavaScript, the word “tree-shaking” comes from Lisp Community in the 1990s.

Thanks to Axel Rauschmayer, who turns himself into Indiana jones and find the exact origin of this word on Twitter.

Axel Rauschmayer on Twitter: "@Rich_Harris Do you know where the term "tree-shaking" comes from? Haven't seen it before Rollup. / Twitter"

@Rich_Harris Do you know where the term "tree-shaking" comes from? Haven't seen it before Rollup.

When I first heard about this topic, I was so excited to learn about tree-shaking. So I googled it.

According to Wikipedia, the tree-shaking algorithm was used in the dart to remove the dead code.

I rush into the Dart GitHub repo and found this.

Thanks, Google!

StackOverflow has a question about the Tree-Shaking with an excellent answer.

What is Tree Shaking and Why Would I Need It?

At this point, I realize only a few articles were written about the Tree-Shaking and its methodology.

After reading a lot of available articles about Tree-Shaking, I decided to write an article about 3 different sets of methodologies.

1. Import Tree-Shaking
2. Environmental variables Tree-Shaking
3. CSS Tree-Shaking

Why is it called Tree-Shaking?

Let’s consider the following code as an example:

Rollup REPL: https://bit.ly/2UaKxTV

The file main.js uses 3 methods (square cube log) from two files and those files have some extra methods, which is not used and are not going to run. Therefore those codes are dead codes we need to remove them.

For the sake of understanding, we need to convert these dependencies as a tree or technically Abstract syntax tree.

Let’s assume these dependencies graphs as a regular tree with the branch, trunk, etc. If you feel hard to imagine these graphs as a tree, no worries I will do it for you.

Much Better!

Now mark all the dead codes in red colour and use blue colour codes for a better understanding.

If we shake a tree so hard all the dead branches will fall, the same thing we need to do in our code base.

Okay, now let’s shake some trees.

Import Tree-shaking

The concept of tree-shaking exits from the 1990s, but we used this in JavaScript very recently, thanks to ES Static Imports.

ES Static Imports or Harmony imports are allowed to import specific functions or variables from the different files.

If you want to know more about the es-modules, please check this awesome article on Mozilla Hacks by Lin Clark.

Let’s use the same code, that uses to represent the tree.

The file main.js is our entry module, in this page we are using only 3 methods out of 8 methods. And all methods are Pure Function, meaning it doesn’t have any extra dependencies and side effects.

If we removed all the unused methods, our final output will be like these.

If the tree-shaking did not occur the final output will be like this.

How to remove dead code

Now the million-dollar question: “How do you remove dead code?”

Most of the modern build tools, do the tree-shaking to reduce the size of the final bundle. By analysing them, we can understand how they work.

In general, the tree-shaking will remove the nodes (methods/variable) which is not connected to the root node.

Let me explain, a little bit further.

Now, let’s back to the syntax tree (convert code into syntax tree in your mind). If a method or variable is not used in the abstract syntax tree, those functions will not be connected to the root node.

All we need is to remove the node which is not connected to the root node. Most of the bundlers using an algorithm to find and remove the dead code, which is similar to the Mark and Sweep algorithm.

Mark and Sweep algorithm is generally used in the garbage collector to identify the live and dead objects and remove the dead objects from the memory.

Tree-shaking is enabled by default in the rollup bundler, So we can test our code on the rollup REPL

The following output is produced by a rollup for the es-build.

What if the function uses another function?

Let’s make a change in our method square by adding dependencies. A validation method is added in the square method which used isNumber method.

So our final output should include isNumber method too.

Rollup output.

Bundlers can identify the dependent methods and included them in the final build.

Note: The Import Tree-Shaking can be done in commonJS format too, but es import format gives better results.

For more info: Please refer to this repo: https://github.com/rollup/plugins/tree/master/packages/commonjs

Tree-shaking with class

Tree-shaking with a class is a different story!

Let’s refactor code by using a class with the static method in it (non-static method will also work).

In the abstract tree, the class will be connected to the root node its methods.

So even we haven’t used all the methods, they will be included in the final build.

The same things will apply to objects also.

When writing a modular code, create a mental map of abstraction for that particular code, so that you know the final output.

Environmental variables

Environmental variables will not change on the runtime, so most bundlers will do the tree-shaking based on the values.

During the build process.

If the NODE_ENV is true, there is no need for the else part so bundlers will remove it. And there is no need for the if-check because it always will be true.

If the NODE_ENV is false the bundle do the same thing.

If the configuration will change on the runtime, consider converting them into environmental variables and use if-checks based on the value.

CSS Tree-shaking

We can’t apply the Mark-Sweep algorithm for the CSS directly. Yeah, CSS is pretty hard to do.

Doing CSS is hard for both frontend and backend dev because there are tons of ways for doing the same thing.

Luckily! some modern CSS frameworks will help us solve this problem and also they do the Tree-shaking with the help of JavaScript.

Purge

Purge is a set of tools, used to detected and remove unused CSS. It can be used along with webpack postCSS grunt gulp gatsby

A sample configuration file for webpack.

Some of the modern CSS frameworks will purge ‘under the hood’ to improve their performance.

Tree-Shaking with Tailwind

Tailwind shipped with tons of performance features, one of them was Tree-Shaking.

The purge uses this regex/[^<>"'`\s]*[^<>"'`\s:]/g to get the class name, so when you construct the class names conditionally, please do construct a full string instead of a partial string.

Don’t do this:

<div class="text-{{  error  ?  'red'  :  'green'  }}-600"></div>

Do this instead:

<div class="{{  error  ?  'text-red-600'  :  'text-green-600'  }}"></div>

To enable the purge, you need to specify the path in your configuration file.

For more detailed info, please check out the official docs

I hope you understand the concept of Tree-Shaking a little bit. If you want to know please use the following links.

1. Tree-Shaking in webpack (Offical Docs)
2. Reduce JavaScript Payloads with Tree Shaking (Chrome Dev article)
3. Tree-Shaking: A Reference Guide (Smashing Magazine Article)
4. /*#​__PURE__*/ (A awesome Twitter thread about PURE)

If you have any doubts/suggestions on this article, please leave a comment.

Also, check out my latest articles

1. Where Should You Store JSON Web Tokens (JWT)?
2. An Entry-Level Guide to Memory Management in JavaScript
3. useQuery Instead of Fetch While Calling an API

Happy Tree-Shaking ❤️

More content at plainenglish.io

Deep Dive Into Tree-Shaking was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

In general, infinite loops are considered bad practices. But in some edge cases, you don’t have any choice to choose rather than an infinite loop. It is good to know the infinite loop patterns of React.

When the infinite loop is running without any stop, eventually browser will kill the tab that your code is running. So don’t use Infinite Loop without any breaking point.

useEffect

useEffect hook allows us to perform side effects in a component. When hooks were introduced the react 16, the useEffect hook is gain more traction than any other hooks. Because it provides combined functionalities of componentDidMount, componentDidUpdateand componentWillUnmount life cycle methods.

useEffect hook triggers the callback function, only if the dependencies were changed. And it uses shallow comparison to compare the values of the hook.

You can consider the useEffect as a power stone, it is a most powerful stone and if you haven’t handled it properly the stone would destroy you.

Without dependency

useEffect without dependencies generally consider a bad practice, so always try to avoid it.

Consider the following code, it will call the API forever.

What’s happening?

If the useEffect is triggering the callback only when the dependencies are changes, why we ended with an infinite loop here.

You need to take into account important another mantra of React which is “When state or Props is changing, the component will re-render”.

In this code, we set the state value using setData on-network call success, it will trigger the component re-render. Since the useEffect doesn’t have value to compare, so it will call the callback.

And Again Fetch will trigger setData and setData will trigger, the component re-render and so on.

How to fix this issue?

We need to specify the dependencies as the empty array.

According to official docs, it is not safe to omit the dependencies

Function as dependency

useEffect uses shallow object comparison to determine, whether the data was changed or not. Due to weird JavaScript conditional systems😈 .

Let consider the following code

The function getData is passed as dependencies.

When you run this code, it will throw Maximum update depth exceeded which means the code having an infinite loop.

What’s happening?

Since useEffect uses the shallow comparison for the compare the values. The shallow comparison for the function will always give false.

How to fix it?

To fix this issue, we need to use another infinity stone called useCallback.

useCallback return a memoized version of callback, which only change when the dependencies change.

Array as dependency

As you might know, the shallow comparison for two is always false, so passing dependencies as an array will also lead to Infinite Loop

Let us consider the following code

Here, the array dep passed as dependencies for the useEffect.

When you run this code, the browser console will throw this error.

What’s happening?

The shallow comparison of two arrays is always false, so useEffect will always trigger the callback.

How to fix it?

Since the useCallback return is a function, we can't use that.

So, guess what?

We need to use another hook called useRef

useRef returns a mutable object with .current having the initial value.

Objects as dependency

You might guess the shallow comparison of two objects is always false, so the useEffect will trigger the callback always.

Let us consider this code

data is passed as the dependencies for the useEffect

When you run this code, your browser console will be thrown an infinity loop error.

What’s happening here?

The shallow comparison of objects would be false always, so it will trigger the useEffect’s callback.

How to fix it?

If we memoize the dependencies, we break the infinity loop. So how to do that?

Yes, we are going to use another infinity stone called useMemo

useMemo will only recompute the memoized value when the dependencies have changed.

Wrong dependency

Wrong dependencies are nothing to do with React not even javascript. When the wrong dependencies are used, we must take the blame.

Let us consider the code

I hope there is no need to explain this issue pattern and its fixes. If you want the explanation and fixes, please let me know in the comment.

Note: There is plenty of ways to avoid infinite loop inside a React component, I mentioned only a few ways.

Always use eslint-plugin-react-hooks or create-react-app, it will help you to find those issues before those get into the production server.

A company lost 72k in a week due to an infinite loop.

We Burnt $72K testing Firebase + Cloud Run and almost went Bankrupt [Part 1]

So always give special care to our power stone (useEffect).

Also, please take a look at my recent articles about React.

1. useQuery Instead of Fetch While Calling an API
2. Why You Should Use useSWR Instead of useState When Calling APIs
3. A Detailed Guide to Using Axios in Your React App

More content at plainenglish.io

5 useEffect Infinite Loop Patterns was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

I have been designing and developing web applications for more than 7 years.

Through these years, I have been seen a lot of authentication mechanisms, some of them are RESTful and others are not. The RESTful services mostly used JSON Web Token (JWT) as an authentication token.

Whenever I implemented JWT-based authentication, I asked myself this question, “Where do we store the JWT?”

Edit: This article is focusing only on browser implementation.

Let’s answer the big question.

We have three options available for storing the data on the client side and each of those has its own advantages and disadvantages. And the options are:

1. Cookie
2. localStorage
3. Session Storage

Cookie

If you set the JWT on cookie, the browser will automatically send the token along with the URL for the Same Site Request. But it is vulnerable to the CSRF.

We can protect the site against CSRF by setting a cookie with SameSite=strict

Edit 1: I̶n̶ ̶g̶e̶n̶e̶r̶a̶l̶ ̶p̶e̶o̶p̶l̶e̶ ̶m̶i̶g̶h̶t̶ ̶t̶h̶i̶n̶k̶,̶ ̶X̶S̶S̶ ̶c̶a̶n̶ ̶b̶e̶ ̶d̶e̶f̶e̶a̶t̶e̶d̶ ̶i̶f̶ ̶w̶e̶ ̶s̶e̶t̶ ̶t̶h̶e̶ ̶h̶t̶t̶p̶O̶n̶l̶y̶ ̶f̶l̶a̶g̶,̶ ̶b̶u̶t̶ ̶i̶t̶ ̶i̶s̶ ̶p̶o̶s̶s̶i̶b̶l̶e̶ ̶t̶o̶ ̶a̶t̶t̶a̶c̶k̶ ̶b̶y̶ ̶u̶s̶i̶n̶g̶ ̶X̶S̶T̶ ̶”̶s̶u̶b̶s̶e̶t̶”̶ ̶(̶k̶i̶n̶d̶a̶)̶ ̶o̶f̶ ̶X̶S̶S̶.̶

Edit 2: We can easily defect the XSS by setting httpOnly flag.

Pros:

1. The browser will automatically send the token to the server.
2. The same token is available to multiple tabs of your application instance.

Con:

1. Vulnerable to XSS.
2. You need to attach the token in the header if you use a protocol like OAuth 2.0.

localStorage

The localStorage doesn’t send the data automatically along with the URL. So you need to implement the system for the auth token for every URL. But the best part is that this method is not vulnerable to CSRF.

Pros

1. Not vulnerable to CSRF.
2. The same token is available to multiple tabs of your application instance.

Con

1. Vulnerable to XSS.
2. You need to implement a mechanism for the sent the token.

Session Storage

Session Storage is pretty much the same as Local Storage, except the token will accessible only one tab, once the tab is closed the session got destroyed. So it not useful for the feature like remember me. But this can be used in the multi-login feature like Tab A is in a different login and Tab B is in different login.

Pros:

1. Not Vulnerable to CSRF.
2. Easy to implement Multiple logins in one browser.

Con:

1. Vulnerable to XSS.
2. Once the tab is closed, the session data got destroyed.

You might notice that all the 3 methods have the same con — “Vulnerable to XSS”. Yes, all these methods are vulnerable to XSS. Please do care about XSS and always follows the best practices for XSS protection.

Conclusion

Both localStorage and SessionStorage are not protected by the XSS by default.

However, the Cookie provides a bunch of security options like SameSite ,” HttpOnly , etc. So it is good to go with Cookie.

“Store Your JWT on Cookie with Some Secure Flag.”

Sidenote:

If you use Express, these packages might help to improve your application security.

Also, check out my recent articles

1. Deep Dive Into Tree-Shaking(How to reduce your bundle size)
2. 5 useEffect Infinite Loop Patterns

I found these articles are useful to me, maybe these can be useful to you.

• Why JWTs Suck as Session Tokens
• Token Storage
• Is it safe to store a JWT in localStorage with ReactJS?

More content at plainenglish.io

Where Should You Store JSON Web Tokens (JWT)? was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

I have been writing JavaScript code for the last 8 years. Through these years, I learnt a lot about JavaScript like code optimisation, code readability, cross-browser functionality, memory management, etc.

Back in the day, I was a junior developer. I was doing my work without worrying about performance and memory. When my senior developers were discussing things like memory management, I felt like they were speaking some kind of alien language. Things were going smoothly until one customer reported an issue about page freeze.

One customer reported an issue that involved the page becoming unresponsive when a button was clicked and then Chrome closed that page. I initially thought that it might be a problem with Chrome extensions. So, I tested in the incognito mode but the issue was reproduced in incognito mode too.

After fixing that, I spent a lot of time reading and understanding JavaScript and its compiler.

I wrote this article in a way that mid-level or entry-level JavaScript developers can understand. If you have any doubts, please leave a comment; I will try to answer those.

Memory Leaks

Memory leaks is described as the memory that is not required but for some reason, it doesn’t return to the memory pool.

JavaScript is designed in a way that it will automatically delete the allocated memory once the variable was used, that process is called garbage collection.

JavaScript compiler uses two different garbage collectors, one is Major GC and another one is Minor GC.

For info: https://v8.dev/blog/trash-talk

Major GC: Major GC collects the garbage from the entire heap.

Minor GC: The Minor GC collects garbage in the young generation.

These are one-line definitions for the Minor and Major GC.

Let me breakdowns these into simple English.

Major GC:

Major GC is the main Garbage collector that identifies the live and dead objects and deletes them dead objects. But the Major GC was run on the main thread, so if the GC is called very often the page becomes irresponsive.

Why Garbage Collection Freeze the page?

Garage collector runs on the main thread, so it will block all the user inputs and thus the page becomes irresponsive.

Okay but,

Why main thread blocks all user input?

The short answer is Event Loop. And for the long answer, you need to watch this video. An excellent explanation of event loop and JavaScript compiler.

More info:https://www.youtube.com/watch?v=8aGhZQkoFbQ

General Guide to improve the memory management of your application.

1. Global Variables

The garbage collector never collects the memory of a global variable, so before start declaring a global variable think twice.

But sometimes, we accidentally introduce a global variable.

Let see this code

function foo(arg) {
  bar = "this is a hidden global variable";
}

You might notice, the bar not defined but assigns a value so this will become a global variable.

Here, we leaked a string memory and you might think this won’t create a big problem, But it will override some other global methods and that leads to another breakage.

2. Reference forever
Always do care about memory, when it comes to object and data-binding.

function run(){
  var domObjects = $(".myClass");
  domObjects.click(function(){
  domObjects.addClass(".myOtherClass");
  });
}

JavaScript will remove the allocated memory once the function was called. But above the code, there is no way for GC to collect the memory of “domObjects”, since it is binded to event listeners. If you want to remove these memories, you can manually delete them.

function run(){
 var domObjects = $(".myClass");
 domObjects.click(function(){
 if(domObjects){
  domObjects.addClass(".myOtherClass");
  domObjects = null;
 }
 });
}

3. String Concatenation

It sounds strange, but string concatenation takes an extra memory. So avoid string concatenation and use template literal instead.

4. Avoid new objects

The new memory is allocated for new objects, array, etc. Try to find a way to reduce that.

Let us see an example with jQuery,

When never you use jQuery it will increase the memory in the heap, so we can avoid using jQuery chaining methods.

6. JSON Parse

When your application, is render based on the JSON during page load, then consider using JSON.stringify and JSON.parse to process those data.

More info: https://v8.dev/blog/cost-of-javascript-2019#json

7. Avoid try-catch

Try-catch allocates more memory than if checks. But try-catch is necessary for most application, if you analyse properly you can change those into try-catch.

Please take a look at this issue,

An interesting memory leak issue caused by the try-catch in the node js environment. You will get some knowledge about try-catch and memory leaks

https://github.com/nodejs/node/issues/35048

8. New window

While working on a new window please unset the reference variable after the window detached.
When closing the window, only minor GC is called so only a few memory blocks are cleared.

If you want to check the used JSHeap Memory, enter this code on your console.

performance. memory.usedJSHeapSize

9. Callbacks

If the events that callbacks at very high frequency, consider avoiding it.

Let us take an example with scroll.

When you bind a scroll event to the window, whenever the user scrolls down/ scrolls up, the callback will be called. But the problem here is that the callback is called at a very high frequency. You can avoid those using debounce or throttle functions.

An excellent article about debouncing and throttle.

The Difference Between Throttling and Debouncing | CSS-Tricks

Thank you for reading! If you liked this, consider following me on Twitter, and sharing the article with your developer friends.

More content at plainenglish.io

How Memory Management Works in JavaScript was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

React is not a full-fledged framework so it doesn’t care a lot about things like routing, network call, etc.

In the React environment we have plenty of options for pretty much everything. For the network also we have plenty of options like fetch ,axios , react-http-client , etc.

Among others, the Axios provides plenty of features like global-config , Interceptors , better error handlers, etc.

Axios

Axios is the promise-based HTTP client for the browser and Node.js. Axios provides a lot of features to make the HTTP network call for your React application.

Browser support

Axios have excellent browser support including IE11. So it will sort out a lot of browser-based network issue.

See the report on the sauce: https://saucelabs.com/u/axios

Installation:

Install the Axios using npm: npm install axios

Site: https://axios-http.com/

Create an Empty Project

We are going to create use Create-React-App and make the necessary changes you want: npx create-react-app react-simple-http.

Now you get this page:

We will make an API call to the JSON Placeholder Server.

In the App.jsx :

In this code, you may notice that we are accessing the response data via res.data but in the response, it is an array.

Because the Axios will automatically parse the response and assign the data in the data key. And also it will provide a lot of information in the response object.

The above example is a very simple example, now we will look at the real-world application-specific problems like:

1. How to add auth token in the header for every request?
2. How to stop the pending request, while exiting from the page/component?
3. How to handle error in react js with Axios?
4. How to handle CSRF in the Axios?

Authorization

In the real world application, every request must contain the auth-token for the authorization. In Axios, we can add the auth header for every request using Axios-interceptor.

This code will add the Authorization header for every request if the token is available. In Login/Sign-up pages we don’t need to send them Authorization to the server. On that pages, delete the local storage token if it is available.

Abort/Cancel Request

If the component is destroyed, we should cancel all the pending network call made by that particular component. In Axios, we can abort/cancel by using the Axios-Cancellation.

By Using the Axios cancel token, we can cancel the pending request.

const cancelTokenSource = axios.CancelToken.source();

axios.get('/user/12345', {
  cancelToken: cancelTokenSource.token
});

// Cancel request
cancelTokenSource.cancel();

The above example is the simplest use of the Axios-cancellation.

We can implement the Axios-cancellation in 3 simple steps.

I have added comments for those 3 simple steps.

Error Handling

In the real world, every application uses some common rule like “If the response header contains 401 then redirects to the login page, etc”. For that, we need to handle the application level.

axios.interceptors.response.use(undefined, function (error) {

 // Handle you error

 return Promise.reject(error);

});

The above code is the simplest usage of Axios-interceptors for the global error handler but in the real world, an application needs to handle a lot in both production and development modes.

This code will redirect to the login page if the response status code is 401 and shows the console error only in the development mode and shows an alert in both production and development modes.

CSRF Token

If you using a high-level web framework like Laravel, Django, etc. We might need to send the CSRF token along with the request data. Axios is having default support for the CSRF token.

You have any doubts about using Axios in your react application, please leave it in the comments.

Thank you for reading! If you liked this, consider following me on Twitter, and sharing the article with your developer friends. 🐋

More content at plainenglish.io

A Detailed Guide to Using Axios in Your React App was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

I have 5+ years of experience in the professional web development environment. For the past 8 years, I have collected plenty of websites/tools, which is improved my productivity and reduce my work stress by doing smart work.

In this article, I am sharing the list of websites, that I personally use to improve my productivity. I am not going to say, these are the best website out there to improve web development but it helps a lot to improve my web development carrier.

In the new Information Era, data is considered as the gold/oil, so if you have data then eventually you became a wealthier person when compared to your college colleagues

Please create your own list of websites that improve your productivity and also share those lists with the world so that others can gain benefit from the links and they might suggest some of the sites you may not know or better site from your listed sites.

Bookmark this notion URL, I will constantly update the links in the upcoming dates.

Ultimate Resource for Web Development

I often read some of the posts like “200+ resources for the web development”, but believe me, you never going to use all of that website in your life. The following lists contain only 48 and which collected over 8 years(including my college days and professional carrier days), you should add the website to your personal list only if you used that website and it improves your productivity.

General

1. CSS-Tricks — https://css-tricks.com/

2. CSS Tutorial — https://www.w3schools.com/css/

Inspiration

3. Social media for designers owned by Adobe — https://www.behance.net/

4. One of the best Social for Designers — https://dribbble.com/

5. Provide Inspiration by using the real website — https://bestwebsite.gallery/

6. Provide Inspiration by using the real website — https://www.awwwards.com/

7. CSS Gallery for Web Design Inspiration — CSS Nectar — http://cssnectar.com/

Illustration

8. Open source illustrations — https://undraw.co/

9. A massive library of free 3D shapes — https://www.shapefest.com/

10. High-Quality 3D illustrations — https://www.figma.com/community/file/890095002328610853

11. Character Builder — https://sapiens.ui8.net/

12. Open source illustrations kit — https://illlustrations.co/

Color

13. The super fast color schemes generator — https://coolors.co/

14. Beautiful colored gradients — https://uigradients.com/#Zinc

15. The Best Gradient Sites All in One Place — https://cssgradient.io/gradient-backgrounds/

Generator

16. Box Shadow CSS Generator — https://cssgenerator.org/box-shadow-css-generator.html

17. Capsize for Google Font — https://seek-oss.github.io/capsize/

18. Create SVG waves for your design — https://getwaves.io/

19. Make SVG shapes for your design — https://www.blobmaker.app/

20. Easing Gradients — https://larsenwork.com/easing-gradients/#editor

21. CSS Duotone Generator for Images — https://cssduotone.com/

Images

22. Google for colors — https://picular.co/

23. High-Quality free images — https://unsplash.com/

24. Free textures for your web project — https://www.toptal.com/designers/subtlepatterns/

25. PatternPad — Create beautiful patterns for presentations, social media or branding. — https://patternpad.com/

Icons

26. Flaticon, the largest database of free vector icons — https://www.flaticon.com/

27. Free icon — https://freeicons.io/

28. SVG Colorizer, colorize SVG icons and SVG vectors automatically — https://www.iconshock.com/svg-color/

Fonts

29. Google Fonts — https://fonts.google.com/

30. Preview 800+ Google Fonts on top of your own designs, without having to download them first. — https://fontflipper.com/

31. Free Typography Scanner — https://typoscan.com/

32. Free Fonts | 79,000+ Font Downloads — https://www.fontspace.com/

Performance

33. CSSO — CSS optimizer — https://css.github.io/csso/csso.html

Checklist

34. ✨ Your best Front-End Tool ✨ — https://frontendchecklist.io/

Chrome Plugin

35. Zoho Annotator — https://chrome.google.com/webstore/detail/zoho-annotator/dmlmcpcjndojhbflolmdgfpojnjfdlbj?hl=en

37. ColorZilla — https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

38. VisBug — https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en

39. Responsive Viewer — https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en

Favourite fonts

40. Sen — https://fonts.google.com/specimen/Sen?query=sen#standard-styles

41. Nunito Sans — https://fonts.google.com/specimen/Nunito+Sans

42. Numans — https://fonts.google.com/specimen/Numans?query=Numans

43. Tondocorp — http://legionfonts.com/fonts/tondocorp-bold

44. Crimson Text — https://fonts.google.com/specimen/Crimson+Text

45. Quicksand — https://fonts.google.com/specimen/Quicksand#standard-styles

46. Comfortaa — https://fonts.google.com/specimen/Comfortaa

48. Fredericka the Great- https://fonts.google.com/specimen/Fredericka+the+Great

Thank you for reading! If you liked this, consider following me on Twitter, and sharing the article with your developer friends.

More content at plainenglish.io

The Ultimate Resources for the Front-End Development was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.