YourAppURL

Replace the value you are getting underneath the app above.

The ultimate guide to web development interviews. Developed by FAANG engineers, practice with real-world interview questions covering network security, system design, SEO, APIs, and more.

oct6.tar.gz

server

JavaScript

Grunt

webpack

webpack-loaders

Grunt-eslint

ProgressiveRendering

webpack-code-splitting

This course compiles a comprehensive range of questions that are most likely to be asked during the frontend interview. Where many interview prep courses focus on data structures and algorithms, this course focuses on a variety of topics from network security to system design.

In this course, you will solve interview questions that cover general aspects of web development. You’ll start by going over network security and optimization techniques for load balancing and browser rendering. After that, you’ll move on to interview questions around SEO, APIs, and system design.

Overall, these are questions that are often overlooked, but they can really make you stand out from your peers. By the end of this course, you will have the confidence and ability to go in and ace that interview.

Web Development Interview Handbook

module.exports = function(grunt) {
	grunt.initConfig({
		eslint: {
			options: {
				configFile: '.eslintrc.json',
			},
			target: ['app.js']
		}
	});
	grunt.loadNpmTasks('grunt-eslint')
	grunt.registerTask('myeslinttask', ['eslint']);
};

/*eslint-env es6*/

const express = require('express');
const app = express();
const router = express.Router();

const path = __dirname + '/';
const port = 3000;

router.use(function (req,res,next) {
  console.log('/' + req.method);
  res.header("Access-Control-Allow-Origin", "*");
  next();
});


router.get('/', function(req,res){
  res.header("Access-Control-Allow-Origin", "*");
  res.sendFile(path + 'index.html');
});

app.use(express.static(path));
app.use('/', router);

app.listen(port, function () {
  console.log('Example app listening on port 3000!')
})


<html>
 <head>
   <link rel="stylesheet" href="styles.css">
   <script src="myscripts.js"></script> 
 </head>
 <body>
  <button onclick="alertApp()">Alert!!</button> 
   <p> Here is the body of my app! </p>
 </body>
</html>

function alertApp(){
  alert("a basic app!");
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## Explanation

### `Gruntfile.js`

- **Line 4**: The unique configuration parameters of the `grunt-eslint` plugin can be found [here](https://www.npmjs.com/package/grunt-eslint). We've kept the most basic configurations. We define an ESLint configuration file at `options.configFile` called `.eslintrc.json`. Learn more about the ESLint config file [here](https://eslint.org/docs/user-guide/configuring).
- **Line 7**: Next, we’ve defined a target file that the linter will run on: `app.js`. Easy. 
- **Line 10**: We load the plugin on this line with the `grunt.loadNpmTasks()`.
- **Line 11**: Here, we register our task under the custom name `myeslinttask`.


# Explanation

## `Gruntfile.js`

- **Line 4**: The unique configuration parameters of the `grunt-eslint` plugin can be found [here](https://www.npmjs.com/package/grunt-eslint). We've kept the most basic configurations. We define an ESLint configuration file at `options.configFile` called `.eslintrc.json`. Learn more about the ESLint config file [here](https://eslint.org/docs/user-guide/configuring).
- **Line 7**: Next, we’ve defined a target file that the linter will run on: `app.js`. Easy. 
- **Line 10**: We load the plugin on this line with the `grunt.loadNpmTasks()`.
- **Line 11**: Here, we register our task under the custom name `myeslinttask`.


Linting JavaScript can save hours of work in the long term. Let's review how to lint with Grunt.


Introduction

Network

Security

Optimizing Loading Performance

Optimizing Browser Rendering Performance

Search Engine Optimization

System Design

APIs

Testing

Version Control

Task Runners & Bundlers

Conclusion

Solution Review: Linting with Grunt

Solution

Explanation

`Gruntfile.js`