[TCTS] FE Test Exam

# [TCTS] FE Test Exam ### Question 1 Where does the visible part of the HTML document live? - [ ] Inside the `<head>` tag - [x] Inside the `<body>` tag - [ ] Anywhere in the HTML document - [ ] Inside any `<script>` tags ### Question 2 Which of the following statements are correct? - [x] The `href` attribute of `<a>` specifies the URL of the page the link goes to - [ ] The `width` and `height` attributes of `<img>` provide the sharpness information for images - [x] The `alt` attribute of `<img>` provides an alternate text for images - [ ] The `src` attribute of `<img>` specifies the source set for images ### Question 3 Which of the following HTML elements are correct? - [ ] `</p>Example Paragraph<p>` - [x] `<P>Example Paragraph</P>` - [x] `<p>Example Paragraph</p>` - [ ] `<p>Example Paragraph<p>` ### Question 4 Which one is correct about CSS solutions? - [ ] styled-components is not a CSS-in-JS solution - [ ] CSS-in-JS externalize styling from JavaScript into standard CSS - [x] With CSS-in-JS, styles can use JS logic - [ ] With CSS modules, it's impossible to use SCSS ### Question 5 What is an example of using TailwindCSS? - [x] `<div class="bg-white p-2">Example</div>` - [ ] `<div style="background: white; padding: 0.5rem">Example</div>` - [ ] `<div class="background: white; padding: 0.5rem">Example</div>` - [ ] `<div style="bg-white p-2">Example</div>` ### Question 6 What is the primary difference between `let` and `const` in JavaScript? - [ ] `let` provides block scope, while `const` does not - [ ] `let` provides global scope, while `const` does not - [ ] `let` can be redeclared, while `const` cannot - [x] `let` can be reassigned, while `const` cannot ### Question 7 Which of the following can be the output of `Array.prototype.find()`? - [x] `undefined` - [ ] The index of an element in the array - [x] An array - [x] An object ### Question 8 Given `array = [1, 2, 3]`. What is the output of `{ ...array }`? - [ ] `{ 0: [1, 2, 3] }` - [ ] `[1, 2, 3]` - [x] `{ 0: 1, 1: 2, 2: 3 }` - [ ] `[ [1, 2, 3] ]` ### Question 9 What are correct about TypeScript? - [x] TypeScript is built on top of JavaScript - [ ] TypeScript is not a superset of JavaScript - [ ] TypeScript performs static type checking at run time - [x] TypeScript allows an interface to extend a class ### Question 10 Which of the following are special types of TypeScript? - [x] `null` - [ ] `string | number` - [x] `undefined` - [ ] `false` ### Question 11 What is the usage of `props` in React? - [ ] To store global data that can change over time - [ ] To manage component-specific data that can change over time - [x] To pass data from parent to child components - [ ] To pass data from child to parent components ### Question 12 What are correct about `state` in React? - [x] State is mutable and can be changed within the component - [ ] State is read-only within the component - [ ] State can be accessed outside the component - [x] State can be shared between sibling components by lifting up the state to a common parent component ### Question 13 Which is NOT a benefit of using React hooks? - [ ] Reuse existing code, share non-visual logic - [ ] More effective state management - [x] Avoid using too much props - [ ] Prevent issue associated with classes ### Question 14 What are correct about using React hooks? - [x] Call hooks at the top level of React functions - [ ] Call hooks inside loops, conditions or nested functions - [x] Call hooks from functional components or custom hooks - [ ] Call hooks in event handlers ### Question 15 When should you use the `useMemo` hook? - [x] In case the dependencies rarely change - [ ] In case the dependencies change frequently - [ ] In case the calculation is fast - [x] In case the calculation is slow ### Question 16 Which hook can be used to avoid props drilling? - [ ] `useState` - [ ] `useCallback` - [x] `useContext` - [ ] `useMemo` ### Question 17 Which solution can be used to share logic? - [x] HOC (Higher-Order Components) - [ ] Profiler - [x] Custom hooks - [ ] Fragments ### Question 18 Which is an ideal solution to build server-rendered applications? - [ ] Create React App - [x] NextJS - [ ] ExpressJS - [ ] NestJS ### Question 19 When should you choose Ant Design as the UI library? - [x] The app requires a consistent and elegant design - [ ] The app requires a modern and responsive design - [x] The app needs unique interfaces with highly-customizable components - [ ] The app needs complex UIs with highly-modular components ### Question 20 Which features are NOT supported by Ant Design? - [ ] Internationalization - [x] App routing - [ ] Theme customization - [x] Rich text editor ### Question 21 Which of the following is the React components foundation of Ant Design? - [ ] react-bootstrap - [x] react-component - [ ] reactstrap - [ ] semantic-ui-react ### Question 22 Which solution can be used to create responsive design? - [x] Media queries - [ ] CSS transitions - [x] Container queries - [x] Popular CSS frameworks (eg: Bootstrap, TailwindCSS...) ### Question 23 Which one should be used in mobile first design? - [ ] `@media only screen and (min-width: 1200px) {...}` - [ ] `@media only screen and (max-width: 1200px) {...}` - [x] `@media only screen and (min-width: 768px) {...}` - [ ] `@media only screen and (max-width: 768px) {...}` ### Question 24 What are the responsibilities of JavaScript module bundler? - [x] Combine many JavaScript files into a single one - [x] Generate a dependency graph of modules - [ ] Add more whitespace, comments to your code - [x] Remove unnecessary characters from your code (eg: whitespace, comments...) ### Question 25 What are correct about source maps? - [ ] Source maps are files whose name ended with `.map` or `.mp` - [x] Source maps can be generated by module bundlers (eg: Vite, webpack) - [ ] Source maps cannot help you debug your code easier - [x] Source maps can be used to map a combined file back to its original state ### Question 26 What are correct about Vite? - [ ] Vite bundles your code with esbuild - [x] Vite provides Hot Module Replacement - [x] Vite supports tree shaking and code splitting - [ ] Vite can only be used with React ### Question 27 What is the main difference between Vite and Create React App? - [x] Vite uses a faster build system and development server, while Create React App has a larger ecosystem - [ ] Vite uses a slower build system and development server, while Create React App has a smaller ecosystem - [ ] Vite has a larger ecosystem, while Create React App uses a faster build system and development server - [ ] Vite has a smaller ecosystem, while Create React App uses a faster build system and development server ### Question 28 What is the default output directory of Vite? - [ ] `src` - [x] `dist` - [ ] `build` - [ ] `lib` ### Question 29 Which of the following tools are used within Vite? - [x] Rollup - [ ] Parcel - [ ] Webpack - [x] esbuild ### Question 30 What are correct about tree shaking and code splitting? - [ ] Code splitting removes unused code from your application - [x] Tree shaking removes unused code from your application - [ ] Tree shaking divides your code into smaller chunks loaded on demand - [x] Code splitting divides your code into smaller chunks loaded on demand ### Question 31 What are the use cases of isolated component development? - [x] Build shared UI components for multiple projects - [ ] Integrate UI components with stable APIs - [x] Work with deeply nested components - [x] Build component library (eg: UI kit) ### Question 32 Where does TypeScript live in the testing trophy? - [x] Static testing - [ ] Unit testing - [ ] Integration testing - [ ] End-to-end (E2E) testing ### Question 33 What are some of best practices in Frontend testing? - [ ] Write as much unit tests as you can - [x] Do not write too many unit tests, focus more on integration tests - [x] Tests should be deterministic - [ ] Do your best to achieve 100% coverage ### Question 34 What are correct about unit tests and integration tests? - [x] One unit test covers only one module while one integration test cover a whole feature - [ ] Unit tests better resemble how users are using your app - [ ] Integration tests often require rewrite after refactoring - [x] Integration tests survive refactoring most of the time ### Question 35 What are the common causes of non-deterministic tests? - [x] Asynchronous behavior - [ ] Testing isolated components - [x] Timezone - [x] Network issues ### Question 36 Which selector should NOT be used in querying DOM elements for tests? - [ ] `[data-testid="loginBtn"]` - [x] `button` - [ ] `[children="Login"]` - [x] `.primary-btn` ### Question 37 Which is NOT a common type of code coverage? - [ ] Branch - [ ] Statement - [ ] Line - [x] Class ### Question 38 What does Gitlab CI/CD help you? - [x] Catch bugs early in the development cycle - [ ] Manage containerized workloads and services - [x] Build, test and deploy your app - [x] Monitor iterative code changes ### Question 39 Which is NOT the responsibility of K8s (Kubernetes)? - [x] Deploy code and build your application - [ ] App discovery and load balancing - [ ] Manage containerized applications - [ ] Horizontal scaling ### Question 40 What are the features of NGINX? - [x] Reverse proxy - [x] Content caching - [x] Load balancer - [ ] Run container applications ### Question 41 What is the primary goal of using Storybook? - [ ] Make UI components more beautiful - [x] Build UI components in isolation - [ ] Write unit test for UI components - [ ] Optimize performance for UI components ### Question 42 What are benefits of using monorepos? - [x] Shared code across projects - [ ] Lower memory and storage requirements - [x] Consistent code standard & style - [x] Simplified dependency management ### Question 43 Which are NOT disadvantages of using monorepos? - [ ] Higher chances of merge conflicts - [ ] Bad performance - [x] Complex code organization - [x] Reduce collaboration among teams ### Question 44 When should you NOT use a monorepo? - [x] Many projects run by different teams on different technologies - [x] The Frontend side changes frequently while everything stays the same on the Backend side - [ ] You want everyone in different teams to be able to view all the code - [x] You want to restrict access to some parts of the project ### Question 45 Which of the following solutions can be used to build monorepos for Frontend? - [x] Yarn workspaces - [x] Nx - [x] Lerna - [x] Bazel ### Question 46 Which of the following are the technologies used in Progressive Web Apps (PWA)? - [x] Service worker - [x] Background synchronization - [ ] Hot module replacement - [x] Push & notification ### Question 47 When should you build a Progressive Web App? - [ ] You want to create a responsive web app - [x] Provide good UX even when the device has network connection problems - [ ] Your users have a good internet connection - [x] Notify user about events happened while the app was not running ### Question 48 Which of the following are NOT recommended when optimizing website performance? - [ ] Reduce the impact of third-party code - [x] Increase JavaScript execution time - [ ] Remove unused JavaScript - [x] Add more dependencies ### Question 49 What are the common causes of a poor CLS (Cumulative Layout Shift)? - [x] Animations on elements - [ ] Pre-loaded content - [x] Images without dimensions - [x] Dynamically injected content ### Question 50 Which solution can be used to optimize LCP (Largest Contentful Paint)? - [x] Optimize image size - [x] Improve server response time - [ ] Enable lazy loading on images rendered above the fold - [x] Defer parsing of non-critical JavaScript ### Question 51 Given the capstone project: <a href="https://git.teko.vn/teko-ui/react-vite-capstone" target="_blank">https://git.teko.vn/teko-ui/react-vite-capstone</a>. The project is bootstrapped with React + Vite + TypeScript. Please use the capstone project and **choose one of the 3 topics below** to do this task. When you finish, compress your repo to the format **<yourname>.zip** (please exclude *node_modules*, *.git* and build folders before compressing), **push the zip file** to this Google Drive: <a href="https://drive.google.com/drive/u/1/folders/1i8Zf_KfsDQeE2dmglgVqqvjQjEtjIs0K" target="_blank">https://drive.google.com/drive/u/1/folders/1i8Zf_KfsDQeE2dmglgVqqvjQjEtjIs0K</a>, and **submit the link to your file**. > Note: You must use **Node 18+** for compatibility (you can use <a href="https://github.com/nvm-sh/nvm" target="_blank">NVM</a> to manage different Node versions if needed). **1. Build a TODO list** - The TODO list has some basic features: add new, view and delete item - There is a text input (to enter the item name) and a button to add new item to the TODO list - Each row in the TODO list has two information (the ordinal number & the item name) and a "Delete" icon - Use Ant Design to build the UI (already installed in the project) - Use React concepts (state, hooks) and event handlers to handle the logic **2. Build a shared Button component** - Build the Button component from scratch (do NOT use any UI libraries like Ant Design, etc), with well-defined component props using TypeScript - The Button component has some types: primary (solid primary-background-color, white text), secondary (white background-color, primary-color text & border). The primary-color is up to your choice - The Button has some UI effects on hover, click. The UI effects are up to your choice - The Button can be disabled (prevent user from clicking on the button) - The Button component uses `onClick` handler to handle `click` event - The Button's styles can be overridden **3. Build a login form with validation** - The form has two fields (username & password) and a "Submit" button - The username field is in text format, required, max length 20 characters - The password field is in password format, required, max length 16 characters and has an eye icon to view hidden password - Clicking on the "Submit" button will validate the form fields and show error messages if any. If all fields are valid, show a popup with success message: "Login successfully with username `<username>`" - Use Ant Design to build the UI (already installed in the project) Feel free to add more styles, functionalities to make better UI/UX if you can.