DEV Community: Soloudo Uzoukwu

Which is best Next.JS or Nuxt.JS

Soloudo Uzoukwu — Thu, 17 Oct 2024 13:05:32 +0000

The ability to build scalable and seamless web applications quickly is the dream of every web developer. As a result, the importance of frameworks in development cannot be overstated. Over many years, javascript frameworks have come out to achieve this vision; among them are Next.js and Nuxt.js. Both frameworks have drastically improved the way web applications are built in recent times through enhancements in performance and user experience, but which is best for your project? In this article, you'll discover many factors that will help guide you and help you come to the proper conclusion.

What is Next.js?

Next.js is an open-source javascript framework developed by Vercel; it was built on React and is used for building server-side rendered applications and static web applications. Next.js has grown to be a popular framework among React developers due to its simplicity, versatility and efficiency at building web applications. The framework is relatively easy for new developers using React to pick up , as it bolsters a number of features that help simplify development. A few of those features include;

File-base routing: Next.js is able to automatically generate routes from files and folders inside the pages directory. This makes routing and navigation easier without the need for additional configuration.

Server-Side Rendering(SSR): By fetching data and pre-rendering pages on request, content that frequently changes or depends on external data gets loaded quicker.

Static Site Generation(SSG): Next.js is able to generate static pages at build time, this makes it fast and highly optimized for search engine optimization (SEO).

Hybrid Rendering: Next.js allows different rendering methods to exist within the same project. Different pages can have server-rendering, static rendering, or incremental static rendering, thus making the project more flexible.

API Routes: This feature grants you the ability to create serverless APIs inside the pages/api folder. Because these endpoints are serverless, integrating backend features like managing form submissions and user authentication is simple.

Automatic code splitting: Better performance and faster load times are achieved because Next.js automatically divides the JavaScript bundle by page, loading only the JavaScript required for each page.

Optimized Image Loading: Images are automatically optimized in real-time via the next/image component. Depending on the user's device and browser, it optimizes the size of photos, offers them in the proper formats, and lazy loads them.

Preview Mode: This allows you to fetch unpublished draft content from headless CMS or databases for preview while bypassing static generation.

Built-in Analytics: The framework comes with Vercel analytics for tracking user interaction, performance monitoring, and core web vitals.

Middleware: Middleware in Next.js enables you to execute code before a request is completed, which is handy for authentication, logging, A/B testing, and changing response headers. It is powerful and operates on the Edge.

Built-in Security: Several built-in security features of Next.js include HTTPS enforcement, Content Security Policy (CSP) headers, and secure data handling between client and server.

Webpack 5 Integration: Webpack 5 is the default builder for Next.js, which enables quicker builds, better caching, better tree shaking, and compatibility with the most recent Webpack plugins.

Benefits of Next.js

Next.js has a number of benefits that make it an incredible tool for building modern web applications. These include the following;
Next.js provides you with a ton of flexibility and customizability, with its hybrid rendering capabilities and the ability to define your project's architecture.
It's highly optimized for SEO ranking on Google, which enables your site to be easily seen in searches.
It's a very popular framework and, as a result, has a ton of resources for learning the ins and outs; it's also easier to debug because people in the community have dealt with most issues.
Dynamic content performs better and loads faster because to features like server-side rendering, automatic code splitting, static site creation, and improved picture loading.
With features that reduce load times and give near instant navigation the overall experience of your users improve significantly.
Next.js gives you a wonderful experience as a developer with its suite of features from file-based rendering, fast refreshing, API routes and many more.
When deploying Next.js applications on AWS or Vercel infrastructure management reduces significantly as Next.js runs API routes and backend functions as serverless services.

Shortcomings of Next.js

Although the framework is packed with benefits, it also carries a number of limitations that you need to be aware of when considering it for your project; a few of them are;

