Fading Coder

One Final Commit for the Last Sprint

Managing Browser Cookies: Setting, Reading, and Deleting

Setting Cookies To create a cookie, use the following function: function createCookie(name, value, daysToExpire = 1) { const expirationDate = new Date(); expirationDate.setTime(expirationDate.getTime() + daysToExpire * 24 * 60 * 60 * 1000); const host = window.location.host; const hostParts = host.s...

Hidden Implementation Details of JavaScript async/await You May Not Know

To test your understanding of async/await behavior in the JavaScript event loop, try these two similar snippets first: async function runFirstTask() { await new Promise((resolve, reject) => { resolve(); }); console.log('A'); } runFirstTask(); new Promise((resolve) => { console.log('B'); resolv...

Security Implications of Target=_blank Without noopener noreferrer

Hyperlinks utilizing target="_blank" attributes create bidirectional browsing context connections that expose the originating document to potnetial manipulation. When a new tab or window opens via this method, the JavaScript window.opener property in the destination page maintains a refere...

Comparative Analysis of Common Inheritance Patterns in JavaScript

1. Prototype Chianing Inheritance (Simplest Approach) function Parent(name) { this.name = name; this.favoriteSports = ['basketball', 'football']; this.location = { country: 'China', city: 'Jiangsu' }; } function Child(name) { this.greet = function() { console.log('I am a child'); }; } Child.prototyp...

Leveraging ES6 Destructuring and Core Features for Modern JavaScript

Array Destructuring Traditional syntax for extracting array values involves verbose index referencing. let numberList = [1, 2, 3]; let x = numberList[0]; let y = numberList[1]; let z = numberList[2]; console.log(x, y, z); ES6 destructuring provides a concise alternative. let numberList = [1, 2, 3];...

Understanding JavaScript Core Concepts: Closures, Scope, and DOM Manipulation

Closure Mechanism and Practical Applications A closure is a function that retains access to variables from its outer (enclosing) scope, even after the outer function has finished executing. Key characteristics include: Nested function declarations within another function. Inner functions can referen...

Understanding Prototypes in JavaScript for Object Construction

In JavaScript, constructors enable the creation of template objects known as prototypes. When a constructor function is defined, an object is automatically created in memory representing its prototype. The constructor holds a prototype property referencing this object, while the prototype includes a...

Converting File Input Images to Base64 Strings in JavaScript

Encoding uploaded images as Base64 strings simplifies form submissions by allowing binary files to be transmitted alongside standadr text fields. The following implementation demonstrates how to capture a file selection, process it using the FileReader API, and render the result. File Input to Base6...

Filter and Sort Methods in JavaScript Arrays

The filter() method generates a new array by evaluating each element of the original array through a callback function. If the callback returns true, the element is included in the new array; otherwise, it's excluded. The original array remains unchanged. Similar to map(), filter() accepts a functio...

Manipulating Web Pages with JavaScript DOM and BOM

DOM Manipulation DOM operations include creating, adding, deleting, modifying, querying, attribute handling, and event management. Creating Elements Use document.createElement(), innerHTML, or innerText. Adding Elements Employ appendChild() or insertBefore(). Deleting Elements Utilize removeChild()....