Search
Search Code
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 ..
flip card animation 3d front and back css html
3d flipping card with front and back content and animation
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..
Quick Embed Figtree Font
Quick embed code and test paragraph for the google font figtree
Quick Embed - Google Font - Inter
Quick Embed code for google font inter
windows robocopy /? help and usage
Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..
check if an item id exists in javascript
checks if 2 ids exist in one function and console logs the status here is the result in console log
Proxima Nova Font alternative on google fonts Figtree Embed and Quick Install Code
According to a recent google search by me the font Figtree is the closest one to the Adobe Font Proxima Nova, so lets do a quick install code for it and test if its actually the same. All Style..
shorten string php, string length php, clip string length php
I'm pretty sure i have done this function before but i cant find it due to the keywords being wrong! Here is a function that takes a string and shortens it and adds .. to the end, with the rest of th..
Google Font Embed - Play Gaming Font
Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..
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..
wrap an iframe with another div inside another div
so lets say you had an iframe within another div and that div had the class called content. you cant actually edit the page content but you can add some jquery to the page can you add a wrapper to t..
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.
Quick Embed Import and Code Samples for Google Font Roboto
quick embed codes and code examples for the google font Roboto. Roboto Font Preview
Oswald Font Quick Embed
Quick Embed code and class for Oswald Google Font. This includes all font weights and styles for the Oswald font, just add the class oswald onto your elements, or you can apply it to all page element..
using preg_match to extract text from elements
using preg_match to extract specified text from elements I also tried this search "if you have the start and end of a string extract the middle with php" as thats really all i need it to do, i have t..
Robocopy Options /? help
My usual backup command is now robocopy source destination *.* /M robocopy d:\ f:\ *.* /M Update: actually scrap that, its /E not /M, i used to use the /MIR option, but as deleting files in the des..
Quicksand font quick install
Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both.
Playfair Display Font Quick Embed - Google Font Quick Embed
Note: you only need the @import in css or the link href not both to embed this font. This font reminds me a bit of Times New Roman
a google font like muli - mulish and embed code
mulish font embed codes and styles with example
unable to write to a sqlite database with docker
turns out this was not a docker specific problem, i was getting the readonly database error. even if the database has full write permissions, the directory also needs to have write permissions ..
Lato font quick install
a quick code to install the font Lato from google, includes the stylesheet and also the @import links, just pick one.
convert a string into its html entitles using php htmlentities function
this takes a html string such as the following example and converts it into its html entities. it will take a character such as < and convert it into < so that the string is not parsed as h..
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..
function to delete older sqlite records when the limit is reached
I had an issue where a sqlite database was hitting over 100,000 records and this was causing quite a lot of lag and crashing on my server, the number of records was not really meant to be this high, s..
get tomorrows date with javascript
Same as the get yesterdays date except with a +1 rather than a -1 let tomorrow = new Date(new Date().setDate(new Date().getDate()+1));
get yesterdays date with javascript
This gets todays date and minuses one day from it to be ... yesterday. let yesterday = new Date(new Date().setDate(new Date().getDate()-1));console.log(yesterday); This format is the full da..
Using CSS Grid instead of Float's for a 3 column simple list
I have been in the habit of just using float:left and then width 31% with margin 1% for list items, and it seems to work fine usually. But i thought i probably should update the defaults in by ..
how to copy the folder path in finder
Moving from windows to mac is quite a shock, especially when you go from explorer which shows the file and folder path on every window in file explorer. Then we go to mac finder, which is nice, but h..
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..
How to use default props in React
If you dont want to specify props every time you use an element, you can also specify defaults for these items. This can also be useful to remember which props are needed per component. This can be a..
how to join an array in javascript using the join method
This example shows how we can join an array into a string using the join method. Its a nice quick way to convert your array into a string with a delimiter such as , or ; Here we can see the test arr..
Changing the default hero image based on the category name [not yet done]
This is more of a todo item, at the moment the hero image uses the same image for every post unless a hero is specified for each, i would also like to set the default image per category so if the post..
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..
create a 200 character summary from a longer html string
this is a quick function that can create a 200 word plain text summary from a html string. Also added the option to specify the char length of the string. Function function create_summary($htm..
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..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
How to record your own page views with PHP, and make them into weekly monthly and yearly charts
Building a better Simple Page View Counter Currently this site has a very basic view counter on it. Here is how it currently works. Load the page, function checks if the page has a existing r..
using a radial gradient for background overlay
usually i just use linear gradients for my background elements but i noticed this one the other day, a radial gradient. you can actually specify multiple colours and also opacity levels to overlay a ..
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..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
function to load one latest item with a start val load_latest_single_num
This is the same as load oldest item based on insdate then update the insdate to now - load_latest_single_update but it allows you to add a start number to the range, so allows you to access the 2nd, ..
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..
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
set the amount of lines to show in a textarea field
using the rows will allow you to add the specified amount of rows to the textarea you can also specify the cols which does the amount of characters width
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..
counting the occurrence of words in a multidimensional array
array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..
backup script to google drive that can be used for multiple directories
this zips the content of the target directory and then uploads it to a google drive backup location just create a file called ~/_backup_dir.sh and then add the following BASH - _backup_dir.sh ..
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..
add paging to wp list query
this is a raw template with list query for specific category names and also includes paging, if the post number is greater than 8 posts in the included categories.
css perspective and transform css properties testing
i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird. with 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.
add a class or remove it based on window scroll location
if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..
css using perspective for transforms
just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. ..
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..
loading content into fancybox modal using ajax
This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked
find and replace hrefs in existing page links using jquery
sometimes i have to do these things when you cant change the source files for some reason, usually due to old code. Its kind of a patch, but it works. The reason i had to add a delay in running the fu..
Find Disk Space Usage using DU
The easiest way to check the space used in a directory in linux is this command: du -h This will do the current directory and all its sub directories. if you want to see a specific one type this d..
Use the parseInt Function with a Radix
This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..
add a class to a div with an id javascript
a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.
Bootstrap Card Formatting HTML and CSS - Header and Footer
just a bootstrap card format with header and footer elements, makes a piece of content neat easily
using a css grid area template
here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..
Random string generator function in php suniqid
Here is a a smaller version of the built in php function uniqid() uses letters and numbers and specify the length of the random string.
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..
Making an image responsive using css
the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..
Applied Accessibility - Tab Index
using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..
Get the document root path in php $_SERVER['DOCUMENT_ROOT']
I ususally use this one if i am linking to files in the server document root folder rather than specifying ../directory/include.file.php i will use something like this: $document_root = $_..
some date formatting just day just month just year
Useful if you need to get PHP to return parts of the date. The date today in number format $date_today = date("d"); e.g: 21 Todays month name $month_name = date("F"); e.g: July ..
using custom request headers array with curl
this function passes in an array with custom request headers to curl, good if you need to pass in some headers to request an api url and give it an auth key or something like that. Also added to the a..
using vue and json data
Based on This Demo: https://jsfiddle.net/kkpLnv6k/ so i was looking through the jquery way of loading json data and was wondering what the point of loading it in with a vue.js instance is. I guess ..
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..
