DEV Community: Nikhil Upadhyay

Using Web Workers for Parallel Processing in JavaScript

Nikhil Upadhyay — Sun, 11 Aug 2024 21:39:55 +0000

Ever felt your website slow down to a crawl when you're performing a heavy task like processing a large dataset or rendering complex graphics? It's a frustrating experience for both you and your users. Fear not, for there's a superhero in the world of JavaScript that can rescue your web app from this sluggishness: Web Workers.

Think of Web Workers as your trusty sidekicks, handling the heavy lifting while your main script focuses on keeping the user interface smooth and responsive. They're like having a second brain for your JavaScript application, allowing you to perform tasks in the background without freezing the main thread.

Understanding Web Workers

Web Workers are essentially JavaScript files that run in a separate thread, independent of the main thread. This means they can perform tasks without blocking the UI. Communication between the main thread and the worker happens through a message-passing system.

To create a Web Worker, you instantiate a Worker object, passing the path to the worker script as an argument. The worker script can then perform its tasks and send messages back to the main thread using the postMessage method. The main thread listens for messages using the onmessage event.

Common Use Cases

Web Workers shine in a variety of scenarios:

Data Processing: Handling large datasets, performing complex calculations, or generating reports.
Image and Video Processing: Applying filters, resizing images, or encoding videos.
Game Development: Performing physics calculations, AI processing, or loading game assets.
Cryptocurrency Mining: While not recommended for most users due to energy consumption, Web Workers can be used to perform cryptocurrency mining calculations.
Offline Support: Service Workers, a specialized type of Web Worker, can cache static assets and provide offline functionality.

Creating and Using Web Workers

Let's dive into a simple example to see Web Workers in action.



// main.js

const worker = new Worker('worker.js'); 
worker.onmessage = (event) => { 
  console.log('Message from worker:', event.data); 
}; 
worker.postMessage('Hello from main thread');



// worker.js

self.onmessage = (event) => { 
  console.log('Message from main thread:', event.data); 
  self.postMessage('Hello from worker'); 
};

Let's break down the code -

main.js:

const worker = new Worker('worker.js');: This line creates a new Web Worker instance named worker. The argument 'worker.js' specifies the path to the JavaScript file that will run in the worker thread.
worker.onmessage = (event) => { ... }: This line sets up an event listener on the worker object. Whenever the worker sends a message to the main thread, the code inside the event handler will be executed. The event.data property contains the data sent by the worker.
worker.postMessage('Hello from main thread');: This line sends a message to the worker thread. The message content is 'Hello from main thread'.

worker.js:

self.onmessage = (event) => { ... }: Similar to the main thread, this line sets up an event listener to receive messages from the main thread.
console.log('Message from main thread:', event.data);: This line logs the received message to the console for debugging purposes.
self.postMessage('Hello from worker');: This line sends a message back to the main thread with the content 'Hello from worker'.
The self keyword in the worker script refers to the global object of the worker context.

Service Workers: Use case on Offline Support

Service Workers are a special type of Web Worker that operate in the background, intercepting network requests and providing offline capabilities. They're crucial for building progressive web apps (PWAs).

To achieve offline functionality, Progressive Web Apps (PWAs) rely heavily on Service Workers. These are JavaScript files that run in the background, separate from your main application script. They act as a proxy between your website and the network, allowing you to intercept and modify network requests.

Caching Static Assets

The core idea behind offline support is to cache essential static assets, such as HTML, CSS, JavaScript, and images, during the initial load. When the user goes offline, these cached resources can be served, providing a seamless user experience.

Here's a breakdown of the process:

Register the Service Worker:

Create a service-worker.js file in your project's root directory.
Register it in your main JavaScript file:



// main.js
if ('serviceWorker' in navigator) { 
  window.addEventListener('load', () => { 
    navigator.serviceWorker.register('service-worker.js') 
      .then(registration => { 
        console.log('Service Worker registered successfully:', registration); 
      }) 
      .catch(error => { 
        console.error('Service Worker registration failed:', error); 
      }); 
  }); 
}

