background preloader

URL Design — Warpspire

URL Design — Warpspire
December 28, 2010 You should take time to design your URL structure. If there’s one thing I hope you remember after reading this article it’s to take time to design your URL structure. URL Design is a complex subject. But that doesn’t mean there aren’t best practices for creating great URLs. Why you need to be designing your URLs The URL bar has become a main attraction of modern browsers. URLs are universal. Any regular semi-technical user of your site should be able to navigate 90% of your app based off memory of the URL structure. Top level sections are gold The most valuable aspect of any URL is what lies at the top level section. Do I seem dramatic? Another quick tip — whenever you’re building a new site, think about blacklisting a set of vanity URLs (and maybe learn a little bit about bad URL design from Quora’s URLs). Namespacing is a great tool to expand URLs Namespaces can be a great way to build up a pragmatic URL structure that’s easy to remember with continued usage.

jQuery BBQ: Back Button & Query Library jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods. This plugin and the jQuery urlInternal plugin supersede the URL Utils plugin. Note: If you’re using jQuery 1.3.2 or earlier and need BBQ to merge query string or fragment params containing [], you’ll want to include the jQuery 1.4 .param method in your code. Also, my article Cooking BBQ: the original recipe gives a history of jQuery BBQ along with some plugin authoring guidelines, if you’re interested. What jQuery BBQ allows you to do: While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read the documentation, and check out the full examples listed above. jQuery BBQ community Have you used jQuery BBQ in an project, website, article or tutorial? Why BBQ? Examples

parseUri 1.2: Split URLs in JavaScript Thursday, June 28th, 2007 • Related • Filed Under I've just updated parseUri. If you haven't seen the older version, parseUri is a function which splits any well-formed URI into its parts, all of which are optional. Its combination of accuracy, flexibility, and brevity is unrivaled. Highlights: Comprehensively splits URIs, including splitting the query string into key/value pairs. Try the demo, but make sure to come back and read the details below. Details: Older versions of this function used what's now called loose parsing mode (which is still the default in this version). Since I've assumed that most developers will consistently want to use one mode or the other, the parsing mode is not specified as an argument when running parseUri, but rather as a property of the parseUri function itself. parseUri.options.strictMode = true; From that point forward, parseUri will work in strict mode (until you turn it back off). The code: You can download it or run the test suite.

can.route push state? - JavaScriptMVC Forum Ok. Can you confirm that when using the pushstate plugin, links will not use the hash/hashbang as demonstrated in the above post? Here's what I have/am thinking so far: When a link is clicked, we trap it and look for a matching route. To do this, we pass we the new can.route.updateWith(href). It seems that $(this).attr("href") is the best candidate as it contains just the new part of the href that the link is trying to navigate to. Copy code $(document).on('click', 'a', function(e) { if(! this.href, which you reference in your example contains the whole link. You talk about operating on location.pathname, but that value is not updated until after pushState is called, which will be called only after an updateWith call response of true. Once in updateWith, should I be doing this using can.route.deparam? Anyway, trying to make progress.

History API You are here: Home Dive Into HTML5 Diving In The browser location bar is perhaps the geekiest mainstream piece of user interface in the world. There are URLs on billboards, on the sides of trains, and even in street graffiti. Combined with the back button — easily the most important button in the browser — you have a powerful way to go forward and backward through the vast set of intertwingled resources called the Web. The HTML5 history API is a standardized way to manipulate the browser history via script. The Why Why would you manually manipulate the browser location? Going back to first principles, what does a URL do? So we want unique resources to have unique URLs. The HTML5 history API lets you do this. Let’s say you have two pages, page A and page B. Load the 10% of the page from page B that is different from page A (probably using XMLHttpRequest). The How The HTML5 history API is just a handful of methods on the window.history object, plus one event on the window object. The pledge

Manipulating the browser history The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack. Traveling through history Moving backward and forward through the user's history is done using the back(), forward(), and go() methods. Moving forward and backward To move backward through history, just do: window.history.back(); This will act exactly like the user clicked on the Back button in their browser toolbar. Similarly, you can move forward (as if the user clicked the Forward button), like this: window.history.forward(); Moving to a specific point in history You can use the go() method to load a specific page from session history, identified by its relative position to the current page (with the current page being, of course, relative index 0). To move back one page (the equivalent of calling back()): Example Examples

Related: