Bind 'this' to a Class Method

Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..

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

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. 

fancybox youtube showing video links in a lightbox - updated with fixed code parts

do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it. you will need jquery and fanc..

sqlite escape string

simple sqlite php escaped string https://www.php.net/manual/en/sqlite3.escapestring.php 

make clickable element with clickable class open link in new window

makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..

Return a file extention from a string

This php function returns a file extention from a string.  I think it will only work if the string does not have any additional . in it.  I think a better way to do this function would be ..

Slick slider code testing with slower slides and auto play on videos

additional testing with changes for slick slider videos and auto play

Chat GPT slick slider code testing

slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..

Check free space amount and show it in a nice human readable format

this checks the disk space amount on the linux macine and returns the result in human readable form.  df -H Usually this will show it in the following format. Example below. 

add ssh keys on your linux box in 10 seconds

Here i was typing in the ssh password over and over when connecting to ssh, when i could have just typed this one command and had my ssh keys copied to my linux box! What was i doing all that time! :..

windows robocopy /? help and usage

Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..

how to show your DNS in windows and then copy it to the clipboard in one command

Here is how you can show your current DNS server in windows command line and then copy it to the clipboard, ready for pasting.  Open Windows Command Prompt<windows key> + R Type cmd ..

slick slider section quick add

everything you need for a quick slide section

four box section template in foundation with classes find and replace (4 box)

this section uses the large-auto classes so you can add or remove boxes easily.  find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..

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

four box responsive section with all classes find and replace boxsection title foundation grid (4 box)

four box responsive grid, find and replace the word... boxsection with your new section name to generate all class names and section names to match for rapid section creation. Demo Codepen

cookie consent quick install script js html css vanilla

Found this super slick looking cookie consent script here, looks awesome, and its easy to install (i hope). https://github.com/orestbida/cookieconsent  CDN Links https://cdn.jsdelivr.net/gh/or..

two box responsive section with all classes find and replace boxsection title foundation grid (2 box)

easy copy and paste section and find replace the word boxsection with your new class names, using foundation grid.

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.

Map Image with Easy Dots and Titles using only CSS

I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..

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

Load fancybox modal on hash check

I was just testing this code, not working on the hash check as yet. 

Welcome Widget Card - Toggle

Testing the welcome widget with a more or less toggle.  This version seems to work, with a jquery slide toggle. 

add a custom event trigger in jquery document ready

i saw something that said if you add an event listener at the end of the doc ready it should fire last, but i dont think this is correct as it runs everything at once. so i think this code does not wo..

Install PHP without Apache on Ubuntu

I was actually about to do some coding and then i got distracted with this annoying error on vscode. I keep getting this error on vscode: I had been ignoring it, but i thought fine, ill fix it and..

fancybox inline auto size modal easy

It seems weird to me that the examples on here, do not have code linked to them, and rather i have to dig through the source and find how they work.

php convert number with k on the end to full number

I have a function that converts raw numbers into shorthand or human readable numbers, but was wondering how to convert these back if they are stored in that format, and also makes it better if you are..

Search Duplicating Bugs

Still having issues with the word above duplicating, not sure why.  Search Page PHP - Get Search Value $search_value_encoded = htmlentities($search_value); Check for Search value, and then ..

add a user and add the user to sudo group

basic adding of a user in linux and then adding the user to the sudo group to allow it to run super user commands like apt update or other potentially system breaking commands. Note: replace "usern..

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

git basics - git init, git commit, git all, git *

create a new repository git init the following code can be typed in a terminal window, once you have installed git for your OS. This will create a directory called git-test assuming you already hav..

best way to write html into an existing page javascript

this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it.  Add an element, before including the script..

Uncaught Error: Call to undefined function mb_convert_encoding()

I was getting this error when calling a function in the readability php class, on a new server for code that worked on the old server. Uncaught Error: Call to undefined function mb_convert_encoding()..

Slick Slider Showing Multiple Items at a time

Just wanted to test some review type items showing more than one on slick, Seems to work well.  This shows two items at a time, but you can show as many as you like. Could be good for a testimo..

center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it.  Note: I just picked ra..

make a nice readable date using a timestamp string function make_nice_date

handy if you have a timestamp like this: 2022-01-10 00:12:42 and want it to look a bit nicer. like this... 12:19 am, January 10, 2022

simple html dom check if an attribute is set and has a value

Use destructuring assignment within the argument to the function half to send only max and min inside the function.

this seems like a tricky one, can be resolved with removing the stats array reference. Im not sure how it still knows to access the stats array. I dont know how that is correct as the console just lo..

Slick Slider Carousel with Custom Next and Prev Buttons

I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider.  Note the class names: sli..

