Skip to content

Instantly share code, notes, and snippets.

Avatar
🚀

Charlie Park charliepark

🚀
View GitHub Profile
@charliepark
charliepark / gist:4266921
Created Dec 12, 2012
You can use arrays and hashes in HTML5 data attributes. Use JSON.parse, and make sure you're using single quotes around the brackets and double quotes inside the brackets.
View gist:4266921
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="animals" data-animals='["cat", "dog", "bird"]'></div>
<div id="vehicles" data-vehicles='{"motorcycle":"Harley", "car":"Herbie", "steamshovel":"Mike"}'></div>
@charliepark
charliepark / contrasting_text_color.rb
Created Jul 18, 2010
calculate contrast color in Ruby
View contrasting_text_color.rb
def convert_to_brightness_value(background_hex_color)
(background_hex_color.scan(/../).map {|color| color.hex}).sum
end
def contrasting_text_color(background_hex_color)
convert_to_brightness_value(background_hex_color) > 382.5 ? '#000' : '#fff'
end
@charliepark
charliepark / rainbow-border.css
Created Aug 21, 2012
CSS animations to give a div a rainbow border, perpetually changing color
View rainbow-border.css
@-webkit-keyframes rainbow {
0% {border-color: hsl(0, 100%, 50%);}
100% {border-color: hsl(255, 100%, 50%);}
}
.rainbow_border{
border: 4px solid hsl(0, 100%, 50%);
-webkit-animation: rainbow 5s infinite alternate;
}
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

@charliepark
charliepark / react layout grid
Created Dec 25, 2020
How to render a visual grid on-screen so you can play with spacing in your app
View react layout grid
<div
id="grid"
style={{
backgroundSize: '8px 8px',
backgroundPosition: '50%',
backgroundImage:
'
linear-gradient(to right, hsla(0, 0%, 50%, 0.5) 1px, transparent 1px),
linear-gradient(to bottom, hsla(0, 0%, 50%, 0.5) 1px, transparent 1px)
',
@charliepark
charliepark / smartquotes.js
Created Oct 5, 2020
An Eleventy filter for automatically converting quotes to smartquotes.
View smartquotes.js
eleventyConfig.addFilter("smartquotes", (post) => {
const hawaii = new RegExp(/Hawai'i/g);
const slang = new RegExp(/'(cause|em|til|twas)/g);
const apostrophes = new RegExp(/(\b)'(\b)/g);
const years = new RegExp(/(\s)'(\d)/g);
const openDoubles = new RegExp(/(\s|^|>)&quot;/g);
const closeDoubles = new RegExp(/&quot;/g);
const openSingles = new RegExp(/(\s|^|>)'/g);
const closeSingles = new RegExp(/'/g);
return post
@charliepark
charliepark / eleventy date formatting filter
Created Mar 28, 2020
Use the HTML5 <time> element while nicely formatting your blog post's date
View eleventy date formatting filter
// in .eleventy.js, add the two functions inside your `module.exports = function (eleventyConfig) {}` block:
```
eleventyConfig.addFilter("toISOString", (date) => (
new Date(`${date} 00:00:00`).toISOString()
));
eleventyConfig.addFilter("formatDateForBlog", (date) => (
new Date(`${date} 00:00:00`).toLocaleString('en-us', { month: 'long', day: 'numeric', year: 'numeric' })
));
```
@charliepark
charliepark / hatchshow.js
Created Jul 30, 2011
A jquery typography plugin.
View hatchshow.js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
$().hatchShow();
});
jQuery.fn.hatchShow = function(){
$('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){
var t = $(this);
t.wrap("<span class='hatchshow_temp' style='display:block'>");
var pw = t.parent().width();
@charliepark
charliepark / textareaAutogrow.js
Last active Nov 25, 2019
Fairly low-effort JS to set a textarea to grow in height to accomodate the text within.
View textareaAutogrow.js
// This is seven lines of vanilla JS that does most of what larger packages (like https://github.com/jackmoore/autosize) do.
// Might not work for your purposes, but it did for mine, and I figured I'd share.
const autogrow = (event) => {
const { target: textarea } = event;
const { textLength, style: { lineHeight, paddingTop, paddingBottom } } = textarea;
const widthInCharacters = parseInt(textarea.style.width, 10);
const adjustmentFactor = 0.8; // tune this up or down if the height is too aggressive (or not aggressive enough)
const lines = Math.floor(textLength * adjustmentFactor / widthInCharacters) + 1;
const height = `calc(${lines * lineHeight}em + ${paddingTop} + ${paddingBottom})`;
View php_write_to_file_perf_test.php
<?PHP
shell_exec("touch messages1.txt");
shell_exec("touch messages2.txt");
$time_1 = microtime(true);
for ($i=1; $i<1000; $i++) {
file_put_contents('messages1.txt', "This is the sample text\n", FILE_APPEND);
}
$time_delta_1 = microtime(true) - $time_1;