Search
video not auto playing issue in chrome and brave
i had this error the other day when i was adding an auto play video to a page. the error was: Javascript Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ..
moving the hits widget into the post header and footer
I wanted to make a smaller deal of the views page widget, i was adding it as a full widget and it does not need to be that huge so moving from widget area to the top of the post. Move it down..
foundation grid for 6.6x - also known as the foundation xy grid
some foundation grid demos for 6.6x foundation you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation more docs on this here: https://get.foundatio..
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]
I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
linking search results to view pages [finished] 🤣
I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..
badge placement is offset in list pages [fixed]
Another bug caused by the badge changes I think this can be added to a grid as well, and have the category on the left and the date on the right. Then need to align the category badge nicer. ..
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.
bootstrap basic grid layout
nice and easy copy and paste for a basic grid layout
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
Quick tool to convert time into decimal
I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
fancybox modal popup example
an example showing fancybox text modal window attached to a button to open it
using arrow functions to convert small functions into one line statement functions
in this exercise i will take a function variable and write it in one line using the arrow function
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
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.
Viewport width and height calculations
Rather than using px and em you can also use the vw and vmin to resize elements which depend on the width and height of the display.
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..
uniqid random string
Here is a smaller implimentation of the built in uniqid() function. Good if you want to generate smaller unique strings for url's uniqid example suniqid(5) function suniqid($len = 5) { $..
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..
stacktable jQuery plugin for stacking tables on small screens
stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..
using foundation 6.4 xy grid basics
Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..
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:/..
emoji data
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: ..
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 ..
stack a table using css responsive
this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..