if ('serviceWorker' in navigator): This checks if the browser supports Service Workers.
window.addEventListener('load', () => { ... }): This ensures the code runs after the page has fully loaded.
navigator.serviceWorker.register('service-worker.js'): This registers the service-worker.js file.

Cache Assets:
Inside your service-worker.js file, use the CacheStorage API to
cache static assets.



// service-worker.js
self.addEventListener('install', (event) => { 
  event.waitUntil( 
    caches.open('static-cache-v1') 
      .then(cache => { 
        return cache.addAll([ 
          '/', 
          '/index.html', 
          '/styles.css', 
          '/main.js', 
          // Add other static assets here 
        ]); 
      }) 
  ); 
});

self.addEventListener('install', (event) => { ... }): This listens for the install event, which occurs when the Service Worker is first installed.
event.waitUntil(): Ensures the installation process is complete before proceeding.
caches.open('static-cache-v1'): Opens a cache named 'static-cache-v1'.
cache.addAll([...]): Adds a list of assets to the cache.

Intercept Network Requests:
Use the fetch event to intercept network requests. If the requested
resource is in the cache, serve it from there; otherwise, fetch it from
the network.



self.addEventListener('fetch', (event) => { 
  event.respondWith( 
    caches.match(event.request) 
      .then(response => { 
        return response || fetch(event.request); 
      }) 
  ); 
});

self.addEventListener('fetch', (event) => { ... }): Listens for the fetch event, which occurs whenever a resource is requested.
event.respondWith(): Defines how to respond to the request.
caches.match(event.request): Checks if the requested resource is in the cache.
return response || fetch(event.request): If the resource is in the cache, returns it; otherwise, fetches it from the network.

By following these steps and considering the additional factors, you can effectively implement offline support in your PWA, providing a robust and reliable user experience, even when there's no internet connection.

You can explore other use cases of service workers are – Push Notifications and Background Synchronization which are commonly used in making PWA apps.

Challenges and Considerations

While Web Workers are powerful, they're not without their challenges:

Communication Overhead: Sending data between the main thread and the worker can introduce overhead.
Debugging Complexity: Debugging Web Workers can be more challenging than debugging regular JavaScript code.
Browser Compatibility: Ensure compatibility across different browsers.

Conclusion

Web Workers are a game-changer for JavaScript developers, enabling you to create faster, more responsive, and offline-capable web applications. By understanding their core concepts and use cases, you can harness their power to build exceptional user experiences.

Remember: While Web Workers are a valuable tool, it's essential to use them judiciously. Overusing them can lead to performance issues. Always profile your application to identify bottlenecks and determine where Web Workers can provide the most significant benefits.

Frontend Optimization Techniques with Web Vitals: A Beginner's Guide

Nikhil Upadhyay — Thu, 25 Jul 2024 14:14:12 +0000

Introduction

Hey there, fellow web developers! Ever clicked on a website and felt like you were waiting an eternity for it to load? Yeah, we've all been there. That's where frontend optimization comes in. It's like giving your website a turbo boost to make it lightning-fast. And to make sure your website is actually speedy, we have Web Vitals – a set of metrics that measure user experience.

In this guide, we'll dive into the world of frontend optimization, break down those pesky Web Vitals, and give you practical tips to make your website a speed demon. Let's get started!

Understanding Web Vitals: The Heartbeat of User Experience

Imagine Web Vitals as your website’s health check. These metrics tell you how happy your users are based on how quickly your site loads, how responsive it is, and how stable it is. There are three main Web Vitals:

Largest Contentful Paint (LCP): This measures how long it takes for the largest content element on your page to load. Think of it as the moment when your website finally starts to look like something.
First Contentful Paint (FCP): This measures how long it takes for the very first content to render on the page. It's essentially the first impression your website makes.
First Input Delay (FID): This measures how long it takes for a user to interact with your website after they click or tap something. A high FID means your users are waiting around, twiddling their thumbs.
Cumulative Layout Shift (CLS): This measures how much your website’s content moves around unexpectedly. Ever been about to click a button and it suddenly shifts, making you miss? That’s a layout shift.

