Front End Snippets

by jleonard ALL

Sublime Text snippets for common .js, css and html tasks

Details

Version 2015.03.28.14.59.23
Homepage jleonard.github.io
Issues github.com
Modified 10 years ago
Last Seen 31 minutes ago
First Seen 12 years ago

Installs

Total 6K
Win 3K
Mac 1K
Linux 737

	Dec 21	Dec 20	Dec 19	Dec 18	Dec 17	Dec 16	Dec 15	Dec 14	Dec 13	Dec 12	Dec 11	Dec 10	Dec 9	Dec 8	Dec 7	Dec 6	Dec 5	Dec 4	Dec 3	Dec 2	Dec 1	Nov 30	Nov 29	Nov 28	Nov 27	Nov 26	Nov 25	Nov 24	Nov 23	Nov 22	Nov 21	Nov 20	Nov 19	Nov 18	Nov 17	Nov 16	Nov 15	Nov 14	Nov 13	Nov 12	Nov 11	Nov 10	Nov 9	Nov 8	Nov 7
Windows	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Mac	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

Readme

Source: raw.githubusercontent.com

Front End Snippets For Sublime Text

These docs are old. Use these

basic js

Multiline comment

Tab Trigger: _*

/*
* message
*/

console.log()

Tab Trigger: _log

console.log();

for loop

Tab Trigger: _for

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

for-in loop

Tab Trigger: _forin

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

Google Analytics

Tab Trigger: _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 statement

Tab Trigger: _switch

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

ternary statement

Tab Trigger: _?

condition ? true : false;

try / catch / finally

Tab Trigger: _try

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

Array.filter()

Tab Trigger: _filter

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

Array.sort()

Tab Trigger: _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

Tab Trigger: _timeout

setTimeout(function(){},delay);

named function

Tab Trigger: _function

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

advanced js

iife

Tab Trigger: _iife

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

Class boilerplate

Tab Trigger: _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

Tab Trigger: _singleton

var ClassName;
    (function() {
        var instance;

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

            instance = this;

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

Promise

Tab Trigger: _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)

Tab Trigger: _then

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

jQuery snippets

$.ajax()

Tab Trigger: _$ajax

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

$(document).ready()

Tab Trigger: _$dr

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

```

$(function)

Tab Trigger: _$fn

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

```

$('.selector').on()

Tab Trigger: _$on

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

```

jQuery Plugin boilerplate

Tab Trigger: _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)

Tab Trigger: _publish

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

```

subscribe (tiny pub/sub)

Tab Trigger: _subscribe

```js
  function handlerFunction(){
    return function(_,data){
      console.log('subscribe ',data);
    };
  }

  $.subscribe('whatever.event.name',handlerFunction());

```

html snippets

.html page

Tab Trigger: _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>

video tag

Tab Trigger: _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>

css snippets

responsive breakpoint

Tab Trigger: _breakpoint

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

}

animation @keyframes

Tab Trigger: _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

Tab Trigger: _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

Tab Trigger: _regex_alphanumeric

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

email

Tab Trigger: _regex_email

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

url

Tab Trigger: _regex_url

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

misc. snippets

.gitignore

Tab Trigger: _gitignore

# osx noise
.DS_Store

# svn & cvs
.svn
CVS

*.log
node_modules
bower_components

# project specific