List Code

Total Items found in Code is 985.
This is a collection of various code tests and descriptions on how to use them. Primarily HTML, CSS, Javascript and PHP.
mysql
clean excess binary logs from mysql - free up space

Update: 30 July 2023 I actually prefer this command, i just have to figure out why im getting so many binlog files! MYSQL PURGE BINARY LOGS BEFORE '2023-07-30 00:00:00';PURGE BINARY LOGS BEFORE NOW..

1:16 am, July 4, 2023
wordpress
display a subnav for the current wordpress page

good if you are doing custom page work and need to show the current sub nav somewhere other than the main menu. 

1:59 am, August 1, 2023
sqlite
mysql to sqlite notes

  ### MySQL to SQLite converterhttps://pypi.org/project/mysql-to-sqlite3/https://github.com/dumblob/mysql2sqlitehttps://stackoverflow.com/questions/3890518/convert-mysql-to-sqlite ```pip instal..

4:33 am, August 3, 2023
wordpress
wordpress block grid code

the basic wordpress grid column layout this is a 3 col layout

1:25 am, September 5, 2023
html
Video different sources on screen sizes video embed html responsive

video embed tag using media tag to switch video sources depending on screen size This example will switch the video souce at 800px screen width.

1:31 am, September 6, 2023
wordpress
wordpress jquery find and replace option text value

renames the Select Category in the option value 1 to Topics add to the footer, uses jQuery rather than $ but you can just switch to $ if not using the wordpress jquery init. 

1:03 am, October 18, 2023
html
Using the HTML tag details for easy accordions

Using the HTML Tag ` ` for automatic accordions.

12:32 am, October 27, 2023
fonts
Quick Embed Figtree Font

Quick embed code and test paragraph for the google font figtree

3:08 am, December 5, 2023
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
font awesome spinner loader loading spinner

just a simple font awesome spinner to use for loading areas

11:48 pm, December 12, 2023
css
css grid container with 4 auto columns

12:58 am, December 22, 2023
windows
How to Enable Linux Subsystem in Windows

Enabling the linux subsystem in windows allows you to use linux within windows.  To enable linux sub system in windows you can do the following.  In the start menu type "Windows features..

11:35 pm, January 8, 2024
css
use an image in your list items ol ul li

replacing the default ul li list with an image prefix

12:02 am, January 15, 2024
svg
green circle tick svg

converted into inline css and html

12:06 am, January 15, 2024
css
Kinda Crappy 3D button code

11:47 pm, January 22, 2024
templates
4 box custom grid with responsive

simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid

2:50 am, February 5, 2024
css
four box grid css html custom

re-usable four box grid with gap calculations

12:37 am, February 7, 2024
css
six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

12:38 am, February 7, 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
css
CSS Object Fit for Image fill rather than using background image on a div

CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size.  Object Fit You can use: object-fit: With the following ..

3:47 am, February 23, 2024
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
js
jqueryui date selector with examples and code with custom date formatting

Datepicker using jquery ui with current date and date formatting. as dd-mm-yy Example Date formatting with selector  

6:12 am, February 27, 2024
css
css html vertical center

seems to break this layout... there must be a better way... 

11:54 pm, March 3, 2024
misc
php simple html dom
find a custom data attribute in simple html dom

locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs

12:39 pm, March 13, 2024
wordpress
add a page template in a wordpress theme

duplicate the page.php to a new php file usually with the template name as the file name with no spaces file in wordpress theme and add the following line to the top.

12:31 am, March 15, 2024
css
Left Fixed nav with right fluid content

left fixed nav section with right fluid section css and html using flexbox

12:43 am, March 15, 2024
wordpress
wordpress
extract a wordpress menu using its id

when you edit the menu in wordpress you can check the url, and it will have the id to extract in the following string: /wp-admin/nav-menus.php?menu=12

1:25 am, March 15, 2024
css
rotate an element when its selected

add and remove the class open to rotate

11:30 pm, March 21, 2024
css
rotate an element when its hover

add and remove the class open to rotate

11:31 pm, March 21, 2024
php
echo the page id from wordpress

11:42 pm, March 21, 2024
wordpress
css
make an image or element grayscale switch on mouse over

mouse over the image to see the effect also used: transitions random image

2:21 am, April 26, 2024
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


Me
Random CSS Property

width

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.
width css reference