pi400 how to take a screen shot

This is actually built in, well if you have scrot installed anyway. Which it already was for me. Press Print Screen button and it saves it into your home folder.

youtube search api request function

This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..

add every value in the load_array array into the out for testing

quick foreach to add every variable and variable name into out and return it. good for testing.

load json data url or api with javascript

this loads a target json url or api using raw javascript so no jquery required with this one then logs the data returned to the console. 

generate random username function in php

a function that takes several random words and creates a user name from them. This will generate a user name with between one to three words and a prefix if prefix_show is set to true. usage generat..

log the console log output to a div

I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code.  I had to modify this a b..

using the $_SERVER['HTTP_REFERER'] to check referring pages

shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..

set a cookie on click and then check if the cookie is set and dont show that message again

this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day.  The cookie in this example is set to expire in a day, so then if you com..

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

foundation base html template - foundation template

just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.

console table rather than console log for javascript objects and arrays

so i just saw on a tweet, that you can use console.table and i cant wait to try it out! good thing i already have a test object and array ready to go!  

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

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

easy section wrap in foundation - 3 boxes responsive

this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes

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

change selected color on input elements css

this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..

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

adding a new line in javascript

i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..

animated duck on footer

Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/  Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..

twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

creating embedded php code from a database field

i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..

create directory with php create folder with php

i thought i had already done this somewhere but i guess i didnt. Anyway here is how you can create a directory with PHP. PHP mkdir("directory_name") yep its that easy just make sure you are in the..

simulate a click on an element with jquery

you can actually use jquery to simulate a click event using the following .click() so as soon as the document is ready and you have jquery loaded it will run the click event for you, and should pop ..

bootstrap dark mode

Bootstrap Darkmode https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1 https://github.com/vinorodrigues/bootstrap-dark    CSS Dark Mode Preparing for dark mod..

check if a product already exists by its md5

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

gallery carousel center mode

i found this one here, looks cool. see if i can get it working like the demo.  currently getting this error on running the script i wonder if this is caused by a document ready issue? what is..

still more comment spam

this is getting annoying now. so much spam. i already have the google recapture, but spam is still getting through. who runs this stuff, bots i guess. annoying.  update: 10 August 2021 Still..

add some foundation tabs working example

they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..

white space break word css

controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..

append a #link to the end of all href urls on a target

good for if you need to append target links with a # link

verify the google recapture server php

i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..

scroll down the page using a button click

scrolling down 600px from where you currently are on the screen demo vid

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

check if a ul contains a ul li

i could not find a way to do this with just raw css so i had to use jquery /sad

for auto filled fields, need to change the text and background colours

for some reason bootstrap or the browser is doing this to auto filled fields.  according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..

jquery check if a sub element exists

this can be done with .length

ajax callback to delete with sweet alert confirmation to make it cool! 😎

I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..

prevent default click event on link

This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..

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

write string contents to a file with php

this will create a file called my_file_name.txt in the current php working directory usually this is the same one that the script is running in and write the text yay! into that file if the file al..

backdrop-filter: blur(10px);

just testing this filter

loop through a complex object json javascript

just a note to say that a complex object is an object with more than one nested object in it for example just kinda playing around with this one to get the handle on objects and how to access them C..

load json with vanilla javascript no jquery

this basically does the same thing that a jquery .getJSON does but without the need for jquery.

json load from jquery and loop through the results

this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..

foundation accordion for version 6.x

yep the foundation does weird things to this sites css, but the demo still works if you want to use the built in foundation accordions. 

fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

Slick Slider Carousel with Fade Transition

here is a working example of slick carousel with a fade transition between elements rather than a slide transition

add a toast alert when logging in with half moon

example of adding a document dom ready wait and then the script that launches a new toast message just adapting a php cms using halfmoon as the ui, its quite nice.  a bit bright in non dark mod..

python extract images into an array from a url

this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..

python url to text with beautiful soup

python using beautiful soup to convert a url into text Python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://kruxor.com"page = urlopen(url)html = page.read().decode("u..

python extract title tag from url and html using regex

this will extract the title tag as text from the url and the title tag in the following python script Python import refrom urllib.request import urlopenurl = "http://olympus.realpython.org/profiles/..

python import and print url

here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..

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

add years as options to select dropdown

add the years as dropdown items between a range of years with javascript document ready js only version

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

add click event to multiple link items

this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else Functions used: Javascript Wait for th..

get the value of an input form element (input value)

add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..

check if a certain query string is set then apply it to all url's on the page

this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..

append a query string to all url's on a page

this should append the query string test=1 to all url's on this page. if it works... make sure its added to document ready.

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

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

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 to set a cookie and expire it in 30 days

Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..

