Search
Search Code
Search Code by entering your search text above.
css
css cursor types testing

testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system.  refs https://developer.mozilla.org/e..

5:44 am, February 27, 2024
css
flip card animation 3d front and back css html

3d flipping card with front and back content and animation

11:15 pm, February 15, 2024
fonts
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..

3:12 am, December 12, 2023
html
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.   

4:26 am, March 27, 2023
html
pulse map dots

bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below.  modified from here: e.g: 

12:14 am, November 8, 2022
cookies
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..

12:19 am, September 20, 2022
fonts
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..

4:58 am, September 19, 2022
javascript
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.

12:42 am, August 31, 2022
css
rainbow text background clip with linear gradient

testing using background clip with a linear gradient background colour to make the text appear rainbow colours 🌈 

2:02 am, July 6, 2022
Site Updates
Welcome Widget Card - Toggle

Testing the welcome widget with a more or less toggle.  This version seems to work, with a jquery slide toggle. 

5:07 am, June 10, 2022
linux
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..

12:30 am, June 1, 2022
css
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;

1:32 am, May 4, 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
svg
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..

8:46 am, February 17, 2022
node
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..

4:00 am, January 28, 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
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
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
react
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..

9:18 am, October 11, 2021
react
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..

8:49 am, October 11, 2021
react
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 ..

8:41 am, October 11, 2021
ideas
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..

8:55 am, October 6, 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
css
ken burns slow image zoom

No i had never heard of Ken Burns either, but hey i like the zoom effects.  Slow Zooom...

4:04 am, September 22, 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
javascript
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..

5:17 am, August 10, 2021
css
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 ..

6:26 am, July 28, 2021
css
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:  

1:24 am, July 20, 2021
css
404 Error Page Codepen

found this in my links the other day, still looks cool...

1:16 am, July 16, 2021
linux
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..

1:04 am, June 27, 2021
javascript
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..

11:17 pm, June 22, 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
python
python import and print url

here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..

1:11 am, April 4, 2021
css
logo tickers marquee slow scrolling

logo tickers with a slide animation

12:07 am, March 14, 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
css
animated rings expanding with delay ripple water effects

just testing this one

5:00 am, February 10, 2021
css
css slow zoom in animation

give a bit of extra interest to otherwise static images

2:57 am, February 10, 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
css
box hover over effects using pulsate animation

Bit of a different box hover over effect. Just using the pulse animation.

12:05 am, January 27, 2021
javascript
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..

12:07 am, December 1, 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
bootstrap
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..

5:14 am, August 31, 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
webdev
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 ..

3:43 am, June 6, 2020
windows
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.

12:38 am, November 11, 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
css
Drop Down Menu Swapping Left align to Right

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..

5:36 am, June 26, 2019
php
file get contents reads entire file into a string

you can use the file_get_contents function to read a file or a web address usage get a url content $homepage = file_get_contents('http://www.example.com/'); echo $homepage; get a file 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
mithril testing

https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..

6:20 am, August 31, 2018
html
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..

6:20 am, August 31, 2018
emoji
emoji data - version 1.0

  Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: 20..

6:20 am, August 31, 2018
html
video embed full screen all screen sizes

this will make a video cover the full screen of the browser no matter what size it is. It will do some cropping to make it fit. <style> body, html { margin:0; padding:0; } .video-cont..

6:20 am, August 31, 2018
html
video embed tag

to embed a video in a web page example Video not suported, download it here. code <video width="100%" height="340" preload="none" poster="myImage.jpg" autoplay loop controls&g..

6:20 am, August 31, 2018
html
video embed no controls

embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..

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
color cycle drop shadow - rainbow drop shadow

Just incase you are bored with a static shadow, here you can cycle through a bunch of different shadow colours. .cycle-shadow { -webkit-animation:img-cycle 3s infinite; animation:img-cycle 3s i..

6:20 am, August 31, 2018
css
cycle color using background

I found this the other day (well today actually) and i wanted to see how it worked. background-image: -webkit-linear-gradient(left,#D68AB0 0%,#D8CE5D 25%,#6BD85D 50%,#5DB9D8 75%,#D85DCB 100%); ..

6:20 am, August 31, 2018
css
click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

6:20 am, August 31, 2018
css
more complex responsive tables css

i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..

6:20 am, August 31, 2018
css
remove border glow css from textarea on select

how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..

6:20 am, August 31, 2018
css
flex align center vertical horizontal

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

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
use font awesome on elements lists ul

good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..

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. 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
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

mask-composite

The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.
mask-composite css reference