Skip to content

Instantly share code, notes, and snippets.

@claudiosanches
claudiosanches / add-to-cart.php
Last active October 18, 2023 14:02
WooCommerce - Template add-to-cart.php with quantity and Ajax!
<?php
/**
* Custom Loop Add to Cart.
*
* Template with quantity and ajax.
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.
global $product;
@tomhodgins
tomhodgins / snippets.md
Last active August 8, 2022 14:27
Snippets.md is my most often used HTML, CSS and JavaScript snippets for front-end web development
@tomhodgins
tomhodgins / micro-speedtest.php
Last active August 29, 2015 14:16
Responsive Speed Testing (optimized, with cross-origin header set via PHP)
<?php header('X-Frame-Options: GOFORIT'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SpeedTester</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui">
<style type="text/css">
* { box-sizing: border-box; -moz-box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: default; }
html { font-size: 10pt; background: #ccc; -webkit-text-size-adjust: 100%; }
@paulirish
paulirish / bling.js
Last active July 23, 2024 14:51
bling dot js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
};
NodeList.prototype.__proto__ = Array.prototype;
@tomhodgins
tomhodgins / match-height.js
Last active December 11, 2018 11:49
Match Height is a jQuery-free pure JavaScript plugin that will measure the height of a group of elements and assign each of them the highest value.
/*
# The Mad CSScientist's Matching Height Plugin
written by Tommy Hodgins: http://codepen.io/tomhodgins/pen/pjmKNj
## Usage
This plugin will measure the height of a group of elements and assign each of them the highest value.
To group elements together, assign each element a `data-col` attribute with the same value. This way, the plugin can calculate the heights of different groups of elements on the same page.
const articles = [
{
title: 'How to make an example',
body: 'This tutorials shows you how to make a nice example. First Write some text!'
},
{
title: 'My super frustrating personal blog entry',
body: 'Im feeling so happy and angry and sad and glad and hungry and tired.'
}
]

CSSON

CSS Object Notation

CSSON is a superset of JSON that is parsed according to CSS syntax.

Any JSON can be parsed as CSSON, though not every CSS Style Sheet can be parsed as CSSON.

Pros:

@tomhodgins
tomhodgins / step-1.js
Created August 6, 2020 14:50
Going from a basic HTML function to a tagged template string, to a custom templating solution in three easy steps!
function html(string = '') {
return document.implementation
.createHTMLDocument()
.createRange()
.createContextualFragment(string)
}
/*
A JavaScript function that takes a string of HTML syntax, parses it as HTML and returns a Document Fragment containing all parsed nodes.