Skip to content

Instantly share code, notes, and snippets.

@jacobarriola
jacobarriola / snippets.json
Created August 18, 2022 19:34
React snippets
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
@jacobarriola
jacobarriola / product-bundle.php
Last active April 7, 2021 11:27
Add WooCommerce Product Bundles to GraphQL API
<?php
namespace App\GraphQL;
const TYPE_BUNDLE_PRODUCT = 'BundleProduct';
/**
* Register BundleProduct Type
*/
add_action( 'graphql_register_types', function () {
<?php
namespace App\GraphQL;
use WC_Bundled_Item_Data;
use WC_PB_DB;
use WPGraphQL\AppContext;
use WPGraphQL\WooCommerce\Data\Connection\Product_Connection_Resolver;
/**
@jacobarriola
jacobarriola / blocks.js
Created September 14, 2020 12:44
Recursive block component
const Blocks = ({ blocks }) => {
return blocks.map(block => (
<RecursiveBlockRenderer
key={`${block.name}_${block.order}`}
block={block}
/>
))
}
function RecursiveBlockRenderer({ block }) {
<template>
<form @submit.prevent="submitForm">
<input type="email" name="email" v-model="email">
<textarea name="message" cols="30" rows="5" v-model="message" required></textarea>
<input type="submit" value="Submit">
</form>
</template>
<script>
export default {
{"glyphs":{"0":{"ha":738,"x_min":0,"x_max":0,"o":"m 679 400 b 368 -14 679 176 569 -14 b 61 400 167 -14 61 176 b 374 814 61 625 172 814 b 679 400 574 814 679 625 m 565 400 b 371 719 565 575 501 719 b 175 400 240 719 175 575 b 371 81 175 226 240 81 b 565 400 501 81 565 226 "},"1":{"ha":474,"x_min":0,"x_max":0,"o":"m 219 0 l 219 674 l 79 622 l 46 718 l 311 818 l 329 818 l 329 0 "},"2":{"ha":606,"x_min":0,"x_max":0,"o":"m 31 0 l 24 15 b 304 336 157 158 246 260 b 413 571 371 421 413 486 b 261 713 413 657 357 713 b 89 660 207 713 146 699 l 56 749 b 260 814 113 786 189 814 b 526 583 425 814 526 717 b 403 301 526 490 485 408 b 229 99 356 242 296 171 l 536 99 l 536 0 "},"3":{"ha":586,"x_min":0,"x_max":0,"o":"m 290 458 b 524 225 444 438 524 350 b 253 -14 524 92 421 -14 b 44 24 178 -14 115 0 l 75 115 b 247 83 142 93 199 83 b 417 229 357 83 417 139 b 206 374 417 321 346 374 b 119 368 179 374 150 372 l 111 381 l 361 700 l 47 700 l 47 800 l 539 800 l 546 785 "},"4":{"ha":671,"x_min":0,"x_max":0,"o":"m 507 240 l 507 -3 l 40
{"glyphs":{"0":{"ha":738,"x_min":0,"x_max":0,"o":"m 679 400 b 374 814 679 625 574 814 b 61 400 172 814 61 625 b 368 -14 61 176 167 -14 b 679 400 569 -14 679 176 z m 565 400 b 371 81 565 226 501 81 b 175 400 240 81 175 226 b 371 719 175 575 240 719 b 565 400 501 719 565 575 z "},"1":{"ha":474,"x_min":0,"x_max":0,"o":"m 329 0 l 329 818 l 311 818 l 46 718 l 79 622 l 219 674 l 219 0 z "},"2":{"ha":606,"x_min":0,"x_max":0,"o":"m 536 0 l 536 99 l 229 99 b 403 301 296 171 356 242 b 526 583 485 408 526 490 b 260 814 526 717 425 814 b 56 749 189 814 113 786 l 89 660 b 261 713 146 699 207 713 b 413 571 357 713 413 657 b 304 336 413 486 371 421 b 24 15 246 260 157 158 l 31 0 z "},"3":{"ha":586,"x_min":0,"x_max":0,"o":"m 546 785 l 539 800 l 47 800 l 47 700 l 361 700 l 111 381 l 119 368 b 206 374 150 372 179 374 b 417 229 346 374 417 321 b 247 83 417 139 357 83 b 75 115 199 83 142 93 l 44 24 b 253 -14 115 0 178 -14 b 524 225 421 -14 524 92 b 290 458 524 350 444 438 z "},"4":{"ha":671,"x_min":0,"x_max":0,"o":"m 640 240 l 6
@jacobarriola
jacobarriola / nodelist-iteration.js
Created April 6, 2017 20:47 — forked from bendc/nodelist-iteration.js
ES6: Iterating over a NodeList
var elements = document.querySelectorAll("div"),
callback = (el) => { console.log(el); };
// Spread operator
[...elements].forEach(callback);
// Array.from()
Array.from(elements).forEach(callback);
// for...of statement
@jacobarriola
jacobarriola / markup.html
Created October 31, 2016 15:49
Blurry to awesome images
<figure class="placeholder" data-large="{path to large image}">
<img src="{path to small image}" class="img-small loaded" alt="{alt}" /> <!-- small image about 50px wide and height to match ratio; keep to less than 3k -->
<div style="padding-bottom: {image ratio}%;"></div> <!-- ratio is height-in-px/width-in-px * 100 -->
</figure>
<html>
<head>
<link rel="canonical" href="http://freebeacon.com/politics/cuomo-american-people-find-clintons-answers-war-terror-unsatisfying/"/>
<meta charset="utf-8"/>
<meta property="op:generator" content="facebook-instant-articles-sdk-php"/>
<meta property="op:generator:version" content="1.1.0"/>
<meta property="op:generator:application" content="facebook-instant-articles-wp"/>
<meta property="op:generator:application:version" content="2.11"/>
<meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php"/>
<meta property="op:generator:transformer:version" content="1.1.0"/>