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 / gist:4266921
Created December 12, 2012 10:58
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.
<!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 July 18, 2010 12:03
calculate contrast color in Ruby
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 August 21, 2012 00:21
CSS animations to give a div a rainbow border, perpetually changing color
@-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;
}
@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 / react layout grid
Created December 25, 2020 12:34
How to render a visual grid on-screen so you can play with spacing in your app
<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 October 5, 2020 02:34
An Eleventy filter for automatically converting quotes to smartquotes.
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 March 28, 2020 20:00
Use the HTML5 <time> element while nicely formatting your blog post's date
// 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 July 30, 2011 16:07
A jquery typography plugin.
<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 November 25, 2019 03:48
Fairly low-effort JS to set a textarea to grow in height to accomodate the text within.
// 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})`;
@charliepark
charliepark / php_write_to_file_perf_test.php
Created October 3, 2019 19:07
<?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;