DEV Community: Johnpaul Eze

Getting started with nuxt content - a simple blog page

Johnpaul Eze — Sun, 09 Apr 2023 10:03:41 +0000

Building a blog page from scratch can be a daunting task for beginners. However, with the help of Nuxt Content, it can be made easy and fun. In this tutorial, I will show you how to build a stunning blog page using Nuxt content and Tailwind CSS.

What is Nuxt Content?

Nuxt Content is a module for Nuxt.js that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then easily import and display it in their application.

Nuxt Content comes with a number of features that make it easy to manage content, including:

Markdown, YAML, and JSON support
Automatic image optimization
Built-in search functionality
Support for multiple languages
Automatic SEO optimization
And more!

Getting Started

Before getting started, please make sure to have installed the recommended setup:

Follow the Nuxt Prerequisites
Download the VS Code MDC Extension

To get started with Nuxt Content, you will need to have a basic understanding of Nuxt.js. If you are new to Nuxt.js, you may want to check out their documentation and complete the tutorials before diving into Nuxt Content.

Project Setup

Let’s start with creating a new Nuxt project. You can do so by running the command below:

// yarn
yarn create nuxt-app simple-nuxt-blog

You will be prompted to answer some questions. You can see how I answered them in the image below:

After the project is successfully created, the terminal will look like the image below:

Next, cd into the project directory:

cd simple-nuxt-blog

Then install the Nuxt Content module:

yarn add @nuxt/content

Now open the nuxt.config.js file and add a new entry to the modules array.

//nuxt.config.js

export default {
  // other config
  modules: [
    '@nuxt/content'
  ]
}

I will use Tailwind CSS to make things neat and quick. However, If you don’t want to use it, you can skip the setup steps and start the dev server. Otherwise, run the command below to create the Tailwind CSS config.

npx tailwindcss init

The command above will create a new file called tailwind.config.js at the root of your project. Open this file and add jit property as shown below.

// tailwind.config.js

module.exports = {
  jit: true
  // other config
}

Next, create an assets/css/tailwind.css file and add the code below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now you can start the dev server:

yarn dev

✨ Well done! A browser window should automatically open on http://localhost:3000/.

This concludes the setup. Next, let's create a few blog posts. To do this you will need to create a content directory where you will store your content files.

Now, let’s create a few markdown files in our content directory.

content/hello-world.md:

// content/hello-world.md

---
title: "Hello, World!"
description: "building my first ever web page "
date: 2023-03-14
slug: How-to-build-your-first-web-page
---

Building my first ever web page was somewhat challenging but If you can, imagine a time before the invention of the Internet...

content/html-elements.md:

// content/html-elements.md

---
title: Top Hmtl Elements to use more often
description: HTML is a powerful markup language that can...
date: 2023-03-29
slug: Top-html-elements-to-use-more-often
---

we’ll discover the top ten HTML elements you might not have known existed...

content/variables.md:

// content/variables.md

---
title: Getting started with variables and data types
description: variables are important...
date: 2023-04-02
slug: getting-started-with-variables-and-data-types
---

Variables are containers for pieces of data. That data can be one of many different data types.

let firstName = 'John';
let lastName = 'Doe';

// We can do a console.log to show the value
console.log(firstName, lastName);

The Markdown files consist of the front matter and body. The front matter goes between triple dashes (---). It must be written in valid Markdown, YAML, or JSON format. This config will be later injected into a Nuxt Content document. In this example post, we have a title, a description, a date, and a slug. You can, of course, add more properties if you want to. For instance, an image URL or author.

Now that we have successfully set up our blog posts files, it only makes sense to fetch and render the posts on the homepage for readers to see. To do that, head to pages/index.vue file and add the following:

// pages/index.vue

<template>
  <div
   class="max-w-3xl max-w-5xlmin-h-screen
        flex justify-center mx-auto my-12">
        <main class="w-full">
        <h1 class="text-2xl font-semibold mb-6">My blog page</h1>
     <section class="space-y-4 divide-y">
        <article v-for="post of posts" 
        :key="post.slug"class="pt-4">
        <h2 class="text-lg mb-2 text-blue-700 
            hover:text-blue-800">
            <nuxt-link :to="`/blog/${post.slug}`">
              {{ post.title }}
            </nuxt-link>
       </h2>
          <span>
            {{ post.description }}
          </span>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
    }
  },
  async fetch() {
    this.posts = await this.$content().fetch()
  },
}
</script>

To fetch articles, Nuxt Content injects the $content instance globally. In order to query the content, it provides a powerful MongoDB-like API. As you can see in the snippet above, we do not provide any filters, so all the posts will be fetched immediately.
The image below shows how the homepage should look like:

However, If you click on one of the links, it should redirect you to a blog/<slug> page, which doesn’t exist yet, hence let’s create one.

View Dynamic Blog Post Page

To do this Let’s create a pages/blog/_slug.vue file and add the following code to it:

// pages/blog/_slug.vue

<template>
  <div class="max-w-3xl mx-auto min-h-screen my-12">
    <div v-if="post">
     <h1 class="text-2xl font-semibold mb-6">{{ post.title }</h1>
      <nuxt-content :document="post" />
      <div class="mt-8">
        <nuxt-link
          to="/"
          class="active:bg-green-700 bg-green-500 
          rounded text-white font-bold py-3 px-5"
          >Back to blog</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null
    };
  },
  async fetch() {
    this.post = (
      await this.$content()
        .where({ slug: this.$route.params.slug })
        .limit(1)
        .fetch()
    )?.[0];
  }
};
</script>

