<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mario Montella</title>
    <description>The latest articles on DEV Community by Mario Montella (@networkmario).</description>
    <link>https://dev.to/networkmario</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1236216%2Fd628ef53-a7fd-4deb-9db6-3f1c02af2f4e.jpeg</url>
      <title>DEV Community: Mario Montella</title>
      <link>https://dev.to/networkmario</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/networkmario"/>
    <language>en</language>
    <item>
      <title>Developing Image Recognition Models with TensorFlow: Using MobileNetV2</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Tue, 02 Jul 2024 12:44:26 +0000</pubDate>
      <link>https://dev.to/networkmario/developing-image-recognition-models-with-tensorflow-using-mobilenetv2-3368</link>
      <guid>https://dev.to/networkmario/developing-image-recognition-models-with-tensorflow-using-mobilenetv2-3368</guid>
      <description>&lt;p&gt;&lt;a href="https://networkmario.com/blog/image-recognition/"&gt;readME!!!&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Godot Engine</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Wed, 27 Mar 2024 19:26:58 +0000</pubDate>
      <link>https://dev.to/networkmario/godot-engine-7gi</link>
      <guid>https://dev.to/networkmario/godot-engine-7gi</guid>
      <description>&lt;p&gt;What is Godot?&lt;br&gt;
Breaking the Shackles with Godot: Godot's open source nature frees developers from the constraints of traditional licensing costs. It stands as a testament to the collaborative power of the global development community. This freedom allows independent developers to focus on creating unique and compelling games without financial barriers.&lt;/p&gt;

&lt;p&gt;Visual Scripting Unleashed: For those who find comfort in visual workflows, Godot's visual scripting system becomes a playground for creativity. This drag-and-drop approach to game logic allows developers to iterate quickly and experiment with ideas effortlessly. Visual scripting isn't just a convenience; it is a catalyst for breaking down barriers to entry in game development.&lt;/p&gt;

&lt;p&gt;GDScript - A language for expression: Godot's GDScript offers a scripting language that strikes a harmonious balance between simplicity and capability. Drawing inspiration from Python, GDScript facilitates the fluid expression of complex game mechanics. It is an inviting language for beginners and a versatile tool for experienced developers to create complex systems within their games.&lt;/p&gt;

&lt;p&gt;Node system for structured development: Godot's scene and node system revolutionize game organization. Scenes, built as hierarchies of nodes, foster a modular and organized development environment. This structure improves collaboration, facilitates reusability, and simplifies the creation of both 2D and 3D games.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzrc7j0qaqmumltm5df0i.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzrc7j0qaqmumltm5df0i.jpg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2D and 3D Excellence: Godot doesn't compromise on the depth of experiences it can bring to life. Its 2D engine guarantees pixel-perfect precision and is complemented by an equally robust 3D engine. From creating captivating 2D narratives to building immersive 3D worlds, Godot satisfies the diverse visions of indie developers.&lt;/p&gt;

&lt;p&gt;Exporting dreams into reality: Indie developers dream of their games reaching a wide audience, and Godot makes this dream achievable. With a seamless export system, developers can launch their creations on platforms ranging from desktop to mobile, even extending to consoles. This accessibility democratizes indie game distribution.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://godotengine.org/"&gt;official website&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>godotengine</category>
      <category>programming</category>
    </item>
    <item>
      <title>Llama 3: Meta prepares its launch for early 2024</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Thu, 18 Jan 2024 20:28:24 +0000</pubDate>
      <link>https://dev.to/networkmario/llama-3-meta-prepares-its-launch-for-early-2024-1plj</link>
      <guid>https://dev.to/networkmario/llama-3-meta-prepares-its-launch-for-early-2024-1plj</guid>
      <description>&lt;p&gt;In a groundbreaking announcement that could shape the future of artificial intelligence, Meta's CEO Mark Zuckerberg has unveiled the latest advancements in their AI technology with Llama 3. This new AI system promises to revolutionize various aspects of technology and daily life, marking a significant stride in AI development.&lt;/p&gt;

&lt;p&gt;A Vision for General Intelligence and More&lt;br&gt;
Llama 3, as explained by Zuckerberg, is not just another step in AI but a giant leap towards achieving Full General Intelligence. This means developing AI capabilities that replicate and exceed human cognitive abilities in various domains. The focus areas include AI for personal assistants, tools for creators, business solutions, advanced reasoning, strategic planning, innovative coding techniques, and enhanced memory functions.&lt;/p&gt;

&lt;p&gt;Democratizing AI Through Open Sourcing&lt;br&gt;
In a move to make AI technology more accessible, Meta plans to open source Llama 3. This strategy aims to democratize AI, making it a tool for the masses rather than a privilege for the few. By doing so, Meta is set to empower developers, researchers, and enthusiasts around the globe, enabling them to harness the power of advanced AI in their respective fields.&lt;/p&gt;

&lt;p&gt;The Infrastructure to Power AI's Future&lt;br&gt;
To back these ambitious plans, Meta is massively scaling up its infrastructure. The company plans to deploy 350,000 H100s by the end of this year, with the total computing power almost reaching 600,000 H100 equivalents when combined with other GPUs ($15–20B worth of compute). This massive infrastructure is designed to support the heavy computational demands of advanced AI models like Llama 3.&lt;/p&gt;

&lt;p&gt;Redefining Human-AI Interaction with New Devices&lt;br&gt;
Zuckerberg envisions a future where interaction with AI is an integral part of our daily life. To facilitate this, he suggests that new types of devices, particularly AI-integrated glasses, will become commonplace. These devices are expected to offer seamless, intuitive communication with AI, changing the way we interact with technology.&lt;/p&gt;

&lt;p&gt;The Road Ahead: Responsible AI Training and More Models&lt;br&gt;
Looking ahead, Meta is committed to responsibly training more AI models. This approach emphasizes the importance of ethical considerations in AI development, ensuring that these advanced systems are not only powerful but also safe and beneficial for society.&lt;/p&gt;

&lt;p&gt;With Llama 3 and its subsequent developments, Meta is not just envisioning the future of AI - it's actively building it. As Zuckerberg puts it, "We are just getting started." This announcement is a window into a future where AI is deeply integrated into every aspect of our lives, offering unprecedented opportunities for innovation, growth, and human advancement.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llama</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>The Liskov Substitution Principle.</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Tue, 02 Jan 2024 01:03:25 +0000</pubDate>
      <link>https://dev.to/networkmario/the-liskov-substitution-principle-1b38</link>
      <guid>https://dev.to/networkmario/the-liskov-substitution-principle-1b38</guid>
      <description>&lt;p&gt;The Liskov Substitution Principle is one of the five principles of SOLID, a set of guidelines for the design of object-oriented software. This principle was formulated by Barbara Liskov in 1987 and states that objects of a derived class must be able to replace objects of the base class without affecting the correctness of the program.&lt;/p&gt;

&lt;p&gt;In other words, if a class B is a subclass of a class A, then the objects of A can be replaced with the objects of B without the program significantly changing its behavior. This implies that the derived class must inherit all the behaviors of the base class and, if necessary, extend or modify these behaviors without introducing errors or unexpected side effects.&lt;/p&gt;

&lt;p&gt;An example would be a hierarchy of classes representing geometric shapes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Forma:
    def calcola_area(self):
        pass

class Rettangolo(Forma):
    def __init__(self, lunghezza, larghezza):
        self.lunghezza = lunghezza
        self.larghezza = larghezza

    def calcola_area(self):
        return self.lunghezza * self.larghezza

class Quadrato(Forma):
    def __init__(self, lato):
        self.lato = lato

    def calcola_area(self):
        return self.lato * self.lato

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, Rectangle and Square are subclasses of Shape. Both implement the calculate_area method, inherited from the base class. We can replace an object of type Shape with an object of type Rectangle or Square without altering the behavior of the program incorrectly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def stampa_area(forma):
    area = forma.calcola_area()
    print(f"L'area della forma è {area}")

# Use of the Liskov substitution principle
rettangolo = Rettangolo(5, 10)
quadrato = Quadrato(7)

stampa_area(rettangolo)  # Print: The area of the shape is 50
stampa_area(quadrato)    # Print: The area of the shape is 49

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the print_area function accepts an object of type Shape, but we can pass both an object of type Rectangle and one of type Square, thus demonstrating the Liskov substitution principle.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Open Source, AI and Board Games</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Sun, 31 Dec 2023 22:30:57 +0000</pubDate>
      <link>https://dev.to/networkmario/open-source-ai-and-board-games-3m0c</link>
      <guid>https://dev.to/networkmario/open-source-ai-and-board-games-3m0c</guid>
      <description>&lt;p&gt;Open source AI and software development is the new hotness and is generating alot of buzz. Rightfully so, however, I’d like to reflect on why this is healthy and important for global growth. OpenAI, a non-profit AI research organization, (is) was leading the way in open source development. With the recent exposure of an internal memo within Google, it’s clear the issue was really underestimating the wealth, value and sheer potential of the pooled knowledge that exists within the open source community.&lt;/p&gt;