enable dark mode in tinymce

Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still.  You need to also includ..

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

add a youtube video preloader function, lazy load youtube [fixed]

I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..

animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass  this also involves some css changes to get this working i would also like in the fut..

fix view page for search links [reported]

its still showing raw data on these view pages e.g https://kruxor.com/view/search_links/KJYU0/mt-maunganui/  Looks like that example is already out of date, here is a new one: https://kruxor..

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

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

replicating the bootstrap dropdown toggle in jquery

here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..

using jquery appear for checking if an element is visible on screen

Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen.  Plugin Link..

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

bootstrap collapse or toggle a div visibility

if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something. 

drop shadow text class easy drop shadow

makes it a bit easier to read light text on a dark background or vice versa

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

inline fancybox modal testing

just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..

simple linear gradient overlay for an image to make it darker or lighter

i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.

fancybox modal popup example

an example showing fancybox text modal window attached to a button to open it

matches the url and does something if it matches a certain string

making var_dump look nice

i was var_dumping an array the other day, and it comes out like a massive string you cant read. a fast way to make this readable is just to add some pre tags to it.

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

jquery document ready with foundation init as well

here is a jquery document ready that also loads the foundation js library. im not sure if the document foundation needs to be loaded in the document ready, but this way seems to work.

php mysql table exists function

this checks if a mysql table already exists in the selected database and returns true or false

Using the Spread Operator to Evaluate Arrays In-Place Tests

My tests using the Spread Operator rather than the apply function. In the 1st function show_max_array i use the apply operator to convert the array into comma seperated values. In the show_max_array..

using let and const example

This example uses let and const rather than just vars, let can only be declaired once rather than overwritten like vars and const is a read only variable so it cant be changed. 

using let rather than var

Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..

Use Multiple Conditional (Ternary) Operators

I actually find if then statements much easier to read than these ones, but these seem more efficient. 

js - Use the Conditional (Ternary) Operator

this statement can be used instead of if this else that statements. to me it makes it look a bit more complex when reading it. this is the basic syntax. condition ? statement-if-true : statement-if-fa..

document ready javascript standalone version no jquery

this is a version of a dom ready or document ready that does not require jquery

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.

jquery click function

Bind something to a click event on an element using jquery. Needs to be combined with a document ready.

Applied Accessibility - Screen reader only css

This is how a screen reader only css markup can be added. The content will still be available to screen reader clients.

Change link target with JQuery

this will change the link href target to # on document load rather than its original link

read and sort directory contents in php

if you need to read in the contents of a directory in php and sort it by date header('Content-Type: application/json'); $dir = "./html/"; $file_type = ".html"; $out = ""; $files_array[] = ""; ..

file get contents reads entire file into a string

you can use the file_get_contents function to read a file or a web address usage get a url content $homepage = file_get_contents('http://www.example.com/'); echo $homepage; get a file con..

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

csv read example

Not sure if this is the best or correct way of handling CSV file imports, but it worked for me. here is an example of opening a csv and importing the content into a class, you will need to create ..

php get the file modified time with filemtime

Good for reading the modified time of files with php... echo date("F d Y H:i:s.",filemtime("html/php-get-the-file-modified-time-with-filemtime.html")); will output

pretty printing json with php

nice if you are working with json string data and just want to be able to read through the structure without copy pasting it somewhere else. $json_string = json_encode($data, JSON_PRETTY_PRINT);

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

search within files in a directory

During my quest to create a semi-static site that is searchable and fast to load. I thought while loading all of this content in with ajax and such that it would be interesting if i could do a text ..

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

Slick Slider Carousel

Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel

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

change the water colour in google maps for an already initialised map

good if you are using google maps and cant change the original map init code to change the styles. var mapOptions = { styles: [ { featureType: "water", stylers: [ { v..

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

testing chartjs

Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..

digital clock with jquery

Just a simple digital jquery clock that updates every second. Also added the dropshadow animation, not sure why... ;) .digital-clock { font-size:80px; } .transition { transition..

fancybox youtube showing video links in a lightbox

Updated version with code here do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it..

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

make clickable element with clickable class

makes an element with a link into a clickable element

jquery document ready

The most used script in jquery, loads things after the document is ready. $(document).ready(function(){ // do some stuff });

emoji data - version 1.0

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

video embed no controls

embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..

Form elements New Zealand region list

A list of the Regions of New Zealand converted into a form element select option dropdown. Sorted in alphabetical order. Ready to paste into your own form.

why are people so amazed that a column layout can have a full width element

Is it because its inside a grid still? i must me missing something anyway i have been noticing that there is this post (and this one) going around showing that you can break out of a css grid and go ..

darken background image using css

darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..

set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..