### Installing Bootstrap via npm (Node.js)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This command installs the Bootstrap framework and its dependencies using npm, the Node.js package manager. It's the foundational step to integrate Bootstrap into a project, making its files available for use.
```Shell
npm install bootstrap
```
--------------------------------
### Examples of HTML Elements and Tags
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Define Terms With HTML.md
This snippet provides examples of common HTML elements like headings and paragraphs, and demonstrates an empty element like which does not contain content and requires only a start tag.
```HTML
| My First Heading |
| My first paragraph. |
| _none_ | _none_
```
--------------------------------
### Demonstrating Basic Usage of JavaScript String startsWith()
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript startsWith.md
This example showcases fundamental applications of the `startsWith()` method. It demonstrates checking for a prefix at the beginning of a string, attempting to find a prefix not at the start, and using the optional `start` parameter to begin the search from a specific index.
```JavaScript
const greeting = "Hello, world!";
console.log(greeting.startsWith("Hello")); // true
console.log(greeting.startsWith("world")); // false
console.log(greeting.startsWith("H", 2)); // false
```
--------------------------------
### Including Tailwind CSS via CDN (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This snippet shows how to include Tailwind CSS using a Content Delivery Network (CDN). Tailwind is a utility-first framework, and this CDN link provides access to its extensive set of utility classes for direct use in HTML. This is a quick way to get started without a build process.
```HTML
```
--------------------------------
### Inheritance Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Classes.md
This example demonstrates basic class inheritance in JavaScript, where the `Dog` class extends the `Animal` class. It shows how to use `super()` to call the parent class constructor and how to override methods in the subclass.
```JavaScript
class Animal {
constructor(name) {
this.name = name;
}
sound() {
console.log("Generic animal sound");
}
}
class Dog extends Animal {
constructor(name) {
super(name); // Call the Animal constructor
this.breed = "Unknown";
}
sound() {
console.log(`${this.name} barks`);
}
}
const fido = new Dog("Fido");
fido.sound(); // Outputs "Fido barks"
```
--------------------------------
### Defining and Instantiating a Basic JavaScript Class
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript class.md
This snippet demonstrates the fundamental syntax for defining a JavaScript class with a constructor and a method. It shows how to initialize object properties using the constructor and how to call a class method on an instance. The example creates a `Document` class, instantiates it, and calls its `display` method.
```javascript
class Document {
constructor(title, description) {
this.title = title;
this.description = description;
}
display() {
console.log(this.title + ": " + this.description);
}
}
const myDocument = new Document("Best Practices Guide", "A detailed exploration of JavaScript classes");
myDocument.display(); // Output: Best Practices Guide: A detailed exploration of JavaScript classes
```
--------------------------------
### Creating a Paragraph in HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Guides.md
This snippet demonstrates how to create a simple paragraph using the `
` tag. Paragraphs are block-level elements that automatically start on a new line and are used to structure textual content within the `
` of an HTML document.
```html
This is a paragraph.
```
--------------------------------
### Using String.prototype.match() for All Matches
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript n.md
Illustrates the `match()` method, which returns an array of all matches for a given regular expression in a string, or `null` if no matches are found. The example uses global and case-insensitive flags to find all occurrences of 'hello'.
```JavaScript
const str = "Hello world, hello universe!";
const matches = str.match(/hello/gi); // Returns ["Hello", "hello"]
```
--------------------------------
### Using the Position Parameter in JavaScript String startsWith()
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript startsWith.md
This example demonstrates the utility of the optional `start` parameter. It shows how to check if a string begins with a specified substring from a particular index, allowing for prefix checks within the string rather than just at its absolute beginning.
```JavaScript
const sentence = "JavaScript is versatile!";
console.log(sentence.startsWith("is", 11)); // true
```
--------------------------------
### Dynamic Pattern Creation with RegExp Constructor
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript n.md
Shows how to create a regular expression dynamically using the RegExp constructor. The `regexInput` parameter allows for flexible pattern generation at runtime, useful for user-defined searches. The example uses `exec()` to find matches.
```JavaScript
function find(regexInput, text) {
const regexPattern = new RegExp(`${regexInput}`, "gi");
console.log(regexPattern.exec(text));
}
find("lazy", "The quick brown fox jumps over the lazy dog.");
```
--------------------------------
### Basic Bootstrap Page Structure with Grid (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This comprehensive HTML snippet illustrates a basic Bootstrap page structure, including CDN links for CSS and JavaScript, and demonstrates the 12-column grid system. It sets up a responsive layout with a header and three columns, showcasing how to use Bootstrap classes like `container-fluid`, `container`, `row`, and `col-sm-4` for responsive design.
```HTML
Bootstrap Framework
Resize the screen to see the effect
Column 1
Tutorialspoint - Simple and Easy Learning
Column 2
Tutorialspoint - Simple and Easy Learning
Tutorialspoint - Simple and Easy Learning
Column 3
Tutorialspoint - Simple and Easy Learning
Tutorialspoint - Simple and Easy Learning
```
--------------------------------
### Single-line Comment Example in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Lexical grammar.md
This code snippet demonstrates a single-line comment in JavaScript. Single-line comments start with `//` and continue until the end of the line. They are used to add explanatory notes to the code.
```JavaScript
// This is a single-line comment
```
--------------------------------
### Using String.prototype.replace() for Substitution
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript n.md
Shows the `replace()` method, which substitutes matched substrings with a replacement string. With the global flag, all occurrences are replaced. The example replaces all 'hello' (case-insensitive) with 'world'.
```JavaScript
const str = "Hello world, hello universe!";
const newStr = str.replace(/hello/gi, "world"); // Returns "world world, world universe!"
```
--------------------------------
### Implementing Positional Filtering in RegExp Subclass (JavaScript)
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Symbol.matchAll.md
This JavaScript example demonstrates how to create a custom RegExp subclass, 'PositionalMatcher', that overrides the Symbol.matchAll method. It filters matches based on their starting index, yielding only those where the match's index is an even number, showcasing conditional matching beyond standard regex capabilities.
```javascript
class PositionalMatcher extends RegExp {
[Symbol.matchAll](str) {
const matches = super.exec(str);
if (matches && matches.index % 2 === 0) {
yield matches;
}
}
}
```
--------------------------------
### Foundation Mobile-First Grid Layout (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This snippet demonstrates Foundation's mobile-first grid system using classes like `grid-container`, `grid-x`, `grid-padding-x`, `cell`, `small-6`, and `medium-4`. It creates a responsive two-column layout that adapts based on screen size, showcasing how to build flexible designs with Foundation.
```HTML
Column 1
Column 2
```
--------------------------------
### Establishing Early Connection to Origin with HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Relprefetch.md
This snippet utilizes `rel=preconnect` to establish an early connection (DNS, TCP, TLS) to `https://example.com`. This is beneficial for important third-party origins, as it reduces the setup time for subsequent resource requests from that origin.
```HTML
```
--------------------------------
### Getting Start of Day for ZonedDateTime in Sao Paulo (DST Midnight Transition) - JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript startOfDay.md
This example illustrates the `startOfDay` method's behavior in regions where DST transitions historically occurred at midnight. It initializes a `ZonedDateTime` for Sao Paulo on a historical DST transition day and shows that `startOfDay` correctly moves the time to 1 AM, accounting for the missing midnight hour due to the transition.
```JavaScript
const dt2 = Temporal.ZonedDateTime.from("2015-10-18T12:00-02:00[America/Sao_Paulo]");
console.log(dt2.startOfDay().toString()); // 2015-10-18T01:00:00-02:00[America/Sao_Paulo]
```
--------------------------------
### Promise Chain Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Bad await.md
This snippet shows a basic promise chain. It starts with a resolved promise, then chains multiple .then() calls to process the value. The final .then() logs the processed value to the console.
```javascript
Promise.resolve('start')
.then(value => value + '_processed1')
.then(value => value + '_processed2')
.then(value => console.log(value));
```
--------------------------------
### Summing Array Elements with reduce in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript reduce.md
This example illustrates the fundamental use of the `reduce` method for arithmetic accumulation. It sums all numbers in an array, starting with an initial accumulator value of 0.
```javascript
const numbers = [2, 4, 6];
const total = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(total); // Output: 12
```
--------------------------------
### Implementing DNS Prefetching in HTML Head
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Reldns Prefetch.md
This snippet demonstrates the static implementation of DNS prefetching within the HTML `` section. It includes `` tags for `cdn.example.com` and `fonts.googleapis.com`, showing how to pre-resolve DNS for external resources to reduce latency and improve page load times. The `meta charset` tag is also included for context.
```HTML
```
--------------------------------
### Example HTML Output for 'Hello world' with strike()
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript strike.md
Provides a concrete example of the HTML output when the `strike()` method is applied to 'Hello world'. It shows the resulting `` tag wrapping the input text.
```HTML
Hello world
```
--------------------------------
### Callback Function Example - JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Arrow functions.md
Shows a simple arrow function used as a callback. This function takes data as input and logs it to the console. It demonstrates the concise syntax of arrow functions for callback implementations.
```javascript
myFunction(data) => {
console.log(data);
}
```
--------------------------------
### Implementing Advanced Responsive Images with and Client Hints - HTML
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Images.md
This example showcases a more complex responsive image solution using the element with multiple elements. It leverages media queries (`min-width`) and `srcset` with width descriptors to serve optimized images based on viewport width and device pixel ratio, improving performance and visual quality.
```HTML
```
--------------------------------
### Private Property Getter Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Get set missing private.md
This example demonstrates how to define a class with a private field and a getter method to access it. It shows the basic structure for working with private properties in JavaScript.
```JavaScript
class Example {
#privateField;
constructor(value) {
this.#privateField = value;
}
get privateGetter() {
return this.#privateField;
}
}
```
--------------------------------
### Creating an Instance of a JavaScript Class
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript class.md
This example shows how to instantiate a new object from a previously defined JavaScript class, such as the `Car` class. The `new` keyword is used, followed by the class name and any required constructor arguments. This creates a new instance with its properties initialized according to the constructor.
```javascript
const myCar = new Car("Toyota", 2010);
```
--------------------------------
### Bulma Responsive Column Layout (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This snippet demonstrates Bulma's responsive column system using `columns` and `column` classes, specifically `is-half`. It creates a simple two-column layout where each column occupies half the available width, showcasing Bulma's straightforward approach to responsive design.
```HTML
Column 1
Column 2
```
--------------------------------
### Property Assignment with Arrow Function - JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Arrow functions.md
Shows an example of using an arrow function for property assignment within an object literal. This example highlights the need for `.bind(this)` when using arrow functions in this context to ensure the correct `this` binding.
```javascript
const person = {
name: "John",
sayName: () => this.name // Requires .bind(this) outside of object literal
};
```
--------------------------------
### Formatting Numbers with padStart in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript padStart.md
Demonstrates using the padStart() method to format a number string by padding it with leading zeros to achieve a consistent length. This is useful for numerical data presentation, ensuring uniform display.
```JavaScript
"42".padStart(6, "0")
```
--------------------------------
### OR Operator Examples
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Logical OR.md
This snippet provides examples of how the OR operator works with different values, including null and strings. It shows how the OR operator returns the first truthy value. It demonstrates default value assignment where a fallback value is provided if the primary value is falsy.
```javascript
let x = null;
let y = (x || 7); // y becomes 7 (x is falsy, so OR returns 7)
let z = ("a" || "b"); // z becomes "a" (first operand is truthy, non-empty string)
```
--------------------------------
### JavaScript: padStart() Method
Source: https://github.com/serpuniversity/learn/blob/main/javascript/_TOC.md
This snippet demonstrates the use of the `padStart()` method in JavaScript to pad a string to a specified length with a given character. It shows how to add padding to the beginning of a string to achieve a desired length. This is useful for formatting strings consistently.
```JavaScript
const str = "hello";
console.log(str.padStart(10, '*')); // Output: *****hello
```
--------------------------------
### Simple Generator Example - JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Generator.md
This code provides a basic example of a generator function that yields a sequence of numbers. It uses a `for` loop and the `yield` keyword to produce values. The `next()` method is called to iterate through the generated sequence, demonstrating how to retrieve values and check for completion.
```javascript
function* simpleGenerator(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
const gen = simpleGenerator(1, 3);
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // undefined
console.log(gen.next().done); // true
```
--------------------------------
### Implementing trimStart() Polyfill for JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript trimStart.md
This polyfill provides `trimStart()` functionality for JavaScript environments that do not natively support it, such as older browsers or Node.js versions. It checks if `String.prototype.trimStart` exists and, if not, adds a function that uses a regular expression to remove leading whitespace from a string. This ensures broader compatibility for applications.
```JavaScript
if (!String.prototype.trimStart) {
String.prototype.trimStart = function() {
return this.replace(/^\s+/, "");
}
}
```
--------------------------------
### Example Array with Various Data Types - JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Array.md
This example showcases a JavaScript array initialized with diverse data types: a number, a boolean, a string, and an empty object. It highlights the flexibility of JavaScript arrays in storing heterogeneous collections and implicitly demonstrates indexing and length.
```JavaScript
[100, true, 'javascript', {}]
```
--------------------------------
### Implementing trimStart() Polyfill for Browser Compatibility
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript trimStart.md
This JavaScript polyfill checks if the `trimStart()` method is natively available on `String.prototype`. If not, it defines a custom implementation using a regular expression (`/^\s+/`) to remove all leading whitespace characters from the string, ensuring consistent functionality across older or less-supported JavaScript environments.
```JavaScript
if (!String.prototype.trimStart) {
String.prototype.trimStart = function() {
return this.replace(/^\s+/, "");
}
}
```
--------------------------------
### Implementing Static Prerendering with HTML Link Tag
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Relprerender.md
This HTML snippet demonstrates how to use the tag with rel="prerender" to instruct the browser to pre-render a specified page in the background. It is typically placed in the section of the current page to prepare for a likely subsequent user navigation, improving perceived load times for the next page.
```HTML
```
--------------------------------
### HTML Attribute Structure with href Example
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Define Terms With HTML.md
This snippet demonstrates the structure of an HTML attribute using the `href` attribute as an example. The `href` attribute, placed within the `` tag, specifies the URL destination for the hyperlink, allowing users to navigate to another web page.
```HTML
Visit Example
```
--------------------------------
### Copying from Array Start to Target Index in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript copyWithin.md
This example shows `copyWithin()` with only the `target` parameter provided. Elements from the beginning of the array (index 0) are copied to the position starting at index 3. Both `start` and `end` parameters default to 0 and `array.length` respectively. The array `[1, 2, 3, 4, 5, 6, 7]` is modified to `[1, 2, 3, 1, 2, 3, 4]`.
```JavaScript
let array = [1, 2, 3, 4, 5, 6, 7];
console.log(array.copyWithin(3)); // Output: 1,2,3,1,2,3,4
```
--------------------------------
### Basic Usage of getDate() - JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript getDate.md
These examples demonstrate how to use `getDate()` to extract the day of the month. The first part shows getting the day from a specific date, while the second part shows getting the day from the current date and time. The method returns an integer representing the day (1-31).
```javascript
// Create a Date object for a specific date
let specificDate = new Date('2023-03-15');
console.log(specificDate.getDate()); // Output: 15
// Create a Date object for the current date and time
let currentDate = new Date();
console.log(currentDate.getDate()); // Output: Current day of the month
```
--------------------------------
### Including Bootstrap CSS and JS via CDN (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This snippet demonstrates how to include Bootstrap's core CSS and JavaScript files using Content Delivery Networks (CDNs). The CSS file provides styling, while the JavaScript bundle enables interactive components. This is a prerequisite for using Bootstrap's features.
```HTML
```
--------------------------------
### Implementing Responsive Images with Picture Element (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Intro.md
This HTML snippet demonstrates the use of the `` element along with `srcset` and `sizes` attributes for serving optimized image versions based on device characteristics. This approach allows browsers to select the most appropriate image source, improving performance by preventing unnecessary bandwidth usage and ensuring optimal visual quality across different screen sizes.
```HTML
```
--------------------------------
### Extracting Substring with Negative Start Index in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript substring.md
This snippet demonstrates how the `substring()` method treats a negative `startIndex` as 0, effectively starting the extraction from the beginning of the string. For example, `substring(-10, 12)` on a string like 'Please, send' would result in 'Please, send' because -10 is treated as 0.
```JavaScript
const str = "Please, send";
const result = str.substring(-10, 12);
```
--------------------------------
### Creating an HTML Hyperlink
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Guides.md
This snippet shows how to create a hyperlink using the `` tag. The `href` attribute specifies the destination URL, and the `target="_blank"` attribute instructs the browser to open the linked document in a new tab or window, providing navigation to external resources.
```html
Visit Example
```
--------------------------------
### Getting Current Unix Timestamp with Moment.js (Node.js)
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript epochNanoseconds.md
This example demonstrates how to obtain the current Unix timestamp using the Moment.js library in a Node.js environment. It requires the `moment` package and then calls `moment().unix()` to get the timestamp in seconds since the Unix epoch, which is useful for consistent server-side time handling.
```JavaScript
const moment = require('moment');
const currentUnixTimestamp = moment().unix();
```
--------------------------------
### Tailwind CSS Utility-First Responsive Layout (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This snippet demonstrates Tailwind CSS's utility-first approach for creating a responsive layout. It uses classes like `container`, `mx-auto`, `flex`, `flex-wrap`, `w-full`, `md:w-1/2`, and `p-4` to build a two-column layout that adapts from full width on small screens to half width on medium screens and above, highlighting Tailwind's direct styling capabilities.
```HTML
Column 1
Column 2
```
--------------------------------
### Expression Statement Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Expression statement.md
This snippet demonstrates an expression statement that produces a value and then uses it. It shows how an expression can be used in a context where an action is required.
```javascript
let result = 10 + 5; // Expression statement that produces a value
console.log(result); // 15
// Using an expression as a statement
10 + 5; // The result is discarded, but the statement executes successfully
```
--------------------------------
### Using Attribute Contains Operators - CSS
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS Selectors.md
Illustrates the use of attribute operators for substring matching. `[href^="https"]` selects elements where the 'href' attribute starts with 'https', and `[href*="example"]` selects elements where 'href' contains 'example' anywhere.
```CSS
[href^="https"]
```
```CSS
[href*="example"]
```
--------------------------------
### Defining Basic HTML Document Structure
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Guides.md
This snippet illustrates the fundamental structure of an HTML document, including the root `` element, the `` section for metadata like the page title, and the `` section for visible content such as headings and paragraphs. It demonstrates proper nesting of elements, which is crucial for creating well-formed and accessible web pages.
```HTML
Page title
This is a heading
This is a paragraph.
This is another paragraph.
```
--------------------------------
### Intl.NumberFormat: Advanced Number Formatting with Notations
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Intl.md
This example showcases advanced number formatting using Intl.NumberFormat, focusing on different notations like scientific, engineering, and compact. It iterates through notation options, including compactDisplay for short and long representations, and formats a number accordingly. The results are presented using console.table.
```javascript
for (const options of [
{ notation: "scientific" },
{ notation: "engineering" },
{ notation: "compact", compactDisplay: "short" },
{ notation: "compact", compactDisplay: "long" }
]) {
const nf = new Intl.NumberFormat("en-US", options);
results.push({ notation: options.compactDisplay ? `${options.notation}-${options.compactDisplay}` : options.notation, output: nf.format(12000) });
}
console.table(results);
```
--------------------------------
### Demonstrating enterkeyhint Attribute in HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Enterkeyhint.md
This HTML example illustrates how to apply the `enterkeyhint` attribute to different `` elements. Each input field is configured with a distinct `enterkeyhint` value (e.g., "next", "previous", "enter", "done", "search", "go", "send") to show how the virtual keyboard's Enter key icon or text changes accordingly, guiding user interaction within a form.
```HTML
HTML enterkeyhint attributes
```
--------------------------------
### Setting Ordered List Start Number with `value` Attribute (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML li The List Item Element.md
This example illustrates the use of the `value` attribute on an `
` element within an `` (ordered list) to specify a custom starting number for the list sequence. Subsequent list items will continue numbering from this specified value.
```HTML
Buy groceries
Complete homework
Walk the dog
```
--------------------------------
### Conditional Logic with if/else
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Expression statement.md
Illustrates using if/else statements for conditional execution based on a specified condition. The example checks if a number is greater than 5.
```javascript
let number = 10;
if (number > 5) {
console.log("Number is greater than 5");
}
```
--------------------------------
### Basic HTML Document Structure
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Guides.md
This snippet illustrates the fundamental structure of an HTML document, including the DOCTYPE declaration, `` root element, `` section for metadata (like the page title), and `` section for visible content such as headings and paragraphs. It serves as a template for any new HTML page.
```html
My HTML Page
My First Heading
My first paragraph.
```
--------------------------------
### Statement as Expression Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Expression statement.md
This code snippet demonstrates how a statement can be reinterpreted as an expression using parentheses. It shows how to modify a variable within an expression context.
```javascript
let x = 10;
(x = x + 5); // Statement wrapped in parentheses to create an expression
console.log(x); // Outputs 15
```
--------------------------------
### Installing NanoTimer Library
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript nanosecond.md
This command installs the NanoTimer library via npm, a Node.js package designed to provide high-resolution timing capabilities. It's a prerequisite for using NanoTimer in a project, addressing the limitations of standard JavaScript timing functions.
```Shell
npm install nanotimer
```
--------------------------------
### Illustrating JavaScript String startsWith() Method Signature
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript startsWith.md
This snippet reiterates the formal signature of the `startsWith()` method. It highlights the `searchValue` as the required substring and `start` as the optional index from which the search should commence, reinforcing the method's structure.
```JavaScript
string.startsWith(searchValue, start)
```
--------------------------------
### Illustrative Symbol Creation with Non-Standard Options
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript description.md
This snippet shows examples of creating Symbols with additional, non-standard options like `{ global: true }` and `{ constant: true }`. While these specific options are not part of the standard `Symbol()` constructor, the example illustrates the concept of associating metadata with Symbols, which is typically achieved via the global Symbol registry (`Symbol.for`).
```javascript
const myGlobalSymbol = Symbol('myGlobalSymbol', { global: true });
const MY_CONSTANT = Symbol('MY_CONSTANT', { constant: true });
```
--------------------------------
### Generating a Sequence of Integers with a JavaScript Generator
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Generator.md
This generator function, numberGenerator, takes two parameters (start and end) and yields each integer in the inclusive range from start to end. It demonstrates controlled iteration with a for loop and proper handling of the end condition. The generator returns a Generator object that can be iterated with next() calls to retrieve each value lazily.
```JavaScript
function* numberGenerator(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
const gen = numberGenerator(1, 5);
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // 4
console.log(gen.next().value); // 5
```
--------------------------------
### Getting String Length in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript String.md
This example shows how to use the `length` property to determine the number of characters in a string. The `length` property counts all characters, including spaces.
```JavaScript
let str = "GeeksforGeeks"; console.log(str.length); // Outputs 13
```
--------------------------------
### Defining a Basic JavaScript Function
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript name.md
This snippet demonstrates the basic syntax for defining a JavaScript function using the `function` keyword. The `greet` function takes a `name` parameter and logs a personalized greeting to the console. It illustrates how to encapsulate a specific task within a reusable block of code.
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
}
```
--------------------------------
### Variable Declarations Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Expression statement.md
This code snippet demonstrates variable declarations using `let`, `const`, and `var`. It shows how to declare variables with different scopes and mutability.
```javascript
let name = "Mohan"; // Declaration with 'let'
const age = 25; // Declaration with 'const' (constant value)
var isActive = true; // Declaration with 'var' (older version)
```
--------------------------------
### Performing DNS Prefetch for a Domain with HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Relprefetch.md
This snippet uses `rel=dns-prefetch` to perform a DNS lookup for `example.com` in advance. This can reduce latency for subsequent requests to the domain by resolving the DNS early, especially for third-party resources or linked pages.
```HTML
```
--------------------------------
### Infinite Loop Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Expression statement.md
This code snippet illustrates a SyntaxError caused by improper use of statement syntax. It demonstrates a while loop that will run infinitely because the condition never changes.
```javascript
while ("hello") { // "hello" never changes, causing an infinite loop
console.log("This loop will run repeatedly");
}
```
--------------------------------
### Including Foundation CSS and JS via CDN (HTML)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This snippet shows how to include Foundation's CSS and optional JavaScript files using CDNs. The CSS file provides the framework's styling, while the JavaScript file enables interactive components. This is essential for utilizing Foundation's features.
```HTML
```
--------------------------------
### Examples of Common HTML Attributes
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Define Terms With HTML.md
This snippet provides practical examples of frequently used HTML attributes: `src` for image sources, `href` for link destinations (with `target` for new tabs), `type` for input field types, `name` for form submission identification, and `required` for input validation. These attributes configure element behavior and data.
```HTML
Visit Example
```
--------------------------------
### Formatting Date Components with padStart in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript padStart.md
Illustrates how padStart() can be used to format single-digit hour values with a leading zero, ensuring consistent two-digit display for time components and improving visual alignment in date and time presentations.
```JavaScript
"9".padStart(2, "0")
```
--------------------------------
### Copying a Segment to Array Start in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript copyWithin.md
This example demonstrates copying a specific segment of an array to its beginning. Elements from index 3 up to (but not including) index 6 (`[4, 5, 6]`) are copied to the position starting at index 0, overwriting the initial elements. The method returns the modified array `[4, 5, 6, 4, 5, 6, 7]`.
```JavaScript
let array = [1, 2, 3, 4, 5, 6, 7];
console.log(array.copyWithin(0, 3, 6)); // Output: 4,5,6,4,5,6,7
```
--------------------------------
### Demonstrating Various Inline CSS Properties in HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Style.md
This example showcases diverse applications of inline CSS properties within HTML elements. It includes centering text using `text-align`, adjusting line spacing with `line-height`, and highlighting text with `background-color`, illustrating common styling scenarios.
```HTML
Centered Heading
Proper line height improves readability.
Yellow background for highlighted text
```
--------------------------------
### Handling Array Boundaries with copyWithin() in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript copyWithin.md
This example illustrates how `copyWithin()` handles array boundaries when the `end` parameter is omitted. It copies elements starting from index 1 (value 2) to the position starting at index 3. The copying continues until the source segment reaches the end of the array, effectively copying '2' and '3' to positions 3 and 4 respectively.
```JavaScript
let numbers = [1, 2, 3, 4, 5].copyWithin(3, 1); // Copies from index 1 to index 3
console.log(numbers); // Output: [1, 2, 3, 2, 3]
```
--------------------------------
### Creating a Custom SASS File (SCSS)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Frameworks.md
This step involves creating a new SASS file (e.g., custom.scss) which will serve as the central location for custom styles and Bootstrap overrides. This file is crucial for maintaining an organized and customizable stylesheet.
```SCSS
// custom.scss
// This file will contain your custom Bootstrap overrides and styles.
```
--------------------------------
### Invalid Variable Declaration
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Identifier after number.md
This example demonstrates the syntax error that occurs when attempting to declare a variable with a name that starts with a number. It shows the difference between an invalid and a valid identifier.
```javascript
var 1life = 'foo'; // SyntaxError: identifier starts immediately after numeric literal
```
```javascript
var life1 = 'foo'; // Valid identifier
```
--------------------------------
### Creating a Hyperlink with HTML Attributes
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Define Terms With HTML.md
This example demonstrates how to use the 'href' attribute within an tag to specify the destination URL for a hyperlink, directing the link's target.
```HTML
Visit Example
```
--------------------------------
### Embedding Code Output with HTML and Tags
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Samp The Sample Output Element.md
This example illustrates how to nest a tag within a tag to display a programming code snippet as sample output. This combination is useful for showing the output of a program, such as a 'Hello World' print statement, while maintaining semantic structure and allowing for distinct styling.
```html
print("Hello World");
```
--------------------------------
### Implementing Basic Responsive Images with Element - HTML
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS RWD Images.md
This snippet demonstrates the basic usage of the element to serve different image resolutions based on device pixel ratio. It provides a `high-res.png` for high-DPI displays and `standard-res.png` as a fallback for standard screens, ensuring appropriate image quality.
```HTML
```
--------------------------------
### Positioning Items with Named Grid Lines (CSS)
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS Grid Container.md
This example demonstrates how to use previously defined named grid lines (`row-start`, `row-end`, `col-start`, `col-end`) with `grid-row` and `grid-column` to precisely position a grid item. It shows how to place an element spanning from the start of the first column to the end of the third column, and from the start of the second row to the end of the third row.
```CSS
header { grid-area: header; }
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-end 3;
```
--------------------------------
### Implementing Product Microdata in HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Using Microdata In HTML.md
This snippet demonstrates how to mark up product information using Schema.org's `Product` type. It uses `itemscope` to define the item, `itemtype` to specify the schema, and `itemprop` for properties like `name` and `price`. This helps search engines understand product details for rich results.
```HTML
Product Title
$19.99
```
--------------------------------
### Ternary Operator Example
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript Expression statement.md
This snippet shows how expression statements can replace control flow statements using a ternary operator. It demonstrates a concise way to assign a value based on a condition.
```javascript
let age = 25;
let canDrive = (age >= 16) ? "Yes" : "No"; // Expression replacing an if...else statement
```
--------------------------------
### Applying Border-Box Universally (Comprehensive) - CSS
Source: https://github.com/serpuniversity/learn/blob/main/css/CSS3 Box-Sizing.md
This CSS snippet extends the universal application of `box-sizing: border-box;` to include pseudo-elements (`:before` and `:after`) in addition to all standard elements. This ensures that generated content also adheres to the border-box model, providing more robust and predictable layout behavior across all parts of a component.
```CSS
*, *:before, *:after { box-sizing: border-box; }
```
--------------------------------
### Implementing a Document-Level HTML Header
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML The Header Element.md
This HTML snippet demonstrates a basic implementation of a document-level `` element. It includes an `
Visit Example
```
--------------------------------
### Formatting Date Components with padStart in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript padStart.md
Illustrates how padStart() can be used to format single-digit hour values with a leading zero, ensuring consistent two-digit display for time components and improving visual alignment in date and time presentations.
```JavaScript
"9".padStart(2, "0")
```
--------------------------------
### Copying a Segment to Array Start in JavaScript
Source: https://github.com/serpuniversity/learn/blob/main/javascript/JavaScript copyWithin.md
This example demonstrates copying a specific segment of an array to its beginning. Elements from index 3 up to (but not including) index 6 (`[4, 5, 6]`) are copied to the position starting at index 0, overwriting the initial elements. The method returns the modified array `[4, 5, 6, 4, 5, 6, 7]`.
```JavaScript
let array = [1, 2, 3, 4, 5, 6, 7];
console.log(array.copyWithin(0, 3, 6)); // Output: 4,5,6,4,5,6,7
```
--------------------------------
### Demonstrating Various Inline CSS Properties in HTML
Source: https://github.com/serpuniversity/learn/blob/main/html/HTML Style.md
This example showcases diverse applications of inline CSS properties within HTML elements. It includes centering text using `text-align`, adjusting line spacing with `line-height`, and highlighting text with `background-color`, illustrating common styling scenarios.
```HTML
