Skip to content

Instantly share code, notes, and snippets.

@filipmares
filipmares / Howler
Created December 5, 2014 01:02
Howler
// Create a sound with fallback sound files
var sound = new Howl({
urls: ['sound.mp3', 'sound.ogg']
});
// Play sound
sound.play();
@filipmares
filipmares / LayoutView
Created December 5, 2014 01:01
LayoutView
/*
A simple task list app with standard sidebar and main area design
_______________________
| | |
|sidebar| main |
|_______|_______________|
*/
// Define a LayoutView and its Regions
var AppLayoutView = Backbone.Marionette.LayoutView.extend({
@filipmares
filipmares / CollectionView
Last active August 29, 2015 14:10
Talko Web Libraries That Enable Our Modular Design
// Task ItemView
var TaskView = Backbone.Marionette.ItemView.extend({
template: "#task-template"
});
// CollectionView of Task ItemViews
var TasksCollectionView = Backbone.Marionette.CollectionView.extend({
childView: TaskView
});
@filipmares
filipmares / Backbone.Marionette.OrderedCollectionView.js
Last active November 17, 2018 10:13
Backbone.Marionette CollectionViews are awesome, but they don't support collection re-ordering out of the box. The library provides some documentation to order CollectionViews and CompositeViews, but it's based on the children already inserted. I prefer my views to reflect the state of my models and collections.
'use strict';
Marionette.SortedCollectionView = Marionette.CollectionView.extend({
/**
* Given a model, function tries to find the correct itemView based on the
* model's cid. Returns itemview or null
* @param model
* @return itemView/null
*/
@filipmares
filipmares / gist:4662570
Created January 29, 2013 07:57
Helper function that returns a falt array
function _loader(array){
var flat = [];
for (var i = 0, l = array.length; i < l; i++){
var type = Object.prototype.toString.call(array[i]).split(' ').pop().split(']').shift().toLowerCase();
if (type) { flat = flat.concat(/^(array|collection|arguments|object)$/.test(type) ? _flat(array[i]) : array[i]); }
}
return flat;
}
@filipmares
filipmares / centering.css
Created November 14, 2011 02:52
Pulse 3 CSS tricks
div{
position: absolute;
height: 50px;
width: 200px;
}
.center-horizontally{
left: 50%;
margin-left: -100px;