Forem: Shahrukh Khan

Next.js or Vite.js: Which Framework is Better, and When?

Shahrukh Khan — Mon, 11 Dec 2023 13:46:15 +0000

Two names that have been making waves with their distinct approaches to building web apps are Next.js and Vite.js.

Next.js is a React framework specialized in server-side rendering (SSR), static site generation (SSG), and hybrid applications. It provides features like file-based routing, image optimization, and is particularly suited for projects where SEO and fast initial load times are priorities.

Vite.js, in contrast, is a build tool that supports various frameworks including React, Vue, and Svelte. It focuses on client-side rendering, offering fast development setup and hot module replacement. Vite.js is ideal for projects where rapid development and reduced server load are key considerations.

As we dissect these frameworks, we’ll compare their strengths, weaknesses, and the unique flavor they bring to web development - and how choosing between them can profoundly influence the outcome of your project.

What makes Next.js remarkable?

Next.js offers many features that enhance the development experience and the performance of web apps, such as:

File-system-based Routing: Next.js automatically creates routes based on the files in the pages directory.
Image Optimization: Next.js provides an image component that automatically optimizes images for faster loading. It supports features like lazy loading, resizing, cropping, and quality adjustment.
Internationalization: Next.js supports built-in internationalization and localization features that allow you to create multilingual web apps with ease.
API Routes and Endpoints: Next.js allows you to create API endpoints in the pages/api directory. These endpoints can be used to handle requests from your web app or external sources.
Incremental Static Regeneration: Next.js supports incremental static regeneration (ISR), which allows you to update static pages without rebuilding the entire webpage. It enables the best of both worlds: static site generation and server-side rendering.

What makes Vite.js remarkable?

Vite.js is a build tool that provides a fast and lean development experience for web apps. Vite.js uses the native ES modules to serve files without bundling them during development; this in turn results in faster startup and reload times compared to traditional bundlers like Rollup and Webpack. Vite.js offers many features that improve the overall performance and development experience of web apps:

Hot Module Replacement: Vite supports hot module replacement (HMR), which allows you to see the changes in your code in real time without refreshing the pages. Vite’s HMR is faster than other bundlers because it only updates the modules that are changed, not the entire webpage.
Code Splitting: Vite supports code splitting, which allows you to split your code into smaller parts that can be loaded on-demand. This improves performance by reducing the initial load time.
Plugin Support: Vite has a plugin system that allows you to extend its functionality and integrate it with other tools like TypeScript, React, Vue, Svelte, CSS preprocessors, GraphQL, etc.
Production Bundler: Vite uses Rollup as its production bundler, which optimizes the code for performance and compatibility.

Next.js vs. Vite.js Performance Comparison

1. Server-side rendering vs. client-side rendering

Next.js by default supports server-side rendering (SSR), which means that it renders the HTML content on the server before sending it to the browser. This improves the initial loading time and the SEO of your web application. However, SSR increases the load on the server, leading to latency. Next.js uses a special function called getServerSideProps() to fetch data on the server side.

export async function getServerSideProps(context) {
  const res = await fetch('https://example.com');
  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data }, // this will be passed to the page component as a prop
  };
}

On the other hand, Vite.js by default focuses on client-side rendering (CSR), which means that it renders the HTML content on the browser after receiving it from the server. This reduces the server load and complexity but increases the initial load time. Vite uses the native ES Modules import syntax, which runs directly in the browser.

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

2. Dynamic importing in Vite.js

Vite supports dynamic imports out of the box, which allows you to load modules on demand. This can significantly improve the performance of your web app by reducing the initial bundle size and loading time.

// Import a module on demand
import('./myModule.js')
  .then((module) => {
    // Use the module...
  })
  .catch((err) => {
    // Handle the error...
  });

3. Static site Generation(SSG) in Next.js

Next.js also supports static site generation (SSG), which allows for pre-rendering of pages at build time, resulting in fast loading times and improved SEO. However, SSG limits dynamic content since the pages are generated at build time.

export async function getStaticProps() {
  const res = await fetch('https://example.com');
  const data = await res.json();

  return {
    props: { data },
  };
}

4. Development Speed

Next.js: While it offers a great developer experience, it is primarily focused on the back end and may not match Vite's development speed for front-end projects.

Vite.js: Known for its fast development setup and HMR, Vite significantly speeds up front-end development.

How to Choose

To sum up, Next.js and Vite.js are both strong web app development frameworks. Next.js is an excellent option for projects where SEO is a top concern or when it's imperative to present the user with a meaningful page as soon as possible due to its server-side rendering and static site generation features. It's also a fantastic fit for websites with often updated material or projects with dynamic content that adjusts based on user activities.