&lt;p&gt;Open source software development allows businesses to access cutting-edge technology without having to invest in expensive proprietary systems. It also allows developers to share their code with each other, making it easier for businesses to collaborate on projects and develop innovative products faster.&lt;/p&gt;

&lt;p&gt;Open source also helps promote business development by encouraging collaboration between developers from different countries, allowing them to work together on projects that can benefit everyone. This type of collaboration can lead to better products and services that can help drive economic growth around the world. This is actually a good thing, and healthy for the global ecosystem.&lt;/p&gt;

&lt;p&gt;However, this also means that instead of playing monopoly, we’ll be playing snakes and ladders. I’m good with that, because the old days of monopolizing software and it’s development should be a thing of the past, like Steve Ballmer and the love/hate relationship everyone had for anything Microsoft.&lt;br&gt;
I wonder what changed?&lt;/p&gt;

&lt;p&gt;Monopolies can lead to higher costs of use for technology and make it difficult for new companies to enter the market due to lack of access. Additionally, monopolies can stifle innovation by preventing competition in the market and reducing incentives for companies to invest in research and development. This could ultimately lead to slower economic growth and development in the long run.&lt;/p&gt;

&lt;p&gt;Footnote: I didn’t mention obvious concerns of the potential for misuse by those who have less than legitimate interests, though I weigh that on the same scale with all the pros &amp;amp; cons of cryptocurrency. Basically, I never liked playing monopoly anyway.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>The Spread Operator in Javascript</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Sun, 31 Dec 2023 22:16:43 +0000</pubDate>
      <link>https://dev.to/networkmario/the-spread-operator-in-javascript-59mh</link>
      <guid>https://dev.to/networkmario/the-spread-operator-in-javascript-59mh</guid>
      <description>&lt;p&gt;With “spread operators”, introduced starting with ECMAScript 6 (ES6), it is possible to copy all or part of an existing array or object into another array or object, combine arrays or objects, and pass an array to a function as a topic.&lt;/p&gt;

&lt;p&gt;The notation that identifies the spread operator is the three dots …&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
console.log(numbersCombined);
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we make a console.log of “numbersCombined”, we will see the new array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ 1, 2, 3, 4, 5, 6 ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The spread operator is often used in the destructuring of arrays (and objects), as in this example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
console.log(rest);
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By destructuring the “numbers” array, we obtained the variable “one” with value 1, the variable “two” with value 2, and the variable “rest” with value the array of residual elements.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[3, 4, 5, 6]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let’s see an example of using spread operator with a function&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
function pippo(a, b, ...args) {
 console.log(args);
}

pippo(1, 2, 3, 4, 5);
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The function foo receives as parameters “a”, “b”, and … the spread operator “args”: a is equal to 1, b is equal to 2, args is an array containing 3, 4 and 5.&lt;/p&gt;

&lt;p&gt;The result of the console.log will in fact be this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ 3, 4, 5 ]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this further example we see how to use the spread operator to insert an array into another array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
let x = ['A', 'B'];
let y = [...x, 'C', 'D'];
console.log(chars);
&amp;lt;/script&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result will be this array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;["A", "B", "C", "D"]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result will be a “scorecopy” variable that contains the same value as the “score” variable&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[50, 60, 70]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  The spread operator and objects
&lt;/h2&gt;

&lt;p&gt;Just as you can combine two arrays, you can combine two objects, as in the following example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
const myCar = {
  brand: 'Audi',
  model: 'A3',
  color: 'nero'
}

const updateCar = {
  year: 2020, 
  color: 'giallo'
}

const myUpdatedCar = {...myCar , ...updateCar}
console.log(myUpdatedCar);
&amp;lt;/script&amp;gt;
In the console we will see the new myUpdatedCar object which is nothing more than the combination of the two objects “myCar” and “updateCar”

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{brand: "Audi", model: "A3", year: 2020, color: "giallo"}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, the object properties that have the same key (in our example the “color”) are inserted only once in the new object, with the value of the last property considered: this is why in our case the color is “ yellow”.&lt;/p&gt;

