• Git
• JavaScript
• Single Page Apps
• jQuery
• Breakpoints
• jQuery Mobile
• validation testing
• mobile menu
• Ajax
• Web Design Trends
• Frameworks
• Symbol Fonts

6 min

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

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.

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

Git

JavaScript

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

Single Page Apps

JavaScript MVC frameworks

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

Closures


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

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.

jQuery

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

Breakpoints

jQuery Mobile

Excerpts from multiple comments:

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¹ 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/

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

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 ).

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/

Symbol Fonts

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

From JR's : articles
1105 words - 11886 chars - 6 min read
created on May 28, 2013 at 01:33:10 pm
updated on Sep 25, 2013 at 04:02:50 pm
import date 2013-08-12 21:50:25 - #
source - versions - backlinks

Related articles
Interesting and related Treehouse online classes - May 08, 2013
Breaking the web in 2014 - 2016 - May 31, 2016
Flakes client-side JavaScript framework - Dec 18, 2014
Mar 23, 2015 links - Mar 23, 2015
Patternlab.io - design reusable components - Dec 08, 2014
more >>

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

Git