Skip to content

Instantly share code, notes, and snippets.

Avatar
🚀

Charlie Park charliepark

🚀
View GitHub Profile
@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 / 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;
@charliepark
charliepark / blipnote.html
Created Jul 28, 2015
The source code to blipnote.com
View blipnote.html
<!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 Jul 22, 2015
CSS to insert into the style block of a Project Gutenberg page to make it more legible
View gutenberg.css
*{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;}
View BalancedMeasures2.js
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]);
}