Deno Tutorial #4 - 3rd Party Modules

Net Ninja · Beginner ·🌐 Frontend Engineering ·6y ago

Key Takeaways

Uses 3rd party modules in a Deno application

Full Transcript

all right then gang so we've seen now how to use the standard libra here and the different modules in dino but there's also many more modules which are not part of the standard library third-party ones and you can find those over here by clicking on third party modules now there's a lot of different modules for many different things here for manipulating dates for terminal colors for api frameworks etc we're going to look at a couple of them in this lesson now first up we're going to look at one called denon or denon and this right here is for dino a bit like what nodemon was for node js so it watches all of our files and it restarts the server to pick up changes to our files when we make them so we don't have to keep typing dino run sandbox.ts with all those different flags as well every time we make a change to our code it's going to automatically pick up that change and restart the server for us so let's go down here and see how to use it or install it rather so it's this big long command right here so let me grab that and come over to the terminal now in our case we're not actually importing it into a file like we did with other modules before we're installing something onto our computer so we just need to run this down in the terminal so i'm going to cancel out of the server process and clear this terminal then i'm just going to paste this in and we can see right here this install command so this is installing this package right here okay now you can see we have allow read allow run and allow right and also we have this unstable flag which means that this package is still unstable so it might not always work as you expect it to and there might be some changes but nevertheless for this tutorial we'll just install it and see how it works so that's just going to download the required files and at the end of this we can now run dnon or denon commands so instead of running dno run and then the file we just say denon and then run and then the file we want to run and we also have to pass the flags so in our case we want to use the network so we need allow net so hyphen hyphen allow hyphen net then the name of the file which is sandbox dot js press enter this is going to do the same thing as before oops except it can't find sandbox.js and that's because stupidly i've used the js extension not the ts1 so let's just do that again so dot ts and now it runs this file the same way as when we said dino run but this time now when we make a change we don't have to cancel out the process and restart the server by re-running the file it's going to watch our file and it's going to automatically restart the server whenever we make a change so if i make a change now for example by saying console.log and then saying down here request made like so if i save watch what happens down here save it and it detects that change and it restarts the file for us okay so it picks up on that change and now if i go over here and refresh then we're gonna see request made so this is working without us having to cancel out the process and re-run the file which is pretty awesome so let's try that again hello again ninjas and save it and refresh over here and we should see hello again ninjas so that's a nice little third-party package we can use to automatically restart or rerun our files when we make changes and then save them okay then so next up we're going to look at another third-party module which can be this time added to a specific project instead of just installed onto our computer and the module we're going to look at is called case so this right here this module basically gives us utility methods to change the casings of strings and if we scroll down here we can see some examples of the different types of casings we can use in the available methods so we can make something camelcase a constant case dot case etc so let's first of all import this into our project i'm going to grab this and i'm going to comment out all of this stuff for now and paste this input down here now instead of just using camelcase i'm going to use a few different methods from here which i'm going to paste in and i got these from my repo so camel case param case pascal case and snake case and let's take a look at how these work with a string so first of all create a string and i'm going to call it text if i can spell it and inside here i'll say hello again ninjas very original so now i'm going to use each one of these in turn and i'm going to store the result in a different variable then at the end we'll log all of those different variables out so for example i'm going to say const camel and set that equal to camel case and we're going to pass in the string text now i'm going to do the same thing for each one of these different methods so let's say const param is equal to param case and pass in the text and then after that we'll do pascal case so const pascal and set that equal to pascal case and pass in the text and then finally we need snake case so we'll say const snake is equal to snake case and pass in the text now finally i just want to output each one of these to the console so let me say console.log and we'll output first of all camel then param then pascal and then snake alright so if we run this it's going to import this for us so that we can use these methods inside this file and then hopefully all of this will work fingers crossed so let me come over here and i'm going to cancel out the process in fact i don't need to because we're still using dnon and we can in fact see that even when we save this it re-ran the file and we can see all of those different variables output right here so this is camelcase which looks good this is the param case where we have hyphens instead of spaces and then after that we have pascal which is this a bit like camelcase but it starts with a capital letter instead of a lowercase letter and then finally snake case which uses underscores instead of spaces awesome so there's also many other third-party modules that we can use as well now one of them is called abc which is a dino framework for creating an api really easily a bit like express for node so i'm going to dive into that and start building an api in the next video

Original Description

Hey gang, in this deno tutorial we'll take a look at a few of te 3rd-part modules we have. --- Chapters --- 0.00 - denon 3:42 - the 'case' module 🐱‍👤🐱‍👤 JOIN THE GANG - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join ---------------------------------------- 🐱‍💻 🐱‍💻 My Udemy Courses: + Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript + Vue JS & Firebase - http://www.thenetninja.co.uk/udemy/vue-and-firebase + D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase 🐱‍💻 🐱‍💻 Course Files: https://github.com/iamshaunjp/deno-jumpstart 🐱‍💻 🐱‍💻 Other Related Free Courses: + Node.js Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp + TypeScript tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI 🐱‍💻 🐱‍💻 Deno links + install guide - https://deno.land/#installation + docs - https://deno.land/manual + chocolatey - https://chocolatey.org/install + std library - https://deno.land/std
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Net Ninja · Net Ninja · 0 of 60

← Previous Next →
1 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

Related Reads

📰
Build It HTML-First: Why a Plain Web Form Beat a React Rewrite
Learn how a utility company's decision to rewrite a React application in plain HTML resulted in a doubling of users, highlighting the benefits of progressive enhancement
Dev.to · Arthur
📰
Starting the Frontend for a Full-Stack E-commerce Store (Auth Store, Axios, and Public vs. Protected Routing)
Learn to set up the frontend for a full-stack e-commerce store using Auth Store, Axios, and public vs. protected routing
Dev.to · Chinwuba
📰
Practice Frontend Typeahead Interviews With AbortController and ARIA
Improve your frontend interview skills by practicing typeahead searches with AbortController and ARIA, learning to handle debounce, cancellation, keyboard navigation, and accessibility features.
Dev.to · Karuha
📰
Building Maintainable Frontend Systems
Learn to build maintainable frontend systems for long-term success by following practical guidelines and best practices
Dev.to · Ufomadu Nnaemeka
Up next
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →