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

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.

edwinwright

Flexbox Sticky Footer 3

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

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

A scatterplot chart representing the following variables:

• x: longitude (quantitive)
• y: latitude (quantitive)
• area: population (quantitive)
• color: population (quantitive)

edwinwright

(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) {

edwinwright

HTML5 Design Patterns - Figure

<a href="#fig1">Figure 1</a>
[...]
<figure id="fig1" role="group" aria-labelledby="caption">
  <figcaption id="caption">Code example</figcaption>
  <pre>
    [...]
 

edwinwright

HTML5 Design Patterns - Details

<details role="group">
  <summary role="button" aria-expanded="false">Course schedule</summary>
  <table>
    <tr>
      <th>Start date</th>
      <th>End date</th>
 Duration

edwinwright

HTML5 Design Patterns - Sections

<section role="region" aria-labelledby="heading">
  <h1 id="heading">Weather report</h1>
  [...]
</section>