The Leaky Cauldron Blog

How is Kingdom Two Crowns So Addictive?!

Eklavya Mishra — Fri, 13 Feb 2026 06:40:00 GMT

No, seriously. How?

You’re telling me traveling from place to place on horseback, stopping only here and there to hold A to deposit some coins is somehow addictive and that I just played 5 hours of this shit? Now I have brain fog. I don’t know why I didn’t take a bath today. Or yesterday? I don’t even want to go out anymore. Or talk to anyone.

Who designs a game like that?

It takes so long to get to each place too. A whole in-game day even to go from the left edge of this camp-turned-kingdom to the right. You don’t wanna give me some kinda button to boost this retarded donkey? Maybe just one button if you time it right and boom! Suddenly lord huffs-a-lot gets some pepper up his ass.

I don’t even know why I want to get where I’m going, faster. It’s just so I can press and hold A so some stacks of wood turn into stone walls, and then when I have more money, the stone walls turn to rock walls, oh look there’s a mound of mud there, that can be another stack of wood, and if I get enough money I can turn it into a stone wall and…

What the hell is wrong with me? Why?

Can’t you add some action for god’s sake. Let me have some more buttons at least? I like pressing buttons. I’m good at it. I’m pressing them now. Tap. Tap. Tap. (Is this meta humor?)

I don’t know. I really don’t. The art looks pretty I guess. The little builders look cute with their hammers somehow cutting down trees so I can add a mill to my little continent spanning empire.

And what’s with that water reflection? It’s so calm and beautiful. Every wave has this parallax effect in motion that I just can’t ignore how serene it makes me feel.

I mean I get that I don’t sound serene right now. Senile more like.

I don’t even know why it’s bothering me so much. It’s a cozy game. You’re supposed to relax and expand. Like me on my birthday.

I don’t like feeling happy, game! So don’t try your little tricks.

Demand more of me. Make me do more things. Make me press buttons in order, in time, in the correct place, I want to feel like I matter. But you are just treating me like…

Like I am a king.

Stop Letting Me Retry Your Horror Game

Eklavya Mishra — Fri, 06 Feb 2026 13:20:00 GMT

So, horror in video games right? Here’s something I’ve been thinking about for a while: why are we still allowing gamers to play through a horror section again once they’ve failed?

Well it’s a game, Klad(my gamer tag is Kladspear). You are supposed to retry until you get how to beat it. Permadeath is for the masochists.

And yeah I mean I’d say so as well but specifically with horror you gotta agree the thrill of that first encounter goes away pretty quick on repeated exposure.

Of course, that’s true for almost every other kind of encounter as well. Let’s say comedy, if the cutscene of a tough encounter starts with a joke, it could be funny as hell but after hearing it 5 times...

Repetition especially in a particularly tough encounter destroys the atmosphere that we were led with. Watching the same cutscene over and over again, going for that health pack on the side every time because you know you’ll need it in the 2nd phase, I mean I get it. That’s what we are here for, the gameplay.

The ability to make different choices or planning ahead this time, that’s our hook. That’s where our agency is. And the more options (read viable options) we have, the better the game is.

Resident Evil 7’s first boss fight against Jack Baker, even though that first shock of “I’m supposed to deal with this guy” may subside on multiple attempts but … I am free to move, to explore, find weapons, map out the area in my head for quick getaways. I have strategies to try. It doesn’t feel repetitive. And it’s one of my favorite boss fights in any horror game.

But the problem comes with games which are light on gameplay. The story or atmosphere focused ones. There are those of us who enjoy being put into situations like these. However, not having a proper combat system or enough options means I’m basically doing the same thing every time. Which you may call a bad game and you may as well be right.

So, is the solution just to make horror games easier?

Well, maybe. But let’s not forget it’s a game. And game difficulty is already a huge topic of discussion I’m not looking to get into right now.

No, what I’m thinking is, I just don’t think I should be allowed to replay that encounter.

I can hear you in my head: “So, what are you saying, skip the encounter?”

Well, kinda. Or, make the death/loss canon.

Yes, that fight happened. Yes, now you have lost your left hand permanently. And hence, you can’t reload anymore.

Now that option is treading into the game difficulty waters again so I’m just putting it there for the sake of options. If you’ve got a good combat system I think it can be done.

But what about my dear ol’ walking simulators with run and hide mechanics?

In those cases yes, for the love of all lovecraftian horror, skip that encounter. You are killing the atmosphere, game! I’ve seen the makeup that dude puts on, I’ve seen the eyelashes. I know on which corners its path-finding breaks. I’m not afraid anymore. I know I’m dealing with a moron.

But Klad, skipping content is a cardinal sin. How can we possibly…

Blah blah blah. Skip it. Skip the damn thing already. It spooked me, and I wasn’t ready. The job is done. Now I don’t know what to expect. I’m on my toes. The game is willing to screw with me and not give me a chance to retry. Isn’t that crazy? Shock in a horror game? Color me white.

Skipped content is scary. Losing a vital resource or an NPC you care about permanently because of your own poor planning/ability is scary. The feeling of loss is real and personal. Isn’t that what games should aspire to be?

Alright enough with the sermonizing.

Look, I know this option has its own issues. For one, it really reduces the effective length of a game and I know some people hate that. All I know is, being able to retry is killing the atmosphere. Revealing cracks that shouldn’t be visible and putting far too much stress on systems that were not designed with replayability in mind.

And that’s just not how you do horror.

You get all that Call of Cthulhu?

Civilization, Myth, and Savagery: Reading Lord of the Flies

Rishabh Chakrabarti — Sat, 06 Sep 2025 08:38:00 GMT

After reading Lord of the Flies, it’s tempting to accept William Golding’s grim hypothesis — that without the rules of civilization, children (and by extension, humans) descend into savagery. The novel unsettles precisely because it pokes at a myth Western societies have long told themselves: that schooling and tradition civilize us.

Golding's Background

Golding won the Nobel Prize for Literature in 1983, and commentators never fail to note how profoundly he was shaped by war. He had served as a naval officer in World War II, witnessing the D-Day landings and the horrific destructiveness of modern conflict. These experiences stripped him of youthful optimism about human goodness.

Seen in that light, Lord of the Flies is a multi-faceted allegory:

A political allegory, dramatizing the fragility of democracy.
A psychological allegory, mapping Freudian drives (id, ego, superego) onto its characters.
A religious allegory, with Simon’s Christ-like martyrdom.
And most centrally, an allegory of war itself — showing how quickly human beings turn to violence when stripped of external order.

Golding was also, in many ways, offering a fictional argument in line with Thomas Hobbes’s Leviathan (1651), which famously argued that in the “state of nature” life is “solitary, poor, nasty, brutish, and short.”

The Eton–Waterloo Myth

Take the famous line:

"The Battle of Waterloo was won on the playing fields of Eton."

Supposedly uttered by the Duke of Wellington (though almost certainly apocryphal), it became shorthand for the idea that elite British schools instilled discipline, teamwork, and leadership through games.

This was myth-making at its finest:

False cause fallacy – Wars are won by logistics, strategy, and manpower, not cricket.
Exclusivity bias – Most soldiers at Waterloo weren’t Etonians; the victory was collective, not aristocratic.
Propaganda – The line justified elite dominance by pretending privilege produced virtue.

In short, the “playing fields” weren’t about education; they were about producing obedient officers and administrators. Schools functioned less like centers of learning, more like factories of hierarchy.

Golding’s Rebuttal

Golding’s boys are straight out of that British school culture. If the Eton myth were true, they should have embodied resilience and teamwork. Instead, stripped of adult authority, the structure collapses: rivalry, fear, and violence take over.

Lord of the Flies reads like a direct contradiction of the Waterloo slogan. Where the myth glorifies discipline and leadership, Golding reveals how thin that veneer really is. The training doesn’t hold; savagery lurks beneath.

Golding’s argument is more than narrative pessimism — it’s a literary counterattack against a cherished national story. The “playing fields” didn’t save Europe from tyranny; they masked the same impulses that fueled fascism and war.

The Tongan Counterexample

Critics often point to the 1965 case of six Tongan boys, aged 13–16, who survived over a year on a deserted island. Unlike Golding’s children, they cooperated — building gardens, sharing food, and caring for the injured until rescue.

At first glance, this real-world story undermines Golding’s thesis. Yet comparing the two is a false equivalence:

Golding’s boys were younger, strangers, and written as products of a competitive, individualistic culture.
The Tongans were older, already friends, and grounded in collectivist Polynesian values.
Different ages, different cultures, different contexts.

The Tongans show that cooperation is possible — but it’s shaped by culture and bonds of trust. Golding wasn’t denying cooperation exists; he was warning how easily fragile social systems can unravel when they lack those supports.

This aligns with more optimistic views of humanity, such as Jean-Jacques Rousseau’s idea that humans are born good and corrupted by society — and with modern works like Rutger Bregman’s Humankind: A Hopeful History (2020), which argues that cooperation is our default instinct.

Schools as Factories

Put together, these stories highlight the real role of schools in the industrial and imperial age. They were less about nurturing curiosity and more about producing soldiers, workers, and administrators. Bells, uniforms, rigid schedules — all echoes of the factory floor.

The Eton myth celebrates this as a virtue. Golding exposes its fragility. The Tongans remind us that cooperation and resilience can emerge — but only where culture and relationships make it possible.

In a sense, Golding was writing not just against the Eton myth, but against the very assumption that discipline alone equals civilization. He suggests instead that civilization is precarious, requiring constant moral choice, not just training.

Modern psychology reinforces this point. The infamous Stanford Prison Experiment (1971) by Philip Zimbardo showed how quickly ordinary people can adopt cruelty when authority structures collapse or shift. Like Golding’s novel, it suggested that savagery is never far below the surface.

Conclusion

Golding’s pessimism wasn’t universal, but it was pointed: the stories elites tell about civilization are often myths designed to preserve power. Whether through slogans like “Waterloo was won at Eton” or the sanitized image of schooling, the underlying assumption is the same — discipline equals virtue.

Lord of the Flies forces us to ask:

What happens when those myths are stripped away?

What happens when humans devolve?

Golding leaves us with a haunting possibility: without culture, compassion, and constant vigilance, civilization is only a mask.

Can humanity rise above savagery at its most desperate times?

Chhupa Sa Kuch — छुपा-सा कुछ

Vyom — Fri, 20 Jun 2025 12:30:00 GMT

A haunting exploration of life's trial, loneliness and the search for connection by author Vyom.

छुपा-सा कुछ — Vyom

क्या लिखूं कि जीवन में कठिनाई है,

ये भी लिख लूं तो फिर पढ़ाऊं किसको?

सोचता हूँ — चीखें सुनाऊँ जो मुँह से निकल ही नहीं रहीं,

या एक ग़ज़ल बनाऊँ… और बहलाऊँ सबको।

<br>

सब कुछ टूट रहा है, और मैं ईंटें समेट रहा हूँ,

इन्हें जोड़ दूँ, एक महल बनाऊँ — पर उसमें ठहराऊँ किसको?

<br>

एक वक़्त था जब पाना था बहुत कुछ,

अब कुछ पाया है — पर वो दिखाऊँ किसको?

<br>

मुँह मोड़ लिया है हर किसी ने, पर खुदगर्ज़ भी हैं सब,

जिन्हें बुलाऊँ, वो आ भी जाएंगे — पर अब मैं बुलाऊँ किसको?

<br>

अब मन नहीं करता अपनी किस्मत से लड़ने का…

बात बस इतनी सी है — पर ये बतलाऊँ किसको?

Flowers Too Late

Neha Ramrakhyani — Sun, 16 Mar 2025 12:30:00 GMT

A heartfelt tribute to the unseen artists, their struggles, and the enduring power of art to heal and console.

Flowers Too Late — Neha Ramrakhyani

Art is to console those who are broken by life. — Vincent Van Gogh

I've often found myself thinking and writing about art.

Can we ever concise its gravity in words?

Can we ever capture its depth in colors?

Art is everything, everywhere and everyone,

Yet it's nothing at all if not valued.

So many artists die unrecognized, unappreciated.

And we don't just lose life when we lose an artist,

We lose a perspective, a vision, a story, we lose art.

We lose what could have been a way of living, a masterpiece in making,

We lose a voice that had courage to speak but fell on deaf ears.

What good is it when you honor him by putting flowers on his grave,

When all his life you made him feel like he had done nothing but failed.

<br />

When actually it was you who had failed,

To recognize the greatness in the numbered days he persisted,

While he struggled to find a single companion that would stay.

I often feel that artists perceive things differently, a tad too deeply, a little more intensely.

Perhaps that's their greatness and also their tragedy.

And I feel everyone is capable of feeling the same way,

And they surely would, if there was a job for it that would pay.

I wonder what will happen to me and my words,

Will my voice be heard or will flowers be put on my grave?

Vincent says art is to console those who are broken by life,

I say, art is to heal the artists who refuse to be broken by life.

Optimization Strategies and Best Practices in React Native

Vaibhav Sharma — Tue, 25 Feb 2025 12:30:00 GMT

React Native enables developers to build cross-platform apps efficiently, but achieving optimal performance requires careful tuning. Without optimizations, React Native apps can suffer from slow rendering, memory leaks, and sluggish UI interactions, especially on lower-end devices.

In this guide, we’ll explore key performance bottlenecks and proven strategies to optimize your React Native app for a smoother user experience.

Optimizing Rendering Performance

Avoid Unnecessary Re-Renders with `memo` and `useCallback`

By default, React components re-render when their parent re-renders, which can cause performance bottlenecks.

Use React.memo to prevent unnecessary re-renders:

import React, { memo } from 'react';

const ExpensiveComponent = memo(({ data }) => {
  console.log('Rendered');
  return <Text>{data}</Text>;
});

Use useCallback to avoid regenerating functions in child components:

const handlePress = useCallback(() => {
  console.log('Button clicked');
}, []);

Use `FlatList` Instead of `ScrollView` for Large Lists:

ScrollView renders all items at once, causing memory and performance issues for long lists. Instead, use FlatList for efficient lazy loading.

<FlatList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  keyExtractor={(item) => item.id}
/>

Use `useEffect` and `useMemo` Wisely

Minimize unnecessary computations inside components with useMemo:

const computedValue = useMemo(() => expensiveCalculation(data), [data]);

Only re-run side effects when needed using useEffect with dependency arrays:
```
useEffect(() => {
  fetchData();
}, []); // Runs only once
```

Reducing JavaScript Thread Load

Optimize JavaScript Execution with `InteractionManager`

If you have heavy computations, move them to the background using InteractionManager.runAfterInteractions:

import { InteractionManager } from 'react-native';

useEffect(() => {
  InteractionManager.runAfterInteractions(() => {
    expensiveOperation();
  });
}, []);

Improving UI Performance

Enable Hermes for Faster Startup Times

Hermes is an optimized JavaScript engine that improves execution speed and memory usage.

On Android, enable Hermes in android/app/build.gradle:

project.ext.react = [
  enableHermes: true  // Set to true
]

For iOS, turn the hermes_enabled flag to true in ios/Podfile:

use_react_native!(
  :path => config[:reactNativePath],
  # to enable hermes on iOS, change `false` to `true` and
then install pods
  :hermes_enabled => true
)

Use Native Driver for Animations

React Native’s JS-based animations block the JS thread, causing lag. Enable the native driver to shift animations to the UI thread. You can use the native driver by specifying useNativeDriver: true in your animation configuration.

Animated.timing(animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Moves animations to native thread
}).start();

Memory Management and Avoiding Leaks

Remove Unmounted Listeners

Unremoved listeners cause memory leaks. Clean up listeners in useEffect:

useEffect(() => {
  const subscription = eventEmitter.addListener('event', callback);
  return () => subscription.remove(); // Cleanup
}, []);

Optimizing Network and Data Fetching

Use Pagination Instead of Fetching Everything at Once

If fetching large datasets, implement pagination:

const fetchMoreData = () => {
  fetch(`https://api.example.com/data?page=${nextPage}`)
    .then((res) => res.json())
    .then((newData) => setData([...data, ...newData]));
};

<FlatList
  data={data}
  onEndReached={fetchMoreData}
  onEndReachedThreshold={0.5}
/>;

Use `tanstack/react-query` for Caching and Background Fetching

tanstack/react-query efficiently caches data and refetches in the background, improving perceived speed.

import React from 'react'
import { useIsFocused } from '@react-navigation/native'
import { useQuery } from '@tanstack/react-query'
import { Text } from 'react-native'

function MyComponent() {
  const isFocused = useIsFocused()

  const { dataUpdatedAt } = useQuery({
    queryKey: ['key'],
    queryFn: () => fetch(...),
    subscribed: isFocused,
  })

  return <Text>DataUpdatedAt: {dataUpdatedAt}</Text>

Bundle Size Optimization

Enable Code Splitting and Dynamic Imports

Reduce initial bundle size by lazy-loading components:

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Loader />}>
  <HeavyComponent />
</Suspense>;

Reduce Package Bloat

Audit and remove unnecessary libraries:

npx depcheck

Replace large libraries with lighter alternatives:

moment.js → date-fns
lodash → native JS functions (You Don't Need Lodash)

Debugging Performance Bottlenecks

Use React Native Performance Monitors

Enable Perf Monitor: Cmd + M (Android) or Cmd + D (iOS)
Profile your app with Flipper and React Native DevTools

Check JS Frame Rate

Use the FPS monitor to check frame drops.

By following these best practices, your React Native app will run smoothly and efficiently, ensuring a better user experience across devices.

React and WebAssembly: Unlocking High-Performance Apps

Vaibhav Sharma — Sun, 09 Feb 2025 12:30:00 GMT

Web performance is more important than ever. With applications becoming more complex, developers are constantly looking for ways to optimize performance. One of the most exciting advancements in web development is WebAssembly (WASM) — a low-level, binary instruction format that runs in the browser at near-native speed. When combined with React, WebAssembly opens up new possibilities for building high-performance web applications.

🚀 What is WebAssembly (WASM)?

WebAssembly (WASM) is a portable binary format that allows code written in languages like C, C++, Rust, and others to run in the browser at native speed. It was designed to complement JavaScript, enabling performance-critical parts of your application to be written in more efficient languages while still integrating seamlessly with the web ecosystem.

Key Features of WebAssembly

High Performance: Near-native execution speed.
Portability: Runs on all major browsers and platforms.
Interoperability: Works alongside JavaScript.
Security: Sandboxed environment for safe execution.

Why Use WebAssembly with React?

React is already a performant library for building user interfaces, but for CPU-intensive tasks, such as real-time data processing, image manipulation, or 3D rendering, JavaScript may hit its limits. This is where WebAssembly shines.

Use Cases for React + WebAssembly

Real-time Data Visualization: Handling large datasets or complex calculations without blocking the UI.
Multimedia Processing: Image, audio, and video manipulation.
Gaming and 3D Graphics: Powering graphics-heavy applications using WebGL.
Cryptography and Compression: High-performance encryption, compression, and decompression in the browser.
Machine Learning: Running inference for trained ML models in the browser.

Setting Up WebAssembly with React

Let’s walk through a simple example of integrating WebAssembly in a React app. For this demo, we’ll use Rust to write a WebAssembly module.

Step 1: Install Rust and wasm-pack

First, install Rust and the wasm-pack tool, which helps compile Rust into WebAssembly.

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh  
cargo install wasm-pack

Step 2: Create a Rust Library

Create a new Rust project and add a function to calculate the Fibonacci sequence (a CPU-heavy task).Create a new Rust project and add a function to calculate the Fibonacci sequence (a CPU-heavy task).

// src/lib.rs
#[no_mangle]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

Step 3: Compile to WebAssembly

Use wasm-pack to compile the Rust project to WebAssembly.

wasm-pack build --target web

Step 4: Integrate WebAssembly in React

In your React app, import and use the generated WebAssembly module.

import React, { useState } from 'react';

function App() {
  const [fibResult, setFibResult] = useState<number | null>(null);

  const calculateFibonacci = async (n: number) => {
    const wasm = await import('./wasm_module');  // Import your Wasm module
    const result = wasm.fibonacci(n);
    setFibResult(result);
  };

  return (
    <div>
      <h1>React + WebAssembly Example</h1>
      <input
        type="number"
        placeholder="Enter a number"
        onChange={(e) => calculateFibonacci(Number(e.target.value))}
      />
      {fibResult !== null && <p>Fibonacci Result: {fibResult}</p>}
    </div>
  );
}

export default App;

Performance Gains: What to Expect

By offloading computationally intensive tasks to WebAssembly, you can reduce UI blocking and improve the responsiveness of your React app. However, WebAssembly isn’t always the best solution for every problem. Use it when raw performance is essential, and stick to JavaScript for simpler tasks to avoid unnecessary complexity.

Best Practices for React and WebAssembly Integration

Benchmark First: Ensure that the performance gains justify the added complexity.
Avoid Over-Optimization: Not everything needs to be written in WebAssembly. Use it where it makes the most impact.
Memory Management: Be mindful of WebAssembly’s memory model. Share data between JavaScript and WASM efficiently.
Error Handling: WASM debugging can be tricky. Use tools like wasm-bindgen and console.error for better error tracking.

The Future of React and WebAssembly

As WebAssembly continues to evolve (with features like garbage collection and threading on the horizon), it’s poised to play a significant role in the future of web development. When combined with React, it opens up new doors for high-performance, interactive web applications that were previously impossible to build with pure JavaScript. Tools like Figma, AutoDesk and Tensorflow.js already leverage WASM, and list is just gonna keep growing.

Want to go deeper? Let me know if you’d like a follow-up post on optimizing WebAssembly memory or integrating WebAssembly with other frameworks like Next.js!

In Bruges — Harry Potter Edition

Vaibhav Sharma — Mon, 03 Feb 2025 12:30:00 GMT

I was watching In Bruges, and I thoroughly enjoyed the movie. However, the number of actors who have appeared in both In Bruges and the Harry Potter franchise gave me a magical perspective on the movie...

Warning: Spoilers

Gellert Grindelwald and Alastor “Mad-Eye” Moody are two wizards — er, hitmen — hiding out in the fairytale (well, technically Muggle) city of Bruges after a job gone horribly wrong. They’ve been sent there by their ruthless boss, Lord Voldemort (who is coincidentally named Harry in the movie), to lay low.

Grindelwald, young and brash, absolutely hates Bruges. The medieval charm, the canals, the gothic architecture — it’s all wasted on him. He complains non-stop to Moody, who, being older and more experienced, actually enjoys the city’s history and culture. But Grindelwald is impatient, restless, and haunted by their last job.

Through a series of wanderings, Grindelwald meets Fleur Delacour, a beautiful and mysterious woman involved in the local film industry. He’s immediately drawn to her and starts pursuing a romance. Meanwhile, Moody takes a more measured approach to their exile, sightseeing and reflecting on their predicament.

As it turns out, Grindelwald and Moody were sent to Bruges because, on their last job, Grindelwald accidentally killed a child while assassinating Aberforth Dumbledore. This weighs heavily on Moody’s conscience, though Grindelwald tries to push the guilt away with drinking and partying. Their boss, Voldemort, is not pleased with the botched mission.

Things take a turn when Voldemort calls Moody, revealing his true intention: Grindelwald must die for his mistake. Moody, who has grown fond of his reckless young partner, struggles with this command. He tries to persuade Grindelwald to leave Bruges, but Grindelwald, too wrapped up in his misadventures (which include a run-in with a racist house elf, Jimmy), doesn’t take him seriously.

Eventually, Voldemort himself arrives in Bruges, bringing chaos with him. Grindelwald, realizing he’s been marked for death, attempts to flee, but a series of violent encounters lead to a final showdown in the city’s picturesque streets.

As Avada Kedavara — er, bullets — fly, Moody sacrifices himself to give Grindelwald a chance to escape, but Voldemort is relentless. In the end, Grindelwald, gravely wounded, is left contemplating his fate. Will he survive? Does he even want to, given the weight of his sins? As the screen fades to black, he wonders if Bruges — beautiful, quiet Bruges — is his own personal purgatory.

Critical Analysis of Union Budget 2025

CA Sumeet Agarwal — Sat, 01 Feb 2025 12:30:00 GMT

The Union Budget 2025 presents a mix of ambitious reforms, fiscal prudence, and sector-specific incentives. While it introduces significant tax reliefs, infrastructure expansion, and targeted employment generation, there are concerns regarding fiscal consolidation, implementation challenges, and potential economic implications. Let's take a look at the budget’s major aspects.

Taxation & Fiscal Consolidation

Positives:

✅ Income Tax Relief – Raising the income tax exemption limit to ₹12 lakh is a significant move that boosts disposable income and encourages consumption. It also simplifies tax filing for middle-class taxpayers.

✅ Simplification of TDS/TCS – Reducing compliance burden will encourage investment and ease financial transactions.

Concerns:

❌ Fiscal Deficit Concerns – While the government aims to reduce fiscal deficit to 4.4% of GDP (from 4.8%), its ambitious expenditure on welfare schemes and infrastructure raises concerns about how revenue shortfalls will be covered. More details on deficit financing are needed.

❌ New Tax Code Uncertainty – The budget proposes a new tax law next week, creating uncertainty about potential long-term tax regime changes. Businesses and investors may delay decisions until further clarity emerges.

Agriculture & Rural Development

Positives:

✅ Dhan Dhanya Yojana & Credit Expansion – Enhancing the Kisan Credit Card limit to ₹5 lakh will improve access to credit for farmers and boost agricultural productivity. The six-year pulses mission will help reduce import dependency.

✅ Expansion of Agro-Based Sectors – Establishing a Makhana Board in Bihar and increased government purchase of pulses ensure price stability for farmers.

Concerns:

❌ No Major Structural Reforms – While subsidies and credit expansion are beneficial, there is no significant land reform policy or market-linked agricultural pricing mechanism, which are critical for long-term growth.

❌ MSP & Procurement Uncertainty – The budget lacks clarity on whether the government will increase Minimum Support Prices (MSP) or sustain large-scale procurement programs.

Infrastructure & Urban Development

Positives:

✅ ₹11.11 Lakh Crore Capex Allocation – This is a continuation of the government’s infrastructure-driven growth strategy, expected to boost sectors like cement, steel, and construction.

✅ Urban Challenge Fund (₹1 Lakh Crore) – Encouraging states to revamp cities and water sanitation through competitive grants is an innovative governance approach.

Concerns:

❌ Execution Bottlenecks – Infrastructure projects in India often face delays due to land acquisition issues, environmental clearances, and bureaucratic red tape. The budget does not specify how these hurdles will be addressed.

❌ Dependence on States – Many urban reforms (e.g., affordable housing, transport) require state-level cooperation. With differing political alignments, implementation may be slow.

Financial Sector Reforms

Positives:

✅ 100% FDI in Insurance – This reform is expected to bring global players into India’s insurance market, increasing competition and expanding coverage.

✅ MSME Credit Support – Enhancing credit guarantees for small businesses (₹5 lakh limit on micro-enterprise credit cards) will improve liquidity and boost entrepreneurship.

Concerns:

❌ Banking Sector Risks – While increased credit guarantees help businesses, they also increase the risk of NPAs (Non-Performing Assets) if borrowers fail to repay. India’s banking sector already struggles with bad loans.

❌ Lack of Direct Support for NBFCs – Many Non-Banking Financial Companies (NBFCs) play a key role in credit distribution, but the budget does not offer specific relief or funding for them.

Energy & Sustainability

Positives:

✅ 100 GW Nuclear Energy Plan – This ambitious target will help India reduce coal dependency and transition to cleaner energy.

✅ Exemptions for EV & Battery Sector – Removing import duties on lithium-ion batteries will reduce costs for electric vehicle (EV) manufacturers, making EVs more affordable.

Concerns:

❌ Delayed Renewable Energy Transition – The focus on nuclear energy over solar and wind raises concerns, as nuclear projects take decades to implement, whereas solar & wind can be scaled faster.

❌ Lack of Carbon Taxation – Despite global emphasis on carbon credits and emission reduction, the budget does not introduce incentives for green financing or carbon pricing.

Employment & Skill Development

Positives:

✅ 22 Lakh Jobs in Leather & Footwear – This initiative will boost exports and create employment in labor-intensive manufacturing.

✅ AI Research & Digital Education – Allocating ₹500 crore for AI in education is a forward-thinking move, helping India compete in global AI advancements.

Concerns:

❌ Unclear Job Creation Strategy – The budget mentions job creation but does not provide a structured employment generation roadmap. India needs 90 lakh jobs annually to absorb its workforce, but these initiatives may not be enough.

❌ Limited Focus on Women’s Employment – While there is a special scheme for women from backward classes, there is no large-scale initiative for urban working women or gender wage parity.

Fiscal Discipline & Debt Management

Positives:

✅ Lower Fiscal Deficit Target – Reducing fiscal deficit to 4.4% of GDP signals the government’s intent to maintain economic discipline.

Concerns:

❌ Borrowing Dependency – The government plans to borrow ₹11.5 trillion, raising concerns about rising interest payments and debt sustainability.

❌ Revenue Assumptions May Be Optimistic – The budget assumes high tax collections and disinvestment targets, but global economic uncertainties (geopolitical tensions, slowing growth) may impact revenue.

Final Verdict: A Balanced but Risky Budget

✅ Strengths

Pro-Growth & Investment-Oriented: Focus on infrastructure, MSME credit, and nuclear energy will drive long-term growth.
Taxpayer-Friendly: Raising tax exemption limits will boost disposable income.
Sector-Specific Support: Agriculture, rural development, and manufacturing sectors receive targeted incentives.

❌ Weaknesses

Fiscal Risks: Revenue assumptions are optimistic, and high government borrowing raises concerns.
Execution Challenges: Many reforms require state cooperation & bureaucratic efficiency.
Limited Social Sector Reforms: Health, women’s employment, and education need stronger policy interventions.

Rating: 7.5/10

*Disclaimer: Views expressed are author's personal and based on initial interpretation and understanding of budget before further addendums and explanations given by the government

Piranesi by Susanna Clarke — Identity, Power, and Beauty

Vaibhav Sharma — Tue, 28 Jan 2025 12:30:00 GMT

When I first picked up Piranesi by Susanna Clarke, I wasn’t quite sure what to expect. What I found was a deeply moving exploration of identity, power, and our perceptions of the world. It’s a book that felt like it was written to be felt as much as it was to be read.

The Two Kinds of People

One of the most striking themes in Piranesi is the contrast between two kinds of people. There are those who are content with what they have, open to new experiences, and able to find joy in life’s small gifts. Then there are those endlessly chasing power and control, never satisfied, always wanting more.

Piranesi embodies the former: resourceful, grateful, and kind. His acceptance of the House and his life within it is deeply tied to his trauma and isolation, yet he doesn’t succumb to bitterness. Instead, he thrives in his own way, finding beauty and meaning in his existence.

The Other, by contrast, epitomizes the latter. Despite having access to so much — luxuries and knowledge — the Other is unsatisfied, always taking and giving nothing in return. I couldn’t help but envy the Other for the things he had, even as I shared Piranesi’s growing realization that something wasn’t right.

The Cruelty of Betrayal

One of the most gut-wrenching parts of the book is the betrayal that Piranesi experiences at the hands of the Other. To discover that someone you trusted has not only lied to you but also used you as a pawn for their own selfish ends is devastating.

What makes this betrayal even crueler is the bitter irony of the name “Piranesi.” The name comes from Giovanni Battista Piranesi, an artist known for his surreal depictions of endless, prison-like spaces. By calling him this, the Other reduces Matthew’s existence to a mockery, trapping him in a world of his own ignorance and pain.

This revelation dug deep. The overwhelming scenarios of revenge and retribution that flood Piranesi’s mind — followed by his breaking down and falling asleep — perfectly capture the weight of this betrayal. And yet, even in his pain, Piranesi finds the strength to reconcile with himself and extend forgiveness, making him an extraordinary character.

Unreliable Narrators Done Right

At first, I was frustrated by some inconsistencies in Piranesi’s knowledge. How could someone who seemed native to the House know about chess, minotaurs, and other worldly concepts? It felt like sloppy world-building at first.

But then, the journal entries switched from using standard months and years to made-up dates. That was my first clue that something had changed — that something much deeper was at play. Suddenly, those inconsistencies became breadcrumbs leading me toward the truth.

I’m often skeptical of unreliable narrators; they can feel like a lazy way to add twists. But Clarke does it so beautifully here. Every revelation felt earned, and I found myself equally excited and nervous as I pieced things together alongside Piranesi. The Other’s role in the story — friend? foe? something in between? — was handled with such nuance that by the end, I felt like I truly knew him, even though I didn’t trust him.

Echoes of Narnia

The novel’s references to C.S. Lewis’s Chronicles of Narnia were a delightful surprise. When Piranesi mentions dreaming of “a faun standing in a snowy forest and speaking to a female child,” it’s almost certainly a nod to Lucy Pevensie’s meeting with Mr. Tumnus in The Lion, the Witch, and the Wardrobe. This subtle allusion adds another layer to the book’s themes of alternate worlds, liminal spaces, and the tension between wonder and danger. Much like Narnia, Piranesi’s world is both enchanting and treacherous, inviting readers to lose themselves while urging caution.

A Cast That Feels Real

Despite being a relatively short book, Piranesi features characters who feel startlingly real. Even the “villains” like Ketterley are written in a way that makes them deeply human — evil in a familiar, unsettling way. It’s a testament to Clarke’s skill that she can create such vivid, believable characters with only snippets of backstory.

Raphael, in particular, stood out for her gentleness and contrast to Ketterley. Her courage and grace in dealing with Piranesi and the House were beautiful to witness. The way she approached Piranesi — with patience and respect — was a much-needed balm after the cruelty of the Other.

Identity and Reconciliation

One of the most powerful aspects of the book is its exploration of identity. As Piranesi learns more about his past, the lines between who he was (Matthew) and who he is (Piranesi) blur. By the end, he reconciles these identities to become someone new — a blend of the two, but also entirely himself.

This theme is reinforced in small but poignant ways, like Piranesi’s continued kindness toward Ritter, despite everything. His ability to forgive, to show compassion even in the face of betrayal, is a testament to his character and the journey he’s undergone.

Perspective Shifts

Some moments in the book hit hard — like the revelation about the bones. At first, Piranesi sees them as friends, residents of the House. But when Raphael reveals the truth, they become something entirely different: victims, murdered by Ketterley. This shift in perspective is gut-wrenching, not just for Piranesi but for the reader as well.

Another poignant moment comes when Piranesi realizes the House needed someone to appreciate its beauty. It’s a subtle but profound realization, one that mirrors the way this book itself feels like it needs to be appreciated by multiple perspectives. Like the House, Piranesi is richer when shared and discussed.

Freedom vs. Captivity

One of the book’s recurring questions is whether we’re trapped or free. For Piranesi, the House is both a prison and a sanctuary. The idea that freedom is a matter of perception is explored so delicately, leaving the reader to ponder: How much of our own sense of freedom is shaped by our mindset?

Emotionally Resonant Prose

More than anything, this book made me feel. I felt Piranesi’s sorrow, shame, joy, and pain as if they were my own. The writing is evocative and poetic, feeling almost like a classic novel, yet it carries a modern sensibility that makes it accessible.

Moments like Piranesi breaking down after realizing the Other’s betrayal, or crying on Raphael’s shoulder, were so raw and human that I couldn’t help but ache for him. The book’s ability to connect on such a deep emotional level is its greatest strength.

Final Thoughts

Piranesi is a masterpiece. It combines the wonder of magic, the intrigue of cults and charismatic leaders, and the quiet beauty of liminal spaces into a deeply philosophical exploration of identity and freedom.

Few books have left me feeling as connected to a character as this one. It’s not just a book; it’s an experience — one that deserves to be shared, discussed, and cherished.

If you haven’t read it yet, I can’t recommend it enough.

The Financial Bubble: How Stock Market Frenzy Is Impacting India’s Economic Balance (2014–2023)

CA Sumeet Agarwal — Mon, 13 Jan 2025 12:30:00 GMT

India’s economy over the past decade has been characterized by robust government expenditure, surging stock markets, and stagnating private consumption. From 2014 to 2023, the market capitalization of listed companies on Indian exchanges grew by 259.1%, while private consumption—India’s largest GDP component—grew only by 51.4%. During the same period, bank deposit growth slowed significantly, as retail investors increasingly diverted funds to the stock market in search of higher returns. This article evaluates how government expenditure and excess liquidity are indirectly being funneled into equity markets, creating a risky financial bubble that threatens long-term economic stability.

Government Expenditure and Its Indirect Link to Stock Markets

Government expenditure grew significantly from ₹16.6 trillion in 2014 to an estimated ₹45.0 trillion in 2023, driven by infrastructure investments, fiscal stimulus, and large-scale disinvestments. However, a portion of this liquidity has bypassed the real economy and found its way into financial markets.

Key Drivers Linking Government Spending to Stock Markets

Disinvestment Proceeds: Government disinvestment programs raised ₹2.7 trillion between 2014 and 2023, much of which boosted the equity market. For example, the LIC IPO (2022) and stakes in PSUs were absorbed by institutional and retail investors, adding to market momentum.
Liquidity Injection: Post-2016 demonetization and subsequent fiscal stimuli provided excess liquidity, which investors reallocated into equities.

Government Expenditure Growth (2014–2023)

Source: Union Budget, Ministry of Finance, GoI

Rising Market Capitalization vs. Private Consumption Growth

While government spending boosted financial assets, its effect on private consumption—a more critical growth driver—has been muted.

Diverging Trends in Market Capitalization and Consumption

Stock Market Boom: From ₹75.3 trillion in 2014, India’s market capitalization surged to ₹271.4 trillion in 2023, fueled by institutional inflows, retail participation, and speculative investments.
Consumption Stagnation: In contrast, private consumption grew at a subdued pace, from ₹106 trillion in 2014 to ₹160.5 trillion in 2023, indicating weak demand in the broader economy.

Cumulative Growth Comparison (2014–2023)

Source: NSE, MOSPI

Conclusion from Data

The sharp rise in market capitalization is driven more by speculative inflows than real earnings growth or economic output.

Consumption’s tepid growth reflects insufficient job creation, stagnant wages, and wealth concentration in financial markets.

Declining Bank Deposits Amid Market Frenzy

The sharp rise in stock market participation has come at the expense of bank deposits. With real deposit rates falling, investors are increasingly chasing equity-linked returns, reducing the banking system’s ability to fund long-term credit needs.

Bank Deposit Growth (2014–2023)

Source: RBI Annual Reports

Deposit growth has significantly lagged behind the stock market, raising concerns about the sustainability of credit growth in the banking system.

The Role of Domestic Institutional and Retail Investors

Domestic Institutional Investors (DIIs) and retail investors have played a pivotal role in driving stock market valuations, leveraging lower interest rates and excess liquidity.

Equity Investment Trends

Source: NSE, SEBI

Retail Involvement: Platforms like Zerodha and Paytm Money have democratized equity participation, encouraging speculative investments.

The Risks of Stock Market Frenzy

Wealth Concentration

The stock market boom has disproportionately benefited the wealthy, exacerbating income inequality. According to Oxfam’s 2023 report, the richest 1% of Indians own 40% of national wealth.

Speculative Bubble Risks

Valuations in certain sectors have reached unsustainable levels, risking a financial correction that could destabilize investor confidence and consumption further.

Insufficient Job Creation

High market capitalization growth has not translated into commensurate job creation, as companies prioritize capital efficiency over expansion.

Policy Recommendations

Reallocate Expenditure: Direct more government spending toward rural welfare, job creation, and demand-driven schemes.
Improve Financial Literacy: Curb speculative retail investments by ensuring investors are aware of risks.
Revive Banking: Encourage higher deposit rates to improve banking liquidity and credit capacity.

Conclusion

India’s market frenzy, driven by liquidity and speculative inflows, presents systemic risks that policymakers must address. Without aligning financial market growth with consumption and employment, the economy may face a potential bubble that threatens long-term stability.

Hold on for the next part...

How to sync Child Transforms of a GameObject with PUN2 in Unity3D

Eklavya Mishra — Fri, 21 Jun 2024 12:30:00 GMT

Photon Unity Networking v2 (PUN2) is the networking package you end up using when you realize the Unity3D project you’re working on will need:

A WebGL build
Voice Chat support

The alternative, Netcode for GameObjects, the networking package provided by Unity3D itself, is a decent solution for sure (according to me, having worked on it for only a week). But the voice service provided by Unity - Vivox doesn’t support voice over WebGL.

The point is, PUN2 exists and its voice service works over WebGL! Can you read the excitement in my words? That’s me with 5 years of Game Dev experience now. I’ve heard it’s only gonna get better.

Anyway, you probably know how to set up a prefab which will be instantiated over the internet.

Or if you don’t - that’s fine. I’ll explain. I’ll skip the steps about importing PUN2 and the App ID setup. You can find that stuff anywhere.

Have a prefab in your Resources folder.
Add a PhotonView component to your prefab’s root. Let’s assume it’s a basic Cube. We don’t care about syncing animations for now.
Now add a PhotonTransformView component to your alongside the PhotonView (i.e., on the same root). This component will be responsible for syncing our Transform over the network.

Add this code to instantiate your prefab:

PhotonNetwork.Instantiate(prefabPath, Vector3.zero, Quaternion.identity);

Here prefabPath would be the path to your prefab in the Resources folder. And the Vector3 and Quaternion are your position and rotation respectively.

And that’s it. Your Cube (assuming it has a script updating its position/rotation) will reflect the changes to the other players.

There’s a catch here of course.

Say, there’s a Cube with a script that rotates the Cube along the Y-axis, and there's a child of this Cube, a Capsule.

Now, it's fair to assume that the Capsule’s movement should also be reflected to other players over the network.

But of course, that doesn't work. SMH.

So, what do we do?

Now I’ll pay a little lip-service to the idea of adding another PhotonView and another PhotonTransformView to the child (Capsule in our case). But I could never get that solution to work. Maybe it’s supposed to, maybe it’s not.

Either way, I have a different solution.

The PhotonTransformView implements an interface called IPunObservable.

public class PhotonTransformView : MonoBehaviour, IPunObservable

That’s what you wanna inherit from if you wanna share data over thenetwork stream. This gives you the method — OnPhotonSerializeView, which gets called every time there is a change in the stream. This method also provides us with the stream object itself.

All we need to do is check if the stream is currently reading or writing, which is the equivalent of sending/receiving data.

One thing to note here is that the order in which the data is received is the same order in which it is sent.

So here’s the gist of the idea — we handle the syncing ourselves.

Here’s a bad way of doing this:

using Photon.Pun;
using UnityEngine;

public class ChildTransformSync : MonoBehaviourPun, IPunObservable
{
	[SerializeField] private Transform childTransform;

	public void OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info)
	{
    	if (stream.IsWriting)
    	{
        	// Send the current position and rotation to other players
        	stream.SendNext(childTransform.localPosition);
        	stream.SendNext(childTransform.localRotation);
    	}
    	else
    	{
        	// Receive the position and rotation from other players
        	childTransform.localPosition= (Vector3)stream.ReceiveNext();
        	childTransform.localRotation= (Quaternion)stream.ReceiveNext();
    	}
	}
}