In the snippet above, you notice that instead of calling the fetch method immediately, we provided a slug filter extracted from the route params. We also limit the results to one, as we want to fetch only the specific blog post. Hence, we don’t expect more results as slugs should be unique. The fetch post is then passed to the <nuxt-content /> component via the document prop.

The image below shows the “Getting started with variables and data types” post:

Awesome! we have our blog working. The site displays all blog posts and allows users to read each article.

Next, let’s add a blog search functionality.

Blog Search

To allow users to enter a search query, we need to add an input field. Besides that, we will update the fetch method, so if there is a search query available, we will perform a text search instead of just fetching all the articles. To do this, head back to the pages/index.vue file and update it with the following snippet:

// pages/index.vue

<template>
  <div
    class="max-w-3xl max-w-5xlmin-h-screen flex justify-center 
           mx-auto my-12">
    <main class="w-full">
      <h1 class="text-2xl font-semibold mb-6">My blog page</h1>
      <section>
        <form class="flex flex-col space-y-2 mb-4" 
                     autocomplete="off">
          <label for="search-blogs" class>Search blogs</label>
          <input id="search-blogs" v-model="query"
            class="px-3 py-2 shadow border border-gray-200"
            type="text"/>
        </form>
      </section>
      <section class="space-y-4 divide-y">
        <article v-for="post of posts" :key="post.slug" 
                 class="pt-4">
          <h2 class="text-lg mb-2 text-blue-700 
                     hover:text-blue-800">
            <nuxt-link :to="`/blog/${post.slug}`">
              {{ post.title }}
            </nuxt-link>
          </h2>
          <span>
            {{ post.description }}
          </span>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
      posts: []
    };
  },
  async fetch() {
    if (!this.query) {
      this.posts = await this.$content().fetch();
      return;
    }
    this.posts = await this.$content()
      .search(this.query)
      .fetch();
  },
  watch: {
    query: "$fetch"
  }
};
</script>

After updating the code, you should be able to search your blog posts, as shown in the gif below.

The full project is in this repo. You can fork it to quickly get started.

Conclusion

In this tutorial, we created our own blog using Nuxt and Nuxt Content, we even went over implementing a blog search functionality. However, you can add more features, such as search debouncing, filtering by categories, and even pagination or lazy loading more articles with infinite scroll. By following the steps outlined in this tutorial, you should now be able to create a beautiful and responsive blog page. So what are you waiting for? Start building your own stunning blog page today!

Unleashing the Power of Slots in Vue.js

Johnpaul Eze — Mon, 06 Feb 2023 10:11:08 +0000

Vue.js is a popular JavaScript framework used for building user interfaces. One important aspect of Vue.js is understanding how to use slots. With the recent release of Vue 3, the syntax for using slots has been made more succinct.

This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, and clearer readability to our Vue-based projects.

With Vue slots, you can turn a part or all of your components into reusable templates that will render differently based on different use cases. All you need to do is embed them in slots.
In this article, I’ll help you understand the concept of Vue slots and show you how to use them.

What are slots

Slots in Vue.js are a powerful feature that allows components to be reused and display dynamic content. Slots allow you to pass content into a component and define how it is displayed. This can make your code more modular and reusable, allowing you to create complex applications with ease. Slots are the Vue equivalent to transclusion in Angular and child props in React.

Types of slots

In Vue.js, there are basically two types of slots:

Default slots
Named slots.

Overview of slots

We understand the whole concept from the definition of slots — it’s about making components reusable. The best way to understand them is to see them in action. Let’s start with a simple example:

// example.vue
<template>
  <div class="example">
    <slot></slot>
  </div>
</template>

The component above has a wrapper div. Let’s assume that div is there to create a stylistic frame around its content. This component is able to be used generically to wrap a frame around any content you want. Let’s see what it looks like to use it.

// app.vue
<template>
  <example><img src="logo.png"></example>
</template>

The content that is between the opening and closing example tags will get inserted into the example component where the slot is, replacing the slot tags. This is the most basic way of doing it. It will look like this:

You can also specify default content to go into a slot simply by filling it in:

// example.vue
<template>
  <div class="example">
    <slot>This is the default content if nothing gets specified to go here</slot>
  </div>
</template>

So now if we use it like this instead:

// app.vue
<template>
  <example />
</template>

The default text of “This is the default content if nothing gets specified to go here” will show up, but if we use it as we did before, the default text will be overridden by the img tag:

Default slots

Default slots are a way to pass content from the parent component to a child component. The content passed to a default slot is rendered inside the child component, allowing the parent component to customize the content of the child component.

A default slot is defined in the child component template using the element without a name attribute. When using a default slot, the content passed from the parent component is placed directly inside the child component, replacing the element.

For example, consider a Card component that contains a header, main content area, and footer:

//Mycard.vue
    <template>
  <div class="card">
    <header class="card-header">
      <slot name="header"></slot>
    </header>
    <main class="card-main">
      <slot></slot>
    </main>
    <footer class="card-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style>
  .card {
    border: 1px solid lightgray;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
  }

  .card-header,
  .card-footer {
    background-color: lightgray;
    padding: 1rem;
    text-align: center;
  }

  .card-main {
    flex-grow: 1;
    background-color: lightyellow;
    padding: 1rem;
  }
</style>

This component creates a card with a header, main content area, and footer. The default slot is defined in the main section, where the content passed from the parent component will be rendered.

To pass content to the default slot, the parent component uses the child component in its template, placing the content directly inside:

//app.vue
    <template>
  <MyCard>
    Main Content
  </MyCard>
</template>

<script>
import MyCard from './MyCard.vue';

