David Landup

Reham Muzzamil

In this detailed guide - learn everything you need to know about ObjectMapper. Convert JSON to and from Java POJOs, implement custom deserializers/serializers and learn the difference between @JsonProperty and @JsonAlias!

Definitive Guide to Jackson ObjectMapper - Serialize and Deserialize Java Objects

JSON (JavaScript Object Notation) has become the de facto serialization format for REST APIs, due to the fact that it's humanly-readable, simple and small in size.
It uses the same notation used to define JavaScript objects, and naturally, it's extremely straightforward to convert between a JSON string and JavaScript objects.
We'll be working with the following JSON string:
<pre><code class="hljs">const jsonString = &#x27;{&quot;author&quot; : &quot;Plato&quot;, &quot;name&quot; : &quot;Republic&quot;, &quot;releaseYear&quot; : &quot;375BC&quot;}&#x27;;
</code></pre>
<h2 id="convertjsonstringtojavascriptobject">Convert JSON String to JavaScript Object</h2>
The <code>JSON</code> module offers two methods - <code>stringify()</code>, which turns a JavaScript object into a JSON String, and <code>parse()</code>, which parses a JSON string and returns a JavaScript object.
It's built into the language itself so there's no need to install or import any dependencies:
<pre><code class="hljs">const book = JSON.parse(jsonString);
console.log(&#x27;Type: &#x27;, typeof book);
console.log(&#x27;Contents: &#x27;, book)
</code></pre>
This results in:
<pre><code class="hljs">Type: object
Contents: 
{
 author:&quot;Plato&quot;,
 name:&quot;Republic&quot;,
 releaseYear:&quot;375BC&quot;
}
</code></pre>
You might be tempted to <code>eval()</code> a string into an object, but be weary of the practice:
<pre><code class="hljs">const book = eval(&quot;(&quot; + jsonString + &quot;)&quot;)
console.log(&#x27;Type: &#x27;, typeof book);
console.log(&#x27;Contents: &#x27;, book)
</code></pre>
This works just fine:
<pre><code class="hljs">Type: object
Contents: 
{
 author:&quot;Plato&quot;,
 name:&quot;Republic&quot;,
 releaseYear:&quot;375BC&quot;
}
</code></pre>
However, this method is also susceptible to code injection. <code>eval()</code> will evaluate and execute any arbitrary text that you put in, provided it can be run. If our <code>jsonString</code> was changed to:
<pre><code class="hljs">const jsonString = &#x27;console.log(&quot;Malicious code&quot;)&#x27;;
</code></pre>
Then just evaluating it would result in:
<pre><code class="hljs">const book = eval(&quot;(&quot; + jsonString + &quot;)&quot;)
// Malicious code
</code></pre>
It is ultimately true that JavaScript runs, to a large degree, on the client's machine, on which they can evaluate and run any code they'd like within the browser. However, a major paradigm shift has occurred in recent years, and JavaScript is more and more being used on the server-side as well. Even though Code Injection security does ultimately fall on the server-side, since you can't really prevent it on the front-end - there's a chance JavaScript is running on the server-side as well.
<h2 id="convertjsonstringtojavascriptarray">Convert JSON String to JavaScript Array</h2>
Although you can parse JSON into any arbitrary object - a common data structure into which you'll convert data are arrays. JSON arrays are contained within square brackets, and elements of arrays are separated by commas:
<pre><code class="hljs">[element1, element2, element3]
</code></pre>
An element can be a standalone element, another JSON object or another array, which in turn can contain any of these types as well. Let's take a look at two arrays - a simple one with a few elements, and one that contains several JSON objects:
<pre><code class="hljs">const simpleArrayJson = &#x27;[&quot;Java&quot;, &quot;Python&quot;, &quot;JavaScript&quot;]&#x27;;
const objectArrayJson = &#x27;[{&quot;name&quot;: &quot;Java&quot;, &quot;description&quot;: &quot;Java is a class-based, object-oriented programming language.&quot;},{&quot;name&quot;: &quot;Python&quot;, &quot;description&quot;: &quot;Python is an interpreted, high-level and general-purpose programming language.&quot;}, {&quot;name&quot;: &quot;JS&quot;, &quot;description&quot;: &quot;JS is a programming language that conforms to the ECMAScript specification.&quot;}]&#x27;;

const simpleArray = JSON.parse(simpleArrayJson);
const objectArray = JSON.parse(objectArrayJson);

console.log(simpleArray);
console.log(objectArray);
</code></pre>
This results in:
<pre><code class="hljs">[
 &quot;Java&quot;,
 &quot;Python&quot;,
 &quot;JavaScript&quot;
]

[
 {
 name:&quot;Java&quot;,
 description:&quot;Java is a class-based, object-oriented programming language.&quot;
 },
 {
 name:&quot;Python&quot;,
 description:&quot;Python is an interpreted, high-level and general-purpose programming language.&quot;
 },
 {
 name:&quot;JS&quot;,
 description:&quot;JS is a programming language that conforms to the ECMAScript specification.&quot;
 }
]
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short tutorial, we've taken a look at how to convert a JSON string into a JavaScript object, and remarked at a bad practice that could introduce vulnerabilities in your code.

In this guide, learn how to convert a JSON string to a JavaScript object or array using JSON.parse().

How to Convert JSON to JavaScript Object

Jovana Ninkovic

In this detailed step-by-step guide, learn what Transfer Learning is and learn how to create a cutting-edge Image Classification model for CIFAR10, with EfficientNet-B0 in Keras and Tensorflow.

Image Classification with Transfer Learning in Keras - Create Cutting Edge CNN Models

<h2 id="introduction">Introduction</h2>
Spring Boot applications ship with an embedded server, and the default port for them is <code>8080</code>. Whether some other service already inhibits this port, or whether you'd like to create a new microservice on a new one - in this guide, we'll take a look at how to configure the port of a Spring Boot application.
<h2 id="applicationpropertiesandapplicationyml">application.properties and application.yml</h2>
There are two types of properties files typically used in Spring Boot projects - <code>application.properties</code> and <code>application.yml</code>.
The <code>application.properties</code> file follows a simple <code>key-value</code> format, where each line represents a new key. The <code>application.yml</code> file follows the YAML format.
Both of these are very human-readable and straightforward and typically, when you start out with a skeleton project, the <code>server.port</code> is the only setting you'll have.
For <code>application.properties</code>:
<pre><code class="hljs">server.port = 8090
</code></pre>
For <code>application.yml</code>:
<pre><code class="hljs">server:
 port: 8090
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can set the port to a random available port, by setting it to <code>0</code>. Which is then obtainable through <code>@Value(&quot;${local.server.port}&quot;)</code>.

 </div>
 </div>
 </div>
 <h2 id="setspringbootportprogrammatically">Set Spring Boot Port Programmatically</h2>
You can additionally set the port programmatically, since most aspects of customization are ultimately expressible through classes and annotations in Spring Boot.
The <code>WebServerFactoryCustomizer</code> interface allows us to customize the server factory. The server factory will &quot;consult&quot; any bean of this type before configuring the server itself - so you can set the port, address, error pages, etc. this way as well.
The <code>customize()</code> method is the only one exposed in the interface, and whatever you don't set in the method is left to the default values. If you just want to change the port, you simply invoke the <code>setPort()</code> method of the generic factory instance. The default factory is <code>TomcatServletWebServerFactory</code>:
<pre><code class="hljs">@Component
public class ChangePort implements WebServerFactoryCustomizer&lt;TomcatServletWebServerFactory&gt; {
 
 @Override
 public void customize(TomcatServletWebServerFactory factory) {
 factory.setPort(8090);
 }
}
</code></pre>
For a generic servlet factory, you can use:
<pre><code class="hljs">@Component
public class ChangePort implements WebServerFactoryCustomizer&lt;ConfigurableWebServerFactory&gt; {
 
 @Override
 public void customize(ConfigurableWebServerFactory factory) {
 factory.setPort(8090);
 }
}
</code></pre>
Spring Boot automatically picks up beans that implement <code>WebServerFactoryCustomizer</code> and just by defining it, you can alter the server startup process.
<blockquote>
Why would you set it programmatically instead of through a configuration file?
</blockquote>
Changing a configuration file programmatically is a bigger hassle than setting the port programmatically. When deploying applications to remote hosts, you might have to read the proposed port of the application through environment variables or another configuration file and set the application's port based on the input data.
In that case, instead of reading and altering a file, it's much simpler and cleaner to simply read the environment variables, and set the port based on it.
<h2 id="setportwithcli">Set Port with CLI</h2>
Finally, you can easily change the port of an application when starting it up, via the CLI. You may not be using the CLI to start up the application, in which case, the previous two options are probably better suited for you.
If you're using Maven, when starting up your application, include a JVM argument:
<pre><code class="hljs">$ mvn spring-boot:run -Dspring-boot.run.jvmArguments=&#x27;-Dserver.port=8090&#x27;
</code></pre>
Or, if you're using Spring's own CLI, you can pass in command-line arguments separate from Spring's command arguments by adding an additional, blank <code>--</code>:
<pre><code class="hljs">$ spring run application_name.groovy -- --server.port=8090
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short tutorial, we've taken a quick look at three ways to change the default port of a Spring Boot application. You can change the default port by modifying the appropriate properties file, programmatically by implementing a <code>WebServerFactoryCustomizer</code> or via the CLI.

In this guide, we've taken a look at how to change the default Spring Boot port through a properties file, programmatically for reading environment variables during deployment and through the CLI.

How to Change Port for Spring Boot Applications

<h2 id="introduction">Introduction</h2>
The copy/paste feature is without a doubt one of the most commonly used features in modern computing, and it refers to the process of copying/transferring text or images from one part of a computer-based application to another. Most recently, it's become common practice to programmatically copy some contents to the clipboard of a user, so that they don't have to.
For instance, activation and verification codes that pop up on a page or email. You can either copy them automatically or have a button that allows someone to copy the contents to the clipboard, so they don't have to copy it themselves. Additionally, code snippets are a great example of content you might want copied to a clipboard!
<blockquote>
In this guide, we’ll take a look at how to programmatically copy content to the clipboard using JavaScript's new Clipboard API.
</blockquote>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Unless you're on <code>localhost</code>, the new Clipboard API will only work if your website is hosted over a secure domain (HTTPS).

 </div>
 </div>
 </div>
 <h2 id="copytoclipboardinjavascript">Copy to Clipboard in JavaScript</h2>
The whole process can be simplified down to a button (or other element) that triggers the code! You could also do this on the page load, but it's generally advisable to be conservative when it comes to interfacing automatically with the user and performing actions that affect their local machine (like adding something to the clipboard):
<pre><code class="hljs">&lt;textarea id=&quot;content&quot;&gt;&lt;/textarea&gt;
&lt;button onclick=&quot;copyToClipboard()&quot;&gt;Copy&lt;/button&gt;

&lt;script&gt;
 function copyToClipboard() {
 var copyText = document.getElementById(&quot;content&quot;).value;
 navigator.clipboard.writeText(copyText).then(() =&gt; {
 // Alert the user that the action took place.
 // Nobody likes hidden stuff being done under the hood!
 alert(&quot;Copied to clipboard&quot;);
 });
 }
&lt;/script&gt;
</code></pre>
However, there's more to be said here - how it works, the limitations, how to copy images, etc. In the rest of the guide, we'll be covering exactly these.
Previously, JavaScript developers relied on <code>document.execCommand()</code>. However, a relatively new Clipboard API was recently released to make data transfer via copy/paste seamless!
<h2 id="readingthebrowserspermission">Reading the Browser's Permission</h2>
Depending on the action you’re performing (reading or writing) with the Clipboard API, it's always advisable to check for browser's permission, before attempting any operations. To check whether you have write access, you'll use the <code>navigator.permissions</code> and query for the <code>clipboard-write</code> permission:
<pre><code class="hljs">navigator.permissions.query({ name: &quot;clipboard-write&quot; }).then((result) =&gt; {
 if (result.state == &quot;granted&quot; || result.state == &quot;prompt&quot;) {
 alert(&quot;Write access ranted!&quot;);
 }
});
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The &quot;clipboard-write&quot; permission of the Permissions API is granted automatically to pages when they are in the active tab.

 </div>
 </div>
 </div>
 Similarly enough, you can check whether you have <code>clipboard-read</code> access as well:
<pre><code class="hljs">navigator.permissions.query({ name: &quot;clipboard-read&quot; }).then((result) =&gt; {
 if (result.state == &quot;granted&quot; || result.state == &quot;prompt&quot;) {
 alert(&quot;Read access ranted!&quot;);
 }
});
</code></pre>
<h2 id="copyingtexttoclipboard">Copying Text to Clipboard</h2>
Let's start out with copying the text onto the clipboard. We've briefly seen this in the first example, and it doesn't really get much more complex than that. To copy text with the new Clipboard API, we use an asynchronous <code>writeText()</code> method and this method accepts only one parameter - the text to copy to clipboard.
Being asynchronous, it returns a promise, which is resolved if the clipboard has been updated successfully, and rejected otherwise:
<pre><code class="hljs">navigator.clipboard.writeText(&quot;TEXT_TO_COPY_TO&quot;).then(() =&gt; {
 /* Resolved - text copied to clipboard */
},() =&gt; {
 /* Rejected - clipboard failed */
});
</code></pre>
<h2 id="readclipboardcontents">Read Clipboard Contents</h2>
Similar to writing, you can also read the contents of a clipboard. This does raise privacy concerns, and you should by all means be transparent and careful about using the feature. You may want to chain writing and reading together, to ensure that whatever you read is only what you already wrote.
<blockquote>
For instance - a user may open a verification code on one page, that's automatically copied to the clipboard. If you're ensured that they'll then go to another page with that entry in the clipboard - you may read the entry and paste it into another field, to yet again, save them a bit of time and effort!
</blockquote>
We use the <code>readText()</code> method to read the latest entry in the clipboard. This method also returns a promise which is resolved if browser can access the clipboard content, and rejected otherwise:
<pre><code class="hljs">navigator.clipboard
 .readText()
 .then((copiedText) =&gt; {
 // Do something with copied text
 });
</code></pre>
Unlike writing to the clipboard, asking to read the browser clipboard content additionally displays a one-time prompt asking the user to consent, as shown in the image below:
<img src="https://s3.stackabuse.com/media/articles/how-to-copy-to-clipboard-in-javascript-with-the-clipboard-api-1.png" alt="Browser prompt">
<h2 id="copyimageandrichtexttoclipboard">Copy Image and Rich Text to Clipboard</h2>
Rich text refers to textual contents that allow styling such as - bold, italics, and underlining, as well as different font families and font sizes. When copying textual content, it might be in rich text format, which means that there's more metadata regarding the contents than just the text itself.
We can also use the Clipboard API's <code>write()</code> method to copy arbitrary data such as rich text and images, and this function accepts only one parameter, which is an array containing the data to be written to the clipboard. The <code>writeText()</code> method is specialized for plain text, while <code>write()</code> can write any arbitrary data.
For instance, you could fetch an image from a remote URL and copy it to the clipboard:
<pre><code class="hljs">const copyImage = async () =&gt; {
 const response = await fetch(&quot;/path/to/image.png&quot;);
 const blob = await response.blob();
 await navigator.clipboard.write([
 new ClipboardItem({ &quot;image/png&quot;: blob }),
 ]);
 };
</code></pre>
The example above also works for copying rich texts, when you change the type of the item to <code>&quot;text/html&quot;</code>:
<pre><code class="hljs">const copyRichText = async () =&gt; {
 const content = document.getElementById(&quot;richTextInputId&quot;).innerHTML;
 const blob = new Blob([content], { type: &quot;text/html&quot; });
 const richTextInput = new ClipboardItem({ &quot;text/html&quot;: blob });
 await navigator.clipboard.write([richTextInput]);
};
</code></pre>
This does assume that the <code>richTextInputId</code> element supports rich text itself.
<h2 id="readimageandrichtextfromclipboard">Read Image and Rich Text from Clipboard</h2>
The Clipboard API also provides a distinct <code>read()</code> method, which is used to read arbitrary data rather than plain text, and it works similarly to the previous <code>readText()</code> function, but can read arbitrary data. For example to read an image data that was previously copied to the clipboard:
<pre><code class="hljs">&lt;img src=&quot;&quot; alt=&quot;&quot; id=&quot;sample-img&quot; /&gt;
&lt;script&gt;
const img = document.getElementById(&quot;sample-img&quot;);
 navigator.clipboard.read().then((data) =&gt; {
 for (let i = 0; i &lt; data.length; i++) {
 if (!data[i].types.includes(&quot;image/png&quot;)) {
 // Clipboard does not contain image data
 } else {
 data[i].getType(&quot;image/png&quot;).then((blob) =&gt; {
 img.src = URL.createObjectURL(blob);
 });
 }
 }
});
&lt;/script&gt;
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short guide, we've been able to cover the process of copying text and other data such as images to the clipboard using the new Clipboard API. Whenever you're writing to or reading from a user's local machine - be careful to be transparent and safe about the process!

Asaolu Elijah

How to Copy to Clipboard in JavaScript with the Clipboard API

In this guide, learn what Tuples are and how to create and work with Tuples/Pairs in Java, through core packages, third party libraries and a custom generic Pair/Tuple implementation.

Definitive Guide to Java Pairs - Working with Tuples in Java

In this guide, learn everything you need to know about Next.js - an extension of React.js with Node.js. Experience Next.js pages, file-system-routing, SSR, SG, pre-rendering and more through a working application!

Guide to Getting Started with Next.js - Create a Next.js App

In this detailed guide, learn everything you need to know about Spring Data MongoDB's @Aggregation annotation, aggregation pipelines, named and positional arguments as well as sorting and pagination, through practical code.

Spring Data MongoDB - Guide to the @Aggregation Annotation

In this short guide, you'll learn how to select checkbox elements on the page, and check them in JavaScript, with Vanilla JavaScript and jQuery.
We'll be working with this simple checkbox setup:
<pre><code class="hljs">&lt;h1&gt;Check/Select Checkbox&lt;/h1&gt;
&lt;p&gt;Have you taken this test before?&lt;/p&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;takenBefore&quot;&gt;
&lt;label for=&quot;takenBefore&quot;&gt;Yes&lt;/label&gt;

&lt;button id=&quot;button&quot;&gt; Check Checkbox &lt;/button&gt;
</code></pre>
<h2 id="elementcheckedtrue">element.checked = true</h2>
The absolute simplest way to check or select a checkbox is to explicitly set the <code>checked</code> field to <code>true</code>:
<pre><code class="hljs">// Get Element
checkBox = document.getElementById(&#x27;takenBefore&#x27;);
// Set the `checked` field to `true`
checkBox.checked = true
</code></pre>
To demonstrate this, let's attach an event listener to a button, which then programmatically selects/checks the Checkbox for us. This is a benign example, but it does serve the point - you'll be checking/selecting the checkbox based on some action from the user:
<pre><code class="hljs">document.getElementById(&#x27;button&#x27;).addEventListener(&#x27;click&#x27;, event =&gt; {
 checkBox = document.getElementById(&#x27;takenBefore&#x27;);
 checkBox.checked = true
});
</code></pre>
This results in:
<img src="https://s3.stackabuse.com/media/articles/how-to-checkselect-a-checkbox-with-jquery-javascript-1.gif" alt="check checkbox with javascript">
<h2 id="element0checkedtrue">$('#element')[0].checked = true</h2>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: jQuery is a popular JavaScript library, present in many projects around the world. Due to its light weight and features that expand the scope of JavaScript's built-in capabilities - it's become a staple.

 </div>
 </div>
 </div>
 We can use jQuery's selector syntax instead of pure JavaScript's to simplify both the selection of the element and the event listener attached to other elements that lead to the checkbox being selected. If you already have jQuery in your project, it'll net simpler code in the end, though, if this is all you need to do, it's probably not worth importing the library just for this.
<blockquote>
You can import jQuery in your page via a Content Delivery Network (CDN). You can use jQuery's own CDN for importing the library as well.
</blockquote>
<pre><code class="hljs">&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;
 integrity=&quot;sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot; 
 crossorigin=&quot;anonymous&quot;&gt;
&lt;/script&gt;
</code></pre>
Now, with jQuery installed - you can easily just set the <code>checked</code> property to <code>true</code> as before, but with simpler syntax:
<pre><code class="hljs">$(&#x27;#takenBefore&#x27;)[0].checked = true
</code></pre>
Here, we get a jQuery object, not the underlying element with the selector, hence, we'll have to subscript it and get the underlying object to access the <code>checked</code> property with <code>[0]</code>.
In much the same way, if we want to trigger this code based on some other action, such as a button press:
<pre><code class="hljs">$(&#x27;#button&#x27;).on(&#x27;click&#x27;, function() {
 $(&#x27;#takenBefore&#x27;)[0].checked = true
});
</code></pre>
This syntax is fairly simpler than the one we've used before, though, it's functionally equivalent:
<img src="https://s3.stackabuse.com/media/articles/how-to-checkselect-a-checkbox-with-jquery-javascript-2.gif" alt="check checkbox with jquery and javascript">
The downside of this approach is - it's raw. We just utilized the simpler selection syntax, but ultimately just explicitly set the property to <code>true</code> after that. There's another way to set the property, but more implicitly.
<h2 id="elementpropcheckedtrue">$('#element').prop(&quot;checked&quot;, true)</h2>
The <code>prop()</code> function accepts a key-value set of arguments - the name of the property we'd like to access and the value we'd like to assign to it. The method itself performs validation that isn't performed when we explicitly set the property to <code>true</code> like before.
<blockquote>
Generally speaking, if you're already using jQuery, it's advised to use <code>prop()</code> rather than explicitly setting the property, due to the added benefit of validation.
</blockquote>
That being said, setting the checkbox to be checked/selected is as easy as:
<pre><code class="hljs">$(&#x27;#takenBefore&#x27;).prop(&#x27;checked&#x27;, true);
</code></pre>
And again, since it's typically triggered on some other event:
<pre><code class="hljs">$(&#x27;#button&#x27;).on(&#x27;click&#x27;, function() {
 $(&#x27;#takenBefore&#x27;).prop(&#x27;checked&#x27;, true);
});
</code></pre>
<img src="https://s3.stackabuse.com/media/articles/how-to-checkselect-a-checkbox-with-jquery-javascript-1.gif" alt="check checkbox with jquery">
<h2 id="elementattrcheckedtrue">$('#element').attr(&quot;checked&quot;, true)</h2>
In older versions of jQuery, which you might be forced to use due to project constraints, the <code>prop()</code> function was preceded by the <code>attr()</code> function, which set the attributes of elements.
In this context, it works in much the same way as <code>prop()</code>:
<pre><code class="hljs">$(&#x27;#takenBefore&#x27;).attr(&#x27;checked&#x27;, true);
</code></pre>
And again, since it's typically triggered on some other event:
<pre><code class="hljs">$(&#x27;#button&#x27;).on(&#x27;click&#x27;, function() {
 $(&#x27;#takenBefore&#x27;).attr(&#x27;checked&#x27;, true);
});
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short guide, we've taken a look at how to set a checkbox to &quot;checked&quot;/selected using Vanilla JavaScript and jQuery.
We've taken a look at the simplest methods such as explicitly setting the property and worked our way up to using jQuery's wrapper methods with validation.