Third-party modules from deno.land/x - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the "oak" module from deno.land/x.

Deno

import { Application } from "https://deno.land/x/oak@[1]/mod.ts";

Drag options to blanks, or click blank then click option'

Av10.6.0

Bv8.0.0

Cv12.5.0

Dv11.1.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using an incorrect version string without the 'v' prefix.

Choosing an outdated version that lacks needed features.

The correct version to import the oak module is v12.5.0. This ensures compatibility with the latest features.

2fill in blank

medium

Complete the code to create a new Oak application instance.

Deno

const app = new [1]();

Drag options to blanks, or click blank then click option'

AServer

BApplication

CContext

DRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Server' which is not part of Oak's API.

Confusing Router with Application.

In Oak, the main app instance is created with new Application().

3fill in blank

hard

Fix the error in the import statement to correctly import the Router from oak.

Deno

import { [1] } from "https://deno.land/x/oak@v12.5.0/mod.ts";

Drag options to blanks, or click blank then click option'

Aroute

Brouter

CRouters

DRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'router' which is undefined.

Adding an 's' to make 'Routers' which does not exist.

The correct export name is Router with uppercase R.

4fill in blank

hard

Fill both blanks to create a simple Oak route that responds with 'Hello World'.

Deno

router.[1]("/", (ctx) => {
  ctx.response.[2] = "Hello World";
});

Drag options to blanks, or click blank then click option'

Aget

Bpost

Cbody

Dstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'get' for a simple fetch route.

Setting 'status' instead of 'body' for the response content.

The method to handle GET requests is get, and to set the response body we assign to ctx.response.body.

5fill in blank

hard

Fill all three blanks to start the Oak application listening on port 8000 and log a message.

Deno

app.[1](8000);
console.[2]("Server running on port", [3]);

Drag options to blanks, or click blank then click option'

Alisten

Blog

C8000

DlistenAndServe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'listenAndServe' which is not part of Oak's Application.

Using 'console.error' instead of 'console.log'.

Use app.listen(8000) to start the server, and console.log to print the message with the port number.

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