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, |