Skip to content

Instantly share code, notes, and snippets.

@edwinwright
edwinwright / injectScript.js
Created June 13, 2017 14:30
Promise based script loader
const injectScript = (function() {
const scripts = {};
return (url) => {
if (scripts[url]) {
return scripts[url];
} else {
const promise = new Promise((resolve, reject) => {
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.type = 'text/javascript';
@edwinwright
edwinwright / index.js
Last active October 10, 2016 13:54
RequireBin - Flattening Marvel API response with normalizr
const response = {
"code": 200,
"status": "Ok",
"copyright": "© 2016 MARVEL",
"attributionText": "Data provided by Marvel. © 2016 MARVEL",
"attributionHTML": "<a href=\"http://marvel.com\">Data provided by Marvel. © 2016 MARVEL</a>",
"etag": "2f08937547f5cbb41e1f5845f9b3adf36417e332",
"data": {
"offset": 0,
"limit": 20,
@edwinwright
edwinwright / gh-pages-deploy.md
Created September 6, 2016 20:49 — forked from cobyism/gh-pages-deploy.md
Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](http://yeoman.io).

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

@edwinwright
edwinwright / flexbox-sticky-footer-3.markdown
Created August 11, 2016 13:03
Flexbox Sticky Footer 3
@edwinwright
edwinwright / 0_reuse_code.js
Created June 3, 2016 10:00
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

Responsive Scrolling Tabs

Magic tabs that resize themselves according to their container's width. Tab widths default to a percentage value, which is set automatically in CSS by counting child elements. If a tab's content overflows its available width, then the tabs adjust their widths to fit. If they can't fit on the screen then the tabs start to scroll horizontally.

A Pen by Ed Wright on CodePen.

License.

@edwinwright
edwinwright / full.html
Last active January 1, 2016 07:19
Templates for social media meta tags.
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters.">
<!-- Google Authorship and Publisher Markup -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts">
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]">

Header 1

Header 2

Header 3 ### (Hashes on right are optional)

Header 4

Header 5

Markdown plus h2 with a custom ID ## {#id-goes-here}

Link back to H2

This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
@edwinwright
edwinwright / umd-script-boilerplate.js
Last active August 29, 2015 14:27 — forked from cferdinandi/umd-script-boilerplate.js
A simple boilerplate for UMD JS modules.
(function (root, factory) {
if ( typeof define === 'function' && define.amd ) {
define([], factory(root));
} else if ( typeof exports === 'object' ) {
module.exports = factory(root);
} else {
root.myPlugin = factory(root);
}
})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {