Third-party modules from deno.land/x - Mini Project: Build & Apply

Using Third-party Modules from deno.land/x

📖 Scenario: You are building a simple Deno script that fetches and displays the current date and time in a friendly format. Instead of writing all the date formatting code yourself, you will use a third-party module from deno.land/x to help format the date.

🎯 Goal: Learn how to import and use a third-party module from deno.land/x in a Deno script to format and display the current date and time.

📋 What You'll Learn

Import a third-party module from deno.land/x using a URL

Create a variable to hold the current date and time

Use the imported module's function to format the date

Print the formatted date to the console

💡 Why This Matters

🌍 Real World

Developers often use third-party modules to save time and add features without writing everything from scratch. Deno makes it easy to import modules directly from URLs.

💼 Career

Knowing how to use third-party modules is essential for modern JavaScript and TypeScript development, especially with Deno, which relies on URL imports instead of package managers.

1

Create a variable for the current date and time

Create a variable called now and set it to the current date and time using new Date().

Deno

const now = new Date()
// Your code here

Hint

Use new Date() to get the current date and time.

2

Import the third-party module from deno.land/x

Import the format function from the URL https://deno.land/x/date_fns@v2.29.3/format/index.ts.

Deno

import { format } from "https://deno.land/x/date_fns@v2.29.3/format/index.ts"
const now = new Date()
// Your code here

Hint

Use the import statement with the exact URL to get the format function.

3

Format the current date using the imported function

Create a variable called formattedDate and set it to the result of calling format(now, "yyyy-MM-dd HH:mm:ss").

Deno

import { format } from "https://deno.land/x/date_fns@v2.29.3/format/index.ts"

const now = new Date()
const formattedDate = format(now, "yyyy-MM-dd HH:mm:ss")
// Your code here

Hint

Call format with now and the format string "yyyy-MM-dd HH:mm:ss".

4

Print the formatted date to the console

Add a line to print formattedDate to the console using console.log(formattedDate).

Deno

import { format } from "https://deno.land/x/date_fns@v2.29.3/format/index.ts"

const now = new Date()
const formattedDate = format(now, "yyyy-MM-dd HH:mm:ss")
console.log(formattedDate)  // Your code here

Hint

Use console.log to show the formatted date on the screen.

Practice

1. What is the main reason to use third-party modules from deno.land/x in your Deno projects?

easy

A. To add useful features without writing them from scratch

B. To make your code run slower

C. To avoid using any external code

D. To only use unstable versions of libraries

Solution

1. Step 1: Understand the purpose of third-party modules

   Third-party modules provide ready-made features that save time and effort.

2. Step 2: Identify the benefit in the options

   To add useful features without writing them from scratch correctly states that these modules add useful features without rewriting code.

3. Final Answer:

   To add useful features without writing them from scratch -> Option A

4. Quick Check:

   Third-party modules = add features fast [OK]

Hint: Third-party modules save time by adding features fast [OK]

Common Mistakes:

• Thinking third-party modules slow down code
• Believing you must avoid external code
• Assuming modules are always unstable

2. Which of the following is the correct way to import a third-party module from deno.land/x with a specific version?

easy

A. import { serve } from "https://deno.land/x/http/mod.ts";

B. import { serve } from "https://deno.land/x/http@0.1.0/mod.ts";

C. import { serve } from "https://deno.land/x/http@latest/mod.ts";

D. import { serve } from "https://deno.land/x/http@0/mod.ts";

Solution

1. Step 1: Check the import URL format for versioning

   The correct format includes the module name, @version, and path.

2. Step 2: Identify the option with exact version

   import { serve } from "https://deno.land/x/http@0.1.0/mod.ts"; uses @0.1.0 which is a specific version, ensuring stability.

3. Final Answer:

   import { serve } from "https://deno.land/x/http@0.1.0/mod.ts"; -> Option B

4. Quick Check:

   Use exact version in URL = import { serve } from "https://deno.land/x/http@0.1.0/mod.ts"; [OK]

Hint: Always include @version in import URL for stability [OK]

Common Mistakes:

• Omitting the version number
• Using 'latest' which is unstable
• Using incomplete or wrong version format

3. What will be the output of this Deno code snippet using a third-party module from deno.land/x?

import { serve } from "https://deno.land/x/http@0.1.0/mod.ts";

serve(() => new Response("Hello Deno!"));

Options:

medium

A. Throws a syntax error due to missing parentheses

B. Prints 'Hello Deno!' to the console

C. Starts an HTTP server responding with 'Hello Deno!'

D. Does nothing because serve is not a function

Solution

1. Step 1: Understand the serve function from the module

   The serve function starts an HTTP server that responds to requests.

2. Step 2: Analyze the code behavior

   The callback returns a Response with 'Hello Deno!', so the server replies with that text.

3. Final Answer:

   Starts an HTTP server responding with 'Hello Deno!' -> Option C

4. Quick Check:

   serve() starts server = Starts an HTTP server responding with 'Hello Deno!' [OK]

Hint: serve() starts server responding with callback output [OK]

Common Mistakes:

• Confusing serve with console.log
• Expecting immediate print instead of server response
• Assuming serve is not a function

4. Identify the error in this import statement from deno.land/x:

import { parse } from "https://deno.land/x/flags/mod.ts";

Options:

medium

A. URL should end with .js instead of .ts

B. Incorrect module name 'flags'

C. Using curly braces instead of default import

D. Missing version number in the URL

Solution

1. Step 1: Check the import URL format for third-party modules

   deno.land/x requires specifying exact versions for stability.

2. Step 2: Identify the missing version

   The URL lacks @version, which can cause runtime errors or unexpected behavior.

3. Final Answer:

   Missing version number in the URL -> Option D

4. Quick Check:

   Always include @version in import URL [OK]

Hint: Always specify @version in import URLs to avoid errors [OK]

Common Mistakes:

• Ignoring version number requirement
• Thinking .ts extension is wrong
• Confusing named and default imports

5. You want to use the oak web framework from deno.land/x in your project. Which of these import statements correctly ensures you use version 12.5.0 and can access the Router class?

hard

A. import { Router } from "https://deno.land/x/oak@12.5.0/mod.ts";

B. import Router from "https://deno.land/x/oak@latest/router.ts";

C. import { Router } from "https://deno.land/x/oak/router.ts";

D. import { Router } from "https://deno.land/x/oak@12/router.ts";

Solution

1. Step 1: Confirm the correct version format

   Version numbers must be exact, like @12.5.0, not partial or 'latest'.

2. Step 2: Check the import path and named import

   Router is a named export from mod.ts in oak, so import { Router } from mod.ts is correct.

3. Final Answer:

   import { Router } from "https://deno.land/x/oak@12.5.0/mod.ts"; -> Option A

4. Quick Check:

   Exact version + named import from mod.ts = import { Router } from "https://deno.land/x/oak@12.5.0/mod.ts"; [OK]

Hint: Use exact version and import from mod.ts for oak Router [OK]

Common Mistakes:

• Using 'latest' instead of exact version
• Omitting version number
• Importing default instead of named export