It lacks an in-built state management solution and thus requires third-party solutions.
Increased hosting cost due to server-side rendered pages needing servers or serverless functions to run on every request.
It's not strong enough to handle backend activities such as complex API interactions and database heavy workloads.
Apps are Javascript dependent, and as a result, users with JS turned off won't have the whole experience.
Although Next.js simplifies a ton of processes, Hybrid rendering introduces a number of variables that lead to confusion especially for new React developer.

What is Nuxt.Js?

According to the official developer site, Nuxt.js is an open-source framework designed to streamline web development, offering an intuitive yet powerful experience. It enables developers to confidently create high-performance, production-ready, full-stack web applications and websites. Built on top of the Vue.js framework, Nuxt.js shares many similarities with Next.js while leveraging modern build tools like Vite and integrating seamlessly with Node.js.

Features

Nuxt.js has a number of features that make it a standout tool for building modern web applications for Vue developers; they include;

Rendering: Just like Next, Nuxt also feature server side rendering, static site generation and hybrid rendering.

State Management: The framework comes with VueX, a state management library for Vue.js, which is the default state management solution.

Auto imports: Without the need to explicitly import files, any component, assets, or modules available in the components/, utils/, and composable/ directories will be automatically imported.

Vue Routing: Most apps require numerous pages and a method for navigating between them. This is known as routing. Nuxt creates routes mapped to your files using the official Vue Router module based on pages/directory and naming standards.

Modules: Nuxt uses a module system that gives it full extensibility. The modules are async functions that are executed sequentially when Nuxt is launched in development mode with nuxi dev or a production project is built with nuxi build. They can modify templates, set up webpack loaders, add CSS libraries, and conduct a variety of other essential operations. The best part is that Nuxt modules may be deployed as npm packages. This allows them to be reused between projects and shared with the community, fostering an ecosystem of high-quality add-ons.

Smaller Bundles: Nuxt is optimized to make Vue functionalities such as template directives and built-in components tree shakable, this means that if these aren't in use in your project they won't be included thus helping reduce the overall size of the application.

Benefits of Nuxt.js

Nuxt has a number of benefits that make it a prime choice for Vue developers, they are;

It's a great fit for new developers familiar with the Vue.
It prioritizes a conventions over configurations environment, reducing the amount of configurations and letting developers focus more on code.
Like Next, Nuxt is also very SEO friendly. Since search engines can efficiently crawl and index website material.
The framework is quite flexible, having hybrid rendering capabilities similar to Next.js.
It's a very modular framework with the ability to extend the overall functionality of the framework through the use of modules.
The development process with Nuxt is quite fast because Nuxt comes with a ton of features that do a lot of heavy lifting.

Shortcomings of Nuxt.js

A bunch of benefits for Nuxt were laid out in the previous section but to truly get a grasp of what its like to use the framework here are a few cons.

Nuxt.js is a relatively less popular framework compared to Next.js in web development, as a result has a smaller but budding community. This translates to fewer documentation and resources by the community and could lead to longer periods spent debugging.
By prioritizing a conventions over configuration environment, Nuxt makes it quite challenging to integrate custom libraries.
In the eventuality your web application gets higher traffic, this can lead to serious strains on the server.

How are Next.js and Nuxt.js similar?

Next.js and Nuxt.js are two widely-used frameworks built on top React and Vue.js respectively, both designed to simplify and accelerate web application development. These frameworks provide powerful features to enhance developer productivity, optimize application performance, and streamline server-side rendering (SSR), which is crucial for improved SEO. Below are some key similarities between Next.js and Nuxt.js:

Server-Side Rendering (SSR) Support: Both frameworks provide robust server-side rendering capabilities out of the box. SSR improves the SEO of your web application by pre-rendering pages on the server, ensuring faster load times and better search engine indexing.

Static Site Generation (SSG): Next.js and Nuxt.js allow for static site generation, a technique that enables pre-rendering pages at build time. This results in faster delivery of static assets, improved performance, and enhanced scalability for content-heavy websites. Both frameworks can serve static and dynamic pages.

Routing: Both Next.js and Nuxt.js simplify routing by using a file-based routing system. With this approach, developers can create pages by simply adding files to the designated pages directory. This eliminates the need for manually configuring routes, making development more intuitive.

Component-Based Architecture: The component-based architecture of Next.js (with React) and Nuxt.js (with Vue) enables developers to deconstruct their user interface into reusable parts. This modular approach leads to more maintainable and scalable code.

Automatic Code Splitting: Both frameworks automatically split the code into smaller bundles. This ensures that only the necessary code for a given page is loaded, optimizing page load times and overall performance.

Development Flexibility: Next.js and Nuxt.js both offer flexibility in terms of deployment. Whether you're building a single-page application (SPA), server-rendered app (SSR), or a statically generated site (SSG), both frameworks support various deployment strategies.

Plugin and Middleware Ecosystem: Both frameworks support plugins and middleware, allowing for easy customization and extension. Whether you're adding global CSS, managing state, or handling authentication, both Next.js and Nuxt.js provide tools and a wide array of third-party plugins.

Differences between Next.js and Nuxt.js

While both frameworks share the goal of streamlining the web development process and offer a similar feature set, they take different approaches and each has its own strengths and limitations. These differences can impact your development workflow, productivity, and may ultimately determine which framework is the better fit for your specific needs.

Framework Foundation
At their core, both Next.js and Nuxt.js are JavaScript frameworks, but each is built on a different underlying framework. Next.js is based on React, while Nuxt.js is built on Vue.js. Both React and Vue.js are prevalent and widely-used frameworks, choosing between both often comes down to which of the underlying frameworks you're more familiar with. However, if you have a solid grasp of both React and Vue, the choice will likely be driven by personal preference and the specific needs of your project.

Support and Community
Both frameworks are quite active and popular in the web development community but Next.js really stands out with over 121,000 stars on github, that's 69,000 more than Nuxt.js; this is due to the already widespread popularity of React among web developers. As a result Next.js has more resources for learning such as forum posts, tutorials and a wealth of third party libraries.

State Management
For handling state management across a web application, Nuxt comes with it's own built-in state management solution straight out of Vue called VueX, to handle state management with Next you'd need to rely on third-party solutions like Zustand, Redux and MobX as Next lacks a primary solution.

Modularity
Next does not require a strict directory structure or pre-configured features, allowing developers to create their own architecture. When developing, they can include all of the essential libraries; this makes the framework more versatile than Nuxt, which has more subjective defaults that stress convention over configuration. It is pre-configured with Vuex for state management, SSR, SSG, and file-based routing. Nuxt simplifies development by providing modules that enhance its core features, including analytics, PWA support, and authentication. This modular architecture simplifies feature administration and integration while requiring minimal customization.

Scalability
For building highly scalable web applications Next.js is the best choice with its flexibility and customizability allowing developers define their own architecture for projects, it also follows a "smaller updates more frequently" methodologies that ensure that updating your application to the latest version of the framework work happens with ease. Nuxt on the other hand is a great fit for smaller and medium projects. It follows a "convention over configuration" philosophy that makes it easier to get started on a project. Unfortunately it doesn't excel when it comes to large project as it prioritizes "larger updates less frequently", this makes migrating from a previous version to a new one come with some difficulty as applications would often need to be re written from scratch to use a newer version of the framework.

Use cases

Both Next.js and Nuxt.js are exceptional frameworks for building modern web applications, but choosing between both frameworks depends on your specific use case, they both excel at doing the same thing by taking varying approaches to the problem.

When to use Next.js

