Hello! My name is Susan and I make clear, to-the-point coding videos and guides.

Request a custom video...

Learn more about my background and experience at susanbuck.net.

General inquiries: mail@codewithsusan.com

Get notified when I post new videos by subscribing on YouTube Code with Susan.

Videos & Guides

Filter by: Show all Anaconda Apache Command Line Composer DaVinci Resolve Database Email Herd Laravel MariaDB MySQL Nginx PHP Photoshop PsychoPy Python SSH Server VSCode Vue.js YouTube API jsPsych
DevTools & Wrap-up (#15) - Discussion of Vue DevTools and resources to check out after completing this series.
Composition API (#14) - Learn how to work with Vue.js’s Composition API which allows you to organize your Vue instances by an applications features.
Single File Components (#13) - In Vue.js, Single File Components allow us to organize together all the JavaScript, HTML, and CSS of a specific entity or component of an application into one file. Within the JavaScript, you will define all the Vue options (data, computed properties, methods, watchers, etc.) necessary for that component, and each component will be set up as its own Vue instance.
Working with Vite and Vue (#12) - In Part 11 of this series, we set up a new Vue application using the Vite build system. Now, let’s take a tour of this application so we can understand how we’ll customize it and integrate our existing FlashWord functionality.
Vite Build System (#11) - Let’s take things up a notch by setting up a Vue project using the Vite build system. This will have several benefits including Hot Module Replacement, the ability to work with Vue SFC (Single File Components) and more.
Building FlashWord (#10) - In this part of the series we’ll pull together all the skills we’ve covered so far into building an actual iteration of our FlashWord game.
Computed Properties & Watchers (#9) - In this guide we’ll learn about Vue’s Computed Properties which allow us to compose new data derived from other data. Additionally, we’ll learn about Watchers which allow us to define functions that watch for changes to existing data properties. Finally, we’ll discuss use cases for Computed Properties, Watchers, and Methods.
Form Input Binding (#8) - Earlier in this series we saw how the v-model directive can be used to create a two way binding between a data property and a text input. In this guide, we’ll dig deeper to learn how v-model can be used on other form elements including checkboxes, radios, dropdown, and textareas.
Attribute Binding (#7) - Dynamically set HTML attributes in Vue.js using the v-bind directive.
List Rendering (#5) - Let’s look at rendering lists of values using Vue’s v-for directive. When working with v-for, you can iterate through arrays, objects, numbers, and/or strings.
Conditional Rendering (#4) - Run through of Vue’s conditional rendering tools including v-if, v-else-if, v-else, and v-show.
Behind the Scenes (#3) - Before we dig further into working with Vue.js, let’s pause to highlight a couple of key points that are helpful to understand when working with Vue.
The Basics (#2) - In Part 1 of this series, we learned what Vue.js is and why you’d want to use it. Now let’s start with a simple example that will allow us to sample some of Vue’s key features. Later in this series, we‘ll dig deeper into each feature so consider this a broad introduction to start.
Introduction (#1) - In this series, we’re going to learn about the JavaScript framework, Vue.js. To guide our learning, we’re going to build a small application called FlashWord, a flash card game used to practice vocabulary of another language. This series will discuss both Vue’s Options API and Composition API, with a focus on the latter. (If you have no idea what this means, no worries, it will make sense later.)
Event Handling (#6) - Run through of event handling in Vue using the v-on directive. Covers inline handlers, method handlers, event arguments, modifiers, and shorthand syntax.