Front-end Flashcards
What are the three main ways to register event handlers?
Inline Event Handling: This involves specifying event handlers directly within the HTML element’s attributes, like “onclick” or “onchange.”
Traditional Event Handling: You can register event handlers using JavaScript by selecting the element and attaching event listeners using methods like addEventListener().
Framework-Based Event Handling: In modern web development, many frameworks (e.g., React, Angular, Vue.js) provide their own ways to register event handlers as part of their component-based architecture.
Name 5 inline elements and 5 block-level elements.
Inline:
a abbr acronym b bdo big br button cite code dfn em i img input kbd label map object output q samp script select small span strong sub sup textarea time tt var
Block-level:
address article aside blockquote canvas dd div dl dt fieldset figcaption figure footer form h1-h6 header hr li main nav noscript ol p pre section table tfoot ul video
Which method should be used to extract the JSON body content from the response while using the fetch API?
The .json() method parses the JSON content in the response and returns a JavaScript object.
What are the phases that events can be registered in?
Capturing Phase (Capture Phase):
- Events start from the top of the DOM hierarchy and trickle down to the target element.
- You can register event listeners in this phase using the true flag as the third parameter in addEventListener.
Target Phase (Target Phase):
- This is when the event reaches the target element that triggered it.
- Most event listeners are registered for this phase without specifying a phase (or by specifying false for the third parameter in addEventListener).
Bubbling Phase (Bubbling Phase):
- After the target phase, events bubble up from the target element through the DOM hierarchy.
- You can also register event listeners in this phase without specifying a phase (or by specifying false for the third parameter in addEventListener).
Which method allows killing a running worker?
.terminate()
What are the instance methods used in the Web storage API?
clear()
getItem()
key()
removeItem()
setItem()
Which goals can be achieved by using custom elements?
Component Reusability
Code Modularity
Encapsulation
Consistency
Readability
Interoperability
Future-Proofing
Enhanced Developer Experience
Which webpack loader should be used to add exports of a module as style?
In Webpack, you can use the “style-loader” to add the exports of a module as styles to the DOM. The “style-loader” is often used in conjunction with the “css-loader” to handle CSS imports and apply the styles to the page.
What is the difference between var, let and const?
Var declarations are globally scoped or function scoped while let and const are block scoped.
Var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
What is the purpose of abstract factory pattern?
The purpose of the Abstract Factory Pattern is to provide an interface for creating families of related or dependent objects without specifying their concrete classes. It is one of the creational design patterns and focuses on creating object instances, often grouped into families, in a way that promotes flexibility, maintainability, and the avoidance of tight coupling between client code and the specific implementations of objects.
The Abstract Factory Pattern is particularly useful in scenarios where you need to ensure that multiple objects work together cohesively, and you want to design your code to accommodate future changes and extensions in a more organized manner.
What is the First Contentful Paint?
The FCP is a web performance metric that measures the time it takes for the first content element to be rendered on the screen when a user visits a web page. This content element is typically a part of the page’s main content, such as text, images, or a background color.
FCP is an important user-centric performance metric because it gives users a sense that the web page is loading and responding to their interaction. It’s one of the Core Web Vitals used to assess the user experience on websites. Improving FCP can lead to a more engaging and user-friendly web experience.
What is the main difference between dedicated and shared workers?
Dedicated Workers:
Single Tab/Window: Dedicated Workers are tied to a single tab or window of a web application. They run in isolation from the main thread of that specific tab or window.
No Shared Access: They don’t share data or communication with workers in other tabs or windows.
One-to-One Relationship: Each Dedicated Worker is dedicated to a specific tab or window, creating a one-to-one relationship.
Use Cases: Dedicated Workers are suitable for scenarios where a specific tab needs to perform background tasks independently of other tabs, such as heavy computations or data processing related to the content in that tab.
Shared Workers:
Shared Across Tabs/Windows: Shared Workers can be shared and accessed by multiple tabs or windows from the same origin (website).
Shared Data and Communication: They enable communication and data sharing between different parts of the application running in different tabs or windows.
One-to-Many Relationship: Multiple tabs or windows can communicate with and share data through the same Shared Worker, creating a one-to-many relationship.
Use Cases: Shared Workers are useful when you need to maintain shared state, data, or communication across different instances of your web application, like chat applications or collaborative tools.
What are the benefits we will get if we use generics in TypeScript?
Reusability
Type Safety
Abstraction
Code Clarity
Performance
API Design
Maintainability
Reduced Code Duplication
What are the purposes of Singleton pattern?
The singleton pattern is a software design pattern that ensures only one instance of a class is created and shared throughout the application. It is often used to manage global or shared resources, such as configuration settings, database connections, or logging services.
What is the Canvas API?
The Canvas API is a part of the HTML5 specification and provides a way to dynamically draw and render graphics, animations, and other visual content directly in a web page using JavaScript. The central component of the Canvas API is the < canvas > element, which serves as a container for graphics and is manipulated through JavaScript.
