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..
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..
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..
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..
Add custom symbol to ul li list and align text items
Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items. If the list items dont align correctly you will nee..
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..
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..
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..
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..
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..
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 ..
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 ..
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..
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..
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..
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.
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..
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..
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 ..
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
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..
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..
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..
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..
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..
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.
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
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..
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..
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..
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 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..
