Skip to content

Instantly share code, notes, and snippets.

@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
Initialize Autoshoot's state
View App.js
class Autoshoot extends React.Component {
state = {
photo: null
}
...
}
@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
Render the Camera, or the last photo.
View App.js
render() {
const { photo } = this.state;
return (
<View style={{ flex: 1, width: '100%' }}>
{photo ? (
<ImageBackground
style={{ flex: 1 }}
source={{ uri: photo.uri }} />
) : (
@dceddia
dceddia / App.js
Created Jun 15, 2018
Using Autoshoot inside App
View App.js
render() {
const { cameraPermission } = this.state;
// Render one of 3 things depending on permissions
return (
<View style={styles.container}>
{cameraPermission === null ? (
<Text>Waiting for permission...</Text>
) : cameraPermission === false ? (
<Text>Permission denied</Text>
@dceddia
dceddia / App.js
Created Jun 15, 2018
Importing Camera and rendering based on permissions.
View App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// add this:
import { Camera, Permissions } from 'expo';
export default class App extends React.Component {
// initialize state
state = {
cameraPermission: null
You can’t perform that action at this time.