React-Centric projects: The best option if you or your team are working in the React ecosystem is Next.js. When reusing React components or moving current React applications to a framework with integrated SSR and SSG optimizations, it is particularly preferred.
Enterprise-Level Applications: Next.js is a fantastic option for enterprise solutions needing complete control over architecture because of its modularity, which enables developers to bring in exactly the libraries and tools they require for large-scale applications with intricate modifications.
Highly Custom Web Applications: For online projects where flexibility is crucial, Next.js is the best choice. Developers can freely incorporate unique features like state management programs, custom routing systems, and sophisticated third-party services because it doesn't impose many defaults.
Performance-Optimized SEO Projects: The SSR and static generation features of Next.js give developers the means to efficiently improve site speed, SEO, and user experience for websites that require the greatest levels of performance and SEO, like landing pages or portfolios.

When to use Nuxt.js

Vue.js-Centric Projects: If you're working on a 'Vue.js' application or a team that values Vue's flexibility and simplicity, 'Nuxt.js' is the best solution. It is ideal for projects that are already committed to Vue due to its compatibility with Vue components and the Vue ecosystem.
Server-Side Rendering (SSR) with Minimal Setup: SSR is made easier using Nuxt.js's ready-to-use configuration. Nuxt's opinionated structure makes it simple to spin up efficient apps with minimal effort if you require SSR right out of the box without requiring extensive customization.
E-commerce Platforms: E-commerce websites that require server-rendered pages for performance and SEO reasons are a good fit for Nuxt.js. It is effective in integrating crucial e-commerce functionality because of its modular design, which includes pre-built modules (such as authentication and payments).
Content-Heavy Websites: Nuxt's static site generation (SSG) features and SEO modules make it an excellent choice for blogs, news sites, and marketing pages. Material-focused apps benefit from Nuxt's ability to pre-fetch material and manage dynamic routes with simplicity.

Conclusion

There is no definitive answer to which framework is "better"—the choice largely depends on the nature and scope of your project, as well as your expertise. If you have a strong foundation in React, Next.js will likely be the better fit, while those more familiar with Vue.js may prefer Nuxt.js. If you're comfortable with both, consider the scale of your project. With no initial setup needed, Nuxt.js is perfect for rapidly creating simple web applications. Because of its scalability, Next.js really shines in large-scale applications, even though it can manage small projects as well.

In the end, both frameworks are robust instruments that will assist you in creating effective, high-performing apps.

Top 5 game engines for game development in 2023

Soloudo Uzoukwu — Thu, 23 Feb 2023 23:07:19 +0000

For new developers looking to venture into a career in video game development or wishing to take up game development as a personal project, this article helps you decide which tool to use on your journey. In addition, this article aims to guide experienced developers who wish to switch career paths to game development on the tool to consider when making their transition. Although the game development space is one to consider carefully, especially for those unfamiliar with software development, developers use specific tools to produce the beautiful projects we enjoy, like Hollow Knight or any Mario game. One example is a game engine, the foundational tool for building these projects.

What is a Game Engine?

A game engine is computer software packed with many optimized tools to simplify game development. With a game engine, it's possible to simulate real-life physics, render graphics, control sounds and much more depending on the game's needs. In the past, most game development companies had to build custom game engines based on the requirements of the game project. Nowadays, only a few big companies opt to develop custom game engines; the rest rely on third-party software fitted with features that make creating any game relatively easy.

Benefits of using a third-party game engine

A few companies have created third-party game engines to meet all the requirements for building a large variety of 3D or 2D games. Below are a few ways using a third-party game engine would benefit you as a job-seeking game dev or a solo developer.

Most game studios use one of the game engines mentioned in this article. Therefore, by learning to use one of these tools, you stand a higher chance of getting employed by more companies looking for a competent developer.
Suppose you plan on working solo or starting a game studio. In that case, using third-party software is less expensive than building a custom game engine, considering that most third-party game engines are free and only charge you under certain conditions.
Using a third-party game engine reduces the overall development time since most of the plugins needed for the game's development have already been made available.
Some third-party game engines allow for cross-platform development, enabling you to ship the same project to multiple devices.
Communities built around them constantly develop the game engine since some third-party engines in this article are open source.

List of Game engines

Many game companies and solo developers choose to use a third-party software, and in this article, we'll list the five best you should consider for development.