export default {
  components: {
    MyCard,
  },
};
</script>

The content Main Content will be rendered in the main section of the Card component as shown below:

Named Slots

The best way to organize a slot-based component system is to name your slots. Named slots are a way to pass content from the parent component to a child component, similar to default slots. However, named slots allow the parent component to specifically target and customize different parts of the child component.

A named slot is defined in the child component template using the <slot> element with a name attribute. The name attribute specifies the name of the slot and is used by the parent component to target and customize that specific part of the child component.

For example, consider a component called MyLayout:

//MyLayout.vue
   <template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style>
  .layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  header,
  footer {
    background-color: lightgray;
    padding: 1rem;
  }

  main {
    flex-grow: 1;
    background-color: lightyellow;
    padding: 1rem;
  }
</style>

This component creates a layout with a header, main content area, and footer. The named slots are defined in the header and footer sections, where the content passed from the parent component will be rendered.

To pass content to a named slot, the parent component uses the child component in its template and specifies the name of the slot using the v-slot directive:

//app.vue
<template>
  <MyLayout>
    <template v-slot:header>
      <h1>Header</h1>
    </template>
    <p>Main Content</p>
    <template v-slot:footer>
      <h1>Footer</h1>
    </template>
  </MyLayout>
</template>

<script>
import MyLayout from './MyLayout.vue';

export default {
  components: {
    MyLayout,
  },
};
</script>

The content Header will be rendered in the header section of MyLayout component, and the content Footer will be rendered in the footer section. The content Main Content will be rendered in the default slot, which is located in the main section just like below:

Reusability with slots

Props are a great way to reuse components, but they have their limitations depending on your use case. Props tend to work best in components that have the same format and content, but just different values.

Sometimes you need to make your components a little more flexible and adaptable: maybe you want some components to have certain sections while depending on the page it’s on, you want to remove other sections.
By injecting your content using slots, it makes it easier to switch around the content of a component without having to worry about using template logic to handle rendering.

Conclusion

While Vue slots are a pretty simple concept, it’s super powerful in designing amazing components. We have seen the different ways to reuse properties of a component by using the slot property. This takes component-based development to a whole new level, and while I’ve demonstrated a lot of great ways slots can be used, there are countless more out there. Feel free to explore them.

You can read more about Vue slots on Vue’s official site.

Top 10 html elements to use in 2023

Johnpaul Eze — Tue, 31 Jan 2023 22:54:18 +0000

HTML is a powerful markup language that can be used to give our web applications structure and provide powerful accessibility benefits, but only when used appropriately.

In this article, we’ll discover the top ten HTML elements you might not have known existed but can help you create more accessible and structurally-sound web applications.

Translate

The translate attribute in HTML is used to specify whether the content of an element is translated or not. This attribute is new in HTML5. The translate attribute is part of the Global Attributes and can be used on any HTML element.

Syntax:

<element translate = "yes|no">

Attribute Values: The translate attribute contains two values which are listed below:

yes: This attribute is used to specify that the content of the element can be translated.
no: This attribute is used to specify that the content of the element can not be translated.

Example:

<!DOCTYPE html>
<html>
    <head>
      <title>translate attribute</title>
        <style>
          </>
        </style>
    </head>
        <body>
          <h2><strong >translate attribute</strong></h2>
          <p translate="no">Don't translate this!</p>
          <p translate="yes">This tag can be translated to any language.</p>
        </body>
</html>

In the above example, we specified that the first paragraph tag should not be translated.

Map

The <map> tag is used to define an image map. An image map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

The <map> tag supports the Global Attributes in HTML and also supports the Event Attributes in HTML.

Syntax:

<map name=""> </map>

Example:

<!DOCTYPE html>
<html>
 <head>
    <title>
        HTML | <map> Tag
    </title>
</head>
  <body>

<h1>The map and area elements</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

Draggable

This draggable attribute is used to specify whether an element is draggable or not. Links and images are by default draggable. The draggable attribute is often used in the drag and drop operations.
The draggable attribute supports the Global Attributes in HTML.

Syntax:

    <element draggable = "true|false|auto">

draggable can have the following Values:

true: the element can be dragged
false: the element cannot be dragged.
auto: This value represents the uses of the default browser.

Example:

For this example we will create a draggable div element:

Step 1) Add HTML:

    <!-- Draggable DIV -->
     <div id="mydiv">
      <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
       <div id="mydivheader">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>

Step 2) Add CSS:

    #mydiv {
      position: absolute;
      z-index: 9;
      background-color: #f1f1f1;
      border: 1px solid #d3d3d3;
      text-align: center;
    }

    #mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #2196F3;
      color: #fff;
    }

The only important style is position: absolute, the rest is up to you.

