JavaScript Unscripted

 For better performance of loading resources, we can load resources on demand. here, the resources are split into chunks and these chunks are loaded on scroll. This setup demonstrates a basic implementation of code splitting and lazy loading using Webpack and the Intersection Observer API. It allows you to load JavaScript code chunks on-demand as elements become visible in the viewport, optimizing the performance of your web application. GitHub Link:  https://github.com/Kavshree/lazyloadIntersectionObserver Project Structure: npm install webpack webpack-cli --save-dev npm install webpack webpack-cli --save-dev npm install path Code index.html: <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Code Splitting and Lazy Loading Example </ title > </ head > < body >   < div ...

 1. Cross Site Scripting (XSS Attack) This type of attack allows an attacker to inject malicious scripts into web pages viewed by other users. Example: Consider you have an anchor tag that sets the value of href somewhere in your code based on query parameter. ?redirect=https://www.youtube.com/ should take you to youtube when a redirect link is clicked. But a hacker can have any other JavaScript code in the query parameter instead ?redirect=javascript:document.getElementsByTagName(%27button%27)[0].click() Issue:  https://stackblitz.com/edit/js-r6efjx Fix:  https://stackblitz.com/edit/js-bwcj8v < a   href   id = "redirectLink" > Redirect </ a > < br > < button > make payment </ button > //?redirect=https://www.youtube.com/ //?redirect=javascript:document.getElementsByTagName(%27button%27)[0].click() const   a  =  document . getElementById ( 'redirectLink' ); const   makePaymentElement  =  document ....

 1.  debounceTime / debounce If you have a searchbox that makes an API call, always use debounceTime (rxjs operator) or debounce. Also use switchMap to cancel making outdated calls to API checkout the example here:  https://stackblitz.com/edit/base-angular-12-app-crzqez 2. Use trackBy when rendering Arrays in for loop On click of add users button, users are assigned to a new array. Although the values are exactly the same, the list gets re-rendered. Implement trackBy function < div   *ngFor = "let u of users; trackBy: userTrackBy" >   {{ u.name }} </ div > < button   (click) = "addUser()" > add user </ button > export   class   TestTrackbyComponent  {    users  = [     {  name:   'Leanne' ,  id:   1  },     {  name:   'Ervin' ,  id:   2  },     ...

Web workers work in a separate thread and does not block the main thread <! doctype   html > < html > < head >< title >  web   worker   example  </ title ></ head > < body >     < button   id = "backgroundBtn" >  change   background  </ button >     < button   id = "calculateBtn" >  calculate  </ button >     < script >          const   backgroundBtnEle  =  document . getElementById ( "backgroundBtn" );          const   calculateBtnEle  =  document . getElementById ( "calculateBtn" );                   backgroundBtnEle . addEventListener ( "click" , ( event )  =>  {     ...

Generally we deploy the node.js/express app directly in EC2. This is costlier than lambda since EC2 charges for the whole duration whereas lambda charges only for the duration when it ran We need to install 1. express 2. ejs 3. serverless-http Here we use the regular express server in local/environment other than AWS. Note: We need to set ENVIRONMENT "lambda" in lambda once created const express = require ( 'express' ); const serverless = require ( 'serverless-http' ); const ejs = require ( 'ejs' ); const app = express () app . set ( 'view engine' , 'ejs' ); app . get ( "/" , ( req , res ) => {     res . render ( 'home' ) }) if ( process . env . ENVIRONMENT == 'lambda' ) {     module . exports . handler = serverless ( app ); } else {     app . listen ( 4000 , () => console . log ( "experss running" )) } Since we have "ejs" view engine, make sure to create "views"...

The Backend Create the server npm init npm i express Create server.js to spin up the server and listen in any post (here 4000) const express = require ( 'express' ); const app = express (); app . listen ( '4000' , () => console . log ( "listening at  4000" )) node server.js : Outputs Listening at 4000 Install graphQL npm install express express-graphql graphql --save Update server.js var express = require ( "express" ) var { graphqlHTTP } = require ( "express-graphql" ) var { buildSchema } = require ( "graphql" ) const schema = buildSchema ( `     type Query {         posts: String     } ` ) var app = express () app . use (    "/graphql" ,    graphqlHTTP ({      schema: schema ,      graphiql: true ,   }) ) app . listen ( 4000 ) console . log ( "Running a GraphQL API server at http://localhost:4000/graphql" ) For n...