Search
Search Code
Search Code by entering your search text above.
vscode
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..

12:52 am, May 11, 2022
html
Facebook HTML for Sharing a Link

just the html for the link, that is all. Replace kruxor.com with your url to share E.g: share to facebook

4:55 am, May 4, 2022
javascript
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... 

12:43 am, May 3, 2022
ssh
generate a new SSH key on mac for git

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

3:51 am, April 22, 2022
git
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..

3:23 am, April 22, 2022
fonts
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..

4:32 am, April 4, 2022
javascript
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..

2:37 am, March 28, 2022
css
center a box in the middle of the screen

and then center everything in that box as well

11:57 pm, March 15, 2022
php
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

1:09 am, March 15, 2022
javascript
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..

3:21 am, March 11, 2022
php
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 ..

1:04 am, March 9, 2022
html
Regions of New Zealand - In Dropdown Form

Split into north and south island lists Also added a combined list, with a disabled options for north and south. /your welcome! :)

3:18 am, February 25, 2022
javascript
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..

2:33 am, February 25, 2022
php
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()..

11:45 am, February 15, 2022
javascript
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 ..

4:17 am, February 14, 2022
CSS
CSS Only Table Stacking Solution

11:24 pm, February 8, 2022
css
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. 

12:27 pm, January 18, 2022
html
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..

12:01 pm, January 18, 2022
php
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..

4:00 am, January 18, 2022
bootstrap
bootstrap form basic

a nice simple bootstrap form layout example template

11:49 pm, January 17, 2022
html
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..

12:19 pm, January 17, 2022
javascript
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

5:55 am, December 29, 2021
javascript
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..

12:47 am, December 17, 2021
mac
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..

2:17 am, December 12, 2021
html
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..

12:58 am, December 6, 2021
php functions
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..

5:45 am, December 1, 2021
javascript
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..

11:47 am, November 29, 2021
pi400
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.

6:40 am, November 20, 2021
mac
install cmatrix on mac m1

For some reason i thought the mac would have apt or apt-get to install packages, but apparently not.  Here is how you can install cmatrix a matrix emulator or other unix type terminal apps on ma..

2:31 am, November 19, 2021
icons
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..

12:21 am, November 17, 2021
php
php get file and save it

gets a file from a url and saves it to your local server

10:57 pm, November 4, 2021
php functions
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..

2:04 am, November 4, 2021
javascript
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..

2:01 am, October 29, 2021
bootstrap
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>

2:38 am, October 24, 2021
react
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.

5:15 am, October 19, 2021
react
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..

4:40 am, October 19, 2021
javascript
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..

2:01 am, October 19, 2021
react
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..

12:24 am, October 16, 2021
react
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..

2:56 am, October 14, 2021
react
How do Self-Closing JSX Tags Work?

So in JSX all the tags must be closed, other wise it can break the element. for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include..

12:10 am, October 12, 2021
react
Create a Complex JSX Element

JSX must return a single element, so you must wrap your items in a div element you cant just return a bunch of p tags.  Define a new constant JSX that renders a div which con..

11:28 pm, October 11, 2021
react
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..

4:00 am, October 11, 2021
php
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.

11:31 pm, October 7, 2021
php
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..

11:16 pm, October 5, 2021
html
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..

11:51 am, October 5, 2021
sections
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..

5:50 am, October 1, 2021
wordpress
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. 

4:07 am, September 29, 2021
wordpress
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..

2:35 am, September 28, 2021
wordpress
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..

1:13 am, September 28, 2021
php
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..

2:01 am, September 23, 2021
javascript
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 ..

2:34 am, September 20, 2021
javascript
twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

9:33 am, September 10, 2021
apps
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..

12:42 am, September 6, 2021
jquery
simulate a click on an element with jquery

you can actually use jquery to simulate a click event using the following .click() so as soon as the document is ready and you have jquery loaded it will run the click event for you, and should pop ..

3:41 am, August 23, 2021
css
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..

9:52 am, August 16, 2021
php
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 ..

3:52 am, July 31, 2021
javascript
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...

2:56 am, July 26, 2021
javascript
check browser version and show a message

a button that displays your browser version in a modal Demo (gif)

6:47 am, July 23, 2021
php
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..

12:45 am, June 25, 2021
site documentation
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..

12:11 am, June 17, 2021
javascript
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..

4:29 am, June 11, 2021
javascript
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..

1:59 am, June 8, 2021
css
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 ..

6:22 am, June 4, 2021
javascript
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..

3:49 am, June 4, 2021
php
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..

4:19 am, June 3, 2021
linux
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  ..

5:26 am, May 26, 2021
php
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..

4:52 am, May 18, 2021
php
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

4:32 am, May 13, 2021
php
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..

1:11 am, May 11, 2021
php
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. 

12:29 am, May 11, 2021
javascript
fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

4:12 am, May 10, 2021
php
Remove background image php with image magic

untested research on removing background and making it transparent with php

12:12 am, May 3, 2021
css
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

3:38 am, April 20, 2021
apps
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..

2:11 am, April 7, 2021
javascript
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..

11:18 pm, March 24, 2021
javascript
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..

11:15 pm, March 16, 2021
css
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

10:10 pm, March 11, 2021
jquery
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..

3:51 am, March 9, 2021
css
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   

12:23 am, February 22, 2021
linux
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..

4:56 am, February 20, 2021
linux
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..

4:50 am, February 20, 2021
css
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

2:44 am, February 19, 2021
linux
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..

2:19 am, February 17, 2021
javascript
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..

4:00 am, February 15, 2021
php
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..

5:27 am, February 10, 2021
javascript
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..

12:14 am, February 5, 2021
javascript
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..

9:51 am, February 2, 2021
apps
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 ..

9:36 am, February 2, 2021
apps
TortoiseSVN for updating wordpress plugins

For updating wordpress plugins, and probably other SVN related stuff, i found that using TortoiseSVN is the easiest. For windows anyway.  Just go to the downloads page, and pick the correct flav..

11:10 pm, January 28, 2021
css
using multiple text shadow

sometimes you want to use more than one text shadow, like if you want one with 2px on the bottom left and then one with 2px on the top right, so you can get a full outline or a more even shadow on you..

3:37 am, January 22, 2021
javascript
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..

8:49 am, January 21, 2021
css
@import and html link to Montserrat font family google font

includes the Montserrat font family as @import in your css or add as a link in html with preconnect. also has basic usage as the .montserrat class.

11:58 pm, January 19, 2021
javascript
set maxHeight of element by id with javascript

sets the max height value of an element with javascript demo pending

3:59 am, January 1, 2021
css
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..

6:09 am, December 31, 2020
html
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.

5:38 am, December 23, 2020
html
easy twitter embed code

Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently. 

3:26 am, December 23, 2020
javascript
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:

11:39 pm, December 22, 2020
jquery
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..

12:56 am, December 22, 2020
css
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.

4:53 am, December 11, 2020
windows
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 😘

1:58 am, December 10, 2020
css
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

12:06 pm, December 7, 2020
wordpress
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

12:29 am, December 4, 2020
javascript
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..

5:42 am, November 23, 2020
bootstrap
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..

12:31 am, November 23, 2020
css
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.

12:02 am, October 26, 2020
css
setting up css variables in your stylesheet

Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..

5:36 am, October 14, 2020
wordpress
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 ..

6:20 am, September 29, 2020
php
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..

12:13 am, September 25, 2020
js
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 &nbsp; or a <p> tag to the element Removed the space and this f..

5:43 am, September 18, 2020
windows
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..

1:09 pm, September 8, 2020
php
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..

1:08 am, August 26, 2020
javascript
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..

12:55 am, August 18, 2020
sql
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..

4:05 am, August 13, 2020
html
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..

1:13 am, July 21, 2020
css
adding pulsating dots to your css ul li list

get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.

3:26 am, June 26, 2020
wordpress
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..

1:33 am, June 24, 2020
wordpress
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..

4:44 am, June 16, 2020
wordpress
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..

4:08 am, June 12, 2020
javascript
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..

11:35 pm, May 7, 2020
wordpress
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..

5:49 am, May 4, 2020
html
load a youtube video in a fancybox modal

With just a couple of lines of js and html you can load your video links in a modal lightbox. Get the latest version of the fancybox scripts (just the links) from here: https://cdnjs.com/libraries/fa..

10:46 pm, March 2, 2020
javascript
Using the rest operator to pass in a variable amount of arguments

If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...

5:49 am, October 1, 2019
javascript
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.

2:00 am, July 29, 2019
php
IP Address

this uses php $_SERVER['REMOTE_ADDR'] to show your IP address

1:30 am, July 26, 2019
javascript
using local storage rather than cookies to store data (localStorage)

you can see what is stored in local storage by typing this into your browser console. localStorage Adding something You can add something to local storage by using the setItem function.

11:31 pm, July 16, 2019
css
using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

2:57 am, July 16, 2019
css
using scroll-behavior: smooth css

This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..

2:33 am, July 8, 2019
css
Making Images Retina Display Friendly

Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regu..

12:14 am, July 2, 2019
html
Dropdown Box with Searchable Text

Here we have a dropdown select box, that you can type into to search the available options. No Javascript Required for this the browser does all the work. Press into the text box, and you will see a..

11:57 pm, June 30, 2019
php
using the disk free space function in php

here is a built in php function that will show the amount of free space available on your server.

1:33 am, June 7, 2019
asp
asp classic get a url and display it

gets a url and displays it using XMLHTTP

12:08 am, March 20, 2019
php
page load timer class

usage: $page_timer = new page_timer; // at the start of your code echo $page_timer->end(); // at the end of your code.

12:17 am, October 30, 2018
php
remove all of an element in a string &lt;h1&gt;

good if you want to remove all of the instances of an element in a string like if you have a <h1> tag in your string and want to remove it you can use the following code. $additional = "some te..

6:25 am, August 31, 2018
wordpress
wordpress change domain in config, wordpress domain config

When moving wordpress sites around the place its usually easiest to change the domain like this. add these to your wp-config.php file define('WP_HOME','http://newsite.com'); define('WP_SITEURL','ht..

6:20 am, August 31, 2018
wordpress
wordpress enqueue slicknav and slick slider

add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..

6:20 am, August 31, 2018
wordpress
wordpress include jquery in theme functions

Add this to your themes functions.php file, to include your own version of jquery. if (!is_admin()) add_action("wp_enqueue_scripts", "jquery_enqueue", 11); function jquery_enqueue() { wp_deregi..

6:20 am, August 31, 2018
wordpress
wordpress use a shortcode in php gravity forms

good for using shortcodes in your wordpress templates

6:20 am, August 31, 2018
wordpress
wordpress show posts loop with feature image thumbnail

this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..

6:20 am, August 31, 2018
php
show errors in php with toggle

Toggle showing errors in php if your server is configured not to show them, good for testing. If you dont have this enabled it will usually just show a 500 error with no details of where the error o..

6:20 am, August 31, 2018
js
google map with overlay data

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..

6:20 am, August 31, 2018
js
flems embed in url

Flems.io is a single-file, embeddable Web sandbox. It keeps all its state in the URL, so just make your changes, copy the URL from the address bar, and send it wherever you please. Most popular link s..

6:20 am, August 31, 2018
js
load google sheet data into json string with jquery

Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..

6:20 am, August 31, 2018
js
do something later with settimeout or loop with setinterval

setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..

6:20 am, August 31, 2018
js
clipboard copy js

for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..

6:20 am, August 31, 2018
jquery
document ready wordpress jquery

Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working.

6:20 am, August 31, 2018
js
set and check a cookie using js cookie

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..

6:20 am, August 31, 2018
js
jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..

6:20 am, August 31, 2018
html
meta refresh reload page

this can use a meta tag to get the browser to reload the current page. the following code will reload the page every 30 seconds. usually you have to add meta tags into the header of your page, not ..

6:20 am, August 31, 2018
html
using foundation 6.4 xy grid basics

Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..

6:20 am, August 31, 2018
html
youtube extract thumbnail from video link

Good if you need to extract the ^^ for some reason. replace $v with your video id. raw links https://img.youtube.com/vi/$v/default.jpg https://img.youtube.com/vi/$v/hqdefault.jpg max size https:/..

6:20 am, August 31, 2018
html
make all links target new window

I was actually searching for a js way to do this, but i found this instead. Here is a really easy way to make all links target a _blank window. Just add this to your <head>. <base targ..

6:20 am, August 31, 2018
html
Form elements New Zealand region list

A list of the Regions of New Zealand converted into a form element select option dropdown. Sorted in alphabetical order. Ready to paste into your own form.

6:20 am, August 31, 2018
css
css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

6:20 am, August 31, 2018
css
bootstrap styled buttons

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..

6:20 am, August 31, 2018
css
embed and use a ttf font font face

Handy if google fonts does not have your required font and you have the correct licence for showing it on your site... ;) css /* Include the font, you can call it whatever you like */ @font-face ..

6:20 am, August 31, 2018
css
truncate text long titles with text overflow ellipsis

this one can be useful for fitting text into smaller places without it looking broken. text-overflow: ellipsis; this basically adds the 3 dots where the end of the text used to be... Also if you are ..

6:20 am, August 31, 2018
css
transitions and the easy way to apply them

Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..

6:20 am, August 31, 2018
css
material design icons google font

you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..

6:20 am, August 31, 2018
css
targeting the printed version of a page with media print

there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..

6:20 am, August 31, 2018
css
make your images look non squished when not using image backgrounds

Update: Fixed the code, you can see it here.  i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

Random Quote

"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."

I just checked google books for BFG, and the dedication is there. 

https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1 


Roald Dahl, 1986
Random CSS Property

rotate()

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.
rotate() css reference