Step 3) Add JavaScript:

    // Make the DIV element draggable:
    dragElement(document.getElementById("mydiv"));

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(elmnt.id + "header")) {
        // if present, the header is where you move the DIV from:
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
      } else {
        // otherwise, move the DIV from anywhere inside the DIV:
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

The overall code and output will look like this:

Capture

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. The capture attribute is supported on the file input type.

Values include user and environment.

The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.

Note: Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

Example:

When set on a file input type, operating systems with microphones and cameras will display a user interface allowing the selection of an existing file or the creation of a new one:

    <p>
      <label for="soundFile">What does your voice sound like?:</label>
      <input type="file" id="soundFile" capture="user" accept="audio/*">
      </p>
      <p>
      <label for="videoFile">Upload a video:</label>
      <input type="file" id="videoFile" capture="environment" accept="video/*">
      </p>
      <p>
      <label for="imageFile">Upload a photo of yourself:</label>
      <input type="file" id="imageFile" capture="user" accept="image/*">
      </p>

The overall code and output will look like this:

Spellcheck

The Spell Check feature in HTML is used to detect grammatical or spelling mistakes in the text fields.
The Spell Check feature can be applied to HTML forms using the spellcheck attribute. The spellcheck attribute is an enumerated attribute which defines whether the HTML element will be checked for errors or not. It can be used with input and textarea fields in HTML.

It may have the following values:

true : which indicates that the element should be, if possible, checked for spelling errors;
false : which indicates that the element should not be checked for spelling errors.

When the attribute is not set, it takes the default value which is generally element type and browser defined. The value can be also be inherited from the ancestral element, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true.

Syntax:

Syntax for spellcheck attribute in an input field in html:

    <input type="text" spellcheck="value">

Syntax for spellcheck in a textarea field in html:

    <textarea type="text" spellcheck="value"></textarea>

In the above syntax the value assigned to spellcheck will define whether spellcheck will be enabled or not on the element.

Enabling Spell Check in a HTML Form

To enable spellcheck in a HTML form the spellcheck attribute is set to true.
Below is a sample HTML program with enabled spellcheck:

    <!DOCTYPE html>
    <html>
       <body>
            <h3>Example of Enabling SpellCheck</h3>
           <form>
                <p>
                    <input type="text" spellcheck="true">
                </p>

                <p>
                    <textarea spellcheck="true"></textarea>
                </p>
                <button type="reset">Reset</button>
            </form>    
        </body>
    </html>

Output:

notice that while we typed in the input and textarea box, it was checking the spelling and thus flagged “loleem ippssun” and “dulor cit amet” as wrongly spelt.

Disabling Spell Check in a HTML Form

To disable spellcheck in a HTML form the spellcheck attribute is set to false.
Below is the sample HTML program with disabled spellcheck:

    <!DOCTYPE html>
    <html>
       <body>
            <h3>Example of Disabling SpellCheck</h3>
           <form>
                <p>
                    <input type="text" spellcheck="false">
                </p>

                <p>
                    <textarea spellcheck="false"></textarea>
                </p>
                <button type="reset">Reset</button>
            </form>    
        </body>
    </html>

Output:

notice that while we typed in the input and textarea box, it was not checking the spelling and thus ignored “loleem ippssun” and “dulor cit amet” that was wrongly spelt.

Accept

The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).

This attribute specifies the type of file that the server accepts. This attribute can be used with element only. This attribute is not used for validation tool because file uploads should be validated on the Server.

Syntax:

    <input accept = "file_extension">

Attribute Values:

