h1. CSS, HTML, Javascript, jQuery, jQuery Mobile, Typography, Accessibility, and Responsive Design Info


http://html5boilerplate.com

http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js/5511507#5511507 #nodejs

http://www.bentobox.io/ - all things Web-related (except Perl is not listed, of course)

http://www.modern.ie/en-us - web page/browser testing

good, basic site design to study that uses bootstrap and jquery:
http://www.wireshark.org

http://expressjs.com/ - node.js framework

http://handlebarsjs.com/

http://intentionjs.com/ -

q.
Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. Easily increase layout options and flexibility, reducing development time and lessening the necessity of media-query-driven stylesheet overrides.

Intention.js is a lightweight tool for responsive design developed at Dow Jones that manipulates the DOM via HTML attributes. The methods for manipulation are placed with the elements themselves, so flexible layouts don't seem so abstract and messy.
q..


Some pages and technologies to read and test:

programming environment for Discourse forum software:
http://blog.discourse.org/2013/04/discourse-as-your-first-rails-app


https://www.webkit.org/


test html, css, and javascript

* http://jsfiddle.net 
* http://codepen.io/


h2. Git

* http://gitorious.org
* [[GitHub info for newbies]]
http://git-scm.com



h2. JavaScript

 *** http://minifiedjs.com
http://jquery.com
http://socket.io
http://modernizr.com

h3. Single Page Apps

JavaScript MVC frameworks

http://angularjs.org
http://documentcloud.github.io/backbone
http://emberjs.com


Closures

* http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/
* http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

<code>
function foo(x) {
  var tmp = 3;
  function bar(y) {
    alert(x + y + (++tmp));
  }
  bar(10);
}
foo(2)
</code>

q.
This will always alert 16, because bar can access the x which was defined as an argument to foo, and it can also access tmp from foo.

That is a closure. A function doesn't have to return in order to be called a closure. Simply accessing variables outside of your immediate lexical scope creates a closure.

The inner function will close-over the variables of foo before leaving.

Whenever you see the function keyword within another function, the inner function has access to variables of the outer function.
q..




h2. jQuery

* http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/


h2. Breakpoints

* http://api.jquerymobile.com/
* http://alistapart.com/article/designing-for-breakpoints
* http://jothut.com/cgi-bin/junco.pl/blogpost/114/27May2013/Filament-Group-Media-Query-Breakpoints
* http://jothut.com/cgi-bin/junco.pl/blogpost/341/27May2013/More-responsive-design-breakpoint-ideas


h2. jQuery Mobile

* http://codecanyon.net/item/jquery-pull-down-to-refresh/1157148
* https://github.com/svdgraaf/pull-to-refresh
* http://forum.jquery.com/topic/pull-down-to-refresh-touch-drag-to-make-server-call
* http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html
* http://forum.jquery.com/topic/reload-jquery-mobile-styles-after-ajax-call
* http://jquerymobile.com/demos/1.2.1/docs/toolbars/docs-headers.html
* http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html
* http://stackoverflow.com/questions/6137851/jquery-mobile-refresh-button
* http://stackoverflow.com/questions/15835596/jquery-back-button-does-not-work-properly-after-refresh
* http://www.rdcube.com/default/index.cfm/blog/jquery-mobile-dynamic-page-refresh-with-load-method/
* http://jquerymobile.com/demos/1.2.0/
* http://jquerymobile.com/demos/1.1.1/docs/pages/page-anatomy.html
* http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/
* http://jquerymobile.com/demos/1.0.1/docs/about/intro.html
* http://jquerymobile.com/themeroller/index.php
* http://jquerymobile.com/demos/1.2.1/docs/api/themes.html
* http://jquerymobile.com/demos/1.0.1/docs/about/getting-started.html
* http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/headers/
* http://jquerymobile.com/demos/1.0.1/docs/api/globalconfig.html
* http://jquerymobile.com/demos/1.0.1/docs/api/events.html
* http://jquerymobile.com/demos/1.0.1/docs/api/methods.html
* http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html
* http://jquerymobile.com/demos/1.0.1/docs/pages/page-dynamic.html
* http://jquerymobile.com/demos/1.0.1/docs/pages/phonegap.html


* http://jacquesmattheij.com/the-destruction-of-the-web - basic select-dropdown used for navigation menu when screen resized small??
* http://adioso.com/blog/2013/06/responsifying-adioso/
* http://www.takingnotes.co/blog/2013/06/06/vesper-accessibility-audit/
* http://www.netmagazine.com/features/top-25-responsive-sites-2012
* http://inspirationfeed.com/inspiration/websites-inspiration/35-nice-examples-of-flat-web-design/
* http://layervault.tumblr.com/post/42442865260/implementing-progressive-reduction
* http://layervault.tumblr.com/post/42361566927/progressive-reduction
* "Design Responsively - It’s your responsibility.":https://medium.com/design-startups/64fe2892f811
* "Stop Fearing and Start Doing. How I stopped letting fear control my life and future.":https://medium.com/i-m-h-o/cdee650ee986
* "Designing In the Browser Is Easier Than You Think - A few tips on getting started.":https://medium.com/design-ux/b41e0a05c39f
* http://starburst1977.github.io/out-of-words/single-col-minimal.html
* http://www.newnet-soft.com/blog/responsivefontsizing - using LESS
* http://screensiz.es
* http://alistapart.com/article/responsive-web-design
* http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
* http://filamentgroup.com/services/web_development/
* http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
* http://purecss.io - CSS
** https://news.ycombinator.com/item?id=5779494
* http://www.getskeleton.com - CSS
* http://www.teehanlax.com/story/medium
* http://smacss.com
** http://smacss.com/book/type-module
* http://tilomitra.github.io/csstypography
* http://tilomitra.github.io/cssextras/
* [[CSS and Javascript drop-down menu for small screens]]
* http://mattgemmell.com -- responsive design and drop-down menu ideas
* http://sass-lang.com
* Sass Style Guide (css-tricks.com) 
** http://css-tricks.com/sass-style-guide/ 
** https://news.ycombinator.com/item?id=5785885
* http://ia.net/blog/responsive-typography-the-basics
* http://symmetrycode.com/workflow-designing-websites-browser
* http://webdesign.tutsplus.com/articles/typography-articles/taking-ems-even-further/?utm_source=feedburner
* http://thecodezombie.co.uk/blog/adaptive-is-not-responsive
* http://thecodezombie.co.uk/blog/crash-course-in-responsive-web-design

h3. validation testing

* css - http://jigsaw.w3.org/css-validator/validator?uri=malone.cc
* rss - http://feed2.w3.org/check.cgi?url=malone.cc/rss.xml
* atom  - http://feedvalidator.org/check?url=http%3A%2F%2Fdaringfireball.net%2Findex.xml
* html5 - http://validator.w3.org/check?uri=malone.cc
*  HTML 5 or XHTML 4.01 Transitiona - http://www.whatwg.org/specs/web-apps/current-work/


h3. mobile menu

example: http://steff.me

more examples: http://admiretheweb.com/articles/20-responsive-mobile-navigation-inspiration/


h3. Ajax

* http://www.w3schools.com/ajax/
* http://www.w3schools.com/ajax/ajax_examples.asp
* Create a simple XMLHttpRequest, and retrieve data from a TXT file. 
** http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
* https://www.quora.com/AJAX-1/What-are-some-best-practices-to-use-when-making-a-website-that-uses-a-lot-of-AJAX
* http://stackoverflow.com/questions/5052543/how-to-fire-ajax-request-periodically

Excerpts from multiple comments:

q.
One of the most important things you can do is make an RPC mechanism that lets you make calls from the browser to arbitrary functions in your server code and then can handle the results.  You should use JSON to encode the arguments and return values and just make it so you don't need to worry about things like URL encoding, POST vs. GET, making new endpoints, etc.  I think it's insane that this isn't built into every popular web framework.

Make a reasonable effort to make sure your site works without AJAX. Most cases, this is easier than you think; like making sure forms can post themselves, things have correct href attributes etc. This also helps if your JavaScript capable browser somehow fails to load the JS files to handle actions.

Speaking of, don't bother with XML. Just use JSON. I know some people like AHAH[1] and other things but using JSON all around and even putting HTML fragments in JSON if necessary is probably make your life easier in the long run.

Do your best to not break the Back button on browsers.

Do learn JavaScript, don't just use jQuery scripts you see around (other than abstracting out browser quirks for AJAX calls). Functional nature of JavaScript lends itself very well to handling things with callbacks. Learn and love them.

It is very possible to develop a web site with just one web page. Using partial page requests via AJAX will free up server resources significantly, especially bandwidth and database calls. Here's the trick to make it all work and keep it SEO friendly:

That rant said, i'm sure not many readers will make it this far, but here are a few bad-ass tools:

* Firebug - kinda the industry standard at this point
* Firequery - jquery firefox plugin
* Fiddler - really crucial

I would encourage testing each iteration with tools such as Selenium. I would look on sites like Coder.io and Hacker News for new JS testing frameworks that show up.

One thing that nobody seems to have mentioned yet, "Use unobtrusive AJAX"
 
# Keep separate the JavaScript, HTML and CSS elements (Separate behavior and content).
# Use JavaScript (and Ajax) to progressively enhance the application

http://www.ibm.com/developerworks/web/library/wa-aj-unobtrusive/
q..


h3. Web Design Trends

http://www.quora.com/User-Interface-Design/What-are-currently-trending-design-styles-patterns-in-UI

* Responsive Web Design
* Fixed-Position Navigation
* Circles
* Vector Art
* Multi-Column Menus
* CSS3/HTML5 Animation
* Ribbons & Banner Graphics
* Infographics
* Custom Font Faces
* Focus on Simplicity

q.
While a lot of the answers posted currently speak more of design patterns, I'll offer methodologies;

Dashboards : Top tiered navigational or user initiated functions located in a fixed or anchored position within the environment (memory retention)

Less iconography : Text based navigation elements while icons are reserved for second or third tier subsets of functions located within the main content (progression and regression within the environment forces elements to become smaller or larger based on the depth of the interactive experience)

Interstitials and pagination of content : While subtle elements were used for kinetics within interactive experiences that introduce new information—are still popular, we're seeing more content presented in a linear format that is animated in an obvious and recognizable way. This has led to the more open-space design because more content can be served up with less clutter for the user

Device independence : A lot of designs are very neutral in design, development and function because companies have to rebuild and distribute apps across many different platforms. So you want a design that doesn't require a lot of development, production, and redesign for multiple devices. You want consistency and familiarity across every device.

Bandwidth : Clean and subtle designs don't take up a lot of bandwidth

-

The biggest trend I'm noticing is going board style a la Pinterest. I'm noticing that this sort of grid layout is being applied to a lot of sites in other verticals too -- for example, fab.com's feed  ( http://fab.com/feed/ ) and even 37 Signals is going that route for Basecamp ( http://37signals.com/svn/posts/3129-launch-the-all-new-basecamp ).

q..


h3. Frameworks

http://twitter.github.com/bootstrap

http://foundation.zurb.com

http://sass-lang.com/

https://github.com/emberjs/ember.js/tree/v1.0.0-rc.6

http://groundfloor.neocities.org/

http://bjankord.github.io/Style-Guide-Boilerplate/

http://daverupert.com/2013/04/responsive-deliverables/


h2. Symbol Fonts

* http://alistapart.com/article/the-era-of-symbol-fonts
* http://fortawesome.github.io/Font-Awesome/ 

#css - #html - #javascript - #responsive - #design