List Code

Total Items found in Code is 984.
This is a collection of various code tests and descriptions on how to use them. Primarily HTML, CSS, Javascript and PHP.
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
php functions
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. 

5:51 am, November 3, 2021
javascript
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 ..

11:22 pm, November 1, 2021
php
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. ..

8:51 am, November 1, 2021
php
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 ..

5:54 am, November 1, 2021
php
add every value in the load_array array into the out for testing

quick foreach to add every variable and variable name into out and return it. good for testing.

3:40 am, October 31, 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
css
scroll left animation

1:03 am, October 29, 2021
php
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..

8:53 am, October 28, 2021
php
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  

8:43 am, October 27, 2021
javascript
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. 

4:43 am, October 26, 2021
jquery
load json data url with jquery

loads a api or json url or endpoint using jquery and console logs the result Tested working on my test json file, check the console and it should be there. 

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

2:55 am, October 25, 2021
php
php return json header and content

sets the header to json and returns a simple json formatted array.

8:43 am, October 24, 2021
php functions
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.

3:18 am, October 24, 2021
php functions
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..

3:11 am, October 24, 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
php functions
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..

5:04 am, October 23, 2021
jquery
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..

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

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

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

4:03 am, October 19, 2021
javascript
javascript basic test array and loop

Here is just a basic test array and a loop to show a basic loop through the test array.  With the loop i use the length of the array as the max variable, so the loop stops when it hits the array..

3:05 am, October 19, 2021
site bugs
add hero title to category listing page [not done]

add the hero title and background to the category listing page as a page title or category header.  e.g: https://kruxor.com/category/code/react/

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

2:24 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 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..

1:56 am, October 19, 2021
php
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..

12:15 am, October 18, 2021
php
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..

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

3:28 am, October 17, 2021
site bugs
category listing not working on categories with spaces [not fixed]

for some reason the site bugs category and potentially other categories that have spaces in their names are not listing properly. Test URL: https://kruxor.com/category/code/site+bugs/  Probab..

2:52 am, October 16, 2021
javascript
show the current date in javascript

Returns the current date and time and sets the value in a div.  Also added a demo with setinterval to update the time and date in the div every second. 

2:17 am, October 16, 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 Write a React Component from Scratch

Just testing my react component writing skills...

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

9:28 pm, October 15, 2021
javascript
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 

5:24 am, October 15, 2021
javascript
get element by id with javascript

gets an element using its id using javascript

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

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

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

11:29 pm, October 14, 2021
site bugs
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..

3:36 am, October 14, 2021
react
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 ..

3:10 am, October 14, 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
css
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 ..

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

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

11:39 pm, October 12, 2021
templates
foundation base html template - foundation template

just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.

4:17 am, October 12, 2021
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. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

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. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

minecraft
Random CSS Property

margin-inline-end

The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-inline-end css reference