JavaScript
Single Page Apps
jQuery
Breakpoints
jQuery Mobile
validation testing
mobile menu
Ajax
Web Design Trends
Frameworks
Symbol Fonts
CSS, HTML, Javascript, jQuery, jQuery Mobile, Typography, Accessibility, and Responsive Design Info
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
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
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
- http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/
- http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
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
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
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.
- Stop Fearing and Start Doing. How I stopped letting fear control my life and future.
- Designing In the Browser Is Easier Than You Think - A few tips on getting started.
- 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
- http://www.getskeleton.com - CSS
- http://www.teehanlax.com/story/medium
- http://smacss.com
- 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://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
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/
mobile menu
example: http://steff.me
more examples: http://admiretheweb.com/articles/20-responsive-mobile-navigation-inspiration/
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.
- 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:
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 AHAH1 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 applicationhttp://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
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
updated on
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
CSS media queries - width versus device-width - Jul 30, 2013
Mar 23, 2015 links - Mar 23, 2015
more >>