1. Unreal Engine 5

Unreal Engine is a compelling game development software that handles development for 3D and 2D games using the C++ programming language. However, it is more suited for making 3D games than 2D games due to its strong graphics capabilities. It's a more popular pick used majorly by big triple-A game studios in the production of photo-realistic games like Injustice 2, the sea of thieves and star wars Jedi: fallen order. The Engine is also kinda open source, allowing the quite sizable community to improve the game engine. It's also a great pick for non-programmers with its visual blueprinting plugin that enables developers to create games without writing lines of code. The Engine has also transcended game development and supports production for several industries, from film to automotive design and architecture. Lastly, it promotes development for many platforms, including Consoles, Desktops, VR and more.

2. Unity

Unity is best known for its popularity with the indie game community and its relatively more beginner-friendly design than Unreal Engine. It's a game engine developed by Unity technologies in 2005 and can be utilized to develop 3D and 2D games using the C# programming language. It is known for being used in creating games like Hollow knight, Dead Cells, Genshin Impact and a host of other games on mobile, PC, etc. The sheer number of available material for learning how to use Unity is a result of the enormous community that contributes to developing the software with SDKs and assets. Anyone can use the Engine for more than just game development. It supports production for many industries, from film to automotive design and architecture. With Unity, you'll be able to develop for almost every available gaming device, including VR and AR devices. Unity is free for those opting for a personal plan but has other subscription plans available.

3. Godot

Godot is a relatively new game engine compared to the previous mentions on this list. The Engine has only been around since 2014; it has just recently been able to gain much popularity among game developers. The software supports 2D and 3D game development but can't produce 3D games with high-fidelity graphics. Godot is completely free and open source allowing for constant updates to be made to the Engine year-round by the budding Godot community. Being a relatively new engine, Godot has less learning material than third-party engines like Unreal and Unity, but it makes up for it by being beginner-friendly through its distinct representation of specific game functions with its node and scene architecture. The chosen language for development in Godot is known as GDScript, but it's also possible to develop games using C#, C++ and visual scripting on the Engine. Again, being relatively new, the Engine has only been used to create a handful of notable releases like Kingdoms of the Dump, Haiki, The Ballad of Bonky and many more. One final thing to note is the Engine currently supports development for Desktop, Web, VR, and Mobile.

4. Game Maker 2

This no-code Engine supports game development for 2D games using visual scripting. It's a beginner-friendly engine as it enables anyone to make games without proper programming knowledge; It does this through a drag-and-drop method of creating gameplay, allowing for faster prototyping and iteration. In addition, the Engine has a programming language called Game Maker Language for those looking to write custom behaviors that expand beyond the scope of the visual scripting. Unfortunately, game Maker is proprietary software; this implies that the Engine won't get as many advancements from the community as the others and would cost more to acquire a fully equipped version of the software. 2D games using this Engine include Hyper Light drifter, Webbed, Katana zero and Flynn: Son of Crimson.

5. Construct 3

The final third-party game engine on the list is Construct 3, a no-code game development software that primarily creates 2D games like Mighty Goose, TeenTitansGO: Attack of the drones and Guinea pig parkour. However, the Engine also has support for light 3D development. As a no-code engine, it primarily relies on visual scripting for creating gameplay logic. It also supports using JavaScript for writing game code, making it easier for beginners and software developers working with JS. One key advantage this Engine has over the rest on the list is its ability to run smoothly on browsers allowing you to develop and test from anywhere.

Conclusion

The five-game engines mentioned constitute some of the best game development tools currently available; you can ensure each of them delivers on the features they offer. In addition, knowledge of the use of any one of these software will help propel you to a strong career as a game developer.

JavaScript XMLHttpRequest (XHR): Part 1

Soloudo Uzoukwu — Tue, 04 Oct 2022 15:57:47 +0000

User experience is an important factor to put into consideration when building a project. There are so many subtle ways to improve user experience, and minimizing the level of disruption users experience while on a web page is one of them. For example, picture a scenario where a web page must frequently retrieve a particular piece of data from the servers; it would be annoying to the user if the web page does a full page refresh every time it retrieves that data. A way to avoid that is by issuing an XMLHttpRequest. Doing this enables a web page to update just part of a page without unnecessarily interrupting the user. In addition, XMLHttpRequest objects allow data retrieval from a URL without doing a full page refresh. This is because XMLHttpRequest objects are used to interact with servers.
Despite its name, XMLHttpRequest isn't limited to just retrieving XML; it can be utilized to retrieve any type of data.

Constructor

XMLHttpRequest()

This constructor is used to initialize an XMLHttpRequest and must be called before any other method calls.

new XMLHttpRequest();

Methods

The following Methods have been made available for the XMLHttpRequest object;

XMLHttpRequest.open()

This initializes a new request or re-initializes an already existing request. The syntax to use this method is written below;

open(method, URL) Open(method, URL, async) Open(method, URL, async, user) Open(method, URL, async, user, password)

About parameters

Method:
This is the HTTP request method to use, such as “GET”, “POST”, “PUT”, “DELETE”, etc. It can be ignored for none HTTP(S) URLs.

URL:
A string representing the URL where the request is to be sent.

Async:
An optional Boolean parameter is set to true by default. It indicates whether or not to run the operation asynchronously. When the value is set to true, a notification of a completed transaction is provided using event listeners. If false, the send() method doesn’t return until the response is received.

User:
An optional parameter, it's a username used for authentication; by default, this has a null value.

Password:
An optional parameter, it is a password used for the purpose of authentication. By default, this has a null value.


const xhr = new XMLHttpRequest();
const method = “GET”
const url = “mypage.html”

Xhr.open(method, url, true);

XMLHttpRequest.send()

This method is used to send the request to the server. For an asynchronous request, this method immediately returns the request is shipped, and its result is delivered using events. For a synchronous request, the method doesn't return until the response has arrived. The syntax to use this method is written below;

send() send(body)

About parameters

Body:
An optional parameter sent in the XHR request that specifies the request's body, it's mainly used if request method is "GET” or “HEAD”. This can be

•A document, in this case, serialization, is done before being sent.
•An XMLHttpRequestInit, which could be a blob, an array buffer, a typed array, a data view, a form data, a URLSearchParams, a string literal or an object as per the Fetch specs.
•Or null(used by default if no value is specified).

On a side note, the best way to send binary content is using a blob, typed array or data view combined with the send() method.

GET request


const xhr = new XMLHttpRequest();
xhr.open(“GET”,”/webserver”, true);

xhr.onload = () => 
{
  // Request finished. Do processing here.
};

xhr.send(“string literal”);
// xhr.send(document);
// xhr.send(null)

POST request


const xhr = new XMLHttpRequest();
xhr.open("POST", “/webserver”, true);

//Send the correct header information with the request
xhr.setRequestHeader("Content-Type", "application/x-www-dummy-file");

xhr.onreadystatechange = () =>

 { // Call a function when the state changes.

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) 
   {
    // Request finished. Do processing here.
    }
}

xhr.send("lasgidi==loreunknown");
// xhr.send(new Int8Array());
// xhr.send(document);

XMLHttpRequest.abort()

This method aborts an already sent request. When a request is aborted, its ready state changes to XMLHttpRequest.UNSENT(0), and the request's status code is set to zero. The method syntax is written below;

abort()

Example code illustrating the abort() method in use


const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://www.google.com/docs/";

xhr.open(method, url, true);

xhr.send(“string”);

if (CANCEL_NOW)
{
   xhr.abort();
}

XMLHttpRequest.getResponseHeader()

Returns a string containing a particular header's text value. In a scenario where multiple headers have the same name, their values are returned as a single concatenated string, where values are separated from each other by a pair of commas and spaces. The getResponseHeader() method returns a UTF byte sequence as its value.