On the other hand, Vite.js is a great option for projects where you want to maintain a modest server load and a quick development workflow because of its emphasis on client-side rendering and dynamic imports. Use Vite.js for Single-page applications (SPAs) and projects where a large portion of the website's content is static.

The decision between Next.js and Vite.js will ultimately come down to the particular requirements and limitations of your project.

All Online Tools in “One Box”

Shahrukh Khan — Sun, 12 Jun 2022 04:43:29 +0000

What?

10015.io is an online tool factory where you can get all tools you needed in one place. While serving different type of tools in different categories, it aims to perform this with a clean and beautiful user interface. Every tool is designed to solve a problem with minimum number of steps to save time of the users and decrease the complexity of the operation.

10015.io has started to operate in 2020 and it will continue to grow with time by adding new tools each day.

Tool Categories

Get the extension and access all tools with just one click
Add to Chrome
Add to Firefox

Why?

There are lots of sites on web which offers you online tools. Most of them focus on specific topics and they mostly have outdated designs which makes you think "Am I in 90's?". When you start to bookmark the tools you needed, the list becomes larger and larger in some point.

10015 Tools solves all these problems. So, bookmark it and forget about all other tool sites.

Who?

10015.io is designed and coded by Fatih Telis (me) as a side project. I am a frontend developer based in Istanbul, Turkey. I started this project to build a platform which will work as an all-in-one toolbox while I'm challenging myself to create tools which does many different things. Even though I'm not a professional designer, I'm doing my best to construct a simple, aesthetic and easy-to-use UI system. You can contact me via email or Twitter about anything.

webdesigner #designer #javascript #tools #css #utils #convertor #html #webdeveloper #all

What's New In Microsoft Edge Devtools?

Shahrukh Khan — Wed, 26 Jan 2022 05:53:43 +0000

As you all guys seen, my last post was about new updates in chrome's devtools. Here i'm going to writing about the new updates in Edge Devtools.

While Microsoft’s browser team continues to be an active contributor to the Chromium project, they’re also spending more time on new and unique features that only Edge has. Let’s review two of them here.

DEBUG DOM MEMORY LEAKS WITH THE DETACHED ELEMENTS PANEL

Edge just launched a memory leak investigation tool, the Detached Elements tools, which can be very useful to investigate leaks in long-running apps.

One of the multiple reasons why web pages leak memory is detached DOM elements: elements that might have been needed at some point, but got removed from the DOM, and never re-attached. When a code base grows in complexity, it’s easier to make mistakes and forget to clean those detached elements up.

If you find that your app keeps on needing more and more memory over time as you use it, give the Detached Elements a try. It can very quickly point you in the right direction.

Learn more about it on the announcement blog post, and the docs.

A BRAND NEW USER INTERFACE FOR DEVTOOLS WITH FOCUS MODE

Our DevTools have looked the way they do ever since the early Firebug days. Sure, the user interface has evolved over time a little bit, with more tools added, and things re-arranged, but at a high level, it’s still mostly the same.

The Edge team has conducted experiments and user studies that indicate that DevTools can be very overwhelming (did I say DevTools had more than 30 panels already?). While new web developers don’t have a clear idea of where to start and how to explore and use the tools, more experienced developers tend to find themselves in just one or two familiar workflows.

Based on this, the Edge team released a new experimental feature that makes it easier to learn and use DevTools: Focus Mode.

Focus Mode has a new activity bar, an easy way to add and remove tools, a quick view drawer, and re-designed menus.

To give Focus Mode a try, enable it first by going to Settings > Experiments > Focus Mode.

You can learn more about Focus Mode in this Edge explainer document.

I hope you enjoyed these updates, and that they’ll turn out useful when doing web development.

What’s New In Chrome's DevTools?

Shahrukh Khan — Wed, 26 Jan 2022 05:36:17 +0000

The different teams working on DevTools have been busy to built a lot of new things for us to use. From powerful productivity improvements to entire new panels, they’ve been continuing to close the parity gap and innovate with new means of debugging and improving our web experiences.

The Chrome team just released a new panel that makes it very straightforward to record and replay user flows: the Recorder panel.

That means it’s high time for another Chrome's DevTool update, so let’s jump right in!

RECORD, REPLAY AND MEASURE USER FLOWS

If you’ve ever found yourself having to repeat the same navigation steps over and over again in a web app in order to investigate a bug, then this might change your life!

But there’s more! Once the steps are recorded, you can replay them while measuring performance. This way, you can work on optimizing your code, while being sure to always run the same scenario every time you test.

You can learn more about the Recorder here. And if you have feedback about this tool, the team will be very happy to hear your thoughts on this chromium issue.

NAVIGATE THE ACCESSIBILITY TREE

Rendering pages to the screen isn’t the only thing that browsers do. They also use the DOM tree they build in the process to create another tree: the [accessibility tree]https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree). The accessibility tree is another representation of the current page that can be used by assistive technologies, like screen readers.