Optimize for Largest Contentful Paint (LCP)

Let’s tackle LCP first. Remember, we want to get that biggest piece of content on the screen as quickly as possible. Here’s how:

Image Optimization: Images can be huge file sizes. Compress them without sacrificing quality. Use formats like WebP if supported.
Critical Rendering Path: Identify the resources your browser needs to render the initial view and optimize their delivery.
Server Response Time: A slow server can kill your LCP. Make sure your server is up to snuff.
Avoid Render-Blocking Resources: Scripts and stylesheets can block rendering. Defer non-critical resources or load them asynchronously.
Good score: LCP should be less than 2.5 seconds.
Calculation: LCP measures the time from when the page starts loading to when the largest content element is fully visible in the viewport. This could be an image, text block, or other content.

Source - https://web.dev/articles/lcp

Optimize for First Contentful Paint (FCP)

FCP is all about getting something on the screen as fast as possible. Here's how to improve it:

Prioritize above-the-fold content: Make sure the most important content is loaded first.
Reduce server response time: A fast server is crucial for a good FCP.
Optimize CSS delivery: Deliver critical CSS as early as possible.
Minimize JavaScript execution time: JavaScript can delay FCP. Minimize its impact.
Good score: FCP should be less than 2 second.
Calculation: FCP measures the time from when the page starts loading to when any part of the page's content is visible, even if it's just a small text element.

Let's see an example of FCP and LCP timeline -

Source - https://web.dev/articles/lcp

Improve First Input Delay (FID)

FID is all about responsiveness. Nobody likes a slow website. Here’s how to boost your FID:

Minimize JavaScript Execution Time: JavaScript can be a performance hog. Break down large scripts, minimize their execution time, and avoid long-running tasks.
Reduce Main Thread Work: The main thread is busy handling user interactions. Offload heavy tasks to web workers if possible.
Leverage Browser Caching: Caching can significantly improve performance by storing resources locally.
Good score: FID should be less than 100 milliseconds.
Calculation: FID measures the time from when a user first interacts with a page (e.g., clicks a button) to when the browser is able to respond to that interaction.

Let's see the timeline of the typical webpage load and also you can see how FCP and FID are getting introduced in these timelines.

Source - https://web.dev/articles/fid

Reduce Cumulative Layout Shift (CLS)

A stable website is a happy website. Let’s prevent those annoying layout shifts:

Use width and height attributes: Specify the dimensions of images and iframes to reserve their space upfront.
Avoid dynamic content placement: Don’t let elements change position unexpectedly.
Use font display: Control font loading to prevent layout shifts caused by font changes.
Good score: CLS should be less than 0.1.
Calculation: CLS measures the sum of all individual layout shift scores for each unexpected layout change.

Source - https://web.dev/articles/cls

Optimize Your Code: The Nitty-Gritty

Now, let's dive into some specific code optimization techniques:

Minification and Bundling: Remove unnecessary characters from your code and combine multiple files into one to reduce HTTP requests.
Code Splitting: Break down your code into smaller chunks to load only what's needed.
Leverage Browser Caching: Set appropriate cache headers to store static assets locally.
Reduce HTTP Requests: Combine files, use sprites, and optimize image formats.
Optimize CSS Delivery: Prioritize critical CSS and load the rest asynchronously.

Measure and Iterate: The Ongoing Process

Frontend optimization is an ongoing process. You need to measure your website's performance regularly and make improvements based on the data. Here are some tools to help you:

Google Lighthouse: This Chrome extension provides insights into your website's performance.
WebPageTest: This tool offers detailed performance metrics and visualizations.
Chrome DevTools: Your browser's built-in developer tools can help you profile your code and identify performance bottlenecks.

Conclusion

Frontend optimization is essential for creating a great user experience. By understanding Web Vitals and implementing the techniques we've discussed, you can significantly improve your website's performance. Remember, it's a journey, not a destination. Keep experimenting, measuring, and refining your optimization efforts.

If you want to read more and want to go deep into web vitals, please check out web.dev articles on web vitals.

Callback Hell and How to Rescue it ?