getResponseHeader(headerName)

About parameters

headerName:
This is a string indicating the name of the desired header to return its text value. If the header is non-existent or hasn’t been received, it returns null.

Let's have an example where a request is created and sent, and a readystatechange handler is established to look for readyState to show whether the headers were received. In this case, the value of the Content-Type header is fetched. If the Content-Type isn't the desired value, the XMLHttpRequest is cancelled by calling abort()

This code illustrates the use of the getResponseHeader() method;


const xhr = new XMLHttpRquest();
xhr.open(“GET”, “dummypage.html”, true);

xhr.send();

xhr.onreadystatchange = () =>
{
   If(xhr.readyState === xhr.HEADER_RECEIVED)
    {
        const contentType = xhr.getResponseHeader(“Content-Type”);  
        If(contentType !== my_expected_type)
          {
              xhr.abort();
          }
    }
}

XMLHttpRequest.getAllResponseHeaders()

Returns a string containing all the response headers separated by CRLF or returns null if no response has been received. If a network error occurs, an empty string is returned.

getAllResponseHeaders()

This codeblock illustrates the use of the getAllResponseHeader() method;


const xhr = new XMLHttpRequest();
const allResponseHeaders = xhr.getAllResponseHeaders();  

if (!allResponseHeaders)
   {   
      return false;  
   } 
else
   {
      const headers = allResponseHeaders.split("\r\n");  
      const headerNames = [];  
      for (var i = 0; i < headers.length; i++) 
          {   
              headerNames[i] = headers[i].split(":")[0].toLowerCase(); 
              console.log(headerNames); 
          }  
    }

XMLHttpRequest.setRequestHeader()

This method is used to set the value of an HTTP request header. When using this method, the open() method must be called first, and then the send() method can be called after the setRequestHeader method call. In the case where this method is being called multiple times with the same header, the values are simply merged together in one single request header.

Each time a setRequestHeader() method call is initiated, after the first call, the specified text is affixed to the end of the existing header’s content.

setRequestHeader(header, value)

About parameters

Header:
Name of the header whose values are set.

Value:
The value is set as the body of the header.

This code block illustrates the use of the setRequestHeader() method to delete a file created at a random date;


const request = new XMLHttpRequest();
localStorage.token = localStorage.token || (Date.now()*Math.random);

deleteJSON(“application/json”, call);

const call = callBack();

Function callBack() 
{
    document.getElementById("demo").innerHTML = this.responseText
}

function deleteJSON(url, cb)
{
    request.onload = cb;
    request.open(“DELETE”, url);
    request.setRequestHeader(“authorization”, localStorage.key)
    Request.send();
}

XMLHttpRequest.overrideMimeType()

This method is used to override the MIME type provided by the server.

overrideMimeType(mimeType)

About parameters

mimeType:
A string thats overrides the MIME type used instead of the server-specified one. If a type is unspecified, XMLHttpRequest assumes "text/XML".


//this code interprets the received data as plain text
request = new XMLHttpRequest();
request.overrideMimeType("text/plain");
request.addEventListener("load", callback, false);
request.open("GET", URL);
request.send();

Variables and Datatypes

Soloudo Uzoukwu — Tue, 04 Oct 2022 15:25:40 +0000

Variables and datatypes form the core building blocks of any programming language. This article aims to educate you on a few key concepts involving variables and datatypes in JavaScript.

What is a Variable?

In JavaScript, a variable is simply referred to as a data container or a storage location for data. A good analogy would be to picture variables as pots used to hold different types of food. Variables in JavaScript are known to be loosely typed; this means that a data type does not need to be declared, and any literal value can be assigned to any variable.

Variable declaration

Declaring a variable in JavaScript is the act of creating one. Variables can be declared using one of two keywords, "let" and "const" these words are used before the variable name to define block scope. The let keyword is used to specify that a variable being declared is unrestricted, implying that the data stored in it is changeable. In contrast, the "const" keyword is used to indicate that the variable is restricted and that whatever data it contains can not be changed.