file_extension : It Specify the file extension(s) like .gif, .jpg, .png, .doc) the user can pick from.
audio/* : The user can pick all sound files.
video/* : The user can pick all video files.
image/* : A valid media type, with no parameters. Look at IANA Media Types for a complete list standard media types
media_type : A valid media type without parameters.

Example:

In this example we will specify that the server accepts only image files in the file upload:

    <!DOCTYPE html>
    <html>
        <head>
            <title>accept attribute</title>
        </head>
        <body>
            <h2>Accept attribute</h2>
            <form action=" ">
            <label for="img">Select image:</label>
            <input type="file" name="img" accept="image/*">
            <input type="submit">
            </form>
        </body>
    </html>

Output:

Note: The accept attribute can only be used with <input type="file">.

Download

The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.

The optional value of the download attribute will be the new name of the file after it is downloaded. It is used in <a> and <area> element.

There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
If the value is omitted, the original filename is used.

Syntax:

    <element download="filename">

Attribute Values:

It contains single value “filename” which is optional. It specifies the new filename for the downloaded file.

You may see an example of download attribute implementation as follows:

    <a href="document.pdf" download>Download PDF</a>

Without the download attribute above, then the browser will navigate to the document.pdf location and open the file in the browser.

When you specify the download attribute, then the computer will either:

Save the file in the default download location defined in your browser settings
Or ask you where to save the file before downloading

The download attribute also accepts a value that you can specify as the filename alias:

    <a href="document.pdf" download="HTML5_download.pdf">Download PDF</a>

note: When you download the document.pdf file, the browser will automatically rename the file with the download attribute value.

itemscope

The HTML itemscope attribute works with item types to ensure that the HTML contained in a block is about a particular item. Defining the itemscope attribute for any element creates a new item, which results in a number of name-value pairs that are associated with the element.

A related attribute, itemtype, is used to specify the valid URL of a vocabulary (such as a portfolio site) that describes the item and its properties context.

Syntax:

    <element itemscope></element>

When you specify the itemscope attribute for an element, a new item is created. The item consists of a group of name-value pairs. For elements with an itemscope attribute and an itemtype attribute, you may also specify an id attribute. You can use the id attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.

Example:

Representing structured data for a portfolio:

The following example specifies the itemtype and specifies four related itemprop attributes.

	itemtype	portfolio
	itemprop	(itemprop name)	(itemprop value)
	itemprop	developer	Johnpaul Eze
Itemscope	itemprop	stack	Frontend Dev
	itemprop	name	Avatar
	itemprop	portfolio	Visit portfolio

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML itemscope Attribute</title>
    </head>
    <body>
        <div itemscope itemtype="https://johnpauleze.netlify.app">
            <h1 itemprop="name">Avatar</h1>
            <span>Developer: <span itemprop="developer">Johnpaul Eze</span> (born june 26th)</span>
            <span itemprop="stack">Frontend dev</span>
            <a href="https://johnpauleze.netlify.app" itemprop="Portfolio">Visit Portfolio</a>
          </div>

    </body>
    </html>

Output:

Find more about itemprop attributes here.

itemtype

The itemtype attribute specifies the URL but the URLs are not connected with any resources rather they are used by browsers to act as the identifiers. The itemtype attribute can only be specified on those elements that contain the itemscope attribute otherwise it will not execute properly. The types of items used in the itemtype URL must be of those types that are defined in specifications provided by schema.org. Some of the browsers that refer to microdata on schema.org look for specific resources on the webpage and there these itemtype and itemscope attributes are mostly used. The itemtype attribute should have a value containing the unordered set of unique tokens & those are case-sensitive, specifying each contains the absolute & valid URL. The value of the attribute should contain a minimum of 1 token.

Syntax:

    <div itemscope itemtype="URL">
        <span itemprop="item1">item name</span>
        <span itemprop="item2">item name</span>
    </div>

Note: The itemtype must be a URL or you can also use URN (Uniform Resource Name) as we have used in the below example.

Attribute Value: The attribute must contain a valid URL consisting of no leading & trailing whitespaces.

Supported tags:
<div> and <span> tags.

Example:

This example describes the implementation of the itemtype attribute in HTML.

HTML

    <!DOCTYPE html>
    <html>
    <head>
        <title>HTML itemtype attribute</title>
    </head>
    <body>
        <h1>FreeCodeCamp</h1>
        <h4>Tutorials and Courses</h4>
        <div itemscope itemtype=
            "https://www.freecodecamp.org/">
            <span itemprop="description">
                FreeCodeCamp is a portal for developers.
                It has tutorials on various topics.
            </span>
            <br>
            Course: <span itemprop="course">JavaScript</span>
            <br>
            Tutorial: <span itemprop="tutorial">React</span>
            <br>
        </div>
    </body>
    </html>

Output:

Find more about itemprop attributes here.

Dropzone

The dropzone attribute in HTML is used to specify whether the dragged data copied, moved, or linked when it is dropped on any element. This attribute is new in HTML5.

Syntax:

     <element dropzone = "copy | move | link">

Attribute Value:

Copy: Dropping the data will result in a copy of the dragged data.
Move: Dropping the data will result in that the dragged data being moved to the new location.
Link: Dropping the data will result in a link to the original data

Example:

    <!DOCTYPE html>
    <html>
    <head>
        <title>dropzone</title>
    </head>
    <body draggable="true">
        <h2> dropzone attribute</h2>
        <div dropzone="copy">DIV</div>
        <div dropzone="move">DIV1</div>
        <div dropzone="copy">DIV2</div>
    </body>
    </html>

Note: The dropzone attribute isn’t supported by the popular browsers.

Conclusion:

In this article, we highlighted the top 10 HTML elements that could prove useful for a beginner in software development. It is recommended to use them to improve the accessibility and SEO of your website.

Resources:

Follow this link to check out more amazing HTML elements/attributes.

Drag and Drop Image uploader using React-dropzone and Cloudinary

Johnpaul Eze — Sun, 01 Jan 2023 19:29:38 +0000

Media uploading has transitioned from conventional clicking and uploading to drag-and-drop functionality. Modern applications have adopted this new trend for a better user experience. In this tutorial, we will be implementing a drag-and-drop functionality in a react application.

To achieve that, we'll use the following technologies:

React-dropzone
react-dropzone is a set of React libraries that help developers to build complex drag-and-drop functionalities while keeping their components destructured. In other words, it is a React hook that makes it easy to construct drag-and-drop interfaces quickly rather than from scratch.

Cloudinary
cloudinary provides cloud-based image and video management services. It enables users to upload, store, manage, manipulate, and deliver photos and videos for websites and apps.

React
react is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Facebook creates it.

What we will build
This series will focus on building a drag-and-drop zone for files and then uploading the dropped file(s) to a server. We'll use react-dropzone to implement the drag-and-drop functionalities, Afterwards, We’ll upload the files directly from the browser using Cloudinary Unsigned Upload.

Here's a demo of the end product in action:

Demo:

Prerequisites

To follow this project, some experience with React.js and a cloudinary is required.
Node.js installed on the computer for local development.

Getting Started with React application
First, let’s run the following terminal command to create the react.js application in a folder called file_uploads:

$ npx create-react-app file_uploads

Next, navigate into the application directory and install the dropzone npm package with the following commands:

$ cd file_uploads // to navigate into the project directory
$ npm install react-dropzone // to install the dropzone library

Now, let’s start the application with the following command:

$ npm start

React.js will start a live development server on http://localhost:3000.

Building the application
We want to create an area where, when we can click on it, the React-dropzone library will initiate a file selection dialog, allowing us to select and upload files.

The easiest way to get started with React Dropzone is to use the useDropzone hook. The useDropzone returns getRootProps, getInputProps, and isDragActive, which we can call to get the Drag and Drop API properties and pass those to our elements. The root element can be any element we want. For this example, we will use a <div>. The input element must be an <input>.

Next, let's create a component folder in the root directory of the project and create a Dropzone.js file with the following snippets:

//Dropzone.js
import React from 'react';
import { useDropzone } from 'react-dropzone';

function Dropzone() {
  const {
    getRootProps,
    getInputProps,
    isDragActive
  } = useDropzone({
    onDrop
  });
  return (
    ...
  );
}
export default Dropzone;

Here, we imported useDropzone from 'react-dropzone' and destructured getRootProps, getInputProps and isDragActive from it.

Next, in the App.js, let's import and render the Dropzone.js component as shown below:

import React from 'react';
import Dropzone from './Dropzone';
function App() {
  return (
    <div>
      <Dropzone />
    </div>
  );
}

export default App;

Next, in the return function of the Dropzone.js component, let’s return a div and input elements and pass getRootProps() and getInputProps() to them respectively. Also, we'll use the isDragActive to render the input label conditionally, like in the below:

//component/Dropzone.js
<div {...getRootProps()}>
  <input {...getInputProps()} />
 {isDragActive ? (
           <p className="dropzone">Drop your image files here</p>
          ) : (
           <p className="dropzone">
     Drag and drop some files here, or click to select files</p>
          )}  
</div>

The getRootProps() — is a function that returns an object of the properties needed on the root element. It sets drag and drops API properties on the chosen root.

The properties and methods look like this:

These events allow the browser to monitor the users' drag and drop engagements.

The getInputProps() — is a function that returns an object of the properties needed on the input element.

Here are the properties and methods:

The isDragActive() — is a boolean, true if a file is dragged over the dropzone area and not included in acceptable file types but false if not.

Handling Drop Functionality
We can drag and drop files into our component, but we are not doing anything with these files yet.

The useDropzone hook takes an onDrop function as props to complete the drag and drop functionality and a config object as an optional parameter.

The onDrop property takes a callback function and calls it when the drop event occurs.

Now, let's create the onDrop function to preview the copy of the image being dragged and dropped into the dropzone and pass it to the useDropzone hook like in the below:

import React, { useState, useCallback, useEffect } from "react";
//other imports here

function Dropzone() {
  const [files, setFiles] = useState([]);

  const onDrop = useCallback((acceptedFiles) => {
    setFiles(
      acceptedFiles.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file)
        })
      )
    );
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: "images/*"
  });

//return (); functiion here
}
export default Dropzone;

In the snippets above, we:

Created files state constant with the useState hook to store the file object.
Wrapped the function with the useCallback hook to avoid triggering unnecessary re-renders.
Updated the files state by looping through the acceptedFiles parameter and calling Object.assign() and URL.createObjectURL() functions.
Passed the onDrop() function to the useDropzone hook and also gave the accept property and set it to a string ("images/*") to accept all image files.

Next, create a thumbs() function that will loop through the file's state constant and display a preview using the image tag. Update the Dropzone.js file with the following snippets:

//component/Dropzone.js
//imports here
function Dropzone() {
 //state constant here

//onDrop() function here

 //the Dropzone implementation here
  useEffect(() => {
    return () => files.forEach((file) => URL.revokeObjectURL(file.preview));
  }, [files]);

  const thumbs = files.map((file) => (
    <div key={file.name}>
      <div>
        <img
          src={file.preview}
          onLoad={() => {
            URL.revokeObjectURL(file.preview);
          }}
          alt=""
        />
      </div>
    </div>
  ));
  return (
    <div className="App">
      <div>
        <div {...getRootProps()}>
          //input and p tags here
        </div>
      </div>

      <aside>{thumbs}</aside>
    </div>
  );
}
export default Dropzone;

Here, we created the thumbs() function, rendered it in the return() function, and used the useEffect hook to prevent memory leaks and avoid unnecessarily storing the preview.

Now when we drop a file (or files), the file will be appended to the state and displayed in a preview.

Upload to cloudinary with unsigned upload
To upload the file to Cloudinary, log in or create a free account here. From the Dashboard, click on the Settings icon and navigate to uploads.

Next, scroll down to upload presets, add an unsigned preset, choose a folder to upload the files, and select a name for the preset.

Learn more about Cloudinary unsigned uploads.

Next, let's create a handleUpload() to upload the file to Cloudinary and render a button that will trigger the handleUpload() in the return(). Update the Dropzone.js file with the following snippets:

//component/Dropzone.js
//imports here
function Dropzone() {
  const [files, setFiles] = useState([]);

// onDrop() function here

  // useDropzone hook here

 // thumbs() function here

 //useEffect hook here

  const handleUpload = () => {
    const url = "https://api.cloudinary.com/v1_1/johnpaul/image/upload";
    const formData = new FormData();
    let file = files[0];
    formData.append("file", file);
    formData.append("upload_preset", "dryqolej");
    fetch(url, {
      method: "POST",
      body: formData
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
      });
  };

  return (
    <div className="App">
      <div>
        <div {...getRootProps()}>
    // input and p tags here
        </div>
      </div>
      {files.length > 0 && (
        <button className="button" onClick={handleUpload}>
          Upload
        </button>
      )}
      <aside>{thumbs}</aside>
    </div>
  );
}
export default Dropzone;

In the snippets above, we created the handleUpload() function and conditionally rendered the Upload button if there is a file in the files state. Then passed the handleUpload() to the onClick event of the button.

Now, when we drag and drop a file in the drop area, we'll see a file preview. If we click the Upload button and go over to our console or our media library, we will see the image object Uploaded to Cloudinary.

The final result will look like the GIF shown below.

Conclusion

In this tutorial, we explored react-dropzone and how it can be integrated into a React application to offer advanced drag and drop functionalities to media uploads. Implementing such a fantastic user experience feature in our React application should now be a thing of the past. I hope this tutorial is helpful. The complete source code for this tutorial is available on Github
.

Resources
These resources might be useful

Modern e-commerce with Xata and Cloudinary

Johnpaul Eze — Thu, 24 Nov 2022 11:15:00 +0000

Adding interactivity to images provides a more profound experience for the customer, making the product image almost tangible. In this tutorial, I will show you how to implement an in-house interactive media gallery with minimal fuss using Cloudinary and Xata.

Xata

Xata is a serverless database with built-in powerful search and analytics which is built on Next.js that offers a variety of data types.

Cloudinary

Cloudinary is a SaaS technology company that provides cloud-based image and video management services. It enables users to upload, store, manage, manipulate, and deliver images and video for websites and apps. The product gallery widget will be used in this series as a part of Cloudinary's wider range of services.

Next.js

Next.js is a React framework that offers serverside rendering and a fast build time. Hence we will use Next.js to build this project.

What we will build

This series will focus on building the product Gallery management feature for an e-commerce web application. We'll use Xata on the backend to create our store products. Afterwards, We’ll use the Cloudinary Product Gallery widget to display our products and it's variants. Here's a demo of the end product in action:

Demo:

Prerequisites

To get the most out of this article the following is required:

Experience with React and Next.js
Knowledge of Xata CLI, and a Cloudinary account

Part 1 - Getting started Xata
Part 2 - Adding dynamic product details
Part 3 - Setting up cloudinary gallery widget

Let's get started with the first part!

Getting started Xata

You can pull in data for products from wherever you want, a REST endpoint, or from a JSON file. Whatever works best for you. For this tutorial, our product data will come from a Xata database.

To create a Xata database, we have to create a Xata account. After that, we can now create a workspace. Inside this workspace, we can have multiple databases.

Creating a Xata Database

After you log in for the first time to Xata, you'll see an "Add a database" button. We can use this to create our first database.

Once our database is created, we will need to create tables.

Creating Tables

The fastest way to get started is to use Start with sample data or import a CSV file, but we want to create our schema, click Start from Scratch, and fill out a table name.

We can now define the schema for this table using the "+" icon on the table header. All tables have a required column: the id column, which provides a unique identity to each row.

When adding columns, we note that each column has multiple types to choose from. The products table will consist of the following columns:

name: Stores the name of each product
desc: Holds the description of each product
imageUrl: Stores the image URL served from Cloudinary for each product
price: Stores each product's price
tags: Stores the tags for each product

As we add more tables, we can view and edit the schema on the Schema page in the UI.

Working with Our Data

To work with our data, click the Get Code Snippet button. This will bring up a drawer that shows the equivalent API call that we can use to replicate the same query in our code.

So far, we’ve created a database, defined a schema, entered data, and consumed it.

Next, explore Xata’s API to learn how to work with the data in a Next.js application.

Adding Xata to our Application

Since we have a global Xata command that we can invoke from anywhere, let's tell Xata who we are by running the following command:

   xata auth login

Running this command will prompt us to either:

create a new API key, or
paste in an existing one.

For this tutorial, we will paste in an existing API key. However, to create a unique API key for your database, click on your profile icon and select account settings. It will look like this:

After we create an API key, the CLI knows who we are.
Next, let's initialize a project. We can do this by running the following command:

  xata init

Once we're done, our project will be set up to query Xata.
Next, let’s create a .env file in the root directory of our project. This file will hold our Xata credentials.
To do this, add the following to the .env file:

  API_KEY=YOUR API KEY            
  XATA_DATABASE_URL="YOUR DATBASE URL"

Fetching Products from Xata

To query Xata from our Next.js app, we will use getServerSideProps. This is a function that will be called by Next.js when it renders our page:

//index.jsx

import { BaseClient } from '@xata.io/client';

export async function getServerSideProps() {
  const xata = new BaseClient({
    branch: 'main',
    apiKey: process.env.API_KEY,
    databaseURL: process.env.XATA_DATABASE_URL
  });

   const page = await xata.db.products
     .select(["*"])
     .getAll()
  console.log(page.records)
  return {
    props: {
      products: page 
    }
  }
}

In the snippet above, we imported BaseClient from @xata.io/client. We used this in our getServerSideProps() function to initialise the Xata Client. To successfully initialise our Xata client we need to have gotten our credentials from Xata and store them in our .env file.

Now that we are successfully fetching our product data from Xata, it only makes sense to display them on the homepage for users to see. To do that, let’s create a components/products.jsx file and add the following:

//components/products.jsx

import Link from "next/link"

const Products = ({ products }) => {
  return (
    <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-2 justify-items-center"">
      {
        products && products.map((prod, index) => (
              <div className="relative w-36 md:w-52 bg-white rounded-md border border-gray-200 shadow-md m-3" key={index}>
                  <div className="">
                      <Link href={`/product/${prod.id}`} className="">
                        <img className='object-cover w-36 md:w-52 h-48' src={prod.imageUrl} alt="" />
                      </Link>
                  </div>
                  <div className="card-info py-2 px-2">
                      <Link href={`/product/${prod.id}`}>
                          <h3>{prod.title}</h3>
                            <p>
                              <b>₦{prod.price}</b> <br />
                            </p>
                      </Link>
                  </div>
                ))
            }
      </div>
    )
}
export default Products

Here, we are mapping through our products and tracking the product details; hence we set product.title for the product name, product.price for the product price, and product.imageUrl for product images.

Next, let’s add the components/products.jsx file to our index.jsx page:


    //index.jsx

    //...

    export default function Home({ products }) {
      return (
        <div className="">
          <main>
            <div id='products' className="">
              <h1 className="text-3xl font-semibold text-center py-10">Products</h1>
              <Products products={products} />
            </div>
          </main>
        </div>
      )
    }

    //getServerSideProps function here

Here, we are exporting a Home page function with a prop of products.

With that, if we reload the homepage on the browser, we should now see our products from Xata render for users to see.

Adding Dynamic Product details

Now that we have our products displayed, we want to implement dynamic pages so that when we click on a product, we open a product details page where you can see more information about the product.

To do that, we’ll follow the standard Next.js approach of using getStaticPaths to generate the dynamic paths and build the pages on demand with our data. We’ll use the Cloudinary Product Gallery widget to display more images of the products. Create a pages/product/[id].jsx file and add the following snippet:


// product/[id].jsx

import { BaseClient } from '@xata.io/client';

export default function product() {
   return (
     // Cloudinary product widget goes here 
   )
}
export default product;

export async function getStaticPaths() {
    const xata = new BaseClient({
        branch: 'main',
        apiKey: process.env.API_KEY,
        databaseURL: process.env.XATA_DATABASE_URL
    });

    const page = await xata.db.products
        .select(["*"]).getAll()
    const products = page
    const paths =
        products &&
        products.map((prod) => ({
            params: { id: prod.id }
        }));
    return {
        paths: paths,
        fallback: false
    };
}

Here, we export the getStaticPath() function to make requests to our Xata database and generate all our products via the paths we’ve specified. Then, we loop through the products and assigned id to params.id to match the product ID.

Next, we will update the file and pass the paths we want to generate to the getStaticProps() function and then pass the generated product to our homepage:


// product/[id].jsx

//...

export async function getStaticProps({ params }) {
    const xata = new BaseClient({
        branch: 'main',
        apiKey: process.env.API_KEY,
        databaseURL: process.env.XATA_DATABASE_URL
    });

    const page = await xata.db.products
        .select(["*"])
        .getAll()
    const products = page
    const product =
        products && products.filter((prod) => params.id === prod.id);
    return {
        props: {
            product
        }
    };
}

We can pass the generated product to our IndexPage() component for rendering. However, we don’t just want to render it. We want to use the Cloudinary Product Gallery Widget to display all the different images of the product.

Setting up Cloudinary Product Gallery Widget

The Cloudinary gallery widget relies on the Client-side asset lists feature to retrieve the list of images (or videos) with specified tags. To ensure that this feature is available on your Cloudinary account, you must enable the Resource list option. By default, the list delivery type is restricted. To enable it, open the Security settings in your console and clear the Resource list item under Restricted media types.

Instantiate Gallery Widget

To instantiate the gallery widget, we will use Next’s Custom Document to update the <html> tags used to render a Page.

To override the default Document, create the file pages/_document.js and add the following:


//_document.jsx

import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                    <script
                      src="https://productgallery.cloudinary.com/all.js"
                        type="text/javascript"
                        strategy="beforeInteractive"
                    ></script>
                </body>
            </Html>
        );
    }
}
export default MyDocument;

The snippet above is the default Document added by Next.js that allows custom attributes as props. We’re using it to embed our JavaScript file, incorporating all the product gallery functionality.

Next, update your products/[id].jsx file to match the following snippet:


//products/[id].jsx

const Product = ({ product }) => {
    useEffect(() => {
        const productGallery = cloudinary.galleryWidget(
            {
                container: "#gallery",
                cloudName: "cloudName",
                mediaAssets: [{ tag: `${product[0].tags}`, mediaType: "image" }]
            },
            []
        );
        productGallery.render();
    });
    return (
        <div className='relative mx-auto'>
            <div className="flex flex-col md:w-6/6 p-8 md:flex-row">
                <div className="md:w-4/6 md:h-96 px-5">
                    <div className='' id="gallery"></div>
                </div>
                <div className="price md:w-2/6">
                    <h3 className='text-3xl font-semibold'>{product[0].title}</h3>
                    <p className='text-lg'>
                        {product[0].desc}
                    </p>
                    <p>
                       <b>₦{product[0].price}</b> <br />
                    </p>
                </div>
            </div>
        </div>
    );
};
export default Product;

Here, we initialize the Product Gallery Widget with the cloudinary.galleryWidget() method call and pass the initialization options, including the Cloud name and the tags of the media assets we wish to retrieve. We also specify a key named container as the div element where the gallery will be rendered.

With these, we can now view the individual product and its variants. The final result will look like the GIF shown below.

The live site is hosted on Netlify; you can view the site here.

Conclusion

In this tutorial, we went over querying e-commerce products from Xata and rendering multiple product variant images in a product display page using the Cloudinary Product Gallery Widget. We rendered only images. However, the widget can also render videos, 360 spin sets and 3D models, which you can read more about in the Cloudinary guide. With all these, your application guarantees a seamless experience that speaks much more than a static image.

DEV Community: Johnpaul Eze

Getting started with nuxt content - a simple blog page

What is Nuxt Content?

Getting Started

Project Setup

View Dynamic Blog Post Page

Blog Search

Conclusion

Unleashing the Power of Slots in Vue.js

What are slots

Types of slots

Overview of slots

Default slots

Named Slots

Reusability with slots

Conclusion

Top 10 html elements to use in 2023

Translate

Map

Draggable

Capture

Spellcheck

Enabling Spell Check in a HTML Form

Disabling Spell Check in a HTML Form

Accept

Download

itemscope

itemtype

Dropzone

Conclusion:

Resources:

Drag and Drop Image uploader using React-dropzone and Cloudinary

Modern e-commerce with Xata and Cloudinary

Xata

Cloudinary

Next.js

What we will build

Prerequisites

Contents

Getting started Xata

Creating a Xata Database

Creating Tables

Working with Our Data

Adding Xata to our Application

Fetching Products from Xata

Adding Dynamic Product details

Setting up Cloudinary Product Gallery Widget

Instantiate Gallery Widget

Conclusion

Resources you may find helpful: