Skip to content

Instantly share code, notes, and snippets.

@dceddia
dceddia / css.json
Created Sep 29, 2020
Put this in VSCode > Preferences > User Snippets > css.json. Then in a CSS file, type "cf" and hit Tab.
View css.json
"Center things": {
"prefix": "cf",
"body": ["align-items: center;", "justify-content: center;"],
"description": "Center items in a flex container"
}
@dceddia
dceddia / extractHighlightedLines.js
Last active Aug 26, 2020
Given a code block, use the first few lines to infer what to highlight when generating syntax-highlighted HTML via Shiki
View extractHighlightedLines.js
/* If the block begins with the `highlightLines: []` directive, strip that off,
parse the array as JSON, and pass the lines to Shiki.
Replaces single quotes with doubles, because I know I'm gonna screw that up.
Valid formats include:
highlightLines:[]
highlightLines []
// highlightLines: []
@dceddia
dceddia / svg-to-svelte.rb
Created Jul 29, 2020
Transform an SVG element into something ready to be animated with Svelte + animejs
View svg-to-svelte.rb
#!/usr/bin/env ruby
require 'open3'
# Copy the SVG from Sketch, then run this
# It will clean up the SVG, insert bind:this={whatever} for any objects named `b:whatever` in the svg,
# and print out the variables to declare in Svelte
# To use:
# 1. copy the SVG from Sketch
@dceddia
dceddia / open-graph.html
Created Jul 20, 2020
Open Graph tags (_includes/open-graph.html), included from _includes/head.html
View open-graph.html
<!-- Twitter Cards -->
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
{% if page.excerpt %}<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">{% endif %}
{% if site.owner.twitter %}<meta name="twitter:site" content="@{{ site.owner.twitter }}">{% endif %}
{% if author.twitter %}<meta name="twitter:creator" content="@{{ author.twitter }}">{% endif %}
{% if page.image.twitter %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.twitter }}">
{% elsif page.image.feature %}
<meta name="twitter:card" content="summary_large_image">
@dceddia
dceddia / .zshrc
Created May 7, 2020
A custom zsh "widget" for inserting a duplicate of the last argument on the line. Good for renaming a file to a similar name.
View .zshrc
# Press Alt-/ to insert the last argument from the same line
# ex:
# type "cp foo", press Alt-/, and it will insert " foo" so that your command will be
# cp foo foo
# Great when you want to rename a file to a similar name at the same path
# (This is different from Alt-. to insert the last arg from the previous command)
insertPreviousArg() {
echo $LBUFFER | read -A args
LAST_CHAR="${${:-$LBUFFER}[-1]}"
LAST_ARG="${args[$#args]}"
@dceddia
dceddia / javascript.json
Created Oct 3, 2019
VSCode Snippets for React
View javascript.json
{
"Insert a function": {
"prefix": "f",
"body": [
"function $1($2) {\n $0\n}\n"
],
"description": "Insert a function"
},
"const arrow": {
"prefix": "c>",
@dceddia
dceddia / new-post.sh
Created Feb 1, 2019
Create a new post based in Gatsby. (make sure to create a new-post-template.md file)
View new-post.sh
#!/bin/bash
# Print usage if args are missing
if [ -z $1 ]; then
echo "Usage: new-post <slug>"
exit
fi
SLUG=$1
DAY=$(date +%Y-%m-%d)
@dceddia
dceddia / App.js
Created Jun 15, 2018
Asking for permission to use the camera.
View App.js
export default class App extends React.Component {
...
componentDidMount() {
Permissions.askAsync(Permissions.CAMERA)
.then(({ status }) =>
this.setState({
cameraPermission: status === 'granted'
})
);
@dceddia
dceddia / App.js
Created Jun 15, 2018
Take a picture after 30 seconds.
View App.js
const PHOTO_INTERVAL = 30000;
const FOCUS_TIME = 3000;
class Autoshoot extends React.Component {
componentDidMount() {
this.countdown = setTimeout(
this.takePicture,
PHOTO_INTERVAL
);
}
@dceddia
dceddia / server.js
Created Jun 15, 2018
Handle POST requests
View server.js
// Store the single image in memory.
let latestPhoto = null;
// Upload the latest photo for this session
app.post('/', (req, res) => {
// Very light error handling
if(!req.body) return res.sendStatus(400);
console.log('got photo')
You can’t perform that action at this time.