ALT A C# code example demonstrates the use of the `required` keyword for property initialization. A `Product` class defines `public required string Name { get; init; }` and `public decimal Price { get; init; }`. An arrow points from `required` to a box explaining that "'required' ensures properties are set at object creation." Below, `var laptop = new Product { Name = "SuperLaptop Pro", Price = 1499.99m };` shows valid instantiation. Next, `var invalidProduct = new Product();` is marked with an arrow pointing to an error message: "Error: Can't create object instance without initializing Name property". The title reads "C#: Ensure value assignment to properties using `required` keyword!" and "QUICK TRICKS DEV" is at the bottom left.

ALT A JavaScript coding trick visually demonstrates transforming an array of objects into a single object using `Array.reduce`. The image displays a code snippet where an `items` array containing objects with `id` and `value` properties (e.g., `{id: 'a1', value: 'Apple'}`) is converted into an `itemsById` object. The `items.reduce()` method is called with a callback function that sets `accumulator[currentItem.id] = currentItem.value;` and returns the `accumulator`. An empty object `{}` is provided as the initial accumulator. Text annotations clarify that `reduce` transforms an array into a single value and identify the initial accumulator. The background features dark, swirling purple and pink patterns. "QUICK TRICKS DEV" is visible in the corner.

ALT The image titled 'Create immutable objects in C# without records' displays a C# code snippet. It defines a `public class ImmutablePerson` with properties `FirstName` (string), `LastName` (string), and `Age` (int), all using `get; init;`. An arrow points to `init;` for `Age`, with text 'Use init keyword instead of set'. Below, `var person = new ImmutablePerson` is initialized with `FirstName = "Jane"`, `LastName = "Smith"`, `Age = 25`. Line 16, `person1.Age = 31;`, is highlighted in red, signifying an error. An arrow points to it with the text 'Throws error on build', demonstrating that `init` properties are immutable after initialization.

ALT A JavaScript programming trick displayed on a dark background. The heading states: 'JavaScript: Use Set to create an array with unique elements'. The code shows `const numbersWithDuplicates = [1, 2, 2, 3, 4, 4, 5];` followed by `const uniqueNumbers = [...new Set(numbersWithDuplicates)];`. The result shown is `uniqueNumbers = [1, 2, 3, 4, 5]`. A 'QUICK TRICKS DEV' logo is at the bottom left.

ALT A JavaScript code snippet on a dark purple background demonstrates using `URLSearchParams` to manipulate URL query parameters. The title reads "JS: Manipulate URL query parameters with ease using URLSearchParams". The code initializes a URL string, then creates `URL` and `URLSearchParams` objects. It shows examples of `params.get("q")` and `params.has("page")` for extracting parameters, with an annotation "Easy param value extraction". Further, it illustrates `params.append("category", "dev")`, `params.set("page", "3")`, and `params.delete("sort")` methods for parameter manipulation, accompanied by an "and manipulation" annotation. A "QUICK TRICKS DEV" logo is in the bottom right corner.

ALT A dark-themed slide titled "CSS: Discover the :has() pseudo-class" with a subtitle "Select an element based on its descendants." It features two code examples for the :has() pseudo-class. The first example styles a ".card:has(button)" with a blue border, light blue background, and padding, explained as a "true 'parent selector'" to style a card if it contains a button. The second example, ".card:has(h2):not(:has(button))", styles a card with a red border, light red background, and padding. This is explained as combining :has() with :not() for powerful exclusions: "card has h2 BUT NOT a button." A "QUICK TRICKS DEV" logo is at the bottom left.

ALT A JavaScript code snippet demonstrates formatting arrays using `Intl.ListFormat`. The title reads "Format arrays like a pro in JavaScript 😎". An array `const items = ['Apples', 'Bananas', 'Oranges']` is defined. The code shows formatting for 'en-US' resulting in "Formatted: Apples, Bananas, and Oranges", for 'es-ES' resulting in "Formatted: Apples, Bananas y Oranges", and partially for 'de-DE' resulting in "Formatted: Apples, Bananas und Oranges". All use `type: 'conjunction'`. A purple tooltip explains: "The 'type' option determines the conjunction style (e.g., 'and', 'or')." A "QUICK TRICKS DEV" logo is visible at the bottom.

ALT A code example demonstrating deep cloning objects in JavaScript using `structuredClone()`. The title reads "Deep clone objects in JavaScript using structuredClone()". The code defines an `original` object containing various data types: a number, a nested object, an array, a Date object, a Map, a Set, a regular expression, an ArrayBuffer, a Uint8Array, and an Error object. Annotations highlight that `structuredClone()` handles "many complex types beyond just plain objects!", specifically mentioning "Maps and Sets also deep-copied", "Regular expressions too!", and "Even Errors are cloned!". The final line shows `const deepCopy = structuredClone(original);`. The bottom left corner has "QUICK TRICKS DEV".