Nikhil Upadhyay — Fri, 04 Jun 2021 14:24:22 +0000

For understanding the concept of callbacks and callback hell, I think you should know about Synchronous and Asynchronous programming in JavaScript(or any other language). Let's see a quick view on these topics in context of JavaScript.

Synchronous Programming

It is a way of programming in which you can perform only one task at a time and when one task is completed we move to another task. This is what we called Blocking Code operation because you need to wait for a task to finish to move to the next one.

console.log("Program Starts");
let sum = getSum(2,3);
console.log(sum);
console.log("Program Ends");

In the above code snippet, you see code will execute line by line and when an operation on one line is finished then we move to the next line so this is just a simple example of the synchronous way of programming and we do this in our daily life of programming.

Asynchronous Programming

Asynchronous programming allows you to perform that work without blocking the main process(or thread). It’s often related to parallelization, the art of performing independent tasks in parallel, that is achieved by using asynchronous programming.
In asynchronous operation, you can move to another task before the previous one finishes, and this way you can deal with multiple requests simultaneously.
In JavaScript, a good example of asynchronous programming is setTimeout function, let's see a quick example -

console.log("Program Starts");
setTimeout(() => {
  console.log("Reading an user from database...");
}, 2000);
console.log("Program Ends");

So, the output of this program will look like -

Program Starts
Program Ends
Reading an user from database...

Pretty cool, right? Our program didn't wait for setTimeout to finish, just goes for the next line, then came back to the function and prints the output. This is what we called Non Blocking code. You can read more about it here.
There are three design patterns in javascript to deal with asynchronous programming -

Callbacks
Promises
async/await (just a syntactical sugar of promises)

Callbacks

Callbacks is a great way of handling asynchronous behavior in javascript. In JavaScript, everything behaves like an object so functions have the type of object and like any other object (strings, arrays, etc) you can pass functions as an argument to other functions and that's the idea of callback.

function getUser(id, callback) {
  setTimeout(() => {
    console.log("Reading an user from database...");
    callback({id: id, githubUsername: 'jerrycode06'});
  }, 2000);
}

getUser(1, (user) => {
  console.log("User", user);
})

You see, we are passing function as an argument to getUser function and it calls inside the getUser function, output will look like -

Reading an user from database...
User {id: 1, githubUsername: 'jerrycode06'}

Callback Hell

In above code snippet, we are getting user with github username now let's suppose you also want repositories for that username and also commits in the specific repository so what can we do with the callback approach -

getUser(1, (user) => {
  console.log("User", user);
  getRepositories(user.githubUsername, (repos) => {
    console.log(repos);
    getCommits(repos[0], (commits) => {
      console.log(commits);
      // Callback Hell ("-_-)
    }
})

You are seeing now a nesting of functions here and code also looks scary and this is what we called Callback Hell. For a big application it creates more nesting.

To avoid this, we will see now Promises.

Promises

Promises are the alternative to callbacks for delivering the results of asynchronous computation. They require more effort from implementors of asynchronous functions, but provide several benefits for users of those functions. They are more readable as compared to callbacks and promises has many applications like fetch in javascript , mongoose operations and so on. Let's see how to implement promises with above example. Actually, promises have four states -

fulfilled - The action relating to the promise succeeded
rejected - The action relating to the promise failed
pending - Hasn't fulfilled or rejected yet
settled - Has fulfilled or rejected First we have to create promises to understand this -

function getUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Reading from a database....");
      resolve({ id: id, githubUsername: "jerrycode06" });
    }, 2000);
  });
}

