Front End Snippets _{For Sublime Text}

basic js

Multiline comment

_*

/*
* message
*/

console.log()

_log

console.log();

for loop

_for

var len = array.length;
for(var ii = 0; ii < len; ii++){
  var cur = array[ii];
  /* code ... */
}

for-in loop

_forin

for (var key in object){
 if (object.hasOwnProperty(key)){
   var value = object[key];
 }
}

Google Analytics

_ga

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '${1:UA-XXXXX-X}']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

switch

_switch

switch(var){
  case :
    /* code ... */
  break;
  case :
    /* code ... */
  break;
  default:
    /* code ... */
  break;
}

ternary operator

_?

condition ? true : false;

try / catch / finally

_try

try {
  /* code... */
} 
catch (e) {
   /* code... */
}
finally (e) {
   /* code... */
}

Array.filter()

_filter

var filtered = array.filter(
    function(element){ 
      return true|false; 
    }
  );

Array.sort()

_sort

items.sort(function (a, b) {
  if (${1:a > b}){
    return 1;
  }
  if (${2:a < b}){
    return -1;
  }
  // a must be equal to b
  return 0;
});

setTimeout

_timeout

setTimeout(function(){},delay);

named function

_function

function method(arguments){
  /* code ... */
}

DOMContentLoaded Event

_DOMContentLoaded

document.addEventListener('DOMContentLoaded', function(){
  //code
});

querySelectorAll pattern

_querySelectorAll


var elements = document.querySelectorAll('selector');
Array.prototype.forEach.call(elementse, function(el, i){
  //code
});

advanced js

iife

_iife

(function(){
  /* code */
})();

Class

_class

function ClassName (param) {

  this.publicVar = 'foo';
  var privateVar = 'bar';

  var that = this;

  function privateMethod(){
    /* 
    * this method can be accessed by
    * privileged methods but not by
    * public methods.
    */
  }

  this.privilegedMethod = function(){
    /* 
    * this method has access to both
    * the public and private properties
    * of the object
    */
  }
}
 
ClassName.prototype.publicMethod = function() {};

Singleton

_singleton

var ClassName;
(function() {
    var instance;

    ClassName = function ClassName() {
        if (instance) {
            return instance;
        }

        instance = this;

        /* code */
    };
}());

Promise

_promise

var promise = new Promise(function(resolve, reject) {
  
  var success;

  /* code */

  if (success) {
    resolve();
  }
  else {
    reject(Error());
  }
});

promise.then(
  function(result) {
    console.log(result);
  },
  function(err) {
    console.log(err);
  }
);

Promise (then)

_then

promise.then(
  function(result) {
    console.log(result);
  },
  function(err) {
    console.log(err);
  }
);

jQuery snippets

$.ajax()

_$ajax


  $.ajax({
    url: '',
    data: {}
  })
  .done(function ( data ) {
    /* code ... */
  })
  .fail(function(jqXHR,textStatus){
    /* code ... */
  })
  .always(function(jqXHR,textStatus){
    /* code ... */
  });

$(document).ready()

_$dr


$(document).ready(function(e){
  /* code ... */
});

$(function)

_$fn


$(function() {
  /* code ... */
});

$('.selector').on()

_$on


$('selector').on('event', function(e){
  /* code ... */
});

jQuery plugin boilerplate

_plugin


(function($){

  var ClassName = function (element, options){
    
    this.$element  = $(element);

    // plugin options
    this.options   = $.extend({}, ClassName.DEFAULTS, options);

    var that = this;

  };

  ClassName.DEFAULTS = {};

  var old = $.fn.pluginName;

  $.fn.pluginName = function (option) {
    return this.each(function () {
      var $this   = $(this);
      var data    = $this.data('pluginName');
      var options = typeof option === 'object' && option;
      if (!data){
        $this.data('pluginName', (data = new ClassName(this, options)));
      }
    });
  };

  $.fn.pluginName.Constructor = ClassName;

  $.fn.pluginName.noConflict = function() {
    $.fn.pluginName = old;
    return this;
  };

})(jQuery);

publish (tiny pub/sub)

_publish


  $.publish('whatever.event.name',payload);

subscribe (tiny pub/sub)

_subscribe


  function handlerFunction(){
    return function(_,data){
      console.log('subscribe ',data);
    };
  }
  
  $.subscribe('whatever.event.name',handlerFunction());

html snippets

.html page

_html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="">

    </head>
    <body>
      <main>
        
      </main>
      <script type="text/javascript" src=""></script>
  </body>
</html>

html tag

_tag


<tag attribute='value'>
  content
</tag>

script tag

_script

<script title="Description of the script" src="path/to/script.js"></script>

Bootstrap CDN (css)

_cdn_bootstrap_css

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

Bootstrap CDN (js)

_cdn_bootstrap_js

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

jQuery CDN script tag

_$cdn

<script title="jQuery from the CDN" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Basic YouTube video embed

_youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/4mEbABPtTv8" frameborder="0" allowfullscreen></iframe>

video tag

_video

<video 
  controls preload="auto" width="640" height="264"
  poster="PATH_TO_ASSETS.png">
 <source src="PATH_TO_ASSETS.mp4" type='video/mp4' />
 <source src="PATH_TO_ASSETS.webm" type='video/webm' />
 <source src="PATH_TO_ASSETS.ogv" type='video/ogg' />
</video>

bootstrap html snippets

Bootstrap Alert

_bootstrap_alert


<div class="alert alert-info" alert-dismissible role="alert">Alert message</div>

Bootstrap Button

_bootstrap_button


<button type="button" class="btn btn-default">Label</button>

Bootstrap Dropdown

_bootstrap_dropdown


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  </ul>
</div>

Bootstrap Grid

_bootstrap_grid


<div class='container'>
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div>
</div>

Bootstrap Grid Column

_bootstrap_column


<div class="col-md-6"></div>

Bootstrap Icon

_bootstrap_icon


<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Bootstrap Jumbotron

_bootstrap_jumbotron


<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Bootstrap Media Object

_bootstrap_media_object


<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Bootstrap Navbar

_bootstrap_navbar


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bootstrap Pagination

_bootstrap_pagination


<nav>
  <ul class="pagination">
    <li class='disabled'>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li class='active'><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

Bootstrap Progress Bar

_bootstrap_progress_bar


<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Bootstrap Tabs

_bootstrap_tabs


<div role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tab-one" aria-controls="tab-one" role="tab" data-toggle="tab">Tab One</a></li>
    <li role="presentation"><a href="#tab-two" aria-controls="tab-two" role="tab" data-toggle="tab">Tab Two</a></li>
    <li role="presentation"><a href="#tab-three" aria-controls="tab-three" role="tab" data-toggle="tab">Tab Three</a></li>
    <li role="presentation"><a href="#tab-four" aria-controls="tab-four" role="tab" data-toggle="tab">Tab Four</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab-one">Tab One Content</div>
    <div role="tabpanel" class="tab-pane" id="tab-two">Tab Two Content</div>
    <div role="tabpanel" class="tab-pane" id="tab-three">Tab Three Content</div>
    <div role="tabpanel" class="tab-pane" id="tab-four">Tab Four Content</div>
  </div>
</div>

css snippets

css rule

_rule


selector{
  property : value;
}

media query

_media_query


@media all and (min-width: 50em) {
  
}

animation @keyframes

_keyframes


@-webkit-keyframes ANIMATION_NAME {
  0%   {  }
  100% {  }
}
@-moz-keyframes ANIMATION_NAME {
  0%   {  }
  100% {  }
}
@-o-keyframes ANIMATION_NAME {
  0%   {  }
  100% {  }
}
@keyframes ANIMATION_NAME {
  0%   {  }
  100% {  }
}

transition

_transition


-webkit-transition-property: all;
transition-property: all;

-webkit-transition-duration: 750ms;
transition-duration: 750ms;

-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;

-webkit-transition-delay: 500ms;
transition-delay: 500ms;

regular expression snippets

alphanumeric

_regex_alphanumeric

/^[0-9a-zA-Z]+$/

email

_regex_email

/^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;

url

_regex_url

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

misc. snippets

Python's SimpleHttp Server

_server

Use this terminal command to serve up local files on http://localhost:8080/


python -m SimpleHTTPServer 8080

.gitignore

_gitignore

# osx noise
.DS_Store

# svn & cvs
.svn
CVS

*.log
node_modules
bower_components

# project specific

ascii skull

_skull

I use this to warn other developers about work in progress sections of my code.

//
//   .-"""-.
//  / _   _ \
//  ](_' `_)[
//  `-. x ,-' 
//    |~~~|
//    `---'
//

Front End Snippets For Sublime Text

basic js

Multiline comment

_*

console.log()

_log

for loop

_for

for-in loop

_forin

Google Analytics

_ga

switch

_switch

ternary operator

_?

try / catch / finally

_try

Array.filter()

_filter

Array.sort()

_sort

setTimeout

_timeout

named function

_function

DOMContentLoaded Event

_DOMContentLoaded

querySelectorAll pattern

_querySelectorAll

advanced js

iife

_iife

Class

_class

Singleton

_singleton

Promise

_promise

Promise (then)

_then

jQuery snippets

$.ajax()

_$ajax

$(document).ready()

_$dr

$(function)

_$fn

$('.selector').on()

_$on

jQuery plugin boilerplate

_plugin

publish (tiny pub/sub)

_publish

subscribe (tiny pub/sub)

_subscribe

html snippets

.html page

_html

html tag

_tag

script tag

_script

Bootstrap CDN (css)

_cdn_bootstrap_css

Bootstrap CDN (js)

_cdn_bootstrap_js

jQuery CDN script tag

_$cdn

Basic YouTube video embed

_youtube

video tag

_video

bootstrap html snippets

Bootstrap Alert

_bootstrap_alert

Bootstrap Button

_bootstrap_button

Bootstrap Dropdown

_bootstrap_dropdown

Front End Snippets _{For Sublime Text}