ALT A JavaScript code example demonstrating `Promise.allSettled`. The title reads 'Use Promise.allSettled to wait for multiple promises', flanked by stopwatch icons. The code defines three promises: `promise1` resolves immediately, `promise2` resolves after a 100ms timeout, and `promise3` rejects. `Promise.allSettled` is then called with these promises. An arrow points to this call, with a text box stating it 'Waits for ALL promises to complete, regardless of success/failure!'. The `.then` block processes the results, logging the value for fulfilled promises and the reason for the rejected one. Another text box explains 'Each result is an object with 'status' and 'value'/'reason!'. The image also features 'QUICK TRICKS DEV JS' branding.

ALT A JavaScript code snippet demonstrating how to use Map for efficient element retrieval. The image shows an array of user objects, each with an ID and name. The code then converts this array into a `userMap` using `new Map(users.map(user => [user.id, user]))`. Explanatory text highlights that the Map constructor takes an iterable of [key, value] pairs, and this code transforms each object into a [key, value] pair where the ID is the key and the user object is the value. Finally, it shows `console.log(userMap.get(102))` to efficiently retrieve an element by its ID (102) and `console.log(userMap.has(101))` to check for the presence of an element by ID (101). The title states "Use Map in JavaScript to retrieve elements efficiently" and the footer reads "QUICK TRICKS DEV".

ALT Tutorial-style graphic comparing two ways to swap variable values in JavaScript. The first section shows the traditional method using a temporary variable: assign the value of a to temp, then set a to b, and finally assign temp back to b. An annotation notes this approach requires an extra variable and is less concise. The second section demonstrates the modern destructuring swap: [a, b] = [b, a], which exchanges the values in a single line. An annotation highlights this as a clean, modern JavaScript one-liner using array destructuring. The layout emphasizes the simplicity and readability of the destructuring approach compared to the older style.

ALT Tutorial-style graphic explaining the use of the satisfies operator in TypeScript for type validation. It defines an AppConfig type with theme and version properties, then creates a userSettings object that includes additional fields like customGreeting. The example shows that assigning userSettings with as AppConfig narrows the type and hides extra properties, while using satisfies AppConfig validates the required structure but preserves the full inferred type, allowing access to customGreeting. Annotations highlight the difference between type assertion and type validation, emphasizing how satisfies ensures correctness without losing extra information.

ALT Tutorial-style graphic explaining object immutability methods in JavaScript. It uses a car object with properties brand and year to demonstrate three approaches. Object.preventExtensions prevents adding new properties but still allows modifying or deleting existing ones. Object.seal prevents adding or deleting properties, but existing values can still be changed. Object.freeze makes the object fully immutable, disallowing additions, deletions, or modifications. Each method is shown with code snippets and annotations describing the outcome when attempting to add or modify properties. The layout highlights the differences between the three techniques, helping developers quickly understand how to control object mutability in JavaScript.

ALT Educational graphic introducing Tagged Template Literals in JavaScript. It shows how a custom tag function can process template strings by separating static text (strings) from dynamic values (...values). The example defines a highlight function that wraps interpolated values like a name, age, and city in square brackets. The code demonstrates calling the function with a template literal and producing the output: Hello, my name is [Alice] and I am [30] years old from [New York]. Annotations explain that the tag function is invoked automatically, receives string parts and values, and allows developers to customize how template literals are transformed. Clean layout with syntax highlighting makes the concept easy to follow.

ALT Tutorial-style graphic demonstrating three ways to truncate a number to an integer in JavaScript. It showcases Math.trunc() for straightforward truncation, parseInt() for converting and truncating numeric strings, and the double tilde ~~ bitwise trick for coercing values to 32-bit integers. Each method is illustrated with examples showing how they handle positive and negative decimals, booleans, null, undefined, and strings. Annotations explain behavior differences, such as how ~~ returns 0 for non-numeric values and how parseInt() stops at the first non-numeric character. The layout is clean and syntax-highlighted for quick comprehension.

ALT Coding trick showcasing TypeScript language and its built-in utility types. It defines User interface with id, name, email and address fields. Based on sample methods its showing how Partial, Pick and Omit utility types work. On top of every usage of the utility type it has brief description. For Partial it says "Use Partial to make all fields of a type optional. For Pick it says "Use Pick to create a subset of a type with only selected fields". For Omit it says "Use Omit to create a subset of a type without selected fields".