Skip to content

Instantly share code, notes, and snippets.

View tholman's full-sized avatar
:octocat:
Like this? You could always sponsor me 😯

Tim Holman tholman

:octocat:
Like this? You could always sponsor me 😯
View GitHub Profile
@tholman
tholman / mkproject
Last active July 14, 2022 15:06
Shell script to create new basic html/js/css project
#!/bin/sh
# Ensure a name parameter has been provided
if [ $# -eq 0 ]
then
echo "Please provide a project name"
exit 1
fi
# Save project name
@tholman
tholman / index.html
Created March 31, 2013 16:24
A CodePen by Tim Holman. Bezier Sim - Interactive bezier curve... see the beauty behind the maths :)
<canvas id="canvas"> Sorry, no canvas support here :( </canvas>
<div id="start"> START </div>
<div id="info"> Double click anywhere = create/destroy point </div>
<!-- Bezier curve simulator
- Click "Start to start/stop/restart the animation"
- Double clicking anywhere else will allow you to add new points to the curve.
@tholman
tholman / index.js
Last active April 25, 2017 03:14
requirebin sketch
// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
require('@emmetio/abbreviation');
require('@emmetio/html-transform');
ant: {
id: "ant",
name: "Ant",
description: "<strong>Organized</strong>, industrious, and strong, ants work together for <strong>the common good</strong>. They can carry ten times their own weight and make excellent carpenters, <strong>architects</strong> and <strong>soldiers</strong>.",
image: "/assets/img/animals/ant_crop.jpg",
poster: "/assets/img/animals/ant_poster.jpg"
},
bison: {
id: "bison",
name: "Bison",
@tholman
tholman / fun
Last active December 21, 2015 03:39
cd ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets
echo 'html { -webkit-animation: adjustHue 20s infinite !important; } @-webkit-keyframes adjustHue { 50% { -webkit-filter: hue-rotate(360deg); }}' >> Custom.css
{
"color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme",
"font_size": 13,
"ignored_packages":
[
"Vintage"
],
"theme": "Flatland Dark.sublime-theme"
}
/* Custom CSS for Codepen Vertical Perspecitve
Demo: http://i.imgur.com/NWaoRqi.png
*/
/* Requires Stylebot for Chrome - https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en */
.top-boxes, #result_div {
height: 100%;
}
<!doctype html>
<html>
<head>
<title>Scroll position demo</title>
<style>
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
}
$retina: "only screen and (-webkit-min-device-pixel-ratio: 2 ), only screen and ( -moz-min-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1 ), only screen and ( min-device-pixel-ratio: 2 ), only screen and ( min-resolution: 192dpi ), only screen and ( min-resolution: 2dppx )";
// And then
@media #{$retina} {
// CSS for retina
}
<img src='./img/beach.jpg'
data-title='Panoramic Beach'
data-caption='Image compliments of unsplash, thanks!' />
<script>
var panorama = document.querySelector( 'img' );
panorama.onclick = function() {
intenseViewer( this )
}