dshster

/* Button */
button, input[type="submit"] {
	display: inline-block;
	padding: 2px 20px;
	background: #c4c4c4;
	background: -webkit-linear-gradient(top, #eee, #c4c4c4);
	background: -moz-linear-gradient(top, #eee, #c4c4c4);
	background: -ms-linear-gradient(top, #eee, #c4c4c4);
	background: -o-linear-gradient(top, #eee, #c4c4c4);
	background: linear-gradient(top, #eee, #c4c4c4);

dshster

// Originally solved by Tim Branyen in his drop file plugin
// http://dev.aboutnerd.com/jQuery.dropFile/jquery.dropFile.js
jQuery.event.props.push('dataTransfer');

dshster

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

dshster

/*
 * Grunt Task File
 * ---------------
 *
 * Task: coffee
 * Description: Compile CoffeeScript files
 * Dependencies: coffee-script
 *
 */

dshster

   ./frontend
    │
    ├── /coffee
    │   ├── /models
    │   |   └── MyBaseModel.coffee
    │   |   └── MyModel.coffee
    │   ├── /routers
    │   |   └── MyRouter.coffee
    │   ├── /templates
    |   │   ├── /tmpl-dir1

dshster

  grunt.registerMultiTask("cssindex", "Create an 'index' file of css @import rules for sitewide CSS", function() {

    var file = grunt.file;
    var target = this.target;
    var fileHandles = this.data.map(function( glob ) {
      return file.expand( glob );
    });
    var imports;
    
    fileHandles = fileHandles.concat.apply( [], fileHandles );

dshster

module.exports = function(grunt) {

  grunt.initConfig({
    inline: {
      'index.html': ['tpl/*.html']
    }
  });

  grunt.registerMultiTask('inline', 'Inline AngularJS templates into single file.', function() {
    var SCRIPT = '<script type="text/ng-template" id="<%= id %>"><%= content %></script>\n';

dshster

dshster

HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
    return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
    this.selectionStart = position;
    this.selectionEnd = position;
    this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
    if (this.selectionStart == this.selectionEnd) {

dshster

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {