Search
Search Code
Search Code by entering your search text above.
css
six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

12:38 am, February 7, 2024
css
four box grid css html custom

re-usable four box grid with gap calculations

12:37 am, February 7, 2024
templates
4 box custom grid with responsive

simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid

2:50 am, February 5, 2024
fonts
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..

3:12 am, December 12, 2023
fonts
Quick Embed Figtree Font

Quick embed code and test paragraph for the google font figtree

3:08 am, December 5, 2023
fonts
Quick Embed - Google Font - Fira Sans

fira sans font quick embed and css class

2:11 am, March 8, 2023
fonts
Quick Embed - Google Font - Inter

Quick Embed code for google font inter

12:01 am, January 20, 2023
sections
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 ..

11:08 pm, October 24, 2022
fonts
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..

3:33 am, October 12, 2022
php functions
imgur upload from php

function that takes an image and uploads it to imgur using a client api id, and then returns all the data. i did this one ages ago and did not make it into a function, but this version should work as..

12:45 am, September 30, 2022
sections
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

12:29 am, September 27, 2022
fonts
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..

4:34 am, September 25, 2022
fonts
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..

4:58 am, September 19, 2022
sections
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.

7:01 am, September 9, 2022
vue
Random User Profile Loading Script in vue

uses the random user ui here to generate profile boxes using vue js  original script here: https://codepen.io/l-i-lc/pen/WNxNwvd?editors=1010   

12:51 am, August 31, 2022
javascript
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.

12:42 am, August 31, 2022
fonts
Quick Embed Import and Code Samples for Google Font Roboto

quick embed codes and code examples for the google font Roboto. Roboto Font Preview

5:30 am, July 20, 2022
fonts
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..

2:15 am, June 27, 2022
fonts
Quicksand font quick install

Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both. 

1:25 am, June 3, 2022
fonts
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

4:57 am, June 1, 2022
php
get json with php from a url and display it

yep its that easy. this code shows getting the contents from a json request api. var dumping all of the results and extracting one single item by its array key and showing it. 

1:39 am, June 1, 2022
jquery
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.

12:36 am, May 31, 2022
html
a google font like muli - mulish and embed code

mulish font embed codes and styles with example

4:41 am, May 30, 2022
javascript
Twitter Post Fetcher Script

Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome... 

12:43 am, May 3, 2022
fonts
font similar to century gothic questrial google font quick install

I found this font to be closely related to the paid font "Century Gothic" the only issue i found with this font is that it only comes in regular weight.  But Questrial is free to use, so that is..

4:32 am, April 4, 2022
sections
html and css hoizontal simple timeline section in foundation

a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!..  :P Also works on responsive and mobile dev..

3:33 am, March 29, 2022
fonts
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.

11:25 pm, March 28, 2022
api
test love like dislike script from api

just testing writing to page from javascript and api

5:04 am, March 11, 2022
php
fixing error Call to undefined function simplexml_load_string

usually the error "Call to undefined function simplexml_load_string" happens when the php xml library is missing from your server. You can install the xml php library with the following command, repl..

4:00 am, January 18, 2022
html
Common and Uncommon Meta Tag's and Social Meta Tags

I am writing an api that checks for meta tags so i thought i would add a list here of some of the common meta tag names that i found.  The ones prefixed with og: are facebook and linked in and s..

3:46 am, December 19, 2021
css
center align vertical 2 items in a container flex

i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..

11:26 pm, December 14, 2021
html
Add custom symbol to ul li list and align text items

Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items.  If the list items dont align correctly you will nee..

5:01 am, November 19, 2021
icons
how to embed google fonts icons

For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..

12:21 am, November 17, 2021
php functions
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..

2:04 am, November 4, 2021
javascript
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. 

4:43 am, October 26, 2021
jquery
load json data url with jquery

loads a api or json url or endpoint using jquery and console logs the result Tested working on my test json file, check the console and it should be there. 

4:36 am, October 26, 2021
foundation
foundation three boxes with text align links to the bottom of element