&lt;p&gt;Let’s see another example in which we are going to “insert” one object into another&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
const person = {name:"mario", surname:"montella"};
const person2 = {... person, city:"naples"}
console.log(person2);
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The variable “person2” will have this value&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ name: "mario", surname: "montella", city: "naples" }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good Luck!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Using fetch api in JS</title>
      <dc:creator>Mario Montella</dc:creator>
      <pubDate>Sun, 31 Dec 2023 21:13:17 +0000</pubDate>
      <link>https://dev.to/networkmario/using-fetch-api-in-js-30o3</link>
      <guid>https://dev.to/networkmario/using-fetch-api-in-js-30o3</guid>
      <description>&lt;p&gt;The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.&lt;/p&gt;

&lt;p&gt;Unlike XMLHttpRequest that is a callback-based API, Fetch is promise-based and provides a better alternative that can be easily used in service workers. Fetch also integrates advanced HTTP concepts such as CORS and other extensions to HTTP.&lt;/p&gt;

&lt;p&gt;A basic fetch request looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function logMovies() {
  const response = await fetch("http://example.com/movies.json");
  const movies = await response.json();
  console.log(movies);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here we are fetching a JSON file across the network, parsing it, and printing the data to the console. The simplest use of fetch() takes one argument — the path to the resource you want to fetch — and does not directly return the JSON response body but instead returns a promise that resolves with a Response object.&lt;/p&gt;

&lt;p&gt;The Response object, in turn, does not directly contain the actual JSON response body but is instead a representation of the entire HTTP response. So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.&lt;/p&gt;

&lt;p&gt;Fetch requests are controlled by the connect-src directive of Content Security Policy rather than the directive of the resources it's retrieving.&lt;/p&gt;

&lt;p&gt;Supplying request options&lt;br&gt;
The fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings:&lt;/p&gt;

&lt;p&gt;See fetch() for the full options available, and more details.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Example POST method implementation:
async function postData(url = "", data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData("https://example.com/answer", { answer: 42 }).then((data) =&amp;gt; {
  console.log(data); // JSON data parsed by `data.json()` call
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that mode: "no-cors" only allows a limited set of headers in the request:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Accept&lt;/li&gt;
&lt;li&gt;Accept-Language&lt;/li&gt;
&lt;li&gt;Content-Language&lt;/li&gt;
&lt;li&gt;Content-Type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Aborting a fetch:
&lt;/h2&gt;

&lt;p&gt;To abort incomplete fetch() operations, use the AbortController and AbortSignal interfaces.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const controller = new AbortController();
const signal = controller.signal;
const url = "video.mp4";

const downloadBtn = document.querySelector("#download");
const abortBtn = document.querySelector("#abort");

downloadBtn.addEventListener("click", async () =&amp;gt; {
  try {
    const response = await fetch(url, { signal });
    console.log("Download complete", response);
  } catch (error) {
    console.error(`Download error: ${error.message}`);
  }
});

abortBtn.addEventListener("click", () =&amp;gt; {
  controller.abort();
  console.log("Download aborted");
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Sending a request with credentials included
&lt;/h2&gt;

&lt;p&gt;To cause browsers to send a request with credentials included on both same-origin and cross-origin calls, add credentials: 'include' to the init object you pass to the fetch() &lt;strong&gt;method&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fetch("https://example.com", {
  credentials: "include",
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you only want to send credentials if the request URL is on the same origin as the calling script, add credentials: 'same-origin'.&lt;/p&gt;

&lt;p&gt;// The calling script is on the origin '&lt;a href="https://example.com"&gt;https://example.com&lt;/a&gt;'&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fetch("https://example.com", {
  credentials: "same-origin",
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you only want to send credentials if the request URL is on the same origin as the calling script, add credentials: 'same-origin'.&lt;/p&gt;

&lt;p&gt;// The calling script is on the origin '&lt;a href="https://example.com"&gt;https://example.com&lt;/a&gt;'&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fetch("https://example.com", {
  credentials: "same-origin",
});
To instead ensure browsers don’t include credentials in the request, use credentials: 'omit'.

fetch("https://example.com", {
  credentials: "omit",
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
  </channel>
</rss>