Multiple Variable declarations

It is possible to see a line of code having many variables declared in one statement. This is done by using a comma after each variable.

For example

let sonName = 'boy', dadName = 'Kratos', strength = 100;

Variable Identifiers

These are unique names given to variables, and there are general guidelines that make for better practice when writing these names. They are;

•Variable names should start with a letter (a to z or A to Z),
•The camel case naming convention is strongly recommended (e.g. newValue).
•The use of underscore( _ ), or dollar( $ ) sign is only permitted at the beginning of the variable name(e.g _headcount, _studentName)
•The use of numbers in naming is only allowed at the end of the name and not at the start or any other location(e.g. value2, entry7)
•JavaScript variables are case-sensitive; for example, x and X are different variables.
•Keywords used in JavaScript can not be used as names.

JavaScript Reserved Words

A list of all the reserved words in JavaScript is given in the following table. They cannot be used as JavaScript variables, functions, methods, loop labels, or object names.


abstract	else	instanceof	switch
boolean	enum	int	synchronized
break	export	interface	this
byte	extends	long	throw
case	false	native	throws
catch	final	new	transient
char	finally	null	true
class	float	package	try
const	for	private	typeof
continue	function	protected	var
debugger	goto	public	void
default	if	return	volatile
delete	implements	short	while
do	import	static	with
double	in	super

Types of Variables

Below you’ll discover there are two types of Variables.
•Global Variables
•Local Variables

Global variables are variables declared outside any function in the JavaScript code; they can be accessed from any function or part of the code.

Local variables are restricted to the functions where they were declared; a local variable is not accessible from anywhere and can only be used within the function it declared.

Variable Initialization

Variables are initialized by assigning data to them; this is done using the assignment operator(=). It can be done from inside or outside a function. In addition, different types of data can be assigned to a variable.

Variable use Cases

Aside from data storage, variables are used to do other things in JavaScript. Their use in arithmetic operations can not be understated. Variables holding a string data type can also be concatenated using the plus (+) operator. Variables can also have functions stored in them.

Data types

Programming languages have a set of data that is supported. For example, in JavaScript, there are two types, primitive and object values.

Primitive values include;

Numbers can either be integers or doubles. An integer is represented as a whole number, while doubles include decimals.
Strings, which are combinations of character values, represent text. When writing a string in JavaScript, the string characters are enclosed between two quotes, two double quotes or two backticks.
Boolean, these only have two values, true and false.
Null returns the value null when used; the value null is assigned to reset a variable by emptying it.
Undefined, a variable returns the value undefined when a value has not been assigned to it.
NaN(Not a Number) is commonly encountered as the result of an arithmetic operation done with the use of non-number values. It is also the only datatype in JavaScript that does not equal itself.

Object values include;

Objects are a collection of properties. The object literal syntax can add or remove properties from the object. Properties can be of type number, string, boolean or other objects.

Declaring and Initializing an Object

Declaring an object in JavaScript is done using either a "let" or "const" keyword followed by the identifier, an assignment operator and two curly braces. All the properties are added in the curly braces by assigning data to a key, each key in the object is separated by a comma and values are assigned using a colon instead of an equal sign.

const shoppingBag = {itemName: ”Stockfish”, itemPrice: 5000, currency: ”Naira”})

Arrays, an array is a unique variable that serves as a list for storing multiple values under the same name.

Declaring arrays and initializing an array

To declare an array, use the “let” or “const” keyword followed by the identifier, an assignment operator and an opening and closing square bracket.

const bodyCount = [];

There are multiple ways to initialize an array, one of which is by assigning the data directly to the specified index in the array the syntax looks like so.

bodycount[0] = 10;

Another way to initialize an array is by using the push method provided by JavaScript. The data added to the array is put in between braces as parameters. This initialization method adds an element to the following index after the last element in the list.

bodyCount.push(10)