Newest
Stay up to date with the lasted content.
Popular topics
Content
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.
videofirebasereactvueauthenticationJustin Brooks • May 23, 2021
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.
videovscodeextensionsJustin Brooks • May 17, 2021
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!
videosoftwareideasJustin Brooks • May 10, 2021
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.
videosoftwaredevelopmentJustin Brooks • May 3, 2021
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-apiJustin Brooks • April 26, 2021
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-apiJustin Brooks • April 19, 2021
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 chainingJustin Brooks • April 15, 2021
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.
videojavascriptshortsJustin Brooks • April 15, 2021
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.
videoreactvueexplainedJustin Brooks • April 12, 2021
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.
videovuereactexplainedJustin Brooks • April 5, 2021
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.
videodevopsgooglefreeJustin Brooks • April 1, 2021
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.
videoJustin Brooks • March 29, 2021
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.
videohtmlimageshortsJustin Brooks • March 25, 2021
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.
videoeslintjavascriptprettierJustin Brooks • March 22, 2021
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.
videotypescriptjavascriptJustin Brooks • March 15, 2021
Vite.js explained in a short
Learn how you can use Vite to speed up your application development in a 1-minute video!
videoviteshortsJustin Brooks • February 28, 2021
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.
videoviteJustin Brooks • February 22, 2021
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.
videovueJustin Brooks • February 15, 2021
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.
videovuemapsJustin Brooks • February 8, 2021
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.
videoreactelectronJustin Brooks • February 1, 2021
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.
videovueelectronJustin Brooks • January 25, 2021
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.
videogithubrepositoriesJustin Brooks • January 19, 2021
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-apiJustin Brooks • January 11, 2021
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
videovuefirebasechatJustin Brooks • January 4, 2021
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.
videovuefirebasecrudJustin Brooks • December 29, 2020
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.
videovuetypescriptauthJustin Brooks • December 21, 2020
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-managmentJustin Brooks • December 14, 2020
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.
videovueionicJustin Brooks • December 8, 2020
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-apiJustin Brooks • November 23, 2020
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.
videovuexvueadvancedJustin Brooks • November 17, 2020
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-apiJustin Brooks • November 9, 2020
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-serverJustin Brooks • November 2, 2020
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.
videovuevuextestingjestJustin Brooks • October 26, 2020
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.
videovuetipstricksJustin Brooks • October 19, 2020
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.
videovueroutertypescriptJustin Brooks • October 12, 2020
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.
videovueperformanceJustin Brooks • October 5, 2020
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
videovuevuextypescriptJustin Brooks • October 5, 2020
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.
videoexpresscookiesJustin Brooks • September 23, 2020
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-apiJustin Brooks • September 18, 2020
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.
videovueprovideinjectJustin Brooks • September 13, 2020
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.
videogitcommitJustin Brooks • September 9, 2020
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.
videovueteleportJustin Brooks • September 5, 2020
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.
videojavascriptproxyreflectJustin Brooks • September 1, 2020
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.
videovuereactivityJustin Brooks • August 29, 2020
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.
videovuelifecycleJustin Brooks • August 25, 2020
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-apiJustin Brooks • August 22, 2020
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-apiJustin Brooks • August 18, 2020
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!
videotypescripttipsJustin Brooks • August 13, 2020