Skip to content

Instantly share code, notes, and snippets.

View charliepark's full-sized avatar
🚀

Charlie Park charliepark

🚀
View GitHub Profile
@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 / 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;
@charliepark
charliepark / README.md
Created April 11, 2019 20:22
SCRIPT-8
@charliepark
charliepark / README.md
Created April 11, 2019 20:00
SCRIPT-8
@charliepark
charliepark / blipnote.html
Created July 28, 2015 14:32
The source code to blipnote.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<title>Blipnote</title>
<style type="text/css">html,body,div,span,h1,h2,p,a,form,aside,footer,header,nav{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}aside,footer,header,nav,section{display:block}body{line-height:1}a{color:rgba(255,255,255,.5);cursor:pointer;text-decoration:none}nav a{font-size:12px;letter-spacing:.2em;margin:20px;padding:10px;text-align:center;text-transform:uppercase}a[href*="mailto"]{background:rgba(0,0,0,.2);color:#fff;padding:0 4px}aside{background:#00779d;display:none;overflow:auto;position:absolute;top:0;left:0;bottom:0;right:0;z-index:9}body{box-sizing:border-box;font-family:"gill sans","gill sans mt",sans-serif;letter-spacing:1px;margin:10% auto 0;position:relative;text-align:center;width:350px}body{display:flex;flex-direction:column}header{height:55px
@charliepark
charliepark / gutenberg.css
Created July 22, 2015 05:47
CSS to insert into the style block of a Project Gutenberg page to make it more legible
*{font-family: "Avenir Next", "avenir next", avenir next, avenir !important;line-height:1.65}
h3{color: #444;margin: 1rem 0;}
hr{border:0;background: none;border-bottom: 1px solid #eee;}
h3 + hr{margin-bottom: 2rem}
p + hr{margin-top: 4rem;}
p{margin: 0 auto 1.65em;max-width: 36em;text-align: left}
.poem .stanza{background-color: #F6F6F6;border-radius: 10px;box-sizing: border-box;margin: 1em auto;max-width: 36rem;padding: 1rem 1.5rem;}
@charliepark
charliepark / BalancedMeasures2.js
Last active August 29, 2015 14:24
A revamped version of https://gist.github.com/charliepark/a124b768c4db4ff3404d
var BalancedMeasures = {
minimumScreenSizeToRunOn: 992,
classNameToBalance: "graf--pullquote",
run: function(classToRunOn){
if(this.onSmallerScreen()){return;}
var elements = this.getElementsToBalance(classToRunOn);
for(var i = 0; i < elements.length; i++){
this.balance(elements[i]);
}