This media is not supported in your browser
VIEW IN TELEGRAM
😳 In Your Face
VSCode extension that reacts to errors in code. And it is not just anyone who reacts to your errors, but the face of the main character of the legendary DOOM, from the times of DOS and Windows 95
Every time an error is detected in the code, the extension displays the corresponding "Ouch Face", which makes the debugging process more interactive and fun
VSCode extension that reacts to errors in code. And it is not just anyone who reacts to your errors, but the face of the main character of the legendary DOOM, from the times of DOS and Windows 95
Every time an error is detected in the code, the extension displays the corresponding "Ouch Face", which makes the debugging process more interactive and fun
❤8👍1
🍐 Interview Question
What is a closure in JavaScript and how does it work?
A closure is a combination of a function that retains access to variables from its outer scope, even after the outer function has finished executing.
1️⃣ Context Memorization:
When a function is created, it remembers all the variables in its scope. These variables are available to the function even after the outer function has finished executing.
2️⃣ Private Variables:
Closures allow you to create private variables that cannot be changed or seen outside the function. This makes your code safer and more organized.
3️⃣ Persistent Data:
Closures allow functions to retain state between calls. For example, counters or cached values.
4️⃣ Asynchronous Operations:
Closures are often used in asynchronous code to preserve access to variables from the outer context while performing asynchronous tasks, such as timers or queries.
What is a closure in JavaScript and how does it work?
A closure is a combination of a function that retains access to variables from its outer scope, even after the outer function has finished executing.
1️⃣ Context Memorization:
When a function is created, it remembers all the variables in its scope. These variables are available to the function even after the outer function has finished executing.
2️⃣ Private Variables:
Closures allow you to create private variables that cannot be changed or seen outside the function. This makes your code safer and more organized.
3️⃣ Persistent Data:
Closures allow functions to retain state between calls. For example, counters or cached values.
4️⃣ Asynchronous Operations:
Closures are often used in asynchronous code to preserve access to variables from the outer context while performing asynchronous tasks, such as timers or queries.
👍12❤3🔥1
❓How does JSON.stringify() work in JS?
JSON.stringify function: Converts a JavaScript object or values to a JSON string (text formatted according to the current standard)
Arguments:
• Value - This is the main argument that specifies what to convert.
• Replacer (optional) - A function or array to filter properties.
• Spaces (optional) - A number or string to format with indents.
JSON.stringify function: Converts a JavaScript object or values to a JSON string (text formatted according to the current standard)
Arguments:
• Value - This is the main argument that specifies what to convert.
• Replacer (optional) - A function or array to filter properties.
• Spaces (optional) - A number or string to format with indents.
👍11❤5
✅ How does Array,map() work in JS?
The Array,map function: Creates a new array by calling the specified function on each element of the original array and collects the results into a new array.
It takes one mandatory argument — this is the callback function that will be applied to each element of the original array.
The callback can take up to three arguments:
• currentValue — the current element of the array being processed.
• index — the index of the current element in the array being processed.
• array — the array being iterated over.
• There is also an optional argument thisArg — the value used as this when calling the callback function
Code example:
The Array,map function: Creates a new array by calling the specified function on each element of the original array and collects the results into a new array.
It takes one mandatory argument — this is the callback function that will be applied to each element of the original array.
The callback can take up to three arguments:
• currentValue — the current element of the array being processed.
• index — the index of the current element in the array being processed.
• array — the array being iterated over.
• There is also an optional argument thisArg — the value used as this when calling the callback function
Code example:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
❤10🔥4👍2
This media is not supported in your browser
VIEW IN TELEGRAM
🐋 CSS Compatibility
CSS Compatibility is a VS Code extension that allows you to check on hover which CSS syntax, keywords, types, or functions are compatible or supported across browsers.
CSS Compatibility is a VS Code extension that allows you to check on hover which CSS syntax, keywords, types, or functions are compatible or supported across browsers.
❤8🔥3👍2
🚤 The Ultimate Guide to Font Performance Optimization
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.
Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.
On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity...
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.
Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.
On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity...
❤7👍3
Packt.Building.Micro.Frontends.with.React.18.1804610968.pdf
5.6 MB
📚 Free book
Building Micro Frontends with React 18: Develop and deploy scalable applications using micro frontend strategies (2023)
By Vinci J Rufus
#book
Building Micro Frontends with React 18: Develop and deploy scalable applications using micro frontend strategies (2023)
By Vinci J Rufus
#book
❤9👍1
🧳 How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
Creating a Chrome extension can be a fun and rewarding project, especially when you combine powerful tools like React, TypeScript, TailwindCSS, and Vite. In this article, we'll walk you through the entire process step-by-step, ensuring you have a clear understanding of how to build your own Chrome extension in 2024. Whether you're a seasoned developer or just starting out, this guide will help you navigate the complexities of extension development with ease.
Creating a Chrome extension can be a fun and rewarding project, especially when you combine powerful tools like React, TypeScript, TailwindCSS, and Vite. In this article, we'll walk you through the entire process step-by-step, ensuring you have a clear understanding of how to build your own Chrome extension in 2024. Whether you're a seasoned developer or just starting out, this guide will help you navigate the complexities of extension development with ease.
❤9🔥3
What is your level in web development?
Anonymous Poll
46%
Beginner (just starting to learn the basics)
30%
Junior (have some experience, working on first projects)
20%
Mid-level (working on projects, confident with the fundamentals)
3%
Senior (managing projects, tackling complex tasks)
1%
God mode (architecture, complex solutions, consulting)
❤11