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 9 years ago
Last Seen 2 hours ago
First Seen 11 years ago

Installs

Total 6K
Win 3K
Mac 1K
Linux 726

	Sep 25	Sep 24	Sep 23	Sep 22	Sep 21	Sep 20	Sep 19	Sep 18	Sep 17	Sep 16	Sep 15	Sep 14	Sep 13	Sep 12	Sep 11	Sep 10	Sep 9	Sep 8	Sep 7	Sep 6	Sep 5	Sep 4	Sep 3	Sep 2	Sep 1	Aug 31	Aug 30	Aug 29	Aug 28	Aug 27	Aug 26	Aug 25	Aug 24	Aug 23	Aug 22	Aug 21	Aug 20	Aug 19	Aug 18	Aug 17	Aug 16	Aug 15	Aug 14	Aug 13	Aug 12
Windows	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	1	0	0	0	0	0	0	1	1	0	0	0	0	0	0	0	1	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	0	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	1	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	1

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