DEV Community: Ankit kumar

🧠 The Ultimate JavaScript Head-Scratcher: typeof null and Other Peculiarities! 🤯

Ankit kumar — Thu, 20 Jun 2024 11:59:31 +0000

Hey Devs!

Buckle up because today we’re diving into the wacky world of JavaScript quirks that will make you question your sanity, your code, and possibly your life choices. Let's decode some of the most bizarre, brain-twisting aspects of JavaScript that only the bravest dare to confront. 🚀

typeof null is object? Whaaat? 🤷‍♂️

console.log(typeof null); // 'object'

Why? Because of reasons. Well, it’s a bug in JavaScript that's been around since day one, and fixing it now would break the web. 🤦

The Mystery of NaN (Not-a-Number)

console.log(NaN === NaN); // false

That’s right. In the JavaScript universe, even NaN doesn’t equal NaN. It's like trying to compare apples and oranges, but both are on fire. 🔥🍏🔥🍊

The Schrodinger’s Cat of Arrays 🐱📦

const arr = [1, 2, 3];
arr.length = 0;
console.log(arr[0]); // undefined

You just made the whole array disappear like a magic trick. Poof! 🎩✨

The Incredible Mutating const

const obj = { a: 1 };
obj.a = 2;
console.log(obj.a); // 2

Surprise! const doesn’t make the object immutable. It just means you can’t reassign obj to something else, but you can still mutate its contents. Sneaky, right? 🕵️‍♀️

The Case of the Floating Decimal

console.log(0.1 + 0.2 === 0.3); // false

Just when you thought you could trust math, JavaScript throws in some floating-point shenanigans to keep you on your toes. 🤡

The Time-Traveling Date

const date = new Date('2024-06-20');
date.setDate(date.getDate() - 1);
console.log(date.toString()); // Date in the previous month or year!

Dates are like time machines in JavaScript. Change one thing, and who knows where you'll end up? 🕰️🔮

The Mystery of Array vs. Object

console.log([] instanceof Object); // true

Arrays are just specialized objects in JavaScript. It's like finding out your cat is actually a small, furry object that meows. 🐈➡️📦

The Phantom undefined

let phantom;
console.log(phantom); // undefined
console.log(typeof phantom); // 'undefined'

Undefined variables are a rite of passage in JavaScript. Embrace the void! 🌌

The Inescapable Infinity

console.log(1 / 0); // Infinity

Divide by zero, and JavaScript just gives up and declares infinity. Simple as that. ♾️

The Quantum Leap of == and ===

console.log(0 == '0'); // true
console.log(0 === '0'); // false

== and === are like parallel universes in JavaScript. One loves type coercion, and the other doesn’t even know what that means. 🌌🔗

JavaScript: Where rules are meant to be broken, and every quirk is a learning opportunity! 💡

Did you survive this trip down the rabbit hole? 🕳️🐇 Share your favorite (or most dreaded) JavaScript quirks below, and let’s revel in the madness together! 😜

Happy coding, folks! 🚀

Apple Login In Next Js Typescript

Ankit kumar — Thu, 20 Jun 2024 10:58:27 +0000

To integrate Apple Sign-In in a Next.js app with TypeScript, you need to follow a structured approach involving setting up Apple Sign-In in your Apple Developer account, implementing server-side authentication, and handling the client-side login flow.

Here's a comprehensive guide to add Apple Sign-In to your Next.js TypeScript app:

1.Set Up Apple Sign-In in Apple Developer Account
Create an Apple Developer Account:

1.Go to Apple Developer and log in or create an account.

2.Create an App ID:

Go to Certificates, Identifiers & Profiles.
Navigate to Identifiers and create a new App ID with the Sign in with Apple capability.

Generate a Service ID:

Create a new Service ID under Identifiers with the Sign in with Apple capability.

