Search

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

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..

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..

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..

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

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..

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   

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..

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 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

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..

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..

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..

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..

* 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 ..

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..

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..

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..

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.

sets the max height value of an element with javascript demo pending

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..

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.

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

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:

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..

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

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 😘

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

you can add this to your custom wp_query making sure your query also has the paging passed through to it

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..

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..

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.

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. ..

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 ..

This is usually caused by something being inside the element used to render the reCAPTCHA. In this case tinymce was adding a &nbsp; or a <p> tag to the element Removed the space and this f..

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..

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..

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..

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..

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..

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.

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..

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..

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..

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..

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..

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..

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

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

this uses php $_SERVER['REMOTE_ADDR'] to show your IP address

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 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.

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 ..

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..

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..

here is a built in php function that will show the amount of free space available on your server.

gets a url and displays it using XMLHTTP

usage: $page_timer = new page_timer; // at the start of your code echo $page_timer->end(); // at the end of your code.

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..

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..

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'] != ..

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..

good for using shortcodes in your wordpress templates

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..

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..

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.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..

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..

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..

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..

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.

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..

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..

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 ..

.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 ..

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..

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..

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..

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..

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 ..

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 ..

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..

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 ..

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 ..

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..