Skip to content

Instantly share code, notes, and snippets.

View charliepark's full-sized avatar
🚀

Charlie Park charliepark

🚀
62 followers · 2 following
View GitHub Profile
@charliepark
charliepark / Setting up a server on SliceHost
Created October 2, 2009 19:30
FOLLOW THESE TUTORIALS:
SET UP UBUNTU
1. http://articles.slicehost.com/2008/11/28/ubuntu-intrepid-setup-page-1
2. http://articles.slicehost.com/2008/11/28/ubuntu-intrepid-setup-page-2
SET UP RUBY / RAILS
3. http://articles.slicehost.com/2009/1/6/ubuntu-intrepid-ruby-on-rails
SET UP APACHE
@charliepark
charliepark / input placeholder text from Jacob Bijani.html
Created March 7, 2010 00:22
<input type="text" class="text_field placeholder_content"
value="Default value"
onfocus="
if (this.className == 'text_field placeholder_content') {
if (! this.getAttribute('default_value')) {
this.setAttribute('default_value', this.value);
}
this.value = '';
this.className = 'text_field';
}
@charliepark
charliepark / CSS_gradients.css
Created April 14, 2010 13:49
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
/* from http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/ */
@charliepark
charliepark / Embossed_Text.css
Created April 19, 2010 00:15
/* Embossed Text Effect Using CSS */
/* Light Text on a Dark Background */
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
/* Dark Text on a Light Background */
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
@charliepark
charliepark / Eric Meyer's Reset, Cleaned Up .css
Created August 13, 2010 04:59
A cleaned up version of Eric Meyer's CSS reset file.
/* Eric Meyer's Reset (http://meyerweb.com/eric/tools/css/reset/) */
/* v1.0 | 20080212 */
/* minified and alphabetized by Charlie Park (http://charliepark.org) */
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, font, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content: '';content: none}
@charliepark
charliepark / curved_speech_bubble_tails.css
Created January 8, 2011 12:50
Curved Speech Bubble Tails, Using Pure CSS
/* the "dif" and "dif0" and "dif2" are just alternately-shaped examples, using translucent colors so you can see what's going on */
div.qanda p{background:#e3e3e3;border-radius:10px;-moz-border-radius:10px;font-size:13px;line-height:17px;margin-left:240px;padding:10px;position:relative}
div.qanda p:before{border-top:25px solid #e3e3e3;border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
div.qanda p:after{background:#bbb;border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:-5px;width:25px;z-index:2}
div.qanda p.dif:before{border-top:25px solid rgba(255,0,255,0.5);border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
div.qanda p.dif:after{background:rgba(0,255,255,0.5);border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:a
@charliepark
charliepark / gist:949606
Created April 30, 2011 11:20
html for making pngs for background grids
<html>
<body>
<div style="position:absolute;background:red;padding:40px;top:0;left:0;display:none">
<div style="background:#fff;width:1px;height:20px;position:relative">
<div style="background:#000;height:1px;width:1px;position:absolute;bottom:0;"></div>
</div>
</div>
</body>
</html>
@charliepark
charliepark / Benchmarking Date.today vs. Time.now
Last active September 25, 2015 17:08
# NOTE: This is from an older version of Rails / Ruby. The code should still work, but you'll probably find that Date is much faster than Time now.
require 'benchmark'
def bmd
Benchmark.ms { 1000.times { puts Date.today } }
end
def bmt
Benchmark.ms { 1000.times { puts Time.now } }
@charliepark
charliepark / baseline.html
Created May 7, 2011 23:49
An experiment with different font sizes and relative positioning, in order to get good baselines. Key takeaway: line-height + margin-bottom of each headline should equal the line-height + margin-bottom of the h1; also, each headline's position:relative;to
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
/* from Eric Meyer: v2.0b1 | 201101 */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{border:0;font:inherit;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
@charliepark
charliepark / tag_gen.rb
Created June 8, 2011 00:05
module Jekyll
class TagIndex < Page
def initialize(site, base, dir, tag)
@site = site
@base = base
@dir = dir
@name = 'index.html'
self.process(@name)