Monthly Archives: December 2020

Vue || How To Set, Add & Update Query Params With Vue Router Using Vue

The following is a module which demonstrates how to set, add and update query params with Vue using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.


1. Add & Update Query

The example below is simple page that with a login link. The link has a redirect parameter to navigate back to the referring page after successful login.

Clicking on the link results in the following:


/login?[existing query + computed result]

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 Set Up Fade In & Fade Out Router View Transitions With Vue Router Using Vue

The following is a module which demonstrates how to set up fade in and fade out router view transitions with Vue using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.


1. Router Index File

The example below is a sample router index.js file. This file sets up the routes in the project.

There are 2 routes: a ‘Home‘ page, and a ‘About‘ page.

The layout of the routes above are not important. They are declared here simply to demonstrate a project with multiple routes set up.


2. App.vue

The example below is the ‘App.vue‘ page. This is the root of the application. In this example, this is where the fade in and fade out router view transitions will take effect.

When a route is clicked, its contents is loaded inside the router-view. The example below demonstrates how to set up the fade in and fade out router view transition effect.

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 Set Up Vue Smooth Scroll Behavior With Vue Router Using Vue

The following is a module which demonstrates how to set up smooth anchor scroll behavior when navigating to a new route with Vue using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.


1. Router Index File

The example below is a sample router index.js file. This file sets up the routes in the project. Its also where you set up the scrolling behavior when navigating to a new route.

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 404 Not Found Route With Dynamic Nested Routes With Vue Router Using Vue

The following is a module which demonstrates how to create a 404 not found route with dynamic nested routes via Vue Router using Vue.

Routes can be checked using Navigation Guards. This page will demonstrate verifying nested routes using the Per Route Guard.

This will demonstrate how to create a route that catches all non existing routes with Vue Router. It will also demonstrate how to use navigation guards to make sure nested dynamic routes exists.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.


1. Router Index File

The example below is a sample router index.js file. This file sets up the routes in the project.

There are 4 routes: a ‘Home‘ page, a ‘DestinationDetails‘ page, a ‘ExperienceDetails‘ page, and a ‘NotFound‘ page.

The ‘ExperienceDetails‘ page is a nested child route.

The DestinationDetails route is a dynamic route that accepts props. In this example, the route.params will be set as the component props. In this component, the ‘slug‘ prop is used as the dynamic route path identifier.

The ExperienceDetails nested child route is also a dynamic route. In this component, the ‘experienceSlug‘ prop is used as the dynamic route path identifier.

Using the beforeEnter navigation guard, we can check if the route is valid by checking the dynamic route path identifier. If the route is not valid, the ‘NotFound‘ route is navigated to.

The NotFound route catches all non existing routes.


2. Home Page

The example below is the ‘Home‘ route page. This demonstrates how to navigate to the DestinationDetails route using the dynamic props.

It uses router-link to navigate to the specific route.


3. Destination Details Page

The example below is the ‘DestinationDetails‘ route page. This demonstrates how to display information about the destination and navigate to the ExperienceDetails route using the dynamic props passed to it.

It uses router-link to navigate to the specific route, and uses router-view to display the nested content from the navigated child route.

When calling the child component, it will automatically receive the parent ‘slug‘ dynamic route path identifier as a parameter.


4. Experience Details Page

The example below is the ‘ExperienceDetails‘ route page. This demonstrates how to display information about the destination experience using the dynamic props passed to it.


5. Not Found (404) Page

The example below is the ‘NotFound‘ route page. This page catches all non existing routes.

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 Set Up Vue Login Authentication & Route Handling With Vue Router Using Vue

The following is a module which demonstrates how to set up Vue login authentication and route handling using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.


1. Router Index File

The example below is a sample router index.js file. This file sets up the routes in the project.

There are 3 routes: a ‘Home‘ page, a ‘User‘ page, and a ‘Login‘ page.

The ‘User‘ route has a meta property that says that it requires authentication.

Next, the route records are iterated over to check if the requested page requires authentication. If it does, the route is redirected to the ‘Loginnamed route, with a query string parameter of the original page to redirect to after successful login.


2. Login Route Page

The example below is the ‘Login‘ route page. It doesn’t do anything special, it just demonstrates how to accept user input and redirect to the specified path after successful login is complete.

Accessing the route redirect path can be done by using the ‘query’ property on the route object.

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.

CSS || How To Use Inline SVG Image As Background Image Icon Using CSS

The following is a module which demonstrates how to use Inline SVG image as Data URL background image icon using CSS.


1. Usage

The example below demonstrates the use of the icon CSS class to display an SVG image as an image icon.

Sample:

Sample


2. Icon CSS

The SVG image used in this example is the following:

Make sure to URL encode your entire SVG, and then simply insert the encoded string as the css background-image.

You can use any online converter to URL encode the SVG string.

The following is the Icon css file.


3. More Examples

Below are more examples demonstrating the use of the ‘Icon‘ css. 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.

CSS || How To Zoom & Enlarge An Image On Mouse Hover Using CSS

The following is a module which demonstrates how to zoom and enlarge an image on mouse hover using CSS.


1. Usage

The example below demonstrates the use of the Grow CSS.

Sample:

Sample


Sample


2. Grow CSS

The following is the Grow css file. Include this in your project to start using!


3. More Examples

Below are more examples demonstrating the use of the ‘Grow‘ css. 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.

CSS || How To Create Horizontal Divider Line With Words In The Middle Using CSS

The following is a module which demonstrates how to create a horizontal divider line with words in the middle using CSS.


1. Usage

The example below demonstrates the use of the Divider CSS.

Sample:

Sample


2. Divider Line CSS

The following is the Divider css file. Include this in your project to start using!


3. More Examples

Below are more examples demonstrating the use of the ‘Divider‘ css. 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/CSS/HTML || Simple Tic Tac Toe Game With Minimax AI Using Vanilla JavaScript

The following is a module with functions which demonstrates how to create a simple Tic-Tac-Toe game with computer AI using vanilla JavaScript.

This game allows for two or more players, or computer AI vs computer AI. The first player to match 3 pieces horizontally, vertically and diagonally in a row wins!


1. Features

This game allows for two or more players. To add more players, click the “add new” button under the “players” list. To edit a player, click the “edit” button next to a players name.

• Adding and editing a player allows you to change:


1. Name
2. Avatar image url
3. CPU player & difficulty

• To remove a player, click the “remove” button next to the players name.

• A “save game” button allows to save the progress of the game. A file is generated, which consists of the state of the game. This file can be used to reload the game, using the “load game” button.

• Match history is saved, and lets you see the game stats from the previous completed games.

• Player AI uses the minimax algorithm. It has 4 levels of difficulty:


1. Easy
2. Normal
3. Hard
4. Impossible - You will not win!


2. Screenshots

New Game

Initial

End Of Game

Game Over

Match History

Match History

Update Player

Update Player

Add New Player

Add New Player


Add New Player

CPU vs CPU

CPU vs CPU


3. Download & Play

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 Create A Simple Predictive Spell Checker Using C++

The following is a module with functions which demonstrates how to create a simple predictive spell checker using C++.

The module demonstrated on this page is an implementation based on the Norvig Spelling Corrector.


1. Overview

In its simplest form, this process works by first telling the spelling corrector the valid words in our language. This is called “training” the corrector. Once the corrector is trained to know the valid words in our language, it tries to choose the word that is the most likely spelling correction.

This process is done by choosing the candidate with the highest probability to show up in our language. For example, should “lates” be corrected to “late” or “latest” or “lattes” or …? This choice is determined by the word which has the highest probability to appear in our language, according to the training text we provide.

Traditionally, spell checkers look for four possible errors: a wrong letter (“wird”), also knows as alteration. An inserted letter (“woprd”), a deleted letter (“wrd”), or a pair of adjacent transposed letters (“wrod”). This process is used when generating probable spelling correction candidates.

The training text used in the example on this page can be downloaded here. This file consists of 80891 distinct words, which is used to train the spelling corrector.


2. Spell Check – Basic Usage

The example below demonstrates the use of the ‘SpellChecker‘ class to load the training file and correct the spelling of a word.


3. Spell Check – Unit Tests

The example below demonstrates the use of the ‘SpellChecker‘ class to load the training file and correct the spelling of a word.

In this example, words are added to a set to determine if the most likely spelling correction is returned by the spelling corrector. The first word in the set is the word to test against (some are spelled correctly, some incorrectly). The second word in the set is the expected result that should be returned by the spelling corrector.

If no spelling suggestion is found, an empty string is returned by the spelling corrector. This is true for one of the words in the test cases below. Even though the word is spelled correctly, it is not defined in our training text, and no correction can be found.


4. SpellChecker Class

The following is the SpellChecker Class. Include this in your project to start using!

The following is the header file ‘SpellChecker.h‘.

The following is the implementation file ‘SpellChecker.cpp‘.


5. More Examples

Below are more examples demonstrating the use of the ‘SpellChecker‘ class. 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.

Remember to include the training file.

C++ || How To Execute & Get Regex Match Results Using C++

The following is a module with functions which demonstrates how to execute and get regex match results using C++.

The function demonstrated on this page uses regex to search a specified input string for all occurrences of a specified regular expression. The function returns a collection of std::smatch objects found by the search.


1. Get Regex Matches

The example below demonstrates the use of ‘Utils::getRegexMatches‘ to search an input string for all occurrences of a regular expression.


2. Get Regex Matches – Sub Match

The example below demonstrates the use of ‘Utils::getRegexMatches‘ to search an input string for all occurrences of a regular expression.

In this example, sub matches are expected and displayed.


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 Trim & Remove The Leading & Trailing Whitespace From A String Using C++

The following is a module with functions which demonstrates how to trim and remove the leading and trailing whitespace from a string using C++.


1. Trim

The example below demonstrates the use of ‘Utils::trim‘ to remove all the leading and trailing occurrences from a string.


2. Trim Start

The example below demonstrates the use of ‘Utils::trimStart‘ to remove all leading whitespace characters from a string.


3. Trim End

The example below demonstrates the use of ‘Utils::trimEnd‘ to remove all trailing whitespace characters from a string.


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.

C++ || How To Check If A String Starts & Ends With A Certain String Using C++

The following is a module with functions which demonstrates how to determine if a string starts and ends with a certain substring using C++.


1. Starts With

The example below demonstrates the use of ‘Utils::startsWith‘ to determine whether the beginning of a string instance matches a specified string value.


2. Ends With

The example below demonstrates the use of ‘Utils::endsWith‘ to determine whether the end of a string instance matches a specified string value.


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 Read An Entire File Into A String & Write A String To A File Using C++

The following is a module with functions which demonstrates how to write a string to a file and read an entire file to a string using C++.

The functions demonstrated on this page uses fstream to read and write data to and from a file.


1. Read All Text

The example below demonstrates the use of ‘Utils::readAllText‘ to open a text file, read all the text in the file into a string, and then close the file.


2. Write All Text

The example below demonstrates the use of ‘Utils::writeAllText‘ to create a new file, write a specified string to the file, and then close the file. If the target file already exists, it is overwritten.


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.