Coding With Justin

VideosCoursesPricing

48 results for ""

10 Github repositories every web developer should know
6:51

10 Github repositories every web developer should know

GitHub is the one-stop-shop for everything related to web development. There are cool projects you probably never hear about, simply because there are just so many repositories available. So today we will be looking at 10 Github Repositories that will greatly enhance your web development skills.

videogithubrepositories

Justin Brooks • January 19, 2021


15 Vue 3 Tips and Tricks

15 Vue 3 Tips and Tricks

Vue has become a popular framework for web development and with the recent changes made in Vue 3, I've decided to create this video where we will be looking at 15 tips and tricks for increasing productivity, maintainability, and scalability when creating Vue apps.

videovuetipstricks

Justin Brooks • October 19, 2020


3 Examples of using Proxy and Reflect API in JavaScript

3 Examples of using Proxy and Reflect API in JavaScript

Not sure what a Proxy is or how to use it in JavaScript? In this video, we take a look at 3 different examples of using a proxy that may be useful in any full-stack application. We also take a look at the Reflect API and how it can help when using the proxy API.

videojavascriptproxyreflect

Justin Brooks • September 1, 2020


3 image attributes you need! #Shorts
0:40

3 image attributes you need! #Shorts

In this video, will look at 3 HTML image attributes you should add to your image tags to improve performance and accessibility. Images are important when creating websites.

videohtmlimageshorts

Justin Brooks • March 25, 2021


3 Key Steps to Building Software Applications
4:19

3 Key Steps to Building Software Applications

Creating a software project can be really intimidating. Well today, I'll show you the 3 key steps developers use when building software applications. These key steps are used from small to large companies and once you get these key points down you won't need tutorials to show you step by step guide on how to build an application.

videosoftwaredevelopment

Justin Brooks • May 3, 2021


3 tips you probably didn't know about TypeScript

3 tips you probably didn't know about TypeScript

In this video, we look at some common typing checks that many users forget when using TypeScript. These 3 tips, will help you improve your TypeScript code!

videotypescripttips

Justin Brooks • August 13, 2020


5 Fullstack Software Ideas to make money with details included
6:07

5 Fullstack Software Ideas to make money with details included

Building projects help you cement ideas you've learned as well as teach you new tools and concepts. In this video, we look at 5 software ideas that can make you money. I hope you found some useful ideas to help you stay motivated and keep learning!

videosoftwareideas

Justin Brooks • May 10, 2021


5 Ways to Fetch Data from an API in Vue 3 Composition API
6:28

5 Ways to Fetch Data from an API in Vue 3 Composition API

There are many ways to extract data in Vue, so today, we'll look at 5 ways you can fetch data in your application. We will also look at the new Vue 3 suspense API which tackles this problem differently and create our own composable function to maximize reusability.

videovuefetchingcomposition-api

Justin Brooks • April 26, 2021


7 Important Vue 3 Composition and Composable Functions Explained
6:25

7 Important Vue 3 Composition and Composable Functions Explained

Today will look at the 7 most common composition functions in Vue 3. We'll also create our own composable function to maximize reusability throughout our codebase. Prior to Vue 3 developers need to create large complex javascript objects which contained all the state, methods, watchers and computed properties.

videovuecomposition-api

Justin Brooks • April 19, 2021


8 VSCode Extensions for Fullstack Developers
5:55

8 VSCode Extensions for Fullstack Developers

Visual studio code is an extendable editor for building and debugging modern web applications. It's minimal but yet can feel like a featured-packed IDE with the right extensions. Today we'll look at the top extensions that help me in my day-to-day tasks as a full-stack developer.

videovscodeextensions

Justin Brooks • May 17, 2021


Advanced Vuex with Modules, and Actions in Vue 3

Advanced Vuex with Modules, and Actions in Vue 3

Knowing how Vuex works is important but knowing when and how to store state in Vuex is equally as important. If you’re working on a large-scale Vue app, you may encounter situations where you need the same data at two completely different places in your application. This is the point at which a centralized state management tool like Vuex oftentimes makes a lot of sense.

