Skip to content

Instantly share code, notes, and snippets.

View ryan-roemer's full-sized avatar

Ryan Roemer ryan-roemer

321 followers · 5 following
View GitHub Profile
@ryan-roemer
ryan-roemer / index-esm.html
Last active August 30, 2019 19:03
Analytics vanilla HTML example using ESM
<!doctype html>
<html>
<head>
<title>Using Analytics in HTML</title>
</head>
<body>
<button id="track">
Track Click
</button>
@ryan-roemer
ryan-roemer / urql-publish-changes.diff
Last active February 15, 2019 22:13
urql - chore/publishing
$ publish-diff -o urql@1.0.0 -n .
Index: dist/types/client.test.d.ts
===================================================================
--- dist/types/client.test.d.ts urql@1.0.0
+++ dist/types/client.test.d.ts .
@@ -1,1 +1,0 @@
-export {};
\ No newline at end of file
Index: dist/types/context.test.d.ts
@ryan-roemer
ryan-roemer / urql-strict-vs-loose.diff
Created February 22, 2018 17:12
urql strict vs. loose mode diff
$ colordiff -Naurw lib-strict lib
diff -Naurw lib-strict/components/client.js lib/components/client.js
--- lib-strict/components/client.js 2018-02-22 09:09:37.000000000 -0800
+++ lib/components/client.js 2018-02-22 09:10:03.000000000 -0800
@@ -11,75 +11,30 @@
var _typenames = require("../modules/typenames");
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
@ryan-roemer
ryan-roemer / compare.md
Last active September 22, 2017 20:49
Component Playground or React Live

Which live React component project should I use?

There are multiple options when it comes to live, editable React component environments. Formidable actually has two first class projects to help you out: component-playground and react-live. Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.

Here's a high-level decision tree:

  • If you want fast and easy setup and integration, then component-playground may be the ticket!
  • If you want a smaller bundle, SSR, and more flexibility, then react-live is for you!

Here are the various factors at play:

@ryan-roemer
ryan-roemer / 00-README.md
Created April 20, 2017 08:40
gzip math fun

GZ Math Fun

$ for f in *.js; do echo $f - $(gzip $f -c | wc -c); done
example.js - 178
without-0.js - 173
without-1.js - 172
without-01.js - 170
@ryan-roemer
ryan-roemer / .gitignore
Last active September 21, 2016 19:38
Split files in directories into subfiles by line count. (So you can get viewable GitHub diff's for review-only code!)
\.git
\.hg
\.DS_Store
\.project
bower_components
node_modules
npm-debug\.log*
phantomjsdriver\.log
@ryan-roemer
ryan-roemer / bundle.multiple-exports.js
Last active March 4, 2021 05:44
Webpack: Various ways to have multiple exports.
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
@ryan-roemer
ryan-roemer / bundle.js
Last active February 24, 2016 21:27
Simple JS file with lodash memoize.
// Here is the output bundle with filepaths included to see what _also_
// comes in with memoize.
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
@ryan-roemer
ryan-roemer / builder-local-install.md
Created January 14, 2016 18:55
Snippet for using local `builder`.

We use builder to control our development workflows. builder is an npm dependency found in node_modules/.bin/builder. To use the shorthand builder command without the full path, please follow the steps in the builder local install guide.

The "short, short version" of this on Mac/Linux is to add:

export PATH="${PATH}:./node_modules/.bin"
@ryan-roemer
ryan-roemer / abstract.md
Created April 13, 2015 22:25
Polytglot Workshop (5/22/2015) - Full. Stack. Testing.

Full. Stack. Testing. (with JavaScript)

Modern application testing faces so many options for frontend, backend, and integration tests that developers can be overwhelmed in a sea of choices and technologies. As a take on "full-stack" development, we will explore full-stack testing -- using a single stack of core techniques and libraries that offer a cogent, minimal way to "test all the things" in your application.

Our workshop will explore what types of tests you should write and how to write them, with a focus on:

  • Backend Tests: Server code, network payloads.
  • Frontend Tests: UI/UX and browser code.
  • Integration Tests: Automating end-to-end user interactions with the full application.