As a web developer, it is very useful to have access to this accessibility tree. It helps understand how the markup you choose influences the way screen readers interpret the page.

Chrome DevTools has had an Accessibility panel for some time in the sidebar of the Elements panel which contains the accessibility tree. Recently though, the team has been experimenting with displaying both the accessibility and the DOM tree in the same place, allowing developers to go back and forth between the two.

To enable this experiment, go to the Accessibility sidebar panel, and check the “Enable full-page accessibility tree”. You will then have a new button displayed in the top-right corner of the DOM tree that lets you switch between the DOM and accessibility trees.

Find out more here, and let the team know your feedback.

CSS OVERVIEW IS NOW ON BY DEFAULT

The CSS overview panel isn’t new, but with so many panels to choose from, you might have never used it. It has been an experiment for a very long time, which means you needed to go into DevTools settings to enable it before being able to use it.

This is no longer necessary. The CSS Overview panel is just a regular feature now, and you can open it by going into … > More tools > CSS Overview.

If you’ve never used it, give it a try as it is a very useful tool to identify potential CSS improvements like contrast issues or unused CSS declarations.

While you’re in the More tools menu, take a look around. Chrome DevTools has more than 30 individual panels! That’s a lot, but keep in mind they’re all here for a specific reason. There might be aspects of your web app that certain panels could help you with. Be curious, and if you have no idea what a thing does, remember there are docs you can read.

That’s It For Now!
I hope you enjoyed these updates, and that they’ll turn out useful when doing web development. As always, if you have feedback, bugs to report, or new feature ideas for DevTools, make yourself heard! It’s impressive to see how far the web platform debugging capabilities have come, and we all can help make it even better!

Load or set environment variables in Node.js without dotenv or any third package.

Shahrukh Khan — Tue, 25 Jan 2022 12:56:20 +0000

Hello guys, If you are also trapped in the use of dotenv variables then this is for you a complete solution to load/set/manage environment variables in Node.js with the use of javascript & without the burdon of dotenv or any third package.
You can use it in Dev, Prod, UAT or any other environment without any issue.

Step 1: create a server
index.js

const http =require('http');
    const { port, environment } = require('./config').getEnv();

    http.createServer().listen(port, async () => {
      console.log(`env: ${environment}`);
      console.log(`server is running on ${port} port`);
    }).on('error', (e) => console.log(e));

Step 2: configuration of environement variables
config.js

const fs = require('fs');
    const path = require('path');
    const { parseBuffer } = require('./helpers/parse');

    const getEnv = () => {
      const envFilePath = path.join(__dirname, '.env');
      const bufferEnv = fs.readFileSync(envFilePath);
      const envObject = parseBuffer(bufferEnv);

      Object.keys((envObject || {})).map(key => {
        if(!process.env[key] && process.env[key] !== envObject[key]){
          process.env[key] = envObject[key];
        }
      });

      const version = process.env.VERSION;
      const environment = process.env.ENVIRONMENT;
      const port = process.env.PORT;

      return {
        version,
        environment,
        port,
      }
    }

    module.exports = {
      getEnv
    }

Step 3: create .env file & define your variables
.env

VERSION=v1.0.0
ENVIRONMENT=local
PORT=3001

Step 4: A function to parse buffer data into object
parse.js

const NEWLINES_MATCH = /\r\n|\n|\r/
    const NEWLINE = '\n'
    const RE_INI_KEY_VAL = /^\s*([\w.-]+)\s*=\s*(.*)?\s*$/
    const RE_NEWLINES = /\\n/g

    const parseBuffer = (src) => {
      const obj = {};
      src.toString().split(NEWLINES_MATCH).forEach((line, idx) => {
        // matching "KEY" and "VAL" in "KEY=VAL"
        const keyValueArr = line.match(RE_INI_KEY_VAL);
        // matched?
        if(keyValueArr != null){
          const key = keyValueArr[1];

          // default undefined or missing values to empty string

          let val = (keyValueArr[2] || '');
          const end = val.length -1;
          const isDoubleQuoted = val[0] === '"' && val[end] === '"';
          const isSingleQuoted = val[0] === "'" && val[end] === "'";

          // if single or double quoted, remove quotes 
          if(isSingleQuoted || isDoubleQuoted) {
            val = val.substring(1, end);

            // if double quoted, expand newlines
            if(isDoubleQuoted){
              val = val.replace(RE_NEWLINES, NEWLINE);
            }        
          } else {
            //  remove surrounding whitespace
            val = val.trim();
          }
          obj[key] = val;
        }
      });
      return obj;
    }

    module.exports = {
      parseBuffer
    }

Conclusion

Try this to overcome the burdon of dotenv & manage everything on yourbehafe.
If you got any issue during implementation of this code just Click to watch the video of solution