The Journey of #100DaysOfCode (wassim_taleb)

[wassim_taleb]

I am excited to announce that I am joining the 100daysofcode Challenge! Over the next 100 days, I will be sharing my learning journey and progress with all of you.

Stay tuned to see my updates below, starting from today.

LET’S GET STARTED!

[wassim_taleb]

𝐃𝐚𝐲 𝟏 : 𝐍𝐨𝐫𝐦𝐚𝐥 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐯𝐬. 𝐀𝐫𝐫𝐨𝐰 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

The key difference between the two functions lies in their handling of the this keyword.

→ 𝐍𝐨𝐫𝐦𝐚𝐥 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 have their own this context, which changes depending on how they are called (whether globally or locally). This can cause problems that you might not be aware of.

→ 𝐀𝐫𝐫𝐨𝐰 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬, on the other hand, inherit this from the surrounding scope normally, making them particularly useful for maintaining context while calling them. Besides, it offers cleaner and easier code to read.

[wassim_taleb]

𝐃𝐚𝐲𝟑: 𝐬𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 𝐯𝐬. 𝐚𝐬𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 𝐜𝐨𝐝𝐞𝐬

The key difference lies in their 𝐞𝐱𝐞𝐜𝐮𝐭𝐢𝐨𝐧 and 𝐛𝐞𝐡𝐚𝐯𝐢𝐨𝐫.

𝐒𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 → executes tasks sequentially, blocking further tasks until completion. Used for simpler, linear code execution.

𝐀𝐬𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 → executes tasks concurrently, allowing other tasks to proceed without waiting. Used for improving efficiency and handling multiple operations.

[wassim_taleb]

𝐃𝐚𝐲𝟐: 𝐃𝐞𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐢𝐧𝐠 𝐯𝐬. 𝐒𝐩𝐫𝐞𝐚𝐝𝐢𝐧𝐠

The key difference lies in their 𝐩𝐮𝐫𝐩𝐨𝐬𝐞 and there 𝐮𝐬𝐚𝐠𝐞.

𝐃𝐞𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐢𝐧𝐠 → its purpose is to unpack values from arrays or objects into variables, and its main usage is for manipulating accesing values.

𝐒𝐩𝐫𝐞𝐚𝐝𝐢𝐧𝐠 → its purpose is to expand arrays and objects, and its main usage is to facilitate using or accessing array/object elements in functions.

[wassim_taleb]

𝐃𝐚𝐲𝟒: 𝐅𝐨𝐫𝐦𝐃𝐚𝐭𝐚 𝐯𝐬. 𝐅𝐨𝐫𝐦𝐎𝐛𝐣𝐞𝐜𝐭

𝐅𝐨𝐫𝐦𝐃𝐚𝐭𝐚 and 𝐅𝐨𝐫𝐦𝐎𝐛𝐣𝐞𝐜𝐭 can be confusing, so lets talk a little bit about:

They are compared in terms of their use cases and functionality, but they are 𝐟𝐮𝐧𝐝𝐚𝐦𝐞𝐧𝐭𝐚𝐥𝐥𝐲 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭:

→ 𝐅𝐨𝐫𝐦𝐃𝐚𝐭𝐚 is a built-in JavaScript object specifically designed for form submissions, especially those involving file uploads, using multipart/form-data encoding.
→ 𝐅𝐨𝐫𝐦𝐎𝐛𝐣𝐞𝐜𝐭 is a custom pattern, not a built-in object, typically used to hold and manipulate form data in a simpler way, often serialized to JSON for API interactions.

So, while they serve different purposes, they can be compared based on their usage in handling form data.

[wassim_taleb]

𝐃𝐚𝐲𝟓: 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐨𝐫.𝐠𝐞𝐨𝐥𝐨𝐜𝐚𝐭𝐢𝐨𝐧 𝐯𝐬 𝐝𝐚𝐭𝐚𝐬𝐞𝐭.𝐥𝐨𝐧𝐠𝐢𝐭𝐮𝐝𝐞/𝐝𝐚𝐭𝐚𝐬𝐞𝐭.𝐥𝐚𝐭𝐢𝐭𝐮𝐝𝐞

navigator.geolocation and dataset.longitude/dataset.latitude 𝐬𝐞𝐫𝐯𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐩𝐮𝐫𝐩𝐨𝐬𝐞𝐬 in JavaScript.

