top of page
Green%20and%20Black%20Gaming%20Youtube%2

INTRODUCING
#THEFUTUREISWRITTENINCODE

Welcome to the official website of #TheFutureIsWrittenInCode

This program provides technology training to support individuals looking to up-skill for better employment opportunities or looking for entry level job opportunities in the innovation economy.

​

Take a look at the videos below, and browse through the new and exciting content. The videos are constantly being updated, so be sure to check back for more!

Vue JS Essentials: A Beginners Series on Pinia, Vitest, and Supabase #2  Pinia, Tests And Mocking
41:10
Aaron Saunders

Vue JS Essentials: A Beginners Series on Pinia, Vitest, and Supabase #2 Pinia, Tests And Mocking

Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase. Part 2, Managing Page And App State with Pinia... More Tests Including Mocking #pinia #vue #vitest #supabase In this video series, we'll show you how to build a multistep wizard with form validation and database persistence using Vue JS and related technologies. We'll start with the basics of Vue JS and add Pinia for state management, Vue-use-form for form validation, and Vitest for testing. The second video specifically focuses on demonstrating how to use Pinia for managing page state, user input for each of the steps in a wizard, and application state. Pinia is a state management library for Vue.js. In addition to that, the video will also showcase how to write tests using the Vitest library for both the UI and the Pinia store. It will cover the process of mocking the Pinia store and demonstrate how to write unit tests for it. By the end of the video, you will have a clear understanding of how to use Pinia for managing state in your Vue.js applications and how to write tests for it using Vitest. By the end of this video series, you'll have a solid foundation for building a multistep wizard with form validation and database persistence in Vue JS, Pinia, Vue-use-form, and Vitest. Vuejs - The Progressive JavaScript Framework. An approachable, performant, and versatile framework for building web user interfaces. https://vuejs.org/ Pinia -The intuitive store for Vue.js. Type Safe, Extensible, and Modular by design. Forget you are even using a store. https://pinia.vuejs.org/ Vitest - Blazing Fast Unit Test Framework. A Vite-native unit test framework. It's fast! https://vitest.dev/ vue-use-form - A composition api form validator for vue https://vue-use-form.netlify.app/ šŸ’„ Chapters ------------------------- 00:00 - Intro 01:48 - Adding the Form to the First Page 06:00 - updating store using $patch and move to next step 10:40 - Repeating the process for Second Page 14:00 - Updating the Form Fields from Store Values 16:15 - Displaying Store Content On the Summary Page 17:40 - Testing Form Submit Is Working For Step 1, With Store 28:50 - Testing Form Submit Is Working For Step 2, With Store 32:30 - Testing form interaction with Mocked Pinia store 38:20 - Summary šŸ’„ Social Media ------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders
Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase #1 Getting Started
30:52
Aaron Saunders

Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase #1 Getting Started

Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase. Part 1, getting the basic app and some tests running #pinia #vue #vitest #supabase In this video series, we'll show you how to build a multistep wizard with form validation and database persistence using Vue JS and related technologies. We'll start with the basics of Vue JS and add Pinia for state management, Vue-use-form for form validation, and Vitest for testing. This series will be spread out across multiple videos, but this first video will provide an overview and demo of the solution we're building, as well as cover the setup and configuration of the environment. ### Part Two - https://youtu.be/W-D6h7Jne18 We'll then walk you through building three basic screens for the application, integrating Pinia for state management, and writing a simple test for the application component, as well as a simple test for Pinia. As we continue through the application, we'll create more functionality and write more robust tests. By the end of this video series, you'll have a solid foundation for building a multistep wizard with form validation and database persistence in Vue JS, Pinia, Vue-use-form, and Vitest. Vuejs - The Progressive JavaScript Framework. An approachable, performant, and versatile framework for building web user interfaces. https://vuejs.org/ Pinia -The intuitive store for Vue.js. Type Safe, Extensible, and Modular by design. Forget you are even using a store. https://pinia.vuejs.org/ Vitest - Blazing Fast Unit Test Framework. A Vite-native unit test framework. It's fast! https://vitest.dev/ vue-use-form - A composition api form validator for vue https://vue-use-form.netlify.app/ šŸ’„ Chapters ------------------------- 00:00 - Intro 00:45 - App Demo 02:30 - Setup, Installing NPM Packages 07:12 - Our First Vitest 10:33 - Check Vue App 11:07 - Build Basic Pages For Multi Step Form 13:40 - Managing Wizard Flow with Local State 15:20 - Adding Pinia 23:50 - Our First Pinia Test Using Vitest 28:40 - Vitest UI 30:18 - Summary šŸ’„ Social Media ------------------------- Twitter - https://twitter.com/aaronksaunders Facebook - https://www.facebook.com/ClearlyInnovativeInc Instagram - https://www.instagram.com/aaronksaunders/ Dev.to - https://dev.to/aaronksaunders
React Native Multi-Step Wizard With React Hook Form and Pullstate AND  Ionic Framework Comparisons
16:05
Aaron Saunders

React Native Multi-Step Wizard With React Hook Form and Pullstate AND Ionic Framework Comparisons

Learn To Build Mobile Apps With React Native - Multi-Step Wizard With React Hook Form and Pullstate AND Thoughts on Ionic Framework Comparisons #react #reactnative #mobileapp In this video, I walk through the React Native code I wrote to replicate a multi-step wizard I previously built using Ionic Framework. I also share my thoughts on the debate between React Native and Ionic that's going on online. My goal with the video was to compare the development experience (DX) of the two frameworks, although I might need to write more code to make a definitive judgment. If you're interested in this topic, please leave a comment below. To achieve form validation, I used React Hook Form. Pullstate was used for managing the state between the different pages of the multi-step wizard, and React Native Paper was used for a simple, clean UI. šŸ•‘ Chapters -------------------------- 00:00 - Intro, Visual Comparison of Ionic Framework & React Native 04:15 - Code Walkthrough of React Native Application 14:30 - Summary, Choose What Works For You and Your Team React Native -------------------- - Source Code - https://github.com/aaronksaunders/wizard-react-hook-form-pullstate-react-native Ionic Framework Version --------------------------------------- - Source Code: https://github.com/aaronksaunders/wizard-react-hook-form-pullstate-ionic - Video: https://youtu.be/IK7yVxyzY_8 Links -------- React Hook Form - https://legacy.react-hook-form.com/ Ionic Framework - https://ionicframework.com/ PullState - https://lostpebble.github.io/pullstate/docs/quick-example React Native Paper - https://reactnativepaper.com/ #javascript #mobiledevelopment #mobileapp #ionicframework #capacitor #reactjs #multistepform #formwizard #reactnative #react #pullstate #reacthookform -~-~~-~~~-~~-~- Please watch: "How To Create A Multi-Step Form Wizard With ReactJS , React Hook Form, Pullstate and Ionic Framework" https://www.youtube.com/watch?v=IK7yVxyzY_8 -~-~~-~~~-~~-~-
Home: Videos
Videos Not For You?

If you like to have a combination of video and written content to help you learn and understand technology and coding, the we got you covered.

​

Many of the videos posted here have an accompanying blog post and source code to supplement the video content