"For those unfamiliar with the history of hashing & banging, it goes back to the first appearance of “AJAXed” websites.2 Such sites often included a hash (#) character in their URLs, allowing them to alter anything that came after the # without being forced to load a new page. In other words, they were finding their way around a security restriction which would otherwise prevent them from modifying the URL of the currently-loaded page. AJAX led to a huge influx of creative site designs and arguably marked the beginning of the modern, dynamic web application. There was just one problem: some of these sites were no longer crawl-able by search engines.

Now, Google saw this and had an idea for saving these poor, lost websites. They came up with a long specification for web developers, introducing a new crawling scheme for AJAXed websites. By using hash-bangs (#!) instead of hashes (#), developers could indicate that their site supported the new scheme. Google’s only real requirement was that these URLs should also work when the nonsensical string “?_escaped_fragment_=” was inserted in place of the hash-bang, so that search bots could correctly resolve each page’s content. Normal visitors would never have to see this behavior, of course, but it was important for playing nice with search engines."

"Rainbow is a code syntax highlighting library written in Javascript.
It was designed to be lightweight (1.4kb), easy to use, and extendable.
It is completely themable via CSS."

"Bring meaning to your metrics and stories to your dates with our API of interesting number facts."

"var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000""

good examples of how apps have approached. from early 2011, though, so already stale.

"A final reason for using hash URIs that I’ve seen cited is that it increases the page rank for the base URI, because as far as a search engine is concerned, more links will point to the same base URI (even if in fact they are pointing to a different hash URI). Of course this doesn’t apply to hash-bang URIs, since the point of them is precisely to enable search engines to distinguish between (and access content from) URIs whose base URI is the same."

via:dieter

"endless scrolling (or infinite scrolling or pagination) is a popular technique amongst modern websites such as Google Reader and Live Image Search, whereby instead of paging through items using traditional pagination links, the page just keeps loading with new items attached to the end.

Endless Scroll not only helps you build highly customisable infinite scrolling effects, it also offers features not commonly seen. Such features include:

The ability to up-scroll and prepend content to the beginning of the page
The ability to limit the number of available 'pages', i.e. data truncation
And there are more exciting features in the works, including SEO-friendly URLs!"

super in-depth piece on the trickiness of cursor movement in browser ui elements.

"This book is not about JavaScript design patterns or implementing an object-oriented paradigm with JavaScript code. It was not written to distinguish the good features of the JavaScript language from the bad. It is not meant to be a complete reference guide. It is not targeted at people new to programming or those completely new to JavaScript. Nor is this a cookbook of JavaScript recipes. Those books have been written.

It was my intention to write a book to give the reader an accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances: complex values, primitive values, scope, inheritance, the head object, etc. I intend this book to be a short and digestible summary of the ECMA-262, Edition 3 specification, focused on the nature of objects in JavaScript.

If you are a designer or developer who has only used JavaScript under the mantle of libraries (such as jQuery, Prototype, etc), it is my hope that the material in this book will transform you from a JavaScript library user into a JavaScript developer."

from AddyOsmani.com | Articles for developers http://addyosmani.com/blog MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behaviour in an application. To this end, many implementations … Continue reading →

""

"At DailyMuses, we depend heavily on Backbone and concurrent routers call for a single page in order to have a better way to organize our codebase. Since I am coming from the Rails background, when I first tried to tackle this problem, I immediately thought of the way how Rails handles multiple routes with config/routes.rb. Hence, I created Backbone Routes.

With Backbone Routes, you will have a central place to control all your routing logic for your Backbone app."

Tutorial for building an app using ember

"Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing.

The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window."

"Each extension panel and sidebar is displayed as a separate HTML page. All extension pages displayed in the Developer Tools window have access to all modules in chrome.devtools API, as well as to chrome.extension API. Other extension APIs are not available to the pages within Developer Tools window, but you may invoke them by sending a request to the background page of your extension, similarly to how it's done in the content scripts.
You can use the setOpenResourceHandler() method to install a callback function that handles user requests to open a resource (typically, a click on a resource link in the Developer Tools window). At most one of the installed handlers gets called; users can specify (using the Developer Tools Settings dialog) either the default behavior or an extension to handle resource open requests. If an extension calls setOpenResourceHandler() multiple times, only the last handler is retained."

super-clever: show three boxes to the right of a password field whose colors depend on a hash of the text entered. That way the user has a visual checksum on their hidden text. Another interesting tweak is using grayscale to indicate when the password rules have not been met (too few chars, no numbers, etc)

from Delicious/network/earth2marsh http://www.delicious.com/network/earth2marsh "Scriptular is a javascript regular expression editor." (What's also nice is that there's a quick-reference sidebar, too.)

"A D3.js, Backbone.js based Graphite Dashboard Toolkit."

"In cases where you need to dynamically generate DOM nodes, modify specific children as with the <span> shown above, and then append the newly created set into a container, what do you do? Fortunately, jQuery provides an end() function that allows you to pop the current set off the stack and then move down to the next one. In the example above, calling end() immediately before appendTo() would cause the initial <div> that wraps <span> to be appended to divContainer which would achieve the desired end result in this case."

"It is maybe obvious to note that there are many, many hierarchical systems. An interesting analogy with a hierarchical power is, in a programming language, a sequence of parameters supplied to a command or a procedure. For example, in some languages a procedure may take positional parameters which may be optional so that any parameters from a certain point on may be omitted. This syntax can be compared with a hierarchical slash separated URL path. This is an interesting analogy because looking at the alternative representation for procedure parameters which consists of a list of procedure name and value pairs. This leads us naturally to a discussion of the use of the semi-colon in URLs and the matrix syntax. Just as the slash separated set of elements is useful for representing a tree, so a set of names and equally significant parameter can represent a space more like a (possible sparse) matrix. In this case navigation to "close" locations is done by varying one or more parameters which form the dimensions of the matrix. This is the purpose of the a=b; parts of URL syntax which was added later in the URL's history. The initial need was to put qualifiers onto URLs which were themselves hierarchical.

The analogy with procedure call holds still when looking at combined forms: The hierarchical part of the URL is paused first, and then the semi-colon separated qualifiers are paused as indicating positions in some matrix. As an example let's imagine the URL of an automatically generated map in which the parameters for latitude, longitude and scale are given separately. Each may be named, and each if omitted may take a default. So, for example,

//moremaps.com/map/color;lat=50;long=20;scale=32000"

""

""

""I decided to roll my own in this case because I was interested in learning about email handling after watching this great railscast from Ryan Bates. And because paying $9 per month per user for something I could probably write myself in a couple of hours seemed silly."
I find myself having to fight against this instinct almost every day. There are a couple of problems with hacking for a couple of hours to save a few bucks a month.
Firstly, you now have an additional piece of software to maintain - you're committing yourself to an unknown quantity of future work.
Secondly, your software won't get any better without you actively improving it. The nice thing about software you pay someone else for is that it gets better over time.
It's a tough instinct to fight though. Building things is Fun. It's just that there are probably other things you should be building that are more important to your company."

"As a rough guide, you might factor in another 8-10 hours, because, according to Fred Brooks, a proper programming "product" takes about x3 as long as a "program"."

covers both form-urlencoding (RFC2396) and regular encading

nice, simple tool

"way, was constantly running up against browser bugs. WebKit wouldn't show an empty line at the end of the document, and in some releases would suddenly get unbearably slow. Firefox would show the cursor in the wrong place. Internet Explorer would insist on linkifying everything that looked like a URL or email address, a behaviour that can't be turned off. Some bugs I managed to work around (which was often a frustrating, painful process), others, such as the Firefox cursor placement, I gave up on, and had to tell user after user that they were known problems, but not something I could help.

Also, there is the fact that designMode (which seemed to b"

""We used HTML5's Application Cache to make the site available offline. Users can look up full information about conferences they're attending even if they have no data connection. As a conference goer, offline access is very important, I can almost hear champagne corks popping in mobile network offices whenever I'm forced to use data abroad.
The offline specification wasn't really designed with data-driven sites in mind, which is why we're one of the first to launch with offline support. We're looking forward to talking about the crazy hacks we had to throw at the specification to make it behave.

All our imagery is double-resolution, so everything looks sharp on high-density devices, the lack of which gives mobile web apps that 'inferior' look. We also share mustache templates between the server & device, and use XHR + the HTML5 history API to update pages. This keeps the user experience snappy as the browser doesn't have to re-parse the JavaScript per page."

"CSRF is an attack which forces an end user to execute unwanted actions on a web application in which he/she is currently authenticated. With a little help of social engineering (like sending a link via email/chat), an attacker may force the users of a web application to execute actions of the attacker's choosing. A successful CSRF exploit can compromise end user data and operation in case of normal user. If the targeted end user is the administrator account, this can compromise the entire web application."

slick little quick reference

nice preso

"Web actions are not "just" hyperlinks. Hyperlinks are nouns and they reference destinations (sometimes with an explicit relation) with an implied action of navigation. In contrast, web actions are verbs and are first and foremost about a specific action that often but not always does something with the current page or site.

"

nice performance tips for js

"a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone."

"A JavaScript pattern and antipattern code collection that covers function patterns, jQuery patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns (upcoming), code reuse patterns (upcoming), DOM and browser patterns (upcoming)."

"Making this architectural change simplified our development and deployment process. It also simplified the way we thought about the application. The only price we paid was loosing the ability to deploy the application to different web server without making changes. Fortunately, this price was purely hypothetical because we had absolutely no need nor desire to use a different web server in production. On the positive side, we were now hiding the fact that we were relying on Java Servlets to realise our web functionality. In fact, seeing what some of the other communities are building (e.g. Sinatra, Node.js, etc.), I'd be tempted to try to write a web application that doesn't use Servlets at all. Part of it for fun, part of it to overcome some of the limitations inherent with the Servlet model"

From zapthink "HATEOAS is at the highest level of maturity, and it’s perfectly fine to start at the lower levels and work your way up" plus a nice explanation of HATEOAS

"Web application security is an essential component of any successful project, whether open source PHP applications, web services such as straight through processing, or proprietary business web sites. Hosters (rightly) shun insecure code, and users shun insecure services that lead to fraud. The aim of this Development Guide is to allow businesses, developers, designers and solution architects to produce secure web applications. If done from the earliest stages, secure applications cost about the same to develop as insecure applications, but are far more cost effective in the long run.
Unlike other forms of security (such as firewalls and secure lockdowns), web applications have the ability to make a skilled attacker rich, or make the life of a victim a complete misery. At this highest level of the OSI software map, traditional firewalls and other controls simply do not help. The application itself must be self-defending. The Development Guide can help you get there. The Development Guide has been written to cover all forms of web application security issues, from old hoary chestnuts such as SQL Injection, through modern concerns such as AJAX, phishing, credit card handling, session fixation, cross-site request forgeries, compliance, and privacy issues."

2010: http://code.google.com/p/owasp-development-guide/wiki/Introduction

"In order to facilitate a "transparent but visible" CSRF solution, developers are encouraged to adopt the Synchronizer Token Pattern (http://www.corej2eepatterns.com/Design/PresoDesign.htm). The synchronizer token pattern requires the generating of random "challenge" tokens that are associated with the user's current session. These challenge tokens are the inserted within the HTML forms and links associated with sensitive server-side operations. When the user wishes to invoke these sensitive operations, the HTTP request should include this challenge token. It is then the responsibility of the server application to verify the existence and correctness of this token. By including a challenge token with each request, the developer has a strong control to verify that the user actually intended to submit the desired requests. Inclusion of a required security token in HTTP requests associated with sensitive business functions helps mitigate CSRF attacks as successful exploitation assumes the attacker knows the randomly generated token for the target victim's session. This is analogous to the attacker being able to guess the target victim's session identifier. The following synopsis describes a general approach to incorporate challenge tokens within the request.
When a Web application formulates a request (by generating a link or form that causes a request when submitted or clicked by the user), the application should include a hidden input parameter with a common name such as "CSRFToken". The value of this token must be randomly generated such that it cannot be guessed by an attacker. Consider leveraging the java.security.SecureRandom class for Java applications to generate a sufficiently long random token. Alternative generation algorithms include the use of 256-bit BASE64 encoded hashes. Developers that choose this generation algorithm must make sure that there is randomness and uniqueness utilized in the data that is hashed to generate the random token."

Also considers other approaches like checking referer header

Some proven application security principles

Apply defense in depth (complete mediation)
Use a positive security model (fail-safe defaults, minimize attack surface)
Fail securely
Run with least privilege
Avoid security by obscurity (open design)
Keep security simple (verifiable, economy of mechanism)
Detect intrusions (compromise recording)
Don’t trust infrastructure
Don’t trust services
Establish secure defaults (psychological acceptability)

HTTP-Only to disallow client-side access to a cookie and setting the Secure option on a cookie.

Strict-Transport-Security to force SSL on repeat visits, X-Frame-Options to prevent clickjacking through frame-busting, and the (early) X-Content-Security-Policy to compartmentalize XSS vulnerabilities

HTTP Strict Transport Security is a security feature that lets a web site tell browsers that it should only be communicated with using HTTPS, instead of using HTTP.

"Migrating all of our apps onto a single tech stack would've been a very expensive and time consuming project. Instead, we began to explore a unified rendering layer that is agnostic of the server-side technology: client-side templates.
Instead of using a JSP, GSP, or ERB to assemble a page server side and send back HTML, we have the server send back just the dynamic data as JSON and have the page assembled in the browser using a static client-side template served from a CDN. Moving the view logic to the browser meant that our different tech-stacks could share UI code:"

Asynchronous UIs - the future of web user interfaces

"It’s simple to make requests to Rdio’s REST API. It’s built on widely used standards and conventions so there are libraries for most common web development platforms. All method calls are made as POST requests to http://api.rdio.com/1/. Arguments are sent as application/x-www-form-urlencoded, just like when a browser submits a form. The name of the method is passed as the ‘method’ argument. [Emphasis mine.]
What’s wrong with this? Well, the first bolded point is immediately contradicted by the ones that follow. Specifically, this cannot be a REST API, because it uses only one URL and one HTTP method. Two of the key features of HTTP-based REST are that

It’s object-oriented, where objects are identified by URLs. Each request’s URL identifies what object it operates on.
The methods to invoke on the objects are primarily indicated by the request’s method (GET, PUT, POST, DELETE). In fact this is why Tim Berners-Lee used the word “method” in the HTTP protocol in the first place."

dev shares her thoughts on moving from DOM-centric to modern javascript client-server application architecture.

nice overview of how jekyll works.

"Chrome doesn't believe that there's any common relationship between any two local files.<br />
<br />
You can start it with the option "--allow-file-access-from-files" to tell it you disagree.<br />
<br />
Thanks to the ascendant master Nick Craver for this info when I asked essentially the same question some time ago."

"There is a new concept forming at the moment called Web Intents. The name is a reference to the Android feature which allows applications to register their “intent” to handle certain types of actions."

"Odio accusamus messenger bag food truck marfa. Eu mollit viral, lo-fi aesthetic vice id you probably haven't heard of them officia high life laborum delectus 8-bit odio. Twee fanny pack qui nihil mollit, fixie vice do seitan voluptate williamsburg photo booth mixtape sed cliche. Brunch sed VHS, irony fixie messenger bag blog tattooed culpa butcher. Consequat brunch readymade tumblr sunt. Excepteur eiusmod brunch, Austin est skateboard helvetica tempor adipisicing pitchfork sapiente enim. Aesthetic elit deserunt ex locavore echo park odio."

"A simplified explanation of the problem is that we violated the Single Responsibility Principle. So, we're going to use standard object oriented techniques to separate the concerns of our model logic.<br />
<br />
Let's look at the first example I mentioned: logging the creation of a user. <br />
<br />
To decouple the logging from the creation of the database record, we're going to use something called a service object. A service object is typically used to coordinate two or more objects; usually, the service object doesn't have any logic of its own (simplified definition). We're also going to use Dependency Injection so that we can mock everything out and make our tests awesomely fast (seconds not minutes). "

"CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation."

"jLinq is a 100% JavaScript library that allows you to perform complex queries on arrays of JSON data.<br />
Instead of using for loops and if statements, you can write fluent queries to filter, sort and select the information you need.<br />
Plus jLinq extensible so you can create your own functions and plug them straight into the library."

this moved. i done refound it though, motherfuton.

"The JavaScript shell is a command-line program included in the SpiderMonkey source distribution. It is the JavaScript equivalent of Python's interactive prompt, the Lisp read-eval-print loop, or Ruby's irb. This article explains how to use the shell to experiment with JavaScript code and run JavaScript programs."