How to Make a Simple Vue Custom Select Component

How to Make a Simple Vue Custom Select Component

Creating a custom select tag is with your own styling is notoriously difficult. Sometimes it’s impossible without building your own from scratch using a combination of styled divs and custom JavaScript. In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In … Read more How to Make a Simple Vue Custom Select Component

Running Python in the Browser with Web Assembly

Running Python in the Browser with WASM and Web Workers

We’ve been wanting to expand Qvault’s course curriculum, and one of the most requested programming languages has been Python. Because our courses allow students to write and execute code right in the web browser, we decided to look into existing projects that allow a Python interpreter to run in the browser using Web Assembly. We … Read more Running Python in the Browser with Web Assembly

Running Go in the Browser with WASM and Web Workers

Running Go in the Browser with WASM and Web Workers

We’ve recently made big changes to how we execute Go in the browser on Qvault and want to explain the enhancements. Web Workers are the reason we’ve been able to solve some of the serious browser-related coding problems that were holding us back. Consider this article a sequel to Running Go in the Browser with … Read more Running Go in the Browser with WASM and Web Workers

Creating a Custom Tooltip Component in Vue

creating a custom tooltip component in vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time. For that reason, we are going to build a … Read more Creating a Custom Tooltip Component in Vue

HLS Video Streaming with Node.JS – A Tutorial

Video Streamed in Node JS

The goal of this tutorial will be to build a robust video (or music) streaming API using Node JS. Don’t worry, its surprisingly easy since we will be utilizing a modern protocol, HTTP Live Streaming, or HLS. Why use HLS for video streaming? HLS allows us to serve large media files as many smaller files. … Read more HLS Video Streaming with Node.JS – A Tutorial

How to Create a Custom Toggle Switch Component in Vue.js

vue toggle switch component

Custom toggle switches are a pain to code from scratch. So many lines for such a simple UI widget! In this quick tutorial, we will learn how to build a toggle switch in Vue.js, and it will be a fully encapsulated component! The component we are building is used currently on Qvault’s login page. Go … Read more How to Create a Custom Toggle Switch Component in Vue.js

Vue History Mode – Support Legacy Hash URLs

history in library busts

When we first launched the Qvault single-page-app, we were using Vue Router’s default hash routing. Hash routing looks ugly to the end-user, and when you want to be able to share parts of your app via direct link those hashes can get really annoying. We have since moved to the newer HTML5 History Mode which … Read more Vue History Mode – Support Legacy Hash URLs

How to Rerender a Vue Route When Path Parameters Change

Paint over and rerender the wall

In single-page apps that use the Vue Router, it is common to create a path parameter that changes the behavior of a route. A common problem occurs when a user alters the path manually in the address bar. Manually changing the URL does not rerender the view! This can cause unexpected behavior because mounted() hooks … Read more How to Rerender a Vue Route When Path Parameters Change

Announcing a “(Very) Basic Intro to Coding”

Basic Intro to Coding Course

Qvault Classroom – our new gamified learning platform – just launched its first free coding course! This one is short, sweet, and to the point. We created a thirty-exercise, two-module course that caters to students who have never seen a single line of code before. That’s right, this is a code-in-the-browser course for absolute beginners. … Read more Announcing a “(Very) Basic Intro to Coding”

Simple Setup – Vue Linting in VS Code

eslint vscode

I’m a gopher by nature, so I expect consistent styling and linting in my codebases. More importantly though, I don’t like to think about styling. I like to type haphazardly and then have my editor apply styling automatically on save (ctrl+s, cmd+s). If you are the same way, hopefully this will help you in your … Read more Simple Setup – Vue Linting in VS Code