Search
pre-wrap preserve line spacing but also wrap where needed

a class to pre-wrap your line text this preserves line spacing but also wraps the text if the line goes out of its limit
change photoshop to show px rather than pt

if your photoshop is showing pt when you select font sizes, you can change this in the settings. in the Edit menu go into Preferences and then Units and Rulers then you can change both uni..
page scroll indicator research

I was wondering the other day how they do those page scroll indicators, i saw one when viewing this site: https://blog.wolfram.com/2021/03/24/the-solution-of-the-zodiac-killers-340-character-cipher..
using moment.js to make your time format nicer

moment.js is a very nice way to handle multiple date strings and output them in a nicer format. grab the latest copy of momen from cdnjs lets say our date is in this format, i think this is un..
add a moving chevron to your href link

this adds a right chevron that moves when the link is active demo: * note: this may not show up in light mode as the chevron is white, so would need to change the color it
add click event to multiple link items and load the link content into a target div ajax

this will get a group of links with existing href targets and load them dynamically with an ajax callback you will need to also include the full jquery script as the slim one does not include the aja..
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
installing exfat and ntfs drivers to enable reading of these filesystems

this will install the ntfs package on your linux system, allowing you to read and mount ntfs partitions on drives. NTFS 3G BASH sudo apt updatesudo apt install ntfs-3g This should give you the fol..
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..
using the nth-of-type selector to target a class with the same name

using the nth-of-type css selector you can target a class with the same name, using a number. I guess this can make your code a bit neater not having to add a sub class
how to find what version pi you are using

So i was wondering the other day how to show what raberry pi i had, rather than opening it up. you can install lshw and it can list all your hardware Install it with BASH uname -r which should gi..
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..
checking for spam comments function

with this function, you can scan through your incoming comments and check them for keywords the function will scan through the comment text and then provide you with a score as you get more spam com..
Adding HTML Templates into TinyMCE Editor

This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..
how can i make my code look nice, or highlighted in evernote

* update: this is actually a paid tool, so i will be skipping this, as the code highlighting function is not that important to me. If anyone finds a nice free way to do this let me know. I have only ..
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..
using multiple text shadow

sometimes you want to use more than one text shadow, like if you want one with 2px on the bottom left and then one with 2px on the top right, so you can get a full outline or a more even shadow on you..
darkmode toggle switch with local storage to remember the last selection

Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
@import and html link to Montserrat font family google font

includes the Montserrat font family as @import in your css or add as a link in html with preconnect. also has basic usage as the .montserrat class.
set maxHeight of element by id with javascript

sets the max height value of an element with javascript demo pending
make labels or badges look better

How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
test page for the custom css 12 grid used on this site

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
easy twitter embed code

Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently.
How to add jquery to squarespace site

I dont use square space, but if i did and i wanted to use jquery in it. This is where i would add it... ;) Settings > Code Injection > Header Then add your script, like this one:
add a jquery date picker to your text box

This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery JQuery UI Documen..
use an emoji on your list items ul li

I didnt think this would work but it does somehow, i guess it may differ depending on what emojis are available on your system.
Windows Emoji Shortcut

I keep forgetting this shortcut so ill add it here. Windows Key + . Windows Key + ; These both pop open the emoji menu in windows. Enjoy Your Emoji's 😘
css prefers-color-scheme example

This uses the @media and prefers-color-scheme to check which one you have as a setting in your browser
adding pagination to custom wp_query

you can add this to your custom wp_query making sure your query also has the paging passed through to it
how to install js socials for social media share buttons and make them rounded

This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages. Yeah i always just ignore these as well, but hey some people may use them?? H..
Fix Hover Over color on list group dark mode in bootstrap

How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force 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.
setting up css variables in your stylesheet

Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..
match a category id in wordpress and then add styles just for that id

this is in template-parts/content.php which may be different based on your theme or version of wordpress. you can locate the category id in wordpress by going into categories and then clicking ..
fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty

This is usually caused by something being inside the element used to render the reCAPTCHA. In this case tinymce was adding a or a <p> tag to the element Removed the space and this f..
search a zip file with windows command prompt and 7zip

if you ever need to search for a file in a zip file this is how to do it (in windows). Also you will need to install 7zip Open a command prompt CTRL+R and type cmd cd C:\Program Files\7-Zip 7z l c..
Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom

This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..
stop tinymce replacing urls with relative url's

If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..
Create a UTF8 General MySQL Database with Command

This will create a UTF8 database with the character encoding utf8_general_ci replacing the with your database name. I was manually doing this in adminer before this and selecting the encoding, this i..
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..
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.
wordpress adding post custom field meta and displaying it on you template

if you want to be able to add custom post fields into your pages in wordpress and display them in your template this is how you can do it, no plugin is required for this as post meta is available by d..
add a tag to wordpress header from a plugin

when i googled this it just showed me plugins to add and remove things from the wordpress header. here is how you actually add your own tags to the wordpress header. This function will add the tag hi..
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..
Use Sweet Alert rather than alert!

i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..
Add a post date to your custom wordpress post listing

this is an example using: get_the_date: this one gets the post date the_excerpt: which gets the .. excerpt or summary text from the post and get_the_post_thumbnail_url which gets the image from th..
load a youtube video in a fancybox modal

With just a couple of lines of js and html you can load your video links in a modal lightbox. Get the latest version of the fancybox scripts (just the links) from here: https://cdnjs.com/libraries/fa..
Using the rest operator to pass in a variable amount of arguments

If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...
card counting example from fcc

here is a solved version of the card counting function from free code camp you can test it using console log.
IP Address

this uses php $_SERVER['REMOTE_ADDR'] to show your IP address
using local storage rather than cookies to store data (localStorage)

you can see what is stored in local storage by typing this into your browser console. localStorage Adding something You can add something to local storage by using the setItem function.
using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.
using scroll-behavior: smooth css

This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..
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..
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..
using the disk free space function in php

here is a built in php function that will show the amount of free space available on your server.
asp classic get a url and display it

gets a url and displays it using XMLHTTP
page load timer class

usage: $page_timer = new page_timer; // at the start of your code echo $page_timer->end(); // at the end of your code.
remove all of an element in a string <h1>

good if you want to remove all of the instances of an element in a string like if you have a <h1> tag in your string and want to remove it you can use the following code. $additional = "some te..
wordpress change domain in config

When moving wordpress sites around the place its usually easiest to change the domain like this. add these to your wp-config.php file define('WP_HOME','http://newsite.com'); define('WP_SITEURL','ht..
wordpress enqueue slicknav and slick slider

add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..
wordpress include jquery in theme functions

Add this to your themes functions.php file, to include your own version of jquery. if (!is_admin()) add_action("wp_enqueue_scripts", "jquery_enqueue", 11); function jquery_enqueue() { wp_deregi..
wordpress use a shortcode in php gravity forms

good for using shortcodes in your wordpress templates
wordpress show posts loop with feature image thumbnail

this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..
show errors in php with toggle

Toggle showing errors in php if your server is configured not to show them, good for testing. If you dont have this enabled it will usually just show a 500 error with no details of where the error o..
google map with overlay data

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..
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..
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..
do something later with settimeout or loop with setinterval

setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..
clipboard copy js

for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..
document ready wordpress jquery

Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working.
set and check a cookie using js cookie

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..
jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..
meta refresh reload page

this can use a meta tag to get the browser to reload the current page. the following code will reload the page every 30 seconds. usually you have to add meta tags into the header of your page, not ..
using foundation 6.4 xy grid basics

.grid-x .cell { border:1px solid #CCC; } Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout add some style to show the ..
youtube extract thumbnail from video link

Good if you need to extract the ^^ for some reason. replace $v with your video id. raw links https://img.youtube.com/vi/$v/default.jpg https://img.youtube.com/vi/$v/hqdefault.jpg max size https..
make all links target new window

I was actually searching for a js way to do this, but i found this instead. Here is a really easy way to make all links target a _blank window. Just add this to your <head>. <base targ..
css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..
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..
embed and use a ttf font font face

Handy if google fonts does not have your required font and you have the correct licence for showing it on your site... ;) css /* Include the font, you can call it whatever you like */ @font-face ..
truncate text long titles with text overflow ellipsis

this one can be useful for fitting text into smaller places without it looking broken. text-overflow: ellipsis; this basically adds the 3 dots where the end of the text used to be... Also if you are ..
transitions and the easy way to apply them

Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..
material design icons google font

you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..
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 ..
make your images look non squished when not using image backgrounds

i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set the height and width of it. this method is fine u..