→ 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐨𝐫.𝐠𝐞𝐨𝐥𝐨𝐜𝐚𝐭𝐢𝐨𝐧 is used to get the device’s current geographical location.

→ 𝐝𝐚𝐭𝐚𝐬𝐞𝐭.𝐥𝐨𝐧𝐠𝐢𝐭𝐮𝐝𝐞/𝐝𝐚𝐭𝐚𝐬𝐞𝐭.𝐥𝐚𝐭𝐢𝐭𝐮𝐝𝐞 are used to store and access custom geographical data attributes on HTML elements.

Although they serve different purposes, they can be used together for various applications, such as comparing a user’s current location to a predefined location stored in an HTML element’s data attributes.

[wassim_taleb]

𝐃𝐚𝐲𝟔: 𝐩𝐫𝐨𝐦𝐩𝐭 𝐯𝐬. 𝐚𝐥𝐞𝐫𝐭 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬

 𝐩𝐫𝐨𝐦𝐩𝐭 and 𝐚𝐥𝐞𝐫𝐭 are built-in functions used to interact with the user, but they serve different purposes:

→ alert purpose is displaying a message to the user, and shows a dialog with a specified message and an OK button. The user cannot interact with the rest of the page until the OK button is clicked, as well as it’s useful for showing information or warnings to the user.

→ prompt purpose is to ask the user to input a value. It shows a dialog with a specified message, a text input field, and OK and Cancel buttons. The function returns the input value if the user clicks OK or null if the user clicks Cancel. Also, it is useful for collecting simple user input.

[wassim_taleb]

𝐃𝐚𝐲 𝟕: 𝐜𝐥𝐚𝐬𝐬𝐋𝐢𝐬𝐭 𝐯𝐬. 𝐚𝐝𝐝𝐂𝐥𝐚𝐬𝐬 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬

classList and addClass are methods used to, 𝐦𝐚𝐧𝐢𝐩𝐮𝐥𝐚𝐭𝐞 𝐭𝐡𝐞 𝐜𝐥𝐚𝐬𝐬𝐞𝐬 𝐨𝐟 𝐃𝐎𝐌 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬, but they serve different purposes:

→ The purpose of classList is to provide a native and versatile way to 𝐚𝐝𝐝, 𝐫𝐞𝐦𝐨𝐯𝐞, 𝐭𝐨𝐠𝐠𝐥𝐞, and 𝐜𝐡𝐞𝐜𝐤 classes on DOM elements.

→ The purpose of addClass is to 𝐚𝐝𝐝 𝐜𝐥𝐚𝐬𝐬𝐞𝐬 to elements using 𝐣𝐐𝐮𝐞𝐫𝐲 𝐥𝐢𝐛𝐫𝐚𝐫𝐲. It requires jQuery and is less versatile, mainly used in projects already using jQuery.

[wassim_taleb]

𝐃𝐚𝐲 𝟖: 𝐀𝐫𝐫𝐚𝐲𝐁𝐮𝐟𝐟𝐞𝐫/𝐓𝐲𝐩𝐞𝐝𝐀𝐫𝐫𝐚𝐲 𝐯𝐬. 𝐍𝐨𝐫𝐦𝐚𝐥 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐀𝐫𝐫𝐚𝐲𝐬

ArrayBuffer/TypedArray and normal JavaScript arrays are used to 𝐬𝐭𝐨𝐫𝐞 𝐚𝐧𝐝 𝐦𝐚𝐧𝐢𝐩𝐮𝐥𝐚𝐭𝐞 𝐝𝐚𝐭𝐚, but they serve different purposes:

→ The purpose of normal JavaScript arrays is to provide a flexible, dynamic data structure that can 𝐡𝐨𝐥𝐝 𝐦𝐢𝐱𝐞𝐝 𝐭𝐲𝐩𝐞𝐬 and 𝐠𝐫𝐨𝐰 𝐨𝐫 𝐬𝐡𝐫𝐢𝐧𝐤 as needed.

→ The purpose of ArrayBuffer/TypedArray is to provide a more 𝐦𝐞𝐦𝐨𝐫𝐲-𝐞𝐟𝐟𝐢𝐜𝐢𝐞𝐧𝐭, 𝐟𝐢𝐱𝐞𝐝-𝐬𝐢𝐳𝐞, and 𝐮𝐧𝐢𝐟𝐨𝐫𝐦 𝐭𝐲𝐩𝐞 data structure, ideal for performance-critical and low-level binary data manipulation.

