edwinwright

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

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

edwinwright

Flexbox Sticky Footer 3

A Pen by Ed Wright on CodePen.

License.

edwinwright

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

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

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

#!/bin/bash

HOOK_NAMES="pre-commit"
HOOK_DIR=$(git rev-parse --show-toplevel)/.git/hooks
INSTALL_DIR=$(git rev-parse --show-toplevel)/hooks
COLOR_GREEN=`tput setaf 2`
COLOR_RESET=`tput sgr0`

for hook in $HOOK_NAMES; do
    echo "Installing $hook hook..."

edwinwright

// Basic verification
// Returns the promise from somethingAsync()
// The test passes if resolved, fails if rejected

it('does something async with promises', function() {
  return somethingAsync();
});

// Verify a fulfilled promise
// Returns the promise from somethingAsync() and runs assertions in the onFulfilled callback

edwinwright

git filter-branch --env-filter '
OLD_EMAIL="old@email.com"
NEW_NAME="New Name"
NEW_EMAIL="new@email.com"

if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$NEW_NAME"
    export GIT_COMMITTER_EMAIL="$NEW_EMAIL"
fi

edwinwright

Naming Things

Name things modularly, from a generic to specific. https://webdesign.tutsplus.com/articles/quick-tip-name-your-sass-variables-modularly--webdesign-13364

Anti-patterns

• Don't use values as names - if the value changes, then the name becomes misleading. ie. red, green, blue.