I recently had to make a Scrollspy for my personal web portfolio. I wanted to use Intersection Observer as it is widely supported now. Unfortunately, it isn’t very simple and there isn’t much on the internet on how to make it work. So, I decided to write a small article to help out others looking for the same.

Image for post
Image for post
Photo by Benjamin Elliott on Unsplash

Scrollspy is a navigation mechanism used by Bootstrap. As per the docs,

Scrollspy

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Basically, it is a piece of JavaScript…


Any web developer worth their salt has heard of npm. This magical technology has opened up doorways to realms unknown. But the way people tend to use it makes it equally easy to exploit. There was an article in early 2018 that seemed no less than “an episode of black mirror” (top comment on the article). The article talked about how one can misuse npm to inject malicious code in applications and get away with it. …


JavaScript’s special concurrency model makes it suitable for a variety of purposes. Asynchronous programming is arguably node.js’ greatest strength. That is also the reason behind widespread popularity of node.js. Let us take a quick trip to the mystical land of JavaScript and try to understand how it handles asynchronous execution under the hood.

Image for post
Image for post
Photo by Tine Ivanič on Unsplash

Asynchronous and Synchronous

Synchronous execution is when statements are simply executed one after the other. Asynchronous execution is when statements don’t have to execute in that rigid order. They can be executed in any order. That is often used to perform multiple tasks simultaneously.

Consider the following analogy. You are…


Image for post
Image for post
Photo by Michał Parzuchowski on Unsplash

Next.js is a powerful and versatile framework. It is pretty simple to use and the documentation is pretty great. But some tasks are tricky to handle on the server side. One of them is making Relay work.

TL;DR

Try the official next.js example first. If that works for you, I suggest you go with it. However, the official example needs you to write your graphql queries and fragments a certain way. If you don’t like that, you can write your code as you normally would and then use custom document and Relay network modern SSR to make it work.

How to read this article

The article…


Image for post
Image for post
Photo by Patrick Tomasso on Unsplash

Facebook has done some really neat stuff with Relay in the past. And they are working on it rapidly. When I started writing this article, Relay was in v8. And before I can finish it, Relay is in v9. It is worth checking out the number of versions that came out in the last 12 months. Over the “versions”, they have added some great functionality. For example, the experimental version has hooks and enhanced suspense integration that works with React’s concurrent mode. Unfortunately, the people at Facebook haven’t put much effort into documenting Relay properly. The examples in the documentation…


Image for post
Image for post
Photo by Filiberto Santillán on Unsplash

My last article discussed all the hype about the concurrent mode. It introduced what concurrent mode is and talked about all the goodness it brings. This article will demonstrate the problems with the current way of updating state and will explore how concurrent mode can help overcome all those. So without further ado, let’s dive in.

A quick recap

In the last article, we discussed that concurrent mode brings along following possibilities:

  1. Enhanced performance
  2. New UI Patterns

Now let’s see how exactly that happens. To start off, let us explore the problems first.

Note: Things may seem to get complicated. I personally had…


Trail of light beams from cars on a highway
Trail of light beams from cars on a highway
Photo by Marc-Olivier Jodoin on Unsplash

The engineers at Facebook have never failed to amaze me. I have been in love with React for almost a year now. GraphQL is one of the most mesmerizing things I have ever come across. Relay is alright but gets better everytime. Their work is often very well thought and targets real-world problems intimately. This means that either the people at Facebook do really awesome work or that I get swayed away very easily (Both are not mutually exclusive of course). But this isn’t just my opinion. …

Yash Mahalwal

CSE Undergrad | NIT Bhopal | All things Web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store