Monthly Archives: January 2021

JavaScript || How To Add & Populate A Dropdown List With An Array Using Vanilla JavaScript

The following is a module with functions which demonstrates how to add and populate a dropdown select list with an array of items using vanilla JavaScript.

The function demonstrated on this page allows to add items from an array into a dropdown list, as well as adding option groups and custom data attributes.


1. Basic Usage

The example below demonstrates the use of ‘Utils.bindDropdown‘ to bind the data in a simple array to a dropdown list.

Sample:


2. Additional Options

The example below demonstrates the use of ‘Utils.bindDropdown‘ to bind the data in an options initialization array to a dropdown list.

In this example, the text and values are specified, as well as custom option groups, the selected option value, and custom data attributes.

You can add any properties you wish to the object, and it will be added to the dropdown list option!

Note: Option groups are not required using this notation, as indicated by the ‘Ungrouped Items’.

Sample:


3. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!


4. More Examples

Below are more examples demonstrating the use of ‘Utils.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

C++ || Circular Array – How To Index Into Array As If It Is Circular Using C++

The following is a module with functions which demonstrates how to index into an array as if it is circular using C++.

This function adjusts a range as circular and ‘wraps around’ the value to become in bounds.


1. Circular Array

The example below demonstrates the use of ‘Utils::circularWrap‘ to index into a vector as if it is circular and adjusts a range as circular so the value become in bounds.

Note: A vector is used in this example, but it is not required.


2. Utils Namespace

The following is the Utils Namespace. Include this in your project to start using!


3. More Examples

Below are more examples demonstrating the use of the ‘Utils‘ Namespace. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

C++ || How To Split & Parse A String Into Tokens With Multiple Delimiters Using C++

The following is a module with functions which demonstrates how to split and parse a string into substring tokens with multiple delimiters using C++.

The function demonstrated on this page parses and splits a string and returns a vector that contains the substring tokens according to the delimiters.

The delimiters can be either a single character or multiple characters. If no delimiting characters are specified, the string is split at whitespace characters.


1. Split – Basic Usage

The example below demonstrates the use of ‘Utils::split‘ to split a string into substring tokens.

In this example, the default delimiter is used to split a string, which is a whitespace.


2. Split – Multiple Delimiters

The example below demonstrates the use of ‘Utils::split‘ to split a string into substring tokens.

In this example, multiple delimiters are used to split a string.


3. Utils Namespace

The following is the Utils Namespace. Include this in your project to start using!


4. More Examples

Below are more examples demonstrating the use of the ‘Utils‘ Namespace. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

C++ || How To Get Distinct & Unique Values In A Vector & Remove Duplicates Using C++

The following is a module with functions which demonstrates how to get distinct and unique values in a vector and remove duplicates using C++.

The function demonstrated on this page is a template, so it should work on vectors of any type.

The function also does not require a sort, it preserves the original order of the vector, uses the equality operator (operator==), and allows for a custom predicate comparison function to determine whether the arguments are equal.


1. Distinct – String Vector

The example below demonstrates the use of ‘Utils::distinct‘ to get the distinct elements from a vector.


2. Distinct – Object Vector

The example below demonstrates the use of ‘Utils::distinct‘ to get the distinct elements from an object vector.

The object in this example overloads the equality operator to determine whether arguments are equal.


3. Distinct – Object Vector Predicate

The example below demonstrates the use of ‘Utils::distinct‘ to get the distinct elements from an object vector.

In this example, a predicate is used to determine whether arguments are equal.


4. Utils Namespace

The following is the Utils Namespace. Include this in your project to start using!


5. More Examples

Below are more examples demonstrating the use of the ‘Utils‘ Namespace. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Vue || How To Build & Deploy A Vue Site/App For Production Under A Web Hosting Environment

The following page demonstrates how to build and deploy a Vue site/app for production under a shared hosting environment.

Note: This page assumes you already have a domain and hosting plan setup. It also assumes your project is completed and ready to be deployed. For an overview on how to get started with Vue, visit the official documentation.

Contents

1. Build The Project
2. Deploy Site
3. Deploy Site - Subfolder
4. Server Configuration - HTML5 History Mode


1. Build The Project

The first step is to build the project for production. This can be achieved by a simple command.

First, navigate to the project directory in the terminal, then type one of the following commands depending on your package manager.

NPM:


npm run build

Yarn:


yarn build

Once this process is complete, in your project directory you will see a new folder named ‘dist‘. This dist folder will contain the files that are needed to upload to the server.

The ‘dist‘ folder should contain something like the following:


• css - [folder]
• img - [folder]
• js - [folder]
• favicon.ico - [file]
• index.html - [file]


2. Deploy Site

The files generated in Step 1 contained in the ‘dist‘ folder can be uploaded to your server using any method familiar to you.

On your server, the public_html directory is typically where you would place the files, which is the document root folder for your primary domain name.

Once the files are uploaded, your site should be live!


3. Deploy Site – Subfolder

If you wish to deploy your site into a subfolder (i.e: site.com/your-subfolder/), this can be done by making only a few changes!

Before you build your project (as highlighted in Step 1), it needs to be updated to point to the subfolder as the ‘base’ path. This is configured in the vue.config.js file.

If this file doesn’t already exist in your project, you can create it. It should be placed in the root directory of your project.

Next, add the following to the vue.config.js file:

If you are using Vue Router in your project, make sure to update the related base property of the router.

