Search
Search Code
React - Use State to Toggle an Element
Mastering React State: Toggling Elements with Confidence React's state management system is a powerful tool for building dynamic and interactive user interfaces. One common use case involves to..
Bind 'this' to a Class Method
Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..
find a custom data attribute in simple html dom
locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs
css html vertical center
seems to break this layout... there must be a better way...
CSS Object Fit for Image fill rather than using background image on a div
CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size. Object Fit You can use: object-fit: With the following ..
Quick Embed code for Titillium Web Google Font
Quick Embed code for Titillium Web Google Font and a bit of test code to see if the font is working properly. Im not sure if including all styles of this font is a good idea. Who even uses italic thes..
Video different sources on screen sizes video embed html responsive
video embed tag using media tag to switch video sources depending on screen size This example will switch the video souce at 800px screen width.
wordpress block grid code
the basic wordpress grid column layout this is a 3 col layout
clean excess binary logs from mysql - free up space
Update: 30 July 2023 I actually prefer this command, i just have to figure out why im getting so many binlog files! MYSQL PURGE BINARY LOGS BEFORE '2023-07-30 00:00:00';PURGE BINARY LOGS BEFORE NOW..
fancybox youtube showing video links in a lightbox - updated with fixed code parts
do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it. you will need jquery and fanc..
make clickable element with clickable class open link in new window
makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..
Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in simple_html_dom.php on line 722
Initial thought on this error is that there is a version issue. This only happened on version 1.11 for me, will check what other version i have. Yep not sure why but the older version of php ht..
function causing slow load time
i had this function matching a uid using a binary select query. The sites were loading in about 8 full seconds according to my load timer, sometimes up to 12 seconds! So this was running on old site ..
error Warning: getimagesize(uploads/583517f49099a.jpg): failed to open stream: No such file or directory in SimpleImage.php on line 1198
i think this error is just caused by a missing file. But there should be some kind of error checking here to not crash the whole site just due to a missing image file. this error is quite hard to fin..
Deprecated: parse_str(): Calling parse_str() without the result argument is deprecated
I had this error on a function that i was not even sure i was calling. This was on some old code i was testing for an old site, i must have fixed this error on a never version of the function. ..
Return a file extention from a string
This php function returns a file extention from a string. I think it will only work if the string does not have any additional . in it. I think a better way to do this function would be ..
getcwd usage in php to get the current working directory for file includes
the builtin function getcwd in php gets the current working directory, this can then be used to include files or check the current working directory rather than manually adding the directory into your..
chart js line chart dont show below 0 and add axis labels
Now we take the chart js chart and add some axis labels on x and y using the same options values. This will also add axis labels to the chart on the x and y axis Javascript options: { scales: {..
chart js line chart dont show below 0
had an issue where the chart was displaying values in the negative, and wanted to start the chart at 0 and no go below. the additional option fixed this issue. Javascript options: { scales..
table scroll responsive foundation
add this div wrapping your table using the foundation framework and it will allow the table to scroll on smaller screen's. Making a responsive table easier.
Boots Widget change from widget to cat head and click function
Moving this from the widget area to the bottom, to make it less obvious but still there if needed.
Windows CIFS Optional Features Network
Some of the file sharing between windows pc's seem to need this feature. Also NFS is needed for some older NAS systems.
Chat GPT slick slider code testing
slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..
Check free space amount and show it in a nice human readable format
this checks the disk space amount on the linux macine and returns the result in human readable form. df -H Usually this will show it in the following format. Example below.
chocolatey command line for windows
i keep forgetting what this is called but its like a command line installer for useful windows tools like ffmpeg and other useful packages. Its like a simple package manager for windows. How ..
add ssh keys on your linux box in 10 seconds
Here i was typing in the ssh password over and over when connecting to ssh, when i could have just typed this one command and had my ssh keys copied to my linux box! What was i doing all that time! :..
windows robocopy /? help and usage
Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..
how to show your DNS in windows and then copy it to the clipboard in one command
Here is how you can show your current DNS server in windows command line and then copy it to the clipboard, ready for pasting. Open Windows Command Prompt<windows key> + R Type cmd ..
find a text string and replace it in javascript
There is a function in javascript called replace. You can just give it some text and it should replace it with your target text. For example #1 this just runs and replaces the first instance o..
four box section template in foundation with classes find and replace (4 box)
this section uses the large-auto classes so you can add or remove boxes easily. find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..
shorten string php, string length php, clip string length php
I'm pretty sure i have done this function before but i cant find it due to the keywords being wrong! Here is a function that takes a string and shortens it and adds .. to the end, with the rest of th..
return author title from simplepie rss atom feed
i was just returning the author from this, and for some reason it returns a number. $class->$target_item = $item->get_author(); where you also need to pass the get_name function to this to ext..
imgur upload from php
function that takes an image and uploads it to imgur using a client api id, and then returns all the data. i did this one ages ago and did not make it into a function, but this version should work as..
simple pie get link from enclosure item in simplepie rss feed
i had an item like this in a rss feed, and i wanted to grab the enclosure url, took me a while to figure this out for some reason even though the solution is quite simple. PHP <item> &l..
simplepie error : XML or PCRE extensions not loaded!
using simplepie it does not load the target feed, and does not display any errors. Just nothing. if your feed is init'd with $feed check for feed errors with: $feed ..
Google Font Embed - Play Gaming Font
Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..
cookie consent quick install script js html css vanilla
Found this super slick looking cookie consent script here, looks awesome, and its easy to install (i hope). https://github.com/orestbida/cookieconsent CDN Links https://cdn.jsdelivr.net/gh/or..
font quick embed inter all styles google font
For some reason every time I go into google fonts website it seems to get more and more complex, i dont really care too much about all the font details i just want the embed link! Anyway... Maybe im g..
How to switch desktops in windows 11 with keyboard
this is just a quick one as i could not see the option, which you would think they would add to the new desktop switching screen.. Anyway here is how you can switch desktops in windows 11 and create n..
Video Placeholder Image HTML
a quick image embed for a common video placeholder image size made by this amazing placeholder site
wrap an iframe with another div inside another div
so lets say you had an iframe within another div and that div had the class called content. you cant actually edit the page content but you can add some jquery to the page can you add a wrapper to t..
Random User Profile Loading Script in vue
uses the random user ui here to generate profile boxes using vue js original script here: https://codepen.io/l-i-lc/pen/WNxNwvd?editors=1010
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher
A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.
loop through $_GET in php
I thought this one would be something like PHP foreach($_GET) { echo $_GET; } but actually as $_GET is an array you need to do the $key and $value loop like this PHP foreach ($_GET as $..
php strip non numbers from string - remove all non-numeric characters from a string
this will remove all non alpha numeric numbers from a string. in this example it returns: 123456 from $1234.56x
Map Image with Easy Dots and Titles using only CSS
I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..
CSS Filter Generator from Hex Code Usage Example
quick example of how to apply a css filter to change logo or image color using this tool
Regex replace or find anything in brackets
Search for anything within brackets ( find this ) and the bracket its self. REGEX \((.*?)\)
codemirror with auto preview window
this should auto preview html code into the preview area using code mirror
save string to file php
save the contents of a string to a file This function is identical to calling fopen(), fwrite() and fclose() successively to write data to a file.
Are you sure you want to navigate away from this page? #JavaScript warning
You only need to include one of these scripts as the top one seems to work fine by its self not requiring any jquery. Javascript window.onbeforeunload = function (e) { return "You..
Oswald Font Quick Embed
Quick Embed code and class for Oswald Google Font. This includes all font weights and styles for the Oswald font, just add the class oswald onto your elements, or you can apply it to all page element..
get string between other strings function php
So it turns out that i have had this issue before of finding a string in between other strings and made a function for it that i forgot about.
using preg_match to extract text from elements
using preg_match to extract specified text from elements I also tried this search "if you have the start and end of a string extract the middle with php" as thats really all i need it to do, i have t..
using figcaption and figure for your images
So i usually add images in a <p> tag with just an <img> tag and then <br> and the image caption, but there is actually a tag for this that i should get used to using. The <figcapt..
Robocopy Options /? help
My usual backup command is now robocopy source destination *.* /M robocopy d:\ f:\ *.* /M Update: actually scrap that, its /E not /M, i used to use the /MIR option, but as deleting files in the des..
encode spaces in items passed to url to %20 not +
I was using urlencode in php and it was encoding words with spaces into word+space rather than word%20space This can be resolved by using the function rawurlencode rather than urlencode.
Load fancybox modal on hash check
I was just testing this code, not working on the hash check as yet.
php validate email function
php function that can be used to validate an email address string
redirect www to non www
usually i point the www to the ip address of the server and then create a redirect block on nginx, but this seems like extra work for nothing. Tested the cname point to the address but this see..
Welcome Widget Card - Toggle
Testing the welcome widget with a more or less toggle. This version seems to work, with a jquery slide toggle.
php function load as table - load_as_table
Load data and add into a table format by passing in the required fields as an array. Example Result Live Example https://kruxor.com/view/nz_postcodes/5KrBW/zurich-place-weymouth-manukau/&nb..
Playfair Display Font Quick Embed - Google Font Quick Embed
Note: you only need the @import in css or the link href not both to embed this font. This font reminds me a bit of Times New Roman
add a custom event trigger in jquery document ready
i saw something that said if you add an event listener at the end of the doc ready it should fire last, but i dont think this is correct as it runs everything at once. so i think this code does not wo..
get json with php from a url and display it
yep its that easy. this code shows getting the contents from a json request api. var dumping all of the results and extracting one single item by its array key and showing it.
Install PHP without Apache on Ubuntu
I was actually about to do some coding and then i got distracted with this annoying error on vscode. I keep getting this error on vscode: I had been ignoring it, but i thought fine, ill fix it and..
content-visibility and contain-intrinsic-size for page load rendering speed increase
interested to see if this makes any difference content-visibility The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcin..
php convert number with k on the end to full number
I have a function that converts raw numbers into shorthand or human readable numbers, but was wondering how to convert these back if they are stored in that format, and also makes it better if you are..
extract variables from url string php
How do I extract query parameters from a URL string in PHP? You can do this using the parse_url function or parse_str function in php. Say my url string is: $url = "https://kruxor.com..
basic radio checklist - check and item and get its value in a textarea
a basic radio input type checklist, where you can only select one of the items in the list. Ok so no longer so basic. This script allows you to fil the value of a text area with the valu..
Invalid argument supplied for foreach()
Fix for Warning: Invalid argument supplied for foreach() in /var/www/html/pages/seo-meta-tag-search.page.php on line 204 As this is just a warning, i may not have noticed it originall..
Warning: file_put_contents(/var/www/html/bundle/responsive-viewport-meta-tag-responsive-meta-tag/index.php): failed to open stream: Permission denied in /var/www/html/pages/update.page.php on line 167
i think that the content in this location is not writable by php so need to change the permissions too fix this error. This should fix it, as it was not correctly write permissioned Bash cs /..
Warning: Undefined variable $class_single_hero in /var/www/html/pages/section.page.php on line 177
This warning was caused by a dot in front of the equals $class_single_hero .= $code->hero_widget($t_uid = $class_single->uid,$t_class = $p2); Fixed version Easiest way to fix this is remo..
Search Duplicating Bugs
Still having issues with the word above duplicating, not sure why. Search Page PHP - Get Search Value $search_value_encoded = htmlentities($search_value); Check for Search value, and then ..
add a user and add the user to sudo group
basic adding of a user in linux and then adding the user to the sudo group to allow it to run super user commands like apt update or other potentially system breaking commands. Note: replace "usern..
floating message box on bottom right of screen with close button
A floating fixed message box on the bottom right hand side of the screen with a close button.
set a css grid to auto to make it stack on mobile
to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size. In this example once the screen size gets to 1024px or les..
duplicate a line in vscode shortcut
if you ever wanted to duplicate a line in vscode, this is the shortcut for you. rather than doing the hightlight, and then CTRL + C and then CTRL + V you can use the following shortcut. just put you..
unable to write to a sqlite database with docker
turns out this was not a docker specific problem, i was getting the readonly database error. even if the database has full write permissions, the directory also needs to have write permissions ..
Get current URL and add a share to facebook share button with it
Combines this Facebook HTML for Sharing a Link and encode url with javascript this to make captan planet! Or... makes a share this post to facebook button.
truncate text with line clamp allow a certain number of lines
This shows how you can truncate text to a certain number of lines using the css property line-clamp. -webkit-line-clamp: 3; line-clamp:3;
Twitter Post Fetcher Script
Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome...
Clear Youtube DL Cache to fix 403 Forbidden error, youtube-dl 403 forbidden
If you are getting the error: File "C:\Python\Python34\lib\urllib\request.py", line 588, in http_error_defaulturllib.error.HTTPError: HTTP Error 403: Forbidden It could be cache that is causing this..
git basics - git init, git commit, git all, git *
create a new repository git init the following code can be typed in a terminal window, once you have installed git for your OS. This will create a directory called git-test assuming you already hav..
using the :user-valid CSS pseudo-class
It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.
font similar to century gothic questrial google font quick install
I found this font to be closely related to the paid font "Century Gothic" the only issue i found with this font is that it only comes in regular weight. But Questrial is free to use, so that is..
Footer Design and Redesign
I never usually look this far down on the site, but its a bit average... Lets fix it! Some simple changes Just a few elements added and moved around a bit. Added another row to the f..
html and css hoizontal simple timeline section in foundation
a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!.. :P Also works on responsive and mobile dev..
Javascript Objects Notes
As javascript objects are used so often in javascript i thought i would write an overview and some notes on how they work, well how they work for me anyway. I guess how they work for me should be simi..
javascript add class to element
how to add a class to an element in raw javascript I wrote a quick demo here showing how you can add a class to an element with an id on a button click
No 'Access-Control-Allow-Origin' header is present on the requested resource.
add this to your php to allow requests from any source Access-Control-Allow-Origin php header
javascript attach a click event to an id not using jquery
I just wanted to bind a click to a button, not using JQuery, turns out its not that hard at all. Why am i using jquery for this stuff???...
console dir usage
the console.dir function shows a list of the properties or the target object. Usage console.dir(variable); Result Example
how to write a javascript string over multiple lines
i remember learning this on freecodecamp while doing the ES6 training, and i could not remember exactly how to do it. I was using the \ at the end of each line but thats really a bit annoying.&..
best way to write html into an existing page javascript
this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it. Add an element, before including the script..
Core Function : list_search_by_class_return_links - List Searches by Class Type and Return Links
Function that list's the latest and top searches by the class name and return a list of links, with the search totals on them. I wanted to extract the top searches and the latest searches by da..
Fatal error: Uncaught Exception: Required extension GD is not loaded.
How to resolve the error: Fatal error: Uncaught Exception: Required extension GD is not loaded. This Error is ususally due to a php library or script requiring the GD php extention. On ubuntu ..
php check if a class exists
check if a class exists in php. this can be used rather than assuming the class exists and then causing an error You can run the class_exists function on the class before loading it with the followi..
Uncaught TypeError: Cannot set properties of null (setting 'onclick')
I was just testing some code and noticed i had this error on my site. Locate the error in the site code I removed this script, so the whole thing is now not required, as i opted for the au..
check url hash using javascript
What is a url hash? This is a URL Hash. You can add the # symbol on the end of a url and content after it, and this will not effect the content usually, unless the browser is intructed to do somet..
submit form with javascript
if you have a form with an id, you can submit it with the following javascript. usually this will be attached to an event or something similar like a button click. If i run this on the demo, it..
highlight a button with an animation css
While i was downloading the latest AdoptJDK i noticed this button, and thought it was a nice effect. I wondered how hard it would be to replicate this. Copy the link html Check each class..
A short unsplash image url
You will notice that if you copy the image source from unsplash you will end up with something like this: https://images.unsplash.com/photo-1582639590011-f5a8416d1101?ixlib=rb-1.2.1&ixid=MnwxMjA3..
Converting PHP to Javascript for State Extraction by numeric value Australian State Names
I cant even remember when i originally wrote this php function, but now i need to have it in javascript, should not be much change to it to get it working. The original function takes an austra..
convert a string into its html entitles using php htmlentities function
this takes a html string such as the following example and converts it into its html entities. it will take a character such as < and convert it into < so that the string is not parsed as h..
generate view statistics widget in php class extend
How i generate the Week, Month and Year view statistics widget for this site. Views Widget Function This generates the widget based on the views data. PHP // views widget /* using fi..
svg animated line testing - shooting star right
I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below. There is shoot right and also shoot left, if you are that way i..
Uncaught Error: Call to undefined function mb_convert_encoding()
I was getting this error when calling a function in the readability php class, on a new server for code that worked on the old server. Uncaught Error: Call to undefined function mb_convert_encoding()..
Using Marker to add a Triangle to List Items
In this demo i use the ::marker attribute on the list items to change the content of the marker to a ▶
Auto Create HTML Code Snippets
make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..
Slick Slider Showing Multiple Items at a time
Just wanted to test some review type items showing more than one on slick, Seems to work well. This shows two items at a time, but you can show as many as you like. Could be good for a testimo..
add a toggle with jquery and change the class
With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off. Here is t..
Testing Playwrite on for Node
I came across this library on y news, and thought id give it a bit of a test. I managed to get it working but not really sure what tests it can do. I set it to take a screen shot of a we..
add an outline to everything!
very handy for checking elements and other things on your page. this one line will add an outline to every element, so you can see where all the elements are located.
content editable p tag with spell check enabled
im not sure how this is useful, but you can set a p element to content editable so you can change its contents and then also set the spellcheck to true so the browser knows that it should run its spel..
making the search page nicer
Sometimes i dont even notice things like this, as i look at them all day and go, ah yeah thats a search box. I forget that all these things can be fixed. Anyway, even just adding this form to a..
function to delete older sqlite records when the limit is reached
I had an issue where a sqlite database was hitting over 100,000 records and this was causing quite a lot of lag and crashing on my server, the number of records was not really meant to be this high, s..
fixing error Call to undefined function simplexml_load_string
usually the error "Call to undefined function simplexml_load_string" happens when the php xml library is missing from your server. You can install the xml php library with the following command, repl..
loop to arr.length or array length
showing a simple loop that uses the length of the array to find the end of the loop. This just console logs each item in the array and stops the loop when it gets to the end of the array.
get directions from google maps form embed
this is a random form that posts back to google maps showing the directions needed to get from one address to another location, im not sure where this would be usefull. Maybe on a site where you neede..
center image preview with lightbox and caption
I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it. Note: I just picked ra..
get tomorrows date with javascript
Same as the get yesterdays date except with a +1 rather than a -1 let tomorrow = new Date(new Date().setDate(new Date().getDate()+1));
get yesterdays date with javascript
This gets todays date and minuses one day from it to be ... yesterday. let yesterday = new Date(new Date().setDate(new Date().getDate()-1));console.log(yesterday); This format is the full da..
make a nice readable date using a timestamp string function make_nice_date
handy if you have a timestamp like this: 2022-01-10 00:12:42 and want it to look a bit nicer. like this... 12:19 am, January 10, 2022
add new random image with button
this appends a new random image from picsum.photos to the div with the id app
Create Strings using Template Literals
if you use the backtick to enclose your strings you no longer have to use \n for a new line. For example: `this is a multiline ...string!!` Console Example
Darkmode JS - Add darkmode to your site with one script
This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit. Darkmode JS Example Source Links https://darkmodejs.learn.un..
Use destructuring assignment within the argument to the function half to send only max and min inside the function.
this seems like a tricky one, can be resolved with removing the stats array reference. Im not sure how it still knows to access the stats array. I dont know how that is correct as the console just lo..
center align vertical 2 items in a container flex
i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..
simple javascript no library accordion
a simple button and div based accordion with a toggled indicator
Using Destructuring and the Rest Parameter to Reassign Array Elements
Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a sub-array of the original array source with the firs..
Hello world in C and seeing what it is actually doing
One of the most simple C applications, how to compile it and how to objdump it. C #include int main() { int i; for(i=0;i < 10; i++) { puts("Hello Mac\n"); } return ..
How to download music to mp3 format from youtube using youtube-dl
How to download ABGT from youtube. youtube-dl sudo apt install python3-pip ffmpeg brew install ffmpeg brew install youtube-dl Getting this error: The operation couldn’t be completed. Un..
Sweet Alert 2 Methods and Examples
I love this alert replacement so i thought i would just add some of the examples here to show how awesome it is! You can check out the official sweet alert documents here if you want to browse throug..
Using CSS Grid instead of Float's for a 3 column simple list
I have been in the habit of just using float:left and then width 31% with margin 1% for list items, and it seems to work fine usually. But i thought i probably should update the defaults in by ..
Slick Slider Carousel with Custom Next and Prev Buttons
I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider. Note the class names: sli..
Input Suggestions using a datalist
I found this cool piece of code here, looks very handy. Basically you can add the input and then provide it a data list with suggestions, which then will allow you to start typing the item and it wil..
get php to validate its self with php check syntax
Did you know that php has a syntax checking function built into it? Well it does and this is how you can use it to check your php files for errors, rather than just running them and hoping for the be..
Console Tips and Tricks
Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..
Spam IP Database and delete button
The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..
pi400 how to take a screen shot
This is actually built in, well if you have scrot installed anyway. Which it already was for me. Press Print Screen button and it saves it into your home folder.
how to embed google fonts icons
For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..
button zoom effect with expanding background
Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..
allow internal networking connection from virtual box vm
This will allows you to access a shared folder on a Windows 10 Virtual box from Windows 11. Probably also works with other windows versions, but only tested with the host OS beinf windows 11 and the V..
youtube search api request function
This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..
list all array json function list_all_array_json
I wrote this a while ago, and i always forget the complex functions i write so ill add it here. This loads all fields and then returns them as json.
javascript random string to put on url for cache
I was having a bit of a cache issue with a external css file, so i thought i might fix this by appending a random query string to the file name. This should force the browser to recheck the file each ..
php function to remove the query string from a url
i was reusing this a few times manually and thought i would save my self a bit of time by just using the following function which returns the same full url, but removes the query string from it. ..
using php parse_url function to remove the query string from a url
I recently had to remove the query string from a url, the bit after the ?key=1 or whatever is after the actual url. I initially thought i could just use a explode function on the ? which would ..
javascript try catch example function
try catch is a good way to stop errors breaking your javascript. here is the example from the firefox mozilla with a basic try catch logging the error to your console, rather than just breaking all t..
Fix for PHP Warning Trying to get property '*name*' of non-object
i was getting this error when checking parts of an object that were sometimes set and sometimes they did not exist depending on the values. Warning / Error : Warning Trying to get property '*na..
write the contents of a url into a file with php
save the content of a url into a file with php using the following command. This grabs the $url and saves the content into the file my_file.html
load json data url or api with javascript
this loads a target json url or api using raw javascript so no jquery required with this one then logs the data returned to the console.
sqlite fetchArray into another array
was having an issue when trying to return a multi array using sqlite over multiple rows. Stack Overflow Inspiration I tried a few of these but it was not incrementing key, and also it was only..
php get file extension from a file name
this function returns the file extention, however if the file name has multiple . in it this will return a false value.
php post data back to a url with a function
this function uses curl to post back data to a url, this acts like a _POST form request from within a function. Function usage: $url the url to post the data back to e.g: $url = "https://kruxor.co..
add a divider to your dropdown nav toggles
good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>
generate random username function in php
a function that takes several random words and creates a user name from them. This will generate a user name with between one to three words and a prefix if prefix_show is set to true. usage generat..
validate email address from string with jquery working function
Here is a working example of this post validate email address from string. This has very basic checking of an email address by checking that the string has an @ and a . in it. Note: this is still no..
Using props with Stateless Functional Components in React
Here is an example of a Stateless Functional Component but i cant get the PropTypes working correctly in my demo, not sure what im doing wrong here, but the code seems to work in the compiler just not..
How to Access Props Using this.props in React
If you would like to access a class component prop within its self you can do this using the this keyword.
How to Use PropTypes to Define Props in React
React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element. To do this you can define propTypes. You can defin..
How to Override Default Props in React
The following code explains how you can override the default props in react. In this example the default of quantity is set to 0, so we can pass in quantity in the items to override its default..
log the console log output to a div
I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code. I had to modify this a b..
How to use default props in React
If you dont want to specify props every time you use an element, you can also specify defaults for these items. This can also be useful to remember which props are needed per component. This can be a..
how to join an array in javascript using the join method
This example shows how we can join an array into a string using the join method. Its a nice quick way to convert your array into a string with a delimiter such as , or ; Here we can see the test arr..
How to Pass an Array as Props in React
If you need to pass larger amounts of information to a component you can pass in an array rather than just a single variable. More information on the join method on the array can be found here. Here..
list_all_array an early stages of list all function that uses an array to pass in main variables
I think this is more neat than passing in individual variables into the list_all function, seems to work ok so far. Still in early stages of this listing function, more needs to be built into i..
replace singular variable assignment with an array loop and variable variables
I found this useful when passing in an array to a function, rather than assigning all the variables in the function manually from the array just loop through each item in the array and asign them that..
using the $_SERVER['HTTP_REFERER'] to check referring pages
shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..
How to Pass Props to a Stateless Functional Component in React
Props are like properties that you can pass into a component in react. A prop would be something like this in your component. JSX <div> <MyProp id="1234" /></div> The..
How to Render a React Class Component to the DOM
This shows how you can get react to render a component into the page or DOM. So actually getting and showing the code that you have been writing in react.
get element by id and hide it
This example gets an element by its id and hides it by setting the css style value to display none
set a cookie on click and then check if the cookie is set and dont show that message again
this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day. The cookie in this example is set to expire in a day, so then if you com..
foundation three boxes with text align links to the bottom of element
For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..
How to Compose React Components in React
In this code we nest the components NonCitrus and Citrus into the Fruits Component. Then nest the Fruits within the TypesOfFood component. Also added the additional components, Vegetables, Non..
Changing the default hero image based on the category name [not yet done]
This is more of a todo item, at the moment the hero image uses the same image for every post unless a hero is specified for each, i would also like to set the default image per category so if the post..
How to Use React to Render Nested Components
It can be useful to take components and render them inside other components while still making them into seperate items. This shows how you can take each component and nest it within another one and ..
How to Create a Component with Composition in React
This shows how you can compose multiple React components together. In this example we return the parent component which has within it the child component, you can add as many child components as requ..
using css counter-increment to add numbering to elements
i just found this element in css where you can add numbering to elements, very handy to add counters and things. This uses the counter-increment: section; in the main element and then adds the ..
using the kbd html tag
You can use the tag <kbd> to highlight keyboard shortcuts, i love this tag! Now i just need a reason to use it.
How to Create a React Component using the ES6 class method
One way to add a react component is to use the Stateless Functional Component method, and another way is to use the ES6 extends syntax. This method seems more complex than the 1st for some reason mayb..
What is a Stateless Functional Component in React
What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it. This method creates ..
How to Define a HTML Class in JSX in React
When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..
How to Render HTML Elements to the DOM with React
Once you have a JSX element defined you can write it to the page with ReactDOM.render(componentToRender, targetNode), In this example we are targeting the div with the id challenge-node. JSX ..
How to Add Comments in JSX
To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text. You do actually need the curley brackets, and have to add it under the other elements for this to wor..
adding react with JSX using babel
just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react. This is apparently not a good way to do things and can be qui..
adding react to a website in 3 steps
i was just researching how to add react to a website, and i thought i would need babel to translate or compile the JSX code, but apparently you do not need this... So ill test this here and see..
using babel for react compiling in browser
this is currently just an idea, as i saw that codepen uses babel to run react i was wondering i can do the same thing here and then just write normal react script and have babel compile it. so ..
react hello world with time and date updating
here is a react hello world with the date and time updating on setInterval 1000 miliseconds. Again with react it has to be compiled from JSX for it to work, so i have included the original and ..
react hello world with variable name
i was just testing some of the hello world examples on the react site, and as they use JSX they cant be directly entered into your code, so you need to run a pre compiler (not sure of the exact term f..
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
list group bootstrap template
this generates a bootstrap list group basic template layout, nice option for lists with links in them rather than using a ul li style list, this makes them into neater looking elements so rather than ..
list group card item template
this is a list group item for usage with the template list group or list group card template.
php html template class system
just a simple php templating system to extract your html files from within the php code into external files, makes things (or your code) a bit neater.
views list function for checking what views have been made on the current week
this is related to the views class that i added with monthly week number and yearly views, this is the function that i use to extract the top viewed pages for the week num, month num and year num. I ..
load array load all items from an array while in a sqlite load sql loop
i find this useful when loading a bunch of items in a class while looping through data, rather than assigning variables manually i just add the array of item names into the class to begin with and the..
Idea: Google Font Dropdown Selector Code
just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag. Loading the fonts Gist : not tested https://gist.github.com..
create a 200 character summary from a longer html string
this is a quick function that can create a 200 word plain text summary from a html string. Also added the option to specify the char length of the string. Function function create_summary($htm..
twitter social sharing meta tags
I had done this one so many times on client sites I actually forgot that i had not applied it to my own site! Doh! Anyway this is the tag setup i use for adding the title, url, author and featured im..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
using wp_nav_menu to show a custom menu in wordpress
found this quick code snippit here, its not working just for reference of what the array items do. Here is how you would display the menu called "Projects" PHP $..
get and show the featured image on a wordpress page template
this will extract the featured image on wordpress page if you are using custom page templates.
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
link to a custom style sheet in your theme directory wordpress
this is how you can include a manual link in your wordpress header file with a link to a stylesheet called theme.css then if you change theme names or something it will still link correctly, rather t..
wordpress add a template file to your theme
this is the basic layout of adding a wordpress template php file to your wordpress theme. good for custom theme pages This is a really basic template with just the header, but once added wordpress w..
down chevron and styles
a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down
How to record your own page views with PHP, and make them into weekly monthly and yearly charts
Building a better Simple Page View Counter Currently this site has a very basic view counter on it. Here is how it currently works. Load the page, function checks if the page has a existing r..
load from fields array php class function
this class function loads from multiple fields from an array, much easier than passing in a bunch of variables into a function nice and clean, the only issue is you need to remember what fields to add..
using a radial gradient for background overlay
usually i just use linear gradients for my background elements but i noticed this one the other day, a radial gradient. you can actually specify multiple colours and also opacity levels to overlay a ..
change selected color on input elements css
this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..
test image url that always changes unsplash placeholder
good if you are doing a test site and need some changing images for test placeholders, and they are nice looking images as well. you can just use this image tag link and specify the size required.&nb..
video not auto playing issue in chrome and brave
i had this error the other day when i was adding an auto play video to a page. the error was: Javascript Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ..
adding a new line in javascript
i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..
javascript update item in object
find something in a javascript array by its array id and then update the value of that item i changed this from an array to an object as i wanted to use something other than numbers for the index Ob..
get the value from a range input field with javascript
this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..
animated duck on footer
Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/ Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
atom on mac and synchronise settings
installing atom and syncronise settings between windows and mac versions. Install the package Syncronize Settings the package is called sync-settings but searching for sync-setting and Syncroniz..
fancybox load iframe inline
All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going.
using filter grayscale to make an image dark
lets make this image grayscale using a css filter
function to load one latest item with a start val load_latest_single_num
This is the same as load oldest item based on insdate then update the insdate to now - load_latest_single_update but it allows you to add a start number to the range, so allows you to access the 2nd, ..
make the view number zoom when mouse over or active
Lets make the view number in the header widget area a bit more exciting... Zoom on mouse over with css. Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over Simpl..
moving the hits widget into the post header and footer
I wanted to make a smaller deal of the views page widget, i was adding it as a full widget and it does not need to be that huge so moving from widget area to the top of the post. Move it down..
creating embedded php code from a database field
i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..
check if the file is a directory or check if the directory exists in php
this checks if the file is a directory or if the directory exists
create directory with php create folder with php
i thought i had already done this somewhere but i guess i didnt. Anyway here is how you can create a directory with PHP. PHP mkdir("directory_name") yep its that easy just make sure you are in the..
mouse enter mouse leave jquery hover hoverout
showing how you can do things on mouse over and then something else when the mouse leaves an element using jquery
how to bundle css files together using windows or mac
so i was wondering how to do this the other day using some modern end tools, and i found this way just do it straight from mac or windows. lets say i have these css files main.css style.css..
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
gallery carousel center mode
i found this one here, looks cool. see if i can get it working like the demo. currently getting this error on running the script i wonder if this is caused by a document ready issue? what is..
button with separated chevron
I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found. Chevron Detached Button Ex..
load random videos module using template
load 3 random items and extract the video url, and use the youtube function to create a thumbnail and link to that video page
PHP/SQLite - Load Random Item
loads a random item from the current class / db using sqlite.
still more comment spam
this is getting annoying now. so much spam. i already have the google recapture, but spam is still getting through. who runs this stuff, bots i guess. annoying. update: 10 August 2021 Still..
split a string into links using the comma
this is a common function for some field data, lets say you have a string like this. category one, category two, another category in one field or string but i want it to display like this category ..
add some foundation tabs working example
they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..
extract youtube image from video url
showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..
simple php ip blocker
just to quickly block annoying ip addresses using an array and $_SERVER['REMOTE_ADDR'] so i woke up this morning to find 200 comments from this spam ip, here is a simple script that will block that i..
vertically align text within a fixed height div using flex
this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..
how to view a web page in its printer format
if you have to check a website in its print or @media print format this is how you can emulate it in browser if you are using chrome or edge. Open the Dev Tools (usually F12) Click the menu ..
white space break word css
controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..
old browser check with javascript
modified from this script i console logged all the items available so you can do what you need with them these are the avilable variables Javascript console.log(browser.agent);console.log(browser...
search bug Above
not sure why this is still happening, need to investigate: 23 Nov 2021 this bug is still happening, i thought i fixed it, but apparently not.
CSS Drawing - Beach Scene
i did this one a while ago, cantr even remember it just appeared when i searched in google. here is an animated version, check the bottom for the css version of this:
404 Error Page Codepen
found this in my links the other day, still looks cool...
weird search results being recorded
i noticed some weird search results being recorded like this: the search function should only be recording a result if it finds a result, so this should not be added unless it can actually find thi..
foundation grid for 6.6x - also known as the foundation xy grid
some foundation grid demos for 6.6x foundation you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation more docs on this here: https://get.foundatio..
append a #link to the end of all href urls on a target
good for if you need to append target links with a # link
get last month as a number with php
this will get last month and last month as a text month e.g: 06 and June
how to make a transparent logo white with css
lets say you have a logo and its dark on a black background, how annoying is that, you still want the dark background but also want to see the logo. well with this css trick you can just make t..
fix for wordpress requesting ftp login details installing plugins
add this to wp config define('FS_METHOD', 'direct');
simple backup to google drive fron linux
i added these scripts a while ago to backup mysql databases and web files to google drive a while ago, i just run them on a daily cron to copy the backups every day. the files so the bain backup_a..
verify the google recapture server php
i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..
scroll down the page using a button click
scrolling down 600px from where you currently are on the screen demo vid
using clamp js to clamp lines of text
there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..
Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
check if a ul contains a ul li
i could not find a way to do this with just raw css so i had to use jquery /sad
for auto filled fields, need to change the text and background colours
for some reason bootstrap or the browser is doing this to auto filled fields. according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..
use a list group for listing by category page [todo]
change this to a list group, should make it neater. Page to update: https://kruxor.com/list-category/code/ so for some reason this is listed using this function PHP $list_wiki_menu = $clas..
jquery check if a sub element exists
this can be done with .length
jquery toggle menu testing
using jquery toggle to show and hide the sub menu's
Comments Listing should be a custom list rather than using search
For some reason when i listed the comments under posts on this site, i used the search function and then searched for the related uid, which maybe was easier at the time than adding an additional cate..
ajax callback to delete with sweet alert confirmation to make it cool! 😎
I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..
load the latest single item only
this function loads the lastest item from the selected class
load oldest item based on insdate then update the insdate to now - load_latest_single_update
i keep finding these functions that i wrote ages ago and forgot about so ill list them here so maybe i can remember them. I think this one was to loop through items, so it grabs the oldest item and t..
change this to a list group - other items
Other item format is a bit average, list group should fix this. This uses the template: core-list-item-simple.html So we can change this a bit to the list group format. Which i..
hero widget header - creates a nice looking hero item from a target uid and class
this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..
Latest from Code Widget
What generates the Latest from Code Widget? Code PHP $widget_latest_list = $class->list_all( $start = 0, $max = 10, &n..
prevent default click event on link
This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..
get the current month as a number
this will return the current month as an integer
make your images look non squished when not using image backgrounds v2
this is a working version of this post, for some reason that image was deleted I think due to a content upgrade. Basically this uses the object-fit: cover; to make images not stretch when they ..
show the browsers name in javascript
This function will show you an alert box with the name of your browser, however im using brave at the moment and it shows as Netscape, so i guess you cant trust the result. Also i just discover..
show the difference between two dates in years, months, days, hours and seconds
i modified this code into a function that also detects if there is any values in each item before adding it to the text.
counting the occurrence of words in a multidimensional array
array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..
target 1st td in a table with css
this css will allow you to target the 1st td in a table
write string contents to a file with php
this will create a file called my_file_name.txt in the current php working directory usually this is the same one that the script is running in and write the text yay! into that file if the file al..
backup script to google drive that can be used for multiple directories
this zips the content of the target directory and then uploads it to a google drive backup location just create a file called ~/_backup_dir.sh and then add the following BASH - _backup_dir.sh ..
backdrop-filter: blur(10px);
just testing this filter
loop through a complex object json javascript
just a note to say that a complex object is an object with more than one nested object in it for example just kinda playing around with this one to get the handle on objects and how to access them C..
load json with vanilla javascript no jquery
this basically does the same thing that a jquery .getJSON does but without the need for jquery.
json load from jquery and loop through the results
this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..
unable to access the $_FILES when submitting a form php
I was getting this weird error when submitting an image for a form upload and i could not see why the $_FILES was not set as this is where the files go from a $_POST back form in php. The error i was..
check column exists in table sqlite
this will return 1 if the column name exists in the table or 0 if it does not
set active class based on url value
this will check the full url and then loop through all the a elements in #test-div when it finds a matching url it will add the class active to that button this is good for persisting active links o..
show all methods or functions in a class (class function version)
add this to your class to show all its methods including this one... sorts the array ascending by values so should be sorted in a-z
show all methods (functions) in a class
this will show all available methods or functions within a class, once they are in a class they are called methods for some reason. print functions, show all functions, methods in a class, show met..
adding an item to an array with php
how to add items to an array in php here is a working sandbox version of this code: sandbox.
check if a variable is undefined or NULL
this will check if the check1 variable is set if it undefined or NULL it will return
foundation accordion for version 6.x
yep the foundation does weird things to this sites css, but the demo still works if you want to use the built in foundation accordions.
allow a title to be in the foreground while still having a before overlay for the background
i came across this issue recently, where a title was within an element and it needed to have a background overlay while still allowing the title to be on top of the overlay. I found the fix was..
passing in arrays to your functions rather than using variables
this is probably an old technique, but i discovered it the other day when i was playing around, and i thought wow i should do this to all my functions, i cant see the downside, apart from having to re..
check server https or http value in php using $_SERVER
this will check the server method and if its https assign the value to $server_http_val so this will either be "https://" or "http://" good for generating full url's for your domain.
check box highlight text area css
i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..
validate an email address from a form field - version 2
This javascript function will check if the email address in the text box has an @ and a . in it and return a message saying if its valid or not. This is pretty basic as it only includes checkin..
submit a form with javascript onclick
submit a form with javascript, good if you want to submit a form with a button that is not within that form. the form will require an id
get current url with php
this checks is $_SERVER['HTTPS'] is set and $_SERVER['HTTP_HOST'] $_SERVER['REQUEST_URI'] to construct the current url
list a functions variables or arguments
i think this has to be used within the function to get its arguments, i have not tested this one yet.
pre-line white space settings
this preserves line spacing but also wrapping as well
pre-wrap preserve line spacing but also wrap where needed
a class to pre-wrap your line text this preserves line spacing but also wraps the text if the line goes out of its limit
php list all the functions in a class
this should return in an array the methods or functions for a class
php print an array nicely
this works for variables and arrays
change photoshop to show px rather than pt
if your photoshop is showing pt when you select font sizes, you can change this in the settings. in the Edit menu go into Preferences and then Units and Rulers then you can change both uni..
clear a input field when it looses focus using onblur
this will cause the input field to clear when it is not in focus
python extract images into an array from a url
this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..
python Install Beautiful Soup
this allows you to install the Beautiful Soup library for python which is used for html parsing BASH python3 -m pip install beautifulsoup4 python3 -m pip show beautifulsoup4 if you get an error say..
python extract title tag from url and html using regex
this will extract the title tag as text from the url and the title tag in the following python script Python import refrom urllib.request import urlopenurl = "http://olympus.realpython.org/profiles/..
php basic page router
this php page router while pretty basic does the job for this site. it takes all the query string and splits it with the / into $p variables you will also need the following nginx or similar page rew..
git pull changes from a repository
use this to pull from an existing git repo into a new directory
commit and push changes to git repo
run this to add all files in current directory to repo and push the changes to git git add * git commit git push
start ssh and add key git
i usually add this to a .sh file and make it +x to run ssh agent and add the github key bash eval "$(ssh-agent -s)"ssh-add ~/.ssh/github
adding a background image to the titles of the dark mode card on this page
Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..
blur the background image while keeping the foreground normal
this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry
background image greyscale filter while foreground is still in colour
i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue
javascript page redirect
this one i cant add a working demo for, due to its nature, but it is working if you remove the comment. combine this with this: https://kruxor.com/view/code/wQUDM/do-something-later-with-settimeout-..
page scroll indicator research
I was wondering the other day how they do those page scroll indicators, i saw one when viewing this site: https://blog.wolfram.com/2021/03/24/the-solution-of-the-zodiac-killers-340-character-cipher..
zoom background of element when active
I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom. https://kruxor.com/view/code/kM..
Creating a chart about charts.css with charts.css from the command line
Creating a chart about charts.css with charts.css from the command line: BASH ( echo "<table class='charts-css bar show-labels show-heading'>" echo "&l..
change a select box back to its initial select value
this will reset the select box selected value back to the 1st item in its options list
select onchange
select onchange run a function this will run the check_years function when the select value is changed
add years as options to select dropdown
add the years as dropdown items between a range of years with javascript document ready js only version
using moment.js to make your time format nicer
moment.js is a very nice way to handle multiple date strings and output them in a nicer format. grab the latest copy of momen from cdnjs lets say our date is in this format, i think this is un..
loop through object json javascript
this shows how you can loop through a javascript object using for if you check the console you can see the loop results
linux mount a drive manually
this is how you can mount a drive in linux first list the drives available with: BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL or this BASH sudo blkid ok once we have th..
add a moving chevron to your href link
this adds a right chevron that moves when the link is active demo: * note: this may not show up in light mode as the chevron is white, so would need to change the color it
add click event to multiple link items and load the link content into a target div ajax
this will get a group of links with existing href targets and load them dynamically with an ajax callback you will need to also include the full jquery script as the slim one does not include the aja..
add click event to multiple link items
this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else Functions used: Javascript Wait for th..
set the html of an element javascript
this will set the innerhtml value of an element
inline form field padding
I noticed this when doing this demo (get the value of an input form element). Looks like inline form elements look pretty average when a button is added to the same line. i think this should..
get the value of an input form element (input value)
add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..
minutes to decimal calculator javascript version
trying to do a more simple version of this post. https://kruxor.com/view/code/NIjAQ/quick-tool-to-convert-time-into-decimal/ the php version requires post back to the server, so i think this c..
check if a certain query string is set then apply it to all url's on the page
this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..
check if a query string item is set in the current url
this will check and console log if a query string on this page is set to test=anything example url is: Test is not set: https://kruxor.com/view/code/XzLaT/ Test is set using & : htt..
append a query string to all url's on a page
this should append the query string test=1 to all url's on this page. if it works... make sure its added to document ready.
using text-stroke to add a border to your text
this is quite good for webkit enabled browsers, and most of them are these days. Check what is supported: https://caniuse.com/?search=webkit-text-stroke
installing exfat and ntfs drivers to enable reading of these filesystems
this will install the ntfs package on your linux system, allowing you to read and mount ntfs partitions on drives. NTFS 3G BASH sudo apt updatesudo apt install ntfs-3g This should give you the fol..
linux list all drives and partitions
the following command will list all drives and partitions in your shell BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL It should look something like this depending on your drive se..
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
using the nth-of-type selector to target a class with the same name
using the nth-of-type css selector you can target a class with the same name, using a number. I guess this can make your code a bit neater not having to add a sub class
how to check the temperature of the pi using command line
to get the temperature of the pi in shell or command line type the following: BASH vcgencmd measure_temp This measures the GPU temperature. Which should generate something like this: To get the..
how to check linux kernel version on rasberry pi rasberian
You can check which linux kernel version on rasberry pi a couple of ways, the easiest is using the uname command BASH uname -r which should give you something like this (but probably not exactly th..
how to find what version pi you are using
So i was wondering the other day how to show what raberry pi i had, rather than opening it up. you can install lshw and it can list all your hardware Install it with BASH uname -r which should gi..
Uncaught TypeError: $(...).slideToggle is not a function
Uncaught TypeError: $(...).slideToggle is not a function at toggle ((index):226) at HTMLAnchorElement.onclick ((index):239) I noticed this one today when looking up this post:https://kruxor.com/view/..
slick carousel jump to a slide on element hover
jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..
checking for spam comments function
with this function, you can scan through your incoming comments and check them for keywords the function will scan through the comment text and then provide you with a score as you get more spam com..
animated rings expanding with delay ripple water effects
just testing this one
using the last-of-type css selector to remove a border from the last item in a list
i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones. This allows me to target the..
Aligning Images in TinyMCE or Floating them left and right (code)
Here is the code for this page Aligning Images in TinyMCE or Floating them left and right
calculate a percentage (dec) difference based on two numbers
I wrote this function a while ago, but im not actually sure what its suppost to do, so ill test it here and see what it returns. I think after running this function it returns the differents in perce..
Adding HTML Templates into TinyMCE Editor
This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..
jquery page search [testing]
just testing this one at the moment for a in page search. Based on this: https://codepen.io/chriscoyier/pen/ExgqWab I would like to adapt this code to search through page elements and ma..
How to set a cookie and expire it in 30 days
Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..
how can i make my code look nice, or highlighted in evernote
* update: this is actually a paid tool, so i will be skipping this, as the code highlighting function is not that important to me. If anyone finds a nice free way to do this let me know. I have only ..
change images to upload file also to imgur [reported]
may also create a seperate db to store imgur image links? can update the source_link in the current images to link to the imgur version. I remember i did this a while ago but cant remember the code ..
enable dark mode in tinymce
Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still. You need to also includ..
codemirror htmlmixed textarea
a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting. Update: 5 Jul 2022, this is working now.
install codemirror for textareas [added]
i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer https://stackoverflow.com/questions/21085170/codemirror-how-to-insta..
box shadow example(s) - drop shadow
I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it. Related Pages: https:/..
darkmode toggle switch with local storage to remember the last selection
Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
add a youtube video preloader function, lazy load youtube [fixed]
I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..
spin rotate an element on mouse over [css]
i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass this also involves some css changes to get this working i would also like in the fut..
fix view page for search links [reported]
its still showing raw data on these view pages e.g https://kruxor.com/view/search_links/KJYU0/mt-maunganui/ Looks like that example is already out of date, here is a new one: https://kruxor..
explode a string into an array
This uses the php explode function to split a string into an array based on a delimiter character. I always forget which order this goes in.
checking the current url and then marking a link active based on that url
i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..
linking search results to view pages [finished] 🤣
I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..
change the cursor to a pointer for an element
i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..
badge placement is offset in list pages [fixed]
Another bug caused by the badge changes I think this can be added to a grid as well, and have the category on the left and the date on the right. Then need to align the category badge nicer. ..
top bar overflow issues [fixed]
So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..
make labels or badges look better
How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
include tinymce only if a user is logged into the site
For google page speed i had an issue when every page was loading tinymce, which is quite a large script. I only actually use this script when editing pages, so this is the change i made to only inser..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
How to add jquery to squarespace site
I dont use square space, but if i did and i wanted to use jquery in it. This is where i would add it... ;) Settings > Code Injection > Header Then add your script, like this one:
make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..
add a jquery date picker to your text box
This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery JQuery UI Documen..
foundation old grid format
This uses the old foundation grid style, i think it was a float grid, not sure which version it was maybe version 5 foundation. Somewhere around here: https://cdnjs.com/libraries/foundation/5.0.0&nbs..
replicating the bootstrap dropdown toggle in jquery
here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..
use an emoji on your list items ul li
I didnt think this would work but it does somehow, i guess it may differ depending on what emojis are available on your system.
background image on 3 boxes not scaling correctly fix
So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix? Pixels rather than Perce..
Windows Emoji Shortcut
I keep forgetting this shortcut so ill add it here. Windows Key + . Windows Key + ; These both pop open the emoji menu in windows. Enjoy Your Emoji's 😘
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
css prefers-color-scheme example
This uses the @media and prefers-color-scheme to check which one you have as a setting in your browser
play a sound every # of seconds
This plays a beep sound every # of seconds, to stop it just reload the page 4 Minutes is 240 4.5 Minutes is 270 5 Minutes is 300
adding pagination to custom wp_query
you can add this to your custom wp_query making sure your query also has the paging passed through to it
add paging to wp list query
this is a raw template with list query for specific category names and also includes paging, if the post number is greater than 8 posts in the included categories.
using jquery appear for checking if an element is visible on screen
Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen. Plugin Link..
Monitoring Visible Objects on Screen
i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..
using attr in css to get content from html
im not sure (yet) how this would be useful, but it shows that you can get title attribute content from a div with css
check that a number is in the correct range based on a form selection
This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..
how to install js socials for social media share buttons and make them rounded
This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages. Yeah i always just ignore these as well, but hey some people may use them?? H..
css perspective and transform css properties testing
i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird. with the ..
Fix Hover Over color on list group dark mode in bootstrap
How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
list items from blog and filter by category name
this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..
Quick tool to convert time into decimal
I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..
using linear gradient background on text css
If you want to have a background gradient on your foreground text you can use this css. I think currently this only works on webkit enabled browsers, but it looks pretty cool.
match a category id in wordpress and then add styles just for that id
this is in template-parts/content.php which may be different based on your theme or version of wordpress. you can locate the category id in wordpress by going into categories and then clicking ..
simple table stripe striping
this uses the nth-child(even) element to add color striping to the following table test table x x x &..
center everything in a div with flex-center (centre)
i usually add this to my base css styles, as a way to easily center something in the middle of an element. then you just add this flex-center class and everything will be horizontally and verti..
generating all css colours with php?
I was looking at doing this just to generate all css colours, i think the only issue is there is a lot! You can do this with rgb(0,0,0) all the way up to rgb(255,255,255) how many seperate colours is..
country select javascript check which option is selected and show a hidden element
this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country
country select javascript check which option is selected
this is an example of how you can get the selected country value with javascript from a html countries dropdown
get the current post id from content.php
this should assign the current wordpress post id to $post_id, from template-parts/content.php if you want to show it, just echo the $post_id
wordpress get the current category id name and slug
This gets and displays the current category id in a wordpress blog post if you have the current id, if not you can leave the $post_id blank and it should see if there is a category loaded to the curre..
fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty
This is usually caused by something being inside the element used to render the reCAPTCHA. In this case tinymce was adding a or a <p> tag to the element Removed the space and this f..
search a zip file with windows command prompt and 7zip
if you ever need to search for a file in a zip file this is how to do it (in windows). Also you will need to install 7zip Open a command prompt CTRL+R and type cmd cd C:\Program Files\7-Zip 7z l c..
extracting the useful bits of bootstrap
Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..
Bootstrap 4 Center menu items in a navbar
Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens. Add the follow..
certbot add a certificate for one domain
this adds a certificate for one domain and modifies the nginx config to use the certificate also giving you the option to redirect all traffic to the secure version
Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom
This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..
Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked
Apparently this error is caused by not closing the database after using it. Warning: SQLite3::query(): Unable to execute statement: database is locked. You can close the database using the fol..
simple usage for php password_hash
password_hash is used to generate a hash for a password. using this in its simple form can be good for generating a hash from some text like the following code.
enable tinymce on a target textarea by id
this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page
Bootstrap Darkmode Switch
I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..
stop tinymce replacing urls with relative url's
If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..
What is Core?
17 Aug 20 core is php content management system where the content is editable from the front end of the site, so there is no real back end to this system. i designed it to be easily extended so every..
Create a UTF8 General MySQL Database with Command
This will create a UTF8 database with the character encoding utf8_general_ci replacing the with your database name. I was manually doing this in adminer before this and selecting the encoding, this i..
fix for Uncaught TypeError: e.indexOf is not a function
fix for depreciated window load Uncaught TypeError: e.indexOf is not a function at S.fn.init.S.fn.load (jquery-3.5.1.min.js:2) at default.aspx:993 I found this error when upgrading from a..
stop overscrolling on responsive ios
this stops the site bouncing around all over the place when you try and scroll in ios
To make Ubuntu do nothing when laptop lid is closed
sudo nano /etc/systemd/logind.confchange this to ignore: `HandleLidSwitch=ignore`save the filerestart the login daemon sudo service systemd-logind restart
change string to capital words ucwords
This will change an upper case or lower case, or mixed case string to uc words. Example with this page title
change upper case case string to lower case (uppercase, lowercase)
this can change a lower case or any case into upper case using the str to upper php function Example
scroll to top html css and js
add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..
bold the numbers in a ol li list
sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:
convert a string to uppercase with php
use this function to convert a lower case or sentence case string into its uppercase form
php substr return part of a string
good if you want to .. return part of a string
loop through each directory in a target directory and compress them
this one loops through each of the target directory and also compresses each one
loop through each directory in a target directory
i thought this would be useful for backing up all files in the /var/www/html/ directory rather than having to do each seperately, this loops through all of them
add a class or remove it based on window scroll location
if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..
stretching an image to fit in a banner image with gimp
sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..
wordpress adding post custom field meta and displaying it on you template
if you want to be able to add custom post fields into your pages in wordpress and display them in your template this is how you can do it, no plugin is required for this as post meta is available by d..
get element by class name with javascript and change it function
You may have seen the get element by id in javascript, which is great when there is only one element but what if you need to get the element using its class name The issue with classes is that they c..
hide parts of a form until the 1st item is selected
this code can be used when you just want to show the 1st field on a form then when it is selected it shows the rest of the form elements
css using perspective for transforms
just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. ..
getting the site title vs the page name
this statement will check if the current page is the home page and show the get_bloginfo('name') if its another page in the site it will get that pages title using wp_title('')
wordpress get home url
this uses the global wordpress variable to retrieve the home url
add a tag to wordpress header from a plugin
when i googled this it just showed me plugins to add and remove things from the wordpress header. here is how you actually add your own tags to the wordpress header. This function will add the tag hi..
list items matching a category title
this is just raw at the moment, not tested or working. this is matching a category number at the moment so would need an additional way to link that number to the category name, or know what the categ..
fixing the website footer and making it less ugly
Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..
loading content into fancybox modal using ajax
This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked
inline fancybox modal testing
just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..
simple linear gradient overlay for an image to make it darker or lighter
i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.
wp register plugin settings admin
for usage in a wordpress plugin, this will register its settings
wordpress main nav dropdown fix
this unsets the flex and allows the menu items to stack properly in a dropdown menu, not sure if this is reusable
tar.gz to compress a directory in linux and then decompress it
a pretty common way to zip up contents in a directory into one (or technically two) archive(s). Add to tar.gz This will add the directory and all sub directories into the archive called the-archiv..
javascript isset equivalent
i was just looking for an equivalent to the isset in php for javascript, i was initially using .length but this can still cause errors so i found this solution. if (typeof my_var !== 'undefined') {}
find and replace hrefs in existing page links using jquery
sometimes i have to do these things when you cant change the source files for some reason, usually due to old code. Its kind of a patch, but it works. The reason i had to add a delay in running the fu..
Use Sweet Alert rather than alert!
i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..
get the href value using jquery
this uses the jquery attr function to get the value of the href. this example targets the first a in the card div, so running the demo should alert you with https://kruxor.com Rather than using alert..
check if a timestamp is older than one hour
this will check if the timestamp string is less or more than one hour old.
Add a post date to your custom wordpress post listing
this is an example using: get_the_date: this one gets the post date the_excerpt: which gets the .. excerpt or summary text from the post and get_the_post_thumbnail_url which gets the image from th..
making var_dump look nice
i was var_dumping an array the other day, and it comes out like a massive string you cant read. a fast way to make this readable is just to add some pre tags to it.
use javascript to open a link in a new tab or window
im not sure why you would use this rather than using the html target="_blank" but it could be useful if you needed to open a new tab in a javascript function.
Find Disk Space Usage using DU
The easiest way to check the space used in a directory in linux is this command: du -h This will do the current directory and all its sub directories. if you want to see a specific one type this d..
Nginx Server Block with Rewrite
Nginx Server Block with Rewrite Here is a basic nginx server block with rewrite to the index.php file. So it takes all the parameters and passes them into the index, into the variable $p or $_GE..
wordpress get page content to display on template page
gets the page content and displays it on a template, this must use the post loop as shown in the code.
Use Recursion to Count Down
just a slight change to the count up version of this, using unshift rather than push to the array.
Get the documentURI with JS
This function gets the current document URI assigns it to the variable documentURI so it can be reused and shows it in the result area once you click on run function.
jquery document ready with foundation init as well
here is a jquery document ready that also loads the foundation js library. im not sure if the document foundation needs to be loaded in the document ready, but this way seems to work.
center something with css not using flex
This is how you can center something in another element if you dont want to use the flex method. You will need the relative position on the outer element, and the absolute on the center one unl..
php mysql table exists function
this checks if a mysql table already exists in the selected database and returns true or false
jquery add a click function if the window size is greater than target_width
this function will add a click event to the target if the window size is greater than the target_width
js using recursion to create a range of numbers
in this we will create a function that calls its self to add to an array a range of numbers
php convert date now into a sql timestamp
an easy way to get the current date from php into a mysql or sql timestamp format, this uses the server time
add google captcha to enable and disable a form button
This will check if the google checkbox is checked and then enable or disable the form button depending on the outcome. This is just a basic version of this check, you should also check that the captu..
Using Node to get a Web Dev Environment with livereload up and running
this is how i get a live reloading dev environment up and running on my windows pc's using node , npm and browsersync.
Complex Arrow Function Example
Here is an example using a Complex or Higher Order arrow function, which slightly reduces the amount of code lines used. This should return the square root of all positive integers passed into it.
using arrow functions to convert small functions into one line statement functions
in this exercise i will take a function variable and write it in one line using the arrow function
Prevent Object Mutation
This shows how you can lock an object so its content cannot be modified. if you comment out the line Object.freeze(my_object); it will allow it to be modified again.
return a state name from an australian postcode
this will return an australian state code based on the postcode, so you can enter a valid postcode and see which state it belongs too. e.g: 2000 should return NSW
using let and const example
This example uses let and const rather than just vars, let can only be declaired once rather than overwritten like vars and const is a read only variable so it cant be changed.
using let rather than var
Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..
js - Use the Conditional (Ternary) Operator
this statement can be used instead of if this else that statements. to me it makes it look a bit more complex when reading it. this is the basic syntax. condition ? statement-if-true : statement-if-fa..
Use the parseInt Function with a Radix
This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..
Using parseInt in a function to return an integer or not
this function uses the parseInt function to return a proper integer or an error code if it can't. So this demo should return NaN for the Not an Int (x1235) and The int for the 00001235. I think that N..
Generate Random Whole Numbers within a Range
My testing for generating a random whole number within a range... 🤞 While the solution here works, it just loops until it gets a random number that is lower than the max, so not sure if this is th..
split a string into an array using split javascript
this will split the string into an array based on the spaces inbetween words. you can split it based on any character, for example if you had words in csv comma format you could use the second example..
get the current url in javascript
this will get the current address add it to a variable and show it on the result element
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
template for testing and live reloading html files
this is a template that i use while testing flat html files, if you add it to a server it will live reload. this does seem to cause issues depending on the site that is is used on, like reloading all ..
Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
copy a file when the date of the source is newer than the destination
using xcopy and a loop i found this is a good way to make sure that changes in one file make their way across to another location using a windows batch file. this one loops every 5 seconds, i think yo..
tinymce remove auto p tags setting
this is the setting to remove the automatic p tag's when pressing enter and forces the use of br tags instead which can also be toggled, if you dont want it to add anything.
get the dimensions of an image with javascript
this will show the height and width of an image using javascript
form checkbox replacement with large tick using label
this is good if you want to change a form checkbox with the default and show a fancy tick or something else, this will still check the checkbox so will work normally as the form element
check if something is an array
this function will check if something is an array
apache redirect to https ssl from normal
good if you have apache and access to htaccess file to redirect requests to https version of the site. this one also includes a rewrite to index.php so if you don't need this remove the last line.
getType function for js
this function returns the type of item, array object string number etc
Objects in javascript
creating and using an object in javascript, the full version of this testing is on codepen
card counting example from fcc
here is a solved version of the card counting function from free code camp you can test it using console log.
using switch with multiple identical cases
this can be used if you have several outcomes where the return value will be the same by omitting the break from the cases before the final
using switch in a function
This shows an example using the switch to select multiple options in a function, you can return from the switch with break, or you can end the whole function with return.
IP Address
this uses php $_SERVER['REMOTE_ADDR'] to show your IP address
js function to calculate golf scores
this function will return the score name depending on the par and strokes for golf