For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..

11:51 pm, October 14, 2021
css
using css counter-increment to add numbering to elements

i just found this element in css where you can add numbering to elements, very handy to add counters and things.  This uses the counter-increment: section; in the main element and then adds the ..

12:17 am, October 14, 2021
templates
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.

4:17 am, October 12, 2021
react
What is a Stateless Functional Component in React

What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it.  This method creates ..

12:24 am, October 12, 2021
ideas
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..

8:55 am, October 6, 2021
php
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..

11:16 pm, October 5, 2021
sections
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..

5:50 am, October 1, 2021
sections
stackable bio or biography list with portrait image title and text

a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout.  As its in foundation here is ..

1:13 am, October 1, 2021
fonts
open sans @import embed font quick

just a quick and nasty css import for the Open Sans google font. 

1:05 am, October 1, 2021
sections
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

12:23 am, September 29, 2021
sections
easy section wrap in foundation

i am always writing these wrap sections so i thought i would just add a basic one here, easy to copy and paste into a new section

4:33 am, September 20, 2021
javascript
twitter json feed testing

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

9:33 am, September 10, 2021
php
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..

4:23 am, August 26, 2021
foundation
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 ..

5:01 am, August 3, 2021
css
roboto and poppins fonts include quick code

css import for poppins and roboto google fonts with the common font weights

12:10 am, July 23, 2021
css
404 Error Page Codepen

found this in my links the other day, still looks cool...

1:16 am, July 16, 2021
php
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..

12:45 am, June 25, 2021
javascript
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..

11:17 pm, June 22, 2021
site documentation
hero widget header - creates a nice looking hero item from a target uid and class

this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..

12:10 am, June 11, 2021
php
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..

4:19 am, June 3, 2021
css
pre-line white space settings

this preserves line spacing but also wrapping as well

3:41 am, April 20, 2021
css
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

3:38 am, April 20, 2021
python
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..

1:11 am, April 4, 2021
javascript
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..

4:00 am, February 15, 2021
html
Aligning Images in TinyMCE or Floating them left and right (code)

Here is the code for this page Aligning Images in TinyMCE or Floating them left and right  

5:32 am, February 8, 2021
css
@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.

11:58 pm, January 19, 2021
css
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..

6:09 am, December 31, 2020
javascript
vimeo thumbnail generator

5:35 am, December 7, 2020
bootstrap
bootstrap toggle element collapse

the example code for toggling elements, show and hide

1:34 am, December 4, 2020
javascript
Monitoring Visible Objects on Screen

i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..

12:07 am, December 1, 2020
javascript
check that a number is in the correct range based on a form selection

This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..

4:45 am, November 24, 2020
design elements
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..

2:43 am, November 9, 2020
javascript
Leaflet Quick Start Example

just a quick start map embed for leaflet js an alternative to google maps

4:45 am, October 26, 2020
php
change string to capital words ucwords

This will change an upper case or lower case, or mixed case string to uc words. Example with this page title

6:08 am, July 21, 2020
php
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..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
scrollbar replacement simplebar

a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..

6:20 am, August 31, 2018
js
mithril testing

https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..

6:20 am, August 31, 2018
js
access hacker news json firebase api via jquery

Just a getJSON JQuery Request that will console log all of the hacker news top stories using the firebase api $.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) { va..

6:20 am, August 31, 2018
js
load content with jquery

Load data from the server and place the returned HTML into the matched element. this one seems simple but very useful $( "#result" ).load( "ajax/test.html" ); this one will load the content o..

6:20 am, August 31, 2018
html
form elements australian state list

A list of the Australian States converted into a form element select option dropdown. Sorted in alphabetical order.

6:20 am, August 31, 2018
html
lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praes..

6:20 am, August 31, 2018
emoji
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..

6:20 am, August 31, 2018
css
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 ..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
design nice block header

I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


minecraft
Random CSS Property

<angle>

The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in <gradient>s and in some transform functions.
angle#turn css reference