This can be done by updating the router index.js like so:

After the changes above are applied, follow the steps highlighted in Step 1 to build your project.

Next, upload the files generated in the ‘dist‘ folder into the subfolder directory on your server. The files can be uploaded using any method familiar to you.

Once the files are uploaded, your site should be live!


4. Server Configuration – HTML5 History Mode

When using Vue Router with HTML5 history mode, without a proper server configuration, users will get a 404 server error if they access ‘http://yoursite.com/user/id’ directly in their browser.

To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn’t match any static assets, it should serve the same index.html page that your app lives in.

For example, if using Apache, this is configured in the .htaccess file.

If this file doesn’t already exist, you can create it. It should be placed in the same directory as your apps index.html file.

Next, add the following to the .htaccess file:

If your app is deployed in a subfolder, using Apache, this is also configured in the .htaccess file.

If this file doesn’t already exist, you can create it. It should be placed in the same directory as your apps index.html file.

Next, add the following to the .htaccess file:

Note: Replace ‘[[[your-subfolder]]]‘ with the subfolder name where your app resides.

For more example configurations, visit the official documentation for more information!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Vue || How To Create A Simple Store With Shopping Cart Using Vuex, Vue Router & Vue

The following is an implementation which demonstrates how to create a simple store with a shopping cart using Vuex, Vue Router and Vue.

This store allows you to add and remove items from a cart, filter items by category, create a new user, log in and log out (with automatic redirect), and “purchase” the items in the cart on the checkout page.


1. Get Started

To get started, make sure you have a package manager like Node.js installed. Node.js is used to install packages.

You’ll also want to have vue-cli installed. Visit the official documentation for more information on how this is done.

Next, navigate to the project directory in the terminal, then run the following commands (Node.js):

Project Setup


npm install

Compiles and hot-reloads for development


npm run serve


2. Features

This project implements a simple store with the following features:


1. Login / Create account (with automatic redirect)
2. Retrieve products from a mock 'API'
3. Add/Remove item to shopping cart
4. Simulate purchasing items on checkout
5. Custom 404 page
6. Display products per category
7. Hamburger 'options' menu


3. Screenshots

Home Page

Sample

Log In Page

Sample

Check Out Page

Sample

Hamburger Options Menu

Sample

Create Account Page

Sample

Log In Page

Sample

Home Page

Sample

Check Out Page

Sample


4. Download

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || SlidePanel.js – How To Create An Animated Sidebar Navigation Menu Panel Using Vanilla JavaScript

The following is a module with functions that demonstrates how to create an animated sliding sidebar navigation ‘hamburger’ menu panel using Vanilla JavaScript.

Using Vanilla JavaScript and CSS, by default the menu panel swipes in and out from left to right. The panel can also be opened from right to left, top to bottom, and bottom to top. All of this behavior, as well as its look and feel can be adjusted via CSS.

SlidePanel.js & CSS Source

Contents

1. Basic Usage
2. Navigation SlidePanel Menu HTML
3. SlidePanel.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to setup the sidebar navigation slide panels and menu event listeners.

Calling this function sets up all of the slide panels and buttons on the page.


2. Navigation SlidePanel Menu HTML

The following is the HTML used to setup the sidebar navigation slide panel. The placement of the ‘hamburger’ button, as well as the direction that the sidebar menu opens can easily be adjusted via CSS.

Below is a stripped down simple example demonstrating the basic html used to setup a sidebar panel. In this example, the panel is opened from left to right.

Navigation slide panel menus can also open from right to left, top to bottom, and bottom to top. Check out the end of the page for a full example!


Open Left To Right

The following demonstrates how to open the navigation slide panel menu from right to left.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.

Sample Navigation Menu:

Sample


Sample When Opened:

Sample


Open Right To Left

The following demonstrates how to open the navigation slide panel menu from right to left.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.


Open Top To Bottom

The following demonstrates how to open the navigation slide panel menu from top to bottom.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.


Open Bottom To Top

The following demonstrates how to open the navigation slide panel menu from bottom to top.

By default, the menu opens on the left side of the page. Adding ‘right‘ to the class list places the menu on the right side of the page.


3. SlidePanel.js & CSS Source

The following is the SlidePanel.js Namespace & CSS Source. Include this in your project to start using!

The following is SlidePanel.css.


4. More Examples

Below are more examples demonstrating the use of ‘SlidePanel.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Get Timespan Between Two Dates & Convert Time From Seconds Into Years, Days, Hours, Minutes & Seconds Using Vanilla JavaScript

The following is a module with functions which demonstrates how to get the timespan between two dates and convert time from seconds into years, days, hours, minutes and seconds using vanilla JavaScript.

This page also demonstrates how to convert time from -seconds- into HH::MM::SS (hours, minutes seconds) format. So for example, if you had an input time of 9630 seconds, the program would display the converted time of 2 hours, 40 minutes, and 30 seconds.

Using simple math, this function utilizes the modulus operator, and the division operator during the conversion process.


1. Get Timespan – Dates

The example below demonstrates the use of ‘Utils.getTimespan‘ to get the timespan between two dates and return the time difference in years, days, hours, minutes and seconds.


2. Get Timespan – Seconds

The example below demonstrates the use of ‘Utils.getTimespan‘ to get the timespan from seconds and return the timespan in years, days, hours, minutes and seconds.


3. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.