videovuexvueadvanced

Justin Brooks • November 17, 2020


Building a Realtime Chat App with Vue 3 and Firebase in 7 minutes
8:01

Building a Realtime Chat App with Vue 3 and Firebase in 7 minutes

Today we will be combining the power of Firebase and Vue 3 to build a real-time chat application. Most importantly we will be looking at using firebase with Vue 3 composition hooks, setting up firebase authentication with google, and reading and writing to a firebase store in realtime

videovuefirebasechat

Justin Brooks • January 4, 2021


Building a Web app with Vue Router, Typescript and Vue Composition API

Building a Web app with Vue Router, Typescript and Vue Composition API

The Vue 3 Composition API has open new possibilities for accessing the full power of the Vue Router. Today we will be looking at using Vue Router with the composition API, to create a cat facts webpage with full typescript support. By the end of this video, you will hopefully have a full understanding of how to successfully use the newly added useRoute and useRouter composition functions. We'll also look at some changes between Vue 2 and Vue 3 and some more advanced features like lazyloaded routes, dynamic segments, navigation guards, and adding a 404 error page.

videovueroutertypescript

Justin Brooks • October 12, 2020


Building Traversy Media Hangman game in Vue 3 using the Composition API

Building Traversy Media Hangman game in Vue 3 using the Composition API

In this video, we will be converting a hangman project created by Brad Tranvely into a Vue 3 project using the composition API. This project comes from his course called 20 web projects with vanilla javascript and he has also posted a video about converting this project into a modern react app.

videovuehangmancomposition-api

Justin Brooks • September 18, 2020


Creating a Vuex Clone with Vue 3 Composition API
6:30

Creating a Vuex Clone with Vue 3 Composition API

Do we still need Vuex? Vuex is an awesome state management library. It's simple and integrates well with Vue. But the new composition API in Vue 3 exposes the underlying reactivity system and introduces new ways for structuring our applications. The new reactivity system is so powerful that it can be used for centralized state management.

videovuevuexcomposition-api

Justin Brooks • November 23, 2020


Creating a Vuex Todo App with full Typescript Support using Vue 3 Composition API in 5 minutes

Creating a Vuex Todo App with full Typescript Support using Vue 3 Composition API in 5 minutes

Do you still need Vuex in Vue 3? In this video, we will be looking at the changes made to Vuex 4 and then using these concepts to create a todo using Vue 3's composition API with typescript support. The major goal of version 4 is to support the new Composition API introduced in Vue 3 and to simplify the usage of Vuex overall. It is also intended to support a more robust inference for TypeScript. I do feel the new way of typescript support in Vuex is improved but it is verbose and still needs more improvement. We will explore this in detail with a todo app example

videovuevuextypescript

Justin Brooks • October 5, 2020


Dependency Injection in Vue 3 with Provide and Inject

Dependency Injection in Vue 3 with Provide and Inject

In this video, we will be taking a look at avoiding prop drilling by using the provide and inject functions from the Vue 3 Composition API. This is more of an advanced topic so this video assumes you have a basic understanding of the Composition API functions and the fundamentals of reactivity in Vue 3.

videovueprovideinject

Justin Brooks • September 13, 2020


Electron with React - Building a desktop applications with React and Electron
9:46

Electron with React - Building a desktop applications with React and Electron

Today's video is a practical guide for building desktop apps with React and Electron that can run on Windows, Mac, and Linux. We will be building a simple file explorer that allows users to view file sizes, navigate inside directories and apply a simple file search operation. Todo this, we will walk through the process of setting up an electron app with React and look at how electron interactions with the native operating system.

videoreactelectron

Justin Brooks • February 1, 2021


ESLint (and Prettier) Quickstart - Lint your javascipt code the right way
5:22

ESLint (and Prettier) Quickstart - Lint your javascipt code the right way

ESLint is a pluggable Javascript tool that analyses your code to find issues that can lead to bugs or inconsistencies in code health and style. Today, we'll look at setting up a node project with ESLint and integrate it with visual studio code.

videoeslintjavascriptprettier

Justin Brooks • March 22, 2021


Firebase Authentication Tutorial with Private Routes in React and Vue

Firebase Authentication Tutorial with Private Routes in React and Vue

Today we'll create both a React and Vue application where we use firebase authentication with router guards to allow users to sign in with a custom email address. It will have a total of 3 pages, one for signing up, another for logging, and a home page that is only accessible if the user is authenticated.

videofirebasereactvueauthentication

Justin Brooks • May 23, 2021


Fundamentals of Reactivity in Vue 3

Fundamentals of Reactivity in Vue 3

In this video, we learn about the changes made to Vue 3 reactivity system and how to use them with the composition API. We also take a look at the difference between ref, reactivity and custom refs.

videovuereactivity

Justin Brooks • August 29, 2020


Google Maps and Geolocation app using Vue 3 Composition API
8:22

Google Maps and Geolocation app using Vue 3 Composition API

Today we will be building a google maps and geolocation application using Vue 3 with the composition API. We'll create an application that tells the distance between the current position of the user and the location they clicked on the map. By the end of this video, you'll have an understanding of how to use google maps with the Vue 3 and how to interact with it using the composition API. We'll learn about how to get the geolocation of the user as well as rendering an interactive google map.

videovuemaps

Justin Brooks • February 8, 2021


GraphQL Basics in 6 minutes - Creating a Weather API with Apollo Server

GraphQL Basics in 6 minutes - Creating a Weather API with Apollo Server

GraphQL is a powerful open-source query language developed by Facebook. It solves the problem of building good, intuitive, and well-designed APIs. In the last few years, GraphQL has grown in traction and been adopted by many small and large companies.

videographqlapollo-server

Justin Brooks • November 2, 2020


How to get a free google server forever!
0:32

How to get a free google server forever!

New somewhere to host your application? Get a free google server forever to build amazing applications! Perfect for demo websites and scripts.

videodevopsgooglefree

Justin Brooks • April 1, 2021


Introduction and Advantages to Vue 3 Composition API

Introduction and Advantages to Vue 3 Composition API

Why would you want to use the new Vue 3 Composition API? This video aims to explain how and why you may want to use the new composition functions in your next project.

videovuecomposition-api

Justin Brooks • August 18, 2020


Ionic and Vue 3 Basics - Building cross platform apps
6:29

Ionic and Vue 3 Basics - Building cross platform apps

Ionic is a free and open-source component library for building apps that run on iOS, Android, Desktop, and Web. Ionic allows you to write your app once and using javascript and HTML and deploy to any platform. It also comes with many nice UI components, a command-line tool for creating apps as well as various platform integrations.

videovueionic

Justin Brooks • December 8, 2020


Lazy loading components in Vue 3

Lazy loading components in Vue 3

Fast loading speed is essential when creating any web application. A few extra seconds could have a huge impact on the number of users visiting your site. Vue 3 has introduced several new features to help you achieve this easily through the improvements to the async component API and the new Suspense component. In this video, we will be taking a look at using lazying loading components in Vue 3 to speed up your pages load times.

videovueperformance

Justin Brooks • October 5, 2020


Lifecycle Hooks in Vue 3

Lifecycle Hooks in Vue 3

In this video, we take a look at using the Vue lifecycle hooks in Vue 3. We also look at the addition of two new hooks added to the Vue framework. Overall, this video aims to provide an understanding of how to use the lifecycle hooks in Vue 3. Examples of these hooks will be shown in upcoming videos.

videovuelifecycle

Justin Brooks • August 25, 2020


Quasar Framework with Vue 3 Composition API - Building a cross platform note app
12:13

Quasar Framework with Vue 3 Composition API - Building a cross platform note app

Quasar Framework is an open-source Vue JS framework for building apps, with a single codebase, and deploy it on to Mobile, Web, or Desktop. Today we will be using the Quasar Framework with the Vue 3 composition API to create a note-taking app.

video

Justin Brooks • March 29, 2021


Quick Basics of Vue 3 Composition API

Quick Basics of Vue 3 Composition API

This video aims to provide a quick overview of the new Vue 3 composition API. In this video we will create a counter component that uses 5 of the most essential functions in Vue 3, setup, ref, watch, computed and onMounted. In later videos, we will take an in-depth look into how each aspect covered in this video works.

videovuecomposition-api

Justin Brooks • August 22, 2020


Quick HTTP Cookie guide in Web Development with Express

Quick HTTP Cookie guide in Web Development with Express

In this video, we will focus on the technical side of using cookies in your javascript applications. We will look at creating, using, and manipulating cookies in an express server. Typically, it is used to track users' activities, personalization, and session management.

videoexpresscookies

Justin Brooks • September 23, 2020


React explained for Vue developers in 7 mins
7:48

React explained for Vue developers in 7 mins

Using your Vue skills you can learn the basics of React in less than 7 mins. React has become even more similar to Vue and used by many large companies around the world. By the end of this video, we'll convert some Vue components into React components to explain how React works. We'll also look at why so many developers enjoy and use React.

videoreactvueexplained

Justin Brooks • April 12, 2021


State managment in Vue 3 with Typescript - Vuejs Pinia Tutorial / Vuex Killler?
6:59

State managment in Vue 3 with Typescript - Vuejs Pinia Tutorial / Vuex Killler?

Today we will be looking at Pinia, which uses the new reactivity system to build an intuitive and fully typed state management system. We will be creating a shopping cart application from scratch to learn the basics of using Pinia with Vue 3 Composition API and Typescript. This application will allow users to add and remove URLs from a shopping cart store created from Pinia.

videovuepiniastate-managment

Justin Brooks • December 14, 2020


The secret power of JSON stringify
0:47

The secret power of JSON stringify

JSON stringify used every day by many JavaScript developers, but yet many don't know its full power! Let's take a look at the features JSON stringify has to offer.

videojavascriptshorts

Justin Brooks • April 15, 2021


Using Teleport in Vue 3

Using Teleport in Vue 3

In this video, we'll be talking about the new Vue 3 Teleport API. We will take a look at a few examples of using the teleport features to understand how it can help in your application. In the example, we'll be taking text from a component and teleporting it into the div at the end of the HTML body. To do this we will need to wrap our paragraph in the teleport element and use vues composition API to create a reactive toggle.

videovueteleport

Justin Brooks • September 5, 2020


Vite - Next generation web build tools
4:33

Vite - Next generation web build tools

Vite.js, a JavaScript development server that significantly improves the frontend development experience. Most notably, Vite serves your source files over native ES modules which makes it extremely fast. Vite also offers a build command that bundles your code pre-configured to output highly optimized assets for production.

videovite

Justin Brooks • February 22, 2021


Vite.js explained in a short
0:59

Vite.js explained in a short

Learn how you can use Vite to speed up your application development in a 1-minute video!

videoviteshorts

Justin Brooks • February 28, 2021


Vue 3 and Firebase - Build and deploy a CRUD Application with Vue.js and Firebase
7:54

Vue 3 and Firebase - Build and deploy a CRUD Application with Vue.js and Firebase

Today we will be building a Vue 3 application, using firebase as the backend. The app will allow users to create a basic customer records management system, in which a user can perform CRUD operations.

videovuefirebasecrud

Justin Brooks • December 29, 2020


Vue 3 and Vuex Testing for Beginners

Vue 3 and Vuex Testing for Beginners

Testing in Vue 3 provides benefits such as easier refactoring later down the line, quicker debugging, and documentation about your application. Today, we will be creating a Vue 3 app and adding unit tests with jest. We'll do this by using the Vue Test Utils library which is a set of functions to simplify the testing of Vue.js components. It provides methods to mount and interact with Vue components in an isolated manner. We'll also take at a more advanced use case where we will create a mock Vuex store for the component.

videovuevuextestingjest

Justin Brooks • October 26, 2020


