leoj3n

Bootstrap is hard to customize and rather bulky; when you enclude the entire library on your page, rarely are you utilizing all of the parts. Luckily, with the help of StealJS, we can load just the needed parts within a DoneJS application ON DEMAND and NON-DESTRUCTIVELY. You know how difficult it can be if you've tried to accomplish this in the past with old versions of Bootstrap within a framework of your choice. Well, if you're willing to adopt DoneJS (or at least the module loader StealJS), you'll be off to the races with a lightweight app that loads just the bare minmium of needed CSS and JS.

This guide will be broken into parts:

• Installing DoneJS
• Generating a new DoneJS project
• Installing Boostrap v4
• Installing Tether
• Generating a new DoneJS component
• Editing the package.json

leoj3n

This is a short tutorial on how to develop a new project locally based off the DoneJS place-my-order example. The main difference being this guide is more synchronous (goes more step-by-step to build the app up) and most importantly is entirely localized, so you can start editing and building your own API and assets module, in addition to the main app.

Workspace

Create a directory to hold the project, api, and any local modules:

mkdir -p ~/workspace/my-app && cd ~/workspace/my-app

leoj3n

Setup Tutorial ★ Static Showdown 2015

Notes:

• Replace TEAM with your team's name
• Judges will be using STABLE browsers to judge Prod
• You will not find your app in Divshot Dashboard, only when using divshot-cli

Install Divshot-CLI

leoj3n

<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/iconsets/av-icons.html">

leoj3n

<link rel="import" href="../yt-video/yt-search-video.html">
<link rel="import" href="../speech-mic/speech-mic.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;

leoj3n

Git and GitHub tools

A big list of links to Git and GitHub tools!

• Contributing
• Tools
  • aanand/git-up
  • afeld/git-plugins
  • arc90/git-sweep

• chillu/github-dashing

leoj3n

Learning gush!

Create an issue

There needs to be an open issue before a PR can be made. This makes sense because you should always discuss the work you're about to do with team members before you go off and do it. It also gives someone else a chance to "take" the issue and create a PR for it if you're too busy, forget, or w/e.

I created this issue: https://github.com/cordoval/gush/issues/114

Take the issue, fix, and then create a PR

leoj3n

<?php
  /*
   Plugin Name: Image Optimizer
   Plugin URI:
   Description: Automatically optimizes images using jpegtran and optipng on upload
   Version: 0.1 
   Author: Scott Walkinshaw
   Author URI:
   Support URI:
   */

leoj3n

// Live demo: http://traceur-compiler.googlecode.com/git/demo/repl.html#module%20Player%20{%0A%20%20let%20options%20%3D%20new%20WeakMap%28%29%3B%0A%20%20%0A%20%20export%20class%20Controller%20{%0A%20%20%20%20constructor%28%20id%20%3D%200%2C%20type%20%3D%20%22jwplayer%22%20%29%20{%0A%20%20%20%20%20%20options.set%28%20this%2C%20{%20id%3A%20id%2C%20type%3A%20type%20}%20%29%3B%0A%20%20%20%20}%0A%20%20%20%20name%28%29%20{%0A%20%20%20%20%20%20return%20%22contoller%22%20%2B%20options.get%28this%29[%22id%22]%3B%0A%20%20%20%20}%0A%20%20%20%20setId%28%20id%20%3D%200%20%29%20{%0A%20%20%20%20%20%20options.get%28this%29[%22id%22]%20%3D%20id%3B%0A%20%20%20%20}%0A%20%20}%0A}%0A%0Aimport%20{%20Controller%20}%20from%20Player%3B%0A%0Avar%20c%20%3D%20new%20Controller%28%201%20%29%3B%0A%0Ac.setId%28%20300%20%29%3B%0A%0Aconsole.log%28%20%22Controller%20name%3A%20%22%20%2B%20c.name%28%29%20%29%3B

module Player {
  let options = new WeakMap();
  
  export class Controller {
    constructor( id = 0, type = "jwplayer" ) {
      opti

leoj3n

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  </head>
  <body>
    <div id="board"></div>
  </body>
</html>