[wassim_taleb]

𝐃𝐚𝐲 𝟗: 𝐁𝐥𝐨𝐛 𝐯𝐬. 𝐅𝐢𝐥𝐞

Blob and File are used to handle binary data in JavaScript, but they serve different purposes:

→ The purpose of Blob is to represent raw binary data that can be 𝐫𝐞𝐚𝐝 𝐚𝐬 𝐭𝐞𝐱𝐭, 𝐚𝐫𝐫𝐚𝐲 𝐛𝐮𝐟𝐟𝐞𝐫, 𝐨𝐫 𝐝𝐚𝐭𝐚 𝐔𝐑𝐋. It is versatile for creating and manipulating binary data in memory, uploading/downloading data, and generating object URLs for displaying or downloading content.

→ The purpose of File is to handle files directly, providing 𝐚𝐝𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥 𝐦𝐞𝐭𝐚𝐝𝐚𝐭𝐚 such as name and last modified date. It integrates seamlessly with file input elements and drag-and-drop functionality, making it ideal for handling files selected by users or programmatically created files with specific metadata.

[wassim_taleb]

𝐃𝐚𝐲 𝟏𝟎: 𝐗𝐌𝐋𝐇𝐭𝐭𝐩𝐑𝐞𝐪𝐮𝐞𝐬𝐭 𝐯𝐬. 𝐅𝐞𝐭𝐜𝐡 𝐀𝐏𝐈

𝐗𝐌𝐋𝐇𝐭𝐭𝐩𝐑𝐞𝐪𝐮𝐞𝐬𝐭 and 𝐅𝐞𝐭𝐜𝐡 𝐀𝐏𝐈 are used to make HTTP requests in JavaScript, but they 𝐬𝐞𝐫𝐯𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐩𝐮𝐫𝐩𝐨𝐬𝐞𝐬 and have distinct characteristics.

→ 𝐗𝐌𝐋𝐇𝐭𝐭𝐩𝐑𝐞𝐪𝐮𝐞𝐬𝐭 provides a way to make HTTP requests and handle responses using a more complex, callback-based syntax. It supports both synchronous and asynchronous requests, and offers progress events to monitor data transfer.

→ 𝐅𝐞𝐭𝐜𝐡 𝐀𝐏𝐈 offers a modern, promise-based approach to making HTTP requests, with a simpler and more readable syntax. It only supports asynchronous requests and lacks built-in progress event handling but allows for better error handling and response parsing.

Although they serve different purposes, they can be used together or separately based on the requirements of your project, with Fetch API being the preferred choice for modern web development.

[wassim_taleb]

𝐃𝐚𝐲 𝟏𝟏: 𝐦𝐚𝐩 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐯𝐬. 𝐀𝐫𝐫𝐚𝐲.𝐟𝐫𝐨𝐦 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

map Function and Array.from are used to create new arrays in JavaScript, but they 𝐬𝐞𝐫𝐯𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐩𝐮𝐫𝐩𝐨𝐬𝐞𝐬 and have distinct characteristics.

→ 𝐦𝐚𝐩 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧: Transforms each element of an array according to a provided function, returning a new array of the same length. It is applied directly on an existing array.

→ 𝐀𝐫𝐫𝐚𝐲.𝐟𝐫𝐨𝐦: Creates a new array instance from an array-like or iterable object, with an optional mapping function to transform elements during the creation of the new array.

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟐: 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐨𝐫.𝐠𝐞𝐨𝐥𝐨𝐜𝐚𝐭𝐢𝐨𝐧.𝐰𝐚𝐭𝐜𝐡𝐏𝐨𝐬𝐢𝐭𝐢𝐨𝐧 + 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐨𝐫.𝐠𝐞𝐨𝐥𝐨𝐜𝐚𝐭𝐢𝐨𝐧.𝐜𝐥𝐞𝐚𝐫𝐖𝐚𝐭𝐜𝐡

 navigator.geolocation.𝐰𝐚𝐭𝐜𝐡𝐏𝐨𝐬𝐢𝐭𝐢𝐨𝐧 and navigator.geolocation.𝐜𝐥𝐞𝐚𝐫𝐖𝐚𝐭𝐜𝐡 can be used together to control real-time location tracking in javaScript.

