1
//
Reset
Please answer the following questions.
How to design breakpoints in general? You can make an example you have seen in some frameworks like bootstrap / material-ui etc…
How can you detect the device in the browser?
What does * { box-sizing: border-box; } do? What are its advantages?
Explain CSS sprites, and how you would implement them on a page or site.
Please follow the html below,set the CSS to draw the layout of the picture. picture: https://drive.google.com/file/d/1bB8y1gNRkCcHVcbexkKT_m3cAz_vwinB/view?usp=sharing
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Shopee</title>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.13.12/babel.min.js"></script>
</head>
<style>
/* CSS here */
/* Brand Color: #ee4d2d */
</style>
<body>
<script type="text/jsx">
ReactDOM.render(
<nav>
<div>
<a href="#">賣家中心</a>
<a href="#">追蹤我們</a>
<a href="#">下載</a>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-plus" viewBox="0 0 16 16">
<path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9V5.5z"/>
<path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</div>
</nav>
,
document.getElementById('root')
);
</script>
</body>
</html>
About Callback, Async/Await and Promise.
Which of these are Asynchronous?
How does Asynchronous JavaScript work?
Design an api function of createUser. Now you should create 5 users.
If you use Promise.all to create these 5 users, will the end point of api receive requests in order?
How about using Async/Await to call createUser to create these 5 users? Will the end point of api receive requests in order?
In these two cases, which one may be faster? Why?
What are the following results?
var value = 1;
var foo = {
value: 2,
bar: function () {
return this.value;
},
};
console.log(foo.bar());
console.log((foo.bar)());
console.log((foo.bar = foo.bar)());
console.log((false || foo.bar)());
console.log((foo.bar, foo.bar)());
Please list the results and explain why.
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0]();
data[1]();
data[2]();
Please answer the following questions.
Why is it generally a good idea to position CSS <link> between <head></head> and JS <script> just before </body>? Are there any exceptions?
Describe the difference between <script>, <script async> and <script defer>
A user is buying goods in two different windows in the same site. If the site uses cookies to keep track of which good the user is buying.
What would happen?
Please suggest ways to improve.(Client Side Only)
These questions as below are about useEffect which is similar to class lifecycle.
How to correctly fetch data inside useEffect ? What is [ ] ?
Why sometimes get an infinite refetching loop?
Fix the following component. Short explanations and code snippets are both accepted.
import React, { useState, useRef, useEffect } from "react";
let isCalled = false;
const grecaptcha = {
render: function(element, { callback }) {
if (isCalled) throw new Error("You can only call me once");
isCalled = true;
element.innerText = "click me if you are not robot";
element.addEventListener("click", function() {
callback("you got token!");
});
}
};
const ReCAPTCHA = ({ onChange }) => {
const divRef = useRef();
const handleCallback = (token) => {
onChange(token);
};
const handleLoad = () => {
grecaptcha.render(divRef.current, {
callback: handleCallback
});
};
useEffect(() => {
handleLoad();
}, []);
return <div ref={divRef} />;
};
function App() {
const [isOld, setIsOld] = useState(true);
const oldFunction = () => console.log("old function");
const newFunction = () => console.log("new function");
return (
<div className="App">
<ReCAPTCHA onChange={isOld ? oldFunction : newFunction} />
<button
onClick={() => {
console.log("Switch to new function");
setIsOld(false);
}}
>
change function
</button>
</div>
);
}
About the single page app.
Explain what this is.
What are the pros and cons of SPAs?
How to make one SEO-friendly?
Please notice follow below rules:1.This model has name and value properties. 2.Set cookie with specific domain / expired. 3.Get cookies with a specific cookie key.
Design a cookies model.
What kinds of properties can you get in document.cookie?
There are 3 cookies like follow below table:
What value of Test will you get if you’re in www.google.com?
What value of Test will you get if you’re in account.google.com?
If these 3 cookies are HttpOnly, what value of Test will you get if you’re in www.google.com in client site?
Name Value Domain
Test a .google.com
Test b account.google.com
Test c mail.google.com
Time elapsed: 0 minutes (of 90 minutes)
SettingsSubmit Take-Home