Vue 3 for Beginners - Building a tick tac toe game with the Composition API
11:41

Vue 3 for Beginners - Building a tick tac toe game with the Composition API

Learn Vue 3 composition API as a beginner. If you don't know about Vue 3's composition API, today we will be making a tic-tac-toe game to learn the basics. The Composition API in Vue 3 adds a new way to build highly reusable logic and make maintain large codebases a lot easier.

videovuegamecomposition-api

Justin Brooks • January 11, 2021


Vue 3 Typescript Tutorial - Basic user login flow with Typescript and Vue 3
10:53

Vue 3 Typescript Tutorial - Basic user login flow with Typescript and Vue 3

Learn the basics of how to use Vue and Typescript to create an authentication sign form. Today we will be creating a basic user sign-in flow with typescript and Vue 3. We won't be building a backend for this example but we will create some async function to show you how you would call a backend API in your application.

videovuetypescriptauth

Justin Brooks • December 21, 2020


Vue 3 with Electron - Building a desktop applications with Vue and Electron
9:15

Vue 3 with Electron - Building a desktop applications with Vue and Electron

Today's video is a practical guide for building desktop apps with Vue 3 and Electron. We will be building a simple file explorer that allows users to view file sizes, navigate inside directories and apply a simple file search operation. Todo this, we will walk through the process of setting up an electron app with Vue, and look at how electron interactions with the native operating system.

videovueelectron

Justin Brooks • January 25, 2021


Vue explained to React Developers in 6 mins
6:33

Vue explained to React Developers in 6 mins

Using your React.js skills you can learn the basics of Vue in less than 6 mins. Vue has become even more similar to React but still maintains some tricks ups its sleeve. By the end of this video, we'll convert some React components into Vue components to explain how Vue works. We'll also look at why so many developers enjoy and use Vue.

videovuereactexplained

Justin Brooks • April 5, 2021


Vuex Basics in Vue 3 with Composition API in 6 minutes

Vuex Basics in Vue 3 with Composition API in 6 minutes

Today we will be creating a simple counter app from scratch to learn the basics of using Vuex 4 with Vue 3 Composition API. We'll start by taking a look at Vuex concepts like state, getters, and mutations and how to use them within the options API, then we will switch over the compositions API and implement the same functionality. We'll also create some reusable helper functions to make accessing the store in the composition API more readable.

videovuevuexcompoition-api

Justin Brooks • November 9, 2020


Why you should choose TypeScript in 2021
5:03

Why you should choose TypeScript in 2021

Today, we’ll go over the benefits of using Typescript and give 6 reasons why you should choose to use it in your applications. Typescript is a superset of JavaScript that adds static typing and compiles to plain JavaScript. With 87% of developers interested in using or learn TypeScript in their next project, Typescript has quickly become a popular choice in building modern applications.

videotypescriptjavascript

Justin Brooks • March 15, 2021


Why you should choose Vue.js in 2021
5:00

Why you should choose Vue.js in 2021

We will look at 6 reasons why you should choose Vue.js in 2021. Vue.js is a flexible technology that you can use to develop modern applications fast. Vue has seen a large growth as it becomes popular among the web development industry. This is because it offers some nice benefits when compared to other frameworks.

videovue

Justin Brooks • February 15, 2021


Write clean JavaScript code with Optional Chaining
0:33

Write clean JavaScript code with Optional Chaining

Want to learn how to write clean javascript code? Optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. Using optional chaining will make your javascript more readable and less error-prone.

videojavascriptshortsoptional chaining

Justin Brooks • April 15, 2021


Write git commit messages like a PRO with Conventional Commits

Write git commit messages like a PRO with Conventional Commits

Good commit messages are important for maintaining any long-term project. If you follow this guide laid out in this video you can use conventional commits to automatically generate changelog files. It is not only beneficial to the people collaborating on the project but also to yourself. It will help you keep track of all of your commits and know exactly what changes were made during each commit.

videogitcommit

Justin Brooks • September 9, 2020

Coding With Justin

© 2021 Justin Brooks. All rights reserved.