All you gotta do with this component is:

Attach it to the Capsule.
Add it to the Observed Components list in your parent’s (Cube) PhotonView.

Here are my issues with this script:

I gotta add this component to every child I need. And make sure they are observed by the parent’s PhotonView.
I’m sending the position for this Capsule over stream — an object which is never going to move. Only rotate. That too, only in the Y-axis. Why should I clog up the stream?
There is no interpolation for these sync ups. So, the movement/rotation is gonna snap all over the place.

Let’s first handle the first problem. The code handles the syncing for one child, so let's DRY it up so that it syncs up all the Transforms we want.

using UnityEngine;
using Photon.Pun;

public class TransformSync: MonoBehaviourPun, IPunObservable
{
	[SerializeField] private Transform[] transforms; // Array of transforms to sync

	public void OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info)
	{
    	if (stream.IsWriting)
    	{
        	// Send data to others
        	foreach (var t in transforms)
        	{
            	if (t != null)
            	{
                	stream.SendNext(t.position);
                	stream.SendNext(t.rotation);
                	stream.SendNext(t.localScale);
            	}
        	}
    	}
    	else
    	{
        	// Receive data
        	foreach (var t in transforms)
        	{
            	if (t != null)
            	{
                	t.position = (Vector3)stream.ReceiveNext();
                	t.rotation = (Quaternion)stream.ReceiveNext();
                	t.localScale = (Vector3)stream.ReceiveNext();
            	}
        	}
    	}
	}
}

Next, let's take care of the interpolation, by making a struct to hold the data we get from the stream:

[System.Serializable]
public struct TransformData
{
    public Vector3 position;
    public Quaternion rotation;
    public Vector3 scale;

    public TransformData(Vector3 pos, Quaternion rot, Vector3 scl)
    {
   	 position = pos;
   	 rotation = rot;
   	 scale = scl;
    }
}

Now, let’s use an array of these structs to hold the received data from the stream instead of setting it right when it’s received.

We’ll also ensure that this array is populated at the start with the initial positions of these transforms. We don’t want any goof-ups. Since, we are dealing with structs here, not classes, struct references(when they are not initialized in code) take up default values which can screw up our calculations.

Once we have the data — we can lerp to the network positions, instead of snapping to them.

using UnityEngine;
using Photon.Pun;

public class TransformsSync : MonoBehaviourPun, IPunObservable
{
    [SerializeField] private Transform[] transforms; // Array of transforms to sync
    [SerializeField] private float interpolationSpeed = 10f; // Speed of interpolation

    private TransformData[] _targetTransformData; // Target transform data to interpolate towards

    void Start()
    {
   	 _targetTransformData = new TransformData[transforms.Length];
   	 for (int i = 0; i < transforms.Length; i++)
   	 {
   		 if (transforms[i] != null)
   		 {
   			 _targetTransformData[i] = new TransformData(transforms[i].position, transforms[i].rotation, transforms[i].localScale);
   		 }
   	 }
    }

    void Update()
    {
   	 if (!photonView.IsMine)
   	 {
   		 for (int i = 0; i < transforms.Length; i++)
   		 {
   			 if (transforms[i] != null)
   			 {
   				 transforms[i].position = Vector3.Lerp(transforms[i].position, _targetTransformData[i].position, Time.deltaTime * interpolationSpeed);
   				 transforms[i].rotation = Quaternion.Lerp(transforms[i].rotation, _targetTransformData[i].rotation, Time.deltaTime * interpolationSpeed);
   				 transforms[i].localScale = Vector3.Lerp(transforms[i].localScale, _targetTransformData[i].scale, Time.deltaTime * interpolationSpeed);
   			 }
   		 }
   	 }
    }

    public void OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info)
    {
   	 if (stream.IsWriting)
   	 {
   		 // Send data to others
   		 foreach (var childTransform in transforms)
   		 {
   			 if (childTransform != null)
   			 {
   				 stream.SendNext(childTransform.position);
   				 stream.SendNext(childTransform.rotation);
   				 stream.SendNext(childTransform.localScale);
   			 }
   		 }
   	 }
   	 else
   	 {
   		 // Receive data and update target transform data
   		 for (int i = 0; i < transforms.Length; i++)
   		 {
   			 if (transforms[i] != null)
   			 {
   				 _targetTransformData[i].position = (Vector3)stream.ReceiveNext();
   				 _targetTransformData[i].rotation = (Quaternion)stream.ReceiveNext();
   				 _targetTransformData[i].scale = (Vector3)stream.ReceiveNext();
   			 }
   		 }
   	 }
    }
}

You might've noticed a check in the Update method:

private void Update()
{
	if (!photonView.IsMine)
	{
    	...
	}
}

This ensures our interpolation will only occur for objects belonging to other clients. Of course, we’d be handling our Capsule rotation ourselves so our calculated rotations will be perfectly accurate already.

So interpolation is resolved. Now, all we need to do is:

Attach this script to the prefab root.
Fill the transforms list with the Transform components we want to sync up.
Get rid of any PhotonTransformView components — we don’t need help.
Add this component to the Observed Components list in our PhotonView.

Now, technically we have achieved, what we set out to do. You can even stop reading at this point. But, let’s see if we can handle limiting the data sent/received over stream.

Why? Because we are programmers and we love optimizing things.

Let’s first create another struct called TransformSyncSettings. This will determine which values we want to sync up. It will consist of 3 bools — x, y & z. Each determining the axis we want to sync.

This structure makes sense for position and scale but for rotations we should have an additional w parameter as they are Quaternions - though let’s stick with Euler angles for now.

[System.Serializable]
public struct SyncSettings
{
	public bool x, y, z;
}

Let’s get rid of the TransformData class and rename it to TransformSyncData. It sounds cleaner.

This struct will hold a Transform reference, also a SyncSettings references for position, rotation and scale, and the 3 Vectors(NonSerialized) which will hold on to the network target positions for interpolation.

[System.Serializable]
public struct TransformSyncData
{
	public UnityEngine.Transform transform;
	public SyncSettings positionSync;
	public SyncSettings rotationSync;
	public SyncSettings scaleSync;

	[HideInInspector] public Vector3 targetPosition;
	[HideInInspector] public Vector3 targetRotation;
	[HideInInspector] public Vector3 targetScale;

	public TransformSyncData(UnityEngine.Transform transform)
	{
    	this.transform = transform;
    	positionSync = new SyncSettings { x = true, y = true, z = true };
    	rotationSync = new SyncSettings { x = true, y = true, z = true };
    	scaleSync = new SyncSettings { x = true, y = true, z = true };
    	targetPosition = transform.position;
    	targetRotation = transform.rotation.eulerAngles;
    	targetScale = transform.localScale;
	}
}

Now, in our TransformsSync class, let’s adjust the Start method so we correctly initialize the positions of our synced transforms. We’ll also update the old TransformData array reference to be of the TransformSyncData type.

[Header("Transform Sync")]
[SerializeField]
private TransformSyncData[] transformsToSync;

private void Start()
{
	for (int i = 0; i < transformsToSync.Length; i++)
	{
    	if (transformsToSync[i].transform == null) continue;

    	transformsToSync[i].targetPosition = transformsToSync[i].transform.position;
    	transformsToSync[i].targetRotation = transformsToSync[i].transform.rotation.eulerAngles;
    	transformsToSync[i].targetScale = transformsToSync[i].transform.localScale;
	}
}

Now, let’s take a look at our OnPhotonSerializeView code.

We wanna make use of our SyncSettings and only send/receive data which is explicitly defined to be sent through the inspector.

This is how we’ll handle the sending:

for (int i = 0; i < transformsToSync.Length; i++)
{
	if (transformsToSync[i].transform == null) continue;
	// Write only the necessary values based on sync settings

	if (transformsToSync[i].positionSync.x)
    	stream.SendNext(transformsToSync[i].transform.position.x);
	if (transformsToSync[i].positionSync.y)
    	stream.SendNext(transformsToSync[i].transform.position.y);
	if (transformsToSync[i].positionSync.z)
    	stream.SendNext(transformsToSync[i].transform.position.z);

	if (transformsToSync[i].rotationSync.x)
    	stream.SendNext(transformsToSync[i].transform.eulerAngles.x);
	if (transformsToSync[i].rotationSync.y)
    	stream.SendNext(transformsToSync[i].transform.eulerAngles.y);
	if (transformsToSync[i].rotationSync.z)
    	stream.SendNext(transformsToSync[i].transform.eulerAngles.z);

	if (transformsToSync[i].scaleSync.x)
    	stream.SendNext(transformsToSync[i].transform.localScale.x);
	if (transformsToSync[i].scaleSync.y)
    	stream.SendNext(transformsToSync[i].transform.localScale.y);
	if (transformsToSync[i].scaleSync.z)
    	stream.SendNext(transformsToSync[i].transform.localScale.z);
}

And this, is how we’ll read that data:

for (int i = 0; i < transformsToSync.Length; i++)
{
	if (transformsToSync[i].transform == null) continue;

	// Read only the necessary values based on sync settings
	Vector3 receivedPosition = new Vector3(
    	transformsToSync[i].positionSync.x
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.position.x,
    	transformsToSync[i].positionSync.y
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.position.y,
    	transformsToSync[i].positionSync.z
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.position.z
	);

	transformsToSync[i].targetPosition = receivedPosition;

	Vector3 receivedRotation = new Vector3(
    	transformsToSync[i].rotationSync.x
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.eulerAngles.x,
    	transformsToSync[i].rotationSync.y
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.eulerAngles.y,
    	transformsToSync[i].rotationSync.z
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.eulerAngles.z
	);
	transformsToSync[i].targetRotation = receivedRotation;

	Vector3 receivedScale = new Vector3(
    	transformsToSync[i].scaleSync.x
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.localScale.x,
    	transformsToSync[i].scaleSync.y
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.localScale.y,
    	transformsToSync[i].scaleSync.z
        	? (float)stream.ReceiveNext()
        	: transformsToSync[i].transform.localScale.z
	);

	transformsToSync[i].targetScale = receivedScale;
}

Moving on to interpolation, we want to make sure we only interpolate the values which we have explicitly stated to be sent/received making use of the SyncSettings bools.

for (int i = 0; i < transformsToSync.Length; i++)
{
	if (transformsToSync[i].transform == null) continue;

	TransformSyncData data = transformsToSync[i];

	Vector3 currentPos = data.transform.position;
	Vector3 currentRot = data.transform.eulerAngles;
	Vector3 currentScale = data.transform.localScale;

	float t = Time.deltaTime * PhotonNetwork.SerializationRate;

	// Interpolate position if required
	if (data.positionSync.x)
	{
    	currentPos.x = Mathf.Lerp(currentPos.x, data.targetPosition.x, t);
	}

	if (data.positionSync.y)
	{
    	currentPos.y = Mathf.Lerp(currentPos.y, data.targetPosition.y, t);
	}

	if (data.positionSync.z)
	{
    	currentPos.z = Mathf.Lerp(currentPos.z, data.targetPosition.z, t);
	}

	// Interpolate rotation if required
	if (data.rotationSync.x)
	{
    	currentRot.x = Mathf.LerpAngle(currentRot.x, data.targetRotation.x, t);
	}

	if (data.rotationSync.y)
	{
    	currentRot.y = Mathf.LerpAngle(currentRot.y, data.targetRotation.y, t);
	}

	if (data.rotationSync.z)
	{
    	currentRot.z = Mathf.LerpAngle(currentRot.z, data.targetRotation.z, t);
	}

	// Interpolate scale if required
	if (data.scaleSync.x)
	{
    	currentScale.x = Mathf.Lerp(currentScale.x, data.targetScale.x, t);
	}

	if (data.scaleSync.y)
	{
    	currentScale.y = Mathf.Lerp(currentScale.y, data.targetScale.y, t);
	}

	if (data.scaleSync.z)
	{
    	currentScale.z = Mathf.Lerp(currentScale.z, data.targetScale.z, t);
	}

	// Update transform
	data.transform.position = currentPos;
	data.transform.eulerAngles = currentRot;
	data.transform.localScale = currentScale;
}

You’ll notice I’ve gotten rid of the interpolationSpeed factor here, instead opting for PhotonNetwork.SerializationRate. I took that cue from the original PhotonTransformView class.

Can I explain more about it? No, I can’t.

Now, in the inspector add the Cube and the Capsule to the transformsToSync list. And, adjust the SyncSettings booleans to your heart’s content.

Finally, at long last, we are done. Really done! 100% absolutely ....

Yeah, there’s an issue.

If you run a build with this code you’ll notice that if the Host’s Capsule rotated somewhat before a Client joined — the joining Client would only see the default rotation set in the prefab itself. Any updates to the rotation afterwards will reflect perfectly on the client but that initial situation is an issue.

Riddle me this: which got called first Update or OnPhotonSerializeView?

That’s right. It’s unclear. On some machines, maybe Update got called first, on others, maybe it was OnPhotonSerializeView. They are not linked; one is never guaranteed to be called after the other.

So let’s be responsible programmers and handle that initial situation. All we gotta do is make sure our updates, i.e., our interpolation, only happens once we have started receiving data over the network.

I’m sure you can figure out how to do that... 😉

Top 10 LoFi 🌌 - beats to distract you from study/work

Vaibhav Sharma — Sat, 11 May 2024 12:30:00 GMT

Just like a lot of people around the world I too rely on LoFi Girl to help boost my productivity. “Lo-fi" is short for "low-fidelity" music which embraces the imperfections of low-quality music production. It acts as an ambient sound just like white noise, and helps you provide a rhythm without being distracting. Here's the YouTube channel "Answer in Progress" explaining the science behind LoFi.

https://youtu.be/OeFujF6LdAM

But the thing with music is that sometimes it's just so damn good that you can't help putting everything aside and just vibing to it, as they conjure beautiful scenarios in your head, that you may or even may not have experienced. I have made a list of my 10 favourite LoFi tracks and tried to put to words the emotions and imagination they inspire in me.

10. dontcry - Redbone

I had no idea that a chill song like Redbone could get even more chill, but this LoFi rendition of Redbone by Childish Gambino proves otherwise. Best served with a side of hot coco and rain on the glass window.

https://youtu.be/4E3eDnbtAT8

9. bits & hits - The Slopes of Blessure

Masterfully created LoFi version of The Slopes of Blessure from The Witcher 3: Wild Hunt [Blood and Wine] Game OST, perfect beats to slay supernatural beasts/play Gwent to.

https://youtu.be/8EyX2o7gH8k

8. GentleBeatz - One With The Wind

With a base sampled from EDEN - rock + roll this LoFi track goes beyond the original, and when the music intensifies at 1 minute 28 seconds, it makes you feel the quote "I know that a life without love is no life at all" sampled at the beginning [from Ever After(1998)].

https://youtu.be/6kVUDvZ1oGg

7. Kinissue & Raimu - Bliss

With a healthy dose of eastern flute, this fusion beat will transport your mind, straight to tranquillity, away from the bustling life of a metropolitan city.

https://youtu.be/2l7Mmn_WUwU

6. Kupla - Lavender

One of the most beautiful LoFi tracks I have ever heard, it's as if the medley of instruments plays on my heartstrings themselves, while i sit at the edge of a small pier on the lake on a breezy spring day.

https://youtu.be/4jit_SPagrI

5. WYS - The Bad Party

Playing this hauntingly melancholic track on a loop is perfect for those sombre moments in life, when you stay up till early morning in winters, staring out the window, contemplating.

https://youtu.be/3hHoJo7ZNGg

4. nymano x Pandrezz - Evening Routine

This beautiful shimmering lo-fi track is the music equivalent of taking an evening walk with your crush on streets reflecting neon signs of the big city in the puddles left on the wet pavement after a storm, with a pleasant petrichor still lingering in the air. The warm, wistful melody perfectly captures that feeling of romantic anticipation and the soft glow of new love against the twinkling city lights.

https://youtu.be/6IlPJ_mBxLQ

3. Bamf - Lost in Kyoto

I have been following the artist Bamf since he had less than 50 subs on his YouTube. I can proudly say he's one of my most rewarding discoveries, he not only makes the music, he adds beautiful little 8-bit GIFs enhancing the aesthetics of his music. And though I love all his tracks, this one takes the cake for my favourite.

It captures the kenopsia of walking down a quiet canal road at late night/early morning, while the mists make eerie shapes as they scatter light on the path illuminated by halogen street lights. An atmospheric track that bottles the surreal solitude of being the sole soul awake in the pre-dawn stillness.

https://youtu.be/nD9-F_FU9PA

2. Plant Guy - Towards The Mountain

This serene yet melancholic track conjures up imagery of sitting in an autumn countryside pasture, watching cows lazily grazing under the golden sun. However, there's an underlying sense of the impending harsh winter, carried through the nippy October winds, hinting at the transient nature of this peaceful seasonal moment.

https://youtu.be/57PcFq4uZ2s

1. sweetbn_ - rowflip

This LoFi track is pure perfection, from the entrancing music to the masterfully edited video. Clips from the film Eternal Sunshine of the Spotless Mind are seamlessly woven together, made even more poignant by sampling a line from the movie itself. The result captures the bittersweet nostalgia of a faded relationship with heartbreaking accuracy. As the melancholic melody washes over you, it kindles hope for the future, like finding solace in a cozy cafe over a cup of pourover, while processing the end of one chapter and the potential start of another.

https://youtu.be/U-9rYC8RPu8

So these were my top 10, did I miss any, what did you think about it, let me know in the comments down below!

Dear Friends: Politics

Vaibhav Sharma — Mon, 06 May 2024 12:30:00 GMT

Do you think any politician deserves our blind loyalty? I don't believe even our closest family or friends warrant that level of devotion. As humans, we are deeply flawed, and our understanding of someone's true motivations is greatly diminished in parasocial relationships, such as those with celebrities, influencers, or politicians. In my opinion, we need not defend every policy decision made by our preferred party, nor should we oppose every action taken by the opposing party.

While I would like to see people behave with more compassion, kindness, and selflessness, I believe we should approach political allegiances rationally and objectively. Rather than aligning ourselves rigidly with a specific ideology, we ought to evaluate each individual step or policy a party takes based on its potential benefits or detriments to society and ourselves. Our voices should be raised in support or opposition accordingly, disassociated from partisan loyalties.

The greatest advantage of this centrist approach is that it prevents others from exploiting our egos and conditioning us to blindly defend every action taken by "our" party. We avoid the trap of grasping at straws to justify misguided policies, and conversely, we remain open to acknowledging positive steps taken by the opposition, rather than reflexively opposing them due to partisan prejudice. As the adage goes,

Don't throw the baby out with the bathwater.

We must accept that no policy will ever please everyone.

Political parties derive much of their strength from unity, making them more resilient to hypocrisy and doublespeak by attributing such failings to a few "bad apples." This deflection becomes far more difficult on an individual level; the moment we begin parroting or defending a party's contradictions, we have surrendered our autonomy to their programming. Likewise, alienating loved ones over their support for an opposing party is to surrender our personal unity – our greatest source of strength.

It is reasonable to distance ourselves from toxic individuals or those engaged in heinous activities. However, cutting ties with others solely over their political affiliations seems misguided and counterproductive. We must acknowledge that, for better or worse, others will never share our precise intellectual and emotional perspectives. Our priorities will inevitably diverge to some degree, no matter how reasoned our arguments are.

While we can endeavour to broaden others' considerations, we will never convince everyone of our viewpoint. Alienating and dehumanizing loved ones through tribalism merely enables politicians to "divide and rule" according to their interests, not ours. History has shown the peril of such divisions; we must resist them at all costs.

Tress of the Emerald Sea — A Very Cosmere Fairy Tale

Vaibhav Sharma — Mon, 08 Apr 2024 12:30:00 GMT

So, diving into “Tress of the Emerald Sea” was like stepping into a different Sanderson universe, right? It’s got this light, fairy-tale vibe that’s not what you’d expect after books like Mistborn or Warbreaker. And Tress, she’s not your typical hero with crazy powers. She’s just super practical and thoughtful, which totally makes sense since she’s used to chilling on her own while washing windows.

Warning: May Contain Mild Spoilers

I totally loved how Sanderson showed us Tress’s uniqueness without making her “the chosen one.” And her dad! Instead of the usual unsupportive parent angle, we get this beautiful moment that really shows why Tress is so full of love and empathy.

It might seem that the person who can feel for others is doomed in life. Isn’t one person’s pain enough? Why must a person like Tress feel for two, or more? Yet I’ve found that the people who are the happiest are the ones who learn best how to feel. It takes practice, you know. Effort. And those who (late in life) have been feeling for two, three, or a thousand different people…well, turns out they’ve had a leg up on everyone else all along.

Empathy is an emotional loss leader. It pays for itself eventually.

It’s refreshing to see a character like Tress who’s confident and self-assured. We’re so used to seeing characters who have to overcome self-doubt, but Tress? She grows without losing herself, and she’s never arrogant because she’s always thinking of others.

Like a firm handshake in human form.

The world-building blew my mind! The spores, the seas, and the whole sciencey feel to it? Genius. And the Crow’s Song? Gave me major “One Piece” vibes. Captain Crow was basically Pirate Alvida in my head, no joke.

Tress would have made an excellent philosopher. In fact, she had already determined that philosophy wasn’t as valuable as she’d assumed — something that takes most great philosophers at least three decades to realize.

For someone new to the Cosmere, seeing Hoid in all his glory was super exciting. It’s tough to dodge spoilers, but man, the theories are flying! And the Dougs, Fort’s quest for his “HUNT,” and the twist with Ulaam being a Kandra? Mind. Blown.

That stupid shapeshifter was enjoying this. I swear, they’ve all been getting weirder ever since Sazed released them.

Okay, the Tosher story might not be everyone’s cup of tea, but hey, variety is the spice of life, right? And the tension with the spores, the sorceress showdown, and that gut-punch with Pakson’s death? Classic Sanderson, keeping us on our toes.

Heroism is often the seemingly spontaneous result of a lifetime of preparation.

I was rooting for Tress to take over the kitchen from the start, and when it finally happened, it felt like a key piece of her journey. And that dragon encounter? Handled with finesse. Plus, the whole Midnight’s Essence thing? As someone with Thalassophobia, that was intense.

Indeed, the path to a life without empathy is a long and painful one, full of bartered humanity sold at a steep discount.

The Phallic Tower being the Sorceress’s spaceship, the “Laptop,” “Tablet,” “Screens,” and “Hacking” stuff? I’m betting they’ll pop up again, maybe in Mistborn Era 3 - Ghostbloods.

Don’t wake me up unless Death himself has shown up, nails in his eyes.

If I had to nitpick, Riian’s motivation was a bit fuzzy, which isn’t like Sanderson at all. But the coolest part? I didn’t hate a single character, not even the baddies. And yes, not to forget the Cosmere Cat! I’m dying to know if they’re different like Loth cats or just regular Earth kitties.

Memories have a way of changing on us. Souring or sweetening over time—like a brew we drink, then recreate later by taste, only getting the ingredients mostly right. You can’t taste a memory without tainting it with who you have become.

So, that’s my take on “Tress of the Emerald Sea.” It’s a book that’s as fun as it is deep, and it’s got that Sanderson magic that makes you think, laugh, and gasp all the way through. What about you? What did you think?

Warbreaker by Brandon Sanderson — Another Cosmere Gem

Vaibhav Sharma — Sun, 24 Mar 2024 12:30:00 GMT

Mistborn The Final Empire was my introduction to Brandon Sanderson's work. And, while it was great, it was a YA Novel at its core, despite having very mature characterizations. Which meant it felt like I would have appreciated it better when I was younger. So, when I started The Well of Ascension I didn't expect it to grow so fast into something more than a mere YA Novel, the Sanderlanche at the end was mind blowing. And then The Hero of Ages quickly and unsurprisingly became one of the best fantasy books I had ever read! But I had no idea how much I would like Warbreaker when I was getting into it, since I had not heard much, if at all, about this book. The book was not token YA at all, rather, it got into mature in themes like sex, metal health, poverty and torture (though none of it is explicit in nature). I believe if the humor lands for you, you'll love this book.

Warning: May Contain Mild Spoilers!

Warbreaker captivated me from the very start with its impeccably paced narrative, striking a perfect balance between suspense and excitement. While the build-up maintained a steady rhythm, it never once felt tedious or drawn-out, keeping me thoroughly engaged throughout.

One of the unexpected delights of Warbreaker was its humor, which consistently brought a smile to my face. The clever wit infused into the dialogue made for delightful reading, adding depth to the characters and the world they inhabit.

You see, the great thing about madness is that it's all in your head.

Speaking of characters, Warbreaker boasts a cast that is both diverse and compelling. Each character's motivations are intricately woven into the narrative, making even the so-called "evil" ones strangely endearing. The twists and turns, particularly surrounding characters like Denth and Tonk Fah, kept me on the edge of my seat, with Brandon Sanderson expertly leading readers down unexpected paths.

I like words. And I always learn a few new ones when Father gets angry. I shouldn't neglect my education, now should I?

While the character development was masterfully executed, there were moments of disappointment, such as the underutilization of Parlin(who was a nod to Link, from The Legend of Zelda Franchise) and the seemingly forgettable nature of his demise. This aspect left me feeling somewhat disillusioned with certain characters, particularly Vivenna.

To Parlin's mind, nothing showed affection like a hunk of something dead and bleeding on the table.

However, the dynamic between Siri and Susebron provided a welcome respite, their interactions brimming with charm and depth. Despite this, I couldn't shake the feeling that Susebron's potential remained largely untapped, leaving me yearning for more exploration of his character.

'That is sarcasm,' Susebron said. 'She is quite fond of it.'

Every scene featuring Lightsong added a layer of brilliance to the narrative, his wit and charisma elevating the story to new heights. His ultimate sacrifice was a poignant moment that left me with goosebumps and tears in my eyes, a testament to the depth of his character and the impact of his actions.

My life to yours. My breath become yours.

Despite its many strengths, Warbreaker is not without its flaws. The ending, in particular, felt rushed, with an excessive amount of exposition crammed into the final chapters. While the revelations were captivating, I couldn't help but wish for a more gradual unfolding of events, allowing readers the opportunity to piece together the puzzle themselves.

Overall, Warbreaker is a captivating tale filled with richly drawn characters and intricate plot twists. While it may not be perfect, its strengths far outweigh its weaknesses, cementing its place as a must-read for fans of epic fantasy.

Use Cloudflare Zaraz to implement Disqus performantly

Vaibhav Sharma — Thu, 14 Mar 2024 12:30:00 GMT

Using Third-Party Embeddings is always taxing on the performance metrics, but none(in my opinion) are as bad as Disqus, or as I call it — The Necessary Evil. It has a million errors & warnings, outdated APIs and is overall a mess! It's so bad that I wonder if Disqus has dropped their entire dev team! I have seen people employ multiple strategies to combat this issue, like clicking to load comments, separate pages for comments, web worker loaders etc.

Web worker loader offloads resource-intensive third-party scripts to a web worker freeing up your main thread for your code.

Out of all these, I found web worker strategies to be the most natural user experience. There are a few web worker providers like Partytown and Cloudflare Zaraz that are mostly preferred.

Prerequisite

This tutorial assumes you already have Cloudflare DNS setup for your Website or Cloudflare is your DNS Provider.

Why did I choose Zaraz over Partytown?

My blog is built with Gatsby JS, which has native support for Partytown. So, you must be wondering why I went with Zaraz, let me tell you, I didn't, at least not at first. I first attempted to implement it with the Gatsby Script API off-main-thread strategy, which is a fancy wrapper on Partytown. But that didn't work out because it was built for Gatsby Cloud primarily, and even though Netlify claims, it supports the redirections required to make it work,(via gatsby-adapter-netlify), I couldn't make it work. And not for the lack of trying, as I wasn't the only one who found this task nearly impossible, given the forum posts, I encountered. This naturally left me with the only available option — Cloudflare Zaraz.

Embedding Disqus

Embedding Disqus has three steps:

Create a <div/> with id "disqus_thread".
Implement a config loading function.
Insert the Disqus embedding JS.

<div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://EXAMPLE.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>

Frontend Code

The first step is easy enough - just add a div to the page where you want the comments. Next, add the disqus_config script to the page where you want the comments, and replace the variables, since I'm using Gatsby, I'll be using Gatsby's Script API, and pass the page URL, identifier and title to it, and push it to production.

import {Script, ScriptStrategy} from 'gatsby'
.
.
.
<>
      <div id="disqus_thread" className="p-3 md:px-0 md:py-5" />

      <Script
        id={id}
        strategy={ScriptStrategy.postHydrate}
        dangerouslySetInnerHTML={{
          __html: `var disqus_config = function () {
            this.page.url = "${url}";
            this.page.identifier = "${id}"; 
            this.page.title = "${title}";
          };`,
        }}
      />

      <noscript>
        <div className="p-3 md:px-0 md:py-5">
          Please enable JavaScript to view the{' '}
          <a href="https://disqus.com/?ref_noscript">
            comments powered by Disqus.
          </a>
        </div>
      </noscript>
</>

Implementing Disqus Script with Cloudflare Zaraz

Go to your project, and then, in the left side panel, click on Zaraz.

The way Zaraz works is you have to create a trigger and attach that trigger to the code you want to insert into your website. There are a few templates, but Disqus is not one of them, so we'll use a Custom HTML Tool to insert it. So click on Custom HTML.

You'll be asked for a few permissions, grant them, and give it a name.

While Zaraz provides a default trigger i.e. Pageview, which loads on every page view, we don't want to load Disqus scripts on every page, so we'll create a new Trigger by going to Triggers tab and clicking on Create a trigger. We'll add two rules to this trigger —

first, that'll identify the page to load the script on, by checking if the URL contains /blog/ (although you can use whatever identifying pattern you want)
and second, that'll check if the user has scrolled enough that we should begin loading the comments, I have used a scroll depth of 50%, you can choose your own. Though I'd recommend at least 10%, or else it sometimes doesn't work.

Then we go to the Third-Party Tools tab and click on Disqus > Edit and add the Trigger Blog view and the Disqus embed.js to it.

This should load Disqus comments on your website using Zaraz.

Diving into The Cosmere Part III: The Hero of Ages Review

Vaibhav Sharma — Mon, 04 Mar 2024 12:30:00 GMT

Warning: May Contain Mild Spoilers!

The last two books were very interesting but I went into this with an irrational fear — what if the ending is not good enough especially for the high bar it had set in past two books, because i have seen multiple times when something starts great but ends up being a dud in the ending. But thankfully it was exactly that — an irrational fear.

As I embarked on the final leg of the Mistborn journey with "Hero of Ages," I was greeted by a familiar yet evolved world — one where Emperor Elend teetered on the edge of becoming a new Lord Ruler, a testament to the complexity of power and its seductive allure.

Despite hearing murmurs about Elend's sudden transformation into an overpowering figure, I found his evolution to be both believable and compelling. Tindwyl's influence in last book and his newfound Mistborn abilities played pivotal roles in shaping him into the formidable emperor he became. Yet, amidst his power, Elend's internal struggles humanized him, adding depth to his character and heightening the poignancy of his relationship with Vin.

The impact of loss reverberated through the narrative, as the deaths of crew members weighed heavily on their comrades. Each character's journey was marked by grief and growth, underscoring the human element at the heart of the story.

Sazed's portrayal of depression was both well-written and realistic, yet at times, it felt overly focused and slowed the pace of the narrative. However, amidst the darkness, Spook's thrilling storyline provided a welcome respite, feeling like a mini-novel within the larger tapestry of the tale.

TenSoon's arc and the exploration of Kandra culture added depth to the world-building, presenting them as distinct entities rather than mere shapeshifters. The nuanced portrayal of characters gaining respect for the fallen Lord Ruler without redeeming his actions struck a delicate balance, adding layers of complexity to the narrative.

Yomen emerged as a worthy adversary, his respectful demeanor adding depth to the conflict that ensued. The divine entities of Ruin and Preservation were masterfully crafted, their lore steeped in meaning and intervention tempered by limitation.

The final stand of Elend and Vin brought tears to my eyes, a testament to the emotional resonance of their journey. And amidst the chaos, Sazed emerged as the true hero of ages, his ascension to godhood a culmination of a beautifully crafted arc.

In the end, "Hero of Ages" delivered a worthy conclusion to the Mistborn trilogy — one filled with grandeur, emotion, and unexpected twists. It was a journey that defied expectations, leaving me awestruck by the sheer brilliance of Brandon Sanderson's storytelling prowess.

Mistborn Era 1 Reviews

The Final Empire Review

The Well of Ascension Review

Diving into The Cosmere Part II: The Well of Ascension Review

Vaibhav Sharma — Sat, 02 Mar 2024 12:30:00 GMT

Warning: May Contain Mild Spoilers!

As I made it clear in my previous review, I really loved the first book in the Mistborn Era 1, though it left me with lingering questions about the ominous warning of Lord Ruler. So, I started the Book 2 immediately.

And the journey continued in "Well of Ascension," where the aftermath of revolution laid bare the complexities of power and the turmoil it leaves in its wake.

The initial chapters painted a vivid picture of the instability and power vacuum created by the revolution — a stark reminder of the consequences of upheaval and change. The impact of Kelsier's death reverberated through the narrative, affecting each member of the crew in profoundly different ways. The deification of Kelsier felt hauntingly realistic, showcasing how legends are born from the ashes of tragedy.

Enter Straff, a brilliantly crafted antagonist whose portrayal felt eerily reminiscent of real-world figures rather than typical fantasy villains. His presence added a layer of depth to the narrative, challenging the traditional notions of good and evil.

However, not all characters resonated equally. Zane's inclusion felt forced, and the attempted love triangle seemed out of place, particularly given Vin's established character. Yet, amidst these missteps, Vin's struggles with anxiety were portrayed with raw authenticity, adding a layer of depth to her character that felt relatable on a personal level.

Elend's journey from idealism to pragmatism struck a chord with me, mirroring the struggles many face when thrust into positions of power. His development was nuanced and realistic, offering insights that resonated deeply with my own experiences.

The politicking in the middle of the book admittedly bogged down the pace, but amidst the quagmire of political maneuvering, characters like Tindwyl shone brightly. Her role in shaping Elend's leadership and her subtle yet powerful relationship with Sazed added layers of depth to the narrative, enriching the story in unexpected ways.

The ending of "The Well of Ascension" surpassed its predecessor in every way. Each death and victory stirred my emotions, while the twists sent chills down my spine. Sazed and TenSoon emerged as new favorites, their character arcs adding richness and depth to the narrative.

Yet, despite its strengths, the uneven pacing remained a notable flaw. The journey truly found its stride in Part 5 of the book, with the payoffs making the earlier struggles worthwhile.

In hindsight, "The Well of Ascension" was a testament to Brandon Sanderson's ability to weave intricate tales of power and personal struggle. It was a journey marked by highs and lows, triumphs and tragedies — a journey that left me eagerly anticipating the next installment in the Mistborn series.

Mistborn Era 1 Reviews

The Final Emire Review

The Hero of Ages Review

Diving into The Cosmere Part I: Mistborn The Final Empire Review

Vaibhav Sharma — Mon, 26 Feb 2024 12:30:00 GMT

Although I love Harry Potter and Lord of the Rings I'm not much of a Fantasy reader; I mostly stick to Sci-Fi books. And though, I had heard a lot about Brandon Sanderson, the sheer number of pages per book and the number of books had made me avoid getting into Cosmere for the longest time. Then somehow I stumbled upon "that Wired article" ('Brandon Sanderson is your God' not gonna provide a link to that hit piece and increase its engagement) insulting Brandon Sanderson, and after reading it, instead of the intended effect, he rather came off as a great guy. So, I decided to dive into Cosmere by following his very own 2024 reading guide.

https://youtu.be/0mC8dsQJK7w

Brandon Sanderson's 2024 Cosmere Reading Order

The Final Empire
The Well of Ascension
The Hero of Ages
Warbreaker
Tress of the Emerald Sea
The Way of Kings
The Alloy of Law
Words of Radiance
Shadows of Self
Edgedancer
The Bands of Mourning
Oathbringer
The Lost Metal
Dawnshard
Rhythm of War
Elantris
Yumi and The Nightmare Painter
The Sunlit Man
Wind and Truth

Warning: May Contain Mild Spoilers!

Entering the world of Mistborn through "The Final Empire" was akin to stepping into a realm where shadows danced with intrigue and despair. At first, the pace felt slow, but the intricate setup of this grim, dark world gradually drew me in, weaving a web of curiosity that I couldn't escape.

The introduction of Kelsier, a troublemaker with layers of complexity, was a highlight. Initially, I saw him as a rebel without a cause, but as the layers of his character peeled away, I found myself captivated by his depth and determination. He became a character I couldn't help but admire.

Vin, too, struck a chord with me. Her portrayal as someone scarred by an abusive childhood resonated deeply, adding a layer of realism to her character that made her journey all the more compelling.

What truly stood out, however, was the dynamic ensemble of characters that comprised the crew. Each member possessed a distinct personality, and as I journeyed alongside them, I found myself becoming intimately familiar with their quirks and motivations. It was as though I could predict their reactions in any given situation — a testament to the author's skill in crafting relatable characters.

The magic system introduced in "The Final Empire" is unparalleled in its complexity and ingenuity. The way each aspect of magic is intricately woven into the fabric of the trilogy as a whole is nothing short of masterful. It adds layers of depth to the story, enriching the world-building and driving the plot forward in unexpected ways.

The portrayal of nobles and skaa felt incredibly realistic, highlighting the stark divide between the privileged and the oppressed. Their contrasting perspectives and prejudices added another layer of complexity to an already richly textured narrative.

Encountering Hoid, a character often spoken of in memes, was a delightfully unexpected surprise — a nod to the interconnectedness of the Cosmere universe.

The inquisitors and the Lord Ruler himself instilled a sense of dread and foreboding, adding a chilling element to the story that sent shivers down my spine.

While the ending of "The Final Empire" felt satisfying, I couldn't shake the feeling that Vin bordered on Mary Sue territory. However, as I delved further into the trilogy, I came to appreciate the deliberate nature of her character arc. It was a subtle nuance that might have been difficult to grasp initially but added depth upon reflection.

And then there's Sazed — an unsung hero whose quiet strength and unwavering loyalty stole my heart.

In hindsight, "The Final Empire" was almost perfect, with its only flaw being a slight dip in pacing in the middle. But even that minor hiccup couldn't detract from the overall brilliance of Brandon Sanderson's storytelling. It was a journey that left me eager to delve deeper into the world of Mistborn, eager to uncover its secrets and unravel its mysteries.

Mistborn Era 1 Reviews

The Well of Ascension Review

The Hero of Ages Review

Healing After Heartbreak: A Guide to Moving Forward

Rishabh Chakrabarti — Sun, 06 Aug 2023 12:30:00 GMT

I know it's tough. I know you're going through a lot.

BUT

I sincerely believe that sharing these points can help someone. I won't bore anyone with a lot of details about my past and my relationship but you can take my word for it that it was tight (but it also had its ups and downs). I didn't breakup, she did. She cheated on me and long distance + COVID + family issues were huge factors.

Succint Points

No contact and kill the hope (it's gone, you have to accept it)
There's tradeoffs - maybe they will go on with their life with different issues in a different relationship and maybe you will go on with your life with different issues in a different relationship. The bottom line is there's always someone out there with a different set of tradeoffs that might interlock better with your criterion
Time is not of essence, the moments are. Someone can make you feel the same stuff in 2 months that a person can make you feel in 4 years
Forgive them, don't go into the revenge mindset. Thinking about anything vengeful, thinking about karma and how karma will take its revenge and stuff is also futile. Indifference is the key
Don't be ashamed of therapy - it helps make you feel better (especially if you've been cheated on). They will help validate some of the feelings you have and push you to not victimize yourself
Having a really good support system - Friends, family, girlfriends anyone who can make you feel better. For me it was mainly my new girlfriend, friends and then family (in descending order of helpfulness)
Delete those photos, delete those chats, delete the memories that take you back. Take that bitter pill because it'll help you a hell lot
Take that vacation, seeing the same set of faces can fuck you up. For me, it was taking a trip back to my parents' place and I met my current gf there
Time will heal you and make it better. Shit happens. Shit happens to everyone. You are not alone. Never ever think that
Insta reels about breakups and stuff can help, but ...... eh
Learn something new - I learnt bike riding. Helped out a lot. I went on treks. I just said yes to all outings
It always helps to understand that there's worse that could've happened. I could've been married and then found out that she is a cheater. I'm happy that I failed faster. Thank your lucky stars that it ended. Even if it's your fault, believe that whatever has happened, has happened for the good
Rebound or no rebound doesn't matter. Don't start a new relationship with any agenda. Just let it flow and believe that it'll be different. Don't go looking for patterns that match with your ex. Let it be fresh - like you're going through a different journey altogether
Don't try to victimize yourself, don't get addicted to the sadness. Don't think that you need to be in mourning for a certain period of time. Your life doesn't have to be that same old depressing movie. At a certain point, you need to snap out of it and make space for something better

Conclusion

All in all I would say one thing to end this already long post. Try and cope up with it healthily. Try to not let it affect your present. I know it's a lot of philosophy, it may/may not help you, but I am telling you with complete confidence that there's nothing to be ashamed of. There's nothing to be afraid of and you are not alone. Have faith that your future is going to be better. There's plenty of fish in the sea.

Upgrading My Blog to Gatsby v5 with TypeScript and Tailwind CSS

Vaibhav Sharma — Tue, 01 Aug 2023 12:30:00 GMT

When I first started this blog, I was among the early adopters of Gatsby JS, a static site generator that allowed me to create blazing-fast websites with React and GraphQL. However, in those early days, Gatsby was still evolving, and the plugin ecosystem was not as mature and stable as it is today. As each new release brought improvements, it also brought its fair share of challenges. Nonetheless, I persevered, learning from issues that arose and helping others in the process.

By the time I released version 2 of my website using Gatsby 3, the platform had significantly matured, and it offered more stability and features. However, one crucial aspect was missing - TypeScript support. It was time to address this limitation and make my codebase more robust.

The Journey Begins: Moving to TypeScript and Tailwind CSS

I decided to embark on a journey to upgrade my blog to Gatsby v5 and integrate TypeScript support. But before that, I needed to address some design aspects of the blog. My existing CSS toolkit, Tachyons, served me well, but it seemed to have been abandoned. Tailwind CSS, which had gained tremendous popularity, offered similar benefits without complex setup requirements.

To eliminate bloat and unnecessary dependencies, I decided to rewrite my codebase from scratch, retaining only the Markdown pages from the previous version. I started by generating a new Gatsby project with TypeScript, Tailwind CSS, and Netlify CMS. This fresh foundation would set the stage for a cleaner and more efficient blog.

Revamping Styling with `shadcn/ui`

To maintain consistency in styling and ensure future extensibility, I sought out a suitable component system. After exploring various options, I settled on shadcn/ui, a flexible framework that generates component files, allowing for infinite customization possibilities. This choice provided the perfect balance of convenience and control, saving me the trouble of designing a new component system from scratch.

Improving User Experience: Pagination and Search Functionality

Before diving into styling, I prioritized implementing pagination. The plugin I previously used for this feature, gatsby-paginate, had been abandoned. Instead of relying on outdated code, I decided to write my pagination functionality from scratch, providing a tailored solution that better suited my needs.

Moreover, the search functionality on my blog required enhancement. With the previous @gatsby-contrib/gatsby-plugin-elasticlunr-search plugin now abandoned, I integrated Lunr search using gatsby-plugin-local-search, a powerful JavaScript-based search engine. This upgrade improved the search experience for my readers and ensured they could easily find the content they were looking for.

Removing Excess Features and Embracing New Ones

As part of this migration process, I reevaluated the features present on my blog. I decided to remove certain elements that were either outdated or posed more problems than benefits. Among the features I discarded were:

Site-wide branding with config.js: To maintain branding consistency across the site i was using a config.js file but removed that in favor of react-i18next as it was a dual purpose solution.
Embedding support for various services: I streamlined the embedded content to avoid clutter and improve loading times.
Offline support: While it sounded good on paper, I found that offline support created more issues than it resolved, so I decided to drop it.
Cookie consent: The previous cookie consent implementation was unreliable, so I removed it in favor of a better user experience.
Web Vitals tracking: Cloudflare's Real User Monitoring (RUM) already handled this aspect efficiently.
Google Tag Manager (GTM): I wanted to implement it using partytown support that Gatsby Script API provides, so I experimented with off-main-thread strategies for GTM integration, but turns out the redirects didn't work on netlify, so removed it in favor of Cloudflare Zaraz.
Newsletter form: Simplified my approach by removing the newsletter form, reducing maintenance overhead.

Introducing New Features and Enhancements

Amidst the removal of unnecessary features, I also introduced some exciting new additions to my blog:

Site-wide branding using react-i18next: This allowed me to make a base to provide multilingual support in future while still acting as a one stop config hub.
Automatic Dark mode: Catering to the growing trend and preferences for dark mode, I incorporated this feature to give users more control over their reading experience.
Cloudflare Zaraz: By integrating Zaraz, I gained more granular control over tracking and analytics on my blog, without blocking main thread.
Contact form using react-hook-form and validation with zod: To ensure a smoother experience for users interacting with the contact form, I migrated from Formik to react-hook-form, and for validation, I switched from yup to zod.
Licensing changes: I made licensing more explicit, separating licenses for posts, the code within them, and the Gatsby website. Thanks @dan_abramov
Typescript and GraphQL type generation: Adding TypeScript support allowed for better code maintenance and provided improved type safety. Additionally, GraphQL type generation further enhanced the development workflow.

Optimization and Bloat Removal

One of the primary goals of this migration was to optimize performance and eliminate bloat. I meticulously reviewed each part of the website, optimizing queries, removing unused packages, and employing best practices to enhance loading times and overall user experience.

Conclusion

The journey of moving my blog to Gatsby v5 with TypeScript was both challenging and rewarding. By adopting the latest features and shedding unnecessary baggage, I was able to create a more efficient, better-performing, and future-proof blog. Embracing TypeScript and enhancing the design with Tailwind CSS streamlined the development process, making it more enjoyable and maintainable.

As the web continues to evolve, so will my blog. I look forward to exploring new technologies, optimizing performance, and delivering valuable content to my readers while staying true to the core principles of simplicity and efficiency. So, welcome to the new and improved blog - fast, functional, and ready to engage!

Why Mario 64 speedrun record cannot be broken

Vaibhav Sharma — Sat, 29 Jul 2023 12:30:00 GMT

Speed-running is the act of playing a game to complete it as fast as possible, usually with the help of sequence breaking and glitches. Among the myriad retro games that have captured the hearts of gamers, Super Mario 64 stands as a timeless classic with a speedrun record that seems destined to remain unbroken. In this blog post, we delve into the fascinating story of how a cosmic fluke forever altered the course of Mario 64's speed-running history.

DOTA_Teabag, a prominent figure in the speedrunning community, embarked on a quest to break Mario 64's speedrun record. Little did he know that fate had something extraordinary in store for him. While live streaming his run on Twitch, an unimaginable glitch transported Mario to a higher part of the level. This unprecedented occurrence meant that DOTA_Teabag had inadvertently set an unbreakable speedrun record for the beloved game.

What caused this freakish glitch that altered Mario's trajectory and bestowed him with an unattainable advantage? The answer lies in a phenomenon originating from the depths of outer space: cosmic rays. Cosmic rays are high-energy particles, primarily protons and atomic nuclei, that zoom through the universe at incredible speeds.

Mario 64, like all computer-based systems, relies on binary code, with data represented by sequences of 0s and 1s. Even the tiniest alteration to this binary data can lead to significant changes in the program's behaviour, known as "bit flipping". Herein lies the crux of the matter—when a cosmic ray collides with a computer's memory, it can cause a single-bit change, leading to unexpected results.

In DOTA_Teabag's case, an elusive cosmic ray struck the computer at just the right moment and the perfect location, causing a single-bit change to Mario's height value. This unforeseen alteration launched the Italian plumber skyward through the level, bypassing obstacles and achieving an unparalleled speedrun time.

The chances of such an event occurring are astronomically low, making DOTA_Teabag's achievement nearly impossible to replicate intentionally. The alignment of celestial forces, the precise timing of the cosmic ray, and the exact location it hit the computer all converged to create the unbeatable speedrun record.

The captivating world of speedrunning is filled with tales of triumphs and failures, pushing the boundaries of what seems humanly possible. Within this realm, Mario 64's unbreakable speedrun record stands as a testament to the unforeseeable power of cosmic rays and the intricacies of binary code. DOTA_Teabag's journey unwittingly intertwined with celestial forces, forever solidifying his place in gaming folklore. As the speedrunning community continues to strive for perfection, the tale of Mario 64's cosmic glitch serves as a reminder that, at times, the universe itself can intervene in the pursuit of gaming greatness.

Migrating From WebStorm to VS Code

Vaibhav Sharma — Mon, 24 Jul 2023 12:30:00 GMT

As we all know, all the cool devs have to have a few things - No Social Life, VS Code and crippling coffee addiction. I figured the only thing left for me to become a cool dev like rest of you guys, was to use VS Code. But let's take a step back and talk about why I hadn't jumped on the VS Code train...yet!

Why I use WebStorm(and other JetBrains IDEs)

Back in my uni days, as a fresh-faced coder diving into Android development, I was stuck with Eclipse - and let's just say it was a total mess. But then, like a shining beacon, Android Studio came along and saved the day. That was my first taste of JetBrains IDEs, and man, was I hooked! As I ventured into Python, PyCharm became my go-to. The best part? My college email ID got me free access to all their products - score! So when it was time to tackle React, I naturally landed on WebStorm, and it's been my ride-or-die ever since.

What I like about WebStorm(and other JetBrains IDEs)

Let me tell you, the code completion, auto import, and code refactoring in WebStorm are straight-up unmatched! The auto-format feature (⌘ + ⌥ + L) and the import optimization (^ + ⌥ + O) are gifts from the coding gods! Every time I fired up the IDE, it showered me with useful tips and best practices, making me a better coder by the day. Learning new stuff, whether it's React or TypeScript, felt like a breeze. And Git? Oh boy, WebStorm made it feel like child's play. No wonder I never looked at other editors like Atom or VS Code when they launched - if it ain't broke, don't fix it, right?

Why I Decided to Give VS Code a Shot

Recently my M2 MacBook Air's screen started to show horizontal lines(seems like they haven't fixed the display hinge issues plaguing the MacBooks since 2016), fortunately, it was fixed under warranty, but unfortunately, it meant that I had no (properly working) machine for a week, so I had to borrow my brother's gaming laptop to work. And since I didn't want to install too much gunk on my brother's laptop I decided to keep things light and installed just the basics - Docker, Node JS, and VS Code. Surprisingly, even with resource-intensive projects like Docker and Next JS, VS Code's memory usage was significantly lower than WebStorm's. This, combined with the allure of trying something new, sparked my interest in making the switch. Armed with the Gryffindor spirit, I embarked on the journey of learning VS Code, integrating Tailwind CSS, and transitioning my Gatsby code to TypeScript, embracing challenges head-on.

The Roadblocks I Faced

The first big problem was of course keybindings, which was expected as I had been using WebStorm for almost a decade, and the unreliable code completion, lack of advanced refactoring, auto-formatting, and snippets were also huge hurdles. And let's not forget Git support - decent, but not as smooth as WebStorm's. But the biggest problem was debugging with launch.json. Let me explain, WebStorm has a way of detecting npm scripts, chaining them, choice of using yarn or npm. Whereas the auto-configuration of VS Code was severely lacking, and I really didn’t wanna learn what seemed like a substantial set of commands to write launch.json. What’s worse is that when I generate launch.json the comments say to learn about the command with IntelliCode but the problem with IntelliCode is that it doesn’t always trigger for some reason.

How I Tackled the Challenges

TL;DR: Extensions, lots of extensions...

The first big hurdle, keybindings, was easy to overcome, there’s an extension for it, IntelliJ IDEA Keybindings. Actually, most hurdles were easy to overcome using extensions, almost every problem I could think of had an extension that solved it(mostly) -IntelliCode, Auto Rename Tags, JS Codeformer, ES7+ React/Redux/React-Native snippets etc Adding the keybindings along with ESLint, Prettier, made auto format accessible. And Git Lens enhanced the Git support and made it relatively powerful.

Debugging with `launch.json`

Okay, I won't lie - no magical auto-configuration here. But the community had my back! Shoutout to fellow devs who shared their launch.json setups for Vite, Next JS, and Gatsby. With a little tweaking, I was back on track.

Next JS

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Dev",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "run",
                "dev"
            ],
            "cwd": "${workspaceFolder}",
            "serverReadyAction": {
                "pattern": "🚀 started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            },
            "preLaunchTask": "devTasks"
        },
        {
            "name": "Build",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "run",
                "build"
            ],
            "cwd": "${workspaceFolder}",
            "preLaunchTask": "devTasks"
        },
        {
            "name": "Start",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "run",
                "start"
            ],
            "cwd": "${workspaceFolder}",
            "serverReadyAction": {
                "pattern": "🚀 started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            },
            "preLaunchTask": "startTasks"
        },
    ],
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "clean",
            "type": "shell",
            "command": "yarn run clean",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "lint",
            "type": "shell",
            "command": "yarn run lint",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "build",
            "type": "shell",
            "command": "yarn run build",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "devTasks",
            "dependsOrder": "sequence",
            "dependsOn": [
                "clean",
                "lint"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "startTasks",
            "dependsOrder": "sequence",
            "dependsOn": [
                "clean",
                "lint",
                "build"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
    ]
}

Gatsby JS

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Gatsby Develop",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/.bin/gatsby",
            "args": [
                "develop"
            ],
            "env": {
                "PARCEL_WORKERS": "0",
                "GATSBY_CPU_COUNT": "1",
            },
            "runtimeArgs": [
                "--nolazy"
            ],
            "console": "integratedTerminal"
        },
        {
            "name": "Gatsby Build",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/.bin/gatsby",
            "args": [
                "build"
            ],
            "env": {
                "PARCEL_WORKERS": "0",
                "GATSBY_CPU_COUNT": "1",
            },
            "runtimeArgs": [
                "--nolazy"
            ],
            "console": "integratedTerminal",
        },
        {
            "name": "Gatsby Serve",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/.bin/gatsby",
            "args": [
                "build"
            ],
            "env": {
                "PARCEL_WORKERS": "0",
                "GATSBY_CPU_COUNT": "1",
            },
            "runtimeArgs": [
                "--nolazy"
            ],
            "console": "integratedTerminal",
            "preLaunchTask": "clean",
            "postDebugTask": "serve"
        },
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "clean",
            "type": "shell",
            "command": "yarn run clean",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "lint",
            "type": "shell",
            "command": "yarn run lint",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "serve",
            "type": "shell",
            "command": "yarn run serve",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
    ]
}

Vite

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Develop",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "run",
                "dev"
            ],
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "smartStep": true,
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        },
        {
            "name": "Build",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "node",
            "runtimeArgs": [
                "${workspaceFolder}/node_modules/vite/bin/vite.js",
                "build",
                "--mode",
                "development"
            ],
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "smartStep": true,
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        }
    ]
}

Final Verdict

Was it worth it?

The transition to VS Code has been rewarding. I appreciate its lightness and extensibility, and though I occasionally miss WebStorm's features out of habit, I don't find myself lacking. As for neural networks and ML projects, I'm yet to explore VS Code's capabilities fully and see if it can replace my beloved PyCharm.

Will I stay

Indeed, I plan to stick with VS Code. While JetBrains Fleet was an option, the free, battle-tested, and well-supported VS Code was a more natural fit for my needs. Although launch.json remains a concern, the overall experience has been positive, making the switch well worth it.

Fahrenheit 451: An Alternate Perspective

Vaibhav Sharma — Sat, 18 Sep 2021 12:30:00 GMT

Yesterday I finished reading the book Fahrenheit 451, oh wait did I say finished reading, more like, completed listening to the audiobook narrated by Tim Robbins. Yes, I’m a Neil DeGrasse Tyson certified badass who listens, instead of reads, a book that is all about the dangers of abandoning reading literature.

Fahrenheit 451 (or 232.778C in non retard units) is the temperature at which paper is said to self ignite, which is central to the story. The book is about a fireman, Guy Montag, and set in a dystopian future where houses are fireproof. So, the firemen get repurposed to burn illegal books instead, to maintain social stability. Until he meets an eccentric girl, Clarisse, who teaches him the joys of being a weirdo. The book emphasises on the dangers of censorship, consumption of mass media over books. It argues that doing so will leave us half dead half alive in our essence, just like the mechanised dog that hunts criminals, the mechanised snake that pumps stomach and Mildred Montag (Guy Montag's wife) who’s your average millennial/gen-z kid buried in her iPad and AirPods. The book is very unsettling at times, is overall peppered with great ideas and makes us question whether the media most of us consume now, is just superficial. Also, the book predicted earphones, interactive media, ATMs etc. with eerie accuracy. It's no doubt a great read but what bugs me is that the book pretends to be about book burning and censorship but is actually mostly about shitting on new technologies at its core. But why?

Ray Bradbury, since childhood, was obsessed with books but didn’t have the means to attend college after his high school ended. So, he took what he had and made the most of it by spending as much time as he could at the Los Angeles Public Library. He used to be pissed that the library didn’t stock science fiction novels like those of H.G. Wells, as they were deemed not literary enough. That and learning about the destruction of the Library of Alexandria made a great impression on little Ray. Also, his early life saw the Golden Age of Radio. And then, during the McCarthy era, the government started interfering with artists and creative kinds, all the while the world was transitioning to the Golden Age of Television, leading to the creation of the book Fahrenheit 451 on a typewriter that cost 20 cents an hour to rent.

Now forgive me for my ignorance but, I never found Tim Robbins to be significant enough to recognise by name, even though I have seen Shawshank Redemption. That and the fact that his voice seemed awfully similar to Norm McDonald’s, made it more hilarious than the author intended it. It certainly didn’t help on how fuckin preachy and on the nose the writing itself was at times. The writing was clearly influenced by George Orwell but lacked the subtlety and complexity of his work. It read like a fanfiction of 1984 about kids these days, which is ironic since George Orwell famously once said ―

Every generation imagines itself to be more intelligent than the one that went before it, and wiser than the one that comes after it.

― George Orwell

Fuckin’ teenagers with their Radio and TV!

Generational labels get created to provide an order to our generally messy history and explain the concerned disappointment with the youth. This hate/disappointment for the youth is timeless with examples dating as far back as times of Aristotle, 4th century BC. And as is the tradition there’s always a relevant XKCD comic for any situation. This inaccurate, exaggerated and sensational characterisation of young people is called Ephebiphobia. But the sentiments of distaste and/or fear of the social culture associated with young people is perhaps better described by the term Juvenoia. Perhaps, fuelled by the way our memories are notoriously affected by emotions of the time, making them less than reliable. But surely things are way worse than they were back in the good ol’ days, right? There’s no depth beneath the superficial stimulation of modern media, right?

Popular science author and media theorist Steven Johnson argues that entertainment can now be made for all sorts of audiences to scratch all sorts of itches, with high rewatch value, encouraging discussion in online forums thus adding an intellectual level of depth that was never possible before. The complex web of names, relationships and events that people today have to keep straight in their heads to be socially aware consumers of mass media is impressive by historical standards. The time Ray Bradbury wrote his now-famous book about the dangers of mass media, it didn’t even have that much mass anyways. The steep rise in the consumption of mass media and interactive video games grew so much during the 90s that writer and media theorist Douglas Rushkoff coined the term Screenagers. Last year, Netflix took interactive storytelling to new levels with its production ― Black Mirror: Bandersnatch. But what if books were invented after interactive storytelling options like the internet, video games and choose-your-own-ending movies?

That’s exactly what was explored by Steven Johnson in his book ― Everything Bad is Good for You. He imagines a world where kids everywhere are starting to read these new trendy things ― books, causing the concerned parents and teachers to argue the following ―

"Perhaps, the most dangerous property of these books is the fact that they follow a fixed linear path. You can't control their narratives in any fashion. You simply sit back and have the story dictated to you. For those of us raised on interactive narratives, this property may seem astonishing. Why would anyone want to embark on an adventure utterly choreographed by another person? But today's generation embarks on such adventures millions of times a day. Reading is not an active participatory process, it's a submissive one. The book readers of the younger generation are learning to follow the plot instead of learning to lead."

What if narcissistic selfies, memes and woke-ness are the most human things to do that we have yet discovered? After all, if historical trends are any indication then it’s pretty evident that we have only progressed as humans ― crimes committed by young people have decreased, academic proficiency has increased, hate comments have decreased etc. Then why is it that Juvenoia still persists? I mean it makes sense biologically ― after all, parents were a genetic success for the species, they produced a future generation, so, it makes sense for them to have a bias towards the way they were raised. Maybe worrying about the future generation might have been natural selection as well, just like walking or breathing. But whatever may be the reason, whether we apply memories of our good ol' days fairly and rationally or not, the thing that breeds greatness isn’t a particular method, but time. The same H. G. Well’s books that were not considered literary enough in Bradbury’s times are now considered some of the greatest pieces of sci-fi literature ever produced. So when it comes to cheap laughs and superficial pop songs, I’m reminded of renowned Spanish essayist, Miguel de Unamuno, who once put it as ―

"More often I have seen a cat reason than laugh or weep. Perhaps it weeps or laughs inwardly. But then perhaps, also inwardly, a crab resolves equations of the second degree."

― Miguel de Unamuno

That being said, I’d still recommend everyone to at least once read the book Fahrenheit 451, because beyond all the hate I spewed about technophobia in this article, it truly is a great story, we can all learn from it. Once immersed the reader will truly feel every emotion and dilemma that the protagonist faces, and perhaps a few more that weren’t put to words.

Basic Serverless Typeahead Search with Cloudflare Workers

Vaibhav Sharma — Fri, 12 Mar 2021 12:30:00 GMT

Typeahead search progressively searches and filters as the user types his/her query. It’s also called predictive search, incremental search or search-as-you-type and is an important feature of most search engines. In this tutorial, we’ll learn to make a very basic version of a Pokémon Typeahead Search using Cloudflare Workers and React. Cloudflare provides generous 100,000 requests per day in its free plan, making it perfect for an API like this.

Setup Cloudflare

We begin by signing up for a Cloudflare Workers account at workers.cloudflare.com.

In the onboarding screen, select a unique subdomain for our workers.

Installing Wrangler

To get the most out of Cloudflare Workers we need to install Wrangler CLI using yarn or npm.

yarn global add @cloudflare/wrangler

Next we login to our Cloudflare Account with Wrangler CLI

wrangler login

This will open up a page on your browser where you can authorise the wrangler.

If it doesn’t work, you can manually log in using the config command and following the prompted instructions.

wrangler config

Setup A Worker Project

Wrangler CLI lets you set up a Cloudflare Worker project easily, as well as allows you to use Templates.

We’ll be using the TypeScript template for our project. To set it up just use the following command.

wrangler generate search-api https://github.com/cloudflare/worker-typescript-template

Next, navigate to the project and open it using your favourite IDE and we can start writing the serverless code.

But, before we begin to write our API, we need to add our accound_id in the project’s wrangler.toml file, as prompted while generating the project.

Writing the API

For our search to work there needs to be an index where our data is stored, here we’ll be using a JSON File of all the Pokémons and their ID, that I generated using PokeAPI.

[
  {
    "name": "bulbasaur",
    "id": 1
  },
  {
    "name": "ivysaur",
    "id": 2
  },
  {
    "name": "venusaur",
    "id": 3
  },
  {
    "name": "charmander",
    "id": 4
  },
  .
  .
  .
  {
    "name": "eternatus-eternamax",
    "id": 10217
  },
  {
    "name": "urshifu-single-strike-gmax",
    "id": 10218
  },
  {
    "name": "urshifu-rapid-strike-gmax",
    "id": 10219
  },
  {
    "name": "toxtricity-low-key-gmax",
    "id": 10220
  }
]

You can download and add it to the project’s src folder as pokedex.json.

But we can’t directly import a JSON module to our typescript file, for that we need to add the following to the project’s tsconfig.json file.

"resolveJsonModule": true,

Now let’s open our handler.ts file and start writing our API. We begin by importing our Pokémon Index file.

import pokedex from “./pokedex.json”

Next, we get the pathname and query-string parameter from the Request object.

const {pathname, searchParams} = new URL(request.url)

Then we check if the pathname is correct, else we respond with a 404 error.

if (pathname === “/search”) {

} else return new Response("", {
   status: 404,
   statusText: "Path Not Found!"
   headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET',
   },
})

And if the path is correct, we extract the exact query params we need to process our search:

const query = searchParams.get(“q”)

Now, we write the filter for the Pokémons according to our query.

const d = pokedex.filter(
   (pokemon) =>
       pokemon.name.toString().toLowerCase().includes(query.toLowerCase()) ||
       pokemon.id.toString().toLowerCase().includes(query.toLowerCase()),
)

Finally, we return the stringified results in our Response object along with CORS headers.

return new Response(JSON.stringify(d), {
   headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET',
   },
})

Completed code should look like this:

import pokedex from './pokedex.json'


export async function handleRequest(request: Request): Promise<Response> {
 const { searchParams, pathname } = new URL(request.url)
 
 if (pathname === '/search') {
   const query = searchParams.get('q') || ''
   
   const d = pokedex.filter(
     (pokemon) =>
       pokemon.name.toString().toLowerCase().includes(query.toLowerCase()) ||
       pokemon.id.toString().toLowerCase().includes(query.toLowerCase()),
   )

   return new Response(JSON.stringify(d), {
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET',
     },
   })
 } else return new Response('', {
     status: 404,
     statusText: 'Path Not Found!',
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET',
     },
   })
}

Debugging and Publishing

Since this project is made with TypeScript we cannot directly run or publish it, for that we need a bundler like Webpack, which is preconfigured in the template we used.

To debug locally, we need to first run the dev script to compile the typescript.

yarn run dev

Then, we run the wrangler dev command.

wrangler dev

This should run the script on our localhost, where we can test it out by entering the following URL in our browser.

http://127.0.0.1:8787/search?q=pika

Which should return a list of all the entries for Pikachu in our index.

[
  {"name":"pikachu","id":25},
  {"name":"pikachu-rock-star","id":10080},
  {"name":"pikachu-belle","id":10081},
  {"name":"pikachu-pop-star","id":10082},
  {"name":"pikachu-phd","id":10083},
  {"name":"pikachu-libre","id":10084},
  {"name":"pikachu-cosplay","id":10085},
  {"name":"pikachu-original-cap","id":10094},
  {"name":"pikachu-hoenn-cap","id":10095},
  {"name":"pikachu-sinnoh-cap","id":10096},
  {"name":"pikachu-unova-cap","id":10097},
  {"name":"pikachu-kalos-cap","id":10098},
  {"name":"pikachu-alola-cap","id":10099},
  {"name":"pikachu-partner-cap","id":10148},
  {"name":"pikachu-gmax","id":10190}
]

Once satisfied, we can build and publish it to our account using Wrangler CLI.

To build in production mode, run the build script.

yarn run build

Then, run the publish command.

wrangler publish

Finally, the backend part of this project is complete and we can access the live API from the browser, it should be something like this.

https://search-api.<your-subdomain>.workers.dev/search?q=pika

Frontend

Although the API we made earlier is front-end agnostic, I’ll be bootstrapping the web app using Create React App.

yarn create react-app search-app --template typescript

We’ll begin by removing App.css, App.test.ts, index.css and logo.svg (don’t forget to remove the index.css import from index.tsx file).

To demonstrate the API I'll be using Gestalt, a React Component Library by Pinterest and Axios to fetch the data from the API, let's add it to our project.

yarn add axios @types/gestalt@19.2.0 gestalt@19.2.2

Next, we add the Gestalt CSS file to our index.tsx

...
import "gestalt/dist/gestalt.css"
...

Then in the App.tsx file, we delete the pre-existing code, make it a fresh React Function Component and add the following code for our Search Field.

import React from 'react';
import {Box, Container, SearchField} from "gestalt";

const App: React.FC = () => {
   return (
       <>
           <Container>
               <Box flex="grow">
                   <SearchField
                       accessibilityLabel="Search"
                       placeholder="Search"
                       id="search"
                       onChange={({value}) => console.log(value)}
                   />
               </Box>
           </Container>
       </>
   );
};

export default App;

Next, we begin to build our search function by importing axios and useState, useCallback Hooks and adding the search function to the onChange attribute of Search Field.

import React, {useCallback, useState} from 'react';
import {Box, Container, SearchField} from "gestalt";
import axios from "axios";


const App: React.FC = () => {
   const [results, setResults] = useState([])

   const search = useCallback((query) => {
       axios
           .get(`${process.env.REACT_APP_SEARCH_API}/search?q=${query}`)
           .then(res => {
               const pokemons = res.data
               setResults(pokemons)
           })
           .catch(err => {
               console.error(err)

               setResults([])
           })
   }, [])

   return (
       <>
           <Container>
               <Box flex="grow">
                   <SearchField
                       accessibilityLabel="Search"
                       placeholder="Search"
                       id="search"
                       onChange={({value}) => search(value)}
                   />
               </Box>
           </Container>
       </>
   );
};

export default App;

Note that we are using an environment variable for our API, that’s just for ease but you can hard code the API if you like.

Finally, we write the code to display our results.

import React, {useCallback, useState} from 'react';
import {Avatar, Box, Container, SearchField, Text} from "gestalt";
import axios from "axios";


interface IPokemon {
   id: number,
   name: string
}

const App: React.FC = () => {
   const [results, setResults] = useState([])

   const search = useCallback((query) => {
       axios
           .get(`${process.env.REACT_APP_SEARCH_API}/search?q=${query}`)
           .then(res => {
               setResults(res.data)
           })
           .catch(err => {
               console.error(err)

               setResults([])
           })
   }, [])

   return (
       <>
           <Container>
               <Box flex="grow">
                   <SearchField
                       accessibilityLabel="Search"
                       placeholder="Search"
                       id="search"
                       onChange={({value}) => search(value)}
                   />
               </Box>

               {results.length
                   ? <Box paddingY={2}>
                       {results.map((pokemon: IPokemon) => {
                           const pokemonName = pokemon.name
                           const pokemonImage = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`

                           return <Box key={pokemon.id} borderStyle="sm" marginBottom={2} rounding="pill" padding={2}
                                       alignItems="center" display="flex">
                               <Box paddingX={2}>
                                   <Avatar
                                       name={pokemonName}
                                       src={pokemonImage}
                                       size="xs"
                                   />
                               </Box>
                         
                               <Box paddingX={2} flex="grow">
                                   <Text color="darkGray" weight="bold">
                                       {pokemonName.toUpperCase()}
                                   </Text>
                               </Box>
                           </Box>
                       })}
                   </Box>
                   : null}
           </Container>
       </>
   );
};

export default App;

The results should look something like this.

We can deploy the react app with Cloudflare Pages or with Cloudflare Workers as well.

The Monk Who Accidentally Saved India

Vaibhav Sharma — Tue, 26 Jan 2021 12:30:00 GMT

Today is the 71st Republic Day of India as on this day, year 1950, The Constitution of India came into force. But in this long journey, there came a time when India almost came to the brink of becoming a totalitarian regime. And then, came an unwitting, unlikely saviour, who rescued the Indian Democracy, a Monk, Swami Kesavananda Bharati. In 1973, 13 Judges assembled to deliver the verdict on the most important case of Indian History, Kesavananda Bharati vs The State of Kerala, which enforced the Basic Structure Doctrine. Last year, on September 6th, he crossed this realm of existence and I wanted to commemorate his legacy on this historic day.

Kesavananda Bharati vs The State of Kerala was the culmination of a series of serious clashes between The Judiciary and The Indira Gandhi Government. It all started in 1967 when the Indira Gandhi government received the first blow after, The Supreme Court of India, gave a verdict in the Golak Nath case that parliament could not amend Fundamental Rights. Two years later, Indira Gandhi government received a second blow when her decision to nationalise the private banks of India was struck down by the Supreme Court. And finally, a year later in 1970, Indira Gandhi’s decision of abolishing Privy Purse was again struck down by the Supreme Court. Being out-powered by The Judiciary, in three separate rulings, all of them argued by lawyer Nanabhoy Palkhiwala, Indira Gandhi was determined to cut the Indian Courts to sizes. So, she introduced a series of constitutional amendments that nullified the Golak Nath, Bank Nationalisation and Privy Purse judgements. These amendments gave the Parliament unlimited powers to alter or even abolish any Fundamental Rights promised by The Constitution.

Enter Swami Kesavananda Bharati, the Shankaracharya(Head Monk) of the Hindu monastery called Edneer Mattha in Kerala. In February 1970, he filed a petition to challenge the Kerala Government’s attempt to impose restrictions on the management of the Monastery property, under two land reform acts. Nanabhoy Palkhiwala took this as an opportunity and convinced Swamiji to file this petition under Article 26, The Right to Manage Religious Property without Government Interference. Thus began the legal battle that quickly took on serious political overtones. The case was heard for 68 days by the largest ever Constitutional Bench of 13 Judges. The amount of effort that was put for this case was breathtaking with hundreds of cases cited and provisions of the Constitution of more than 50 countries compared!

The Judicial Bench was split right down the middle at 6:6 until the 13th judge, Justice H. R. Khanna added his support to Basic Structure Doctrine. Thus Indian Democracy was saved by a wafer-thin margin of 7:6 majority. And while Swami Kesavananda Bharati, received no relief in the case, the judgement introduced the Basic Structure Doctrine, which introduced a major Check to the power of The Parliament to make drastic changes to the core values of The Indian Constitution, like secularism and federalism. Now this all may sound very dramatic and movie-like but it happened. Though unfortunately, it didn’t end there...

Indira Gandhi didn’t take kindly this verdict, and she promoted Justice A. N. Ray, who was the most vocal among the dissenters in the bench, to the Chief Justice of India, superseding three senior Judges, which was unprecedented in Indian Legal History. And by the time the infamous Emergency of 1975 was declared, 8 new judges had been appointed to The Supreme Court. What preceded was a (not-so)shocking attempt by Chief Justice Ray to review the Kesavanada Bharati decision, setting up a 13 Judge Bench. Again Nanabhoy Palkhiwala gave, what is now regarded as, one of the finest advocacy hearings in the history of India. But, as we say in India “Satyamev Jayate” (Truth Alone Triumphs) the Bench was dissolved within 2 days, as it was discovered that no one had filed a review petition.

Few amazing things about this cornerstone case are:

Though it was a landmark case, Swami Kesavanada Bharati lost his case as The Supreme Court upheld the land reform laws.

Bangladesh adopted the Basic Structure Doctrine by expressly relying on the reasoning in the Kesavananda Bharati case.

Swami Kesavananda Bharati never met Nanabhoy Palkhiwala in person, and was rather surprised to see his name in the newspapers every day. He even wondered why his case was taking so long!

Thanks to Kesavananda Bharati, Nanabhoy Palkhiwala, the seven judges as this decision thwarted many attempts on Indian Democracy, making India reach this milestone — The 71st year of being a Republic.

Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 3

Vaibhav Sharma — Fri, 22 Jan 2021 12:30:00 GMT

In the last parts, we have built a foundation of a Netlify Functions serverless project and set up our Fauna DB Collections, Indexes and Roles. We have also written two APIs, Sign Up and Sign In. And if you have followed the last parts, your project folder should look like this:

.
├── node_modules/
├── db/
│   └──  bootstrap.js
├── functions/
│      ├-- sign-in.js
│      ├-- sign-up.js
│      └──  hello-world.js   
├-- netlify.toml
├-- package.json
└── yarn.lock

In this part, we’ll finally be writing the CRUD APIs. Oh, I hope you have saved the User ID and the Secret Token returned after signing in. If not, go ahead sign in again and save the new ones, as we’ll be needing them.

Create My Cat

The big idea is to use the secret token we saved earlier as a bearer token and on the server-side, we use it as a regular FaunaDB access token, to initialise the Fauna Client and run queries. In this particular case a query to create a cat.

First, we create a file called create-my-cat.js in our functions folder:

cd functions/ && touch create-my-cat.js

Then, we take the authorisation header and retrieve the bearer token to initialise our Fauna Client.

const faunadb = require('faunadb')

const q = faunadb.query

module.exports.handler = async (event, context, callback) => {
    const payload = JSON.parse(event.body)
    let authorisation = event.headers.authorization
    authorisation = authorisation.split(" ")
    const token = authorisation[1]

    const client = new faunadb.Client({
        secret: token
    })
}

Finally, we write the query to create an entry of a cat, from the payload, we also save a reference to the user who created the entry.

    try {
        const response = await client.query(
            q.Create(
                q.Collection('cat_breeds'), {
                    data: {
                        name: payload.name,
                        image: payload.image,
                        breed: payload.breed,
                        userRef: q.Ref(q.Collection('users'), payload.user_id)
                    }
                }
            )
        )

        callback(null, {
         statusCode: 200,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "POST, OPTIONS",
         },
         body: JSON.stringify(response),
      })
    } catch (err) {
        console.error(err)

        callback(null, {
         statusCode: 400,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "POST, OPTIONS",
         },
         body: JSON.stringify({error: err}),
      });
    }

To test the API run the dev server:

yarn run dev

Then, authenticate the user we created earlier, using a POST request to:

http://localhost:8888/api/create-my-cat

With the following payload:

{
  "user_id": "285249298598199809",
  "name": "mr snugglepants",
  "image": "https://example.com/cat_1.jpg",
  "breed": "maine coon"
}

And, the authorisation header:

{
  "authorization": "Bearer fnED_83xz1ACAAPy2UP8gAYBHFYA7Xw0l-0EDv_oWF4fj28gX9I"
}

Make sure to make a few entries before proceeding to the next step.

Retrieve My Cats

Retrieving the cats is similar, but we’ll be using the Index we created in the last part - cats_by_users. We’ll also be using a FaunaDB Lambda function, which will process the list of cat ids retrieved from the Index to their entire document.

First, create a file retrieve-my-cats.js in the functions folder:

touch retrieve-my-cats.js

Then, write the following code in the file:

const faunadb = require('faunadb')

const q = faunadb.query

module.exports.handler = async (event, context, callback) => {
    const payload = JSON.parse(event.body)
    let authorisation = event.headers.authorization
    authorisation = authorisation.split(" ")
    const token = authorisation[1]
    const user_id = payload.user_id

    const client = new faunadb.Client({
        secret: token
    })
    
     try {
        const response = await client.query(
            q.Map(
                q.Paginate(
                    q.Match(
                        q.Index('cats_by_users'),
                        q.Ref(q.Collection("users"), user_id)
                    )
                ),
                q.Lambda('catBreedsRef', q.Get(q.Var("catBreedsRef")))
            )
        )

        callback(null, {
         statusCode: 200,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "POST, OPTIONS",
         },
         body: JSON.stringify(response),
      })
    } catch (err) {
        console.error(err)

        callback(null, {
         statusCode: 400,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "POST, OPTIONS",
         },
         body: JSON.stringify({error: err}),
      });
    }
}

To test the API, restart the dev server. Then, make a POST request to the API, with the following payload. (Don’t forget the Authorisation Token in the Header)

{
  "user_id": "285249298598199809",
}

For the next part, make sure to save one of the Cat’s ID.

Update My Cat

For updating data we’ll use the Cat ID we saved earlier.

First, create a file update-my-cat.js in the functions folder

touch update-my-cat.js

Next, write the following code in the file.

const faunadb = require('faunadb')

const q = faunadb.query

module.exports.handler = async (event, context, callback) => {
    const payload = JSON.parse(event.body)
    let authorisation = event.headers.authorization
    authorisation = authorisation.split(" ")
    const token = authorisation[1]
    const cat_id = payload.cat_id
    const data = payload.data

    const client = new faunadb.Client({
        secret: token
    })
    
     try {
        const response = await client.query(
            q.Replace(
                q.Ref(q.Collection('cat_breeds'), cat_id),
                {
                    data: data
                })
        )

        callback(null, {
         statusCode: 200,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "PUT, OPTIONS",
         },
         body: JSON.stringify(response),
      })
    } catch (err) {
        console.error(err)

        callback(null, {
         statusCode: 400,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "PUT, OPTIONS",
         },
         body: JSON.stringify({error: err}),
      });
    }
}

Then, to test the API, restart the dev server and make a PUT request to the API, with changes in the payload. (Don’t forget the Authorisation Token in the Header)

{
  "cat_id": "288175339623940608",
  "data": {
    "breed": "tabby"
  }
}

Delete My Cat

Just like in the last script we’ll use the Cat ID we saved earlier.

First, create a file delete-my-cat.js in the functions folder

touch delete-my-cat.js

Then, write the following code in the file.

const faunadb = require('faunadb')

const q = faunadb.query

module.exports.handler = async (event, context, callback) => {
    const payload = JSON.parse(event.body)
    let authorisation = event.headers.authorization
    authorisation = authorisation.split(" ")
    const token = authorisation[1]
    const cat_id = payload.cat_id


    const client = new faunadb.Client({
        secret: token
    })
    
     try {
        const response = await client.query(
            q.Delete(
                q.Ref(q.Collection('cat_breeds'), cat_id))
        )

        callback(null, {
         statusCode: 200,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "DELETE, OPTIONS",
         },
         body: JSON.stringify(response),
      })
    } catch (err) {
        console.error(err)

        callback(null, {
         statusCode: 400,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "DELETE, OPTIONS",
         },
         body: JSON.stringify({error: err}),
      });
    }
}

Then, to test the API, restart the dev server and make a DELETE request to the API. (Don’t forget the Authorisation Token in the Header)

That’s it for this tutorial series on making serverless authenticated CRUD with Netlify Functions and Fauna DB. Hope, you make something awesome.

Links

Link to Part 1: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 1

Link to Part 2: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 2

Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 2

Vaibhav Sharma — Tue, 19 Jan 2021 12:30:00 GMT

In the last part, we set up our FaunaDB account, generated a database access secret and set up our Netlify Functions project. We also made a serverless API that returns “Hello, World!”.

Link to Part 1: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 1

If everything was set up properly according to the last tutorial the project folder should look like this:

.
├── node_modules/
├── functions
│      └──  hello-world.js   
├-- netlify.toml
├-- package.json
└── yarn.lock

In this part, we will first, programmatically set up our database Collections, Indexes and Roles. Then, we’ll set up the user sign-up and sign-in APIs.

Bootstrap Fauna Database

For our Cats project, we’ll need two tables or “Collections” — users and cat_breeds. And while we can make our Collections, Indexes and Roles using the Fauna Cloud Console GUI, setting it up programmatically allows us to keep the settings as a template which can be deployed locally as well.

First, install dotenv package

yarn add dotenv

Next, create a folder db at the project root:

mkdir db

Then in the db folder create a file bootstrap.js

cd db && touch bootstrap.js

In the bootstrap.js file, we’ll first import dotenv and faunadb.

require('dotenv').config()
const faunadb = require('faunadb')


console.log('Creating FaunaDB database...')

Creating Collections

First, we write a function to create our Collections, in that function we initiate the Fauna query and Fauna client.

const createCollections = key => {
  const q = faunadb.query


  const client = new faunadb.Client({
    secret: key
  })

}

Now we have to write the queries to create Collections in our createCollections function:

// Users Collection
client.query(
   q.CreateCollection({name: 'users'})
)
   .then(ret => console.log('Success: %s', ret))
   .catch(err => console.error('Error: %s', err))



// CatBreeds Collection
client.query(
   q.CreateCollection({name: ‘cat_breeds’})
)
   .then(ret => console.log('Success: %s', ret))
   .catch(err => console.error('Error: %s', err))

Creating Indexes

Indexes are used to quickly locate data without having to search every individual document (or row of data) in the database. We’ll create an index to look up users by email so that we can sign them in and another to get the cats.

In the bootstrap.js file add another function, createIndexes and initialise the Fauna query and client.

const createIndexes = key => {
  const q = faunadb.query


  const client = new faunadb.Client({
    secret: key
  })
}

Next, we need to write the query to create our indexes, in our createIndexes function.

// Users by Email Index
client.query(
   q.CreateIndex({
       name: 'users_by_email',
       permissions: {read: "public"},
       source: q.Collection("users"),
       terms: [{field: ["data", "email"]}],
       unique: true,
   })
)
   .then(ret => console.log('Success: %s', ret))
   .catch(err => console.error('Error: %s', err))


// Cat Breeds by Users Index
client.query(
   q.CreateIndex({
       name: 'cats_by_users',
       source: [q.Collection("cat_breeds")],
       terms: [{field: ["data", "userRef"]}],
   })
)
   .then(ret => console.log('Success: %s', ret))
   .catch(err => console.error('Error: %s', err))

Create Roles

User-defined roles provide configurable, domain-specific security rules. They are the core schema for attribute-based access control. For example, you can create roles like Staff, Customers etc. Here we’ll be creating a role for our users so that they all can access the Cat Breeds table and the cats_by_users index.

As before, create a function, name it createRoles.

const createRoles = key => {
  const q = faunadb.query


  const client = new faunadb.Client({
    secret: key
  })
}

And then, write the queries for the role, cat_whisperers:

client.query(q.CreateRole({
   name: "cat_whisperers",
   membership: [
       {
           resource: q.Collection("users"),
       }
   ],
   privileges: [
       {
           resource: q.Collection("cat_breeds"),
           actions: {
               read: true,
               write: true,
               create: true,
               delete: true,
               history_read: false,
               history_write: false,
               unrestricted_read: false
           }
       },
       {
           resource: q.Index("cats_by_users"),
           actions: {
               unrestricted_read: false,
               read: true
           }
       },
   ],

}))
   .then(ret => console.log('Success: %s', ret))
   .catch(err => console.error('Error: %s', err))

We don’t need to add permission for our other index because that is already public.

Running the Bootstrap Script

Before we run the script we need to call the above functions after checking if the environment has FAUNADB_SECRET:

if (!process.env.FAUNADB_SECRET) {
   console.error('FaunaDB Secret Key not found!')
} else {
   createCollections(process.env.FAUNADB_SECRET)
   createIndexes(process.env.FAUNADB_SECRET)
   createRoles(process.env.FAUNADB_SECRET)
}

Now, we can finally run it!

node ./db/bootstrap.js

You can go to Fauna Cloud Console and verify if everything was created as desired. After doing that, we can finally start writing our APIs.

Sign Up

This is a simple one, first, we initialise Fauna Client and Query with FAUNADB_SECRET. And then write an FQL query to create a user.

Create a file sign-up.js in the functions folder:

cd functions && touch sign-up.js

Then add the following code to the file. This function will take user data and store it to users collection as well as utilise Fauna native credentials storage to safely store the password in a hashed format:

const faunadb = require('faunadb')


const q = faunadb.query
const client = new faunadb.Client({
   secret: process.env.FAUNADB_SECRET
})



module.exports.handler = async (event, context, callback) => {
   let payload = JSON.parse(event.body)
   
   // user_data part of payload can contain all that you want to store about the user but it must contain email for our login to work
   let user_data = payload.user_data

   const password = payload.password



   try {
       const user = await client.query(
           q.Create(
               q.Collection('users'), {
                   credentials: {
                       password: password
                   },
                   data: user_data
               }
           )
       )


       const response = user.data


       callback(null, {
       statusCode: 200,
       headers: {
         /* Required for CORS support to work */
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Allow-Methods": "POST, OPTIONS",
      },
      body: JSON.stringify(response),
    })
   } catch (err) {
       console.error(err)

       callback(null, {
         statusCode: 500,
         headers: {
           /* Required for CORS support to work */
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods": "POST, OPTIONS",
        },
        body: JSON.stringify({error: err}),
      })
   }
}

To test the API run the netlify dev server.

yarn run dev

Then, make a user using a POST request to:

http://localhost:8888/api/sign-up

With the following payload:

{
  "password": "abc123",
  "user_data": {
    "name": "foo bar",
    "email": "foo@bar.com"
  }
}

That should successfully create a user with email: foo@bar.com & password: abc123.

Sign In

To sign in we’ll use Fauna’s native Login function. This will take the password in the incoming payload and convert it to the hash format and try to match it against the stored hash. We’ll be using the users_by_email Index that we created earlier to identify the user.

First, we need to create a file, let’s name it sign-in.js

touch sign-in.js

Then add the following code to the file:

const faunadb = require('faunadb')


const q = faunadb.query
const client = new faunadb.Client({
   secret: process.env.FAUNADB_SECRET
})



module.exports.handler = async (event, context, callback) => {
   let payload = JSON.parse(event.body)

   const email = payload.email

   const password = payload.password


   try {
       const response = await client.query(
           q.Login(
               q.Match(q.Index('users_by_email'), email),
               {password: password}
           )
       )


       callback(null, {
         statusCode: 200,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "POST, OPTIONS",
         },
         body: JSON.stringify(response),
      })
   } catch (err) {
       console.error(err)
     
       callback(null, {
         statusCode: 400,
         headers: {
             /* Required for CORS support to work */
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "*",
             "Access-Control-Allow-Methods": "POST, OPTIONS",
         },
         body: JSON.stringify({error: err}),
      })
   }
}

Finally, to test the API run the dev server:

yarn run dev

Then, authenticate the user we created earlier, using a POST request to:

http://localhost:8888/api/sign-in

With the following payload:

{
  "email": "foo@bar.com",
  "password": "abc123"
}

This should give you a response like this:

{
   "ref": {
       "@ref": {
           "id": "288175339623940608",
           "collection": {
               "@ref": {
                   "id": "tokens"
               }
           }
       }
   },
   "ts": 1611084270140000,
   "instance": {
       "@ref": {
           "id": "285249298598199809",
           "collection": {
               "@ref": {
                   "id": "users",
                   "collection": {
                       "@ref": {
                           "id": "collections"
                       }
                   }
               }
           }
       }
   },
   "secret": "fnED_83xz1ACAAPy2UP8gAYBHFYA7Xw0l-0EDv_oWF4fj28gX9I"
}

Save the secret, we’ll be using it while making authenticated CRUD requests. We’ll also be needing user id, it’s in the response: instance => @ref => id

That’s it for this part, In the next part, we’ll finally be writing the code for authenticated CRUD requests.

Links

Link to Part 1: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 1

Link to Part 3: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 3

Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 1

Vaibhav Sharma — Mon, 18 Jan 2021 12:30:00 GMT

Last month, one of my best friends decided he wanted to fulfil his lifelong dream of opening a restaurant. So while we were discussing how to go about doing that I suggested to him to try cloud kitchen first, as we realised we didn’t want to risk investing too much, in uncertain times like this. Since we wanted to invest as little as we can get away with, I decided to try the generous free tier of Netlify Functions and Fauna DB. Having worked extensively with AWS Lambda Serverless Functions I was itching to try Netlify Functions, as I thought it’ll be right up my alley. But I was sceptical about FaunaDB especially since I’m not comfortable with the hassle, that is, setting up GraphQL and I was conflicted about learning Fauna’s native query language FQL. But after quickly skimming through docs I decided to try FQL. And, while I did run into some trouble, I finally got a hang of it and decided that I’d write an article on setting up Authenticated CRUD APIs using the two.

What We’ll Be Building

We’ll be building a Sign-Up API, a Sign In API and Authenticated CRUD APIs for our Cats database. ~~Before we begin, make sure you have the netlify-dev package installed globally on your machine.~~

netlify-dev has been deprecated please check out netlify-cli

yarn global add netlify-cli

NOTE: This write-up assumes that you have some familiarity with serverless functions. This article will not teach you FQL in detail, but merely show you how you can leverage FaunaDB and Netlify Functions to create authenticated serverless APIs. I use yarn, but you can use npm as well.

Setup Fauna

We begin by signing up for a free Fauna DB account (I love the fact that neither Fauna nor Netlify needs a credit card to sign up).

After that, we have to create a new database, in Fauna Cloud Console:

Click on “New Database”
Enter a name for the database, I’ll go with “Cats”
Click “Save”

Next, we need to generate a database access key secret:

Click on “Security” in the Left Navigation
Click on “New Key”
Select Database “Cats” and Role “Admin”
Enter a key name, I’ll go with “API”
Click “Save”

You’ll get a long alphanumeric key, copy it and save it, as you’ll not get to see it again. We’ll need it later.

Setup Netlify Functions Project

Now for the serverless part, we need to first create an empty node project.

Create a directory called cats.

mkdir cats && cd cats/

Then, initialise with yarn init.

yarn init

Now install the following package:

yarn add faunadb

Then in your package.json add the following script:

“scripts”: {
  “dev”: “netlify dev”
}

The ~~netlify-dev~~ netlify-cli package allows us to emulate the netlify production environment on our local machine. It also injects variables saved in a .env file into the environment, bringing us to the next step.

Create a file .env:

touch .env

In this file add the Fauna DB access secret that we had generated earlier, as follows:

FAUNADB_SECRET=”your-fauna-db-access-key”

Now, we finally get to the functions part.

Create a folder called functions in your project root, you can set it to whatever you like but I prefer the functions convention:

mkdir functions && cd functions/

In the functions directory, we create our first serverless function hello-world.js to test if everything works so far.

Create a file called hello-world.js, in the functions folder. Remember the file name will be the slug for accessing our function API.

touch hello-world.js

Inside hello-world.js we will write a generic AWS Lambda function, since Netlify Functions is just a wrapper on AWS Lambda:

module.exports.handler = (event, context, callback) => {
  // "event" has information about the path, body, headers, etc. of the request
  console.log('event', event)

  // "context" has information about the lambda environment and user details
  console.log('context', context)

  // The "callback" ends the execution of the function and returns a response back to the caller
  return callback(null, {
    statusCode: 200,
    body: JSON.stringify({
      data: 'Hello, World!'
    })
  })
}

We are not done yet, as netlify still doesn’t know where our functions are stored. For that, we need to specify our functions folder in netlify.toml file.

Create a file called netlify.toml in the project root:

cd .. && touch netlify.toml

In netlify.toml, specify functions directory

[build]
  functions = "functions"

Finally, it’s time to test if everything works. First, we run our netlify dev environment then we can test our API using Postman.

yarn run dev

The dev server will probably start at http://localhost:8888 and we can access our API at:

http://localhost:8888/.netlify/functions/hello-world

It should give the following output:

Hello, World!

One final thing, before we proceed, let's make our API URL a bit more pretty, as /.netlify/functions/ doesn’t look aesthetic enough for production. To do that we need to add redirect instructions in our netlify.toml file.

Add the following to our netlify.toml file:

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

Great now let's try to access our pretty URL:

http://localhost:8888/api/hello-world

Hopefully, we still get the same output as before.

In the next parts we'll create our Fauna DB Collections, Indexes and Roles, as well as write the CRUD APIs.

Links

Link to Part 2: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 2

Link to Part 3: Authenticated Serverless CRUD with Netlify Functions and FaunaDB Part 3

The Ghost in our Shell

Vaibhav Sharma — Sat, 16 Jan 2021 12:30:00 GMT

Portuguese Man-o-War, also known as bluebottle and floating terror is a weird marine organism that is actually not an organism. It’s a bunch of genetically distinct organisms with distinct nervous systems working together to form another organism. Although it’s commonly found on beaches (which leads to the closing of the beach because of their venomous tentacles) we know very little about them. Not because of lack of interest, but because of lack of making sense! Scientists still can’t figure out if they are a group of colonial organisms or a single organism made of specialized tissues (like we are). They have a weird overlap of both of these but we don’t know how much. They are named after 18th-century sailing warships that they roughly resemble.

Speaking of ships, let's imagine a ship that has its parts replaced every year until all of the parts get replaced, is it the same ship? Now let’s imagine a new ship made out of all the replaced parts of the previously mentioned ship, which ship is THE ship? This is the famous thought experiment called, Ship of Theseus. It tries to understand what makes us … well, us!

So what DOES make us, US? Memories and experiences? What if we lose all our memories, are we still, us? If not, what if we get back all the memories that we lost? And even if we don’t lose our memories, our brain cannot accurately remember everything anyways, our memories have gaps, and our brain fills those gaps by false/made-up memories to maintain a sense of continuity, and these gaps only keep increasing with time. And then there’s the fact that our memories are highly unreliable, biased by the emotions of the moment, mental state and other psychological factors. So is it our body? All the bones in our body get replaced every 10 years, all the cells get replaced every 7 years and 98% of atoms in our body get replaced every year. Where do these particles come from and where do they go?!

Joni Mitchell in her ethereal song Woodstock, sang:

We are Stardust…

― Joni Mitchell

Turns out she was right! Everything we are and everything in our entire universe originated from Stardust! The stardust finds its way into plants and from there into the nutrients we need for everything. And it continually floats through us today, connecting us to the universe, rebuilding us over and over again throughout our lifetime. Until our soul or whatever, this body, a shell for, decides that it’s time to leave.

And, while, all stars are beautiful, isn’t our star, the Sun, especially beautiful? The different shades of sky at dusk, fondle our emotions in a way that cannot be accurately put to words.

It makes us question how our universe has the exact right values for various fundamental constants that guide the particles that make everything, and more importantly how these particles came together on this very planet to form the first cells which then merged together to form simple bio-robots which eventually came to form the complex creatures that can enjoy the sunsets.

How does our brain turn a certain range of wavelengths of the electromagnetic spectrum to the perceived beauty of a sunset? There’s no known combination of words in any known language that can spontaneously reproduce the redness of sky in someone else’s mind. We cannot explain colours to someone who is blind and has never seen colours in their life, or describe a taste, smell etc. Philosophers call these raw ineffable feelings, Qualia, and our inability to describe these internal qualia, Explanatory Gap.

Some philosophers like Daniel Dennett believe that our inability to express our internal qualia might be a failure of our language, not necessarily because they will always be impossible to share. Given millions and billions of words used in just the right way, it may be possible to adequately describe a colour such that a blind person could see it for the first time. And that might bring us one step closer to the answer to what is The Ghost in our Shell, the hard problem of consciousness.

As Pierre Teilhard de Chardin once said:

We are not human beings having a spiritual experience. We are spiritual beings having a human experience.

― Pierre Teilhard de Chardin

Can Psychedelics Lift the Veil on Consciousness?

Vaibhav Sharma — Fri, 25 Dec 2020 12:30:00 GMT

Psychedelics are mysterious compounds and science doesn’t really understand how they work. Partly, because research on them was banned and partly because their effects extend to alter the state of consciousness itself. Their primary effect is to trigger non-ordinary states of consciousness, which is colloquially referred to as Psychedelic Experience or Trips. These non-ordinary states of consciousness are often compared to the state of consciousness experienced in meditation and near-death experience. What we do understand about psychedelics is that these compounds trigger the 5-HT2A serotonin receptors, which modulate the sensory perception and cognition in our brain. This is because the shape of these compounds resembles serotonin, so much so, that some compounds fit the 5-HT2A receptors better than serotonin itself! However, what is not known is how exactly the compounds manipulate the receptor to induce changes in perception and cognition.

Robin Carhart-Harris, and his team — The Psychedelic Research Club from The Imperial College, London, study the effect of psychedelics on the human brain using F-MRI machines. What they discovered is that rather than just exciting parts of the brain, a part of the brain network was actually down-regulated. This part is called the Default Mode Network, it’s a tightly linked set of structures connecting the prefrontal cortex to the posterior cingulate cortex and some other centres of emotions and memory. The Default Mode Network has been associated with things like self-reflection, the theory of mind, the ability to impute mental states to others and the ability to shift through the mental states through time, creating a strong sense of identity. Basically, it’s the part that deals with our Ego.

Ego is that part of our psyche that helps us form a distinct sense of self. This is the part that identifies the boundaries of us and other things. The Default Mode Network seems to regulate that part. In the hierarchy of the brain, the Default Mode Network sits on top and orchestrates and regulates every other part. It takes all our experiences and actions and adds the perspective of self-identity to it. Psychedelics take this part out of the equation thus giving a sense of ego dissolution also popularly known as Ego Death. So when this ego dissolution occurs the other parts of the brain that don’t usually interact with each other start doing so. Thus producing effects like synesthesia and the ability to see music. As ego subsides and the boundary of self-identity thins, we also experience being one with the universe.

Being one with the universe, as many of you may be familiar, is an important part of many eastern philosophies like Hinduism and Buddhism. A lot of eastern meditation is focused on getting in touch with Brahman, or rather making oneself realise that Atman(self) is Brahman(universe). In some schools of thoughts of Hinduism, such as Advaita Vedanta, Brahman is identical to the Atman, is everywhere and inside each living being, and there is connected spiritual oneness in all existence. This realisation sounds very if not completely identical to the experience provided by psychedelics. It seems like the experience provided by psychedelic is an unevolved version of the complex interpretations of Advaita philosophy. Advaita Vedanta school of thought assumes, among other things, that there exists a state of consciousness where we are connected to all other consciousness of this universe, a form of panpsychism.

So does that mean that consciousness extends to all matter and not just things with brains? Guilio Tononi, a neuroscientist, proposed an ambitious theory to explain consciousness called the Integrated Information Theory (IIT). This theory suggests that panpsychism might not be so far-fetched after all. The core identity of IIT suggests that —

The quantity and quality of an “experience” are an intrinsic, maximally irreducible property of a complex of mechanisms in a state — the property of informing or shaping the space of possibilities (past and future states) in a particular way, just as it is considered to be intrinsic to a mass to bend space-time around it.

IIT claims that a system is conscious if it possesses a property called Φ, or phi. Phi is the measure of a system's “integrated information”. What that implies is that various systems can have various levels of consciousness which is their intrinsic property.

While this theory is a developing one and has yet to iron out its kinks, it provides an interesting perspective to the term "consciousness" and the theory of panpsychism. And Psychedelics are one of the easiest ways to experience this. But while doing drugs is easy and meditation is hard, some swear by the fact that a higher level of this experience can be achieved by meditation than by psychedelics. So, if not much, these psychedelic compounds can definitely serve as an advertisement to all that can be achieved through meditation.

Hate in the Time of Corona

Vaibhav Sharma — Tue, 20 Oct 2020 12:30:00 GMT

Have you ever met someone and felt from the bottom of your heart that you want to spend your entire life... without them? Usually, I feel that way when I find some bell-end justifying their hate and asserting their flawed ideas as if it’s common fuckin' sense, that too with an air of threat that anyone who disagrees or tries to be neutral is not worth existing. FYI, I know calling someone a Stupid Cunt has never in the history of the world changed their mind, no matter what logical and sensible argument we precede it with. But this write-up isn’t meant to change anyone’s mind or to justify why the title is ripped from the modern classic Love In The Time of Cholera. No this... this is a motherfuckin' RANT! A release that was long overdue, due to my particular strategy of dealing with stupid people.

Never Underestimate the Power of Stupid People in Large Groups

— George Carlin

Stupid cunts are very dangerous to the community, to democracy and to people's mental health and well being. Add the power to broadcast unregulated shit at the speed of light, things go south real fast. My way of dealing with stupid people is to always avoid arguing with them, but being a stupid prick myself (although of a tad different kind) I sometimes inadvertently find myself in the middle of an argument with such people. If I find myself trapped before it is too late, my go-to strategy is always to come out as a naive idiot because a naive idiot isn’t a threat. And since most stupidity is driven by fear, even the smartest of people are susceptible to it.

Fear is the path to the dark side…fear leads to anger… anger leads to hate… hate leads to suffering.

— Master Yoda

Fear is a unique thing, some evolutionary scientists argue that if it weren’t for fear, we wouldn’t have evolved as much as we did. It’s not hard to see that if we weren’t afraid of starvation we’d never develop agriculture and if we weren’t afraid of natural calamities we wouldn’t develop shelters and if we weren’t afraid of our survival as a group we’d never develop language and if we weren’t afraid of the death of our thoughts and ideas, we wouldn’t develop writing and so on... According to science, this “gift” of fear comes from our evolutionary will to live and spread our DNA. But what I have observed reading history is that our obsession with immortality is not so bio-mechanical in nature.

History is a witness to the fact that humans can kill or die for their ideologies. The need to control other people’s thoughts and the fear of other people’s ideologies prevailing is what strengthens a society. But every once in a while, when times like 2020 arrives where the uncertainty of our lives just keeps piling up, the ultimate fear creeps in. The fear of lack of control. Though we have never in the history of this universe truly been in control and we are just insignificant shit stains ignored by any intergalactic society that might be out there, the sudden realisation of how fragile our lives are and how meaningless our existence is — makes us very, VERY angry. So, we try to find something to scream, shout and blame our fears on to feel better and more in control. We want to see someone screwed for making us afraid. This leads to outrageous claims like coronavirus was made in the lab, our religion is in danger, Illuminati is making our biscuits fall in tea etc. But life isn’t curated, we aren’t kids anymore and there’s no grand plan! Everyone is as lost and stupid as everyone else. And we'll probably bomb ourselves to extinction.

This thought crept up the other day when I found a book that I had read in my high school days — Arthur C. Clarke’s July 20, 2019: A Day in the Life of the 21st Century. At first, it gave me an undeserved sense of accomplishment that I was living in the future, then a haunting thought arose, Is anyone making sure we don’t kill ourselves, are we gonna be able to see the fuckin' 22nd Century? Or as the Fermi Paradox puts it, will our civilisation pass the Great Filter? After all, it has just been a bit over 70 years, since humans detonated the first atomic bomb! A weapon that was just first in the long list of cruel options that we now have, to end our entire civilisation very efficiently. After the USA nuked Hiroshima and Nagasaki, in his speech Emperor Hirohito of Imperial Japan said —

The enemy has begun to employ a new and most cruel bomb, the power of which to do damage is, indeed, incalculable, taking the toll of many innocent lives. Should we continue to fight, not only would it result in an ultimate collapse and obliteration of the Japanese nation, but also it would lead to the total extinction of human civilisation.

And ever since then, there have been at least a thousand instances that, we know of for sure, when we accidentally fucked up and almost brought our entire planet to the brink of nuclear annihilation. And it’s without a doubt that we’ll screw up in the future as well with a thousand times the efficiency we did in the past. So, it is not too much of a stretch to imagine that a bioweapon that was created in the lab got out.

Or is it?

In Philosophy, A Razor is a principle or a rule that allows one to “Shave Off”(eliminate) unlikely speculations and explanations for a certain event/phenomenon. One such Razor is Hanlon’s Razor which states —

Never attribute to malice that which can be adequately explained by stupidity.

— Hanlon’s Razor

What that means is that our need to blame someone or something evil that’s responsible for our misery and suffering usually overlooks a simple explanation that should be prioritised i.e. — more often than not, things happen without reason, life doesn’t always make sense, every single human makes mistakes and bad incidents usually don't have malice in its roots. That being said, the fear, anger and hate we feel is also a normal part of being human. And these feelings wouldn’t have mattered much if we hadn’t taken a fuckin' shortcut to evolution — Technology.

With the advent of Social Media, we can take these fears and spread them like viruses. Hence the term ‘Going Viral’. Speaking of which, a study in 2009 — ‘What makes Online Content Viral?’ showed that anger is the ultimate virus, eliminating the mental firewall of logic, it compels us to share the shit that makes us angry! Proof that we share a common ancestor with shit flinging monkeys. And it doesn’t just end there, to make other people understand the pain and anger we felt and to increase its impact we start tweaking the truth — a photoshop here, an eliminated context there, who cares? The more people discuss it, the more life expectancy of these anger viruses further increases thus creating an us-versus-them divide between people. And once this happens, it’s only a matter of time before cherry-picking begins — skewing perspectives, destroying harmony, driven by anger, all we can see is how ‘they’ are wrong & ‘we’ are innocent … and we lived hatefully ever after! Bringing us a full circle back to the stupid cunts I mentioned at the beginning. You see?!! How the very thing that made us the superior species over Neanderthals, backfired on us, you see, right?!!!!!

But Neanderthals, despite their popular image of being archetypical brutish and stupid ‘cave men’, used to survive many years with severe handicaps, evidence that they were cared for and loved by someone. They had bigger bodies and larger brains than Sapiens, yet we prevailed, reason being, we had a more advanced language. Our tongue which helped us to express better that we care and love, helped us form a bigger and stronger society. If that’s not enough evidence that compassion is in our DNA then I don’t fuckin' know what is! We’ll never be correct 100% of the time, but what we can do is delay our judgement to make our paradigms more accurate, use Occam’s Razor to eliminate and avoid unnecessary or improbable assumptions.

Of two explanations that account for all the facts, the one that makes the least assumptions is more likely to be correct.

— Occam’s Razor

But most importantly WE CAN BE KIND! And if anyone says otherwise they can GO FUCK THEMSELVES!

With Love,
Vaibhav

Raat — रात

Vyom — Thu, 15 Oct 2020 12:30:00 GMT

Another great poem by my friend who writes under the pen-name ”Vyom”.

एक अजीब सा माहौल था उस रात।
चाँद नहीं था आसमान में, पर तारे चांदनी को इठला रहे थे।
बादलों का दूर - दूर तक निशान नहीं था, पर तूफान का आना लगभग तय था।
हवाएँ खेल तो रही थी पत्तों के संग, पर उस रात एक खामोशी थी खेल में।
जंगलों की गुर्राहट शहरों तक सुनाई दे रही थी।
उस रात पक्षी घोंसलों में नहीं थे, शायद उन्हें तूफान का आभास था।
सहर शमशान सा सांत था।

गाड़ियाँ तो चल रही थी पर कहीं हॉर्न की आवाज़ नहीं थी, मानो सब कायदे से हो रहा हो, मानो जैसे हर कोई ख़ौफ़ में हो।
ख़ौफ़, जो देर हो जाने के ख़ौफ़ से बड़ा था।
अजीब थी वो रात पर आखिर रात ही थी ना।
रातों की किस्मत होती है सवेरे से मात खाना।
लोग जानते थे कि सुबह आयेगी।

जब फिर सब तरीके से होगा पर उन तरीकों को कोई व्यक्ति विशेष तय नहीं करेगा।
जब हवा, समुद्र या रोशनी पर किसी की पाबंदी नहीं होगी।
जब हंसी की गूंज तभी आयेगी जब उसकी वजह होगी और आँसू भी बिन वजह नहीं बहेंगे।
तब तक जरूरी है इस रात में जागना और दूसरों को सोने ना देना ताकि उस नए सूरज की किरणों से कोई अनजान ना रह जाए।।

— व्योम

Interstellar, King Muchukunda and Time Dilation

Vaibhav Sharma — Sat, 10 Oct 2020 12:30:00 GMT

Christopher Nolan is without a doubt one of the best directors of our time. He takes incredibly complex subjects, mixes it with an equally complex story and beautiful cinematography and makes it accessible to regular people with a topping of great music. One of his most popular films is the sci-fi — Interstellar, which deals with the topics of Black Hole, Wormhole, Parallel Dimension and Time Dilation.

Interstellar is a story set in a dystopian future where humanity is on the verge of destruction due to crop blights and dust storms. The film follows five astronauts who travel through a wormhole(which was placed by unknown beings near Saturn) to different planets to find a suitable home to rehabilitate human beings. One such planet, that the protagonists of the film travel to, is — Miller’s Planet which is near a black hole, Gargantua. And due to its proximity to Gargantua, there’s severe gravitational time dilation, so much so that one hour on Miller’s Planet was equal to seven years on Earth! Interstellar was the first movie dealing with Time Dilation but not the first piece of fiction, but I’m getting ahead of myself, let’s first understand what exactly is Time Dilation.

Time dilation is the relative difference in time elapsed measured by two clocks due to their relative velocity to each other or due to gravitational potential difference. What that basically means is that even after compensating for the Doppler Effect (the varying signal delays between two clocks, one observer and one moving), the observer will measure that the moving clock is ticking slower than his/her own clock which is at rest in his/her own frame of reference. And the other way time dilates is that a clock near a massive body will record less elapsed time than one situated away from that massive body. The latter one is so apparent that it is even observable near pyramids, and in satellites that are in orbit! Though this is not a new concept and has been predicted since the turn of the 20th Century by various scientists and authors like — Poincare and Einstein, evidence suggests that it may even be older than that.

Hindu scriptures talk about 14 Lokas or Dimensions — Brahma Loka being on the top and Paatala Loka (something like hell but not exactly)being the bottom-most. Earth is situated in Bhu Loka which is the 7th dimension and Swarga (something akin to Heaven but not exactly) or Indra Loka is the 5th one. One of the features of these dimensions is that time runs at different speeds. One such legend about time dilation in Hindu scriptures is that of King Muchukunda. King Muchukunda was from Ikshvaku Dynasty and an ancestor of Lord Rama (the seventh avatar of Lord Vishnu and a major Hindu Deity). His story is found in Vishnu Purana, which is believed to have been written around 700-300 BCE. He was a brilliant war strategist and an accomplished General. So much so, that when Devas (Deities) were outnumbered and on the verge of defeat in a battle against Asuras(~Demons, although not all Asuras were evil) due to lack of a formidable commander, they sought help from Muchukunda, who was just a human. They asked for him to join them and help them in their fight against Asuras in Indra Loka. The fight was long and bloody, he got so caught up in the war that he didn’t even get to sleep. He protected them from Asuras until they got Kartikeya the son of Lord Shiva as their commander. For his services Indra, the king of Devas thanked him and said —

“O king, we, the Devas are indebted to you for the help and protection which you have given us, by sacrificing your own family life. Here in heaven, one second equals one year of the earth and you had fought with asuras for one year of heaven. Since it has been a long time, there is no sign of your kingdom and family because it has been destroyed over time. We are indebted to you, so ask for any boon except Moksha (liberation from rebirth cycle) because Moksha is beyond our capabilities”.

Muchukunda asked to return to his family and kingdom, to which Indra, apologetically informed, that Time runs differently in Indra Loka and that the year spent here was equivalent to many centuries on earth. His entire dynasty had ended and so had his kingdom. Saddened and depressed he asked for a boon of sleep that wouldn’t end until he wanted it to, to compensate for all the sleepless nights he had spent fighting. He also asked that whoever disturbs his sleep, would burn to ashes. These events happened before the events of Ramayana, and just like all good sequels, this was an important callback event in the times of Mahabharata. When Yavana(Greek) warrior Kalayavana invaded India, he was invincible and was said to have gotten a boon from Lord Shiva that no weapons could defeat him. Lord Krishna, being an avatar of Lord Vishnu, knew about Muchukunda’s boon and used it to defeat Kalayavana.

This, while being the most striking incidence of Time Dilation used in Hindu Scriptures surprisingly isn’t the only one! Some other legends that I could find were — Princess Revati who travelled to Brahma Loka and King Indradyumna who commissioned The Jagannath Icon of Puri, who also travelled to Brahma Loka. Does that mean Hindus knew about the concept of Time Dilation since ancient times? Hard to say, and I say that because on the one hand, India has always had a rich culture of Science and Mathematics since ancient times, on the other hand, Time Dilation has been used by a lot of modern writers as it technically allows forward Time Travel, since our current understanding of Space-Time doesn’t allow us to travel back in time. And what's interesting is that we have yet to come across a Hindu scripture that mentions Backward Time Travel as well! The Indians believed that time is cyclic in nature rather than linear (Closed Timelike Curve), there even was a Sage who was gifted to be beyond time and could see multiple outcomes for the same events (Sage Kakbhushundi — the OG Dr Strange), but not even one mention of backward time travel! A trivial concept in fiction and a hell lot easier to imagine a time travel story than a time dilation story, especially, given that, this is supposed to be "Mythology", why bother with such an arbitrary omission. Did the ancient Indians know about this limitation, if yes, then how?! This certainly, is something significant to think about. But I guess it'll always remain a mystery as a lot of ancient knowledge that India had, was destroyed in numerous invasions that it was subjected to throughout history.

Is MSG bad for you?

Vaibhav Sharma — Mon, 21 Sep 2020 12:30:00 GMT

Recently a video by Sino-Malaysian comedian Nigel Ng went viral where his alter-ego Uncle Roger ruthelessly roasts an Anglo-Indian girl Hersha Patel, for her “Egg Fried Rice” cooking methods. But in a wholesome turn of events, they became friends, and he made another video about taking her to London’s Chinatown for shopping authentic Chinese ingredients. In this video, Nigel or rather Uncle Roger confesses his love for ... MSG. This leads to a minor argument between Uncle Roger and Aunty Hersha on whether MSG is bad for health.

In Asian culture, if taste good no need science

— Uncle Roger

Being a big fan of MSG and having faced similar criticism, I decided to finally write a post presenting why MSG is infamous.

What is MSG?

Monosodium Glutamate or MSG is the sodium salt of Glutamic Acid. Popularly known by its genericised name Aji no Moto (Aji means Taste, Moto means Essence, no is a preposition, so aji no moto stands for The Essence of Taste), is a compound that provides umami flavour. Umami or Savoury is one of the 5 basic tastes that humans have receptors for, along with — Sweet, Sour, Salty and Bitter. Umami receptors typically respond to glutamate and nucleotides. Despite its widespread notoriety, glutamates are naturally found in a lot of foods like meat broths, fermented food, tomatoes, mushrooms, seaweeds and are even claimed to be present in breast milk.

Origins

MSG, although sometimes called Chinese Salt in India(and elsewhere) due to the popularity of Chinese food and use of MSG in them, actually has its origin in Japan. Kikunae Ikeda of Tokyo Imperial University realised that Dashi, a Japanese broth of Dried Tuna (Katsuobushi) and Seaweed (Kombu), has a unique taste that he cannot classify as any of the then recognised taste — sweet, salty, sour or bitter. In 1908, he isolated sodium glutamate from Kombu as a flavouring ingredient by aqueous extraction and crystallization of glutamic acid. He called his patented creation Monosodium Glutamate and proposed the flavour it provided as Umami (Japanese for — pleasant savoury taste). In 1909, the Suzuki brothers started commercial production under the iconic name ‘Ajin-no-moto’. But, it wasn’t till 1985 that the scientific community accepted Umami as the flavour of glutamates and nucleotides.

Fall from Grace

Ever since it started being sold, MSG has enjoyed widespread popularity and acceptance in various East Asian cuisines. It all changed when the fire nation attacked...err I meant when a letter was penned to the New England Journal of Medicine. In this letter, Dr Robert Ho Man Kwok coined the term “Chinese Restaurant Syndrome” which was a collective term for a bunch of “symptoms“ he believed, were caused by MSG. Dr Kwok believed that every time he visited a Chinese restaurant he experienced - numbness of the neck, arms, and back with headache, dizziness, excessive sweating and palpitations. This publication was met with a lot of ridicule, satire within the medical community, as this wasn’t an isolated comical letter to NEJM. What’s to be noted here is that this observation was not scientific in any stretch of the word and was totally anecdotal.

Interestingly, in 2018, renowned surgeon Dr Howard Steel claimed to have written the above letter under a pseudonym for a bet. But according to a This American Life interview, they discovered that a real Dr Kwok existed and his descendants claim that he did, in fact, write the letter. This was followed by an NYTimes article that was published six weeks after the NEJM letter was published. This article took the letter at face value without further investigating/verifying whether the said letter was credible science. Though we cannot be sure, whether the letter written by Dr Kwok was an inside joke of the scientific community or if he did truly believe that there exists such syndrome.

There was another significant paper that affected the public perception of MSG, titled - Monosodium glutamate (MSG): A villain and promoter of liver inflammation and dysplasia that claimed that MSG causes cancer in rats. The methodology involved here though is questionable at best - injecting an abnormally high concentration of MSG directly into the bloodstreams of mice. Since digestive intake is not the same as a subcutaneous injection, we have to take the observations of this paper with a grain of Chinese Salt (sorry 😜).

Scientific Consensus

MSG is regarded as fairly safe for consumption by the FDA of the USA. European Union, while yet to publish a NOAEL(No Observable Adverse Effect Level) for glutamate flavouring, considers that a daily intake of MSG of 6 grams per kilogram of body weight (6 g/kg/day) is safe.

As no association between MSG consumption and the claimed symptoms have been successfully demonstrated under rigorous testing conditions, the general scientific consensus on MSG is that it’s safe to eat.

Redefine CRS Campaign

While researching for this article I came across a recent campaign - #RedefineCRS by Ajinomoto Co. Inc. This campaign aimed to redefine the entry for Chinese Restaurant Syndrome in Merriam-Webster dictionary, on the grounds of it being dated and somewhat offensive. While I didn’t find the origin of the bias towards MSG had any racial roots, I can certainly see how it can be offensive. Though I assure you this isn’t a sponsored article, nor was it written for the #RedefineCRS campaign.

Is “Always”, really Snape’s best line?

Hermione Lovegood — Thu, 27 Aug 2020 12:30:00 GMT

Check out this amazing article on Severus Snape by my friend Hermione Lovegood. For more of her writings check out her blog - The Daily Quibbler, where she analyzes various books and movies from an unusual point of view. The idea behind the name, as you can see is also derived from our beloved 'Harry Potter'.

Maybe, few of the most used quotes of all time, from the Harry Potter series is - "After all this time?" and, it’s apt retort - "Always". Deep down, we all know that Severus Snape can beat many great lovers of the fictional world. So, for us Potterheads, "After all this time" and "Always" replaced the magic words - 'I love you'. Because these, more than anything else, reveal the potion master's heart before our eyes, the heart that was capable of loving forever, loving ceaselessly, loving despite all the hatred he got.

Or do they?

Ever since I first read The Deathly Hallows, I was convinced that these are not the best words to reflect Snape’s heart. So, I began searching, analysing, re-reading the books. And, after a lot of digging, I think I'm finally convinced that I have found out the best line that Snape has ever uttered. So here I am writing to convince you of the same.

Love might not necessarily change a person, but it certainly has the potential to. For instance, it did so to a person whose early life was wrecked by lack of care, excess of bitter treatment, abandonment, and who, despite having better paths, overlooked them drowned in resentment, and could not help himself from descending deep into the dark arts. But at the same time, love cannot change a person who does not know its meaning.

There's hardly any doubt that despite having a soul, as beautiful as, the wild white flower that blooms in the deepest parts of the forest, he was never the one to open its doors. But then, love came from the overwhelming power of opening those very doors. But when I talk about someone loving Severus Snape, so deeply, that it kindled a thousand untouched candles in every dark passage of his soul, mind, and life, I’m not referring to Lily Evans, but the extraordinary Albus Percival Wulfric Brian Dumbledore.

It's well known that Snape kept on protecting Harry and fighting the battle against Voldemort, out of his undying love for Lily. But, according to me, that's only partially correct. His love for Lily was indeed eternal, but that was definitely not the most important factor behind Snape’s unshaken resolution. With time, the former Death Eater turned into a man who did not need any promise to drive him on the path of goodness. Snape indeed vowed to protect Harry because he didn't want Lily's sacrifice to go in vain. But later, his motive became broader and more enlightened. His character development over the years supports this argument. There are three, very clear examples of this progress.

First, in The Deathly Hallows, we find out that during The Battle of Seven Potters, Snape attempts to protect one of his so-called "enemies", Lupin (although the curse made George, 'saint-like' instead). The mere fact that he buried his childhood enmity against A Marauder and tried to save him, risking his cover, alone, is enough indication of his transformation. Remember, he had no debt to repay this time, like he had when he protected Harry from Quirrell. He saved Lupin for no reason other than the impulse of saving an innocent man. Thus, we realise that his acclimation to killing and murder was long eliminated.

Directly linked with this, is the second example, which we will observe through this excerpt -

’Don’t be so shocked, Severus. How many men and women have you watched die?’

‘Lately, only those whom I could not save’ said Snape.

Is it not in sharp contrast with the man, who once, only cared about Lily, and was unmoved by the fact that an infant will also be killed?

And the final nail in the coffin, from ‘The Prince’s Tale’ — The Deathly Hallows -

‘Headmaster! They are camping in the Forest of Dean! The Mudblood –‘

‘Do not use that word!’

It is such an amazing situational irony that Snape(the then Headmaster), who, in his anger, himself used this insulting word on Lily- his love, couldn’t even endure it from a Death Eater anymore.

These examples indubitably clarify that there was more to it than just his love for Lily that went into making Severus Snape, the character we have come to admire. But how were these changes possible? As we have already established, that while his unrequited love and remorse did set him on the path of goodness, that alone wasn't enough to change him altogether. What actually turned him into an overall good, sensible, and an empathetic person is his association with Albus Dumbledore.

Yes, that’s right, Albus Dumbledore’s presence worked as a true Philosopher’s Stone for Snape. This “greatest wizard of all time” loved the desolate man. In a world where Snape received nothing but distrust, disrespect, and dishonour, Dumbledore was the only person who knew the real Severus. Dumbledore was the only person to acknowledge the goodness within him. And Snape was grateful. Yes, he was grateful to the one person who believed him in the whole world. And naturally, it was very important to him to keep the Headmaster's trust. Being a gifted Occlumens, he didn’t show it often, but we catch a few glimpses of his heart sometimes. For example, when Mad-Eye Moody(disguised Crouch Jr, to be precise) questions Dumbledore’s trust over Snape, the hooked nose man instantly became defensive –

‘Dumbledore happens to trust me,’ said Snape through clenched teeth. ‘I refuse to believe that he gave you orders to search my office!’

Apart from this extract, there are few words uttered by Snape, which clearly, uncloaks how much it meant for him to let Dumbledore know about the effort he put in his reform. And thus comes the words which I think are more significant than 'After all this time' and 'Always'. When Dumbledore gave Snape the task of killing him, he told us that he cared for the soul of Draco. And at that very moment, maybe being unable to restrain himself anymore, Snape asked him –

‘And my soul, Dumbledore? Mine?’

These words speak more than anything about 'the bravest man' we know. It speaks of how he had been ceaselessly working to refine his soul from the moment Dumbledore offered an enlightened world for him. They reveal how Snape, at last, got a person in his life whom he could touch with all the unromantic feelings possible between two closed persons. It speaks of the pain of Severus Snape, as well as the love within him. While his love for Lily set him on the right path, the love of Dumbledore was his constant companion on this path.

WARNING: Images that can break your brain — McCollough Effect

Vaibhav Sharma — Mon, 24 Aug 2020 12:30:00 GMT

Earworm or Sticky Music Syndrome refers to the phenomenon when a catchy piece of music continually repeats through a person’s mind after it’s no longer playing. It’s an annoyance mostly, but to be honest I sometimes use it to play music in my head while commuting, when I forget my earphones at home.

We are told to remember the idea, not the man, because a man can fail. He can be caught, he can be killed and forgotten, but 400 years later, an idea can still change the world.

\—V for Vendetta

But what if I told you there exists a scary SCARY thing that can enter your head through your eyes and can break your brain for a very long time?! This scary phenomenon is called the McCollough Effect. Now you may ask what exactly is this McCollough Effect and how does it work? The answer is there exists a set of images that when exposed to can literally break how your brain works! And the scariest part is that its effects can last up to 3 months! But, before we proceed, I must warn you that this isn’t a joke, this is a real phenomenon with no absolute guarantee on how long the effects can last. So please, do not try this. And I’m fully aware that the internet is not really known for people following safety warnings, but guys, this is a truly terrifying phenomenon and shouldn’t be taken lightly.

Induction Images

Coming back to the effect. As you can see, there exists a set of two oppositely coloured images with oppositely oriented black bars in them. The subject has to merely stare at them for a certain amount of time, called induction, for this phenomena to occur. After a successful induction, when the subject is exposed to test images which are black and white sets of oppositely oriented bars, they see opposite colours between the white spaces of corresponding induction images. So, for example, if the horizontal induction image had red colour between the bars and the vertical induction image had green, the subject will see green between the horizontal bars and red between vertical bars in test images. This phenomenon is not just limited to these particular induction and test images, as it also occurred with people who worked long periods on old computer monitors that displayed green texts on black background. These people reported seeing pink colour between the letters of black texts on a white background of books with the same spatial frequency between the alphabets, as the monitors.

Test Images

As to why this happens, there is a flurry of research papers that try to explain this phenomenon from various standpoints. Some say it’s because of classical conditioning, others attribute it to neurological reasons, but the explanations are highly debated with no conclusive evidence to one particular explanation. And this lack of a conclusive explanation makes it particularly dangerous, as the term of effect varies from person to person, and can even become permanent. So once again try it at your own risk.

Apne Apne Bhagwaan — अपने अपने भगवान

Vyom — Sun, 16 Aug 2020 12:30:00 GMT

A powerful poem by my friend who writes under the pen-name "Vyom".

अजीब सा माहौल है,
मानो सब गोल मोल है
कोई इधर, कोई उधर,
सब के सब है तीतर बितर

कोई है मग्न यहाँ राम में,
किसी की जान है क़ुरान में
कोई भगवे में हो रहा है लीन,
तो कोई हरा भरा है रात दिन

कोई मांगता रहे रिहाई,
की खतरे में हैं सारे भाई
कहीं डर का माहौल है,
कहीं खुल रही अब पोल है

कोई चीख़ता - चिल्लाता यहाँ
कोई बम से उड़ाता यहाँ
कोई मस्जिद को है तोड़ रहा
कोई मंदिर का ईंटा जोड़ रहा

अजीब सख्त वक्त है
गिर रहा हर तख्त है
हर खून मानो सो रहा
है काल मानो रो रहा

हर शख़्स किसी से लड़ रहा
खुदा भी अब तो डर रहा
इनसानियत ही है खुदा
खुदा से ना कोई जुदा
संभल जा तू अब मान जा
इस बात को अब जान जा

ये बात भी ना सच्चा हो
सिर्फ खुदा का बंदा अच्छा हो
सिर्फ राम नाम का ही बोल रहे
इन बातों का फिर क्या मोल रहे?

हर बात को है जानता,
वो सबको ही तो मानता
इनसानियत बनाई जिसने, तू उसे ही बचा रहा!
दुनिया बनाई जिसने , तू उसे दुनिया दिखा रहा!

दया रखो, धर्म करो
ये पाठ जो है बोलता
दंगे करवाके, हिंसा अपना के
उनके मूल्यों को है तू तोलता!

राम तू, क़ुरान तू,
नानक साहब का ज्ञान तू
सच्ची समझ जो आ जाये,
तो परमेश्वर रूपी इंसान तू!

— व्योम

The Interesting World of Bees

Vaibhav Sharma — Fri, 24 Apr 2020 12:30:00 GMT

Bees are one of the most fascinating creatures in the world. In the alleys of the internet there’s a popular meme that gets passed around - “According to Albert Einstein if honey bees were to disappear from the earth, humans would be dead within four years”. While there’s no evidence that Einstein said so, or that the apocalyptic prophecy mentioned would occur, what’s true though is that it’ll certainly cause mass starvation. Bees pollinate about 80% of the world's plants including 90 different food crops. That’s about one third or one-fourth of all the agricultural food crops! Not only are they very helpful, but their life is also very very interesting.

It all begins when worker bees decide to raise a new queen. They pick a few eggs and build a peanut-shaped ‘Queen Cell’ around them. These special eggs hang in the hexagonal honeycomb. But the journey to royalty isn’t easy. The first to emerge kills all the other candidates before they can reach adulthood. If multiple queens hatch simultaneously, they’ll fight to death. And only one comes out as a victor. This is pretty much the only time the queen uses their stinger.

These queens-to-be candidates are the only one fed the ‘Royal Jelly’, a substance secreted by the workers, their entire life, even in adulthood. This ‘Royal Jelly’ helps them reach sexual maturity with active ovaries. The competition and pressure are so high that they mature ~ 25% faster than normal workers. The Queen’s only job is to lay eggs. But, her pheromones also help keep the hive healthy.

She mates once at the beginning of her life, then lays more than a thousand eggs a day during summer for up to five years. But not all eggs get fertilised. The fertilised eggs they lay become female worker bees, and the non-fertilised eggs become male drones. The female fertilised eggs are fed ‘Royal Jelly’ for the first two days, then switched to a diet of pollen and honey. This change in diet causes hormonal changes that prevent worker bees from attaining sexual maturity. They make up about 85% of the population and they are the ones who do all the important tasks like nectar collection, taking care of eggs, males and the queen etc keeping the hive running smoothly

The unfertilised eggs that become male make up about 15% of the total population of the hive. This interesting distinction in the sex of male drone bees, means they have only half the chromosomes of their sisters. And no father! These drones are mostly useless, can’t even feed themselves. They have only one goal in life -- To try and mate with a virgin queen from another hive. If they succeed, they die, if not they get killed, or evicted before the winter arrives.

Mushroom Stroganoff with Smetana (Sour Cream) Recipe

Vaibhav Sharma — Mon, 23 Mar 2020 12:30:00 GMT

Mushroom Stroganoff is a Russian dish of sautéed pieces of Mushroom served in a sauce with smetana (sour cream). Best enjoyed with rice and a side of sautéed vegetables. It can be made in ~ 1 hour.

Ingredients

200g Button Mushrooms
1 medium Onion
3 Green Chillies
1 tablespoon All Purpose Wheat Flour
½ cup Sour Cream
3 tablespoon Butter (or Olive Oil)
½ teaspoon Ginger Garlic Paste
½ teaspoon Italian Herb Mix
¼ teaspoon Black Pepper
½ teaspoon Salt

Preparations

Vegetables

Cut the mushrooms in long, ¼ centimetre thick strips, along the stem.
Mince onion and green chillies.

Mushroom Broth

Before we begin we first need to prepare Mushroom Broth.

Heat a tablespoon of butter in a non stick pan and let it sizzle.
Add the chopped mushrooms.
Stir it till the mushroom starts releasing water.
Cook till they are beginning to get brownish.
Add water, let it boil for a minute.
Separate the mushrooms and the broth using a strainer.

Steps to Make

Sprinkle the mushrooms with salt, pepper and herbs. Set it aside.
Melt a tablespoon of butter in a non stick pan.
Add a tablespoon of flour, cook it for 2 minutes, stirring constantly.
Gradually add the mushroom broth while stirring, cook it till it becomes smooth and thick. Set the prepared broth sauce aside.
Heat up another tablespoon of butter, add the minced onions and green chillies. Cook till the onions begin to get brown.
Add garlic ginger paste and mix well.
Quickly add mushrooms, and cook till they are brown.
Add the thickened broth sauce we prepared earlier, cover and cook for 10 minutes on low. Stirring every few minutes.
Stir in the sour cream, cook it up but don’t let it boil.
Garnish it with Herbs and Enjoy.

Pro Mode of our Brain – Awareness

Vaibhav Sharma — Sat, 12 Oct 2019 12:30:00 GMT

We all have done embarrassing things, taken bad decisions and primarily - said some bad things in the haze of the moment. Things that still traumatise us every time their thoughts cross our heads. We often ask ourselves - 'What was I thinking?!'. We can't seem to fathom, how we didn't consider certain information while taking a certain decision, despite knowing it in the back of our heads. And maybe it's a bias, but I feel that for some reason I tend to do it more than average people. It could be anything from murmuring to myself while in a crowded metro or making faces while eating alone, to blurting out inappropriate and or hurtful things. It's so bad that I'm scared every time I let myself zone out, as I don't totally trust myself in 'Auto' Mode.

Yes, that's right, just like a DSLR Camera has an 'Auto' Mode and a 'Pro' Mode, I believe that we also have two types of modes in our brain. Take this for an example, if I ask you what's 2 + 2 - 1 you can answer it without thinking. Quick Mafs amirite! I mean of course we do think, but it's almost as if the answer comes to us as a reflex. It's not the same as if I ask you to calculate what's 15 times 23 in your head. Most people can multiply two digits number in their head, given enough patience. But, the mental effort required, compared to a simple 2 + 2 - 1 would be vastly different. Musicians and athletes call this muscle memory, even though the memory technically still is stored in our brain.

In psychology, one way to model how our brains work is to imagine that it's made up of two systems, psychologists call it System 1 and System 2, or as I like to call it Auto Mode and Pro Mode. Basically what that means is that Pro Mode is your conscious part, and the part, that you think you are as an individual and Auto mode is your subconscious part. Pro Mode of our brain is slow and uncomfortable, it takes effort to operate, but it's careful, and can catch and fix errors. Auto Mode is fast and can process huge amounts of data with relatively very minimal effort, but is prone to error. Not just that, with practice and deliberate effort we can improve our auto mode, to do complex things with ease just like simple things that it already does. But the motive behind this article isn't to improve Auto Mode. This is about my dealings with getting control over the Pro Mode. To be able to engage it with ease without having to feel resistance and discomfort.

My incredibly buggy Auto mode and inability to fully control my Pro Mode made me fascinated with elegant solutions, quick wits and when people did critical thinking in impromptu situations. It shaped my belief in such a way that for me truly great things are usually simple solutions to seemingly unknown problems that affect our every day. Social networks, for example, were born out of the need for humans to be social. Many people believe that it was social networks that destroyed the culture of actually interacting with people instead of keeping in touch online. Whereas the truth is as we developed more and more our work-life started becoming more demanding, we had less time to do what is an integral part of being human, socialising. We just found a solution to this cultural shift in the shape of social networks. The reason those people have this perspective is simply that, a cultural shift was a problem that they didn't realize humans had. This fascination and love for the elegant conscious decisions grew into what would become my life goal -- to make something that would not only reach the entire world but also help it. And, I realized that to achieve that goal I would have to 'fix' my Auto Mode and get more in control of my Pro Mode.

But before I could do that, I would have to go through a painful process of realising that to become what I wish to see myself as and to achieve what I wish to do in life I would have to switch to Pro Mode. That came to me when someone very close to me started being emotionally abusive towards me casually. Having known that person for a long time I knew that, malice couldn't have been the cause. All I could complain about was that they were hurtful, without ever being able to fully explain how. To explain it clearly and rather make them realise, I started by trying to understand what they were doing to me and more importantly, why and why couldn't they stop? The first part of that question only required me to document how they made me feel bad/hurt. However, to find the answer to the second part I had to dig through my history to find and remember similar events to try to understand the mindset. I realised that that person was doing these things in Auto Mode, and couldn't stop because of the giant ego that their Pro Mode came with. When I figured out I have in fact done similar things in Auto Mode in the past, I had to fix that about myself. If one thing I do not like about being human is how hypocritical our lives are. Both knowingly and unknowingly.

But the silver lining to this experience was that I realized a few important things, first the reason of the goal in my life and the path towards achieving it, second, that it is possible to learn to process complex thoughts, and take aware actions in the same way we can walk upright and maintain our balance without thinking, You must be thinking that "Vaibhav you are comparing apples to oranges!". The mental effort required differs by a vast difference between processing complex thoughts and walking. What you may not realize is how many complex calculations the brain does to just maintain balance standing still upright, let alone walking. If you have watched videos of some people abusing weird looking robots, you may be familiar with their creators, Boston Dynamics. The scientist working for Boston Dynamics would perhaps best tell you how complex these simple actions are. In fact, it's so complex to mimic human-like walking that we still haven't been fully able to do so. And since we all know that walking is an acquired behaviour in humans, something that we have to learn, not only that we learn to do a lot of things which become our second or first nature, which is very complex at their core.

So I began trying to become more 'aware' and to take more and more control of my actions in life. I began by simple things, like trying to feel and remember every bite of my meal, remembering the faces in commute, and of course, being more considerate while speaking something, etc. I was resolute about getting 100% of my life in my own control. Ironically assuming that, Auto Mode is just a bug in my system entirely and not something that evolution planned before putting in our system. The hard reality came crashing to me when I realized that I am after all a mere mortal, that no matter how aware I become I'm still prone to making mistakes. And, being aware of trivial mistakes that I make - hurts more, takes longer to get over, and takes up precious space in RAM. This made me realize the importance and purpose of the Auto Mode. There's a reason why scientists and critical thinkers are generally sad. The good news is that this means that Auto Mode is just smart memory management by nature and that being able to do things in Auto Mode freed up my head for something more resource-heavy. From then on it was easy to make a connection to the fact that we get the best of our ideas while we are in the toilet, in the shower or while taking a walk, basically mundane things. Leaving us alone with our thoughts, freeing up our Pro Mode.

Don't get me wrong the purpose of the article isn't to say that we should all be on Pro Mode all the time. Rather, from my experience, I found that while Pro Mode is a good thing there's a reason Auto Mode exists. You can't be wasting an hour to select what would be an appropriate attire to wear, or which toothbrush to buy. There are definitely times where Auto Mode is the appropriate mental state, we evolved it for a reason after all. It makes us more efficient and intuitive. It’s the getting over the discomfort in engaging our Pro Mode that’s important. The key is to identify where your priorities lie and that you are not lulled into the false comfort of cognitive ease that our Auto Mode provides hindering our path to success. Also, it's always nice to be considerate.

The Egg by Andy Weir in Hindi

Andy Weir — Sun, 08 Sep 2019 12:30:00 GMT

This is my attempt at Hindi translation of popular short story The Egg by Andy Weir (author of The Martian, Artemis). Written with the permission of Andy Weir.

द एग (एक अंडा) - ऐंडी वीयर

तुम घर जा रहे थे, जब तुम मर गए।

यह एक कार दुर्घटना थी। विशेष रूप से उल्लेखनीय कुछ भी नहीं, लेकिन फिर भी घातक। तुम अपने पीछे एक पत्नी और दो बच्चे छोड़ गए। यह एक दर्दनाक मौत थी। डॉक्टरों ने तुम्हें बचाने की पूरी कोशिश की, लेकिन कोई फायदा नहीं हुआ। तुम्हारा शरीर इतना खराब हो चुका था कि यही बेहतर था, विश्वास करो।

और तब तुम मुझसे मिले।

"क्या ... क्या हुआ?" तुमने पूछा "मैं कहाँ हूँ?"

"तुम मर गए", मैंने कहा, सीधी बात। शब्द टटोलने में कोई फायदा नहीं है।

"वहाँ एक ... एक ट्रक था और वह फिसल रहा था ..."

"हाँ", मैंने कहा।

"... मैं मर गया?"

"हाँ। लेकिन इसके बारे में चिंता मत करो। हर कोई मर जाता है”, मैंने कहा।

तुमने चारों ओर देखा। कुछ भी नहीं था। सिर्फ तुम और मैं। "यह जगह क्या है?", "क्या यह मरणोत्तर जीवन है?"

"हाँ भी और नही भी", मैंने कहा।

"क्या आप भगवान हैं?", तुमने पूछा।

"हाँ," मैंने जवाब दिया। "मैं भगवान हूं।"

"मेरे बच्चे ... मेरी पत्नी", तुमने कहा।

"उनके बारे में क्या?"

"वे सब ठीक हो जाएंगे?"

"मुझे यह देखना पसंद है", मैंने कहा। “तुम मर गए और तुम्हारी मुख्य चिंता तुम्हारे परिवार के लिए है। यह अच्छा है। ”

तुमने मुझे मोह से देखा। तुम्हारे लिए, मैं भगवान की तरह नहीं दिख रहा था। मैं बस किसी इंसान की तरह लग रहा था। या संभवतः एक महिला। कोई अस्पष्ट अधिकारिक व्यक्ति, हो सकता है। सर्वशक्तिमान से अधिक एक स्कूल शिक्षक लग रहा था।

"चिंता मत करो", मैंने कहा। "वे ठीक हो जाएंगे, तुम्हारे बच्चे तुम्हें निष्कलंक याद करेंगे। उनके पास तुम्हारे लिए उपेक्षा बढ़ाने का समय नहीं था, तुम्हारी पत्नी बाहर से रोएगी, लेकिन अंदर से राहत पाएगी। निष्पक्षता से कहूं तो, तुम्हारी शादी टूट रही थी। यदि यह कोई सांत्वना है, तो वह राहत महसूस करने के लिए बहुत दोषी महसूस करेगी।"

"अच्छा," तुमने कहा। "तो अब आगे क्या? क्या मैं स्वर्ग या नरक या कुछ और... जाऊँगा? ”

"नहीं", मैंने कहा। "तुम पुनर्जन्म लोगे।"

"अच्छा", तुमने कहा। "तो हिंदू सही थे",

"सभी धर्म अपने तरीके से सही हैं", मैंने कहा। "मेरे साथ चलो।"

हम शून्य में आगे बढ़े। "हम कहा जा रहे है?"

"विशेष रूप से, कहीं नहीं", मैंने कहा। "जब हम बात करते हैं, तो चलना अच्छा लगता है।"

"तो फायदा क्या हुआ?" "जब मुझे पुनर्जन्म मिलेगा, तो मैं सिर्फ एक खाली स्लेट हो जाऊँगा, है ना? एक बच्चा। इसलिए मेरे सभी अनुभव और इस जीवन में मैंने जो कुछ भी किया वह कोई मायने नहीं रखता था।"

"ऐसा नहीं है!" मैंने कहा। “तुम अपने भीतर अपने सभी पिछले जन्मों का ज्ञान और अनुभव रखते हो। तुम उन्हें अभी याद नहीं कर सकते। ”

मैने रुक कर, तुम्हारे कंधे पर हाथ रखा। "तुम्हारी आत्मा, तुम्हारी संभवतः कल्पना से अधिक शानदार, सुंदर, और विशाल है। एक मानव मन में केवल वही छोटा अंश हो सकता है जो वह हैं। जैसे यह देखने के लिए कि पानी गर्म है या ठंडा, तुम पानी में अपनी उंगली डालते हो। वैसे ही तुमने अपना एक छोटा हिस्सा, भौतिक अस्तित्व में डाल देते हो, और जब तुम इसे वापस लाते हो, तो तुम्हारे पास पहले से अधिक अनुभव प्राप्त हो जाता है।

"तुम पिछले 48 वर्षों से एक मानव में हो, इसलिए तुमने अभी तक इसे नहीं फैलाया है और अपनी शेष चेतना को महसूस नहीं किया है। यदि हम लंबे समय तक यहां रहते हैं, तो तुम्हें सब कुछ याद आने लगेगा। लेकिन प्रत्येक जीवन के बीच ऐसा करने का कोई मतलब नहीं है।”

"मैंने कितनी बार पुनर्जन्म लिया हैं, फिर?"

“ओह बहुत सारे। करोडों से भी ज़्यादा। विभिन्न जीवों के बहुत सारे जन्म।”, मैंने कहा। "इस बार, तुम 540 ई। में एक चीनी किसान लड़की होगे।"

"रुको, क्या?" तुम हकलाए। "क्या आप मुझे समय में वापस भेज रहे हैं?"

“कह सकते हो। समय, जैसा कि तुम इसे समझते हो, केवल तुम्हारे ब्रह्मांड में मौजूद है। जहां मैं आता हूं वहां चीजें अलग होती हैं। ”

"आप जहां से आते हैं?" तुमने पूछा।

"हाँ", मैंने समझाया "मैं भी कहीं से आता हूं। कहीं और। और मेरे जैसे और भी हैं। मैं जानता हूं कि तुम जानना चाहते हो कि वहां क्या है, लेकिन ईमानदारी से कहूं तो तुम समझ नहीं पाओगे।”

"ऐसा क्या", तुमने थोड़ा निराश होकर कहा। "लेकिन रुकें। यदि मैं समय में अन्य स्थानों में पुनर्जन्म लेता हूं, तो मैं किसी वक्त में खुद से बातचीत कर सकता था ”

"ज़रूर। अनेक बार होता भी है। लेकिन, दोनों को, केवल अपने स्वयं के जीवन के बारे में पता होता है इस वजह से वो दोनों यह जान भी नहीं पाते हैं। "

"इन सब का मतलब क्या है?"

"सच में जानना चाहते हो?" मैंने पूछा। "सच में? तुम मुझसे जीवन का अर्थ पूछ रहे हो? क्या यह थोड़ा घिसा-पिटा नहीं है? ”

"यह एक उचित सवाल है", तुम कायम रहे।

मैंने तुम्हारी आँखों में देखा। "जीवन का अर्थ, जिस कारण से मैंने इस पूरे ब्रह्मांड को बनाया है, वह यह है की ताकि तुम परिपक्व हो जाओ।"

“आप का मतलब है मानव जाति? आप चाहते हैं कि हम परिपक्व हों। ”

"नहीं, सिर्फ तुम, मैंने यह पूरा ब्रह्मांड सिर्फ तुम्हारे लिए बनाया है। प्रत्येक नए जीवन के साथ तुम बड़े होते हो और परिपक्व होते हो और एक बड़ी और महान बुद्धि बन जाते हो। "

"सिर्फ मैं? बाकी सब के बारे में क्या? ”

"कोई और नहीं है", मैंने कहा। "इस ब्रह्मांड में, सिर्फ तुम और मैं हैं।"

तुमने मुझे घूर कर देखा। "लेकिन पृथ्वी पर सभी लोग ..."

“सब तुम। तुम्हारे विभिन्न अवतार”

"रुकिए। मैं सब हूँ! "

"अब तुम इसे समझ रहे हो", मैंने पीठ पर एक बधाई वाली थपकी के साथ कहा।

"मैं हर वह इंसान हूँ जो कभी रहता था?"

"या जो कभी जीएगा, हाँ।"

"मैं महात्मा गाँधी हूँ?"

"और नाथूराम गोडसे भी", मैंने कहा।

"मैं हिटलर हूं?"

"और उसके मारे गए लाखों लोग भी हो।"

"मैं यीशु हूँ!"

"और तुम उसके पीछे चलने वाले सभी लोग भी हो।"

तुम चुप हो गए।

"हर बार जब तुम किसी को पीड़ित करते थे", मैंने कहा, "तुम खुद को पीड़ित कर रहे थे।" तुम्हारे द्वारा किया गया दया का हर कार्य, आपने स्वयं से किया गया है। किसी भी इंसान द्वारा अनुभव किए गए हर खुश और दुख की घड़ी, तुम्हारे द्वारा अनुभव की जाएगी।”

तुमने लंबे समय तक सोचा।

"क्यों?" तुमने मुझसे पूछा। "यह सब क्यों?"

"क्योंकि किसी दिन, तुम मेरी तरह बन जाओगे। क्योंकि यही तुम्हारी सच्चाई है, तुम मेरी तरह हो। तुम मेरे बच्चे हो"

"क्...क्या", तुमने अविश्वसनीयता के साथ कहा। "आपका मतलब है, कि मैं भगवान हूँ?"

"नहीं। अभी नहीं। अभी तुम एक भ्रूण हो, तुम अभी भी बढ़ रहे हो एक बार जब तुम, हर समय में, हर जीवन जी लोगे, तब तुम पैदा होने के लिए तैयार हो गए होगे। ”

"तो पूरा ब्रह्मांड", तुमने कहा, "एक ..."

"एक अंडा है।" मैंने जवाब दिया। "अब तुम्हारे अगले जीवन के लिए आगे बढ़ने का समय आ गया है।"

और मैंने तुम्हें अपने रास्ते पर भेज दिया।

5 Classy-ish French Insults

Vaibhav Sharma — Sun, 01 Sep 2019 12:30:00 GMT

The lockdown due to the pandemic has been rough. Everyone’s trying to find a productive hobby to make the most of it. And me being no different, tried to learn Le Français. While learning a language is rewarding in itself, it gets a bit tedious after a while. After a while, you start understanding that the bookish language you learn is mostly useless IRL conversations. To my immense surprise, I learnt that the native speakers don’t exactly use “J’ai une baguette et un croissant”, all that much.

Pardon my French.

So, I decided that I need to change my strategy and learn some actually useful lines. And where better to start than from insults. Here are some of my favourite, classy-ish french insults that I found most interesting.

Et mon cul, c'est du poulet?

Literally - And is my ass made of chicken?! This hilarious line isn’t really an insult per se, instead used as a sarcastic retort when someone is trying to bullshit you.

Si les cons volaient, tu serais chef d'escadrille

Literally - If the idiots flew, you would be a squadron leader! Now, this is a proper insult, grand and extravagant, just what you expect from the French. It’s used to call someone - The Idiot-in-Charge.

Va te faire cuire un oeuf

Literally - Go make yourself an egg! When a French person tells you to go make yourself an egg, it means they are annoyed at you. It’s the French way to say Fuck Off or Sod Off! The origin of this is said to be the old common domestic argument - ‘When a husband would criticise his wife’s cooking, she’d ask him to cook himself.’

Intellectuellement, il vit au dessus de ses moyens

Literally - Intellectually, he lives beyond his means. Popularly used by famous Haitian-Canadian novelist and journalist Danny Laferrière. This is a perfect insult for someone exhibiting The Dunning-Kruger Effect.

Il a été bercé trop près du mur

Literally - He was rocked too close to the wall. This hilarious insult is my personal favourite. It’s used to subtly imply that one has mental damage due to being accidentally rocked against a wall when they were an infant. The subtlety of this insult is what makes this so funny. I literally laughed for 5 minutes straight when I first read it.

Which one was your favourite, do you have any that I missed? Do let me know in the comments below.

Fit Bounds of a Polyline and Marker with react-google-maps

Vaibhav Sharma — Tue, 16 Jul 2019 12:30:00 GMT

When we started working on a Live Flight Tracker for my company, we chose to use react-google-maps as our library. Since it's the most popular one, with over 4K stars on Github. I did have some experience with it but that was nowhere enough for the problem I was about to face. Especially, with very inadequate documentation and not enough examples showing the usage of the library.

What we were trying to accomplish was to trace the flight path, and show the current position of the said flight. In theory, the first part was simple enough to do with a simple Polyline, so was the second part with a simple Marker. But there was a third part to it — to display both, the Polyline & the Marker in the same bounding box of the visible map with an appropriate amount of zoom. This should have been easy as well given that we knew that there's a helper function provided by Google Maps that helps us calculate bounding box. But implementing it in the context of react-google-maps wasn't as simple due to lack of examples online. So, after I was done, I decided to save "noobs" like me from the trouble I faced.

Writing the Map Component

First, we begin by making the Map Component that will display our Polyline & Marker, which is simple enough, but let me show anyways so that we are on the same page.

We begin by initializing our Google Maps in our Component which is wrapped in withScriptjs & withGoogleMap HOCs.

import React, { Component } from 'react'
import { withScriptjs, withGoogleMap, GoogleMap, Polyline, Marker } from 'react-google-maps'

export const CustomMapComponent: React.ComponentClass<any> = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultCenter={props.defaultCenter}
    defaultZoom={3}
    options={{
      streetViewControl: false,
      mapTypeId: 'satellite',
    }}
  >

  </GoogleMap>
))

Then we add Polyline that will trace the flight path. We pass an array of lat & lng to the path prop.

...

  <GoogleMap
    defaultCenter={props.defaultCenter}
    defaultZoom={3}
    options={{
      streetViewControl: false,
      mapTypeId: 'satellite',
    }}
  >
    <Polyline
      path={props.path}
      options={{
        geodesic: true,
        strokeColor: '#669DF6',
        strokeOpacity: 1.0,
        strokeWeight: 2,
      }}
    />
  </GoogleMap>

...

Next, we add Marker to show the current position of our aircraft. We pass the current position object made up of lat & lng to it, which in our case is just the last position in our path array.

...

  <GoogleMap
    defaultCenter={props.defaultCenter}
    defaultZoom={3}
    options={{
      streetViewControl: false,
      mapTypeId: 'satellite',
    }}
  >
    <Polyline
      path={props.path}
      options={{
        geodesic: true,
        strokeColor: '#669DF6',
        strokeOpacity: 1.0,
        strokeWeight: 2,
      }}
    />
    <Marker
      position={props.currentPosition}
      defaultIcon={
        { url: '/static/images/flight-marker.png', scaledSize: { height: 16, width: 16 }, anchor: new google.maps.Point(8, 8) }}
    />
  </GoogleMap>

...

Using the Map Component

Using it is simple enough just import the above component, pass it the required props one of them being your Google Maps API key URL.

class FlightPathTracker Component<any, any> {
  componentDidMount(): void {
    ...
  }

  render() {
    const {path, defaultCenter, currentPosition} = this.props
    return(
          <CustomMapComponent
            {/* add all the other required props */}
            ...
            {/* add all the other required props */}
            googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAP_API_KEY}`}
            defaultCenter={defaultCenter}
            path={path}
            currentPosition={currentPosition}
          />
    )
  }
}

Just go ahead and run it and check to see if everything is working. You'll see that when the map mounts the viewport zooms and fits the Marker as the default. But our objective is to fit the Marker as well as the Polyline.

Setting the Bounding Box for both Polyline & Marker

Now comes the tricky part, to set bounds we first let the map we created above mount, then we get a ref from our map component, we pass it to a mounted map handler method, where we set the bounds. We begin by adding the handler function as a prop to the ref of our map component.

...

  <GoogleMap
    defaultCenter={props.defaultCenter}
    defaultZoom={3}
    options={{
      streetViewControl: false,
      mapTypeId: 'satellite',
    }}
    ref={props.onMapMounted}
  >

Next, we write the handleMapMounted method, where we first initialize Google's LatLngBounds() object. Then we for each position in the path array we extend that object. And, finally, we pass that object to our map.

...

class FlightPathTracker Component<any, any> {
  ...

  handleMapMounted = (map) => {
    const { path } = this.props
    
    this._map = map
    if (map) {
      const bounds = new google.maps.LatLngBounds()

      path.map(position => {
        bounds.extend(position)
      })
      
      this._map.fitBounds(bounds)
   
    }
  }

...

Finally, we pass this method to the CustomMapComponent as a prop and voila.

...

          <CustomMapComponent
            {/* add all the other required props */}
            ...
            {/* add all the other required props */}
            googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAP_API_KEY}`}
            defaultCenter={defaultCenter}
            path={path}
            currentPosition={currentPosition}
            onMapMounted={this.handleMapMounted}
          />

...

Now run your app to see if everything is working and we are done.

Formik and Yup with Netlify Forms for React Apps

Vaibhav Sharma — Sun, 16 Jun 2019 12:30:00 GMT

Netlify Forms is yet another amazing service provided by Netlify with a generous free tier. For those who don't know, it allows you to set up a form and take submissions without needing a backend. The form data is not only stored in your dashboard, but you can also directly get a notification on any email address! Sounds interesting right?! As we start implementing you'll find out just how easy it is to set up if you know basics of React. Although I should mention it's not just a React only feature, you can set it up with basic HTML as well!

Setting Up Formik Form

We're gonna first install Formik:

yarn add formik

Then we create a Function Component called ContactForm.js, in it, we'll begin by setting up Formik and it's required props - initialValues, onSubmit & render).

ContactForm.js:

import React from 'react'
import { Formik, Field } from 'formik'

const ContactForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '', message: '' }}
      onSubmit={values => console.log(values)}
      render={({
        isSubmitting,
        handleSubmit,
        handleReset,
      }) => (
        <form className='form'
          name='contact'
          onSubmit={handleSubmit}
          onReset={handleReset}
          data-netlify='true'
          data-netlify-honeypot='bot-field'
        >
          <div className='field'>
            <label htmlFor='name' className='label'>Name</label>
            <Field
              className='input'
              type='text'
              name='name'
            />
          </div>
          <div className='field'>
            <label htmlFor='email' className='label'>Email</label>
            <Field
              className='input'
              type='text'
              name='email'
            />
          </div>
          <div className='field'>
            <label htmlFor='message' className='label'>Message</label>
            <Field
              className='input-textarea'
              name='message'
              component='textarea'
              rows='6'
            />
          </div>
          <div className='buttons'>
            <input type='reset' value='Clear'
              className='button' />
            <input name='submit' type='submit' disabled={isSubmitting} value='Send Message'
              className='button' />
          </div>
        </form>
      )}
    />
  )
}

export default ContactForm

You might've noticed that we have also added a flag for Send Message Button to be disabled while submitting. This is to prevent unwanted behaviour.

This is a basic Contact form with fields for Name, Email & Message. Next, we set up validation using Yup.

Creating a Validation Schema for Contact Form

Yup is a form validation library and has tight integration with Formik. Yup helps us define schema like Joi and validate against it. Add it to your project:

yarn add yup

Create a file called validationSchema.js and create a schema as shown below:

validationSchema.js:

import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
  name: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Name is Required!'),
  email: Yup.string()
    .email('Enter a Valid Email!')
    .required('Email is Required!'),
  message: Yup.string()
    .required('Message is Required!'),
})

export default validationSchema

Import the above file and add it to formik's validationSchema prop.

ContactForm.js:

import React from 'react'
import { Formik, Field } from 'formik'
import validationSchema from './validationSchema'

const ContactForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '', message: '' }}
      validationSchema={validationSchema}
      onSubmit={values => console.log(values)}
    ...

Writing form On Submit method

In on Submit function of Formik Component, we'll replace console.log with a application/x-www-form-urlencoded fetch request. But before we do that we need to make an uri component encoder (you can use third-party library if you like).

ContactForm.js:

...
import validationSchema from './validationSchema'

const encode = (data) => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    .join('&')
}

const ContactForm = () => {
...

Now we write the onSubmit method, the fetch request has to be made to home path ie /. We also called setSubmitting method, which will be used to change the state of isSubmitting flag.

ContactForm.js:

...
onSubmit={(values, { setSubmitting }) => {
        fetch("/", {                                 
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: encode({
            'form-name': 'contact',
            ...values,
          }),
        })
          .then(() => {
            alert('Success!')
            setSubmitting(false)
          })
          .catch(error => {
            alert('Error: Please Try Again!')                            
            setSubmitting(false)
          })
      }}
...

If you are using Gatsby JS, especially gatsby-plugin-offline then you'll need to add ?no-cache=1 along with / or it won't work.

ContactForm.js:

...
fetch("/?no-cache=1", {   
...

Displaying Validation Errors to User

To display the validation errors we need to use two params from render method touched & errors. touched object tells us if the user has touched the field, and errors object tell us the errors. We are gonna display the errors if the user has touched the field and there's an error for that field.

ContactForm.js:

...
      render={({
        touched,
        errors,
        isSubmitting,
        handleSubmit,
        handleReset,
      }) => (
        <form className='form'
          name='contact'
          onSubmit={handleSubmit}
          onReset={handleReset}
          data-netlify='true'
          data-netlify-honeypot='bot-field'
        >
          <div className='field'>
            <label htmlFor='name' className='label'>Name</label>
            <Field
              className='input'
              type='text'
              name='name'
            />
           {touched.name && errors.name && <p className='danger'>{errors.name}</p>}
          </div>
          <div className='field'>
            <label htmlFor='email' className='label'>Email</label>
            <Field
              className='input'
              type='text'
              name='email'
            />
           {touched.email && errors.email && <p className='danger'>{errors.email}</p>}
          </div>
          <div className='field'>
            <label htmlFor='message' className='label'>Message</label>
            <Field
              className='input-textarea'
              name='message'
              component='textarea'
              rows='6'
            />
           {touched.message && errors.message && <p className='danger'>{errors.message}</p>}
          </div>
          <div className='buttons'>
            <input type='reset' value='Clear'
              className='button' />
            <input name='submit' type='submit' disabled={isSubmitting} value='Send Message'
              className='button' />
          </div>
        </form>
      )}
    />
...

And with this, we are finally done. Now according to our validation Schema:

'Name', 'Email' & 'Message' are required fields.
'Name' should be minimum 2 characters and maximum 50 characters.
'Email' field should have a valid email.
And 'Message' field cannot be empty.

I hope this helps you, happy coding.

Creamy MushRome Mushroom Recipe

Vaibhav Sharma — Sat, 23 Mar 2019 12:30:00 GMT

This dish is something of my experiment, but extremely tasty. Best enjoyed with Garlic Naan or Rice.

Ingredients

250g Button Mushrooms
4 Green Chillies
1 Red Bell Pepper / Capsicum
1 Green Bell Pepper / Capsicum
1 Yellow Bell Pepper / Capsicum
2 Medium Sized Onions
Butter
Cream
Garlic Paste
Oregano-Garlic Powder Mix
Red Chilli Sauce
Cardamom Powder
Garam Masala
Salt

Preparation

Chop mushrooms in quarters
Finely chop 2 green chillies And Slit other 2 in half for garnishing
Cut thin slices of Bell Peppers
Slice onions in a ring shape

Cooking Steps

Melt butter in a non-stick pan, add garlic paste, chopped green chillies, onions and bell peppers. Saute them till onions turn pink
Add mushrooms and cook them till they turn golden brown
Sprinkle garam masala, oregano-garlic powder liberally and add a pinch of cardamom powder to enhance fragrance of our dish
Add 2 Spoons of red chilli sauce, enough to coat all the mushrooms
Pour 4-5 tablespoons of cream and keep stirring to mix everything well
Cook for 15-20 mins, make sure to keep stirring, and that's it.

TIP: Add Bhuna-Masala in step one to make it even spicier, if it wasn't enough kick for you!

Setting up i18n with TypeScript in Next JS Project

Vaibhav Sharma — Sun, 10 Mar 2019 12:30:00 GMT

As I was starting a new NextJS project, I planned to do it in TypeScript. Since I don't know TypeScript, my initial plan was to learn as I go. Comes the time I had to set up i18n using next-i18next plugin, and it was a bit problematic as there was no example for it on the official next-i18next repository. After I successfully learnt how to do it, I did make a PR for typescript example on the original repo but this is in case it doesn't get accepted.

Setting up next-i18next in a TS Next app, has 3 parts:

Setting Up TypeScript Next App
Adding Custom Server
Implementing next-i18next

Today we'll set up a simple Next app which will have two pages and an option to change the language.

Setting Up TypeScript Next App

We'll start from a blank folder simple-typescript-i18n which we initialise with

yarn init

Then we add the following dependencies

yarn add @zeit/next-typescript next react react-dom

we'll also need some dev dependencies, let's add them

yarn add @types/next @types/react @types/react-dom typescript --dev

Now we add our two pages

pages/index.tsx :

import React from 'react'
import Link from 'next/link'

const HomePage: React.FunctionComponent<any> = () => (
    <div>
        <h1>Hello, World!</h1>
        <Link href='/second-page'><button type='button'>Goto Second Page</button></Link>
    <div>
)

export default HomePage

and

pages/second-page.tsx :

import React from 'react'
import Link from 'next/link'

const SecondPage: React.FunctionComponent<any> = () => (
    <div>
        <h1>Welcome To Second Page</h1>
        <Link href='/'><button type='button'>Go Back</button></Link>
    </div>
)

export default SecondPage

Then we create the following files in the root folder

.babelrc :

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}

next.config.js

const withTypescript = require('@zeit/next-typescript')

module.exports = withTypescript()

tsconfig.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}

to begin our project all we need to do is set up scripts in package.json, add the following lines to your package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc"
  }
}

Go ahead and give it a run to check if everything is okay

yarn dev

visit http://localhost:3000 from your browser.

Adding Custom Server

To add next-i18next it's necessary to have a custom server running, for that we'll need to add the following package

yarn add express

and

yarn add nodemon ts-node --dev

after doing that we need to create our custom server, in the root directory create a folder called server, in that, create a file called index.ts

server/index.ts :

const express = require('express')
const next = require('next')

const port = process.env.PORT || 3000
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler();

(async () => {
  await app.prepare()
  const server = express()

  // handle nextjs routing
  server.get('*', (req, res) => handle(req, res))

  await server.listen(port)
  console.log(`🚀 Ready on http://localhost:${port}`) // eslint-disable-line no-console
})()

and then a tsconfig.server.json file in the root directory

tsconfig.server.json :

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": ".build",
    "target": "es2017",
    "lib": [
      "es2017"
    ]
  },
  "include": [
    "next.config.js",
    "server/**/*.ts",
  ]
}

now all we need to do some changes in our npm scripts, refactor the following lines in package.json

"scripts": {
    "dev": "nodemon --exec ts-node --project tsconfig.server.json server",
    "build": "next build && tsc --project tsconfig.server.json",
    "start": "NODE_ENV=production node .build/server",
    "type-check": "tsc"
  },

give it a spin, to see if everything is working all right.

Implementing next-i18next

All that's left now is to add i18next, to do that we begin by adding the following package

yarn add next-i18next

Next, we add a file i18n.ts to our root

i18n.ts :

const NextI18Next = require('next-i18next/dist/commonjs').default

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['hi'],
  localeSubpaths: 'foreign', // locale subpaths for url could be none, foreign or all
})

now we add the i18next middleware to our server as well i18n configuration

server/index.ts :

const express = require('express')
const next = require('next')
const nextI18NextMiddleware = require('next-i18next/middleware')

const nextI18next = require('../i18n')

const port = process.env.PORT || 3000
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler();

(async () => {
  await app.prepare()
  const server = express()

  // use the next-i18next middleware with our i18n configuration
  try {
    server.use(nextI18NextMiddleware(nextI18next))
  } catch (e) {
    throw (e)
  }

  // handle nextjs routing
  server.get('*', (req, res) => handle(req, res))

  await server.listen(port)
  console.log(`🚀 Ready on http://localhost:${port}`) // eslint-disable-line no-console
})()

Then, we add appWithTranslation HOC to a custom _app.tsx

pages/_app.tsx :

import React from 'react'
import App, { Container } from 'next/app'
import { appWithTranslation } from '../i18n'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default appWithTranslation(MyApp)

Next, we add some translations, to do that we need to create a folder called static in our root, then add a folder called locales in static then add folders named with language codes in locales and add common.json files to them. In our case, we'll be adding english as default and Hindi as the other language

.
├── pages
│   ├-- _app.tsx
│   ├-- index.tsx
│   └-- second-page.tsx
├── static
│   └-- locales
│       ├-- en
│       │   └-- common.json
│       └-- hi
│           └-- common.json
├-- server
│   └-- index.ts
├-- .babelrc
├-- i18n.ts
├-- next.config.js
├-- package.json
├-- tsconfig.json
├-- tsconfig.server.json
└── yarn.lock

Add translations to common.json files

static/locales/en/common.json :

{
    "hello-world": "Hello, World!",
    "goto-second-page": "Goto Second Page",
    "change-language": "Change Language",
    "welcome": "Welcome To Second Page",
    "go-back": "Go Back",
}

static/locales/hi/common.json :

{
    "hello-world": "नमस्ते, विश्व!",
    "goto-second-page": "दूसरे पेज पर जाएं",
    "change-language": "भाषा बदलें",
    "welcome": "दूसरे पेज पर आपका स्वागत है",
    "go-back": "वापस जाएं",
}

then we refactor our two pages to include translation HOC, namespaces, and translation function, also add a button to change the language.

pages/index.tsx :

import React from 'react'
import { i18n, Link, withNamespaces } from '../i18n' // We replace next/link with the one provide by next-i18next, this helps with locale subpaths

const HomePage: React.FunctionComponent<any> = ({ t }) => (
    <div>
        <h1>{t('hello-world')}</h1>
        <button type='button' onClick={() => i18n.changeLanguage(i18n.language === 'en' ? 'hi' : 'en')}>{t('change-language')}</button>
        <Link href='/second-page'><button type='button'>{t('goto-second-page')}</button></Link>
    <div>
)

HomePage.getInitialProps = () => ({
  namespacesRequired: ['common'],
})

export default withNamespaces('common')(HomePage)

and

pages/second-page.tsx :

import React from 'react'
import { withNamespaces, Link } from '../i18n'

const SecondPage: React.FunctionComponent<any> = ({ t }) => (
    <div>
        <h1>{t('welcome')}</h1>
        <Link href='/'><button type='button'>{t('go-back')}</button></Link>
    </div>
)

export default withNamespaces('common')(SecondPage)

now all we have to do is make minor changes to our tsconfig.server.json to include our i18n compiled file as it is in our build folder

tsconfig.server.json :

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": ".build",
    "target": "es2017",
    "lib": [
      "es2017"
    ]
  },
  "include": [
    "i18n.ts",
    "next.config.js",
    "server/**/*.ts",
  ]
}

That's it we are done now you can go ahead and try to run, to see if everything is working.

And that's how you set up next-i18next with typescript in Next JS app.

Problems with 'gatsby-image' and their workarounds

Vaibhav Sharma — Wed, 19 Dec 2018 12:30:00 GMT

gatsby-image is a very powerful package with drool-worthy features. It makes it very easy to implement, Medium like progressive image loading. It can do a bunch of other stuff but that's the fancy stuff that we won't be going into. But I decided to not use it for this website, mostly because it doesn't play well with Netlify CMS. And, I was quite happy with the site's performance as it didn't have many images.

The article list was all words, no thumbnails and since all the images were within the article, it worked just fine.

This all changed when I decided to ditch Bulma for Tachyons.

With New Framework Comes New Design

- Anonymous (Probably LOL)

In the new design, I was working the article list had a small thumbnail along with the title and excerpt.

Without the optimisation magic of gatsby-image each page size would be touching 5MB. Begrudgingly, I decided to use gatsby-image. I did what anyone would do, installed the package and peer dependencies. And as instructed added the relevant config. That's when the problem began! Everything started breaking. And I'm ashamed that it took me a lot more time than I'm willing to admit, to solve them. Well everyone has bad days.

Things to be careful about while configuring gatsby-image

First, you need gatsby-remark-relative-images to convert image src(s) in markdown to be relative to their node's parent directory. So that gatsby-remark-images can match images outside the node folder. This is especially important if you are working with Netlify CMS. Also, don't forget to add fmImagesToRelative to gatsby-node.js.

const {fmImagesToRelative} = require('gatsby-remark-relative-images')

exports.onCreateNode = ({node, actions, getNode}) => {
  const {createNodeField} = actions
  fmImagesToRelative(node)

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({node, getNode})
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Second, The 'gatsby-source-filesystem' media folder must be included before the other plugins, especially Netlfiy CMS. That's something that has been mentioned in gatsby-transformer-remark's README.md. Not only that, it'll be best if you include 'gatsby-transformer-sharp' 'gatsby-plugin-sharp' and 'gatsby-transformer-remark' before any other plugin in gatsby-config.js. Not doing this might lead to the following error.

Field "image" must not have a selection since type "String" has no subfields

Third, once you are done configuring you cannot just query an image without parameters. I suggest publicURL.

Fourth, GIFs and SVGs are not processed by gatsby-image. So always include publicURL in the parameters as an alternate.

export const imageQuery = graphql`
       image {
            childImageSharp {
                fluid(maxWidth: 1075, quality: 72) {
                    ...GatsbyImageSharpFluid
                }
            }
            publicURL
        }`

        {!!image && !!image.childImageSharp
          ? <Img fluid={image.childImageSharp.fluid}
                 alt={title}
            />
          : <img src={image.publicURL}
                 alt={title} 
           />
        }

Finally, sometimes the build can fail just because node_modules/ needs to be rebuilt. So, if you see nothing else working try removing node_modules/ and reinstalling packages.

gatsby-image and gatsby-paginate don't go well together

While implementing Article List I ran into an error that disturbed me for hours. Let me preface by explaining how gatsby-paginate works. We plugin Gatsby Paginate's createPaginatedPages function in gatsby-node.js. It takes the createPages method and takes results of the query to create a paginated list of posts.

return graphql(`
    {
      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
        edges {
          node {
            excerpt(pruneLength: 250)
            id
            fields {
              slug
            }
            frontmatter {
              title
              tags
              date(formatString: "MMMM DD, YYYY")
              templateKey
            }
          }
        }
      }
    }
  `)

So, if I had to display a thumbnail on my article list I just add that query. Simple enough right? Wrong! You add an image to the query, and you run into the first problem, it needs to have parameters. That's okay, you need to apply ...GatsbyImageSharpFluid anyways, but wait! This throws an error, one that drove me crazy and made me write this article.

return graphql(`
    {
      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
        edges {
          node {
            excerpt(pruneLength: 250)
            id
            fields {
              slug
            }
            frontmatter {
              image
              title
              tags
              date(formatString: "MMMM DD, YYYY")
              templateKey
            }
          }
        }
      }
    }
  `)

Error: unknown fragment ...GatsbyImageSharpFluid

This is an annoying problem because the reason it states is very confusing! GatsbyImageSharpFluid is a fragment and I know that for sure. After searching for hours I find out an interesting thing.

The query in gatsby-node.js is only the path and stuff you put in context, which you can use in your page/template to retrieve the data you need. What this means is it's only creating pages, the query there isn't really supposed to be passing data down apart from a kind of reference which you can use in the page to make a query for the specific kind of data that page needs. Hence, it doesn't recognise GatsbyImageSharpFluid as a valid fragment.

Which brings us to workaround. After looking online I found that I'm not the only one to run into this Catch 22. Various people found various workarounds, with varying results. After failing to get any of them working for me, it struck me. A workaround that'll work for everyone, not ideal but universal. All you gotta do is pass the required fields of fluid to it manually. And to add the base64 placeholder image, top it off with base64.

return graphql(`
    {
      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
        edges {
          node {
            excerpt(pruneLength: 250)
            id
            fields {
              slug
            }
            frontmatter {
              image {
                childImageSharp{
                  fluid (maxWidth:500, quality:50){
                    src
                    srcSet
                    aspectRatio
                    sizes
                    base64
                  }
                }
                publicURL
              }
              title
              tags
              date(formatString: "MMMM DD, YYYY")
              templateKey
            }
          }
        }
      }
    }
  `)

Ooooorrrrr, you could simply use one of the other plugins for pagination.

Neither gatsby-image, nor gatsby-paginate, are ideal packages. But the utility they provide is without question, very helpful. As the Gatsby community grows, we'll have perfect solutions. But till then I just hope we keep sharing the problems we run into and how we overcome them.

Self hosting Google Fonts for better caching

Vaibhav Sharma — Wed, 05 Dec 2018 12:30:00 GMT

Just a month ago a college fresher came to me showing her newly made React app, bootstrapped using create-react-app. As we got into discussing performance, she told me that everything was almost 100 on gtmetrix.com except for Browser Caching. That was because of Google Analytics and Google Fonts. And, it's not just about browser caching, a lot of times Google Fonts have files that will probably be of no use to us. For example, extra language support. Although not much can be done about Google Analytics, I told her a little hack that will make the 'Google Fonts' problem disappear very easily. Since starter kits like create-react-app and Gatsby JS provide support for caching and service workers, we're better off self-hosting.

For this tutorial, we'll be assuming the following:

This is a create-react-app project
We need to include Montserrat font from Google Fonts.

Let's begin, by selecting the font on https://fonts.google.com for us that will be Montserrat.

Next, we copy the URL in the href attribute of the example code. Open the URL from your browser and you'll see a CSS file, with the code to include the font-face.

We see here that there are quite a few font files that the API pulled. Let's say for this article that we don't need the Vietnamese support. So, we just copy the Latin and Cyrillic parts of the stylesheet. In the code, we see, there's a URL for the font file. We download the fonts using that URL and keep them in a local project folder. Now, all we need to do is replace the URL from the cloud-hosted to the relative address of the locally stored file.

src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');

src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');

create-react-app allows us to directly import CSS files, we just import our stylesheet in the javascript.

...
import './styles.css';

And, that's all we need to do, create-react-app automatically takes care of caching and service worker. This works for other libraries like Gatsby JS as well. That's all for this article.

Quirks of migrating the blog to Gatsby v2

Vaibhav Sharma — Mon, 03 Dec 2018 12:30:00 GMT

When the Gatsby v2 dropped I was like do I really need this, my website is already faster than anything on Gatsby v1? But then I remembered I made this website more so because I wanted to try Gatsby than anything else. Finally, I took time out to do it last weekend.

Journey Begins - Updating Dependencies

Upgrading npm packages broke so much because a lot of them now require peerDependencies which were earlier part of the package itself. And some packages had dependencies included in them. This task had one upside to it - I cleaned up a lot of packages that weren't that useful and wanted to remove but never got time to. This also got me thinking about including new packages and features that I wanted to, most of all - ElasticLunr Search. The real struggles soon follow.

I See Red - Warnings and Deprecations

With new release, comes lots of deprecations:

Link is now included in gatsby package

Although migration from react-router to reach/router was a great decision, it meant manually updating the imports in a lot of files. Nevertheless, a good decision as I felt there was a lot of inconsistency with react-router especially in terms of gatsby, even though it was a more familiar package to work with due to my experience with React.

Global graphql is now deprecated

This one was more of a surprise to me as it made not much sense, but still meant a lot of refactoring. What I thought would make it easy was Webstorm auto-import but that didn't go quite well for me, had to do it manually. Only to find out that there is a codemod package to help it!

Renaming parameters

boundActionCreators and pathContext were retired to make way for actions and pageContext. This was easy enough to do with Webstorm. Phew!

Removing inline styles from `html.js`

Although Gatsby v2 doc states that we should stay away from html.js but, my project is set up in a way that I didn't/couldn't stay away from it(thanks Bulma). And this also meant additional refactoring.

Adding the support for Layout

This one had me most wary, I was like this cannot go well on the first try, but voila it did. But wait a second, there was a problem that I didn't know yet.

Problems Begin - Solving Breaking Changes

Just when I was thinking this going all too well, I encountered my first glitch - The Netlify CMS isn't accessible anymore.

`gatsby-plugin-layout` breaks Netlify CMS Admin Page

This was a particularly nasty problem because it looks like gatsby-plugin-layout is trying to put the layout on the admin page and you don't see any way to fix it! ...but, it doesn't have much to do with it. After googling for hours and asking random devs online, I remembered I had another project where it didn't break the admin page. Solution? All you need to do is that you need to put gatsby-plugin-layout before gatsby-plugin-netlify-cms in gatsby-config.js.

Netlify CMS Preview Pane stops working

This one although was easy to figure out using Console errors, was still surprising because it made no sense why it had worked before and if it did, it made no sense that it is now broken! The problem was that the tags needed an error check:

 {tags && tags.length ? (...) : null}

Luckily this is where my problems ended with the migrations. Now, it was time for improving the blog, by adding search functionality.

Improvement Begins - Adding Search Functionality

I know this doesn't seem like much of a reason to include it in this blog, but I included this because I wanted to discuss how freakin' StaticQuery is! It was always in the plans to include a Search Box, and had planned to use @andrew-codes/gatsby-plugin-elasticlunr-search since I had no plans to use Algolia. I could still use andrew-codes version but i decided to use the forked version by gatsby-contrib, because I wanted to try out StaticQuery. And let me tell ya, it's a damn cool feature!

And with that migration was finally complete! It was not too bad, for javascript ecosystem. And the effort was worth the result.

Implement Rich Snippet Schema with Google Tag Manager

Vaibhav Sharma — Sat, 16 Jun 2018 12:30:00 GMT

Rich Snippets Schema, while may not help in improving SERP Ranking, it does help in better CTR(Click Through Rate). And this is the new frontier in Digital Marketing/SEO. With the onset of various AI Assistants like Google Assistant, Siri, Cortana, etc and them affecting sales, It has become very important that the search engines understand your content better. To make them understand the content better, a lot of search giants got together and developed a content markup system. This is Project Schema.org.

There are various encodings you can use to markup your data, like Microdata, JSON-LD, RDFa. But out of these the popular choices are Microdata and JSON-LD. Microdata is very much like XML whereas JSON-LD is more like JSON. Google prefers JSON-LD and plans to phase out Microdata. But Microdata is still a big part of Bing and Yahoo.

Although there are various ways you can implement these Schemas, the one that has been gaining a lot of traction recently is using Google Tag Manager. While you can simply put your JSON-LD schema Tag in a Custom HTML field and expect it to work, and for some people it has, if you go to Structured Data Testing Tool you'll find out that the schema isn't visible. That's either because the Structured Data Testing Tool cannot render the schema, or GTM doesn't allow us to do so.

This made us think and we found a simple workaround for this problem. What we do essentially is, store schema data as JSON in a variable, and create a <script type="application/ld+json"></script> tag using JavaScript.

Let's say this is our JSON-LD Schema

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "url": "https://www.example.com/lorem-services/",
  "name": "Example Lorem Service Review",
  "reviewBody": "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.",
  "datePublished": "2017-06-27",
  "itemReviewed": {
    "@type": "Service",
    "name": "Lorem Service"
  },
  "author": {
    "@type": "Person",
    "name": "John Smith"
  },
  "reviewRating": {
    "@type": "Rating",
    "worstRating": "1",
    "ratingValue": "5",
    "bestRating": "5"
  }
}
</script>

First, we create a Custom HTML Tag in Google Tag Manager. In that tag, we create a JavaScript document function within a Script Tag. In that function, we create a variable called jsonld, which stores our JSON-LD data.

<script>
(function () {
    var jsonld = {
        "@context": "http://schema.org/",
        "@type": "Review",
        "url": "https://www.example.com/lorem-services/",
        "name": "Example Lorem Service Review",
        "reviewBody": "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.",
        "datePublished": "2017-06-27",
        "itemReviewed": {
            "@type": "Service",
            "name": "Lorem Service"
        },
        "author": {
            "@type": "Person",
            "name": "John Smith"
        },
        "reviewRating": {
            "@type": "Rating",
            "worstRating": "1",
            "ratingValue": "5",
            "bestRating": "5"
        }
    };
})(document);
</script>

Then we initialise the Script element, set the type as "application/ld+json", and put the jsonld variable data in the Inner HTML. After that, all that's left is to append the script to document Head.

<script>
(function () {
    var jsonld = {
        "@context": "http://schema.org/",
        "@type": "Review",
        "url": "https://www.example.com/lorem-services/",
        "name": "Example Lorem Service Review",
        "reviewBody": "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.",
        "datePublished": "2017-06-27",
        "itemReviewed": {
            "@type": "Service",
            "name": "Lorem Service"
        },
        "author": {
            "@type": "Person",
            "name": "John Smith"
        },
        "reviewRating": {
            "@type": "Rating",
            "worstRating": "1",
            "ratingValue": "5",
            "bestRating": "5"
        }
    };
    var script = document.createElement('script');
    script.type = 'application/ld+json';
    script.innerHTML = JSON.stringify( jsonld );
    document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>

Oh and don't forget to check the box that says Support document.write. Since we are done with the coding part, all that is left is to set the trigger, which can be done easily by creating a new trigger and setting the required path, depending on if you want it to trigger on specific pages or all pages.

TIP: You can set custom variables in GTM that'll pull the data according to CSS selectors, this can be used to make an automated template schema, for pages like blog posts.

Sending Mass Mail from Google Sheet using Scripts

Vaibhav Sharma — Mon, 04 Jun 2018 12:30:00 GMT

ver find yourself with a big spreadsheet full of names and emails and you have to send personalized emails to all of them? We did. We had a spreadsheet full of candidates for hiring and:

We had to first send them a mail asking if they are interested.
If they replied positively we had to send them an assignment.
If they hadn't replied with the completed assignment, we had to send them reminder mail.

So what we did first was, add three columns:

Send First Email
Send Assignment
Send Reminder

These columns containing the word "Send" if the candidate has to be mailed, and "Sent" once the mail has been sent. So basically our script goes through, the sheet, picks up the candidate name, and email, uses name variable to create a personalized message, send it to their email(if the Send First Email contains the keyword "Send") and after sending replaces the keyword with "Sent".

Step One: Structure of Our Sheet

This is our example table, for the customized message we'll pick up, the first name from column B, the last name from column C, etc. You can add more details accordingly.

Step Two: Script for Mass Mail

Google Script uses plain JavaScript with some built-in APIs. First, we write the function that'll send the mail. To Write the Script click on Tools > Script Editor.

function sendMassMail() {

  // Get Active Sheet
  var sheet = SpreadsheetApp.getActiveSheet(); 

  // Sender Name will Appear to the Recipient
  var senderName = "Vaibhav | The Leaky Cauldron Blog";

  // Get all Data.
  var dataRange = sheet.getDataRange(); 
  var data = dataRange.getValues(); 

  var count = 0;

  // Parse Through Data
  for (i in data) { 
    count += 1;
    var rowData = data[i]; 

    // Array Starts with 0, eg. - column B is 1
    var first_name = rowData[1]; 
    var last_name = rowData[2];
    var emailAddress = rowData[3]; 
    var confirmSend = rowData[4]; 

    // Set a Custom Subject
    var subject = first_name + ' | Graphic Designer Role at The Leaky Cauldron Blog';

    // Verify if the mail has to be sent
    if (confirmSend === "Send") { 
      try { 

        // Use MailApp API to send Email.
        MailApp.sendEmail({ 
          to: emailAddress, 
          subject: subject, 
          // Write Custom HTML Message
          htmlBody: '<div>Hi ' + first_name + last_name + '</div>', 
          name: senderName 
        }); 

        // Set the value of Mail Status to Sent if Sent.
        // getRange(row, column). column starts from 1.
        sheet.getRange(count, 5).setValue("Sent");

        // Log if the Mail was sent successfully
        Logger.log("Email: %s", emailAddress); 

      } catch(e) { 

        // Set the value of Mail Status to Failed if Failed.
        sheet.getRange(count, 5).setValue("Failed");

        // Log if there was some error
        Logger.log(e); 

      } 
    } else { 
      continue; 
    } 
  }
}

Don't forget to Save the Project.

Step Three: Add the Function To Main Menu

Below the sendMassMail() write a function called onOpen().

function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{

    // Set a Name for Function
    name : "Send Mass Mail",
    functionName : "sendMassMail"

  }];

  // Add a Menu and name it
  sheet.addMenu("Email", entries);

};

Save and reload the sheet, you'll see a menu called Email, and within it, an option called Send Mass Mail.

That's it just click on the option to run the script and send mass mail. One more, thing you'll have to approve the script to use your Gmail.

Link to Example Sheet - Mass Mail

Writing Authenticated Route Component in React Redux

Vaibhav Sharma — Sat, 02 Jun 2018 12:30:00 GMT

How to write an Authenticated Route component which will redirect to Sign In Page if a user isn't authenticated and once authentication is complete, it'll redirect them back to the same page, this is a problem most new React developers face. Today we learn to do just that.

But before we begin, lets clear out some assumptions:

This is not a beginner react-redux authentication tutorial, we assume you already have an authentication mechanism set up.
The Redux association is just to get the "authenticated"(bool) state, and you can use any state management you like.
We are using React Router v4
You may need to modify it according to your project.

Now that, that's out of the way lets begin by creating the most important part, the AuthenticatedRoute component.

Creating AuthenticatedRoute Component

AuthenticatedRoute component is a component which takes the props of Route and an additional boolean prop, authenticated, which determines if the Component is to be rendered or the user needs to be redirected.

import React from "react";
import {Route, Redirect} from "react-router-dom";

export default function AuthenticatedRoute({
                                               component: Component,
                                               authenticated,
                                               ...rest
                                           }) {
    return (
        <Route
            {...rest}
            render={props =>
                authenticated === true ? (
                    <Component {...props} {...rest} />
                ) : (
                    <Redirect to={`/signin?redirectTo=${props.match.path}`}/>
                )
            }
        />
    );
}

It also stores the actual path as a parameter in the sign in path /signin?redirectTo=<path> so that when the user signs in it'll redirect to that path.

Redirecting to the URL Param after Sign In

To redirect to the param that we set, we need to first edit the signinUser(username, password) action, by adding a third argument, redirect.

...

export function signinUser(username, password, redirect = '/'){
// Authentication Logic
...
}

we set a default value for the third argument so that in case no value is provided it'll redirect to the home page. Now for the actual redirection.

export function signinUser(username, password, redirect = '/'){
    return function(dispatch){
        dispatch(authRequest);
            return axios.post(
                ...
            ).then((response) => {
                dispatch(authSuccess(response));
                // Redirect
                window.location = redirect;
            }).catch(error => {
                dispatch(authFailure(error));
            });
    }
}

Parsing the URL Parameter

To get the redirectTo param's value from/signin?redirectTo=<path>, we need to install a package called query-string.

yarn add query-string

npm install query-string --save

now in our Sign In Container, in the function that handles Sign In request, we access the URL param and pass it to signinUser function.

...
import queryString from 'query-string';

class SignInContainer extends Component {
    handleSignIn(event) {
        event.preventDefault();
        const redirectTo = queryString.parse(this.props.location.search).redirectTo;
        this.props.actions.signinUser(this.state.data.username, this.state.data.password, redirectTo);
    }
}

Using AuthenticatedRoute in our Router

Now it's time to use the AuthenticatedRoute Component, it's very easy to do and works exactly like Route from react-router-dom. It only takes one extra parameter, authenticated, which is a boolean that determines if the user is authenticated or not.

...
import AuthenticatedRoute from './component/AuthenticatedRoute';

const store = configureStore();
const {sessionReducer: {session: {authenticated}}} = store.getState();

class App extends Component {
render() {
        return (
            <Provider store={store}>
                <Router>
                    <div>
                        <Switch>
                            <Route exact path='/signin' component={SignInPage}/>
                            <AuthenticatedRoute exact path='/' 
                                                component={HomePage}
                                                authenticate={authenticated}/>
                            ...
                        </Switch>
                    </div>
                </Router>
            </Provider>
        );
    }
}

And that's it! We're all set.

Scraping Dynamic Websites (Angular, React etc) with Scrapy and Selenium

Vaibhav Sharma — Fri, 04 May 2018 12:30:00 GMT

Last week I was assigned a task of scraping some data from a website, regular stuff no big deal. So, I set up a Scrapy Project, write the spider, and run the project sipping tea. What do I get?! A blank CSV file with no data! I try some more, make changes to the selector, and run it again to no avail. Then I notice that the website is made on Angular JS. Neither beautiful_soup nor Scrapy can scrape dynamic websites. I look up online and find out that only two frameworks that can do so are: Splash and Selenium. I chose Selenium, mainly for two reasons:

More Python friendly
More likely to be useful in future projects.

In brief what we're about to do is, use the webdriver of a browser with the help of Selenium to render the entire page along with the dynamic parts, then scrape it. But before we begin, I'm gonna assume the following:

This is not a scrapy tutorial for beginners, I'll assume some familiarity
A dummy page to be scraped, the links that have to be scraped has the class "ng-binding"
A scrapy project has been set up and a blank spider script is ready, wherein our code goes.

Setting up Geckodriver

To begin we need to install, geckodriver, which is webdriver for Firefox web browser. I'm gonna write the instructions for Linux, you can look up the installation for your specific OS. First, download the latest edition of geckodriver:

wget https://github.com/mozilla/geckodriver/releases/download/v0.20.1/geckodriver-v0.20.1-linux64.tar.gz

Extract the file with:

tar -xvzf geckodriver*

Make it executable:

chmod +x geckodriver

Make it accessible by command line:

sudo mv geckodriver /usr/local/bin/

Writing the Spider

In the spider file, let's assume its name is angular.py first we need to import the following:

import scrapy
import csv
from selenium import webdriver

Then we need to set up the spider class:

...

class AngularSpider(scrapy.Spider):
    name = 'angular_spider'
    start_urls = [
        'https://www.example.com/?page=1',
        'https://www.example.com/?page=2',
    ]    
    # Initalize the webdriver    
    def __init__(self):
        self.driver = webdriver.Firefox()

    
    # Parse through each Start URLs
    def start_requests(self):
        for url in self.start_urls:
            yield scrapy.Request(url=url, callback=self.parse)    
    

   # Parse function: Scrape the webpage and store it
   def parse(self, response):
       pass

The real magic happens in the parse function, here we'll write the selector for the data, and the output in a CSV file:

    ...
    
    # Parse function: Scrape the webpage and store it
    def parse(self, response):
        self.driver.get(response.url)
        # Output filename
        filename = "angular_data.csv"
        with open(filename, 'a+') as f:
            writer = csv.writer(f)
            # Selector for all the names from the link with class 'ng-binding'
            names = self.driver.find_elements_by_css_selector("a.ng-binding")
            for name in names:
                title = name.text
                writer.writerow([title])
        self.log('Saved file %s' % filename)

Now when you run this using:

scrapy crawl angular_spider

You'll notice a browser opens up and the page is loaded, and when the scraping is complete you can open the CSV file and see the data.

Awesome Moments from Avengers: Infinity War

Vaibhav Sharma — Mon, 30 Apr 2018 12:30:00 GMT

Friday marked the release of Avengers Infinity War, and I couldn't miss it for the world. In short, Marvel nailed it, from character chemistry to villain. The film was an emotional roller coaster, with a lot of people claiming to need therapy after it was over. Here are some of the moments I thought were the best (Spoilers, DUH!):

``...We have a Hulk!``

The classic line from The Avengers! After tasting what Stark meant when he said "We have a Hulk", finally Loki got to say it.

Space Squidward

When Stark called Ebony Maw Squidward from Spongebob, it was a tiny one-liner but I just couldn't stop myself from laughing like a maniac. I'm sure I'm not the only, right?! right?! right?!

``Dude you are embarrassing me in front of the wizards``

This sent the entire hall, in a fit of laughter.

``The only way to smuggle it was up my ....``

Oh, Rocket and his obsession with prosthesis! At least Thor got his missing eye thanks to the weird rabbit.

Groot makes the handle of Stormbreaker with his Arm

As if Thor getting a new Hammer/Axe wasn't exciting enough!

Thanos' obsession with bubbles

Seems to show a softer side to the Despot. Maybe... IDK

Red Skull's Dementor Makeover

This must be going through every Harry Potter fan, Red Skull levitating in that tattered robe was looking very much like a Dementor.

Death of Gamora

This was heartbreaking in a twisted kind of way. But certainly a powerful scene.

Where's Who's and Why's of Gamora

Guardians of the Galaxy meet Earth's Mightiest...

Kick Names, Take Ass

The ditsy half-sister of Star Lord, Mantis is always a delight.

Strange surrenders the Time Stone in exchange for Thanos sparing an injured Stark

Is it just me or it's weird that Strange never once used his most powerful weapon, and surrender it way too easily for Stark's life? He must think Stark is more important than any Stone in the future he saw them win.

Bucky-Rocket Interactions

Everyone was screaming with excitement when Buck used Rocket as a weapon, oh and of course Rocket wants his arm.

Wanda Destroys an Infinity Stone

Just goes to show how powerful she is(or rather was).

SNAP

The dreadful SNAP, killing half the universe, including some of our most beloved character. As if that wasn't enough, we got to see how much Thanos mourns Gamora.

Peter's Death

This one got to me, and I'm sure most of the viewers. It was just too painful to hear him desperately hug Tony. "I'm sorry Mr. Stark..."

Mother F

This end credit was just appropriate..., Also Captain Marvel!

Requesting User details from JWT in Django OAuth Toolkit

Vaibhav Sharma — Mon, 16 Apr 2018 12:30:00 GMT

We always require an API to fetch the details of the current user. This API, unfortunately, isn't provided by default in Django OAuth Toolkit. But worry not, it's fairly easy to write this API, and that is what we'll do. But before we begin, let's clarify some assumptions:

This tutorial is written with Django 2.0 specific commands in mind (eg. Path)
This is for someone who has Django OAuth Toolkit already up and running in the project.
This tutorial doesn't mention imports and will have to be done by developer accordingly.

Now that that's clear, let's begin.

Setting up the Authentication Backend and Middlewares

Before we begin writing API View, make sure to add the following in the settings.py of the project. First, we add AUTHENTICATION_BACKENDS

AUTHENTICATION_BACKENDS = (
    'oauth2_provider.backends.OAuth2Backend',
    # Not required for DOT, but required for Admin
    'django.contrib.auth.backends.ModelBackend',
)

Then we add relevant MIDDLEWARE for the OAuth Toolkit:

MIDDLEWARE = (
    '...',
    # If you use SessionAuthenticationMiddleware, be sure it appears before OAuth2TokenMiddleware.
    # SessionAuthenticationMiddleware is NOT required for using DOT.
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'oauth2_provider.middleware.OAuth2TokenMiddleware',
    '...',
)

These steps are essentials for getting request.user function, which will be required while writing the API View.

Writing the API

In the views.py we'll write a generic Retrieve API View which when called along with the authorization token will return the User details. For that, we'll first write a serializer that will define our JSON response.

Serializer for the User

For our JSON response let's take id, first name, last name, email, and username. In the serializers.py file write the following Model Serializer class

class UserDetailSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'first_name', 'last_name', 'email', 'username')

The Retrieve API View

In the views.py file we'll write the UserDetail View:

class UserDetailView(generics.RetrieveAPIView):
    """
    Use this endpoint to retrieve user.
    """
    # Set the AUTH_USER_MODEL in settings.py file to make it work with custom user models as well.
    model = settings.AUTH_USER_MODEL
    serializer_class = UserDetailSerializer
    # Set the permission class if not already set by default
    permission_classes = [permissions.IsAuthenticated]

    def get_object(self, *args, **kwargs):
        return self.request.user

The API Path

Now that the tough part is over we'll write the URL Path for the API. In your urls.py add the following URL pattern.

urlpatterns = [
    '...'
    path('api/me/', UserDetailView.as_view(), name='me'),
]

That's all for the coding part, now when you call the http://localhost:8000/api/me/?format=json with Authorization Header, you'll get the ID, First Name, Last Name, Email and Username of the user associated with the JSON Web Token.

Writing Tests for Authenticated APIs in Django REST Framework

Vaibhav Sharma — Fri, 13 Apr 2018 12:30:00 GMT

If you are new to Django Rest Framework and Django OAuth Toolkit and are having trouble writing automated tests for your is_authenticated APIs, you have come to the right place. The problem arises because for a token to be generated we need to first create an application and then retrieve its client_id and client_secret before sending it along with username and password for generating access_token.

Before beginning, though we're gonna work on the following assumptions:

There's a model called Books.
There's a generic.ListAPIView, with URL name books:list
The permission on the URL is is_authenticated

Now that, that's out of the way, we can begin the fun part.

In your tests.py file we create a class called BookListTest:

from rest_framework.test import APITestCase




class BookListTest(APITestCase):

    pass

To begin testing, we need a few things set up first, to do so we use the setUp method. Here we will, first create a test user, set up a dummy application, then create two dummy book entries, and finally define our fetch url.

class BookListTest(APITestCase):
    def setUp(self):
        # Create a Test User.
        self.test_user = User.objects.create_user('test','user','testuser', 'test@example.com','testpassword')
        # Set Up a Test Application
        self.application = Application(
            name = "Test Application",
            redirect_uris = "http://localhost",
            user = self.test_user,
            client_type = Application.CLIENT_CONFIDENTIAL,
            authorization_grant_type = Application.GRANT_AUTHORIZATION_CODE,
        )
        self.application.save()
        # Create Entries in our model to fetch the list of.
        self.foo_book = Book(
            title = "foo"
            author = "bar author"
        )
        self.foo_book.save()
        self.bar_book = Book(
            title = "bar"
            author = "foo author"
        )
        self.bar_book.save()
        # URL to fetch the list of the books.
        self.fetch_url = reverse("books:list")

Everything we write in the above function is created at the beginning of every Test. Now let's come to writing the actual test. To do that we'll need an access_token, and will have to set the authorization header with the bearer token.

class BookListTest(APITestView):
    def setUp(self):
    ...
    def test_list_books(self):
        """
        Ensure we can list all the books.
        """
        # Create A Token
        tok = AccessToken.objects.create(
            user = self.test_user,
            token = '1234567890',
            application = self.application,
            scope = 'read write',
            expires = timezone.now() + datetime.timedelta(days=1)
        )
        # Set Authorization Header
        auth_headers = {
            'HTTP_AUTHORIZATION': 'Bearer ' + tok.token,
        }
        response = self.client.get(self.fetch_url, format='json', **auth_headers)
        # Make assertions
        self.assertEqual(response.status_code, status.HTTP_200_OK)

And that's it, just run the test. But before you do that, make sure you have required imports. You will need the following imports:

User, Book Models
from django.urls, reverse
from django.utils, timezone
from oauth2_provider.models, Application and AccessToken models
from rest_framework, status
datetime
from rest_framework.test, APITestCase

Happy Testing.

Making a marketing website using Gatsby Starter Business

Vaibhav Sharma — Tue, 10 Apr 2018 12:30:00 GMT

NOTE: Updated for gatsby-starter-business v2.1

Gatsby JS brought something that everyone was waiting for, a React JS based static site generator, and that too a powerful one. True to their boast that it's really hard to make a sloppy website with Gatsby, making it amazing for marketing websites.

When I was writing a website for my company, I found my self wanting a Gatsby starter with the following requirements:

It should be powered by Netlify CMS.
It should be SEO friendly.
It should at least have a home page and blog page.
It should allow proper styling using some CSS framework like Bootstrap or Bulma.

While all these features are available in various starters, none of them was a complete package. So, I decided I'll make one myself:

gatsby-starter-business

Starting a new Gatsby Project

Assuming you already have Gatsby CLI installed, to start a new Gatsby JS Project using Gatsby-Starter-Business, open your terminal and run this:

gatsby new <your_project_name> https://github.com/v4iv/gatsby-starter-business

This will create a clone of Gatsby Starter Business, with project name you gave earlier.

Get Started With Gatsby Starter Business

To configure Gatsby Starter Business, open config.js file. Change the required variables and save it. And push it to a new repository in your Github.

module.exports = {
  siteTitle: 'Gatsby Starter Business', // Site title.
  siteTitleAlt: 'Business', // Alternative site title for SEO.
  siteLogo: '/icons/icon-512x512.png', // Logo used for SEO and manifest.
  siteUrl: 'https://gatsby-starter-business.netlify.com', // Domain of your website without pathPrefix.
  // Do not use trailing slash!
  pathPrefix: '/', // Prefixes all links. For cases when deployed to example.github.io/gatsby-starter-business/.
  siteDescription: 'Leverage Gatsby Business Starter for your Business.', // Website description used for RSS feeds/meta description tag.
  siteRss: '/rss.xml',
  siteFBAppID: '', // FB Application ID for using app insights
  googleTagManagerID: '', // GTM tracking ID.
  disqusShortname: 'gatsby-business-starter', // Disqus shortname.
  userName: 'Vaibhav Sharma',
  userTwitter: 'vaibhaved',
  userLocation: 'Delhi NCR, India',
  userDescription: '',
  copyright: 'Copyright © Gatsby Starter Business 2018. All Rights Reserved.', // Copyright string for the footer of the website and RSS feed.
  themeColor: '#00d1b2', // Used for setting manifest and progress theme colors.
  backgroundColor: '#ffffff', // Used for setting manifest background color.
}

Then from Netlify dashboard create a new site from Github for the same repository, and deploy it.

Once done go to Netlify settings page, and enable Identity, set registration preference and Git Gateway. Create a user from the identity tab of Netlify and visit https://yoursiteaddress/admin/#/ login with your Netlify credentials and you'll be on the admin page. Now you can easily edit pages or add new blog articles.

The Leaky Cauldron Blog

How is Kingdom Two Crowns So Addictive?!

Stop Letting Me Retry Your Horror Game

Civilization, Myth, and Savagery: Reading Lord of the Flies

Golding's Background

The Eton–Waterloo Myth

Golding’s Rebuttal

The Tongan Counterexample

Schools as Factories

Conclusion

Chhupa Sa Kuch — छुपा-सा कुछ

छुपा-सा कुछ — Vyom

Flowers Too Late

Flowers Too Late — Neha Ramrakhyani

Optimization Strategies and Best Practices in React Native

Optimizing Rendering Performance

Avoid Unnecessary Re-Renders with memo and useCallback

Use FlatList Instead of ScrollView for Large Lists:

Use useEffect and useMemo Wisely

Reducing JavaScript Thread Load

Optimize JavaScript Execution with InteractionManager

Improving UI Performance

Enable Hermes for Faster Startup Times

Use Native Driver for Animations

Memory Management and Avoiding Leaks

Remove Unmounted Listeners

Optimizing Network and Data Fetching

Use Pagination Instead of Fetching Everything at Once

Use tanstack/react-query for Caching and Background Fetching

Bundle Size Optimization

Enable Code Splitting and Dynamic Imports

Reduce Package Bloat

Debugging Performance Bottlenecks

Use React Native Performance Monitors

Check JS Frame Rate

React and WebAssembly: Unlocking High-Performance Apps

🚀 What is WebAssembly (WASM)?

Key Features of WebAssembly

Why Use WebAssembly with React?

Use Cases for React + WebAssembly

Setting Up WebAssembly with React

Performance Gains: What to Expect

Best Practices for React and WebAssembly Integration

The Future of React and WebAssembly

In Bruges — Harry Potter Edition

Critical Analysis of Union Budget 2025

Taxation & Fiscal Consolidation

Positives:

Concerns:

Agriculture & Rural Development

Positives:

Concerns:

Infrastructure & Urban Development

Positives:

Concerns:

Financial Sector Reforms

Positives:

Concerns:

Energy & Sustainability

Positives:

Concerns:

Employment & Skill Development

Positives:

Concerns:

Fiscal Discipline & Debt Management

Positives:

Concerns:

Final Verdict: A Balanced but Risky Budget

✅ Strengths

❌ Weaknesses

Rating: 7.5/10

Piranesi by Susanna Clarke — Identity, Power, and Beauty

The Two Kinds of People

The Cruelty of Betrayal

Unreliable Narrators Done Right

Echoes of Narnia

A Cast That Feels Real

Identity and Reconciliation

Perspective Shifts

Freedom vs. Captivity

Avoid Unnecessary Re-Renders with `memo` and `useCallback`

Use `FlatList` Instead of `ScrollView` for Large Lists:

Use `useEffect` and `useMemo` Wisely

Optimize JavaScript Execution with `InteractionManager`

Use `tanstack/react-query` for Caching and Background Fetching

Revamping Styling with `shadcn/ui`

Debugging with `launch.json`