dgs700 / customElementService.js

Last active August 29, 2015 14:05

AngularJS 1.x service that constructs and registers Custom Elements in the DOM

	// This depends on a custom element polyfill for browsers
	// other than chrome and opera - 9/1/14
	angular.module('CustomElemFactory', [])
	.service('customElem', [
	'$window',
	function($window){
	// hash of registered element types
	// that Angular knows about
	// note that this would NOT include CEs registered from
	// elsewhere

markgoodyear / 01-gulpfile.js

Last active May 5, 2023 03:21

Comparison between gulp and Grunt. See http://markgoodyear.com/2014/01/getting-started-with-gulp/ for a write-up.

	/*!
	* gulp
	* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
	*/

	// Load plugins
	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	cssnano = require('gulp-cssnano'),

addyosmani / examples.md

Last active February 23, 2016 18:22

Object.observe() examples from my talk

What are we trying to observe? Raw object data.

// Objects
var obj = { id: 2 };
obj.id = 3; // obj == { id: 3 }
 
// Arrays
var arr = ['foo', 'bar'];
arr.splice(1, 1, 'baz'); // arr == ['foo', 'baz'];

ebidel / Web Components Resources.md

Last active November 16, 2025 03:12

List of resources related to Web Components

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

dgs700 / backbone_hb_template.html

Created August 9, 2013 22:04

Example of an Angularjs web component included inside a Backbone.js app. A bit rough for now, but will be refined.

	<div class="action-links">

	<!-- Include our Angular web component in the page as html markup
	passing in (injecting) any data, config, or styling objects from the bckbone app-->
	<span angular-web-component
	og-id="{{model.id}}"
	og-url="{{model.url}}"
	og-key="{{model.key}}"
	og-title="{{model.title}}"
	og-image="{{model.image}}"

dgs700 / app.js

Last active December 17, 2015 08:38

Tibbr App Framework bootstrap code - Angularjs and some bare metal js

	//Tibbr plugins html directives and associated controllers
	(function () {
	'use strict';
	//declare the plugins module with dependancies
	var tibbrPlugins = angular.module('TibbrPlugins', [
	'TibbrFilters',
	'Tibbr',
	'EventsBus',
	'PageBus',
	'TibbrAPI',

dgs700 / app.js

Created February 25, 2013 02:18

First Angular.js implementation example. Tibbr plugin components "Like" and "Follow" that were previously handled with untestable jQuery spaghetti refactored to Angular conventions. Besides its main role as a tight data binding (MVVM) framework, Angular is showing promise for creating reusable and exportable UI components without too much overhead.

	//Tibbr plugins html directives and associated controllers
	(function () {
	'use strict';
	//declare the plugins module with dependancies
	var tibbrPlugins = angular.module('TibbrPlugins', ['TibbrFilters', 'Tibbr', 'EventsBus', 'PageBus', 'TibbrAPI']);

	//code to run when a like tag is encountered
	tibbrPlugins.directive('tibrLike', function factory($window) {
	var directiveDefinitionObject = {
	//template: '<div>hi</div>',

dgs700 / objectToQueryString.js

Created January 30, 2013 22:39

Javascript object to URL encoded query string converter. Code extracted from jQuery.param() and boiled down to bare metal js. Should handle deep/nested objects and arrays in the same manner as jQuery's ajax functionality.

	var objectToQueryString = function (a) {
	var prefix, s, add, name, r20, output;
	s = [];
	r20 = /%20/g;
	add = function (key, value) {
	// If value is a function, invoke it and return its value
	value = ( typeof value == 'function' ) ? value() : ( value == null ? "" : value );
	s[ s.length ] = encodeURIComponent(key) + "=" + encodeURIComponent(value);
	};
	if (a instanceof Array) {

dgs700 / Backbone.Configurator.js

Created May 11, 2012 05:58

Remove all hardcoded dependancies from your Backbone classes for clean MVC separation!

	/* Copywrite 2012, David Shapiro - portions added to existing Backbone code*/

	/* Subject to FFRUYL licensing - Feel free to rip and use as you like. */

	/globals Backbone:true, _:true, $:true/

	// @name: Configurator
	//
	// @tagline: Configurator for Backbone Apps- models, views and routers
	//

dgs700 / Paginator.js

Created March 29, 2012 22:22

Version .02 alpha of a Backbone.js based app for mentorship requests at StudentMentor.org. Some of the key features are: - dependancy management and loading via Require.js - nested / deep models via Backbone-relational.ja - complete separation of Javascri

	// generic paginator view functions and bindings
	// code here lifted from Adi Osmani's client example

	define(['order!underscore', 'order!Backbone'], function PaginatorView(){

	var PaginatorView = Backbone.View.extend({
	config: {},

	//this should be overridden
	initialize: function(){

David Shapiro dgs700

Web Components Resources

Specs / standardization