→ 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐨𝐫.𝐠𝐞𝐨𝐥𝐨𝐜𝐚𝐭𝐢𝐨𝐧.𝐰𝐚𝐭𝐜𝐡𝐏𝐨𝐬𝐢𝐭𝐢𝐨𝐧 is used to continuously monitor the device’s geographical location and provide real-time updates whenever the location changes. This method returns a watchId that you can use to stop tracking later.

→ 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐨𝐫.𝐠𝐞𝐨𝐥𝐨𝐜𝐚𝐭𝐢𝐨𝐧.𝐜𝐥𝐞𝐚𝐫𝐖𝐚𝐭𝐜𝐡 is used to stop the continuous monitoring that was initiated by watchPosition. You need to pass the watchId obtained from watchPosition to this method to stop receiving location updates.

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟑: 𝐚𝐬𝐲𝐧𝐜/𝐚𝐰𝐚𝐢𝐭 𝐯𝐬 𝐍𝐨𝐫𝐦𝐚𝐥 𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬

 𝐚𝐬𝐲𝐧𝐜/𝐚𝐰𝐚𝐢𝐭 simplifies asynchronous code.

→ 𝐔𝐬𝐢𝐧𝐠 𝐚𝐬𝐲𝐧𝐜 𝐚𝐧𝐝 𝐚𝐰𝐚𝐢𝐭:

• Makes code look synchronous. This helps in writing clearer and more intuitive code.
• Easier to read and maintain. Reduces the need for complex nesting of callbacks.
• Error handling with try/catch simplifies managing errors compared to traditional promise chaining.

→ 𝐍𝐨𝐫𝐦𝐚𝐥 𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬:

• Uses .then() and .catch(). This approach can become verbose with multiple chained promises.
• Can be more complex with nested promises, making the code harder to follow.
• Error handling requires .catch(), which can be less intuitive and harder to manage with deep promise chains.
  
  

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟒: 𝐒𝐐𝐋 𝐯𝐬 𝐍𝐨𝐒𝐐𝐋

SQL and NoSQL databases 𝐡𝐚𝐯𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐩𝐮𝐫𝐩𝐨𝐬𝐞𝐬 𝐚𝐧𝐝 𝐮𝐬𝐞 𝐜𝐚𝐬𝐞𝐬.

→ 𝐒𝐐𝐋 (Structured Query Language) databases are used for structured data with a fixed schema. They are ideal for applications requiring ACID (Atomicity, Consistency, Isolation, Durability) properties and complex queries. Examples include relational databases like MySQL and PostgreSQL.

→ 𝐍𝐨𝐒𝐐𝐋 (Not Only SQL) databases are designed for unstructured or semi-structured data with flexible schemas. They excel in scalability and performance for big data and real-time applications. Examples include MongoDB, Redis, and Cassandra.

 While SQL databases are best for structured data and complex transactions, NoSQL databases offer flexibility and scalability for diverse data types and large-scale applications.

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟓: 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐦𝐩𝐫𝐨𝐯𝐞𝐬 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

 TypeScript and JavaScript 𝐡𝐚𝐯𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐟𝐞𝐚𝐭𝐮𝐫𝐞𝐬 𝐚𝐧𝐝 𝐮𝐬𝐞 𝐜𝐚𝐬𝐞𝐬.

→ 𝐒𝐭𝐚𝐭𝐢𝐜 𝐓𝐲𝐩𝐢𝐧𝐠: TypeScript adds static typing to JavaScript, allowing for the detection of errors at compile time, leading to more reliable and maintainable code.

→ 𝐂𝐨𝐝𝐞 𝐎𝐫𝐠𝐚𝐧𝐢𝐳𝐚𝐭𝐢𝐨𝐧: TypeScript’s module system and support for modern features like classes and interfaces help organize and structure code effectively, especially for large projects.

→ 𝐂𝐨𝐦𝐩𝐢𝐥𝐞-𝐭𝐢𝐦𝐞 𝐄𝐫𝐫𝐨𝐫𝐬: Catching errors during compilation reduces bugs in production and makes code more predictable.

Although TypeScript introduces a learning curve and requires compilation, its improvements in code quality and maintainability make it a valuable enhancement to JavaScript.

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟔: 𝐍𝐞𝐬𝐭𝐉𝐒 𝐯𝐬 𝐍𝐞𝐱𝐭.𝐣𝐬

NestJS and Next.js have different purposes and use cases.

