Skip to content

Instantly share code, notes, and snippets.

View charliepark's full-sized avatar
🚀

Charlie Park charliepark

🚀
View GitHub Profile
@charliepark
charliepark / quickBrownFox
Created April 18, 2014 01:03
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(' ')+".";
@charliepark
charliepark / SMACSS.md
Last active June 5, 2021 15:03

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

@charliepark
charliepark / IFTTT Logo, CSS extracted
Last active December 23, 2015 06:59
The same IFTTT logo as in https://gist.github.com/charliepark/6598054, but with the CSS extracted out (the first section). Also includes it with CSS inline (the second section). Also includes the SVG for reference (the last section).
<html>
<head>
<style type="text/css">
.css-logo{font-size:10px;height:2.2em;position:relative;width:8.5em}
.letter-block{float:left;height:100%;margin-right:.2em;position:relative;width:1.6em}
.letter-block.i{margin-right:.3em;width:.7em}
.letter-block.t{width:1.7em}
.h{background:#f40;position:absolute;top:0;width:100%}
.h.short{top:.9em;width:1.3em;}
.s{background:#000;position:absolute}
@charliepark
charliepark / IFTTT logo in pure HTML+CSS
Last active December 23, 2015 06:59
The IFTTT logo in pure HTML / CSS. Just change the "font-size" attribute in line 1 to change the size. Everything scales naturally. The CSS is all inline, to include this in an e-mail. If you want the code with the CSS extracted, check out https://gist.github.com/charliepark/6598079.
<div style="font-size:10px;height:2.2em;position:relative;width:8.5em">
<div style="float:left;height:2.2em;margin-right:.3em;position:relative;width:.7em;">
<div style="background:#3cf;height:100%;width:.7em"></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.6em">
<div style="background:#3cf;height:100%;width:.7em"></div>
<div style="background:#f40;height:.7em;position:absolute;top:0;width:1.6em;"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
<div style="background:#f40;height:.7em;position:absolute;top:.9em;width:1.3em;"><div style="background:#000;height:.7em;width:.7em"></div></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
@charliepark
charliepark / simple_breakpoints.css
Created September 9, 2013 17:54
simple responsive breakpoints
/* via http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points */
@media only screen and (min-width: 768px) {
/* tablets and desktop */
}
@media only screen and (max-width: 767px) {
/* phones */
}
@charliepark
charliepark / button CSS (base)
Last active December 20, 2015 01:19
.btn{
border:1px solid #000;
border-color: #d1d1d1 #d1d1d1 hsl(32, 0%, 80%);
border-radius: 3px;
font-size:16px;
font-weight:700;
margin:5px;
padding: 5px 20px;
}
@charliepark
charliepark / easter.js
Last active December 15, 2015 14:49 — forked from madrobby/easter.js
// date of easter, call function with the 4-digit year as argument
//function (a,b,c,d,e,f,g,h,i,j,k,l,m){return b=a%19,c=~~(a/100),d=a%100,e=~~(c/4),f=c%4,g=~~((c+8)/25),h=~~((c-g+1)/3),i=(19*b+c-e-h+15)%30,j=~~(d/4),k=d%4,l=(32+2*f+2*j-i-k)%7,m=~~((b+11*i+22*l)/451),a+"-"+~~((i+l-7*m+114)/31)+"-"+((i+l-7*m+114)%31+1)}
function (y,a,b,c,h,l,n){return a=y%19,b=~~(y/100),c=y%100,h=(19*a+b-~~(b/4)-~~((b-~~((b+8)/25)+1)/3)+15)%30,l=(32+2*b%4+2*~~(c/4)-h-c%4)%7,n=h+l-7*~~((a+11*h+22*l)/451)+114,y+'-'+~~(n/31)+'-'+(n%31+1)}
// f(2013) -> "2013-3-31"
// f(2012) -> "2012-4-8
// f(1775) -> "1775-4-16"
@charliepark
charliepark / vendor-prefixing.scss
Created March 26, 2013 22:20
A vendor prefixing mixin for Sass. Found it online. Sorry to whoever wrote it initially!
/**
* This mixin is awesome. Handles vendor prefixing in a single line.
*/
@mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: $argument;
-moz-#{$name}: $argument;
-ms-#{$name}: $argument;
-o-#{$name}: $argument;
#{$name}: $argument;
@charliepark
charliepark / slideshow.html
Created March 13, 2013 01:40
Per the interview question at http://www.computedstyle.com/2010/12/hiring-front-end-engineers.html: "A div with an id of 'slideshow' contains five images, the first of which is shown and the others are hidden using a display style of none. Using Javascript, create a simple slideshow that cycles through the images, displaying each image for three…
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<style type="text/css">
.box{height:100px;display:none;width:100px;}
.red{background:red;display:block}
.orange{background:orange}
.yellow{background:yellow}
.green{background:green}
@charliepark
charliepark / meyerreset.min.css
Created March 2, 2013 15:23
A minified version of Eric Meyer's reset.css (20110126) - http://meyerweb.com/eric/tools/css/reset/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}