Below are snips for various web development tasks:
<script>
$(document).ready( () => {
console.log(document.location.href);
$('.navbar-nav li.active').removeClass('active');
if (document.location.href.indexOf('orders') > -1) {
$('#nav-orders').addClass('active');
} else if (document.location.href.indexOf('users') > -1) {
$('#nav-users').addClass('active');
} else if (document.location.href.indexOf('admin') > -1) {
$('#nav-admin').addClass('active');
} else if (document.location.href.indexOf('account') > -1 || document.location.href.indexOf('profile') > -1 || document.location.href.indexOf('user') > -1) {
$('#nav-account').addClass('active');
} else {
$('#nav-home').addClass('active');
}
});
</script>
Use reg-ex pattern for verifying valid IP address:
<label for="ip">IP Address</label>
<input name="ip" type="text" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"></input>
Obtain your site key and secret key here: https://www.google.com/recaptcha/about/
Use the v3 Admin Console, not Enterprise Console.
To add Google reCAPTCHA v3 to run when a web page loads (not only when submitting a form), follow these 3 simple steps:
<head></head> tags of your page and replace with your Site Key.<script src="https://www.google.com/recaptcha/api.js?render=INSERT_YOUR_SITE_KEY"></script>
<script>
grecaptcha.ready(() => {
// Get the reCAPTCHA response token.
var response = grecaptcha.getResponse();
// Send the response token to the server for verification.
var xhr = new XMLHttpRequest();
xhr.open("POST", "/your_php_page_name.php");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({
"response": response
}));
// Wait for the response from the server.
xhr.onload = function() {
if (xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
// If the verification was successful, proceed with the rest of the page.
if (responseData.success) {
// Do something else...
} else {
// If the verification was not successful, display an error message.
alert("Invalid reCAPTCHA response.");
}
} else {
// If there was an error, display an error message.
alert("Error verifying reCAPTCHA response.");
}
};
});
</script>
<?php
// Get the reCAPTCHA response token from the POST request.
$response = $_POST["response"];
// Get the secret key from the reCAPTCHA settings.
$secret = "ENTER_YOUR_SECRET_KEY_HERE";
// Verify the response token with reCAPTCHA.
$responseData = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response");
$responseData = json_decode($responseData, true);
// If the verification was successful, return true.
if ($responseData["success"]) {
return true;
} else {
// If the verification was not successful, return false.
return false;
}
?>
You should see the badge on the right bottom of your page.
Add this CSS to the page header:
<style>
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}
</style>
I personally hate dealing with customizing CSS, but the easist way I've found is to find an existing bootstrap theme I like and go from there.
The Bootswatch Themes can be used as they are and are available via CDN at jsDelivr: https://www.jsdelivr.com/package/npm/bootswatch
This is done on Ubuntu 22.04 as root user.
apt install git -y
curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
bash nodesource_setup.sh
apt install nodejs
node -v
# output should show v18
cd /var/www/html/css
git clone https://github.com/thomaspark/bootswatch.git
cd /var/www/html/css/bootswatch
node install
# Make Sure Grunt CLI is working
grunt -V
# Should show both grunt-cli and grunt versions
# If grunt is not installed run:
npm install -g grunt-cli
npm install grunt --save-dev
# Verify grunt is working again with "grunt -V"
cp -R /var/www/html/css/bootswatch/dist/spacelab /var/www/html/css/bootswatch/dist/wikisnips
// Change this line to be the name of the folder for your new customized theme
$theme: "wikisnips" !default;
cd /var/www/html/css/bootswatch/dist
grunt swatch:wikisnips
<link rel="stylesheet" href="/css/bootswatch/dist/wikisnips/bootstrap.min.css">
Complete!
When new versions of Bootstrap are released, Bootswatch is pretty good about updating their themes to the new versions. To update your Bootstrap CSS to a new version follow these simple steps:
cd /var/www/html/css/bootswatch #or whatever folder you have
mv wikisnips wikisnips.bak
git pull
cp -R dist/spacelab dist/wikisnips
cp -f dist/wikisnips.bak/_variables.scss dist/wikisnips/_variables.scss
Complete!