Search
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..
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..
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..
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 ..
how to copy the folder path in finder
Moving from windows to mac is quite a shock, especially when you go from explorer which shows the file and folder path on every window in file explorer. Then we go to mac finder, which is nice, but h..
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..
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 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..
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..
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..
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..
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 ..
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..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
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, ..
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..
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
set the amount of lines to show in a textarea field
using the rows will allow you to add the specified amount of rows to the textarea you can also specify the cols which does the amount of characters width
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..
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..
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 ..
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..
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.
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 ..
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.
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..
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. ..
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..
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
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..
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..
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 ..
add a class to a div with an id javascript
a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.
Bootstrap Card Formatting HTML and CSS - Header and Footer
just a bootstrap card format with header and footer elements, makes a piece of content neat easily
using a css grid area template
here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..
Random string generator function in php suniqid
Here is a a smaller version of the built in php function uniqid() uses letters and numbers and specify the length of the random string.
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..
Making an image responsive using css
the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..
Applied Accessibility - Tab Index
using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..
Get the document root path in php $_SERVER['DOCUMENT_ROOT']
I ususally use this one if i am linking to files in the server document root folder rather than specifying ../directory/include.file.php i will use something like this: $document_root = $_..
some date formatting just day just month just year
Useful if you need to get PHP to return parts of the date. The date today in number format $date_today = date("d"); e.g: 21 Todays month name $month_name = date("F"); e.g: July ..
using custom request headers array with curl
this function passes in an array with custom request headers to curl, good if you need to pass in some headers to request an api url and give it an auth key or something like that. Also added to the a..
using vue and json data
Based on This Demo: https://jsfiddle.net/kkpLnv6k/ so i was looking through the jquery way of loading json data and was wondering what the point of loading it in with a vue.js instance is. I guess ..
copy image to data uri using chrome base64 encode
Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome. Found this one useful if you want to convert an image to base64 encode and link it directly in css or ht..
