Skip to content

Instantly share code, notes, and snippets.

🍐
Working on a relaunch.

Charlie Park charliepark

🍐
Working on a relaunch.
Block or report user

Report or block charliepark

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View Doing.js
{
"When you open your computer" : [
"turn off deeplink test",
"turn off wtf / recipes test"
]
}
View performantRetina.js
var performantRetina = {
run : function(){
if(!window.devicePixelRatio || window.devicePixelRatio === 1){return;}
var images = document.getElementsByTagName('img');
for(var i = 0; i < images.length; i++){
var retinaSrc = images[i].getAttribute('data-retina-src');
if(!retinaSrc){continue;}
images[i].setAttribute('src', retinaSrc);
}
}
View box-sizing without the asterisk
nav,
main,
section,
article,
aside,
header,
footer,
div,
details,
summary,
View fit.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{background:#eee;margin:10px;width:350px;border:20px solid #ccc;padding:10px}
p{font-family:courier;margin:0;padding:0;}
</style>
</head>
<body>
<div style="height:180px;"><p class="js-fit">This is some text to resize.</p></div>
@charliepark
charliepark / screenshot.js
Created Jun 5, 2014
A demo Phantom.js script
View screenshot.js
var width = 320;
var height = 480;
var webpage = require('webpage');
page = webpage.create();
page.viewportSize = {width: width, height: height};
page.open('https://ifttt.com', function(status) {
console.log(status);
page.evaluate(function(w, h) {
document.body.style.width = w + "px";
View gzip_questions.md

When GZIPped, is this …

h1 {
  font-size: 3em;
  font-weight: bold;
}

h2 {
  font-size: 2em;
View template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
View test_faq.js
[
[
"Who taught you to do this stuff?",
"You, alright? I learned it by watching you!"
],
[
"Who in the world am I?",
"Ah, that's the great puzzle."
],
View quickBrownFox
function test(candidate){
return candidate === passing;
}
var sentence = "The quick brown fox jumps.";
var passing = "Jumps fox brown quick the.";
function turnaround(sentence){
sentence = sentence.toLowerCase().replace('.','').split(' ');
sentence = sentence.reverse().join(' ')+".";
View SMACSS.md

Some key quotes:

SMACSS has two core goals: 1. Increase the semantic value of a section of HTML and content. 2. Decrease the expectation of a specific HTML structure.

SMACSS is about identifying the patterns in your design and codifying them.

Five Types of Categories of Code

You can’t perform that action at this time.