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 1 hour ago
First Seen 12 years ago

Installs

Total 6K
Win 3K
Mac 1K
Linux 737

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