frontEnd Developer

Question 1

How would you optimize a website’s assets/resources?

Answer 1

By “assets” I assume you mean the media and corollary files/documents included with your HTML pages.

Make them as small/compressed as possible while maintaining acceptable quality.

Set your web server’s caching parameters to deliver your assets most efficiently.

use of css sprite for icon..reducing network calls

Avoid unnecessary assets/avoid too many server requests on pages so that the load time does not suffer.

Question 2

Can you explain any common techniques or recent issues solved in regards to front-end security?

Answer 2

Use a modern framework that handles security automatically.

Avoid typical XSS(cross-side scripting) mistakes.

Consider using textContent instead of innerHTML.If you don’t generate HTML, there’s no way to insert JavaScript.

Compartmentalize your application.

Be more selective with third-party scripts.

Audit your dependencies.

Implement Content Security Policy.

Question 3

Can you describe your workflow when you create a web page?

Answer 3

Workflow may vary from people to people, but for me , it works this way.
1. Why do I want a webpage for?

2. Just sketch in mind or somewhere how you want your webpage design to look like etc. Make sure it attracts a targeted audience.
3. Where to deploy it(Most important, if you do not have a server/website to upload your webpage, your effort will go down into the drain)

Question 4

How many resources will a browser download from a given domain at a time?
What are the exceptions?

Answer 4

For Chrome it is 6, Firefox 6, IE11 is 8 though. I’d assume 6 then as a good average.

What are the exceptions? So the limits are per domain, so in theory, you could use a wildcard DNS where *.foo.com points to the same IP address.

Question 5

Name 3 ways to decrease page load (perceived or actual load time).

Answer 5

Choose a performance-optimized hosting solution.
Compress and optimize your images.
Reduce your redirects.
Cache your web pages.
Enable browser caching.
Use asynchronous and defer loading for your CSS and JavaScript files.

Question 6

What does CORS stand for and what issue does it address?

Answer 6

“CORS” stands for Cross-Origin Resource Sharing. It allows you to make requests from one website to another website in the browser, which is normally prohibited by another browser policy called the Same-Origin Policy (SOP).

Question 7

Explain the difference between cookies, session storage, and local storage?

Answer 7

Cookies
Cookies store small amounts of data that has to be sent back to the server with subsequent requests and their expiration can be set from either server or client. They are primarily used for server-side reading.

Capacity: 4KB
Accessible from: Any window
Expiration: Manually set
Storage location: Browser and server
Sent with requests: Yes
Blockable by users: Yes
Editable by users: Yes
Local storage
Local storage stores a larger amount of data on the client's computer in a key-value pair format and has no expiration date. Data is never transferred to the server and is accessible via JavaScript and HTML5.

Capacity: 10MB
Accessible from: Any window
Expiration: Never
Storage location: Browser only
Sent with requests: No
Blockable by users: Yes
Editable by users: Yes
Session storage
Session storage stores a larger amount of data on the client's computer only for the current session, expiring the data on tab close. Data is never transferred to the server and is accessible client-side from the same tab.

Capacity: 5MB
Accessible from: Same tab
Expiration: On tab close
Storage location: Browser only
Sent with requests: No
Blockable by users: Yes
Editable by users: Yes

Question 8

What does a doctype do?

Answer 8

Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly.

Question 9

What are data- attributes good for?

Answer 9

The data-* attribute is used to store custom data private to the page or application

Question 10

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

Answer 10

Semantics — Allowing you to describe more precisely what your content is.
Connectivity — Allowing you to communicate with the server in new and innovative ways.
Offline and storage — Allowing webpages to store data on the client-side locally and operate offline more efficiently.
Multimedia — Making video and audio first-class citizens in the Open Web.
2D/3D graphics and effects — Allowing a much more diverse range of presentation options.
Performance and integration — Providing greater speed optimization and better usage of computer hardware.
Device access — Allowing for the usage of various input and output devices.
Styling — Letting authors write more sophisticated themes.