Frontend Flashcards
What is DOCTYPE declaration in HTML?
DOCTYPE stands for Document Type and is written at the beginning of the HTML file. DOCTYPE is not a tag and tells the browser the version of the HTML file. Currently in HTML5, it is simply declared as follows
<!DOCTYPE html>
Why you can’t see DOCTYPE in Next.js page router?
In Next.js, you don’t need to explicitly add the DOCTYPE declaration to your code because Next.js automatically adds it for you when it renders the final HTML.
This happens because Next.js uses a custom Document component that handles the initial HTML structure, including the DOCTYPE. When your application is rendered, Next.js injects the proper <!DOCTYPE html> at the beginning of your HTML document.
If you want to see or modify how Next.js handles this, you can create a custom _document.js (or _document.tsx for TypeScript) file in your pages directory. This allows you to customize the document structure while still maintaining the automatic DOCTYPE insertion.
A basic custom Document component might look like this:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Why you can’t see DOCTYPE in Next.js app router?
The HTML document structure (including DOCTYPE) is automatically handled for you by Next.js in the App Router, similar to how it worked in the Pages Router but with a different implementation.
If you need to modify HTML attributes (like lang) or add elements to <head>, you can do this directly in your root layout component:
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>{children}</body>
</html>
)
}
What should we be careful about in HTML when designing a multilingual website?
you should be careful about several HTML elements and attributes to ensure proper internationalization. Here are the key considerations:
HTML lang attribute
Always set the correct lang attribute on the <html> element (e.g., <html lang="ja"> for Japanese)
This is essential for screen readers, search engines, and browser rendering
Character encoding
Use UTF-8 encoding (<meta></meta>)
Without this, non-Latin characters may display incorrectly
Text direction
Use dir=”rtl” for right-to-left languages like Arabic and Hebrew
This fundamentally affects how your entire layout works
Language selection
Provide clear language switching that uses native language names
Place it consistently and make it easily accessible
Metadata and alternate links
Use <link></link> to indicate language variants
This helps search engines direct users to the correct language version
These five elements specifically address the unique challenges of multilingual websites and will have the most immediate impact on functionality and user experience.
What are HTML semantic elements, and why would we like to use them?
HTML semantic elements are HTML tags that carry meaning about the structure and content they contain, rather than just defining presentation. Examples include <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.
Here’s why using semantic elements is beneficial:
Accessibility: Screen readers and assistive technologies can better interpret the page structure, making your site more accessible to people with disabilities.
SEO benefits: Search engines better understand your content and its importance, potentially improving your rankings.
Code readability: Semantic elements make your HTML more readable and maintainable for developers compared to generic <div> tags.
Consistent styling: They provide logical hooks for CSS styling that are meaningful across projects.
When you shared a web page link to SNS like Twitter, the image, title, and description did not appear. How will you fix this?
This issue is likely due to missing Open Graph and Twitter Card meta tags, which are essential for controlling how your content appears when shared on social media. Here’s how to fix it:
-
Add Open Graph meta tags in your HTML
<head>section:
```html
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>
<meta></meta>
2. **Add Twitter Card meta tags**: ```html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:description" content="A compelling description of your page content"> <meta name="twitter:image" content="https://yoursite.com/path/to/image.jpg">
Important considerations:
- Use absolute URLs for images and page URLs
- Optimal image size for Twitter is 1200×628 pixels
- Ensure the image is publicly accessible
- The description should be concise (120-160 characters)
- Test your implementation using the Twitter Card Validator or Facebook Sharing Debugger tools
If using Next.js, you can add these in your page’s <Head> component or in your layout components depending on your project structure.
What is CSS Specificity?
The specificity of CSS refers to the algorithm that calculates a score for competing CSS declarations that target the same element when multiple CSS rules are specified. This algorithm determines which rule should be applied to an HTML element. For example, the weight score of the specificity is in the order of ID selector > CLASS selector > TYPE selector.
What is CSS Box Model?
The CSS box model is the concept that all HTML elements are contained within rectangular areas called boxes. It is composed of the following elements:
Content: The element’s content.
Padding: The inner padding of the element.
Border: The border of the element.
Margin: The outer margin of the element.
What is box-sizing in CSS?
Box-sizing is a CSS property that determines how the total width and height of an element is calculated.
There are two main values for box-sizing:
-
content-box(the default): Width and height apply only to the content area of the element. Padding, border, and margin are added to the specified width and height. -
box-sizing: border-box: Width and height include the content, padding, and border, but not the margin. This makes it easier to size elements because the total width/height is what you specify, regardless of padding or border.
Many developers prefer using border-box for all elements because it creates a more intuitive sizing model. This can be applied globally with:
```css
* {
box-sizing: border-box;
}
~~~
This way, when you set an element to be 300px wide, it will always be 300px wide, even if you later add padding or borders.
Explain the difference between block, inline, and inline-block in CSS.
block: always starts on a new line, and the browser automatically adds space to the left and right on the web page.
inline: do not start on a new line and only take up the necessary width. Other characteristics include not being able to specify width and height, and padding and margin can be applied to the left and right, but not to the top and bottom.
inline-block: combine the characteristics of both, without starting on a new line, and padding and margin can be applied to the top, bottom, left, and right.
Explain the difference between Flexbox and Grid in CSS.
Flexbox and Grid are layout modules in CSS that control the placement and alignment of elements in web design, each suited to specific scenarios.
Flexbox is designed for one-dimensional layouts, that is, either rows or columns. By using Flexbox, you can position child elements (flex items) within a parent element (flex container). These child elements can be freely adjusted or arrayed in a vertical or horizontal direction, making it possible to create more complex layouts. Flexbox is particularly suitable for component-level layouts such as navigation, headers, footers, sidebars, and card layouts.
Grid is designed for two-dimensional layouts, encompassing both rows and columns. Grid is suitable for designing the layout of an entire page, with the ability to place elements on specific rows and columns. This allows for the creation of highly complex designs. The rows and columns in a grid are explicitly defined, and elements are placed at the intersections of these rows and columns. Additionally, Grid provides more advanced control over complex layouts and alignments.
What is DOM?
The DOM (Document Object Model) is an API within web browsers that represents the structure of HTML or XML documents as a logical tree structure of objects, with each object represented as a Node. Node is the basic unit of the DOM and represents elements, text, and other types of content in the document. Through the DOM, it is possible to manipulate web page elements, such as adding, deleting, or updating them, and dynamically change web pages based on user input or external data.
What is the difference between const, var, and let in JavaScript?
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/#:~:text=Just%20like%20let%20%2C%20const%20declarations,and%20const%20are%20block%20scoped.
First, the difference between const and other declarations is that variables declared with const cannot be reassigned. Next, variables declared with var are hoisted (Hosting), meaning that they can be referenced from anywhere within their scope even if they have not yet been declared.
Additionally, variables declared with var written at the top level are added to the global scope (the Window object), which caused many issues prior to ES6. On the other hand, using let or const applies normal block scope, so the variable is only valid within that block.
What is “use strict”;?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode
“use strict”; defines that JavaScript code is executed in “strict mode”. In “strict mode”, you are forced to write more strict JavaScript code. For example, you cannot assign a value before declaring a variable, or use delete for a variable, etc. Note that ES Modules available from ES2015 are always in strict mode.
What is a prototype chain?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
The prototype chain is used to build objects of a new type based on existing objects. This concept is similar to inheritance in class-based languages.
Each object has a private property called its prototype, which is a link to another object. The prototype object itself also has a prototype, and this chain continues until an object with a null prototype is reached.
It’s helpful to imagine this as a linked list of objects, with each object connected to its prototype like a chain, hence the term “prototype chain”.
What is the difference between == and === operators?
Double Equals (==)
Performs type coercion before comparison
Compares only value, not type
Will attempt to convert values to the same type before comparison
Triple Equals (===)
Strict equality operator
Compares both value and type
No type conversion occurs
—————————
In JavaScript, the major difference between Strict Equality (===) and Equality (==) is that the == operator performs type conversion on the operands before comparing them, whereas the === operator compares not only the data type of the operands but also their values. For example, when comparing 1 == “1”, the string type is converted to a numeric type before comparing their values. In practical coding, it is recommended to use the === operator as much as possible.
What is the difference between Primitives and Objects?
Primitives
Stored by value: When you assign or pass a primitive, you’re working with the actual value
Immutable: Cannot be changed after creation
Compared by value: Two primitives with the same value are considered equal
Six types:
String (e.g., “hello”)
Number (e.g., 42, 3.14)
Boolean (true, false)
Undefined
Null
Symbol (ES6, unique identifiers)
BigInt (for working with very large integers)
Objects
Stored by reference: When you assign or pass an object, you’re working with a reference to it
Mutable: Properties can be changed, added, or removed
Compared by reference: Two objects with identical properties are not equal unless they reference the same object
Types include:
Plain objects ({})
Arrays
Functions
Dates
RegExp
Map, Set, WeakMap, WeakSet
Custom types created with classes or constructors
What is a First-class Function?
A first-class function in JavaScript is a function that can be treated like any other variable. This is a fundamental concept that gives JavaScript much of its flexibility and power.
In JavaScript, functions are first-class citizens, which means they can:
Be assigned to variables or stored in data structures
Be passed as arguments to other functions
Be returned from other functions
Have properties and methods attached to them
Here’s a simple example showing these concepts:
What is a Higher-order function?
A higher-order function in JavaScript is a function that either:
Takes one or more functions as arguments, or
Returns a function as its result
These functions treat other functions as data, allowing for more modular, flexible, and reusable code. They’re a cornerstone of functional programming in JavaScript.
What is currying function?
Currying is a functional programming technique in JavaScript where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument.
In simpler terms, instead of a function like add(a, b, c) that takes all arguments at once, currying gives you add(a)(b)(c) where each argument is provided separately.
The benefits of currying include:
Partial application - You can create specialized functions by providing only some arguments
Function composition - It makes it easier to compose functions together
Code reusability - Common function configurations can be saved and reused
For example, with currying you can create specialized functions:
What is JSX?
JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It’s a fundamental part of React that makes it easier to create and visualize UI components.
Here are the key aspects of JSX:
It combines JavaScript and HTML syntax, letting you write markup directly in your JavaScript code.
JSX expressions are transformed into regular JavaScript function calls during compilation (typically through Babel).
JSX elements become React elements, which are lightweight descriptions of what to render.
For example, this JSX:
const element = <h1 className="greeting">Hello, world!</h1>;
Gets compiled to:
const element = React.createElement(
‘h1’,
{className: ‘greeting’},
‘Hello, world!’
);
What is Virtual DOM in React?
https://legacy.reactjs.org/docs/faq-internals.html
Virtual DOM is a programming concept used in React to optimize the updating of the user interface. Here’s how it works:
The Virtual DOM is a lightweight copy of the actual DOM (Document Object Model) kept in memory.
When state changes in a React application, React creates a new Virtual DOM tree reflecting those changes.
React then compares this new Virtual DOM with the previous one through a process called “reconciliation.”
React identifies the minimum number of changes needed to update the actual DOM.
Only those specific changes are applied to the real DOM, rather than re-rendering the entire page.
This approach offers several benefits:
It’s more efficient because manipulating the actual DOM is expensive in terms of performance.
It allows for batch updates, minimizing the number of DOM operations.
It abstracts away direct DOM manipulation, making the programming model more declarative.
—
What is “React Fiber”?
Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. Read more.
What is key prop and what is the benefit of using it?
The key prop helps to identify which elements in a list item have been modified, added, or deleted. This allows React to know which child elements of the virtual DOM have differences, thus preventing unnecessary rendering. You should assign a unique key like an ID to the key, not the index.
What is the advantage of using Functional Component instead of Class Component?
The benefits of using Functional Components are:
You don’t need to use the ‘this’ keyword in JavaScript.
They require less code.
Using custom hooks makes it easier to separate logic and presentation.
https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components/
