Front End Snippets
Sublime Text snippets for common .js, css and html tasks
Labels snippets
Details
Installs
- Total 6K
- Win 3K
- Mac 1K
- Linux 737
Oct 31 | Oct 30 | Oct 29 | Oct 28 | Oct 27 | Oct 26 | Oct 25 | Oct 24 | Oct 23 | Oct 22 | Oct 21 | Oct 20 | Oct 19 | Oct 18 | Oct 17 | Oct 16 | Oct 15 | Oct 14 | Oct 13 | Oct 12 | Oct 11 | Oct 10 | Oct 9 | Oct 8 | Oct 7 | Oct 6 | Oct 5 | Oct 4 | Oct 3 | Oct 2 | Oct 1 | Sep 30 | Sep 29 | Sep 28 | Sep 27 | Sep 26 | Sep 25 | Sep 24 | Sep 23 | Sep 22 | Sep 21 | Sep 20 | Sep 19 | Sep 18 | Sep 17 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 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 | 2 |
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 | 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]+$/
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