Configure the Return URLs with the callback URL you will use in your Next.js app (e.g., https://yourdomain.com/api/auth/apple/callback).

Create a Key:

Navigate to Keys and create a new key, enabling the Sign in with Apple capability.
Download the generated key file (.p8) as it will be used for JWT signing.

Configure Apple Sign-In:

Obtain the following credentials:

Client ID: Your Service ID.
Team ID: Your Apple Developer Team ID.
Key ID: The ID of the key you created.
Private Key: The contents of the .p8 file you downloaded.

2.Server-Side: Implement Authentication in Next.js

Install Dependencies:

npm install next-auth @auth/core axios jwt-decode

Create an API Route for Apple Sign-In:

Create a new file pages/api/auth/[...nextauth].ts:

// pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import AppleProvider from 'next-auth/providers/apple';

export default NextAuth({
  providers: [
    AppleProvider({
      clientId: process.env.APPLE_CLIENT_ID!,
      clientSecret: {
        appleId: process.env.APPLE_CLIENT_ID!,
        teamId: process.env.APPLE_TEAM_ID!,
        privateKey: process.env.APPLE_PRIVATE_KEY!,
        keyId: process.env.APPLE_KEY_ID!,
        privateKeyId: process.env.APPLE_PRIVATE_KEY_ID!,
      },
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
});

Ensure you have the necessary environment variables set in your .env.local:

APPLE_CLIENT_ID=your_service_id
APPLE_TEAM_ID=your_team_id
APPLE_KEY_ID=your_key_id
APPLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----
NEXTAUTH_SECRET=your_next_auth_secret

3.Create JWT Generator for Apple Client Secret:

In your Next.js project, create a helper file lib/apple-jwt.ts:

// lib/apple-jwt.ts
import jwt from 'jsonwebtoken';

export const generateClientSecret = () => {
  const payload = {
    iss: process.env.APPLE_TEAM_ID,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 3600, // 1 hour expiration
    aud: 'https://appleid.apple.com',
    sub: process.env.APPLE_CLIENT_ID,
  };

  const options = {
    algorithm: 'ES256',
    header: {
      kid: process.env.APPLE_KEY_ID,
      typ: 'JWT',
    },
  };

  return jwt.sign(payload, process.env.APPLE_PRIVATE_KEY!, options);
};

4.Ensure the .p8 Private Key is Correctly Formatted:

Make sure your .p8 private key is correctly formatted with newline characters. You might need to replace actual newline characters with \n.

3. Client-Side: Handle Apple Sign-In Button

1.Install the Apple Sign-In Button:

npm install react-apple-signin-auth

2.Implement the Apple Sign-In Button:

Create a component for the Apple Sign-In button:

// components/AppleSignInButton.tsx
import React from 'react';
import AppleSignin from 'react-apple-signin-auth';
import { signIn } from 'next-auth/react';

const AppleSignInButton: React.FC = () => {
  return (
    <AppleSignin
      authOptions={{
        clientId: process.env.NEXT_PUBLIC_APPLE_CLIENT_ID!,
        scope: 'name email',
        redirectURI: `${window.location.origin}/api/auth/callback/apple`,
        state: 'state',
        nonce: 'nonce',
        usePopup: true,
      }}
      onSuccess={(response) => {
        console.log('Apple SignIn Success', response);
      }}
      onError={(error) => {
        console.error('Apple SignIn Error', error);
      }}
      render={(props) => (
        <button onClick={props.onClick} disabled={props.disabled}>
          Sign in with Apple
        </button>
      )}
    />
  );
};

export default AppleSignInButton;

3.Use the Apple Sign-In Button in Your App:

In your page or component where you want to include the Apple Sign-In:

// pages/index.tsx
import AppleSignInButton from '../components/AppleSignInButton';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>Sign in</h1>
      <AppleSignInButton />
    </div>
  );
};

export default HomePage;

Environment Configuration

Ensure you have these environment variables set up in .env.local:

NEXT_PUBLIC_APPLE_CLIENT_ID=your_service_id
APPLE_TEAM_ID=your_team_id
APPLE_KEY_ID=your_key_id
APPLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----
NEXTAUTH_SECRET=your_next_auth_secret

Testing 1.Run Your App:

npm run dev

2.Navigate to Your Sign-In Page and test the Apple Sign-In flow.

Troubleshooting

Ensure Redirect URI Matches: The redirect URI in your Apple Developer configuration must match the one used in your app.
**Verify JWT: **Make sure the JWT signing configuration is correct, and you have properly formatted your private key.
Console Errors: Check the browser console and network tab for any errors during the sign-in process for more debugging information.

This should set up Apple Sign-In in your Next.js TypeScript app. Make sure to test thoroughly and handle any specific requirements for your application.

Create modern web applications using Next.js and Vercel.

Ankit kumar — Tue, 18 Jun 2024 09:27:42 +0000

At Futurice, we are passionate about building. With over 20 years of experience in creating digital experiences, we have seen our tools evolve over the decades. We find building high-performing web applications incredibly satisfying with the current tools at our disposal.

In particular, Next.js, a JavaScript framework from the creators of Vercel has been a favourite. After shipping a few projects using Next.js, including for Jagex and WRAP, we decided to partner with Vercel to show how much we value their view of building modern web apps. Let me walk you through what we love about building with Next.js and Vercel.

Choosing the right tools

When considering to (re-)build web applications for our clients, we take certain considerations into mind. We only suggest tools and stacks that we fully believe in and have tested thoroughly ourselves.

Developer experience is key, for our own people and also to ensure that future developers can have an enjoyable experience maintaining applications for our clients. In the last 8+ years, we mostly opted for React, the popular JavaScript framework, due to its popularity amongst talented developers and great community support. React has been great to build solid single-page client-side applications with a seamless experience for users.

Working with pure React in its early days presented several challenges, however. Client-side rendering (CSR) often resulted in slower initial page loads (often caused by slow server-client network waterfalls) and limited SEO options due to the lack of pre-rendered content. Data fetching required manual implementation, leading to boilerplate code and potential performance bottlenecks. Additionally, the absence of a built-in router necessitated the use of third-party libraries, adding complexity to the development process.

However, the emergence of modern frameworks like Next.js has revolutionised React development by introducing Server Components. These components pre-render on the server, significantly improving initial load times and SEO. Next.js also offers built-in data fetching capabilities and a robust routing system, streamlining the development process and enhancing the overall user experience. This shift towards server-rendered components addresses many of the historical pain points associated with pure React and paved the way for a more performant and developer-friendly web development experience.

Next.js

Next.js is a powerful and versatile framework that offers compelling reasons to choose it for developing modern web applications. One of its key advantages is its built-in support for server-side rendering (SSR) and static site generation (SSG), enabling faster page loads and improved performance. This not only enhances the user experience but also contributes to better SEO results. Next.js integrates nicely with React, which means a familiar and efficient development experience for React developers. Its automatic code-splitting feature optimises the application’s bundle size, ensuring that only necessary code is loaded, resulting in faster load times. The framework also comes with an intuitive file-based routing system, simplifying the organisation of code and making navigation more straightforward. Additionally, Next.js supports a wide range of data-fetching strategies, including server-side data fetching and incremental static regeneration, offering flexibility in handling dynamic content.

Vercel

As a platform for deploying your web application, Vercel streamlines web development by automating deployments and continuously integrating code changes. In its core functionality, it is similar to other platforms like Netlify and Heroku, however, it comes with seamless integration and optimization specifically for Next.js apps and a global edge network to deliver content with low latency worldwide.

Vercel offers zero-configuration deployment for Next.js apps and provides support for serverless functions and HTTPS certificate handling. You can also bundle and ship Next.js applications to the provider of your choice but with additional integration and configuration effort. For us the simplicity and convenience outweigh the potential greater flexibility you can have with self-hosting. Depending on your personal setup or company restrictions this might differ of course.

With its automatic deployment and continuous integration features, Vercel ensures that updates are deployed whenever changes are pushed to the repository, streamlining the development workflow. When integrated with GitHub, every Pull Request gets its dedicated preview environment which makes viewing changes, especially for non-technical roles in our teams much easier.

Vercel’s collaboration features make it easier for development teams to work together, and I personally like the comment feature for preview deployments which easily allowed one of my designer colleagues to leave feedback directly on the page for me to investigate. In addition, the integration with popular version control systems like Git and support for environment variables enhance the platform’s flexibility and security.

One of Vercel’s unique selling points lies in its global edge network, an integrated Content Delivery Network (CDN) that caches content in strategic locations. This ensures content gets delivered with reduced load times, regardless of the user’s location. Especially when working with clients that have a global user base this offers a cost-effective solution instead of configuring a separate CDN.

An exciting future ahead
The team around Guillermo Rauch (CEO of Vercel) is constantly working on expanding Vercel, and there are some recently released or announced features that we are particularly excited about:

AI SDK: An open-source library to build conversational streaming user interfaces using existing components from your applications
Partial Pre-rendering: This feature combines the benefits of fast static rendering and personalised dynamic rendering. It allows users to pre-render only the parts of the page that need to be personalised, while the rest of the page is statically rendered.
DX Platform: The new DX platform with monorepo support, code owners, and conformance provides security at a glance and health reporting in one view. It allows users to manage their projects more efficiently and securely.
v0.dev: Vercel’s GenAI website builder that allows you to generate entire web interfaces including React component trees via single prompts.
Draft Mode: This feature enables cross-discipline collaboration by allowing users to comment and edit content in preview builds. It is a great way to get feedback from team members and stakeholders before publishing the content.

Practicing System Design in JavaScript: Cache System and the Shortest Path for Graph

Ankit kumar — Tue, 18 Jun 2024 09:14:41 +0000

Introduction
Data structure is one of unavoidable challenges when applying the software engineer role. I studied basic data structures and wrote down an article in JavaScript before.

However, it’s hard to apply data structures to design a system or solve the real problem.

The target of article is for recording common problems with data structures. I choose two interesting problems from Cracking the coding Interview and turn the solutions to JavaScript. We will use hash table, linked list, list(array) to solve these questions.

Please Design a Cache for a Single System?
How to Find the Shortest Search Path between Two People?

Please Design a Cache for a Single System?
Requirements
Design a cache system with the following properties.