→ 𝐍𝐞𝐬𝐭𝐉𝐒 is a backend framework designed for building efficient, reliable, and scalable server-side applications. It uses TypeScript and supports MVC architecture, dependency injection, and modular structure. It’s ideal for creating RESTful APIs, GraphQL APIs, microservices, and applications requiring real-time capabilities (e.g., chat apps using WebSockets).

→ 𝐍𝐞𝐱𝐭.𝐣𝐬 is a frontend framework built on top of React for building server-side rendered (SSR) and static web applications. It supports file-based routing, API routes, and is optimized for performance and SEO. It’s perfect for modern web applications, e-commerce websites, blogs, and personal websites.

While NestJS is best for developing robust backend applications, Next.js excels in creating performant and SEO-friendly frontend applications. Together, they can be used to build comprehensive fullstack applications.

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟕: 𝐑𝐞𝐦𝐢𝐱 𝐯𝐬 𝐑𝐞𝐚𝐜𝐭

Remix and React have different purposes and use cases.

→ 𝐑𝐞𝐦𝐢𝐱 is a full-stack framework designed for building web applications with a focus on server-side rendering (SSR) and static site generation (SSG). It optimizes data loading, provides a powerful and flexible routing system, and supports progressive enhancement. Remix is ideal for building fast, SEO-friendly applications with robust form handling and enhanced performance out of the box.

→ 𝐑𝐞𝐚𝐜𝐭 is a frontend library for building user interfaces. It allows developers to create reusable UI components and manage state efficiently. React is highly flexible and can be used in various setups, from single-page applications (SPAs) to mobile apps using React Native. However, it requires additional tools and configurations for SSR, routing, and form handling.

While Remix offers a more opinionated framework with built-in tools for server-rendered applications, React provides the flexibility to build UIs in diverse environments. Depending on your project requirements, Remix can simplify the development of modern web applications, while React provides the foundational UI building blocks.

[wassim_taleb]

𝐃𝐚𝐲𝟏𝟖: 𝐏𝐨𝐬𝐭𝐠𝐫𝐞𝐬𝐪𝐥 𝐯𝐬 𝐌𝐲𝐒𝐐𝐋
PostgreSQL and MySQL are both popular relational databases but cater to different needs and use cases.
→ 𝐏𝐨𝐬𝐭𝐠𝐫𝐞𝐬𝐪𝐥 is known for its advanced features and extensibility. It supports a wide range of data types, including JSONB and arrays, and offers full ACID compliance for robust transaction management. PostgreSQL is highly extensible, allowing for custom functions and data types. It excels in handling complex queries and large datasets, making it ideal for applications that require advanced features and strong consistency. Its support for full-text search and spatial data is a significant advantage for complex applications and data warehousing.
→ 𝐌𝐲𝐒𝐐𝐋 is renowned for its speed and reliability, particularly in read-heavy scenarios. It is widely used in web applications and integrates seamlessly with various technologies. MySQL offers solid performance and scalability, with various replication options and clustering solutions. While it supports JSON data, it lacks some of the advanced data types and extensibility features found in PostgreSQL. MySQL is simpler to set up for many standard use cases but may require additional configuration for advanced functionalities.

 In summary, PostgreSQL provides a feature-rich, highly extensible solution suitable for complex applications and data-intensive tasks, while MySQL offers a fast, reliable database for web applications and high-read scenarios. Depending on your project needs, PostgreSQL may be preferable for advanced features and consistency, whereas MySQL might be the choice for ease of use and speed.

[wassim_taleb]

𝐃𝐚𝐲 𝟏𝟗: 𝐏𝐫𝐨𝐩𝐬 𝐯𝐬. 𝐒𝐭𝐚𝐭𝐞 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭

Props and state are fundamental concepts in React with different roles and characteristics.

→ 𝐏𝐫𝐨𝐩𝐬: Props are used to pass data and functions from a parent component to a child component. They are immutable within the child component, meaning that the child cannot modify the props it receives. Props enable a unidirectional data flow, ensuring that data is passed from parent to child, making components more reusable and configurable.

→ 𝐑𝐞𝐚𝐜𝐭: State is used to manage and track data within a component that can change over time. Unlike props, state is mutable and can be updated by the component itself using setState or useState. This allows components to handle dynamic data, respond to user interactions, and manage internal state changes.

Although props and state have distinct roles, props for configuring child components and state for managing internal data, but understanding their differences is crucial for effectively managing data and component behavior in React applications.