Resources for learning web design & front-end development:
ONLINE
Design
/* global YUI */ | |
YUI.add("my-module", function (Y) { | |
"use strict"; | |
Y.MyWidget = Y.Base.create("my-module", Y.Widget, [], { | |
initializer: function () { | |
// publish any events | |
// do any instantiation that doesn't require DOM | |
}, | |
renderUI: function () { |
// If you don't use underscore.js, use it (http://documentcloud.github.com/underscore/) | |
// Then, use underscore's mixin method to extend it with all your other utility methods | |
// like so: | |
_.mixin({ | |
escapeHtml: function () { | |
return this.replace(/&/g,'&') | |
.replace(/>/g,'>') | |
.replace(/</g,'<') | |
.replace(/"/g,'"') | |
.replace(/'/g,'''); |
window.onload = function () { | |
var s = document.body.style; | |
s.height = window.screen.availHeight + 'px'; | |
setTimeout(function () { | |
window.scrollTo(0, 0); | |
s.height = window.innerHeight + 'px'; | |
}, 50); | |
}; |
var http = require("http"), | |
url = require("url"), | |
path = require("path"), | |
fs = require("fs") | |
port = process.argv[2] || 8888; | |
http.createServer(function(request, response) { | |
var uri = url.parse(request.url).pathname | |
, filename = path.join(process.cwd(), uri); |
YUI().use('node', 'array-extras', 'querystring-stringify', function (Y) { | |
var form = Y.one('FORM_SELECTOR'), query; | |
query = Y.QueryString.stringify(Y.Array.reduce(Y.one(form).all('input[name],select[name],textarea[name]')._nodes, {}, function (init, el, index, array) { | |
init[el.name] = el.value; | |
return init; | |
})); | |
console.log(query); | |
}); |
Resources for learning web design & front-end development:
ONLINE
Design
/* | |
* Normalize.css converted to Stylus | |
* http://github.com/necolas/normalize.css | |
*/ | |
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section | |
display: block | |
audio, canvas, video | |
display: inline-block |
/* Pretend app setup stuff is here */ | |
/* Kick off app */ | |
jQuery(function($) { | |
var Gallery = app.module("gallery"); | |
app.Router = Backbone.Router.extend({ | |
initialize: function() { | |
this.gallery = new Gallery.Router("gallery/"); |
/* | |
* picked from http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices | |
* | |
*/ | |
function touchHandler(event) | |
{ | |
// trick to add support for touch event to elements/widgets that do not support it | |
// by convetting convert touchevents into mouseevents | |
// only apply this trick to ui-draggable elements |
// `Default font for form elements. | |
//---------------------------------------------------------------------------------------------------- | |
$form-font-stack: Arial, "Liberation Sans", FreeSans, sans-serif !default; | |
$form-font-size: 13px !default; | |
// `Form Element Reset. | |
//---------------------------------------------------------------------------------------------------- | |
input::ms-clear, |