function getRepositories(username) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Extracting Repositories for ${username}....`);
      resolve(["repo1", "repo2", "repo3"]);
      // reject(new Error("Error occured in repositories"));
    }, 2000);
  });
}

function getCommits(repo) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Extracting Commits for " + repo + "....");
      resolve(["commits"]);
    }, 2000);
  });
}

We created three functions, instead of passing callback function we are now returning a Promise which has two argument resolve and reject. If everything worked, call resolve otherwise call reject. Let's see how to use promises -

// Replace Callback with Promises to avoid callback hell
getUser(1)
  .then((user) => getRepositories(user.githubUsername))
  .then((repos) => getCommits(repos[0]))
  .then((commits) => console.log("Commits", commits))
  .catch((err) => console.log("Error: ", err.message));

More readable, Isn't it? Using arrow functions made this less complex than using simple functions. We have avoided nesting of functions and reduce the complexity of code (callback approach) and that's how promises work. You can deep-dive more about promises here.

async/await

It is supposed to be the better way to write promises and it helps us keep our code simple and clean.

All you have to do is write the word async before any regular function and it becomes a promise. In other words async/await is a syntactical sugar of using promises it means if you want to avoid chaining of then() methods in promises, so you can use the async/await approach but internally it also uses the chaining.
Let's see how to implement it with above example -

// Async- await approach
async function displayCommits() {
  try {
    const user = await getUser(1);
    const repos = await getRepositories(user.githubUsername);
    const commits = await getCommits(repos[0]);
    console.log(commits);
  } catch (err) {
    console.log("Error: ", err.message);
  }
}

displayCommit();

Now, it is more readable than using promises above. Every time we use await, we need to decorate this with a function with async. Like promises, we don't have catch() method here so that's why we are using try-catch block for the error handling.

Conclusion

In this article we've seen -

Synchronous vs Asynchronous
Callbacks and Callback Hell
Avoid Callback hell with promises and async/await

I personally like the async/await approach the most but sometimes we should the promises approach to deal with async behaviour.

Thanks for reading this long post! I hope it helped you understand these topics a little better. If you liked this post, then please do give me a few ❤️ and share it if you can. You are welcome to
give any suggestions in comments and ask anything!

Web Automation with Puppeteer - Node JS

Nikhil Upadhyay — Fri, 25 Dec 2020 20:59:35 +0000

I have a question in my mind right now, "Should I call this blog Web Automation or Web Scraping ?" Leave it for now.

< Hello World /> I suppose you are here because "You search Puppeteer in dev.to" or "My Blog is trending right now" but I am here to tell you about Web Automation or Web Scraping. When I first read about Web Scraping, I had a question "In order to do these web automation or web scraping , Is Python only the language ?" The answer is no and I am here to tell you how to do this with Javascipt.

Web Scraping

Web Scraping is the process of extracting information from the internet, now the intention behind this can be research, education, business, analysis, and others. Basic web scraping script consists of a “crawler” that goes to the internet, surf around the web, and scrape information from given pages. We have gone over different web scraping tools by using programming languages and without programming like selenium, request, BeautifulSoup, MechanicalSoup, Parsehub, Diffbot, etc. It makes sense why everyone needs web scraping because it makes manual- data gathering processes very fast. And web scraping is the only solution when websites do not provide an API and data is needed. Collection of data from the web has various name like Web Scraping, Web Data Extraction & Web Harvesting. These days everything & everyone needs fuel to run. Data is the most precious fuel to run any organization. Finding the data is good; extracting it even better; doing it using automation is perfect.

Using Javascipt

In this demonstration we are going to use Node JS and Puppeteer. Node JS is a open source javascript run time environment built on Chrome's V8 javascript engine written in C++ which enables javascript to run on your machine rather than your browser console. It is capable of reading or writing files on server and used in networking.

Puppeteer

According to its official documentation -
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
Let's understand this one-by-one -

It is a node library
Puppeteer provides us with a function to access Chrome or Chromium which in turn means we can automate anything we do on these browsers with it like emulating a key press, a click etc.
By headless, it means that the whole operation on the browser by puppeteer can be done without ANY GUI (Graphical User Interface) .

Using it we can Scare data from the internet, Create pdf from web pages, Take screenshots, Create automation testing and many more.
Now I think you are understanding the hard text of documentation right now. If not, wait for it you will understand when we do coding part.

Prerequisites

This tutorial is beginner friendly, no advanced knowledge of code is required. If you’re following along you’ll need NodeJS installed, basic knowledge of the command line, knowledge of JavaScript and knowledge of the DOM. If you don't have Node JS installed download it from here.

Show Time

Project Setup

Make a folder with any name
Open that folder in VS Code
Open terminal in VS Code and type npm init --yes. This will generate a package.json for managing project dependencies like this - ```

{
"name": "puppeteer-nodejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

* Now install puppeteer by using command `npm install puppeteer` or you can also see their [documentation](https://github.com/puppeteer/puppeteer/blob/main/README.md) and read the installation. 
* After installing you can see the puppeteer in the dependencies in the `package.json` file like this -

* At last create you javascript file with any name, I personally prefer `index.js`.

###Quickstart
We will start with an easy example where we took screenshot of this [Corona Wikipedia Page](https://en.wikipedia.org/wiki/Coronavirus). In the `index.js` file write this code which you can see in the example code of documentation.

const puppeteer = require("puppeteer");

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://en.wikipedia.org/wiki/Coronavirus");
await page.screenshot({ path: "corona-wiki.png" });
await browser.close();
})();

So what this example does is it uses async [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and wraps the whole script inside it . Now run this script by writing `node index.js` in terminal of VS Code and you will see something like this. 

![Code Image](https://dev-to-uploads.s3.amazonaws.com/i/nisr2dng14hqn4gcksu8.jpg) 

If everything went well You would see a new png file `corona-wiki.png` which contains the screenshot of our wikipedia page.

###Explanation
* `const puppeteer = require(‘puppeteer’);` is used to import puppeteer, it is going to be the first line of your scraper.
* `await puppeteer.launch();` is used to initiate a web browser or more specifically to create a browser instance you can open your browser in headless mode and non- headless mode using `{headless:false}` by default its true that means it will run browser processes in the background.
* We use await to wrap method calls in an async function, which we immediately invoke.
* `newPage()` method is used to get the page object. 
* `goto()` method to surf that URL and load it in the browser. 
* `screenshot()` takes a path argument and returns a screenshot of the webpage in 800×600 px form in the local directory.
* Once we are done with our script, we call `close()` method on the browser. 

###Scraping Data from Wikipedia
We will scrape some basic info from our Coronavirus Wikipedia page and output this in our console or you can put it in separate file(.txt, .dat, etc) like we did above. 
First of all let's go to our wikipedia page and scroll down a little you will see some headings so here we are - 

![Blog Image 3](https://dev-to-uploads.s3.amazonaws.com/i/fgcrdkt28xptx1rrivj3.png) 

Now we will collect these all heading from this page now right click and you will see **Inspect Element** click it this will open your **Inpector**. I am using Mozilla , you can Chrome also and the process is same because we just need some class-info from inspector. 

![Blog Image](https://dev-to-uploads.s3.amazonaws.com/i/p8dhqahbu9kyr33s5163.jpg)

You can see the Heading `<h2>` contains span of `class = "mw-headline"` and this class is common for all heading and it is our path to collect all headings. 

We add this function in our code -

const result = await page.evaluate(() => {
let headingFromWeb = document.querySelectorAll(".mw-headline");
const headingList = [...headingFromWeb];
return headingList.map((h) => h.innerText);
});

* We are using `page.evaluate()` function for this process and store it in a variable `result`.
* We are selecting that class with `document.querySelectorAll(".mw-headline");`
* Make it an array using the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and store in other variable `headingList`.
* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) that array and return the inner text part which contains our Headings. 

Our final code will look like this -

const puppeteer = require("puppeteer");

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://en.wikipedia.org/wiki/Coronavirus");
const result = await page.evaluate(() => {
let headingFromWeb = document.querySelectorAll(".mw-headline");
const headingList = [...headingFromWeb];
return headingList.map((h) => h.innerText);
});

console.log(result);
await browser.close();
})();

We are showing our result in terminal that's why we are using `console.log(result);`. If you have done right till now then you will see output like this - 

![Blog Image](https://dev-to-uploads.s3.amazonaws.com/i/3mpoco841yf5bc79t43z.jpg)

If you are seeing something like this then pat on your back you have done a great job, you did scraping from a famous site. If you don't understand some keywords first time, Don't worry I have attached the links where you can find great resource and read it on your own. 
There are many things to web scraping like going to different pages like IMDb, your college site, etc. Try out on your own read the documentation and you'll like puppeteer like me.

Thanks for reading this long post! I hope it helped you understand Web Scraping a little better. If you liked this post, then please do give me a few ❤️. You are welcome to comment and ask anything!

UI/UX - Design Thinking

Nikhil Upadhyay — Thu, 12 Nov 2020 19:47:32 +0000

Design Thinking is a human centered, iterative, creative, problem-solving process. It helps teams to manufacture innovation. It keeps people at the center of the process with the hope to create products that actually meet the needs and goal of the user.

Design Thinking is not the sole property of UXers. It's widely used across industries for decades.

As described by IDEO, one of the leaders in design thinking, "This approach, which is known as design thinking, brings together what is desirable from a human point of view with what is technologically feasible and economically viable. It also allows people who aren't trained as designers to use creative tools to address a vast range of challenges".

Design Thinking consist of five phases.

Empathize

This is where you learn about user problems,needs and goals. You're looking to gain empathy for the user and the problem they're experiencing. Empathy is at the center of the design thinking and UX as a whole because it helps you look at the problem from user's perspective and not your own.

Define

After learning all about the problem during the empathize phase, you analyze the data collected and define the problem. Here you create things like affinity maps and personas to guide you through the rest of the design process. The goal is to build a strong foundation for your ideas.

Ideate

Now that the problem is defined, its time to try out a bunch of things. You want to generate as many ideas as possible. You’re looking to challenge the status quo and any of the assumptions about the problem you stated earlier in the process. You can’t know the best solution until you’ve considered all the options.

Prototype

After ideating, it’s time to start experimenting with the different ideas you came up with during the previous phase and begin creating prototypes that you’ll test.

Test

With your prototypes in hand, it's time to learn if your solutions hit the mark. This is where you'll learn usability tests with real users to see what they think. You’ll get valuable feedback that you’ll use to either return to previous phases of the process to iterate further, or to move on to a final stage of production.

Final Words

It’s important to point out that these phases aren’t linear and it’s not a step-by-step process. It’s typical to jump back and forth between them and/or run phases in parallel.

Additionally, while there are a vast number of methods you can use during each phase, the 5 phases always remain the same. Think of the process as being dynamic. Depending on the context and the problem you’re solving, you apply the phase and methods that make the most sense.
The Empathize and Define stages are the equivalent to Research & understanding. Ideate is the same as Information architecture & wireframing. Prototype and Test are the same as... you guessed it... the Prototyping & usability testing phase.

My Graduation Project Experience

Nikhil Upadhyay — Fri, 22 May 2020 21:25:14 +0000

Hey, I am Nikhil Upadhyay and this is the first time I am writing a blog post on any platform so it may be a short one. I've completed my graduation with Physics as my major subject. I like physics very much but when it comes to deep theoretical physics it becomes vulnerable and I am saying this from my experience that's why I like experimental physics very much.
So, This was the time of my end semester and there is rule to complete a major project under a supervisor before you graduate. So, my department allotted me a professor Dr. Raktim Abir (Core Area- Quantum Chromodynamics and Chaotic Systems). During my graduation I learned some programming Languages like C/C++ and some Python so when I first met my Professor he nicely talked to me and asked me a first question "Nikhil, this is your last semester so would you like to tell me how was your experience in this department or this course?" then this discussion goes on. As I told him about that I want to change my subject from physics to Computer Science, so he gave me a topic which is related to Computer Science and Physics "Cellular Automaton". Like you I also didn't hear that name before so I go to my friend Google and research on my own. During this project, I have to study "What is Cellular Automaton and how this work?" and also I have to make some algorithms for famous Cellular Automaton models like Game of Life and Abelian Sandpile's Model. I got to know a YouTube channel TheCodingTrain from Prof. Daniel Shiffman ,he is pretty smart and funny guy and I saw his tutorial then I got familiar and then it takes 3 months and finally I submitted my Project and gave the presentation. That's It!!
Thank You