I'd like to build a site similar to http://www.20thingsilearned.com/ in the respect that an address typed into the address bar does not send the user to a new page, but configures the running application instead. Flip through their book and you'll notice the address bar location changing, but you're obviously not sent to new pages... you stay within the running application, which I would assume lives in only one location on the server. And you can use those addresses to jump to specific pages within the app. How is this happening? I assume it takes some server side magic. Any clues as to what is going on is appreciated!
The site you mention is built with spiffy new features of HTML5, specifically the History API. With HTML5 (in newer browsers), you can manipulate the address bar and browser path despite making asynchronous requests. More here: http://diveintohtml5.ep.io/history.html
They are using the HTML5 History API. See Manipulating the browser history (the section on "Adding and modifying history entries").
Related
I am a complete Google Analytics beginner and would appreciate a help with a basic question.
I am developing HTML, CSS and JavaScript based applications which are further uploaded into an iOS application to present your applications in a fancy way. Therefore my application is a hybrid application (half JS web site, half mobile app).
I would love to see users' activity in my app when they are browsing through it and I thought GA might work well with it - but the problem is, that the outer app doesn't provide me with any URL of my inner JS app (the inner web site's URL is file:///).
At this page (link), I found that URL is not really important, that it is the tracking code which is important. So I used a dummy URL, added the GA snippet into my application and uploaded it in iPresent. I can't see no live activity though... :/ It also says the measuring is not installed (not used at a home page).
So I am wondering - is the URL really important?
Any ideas?
Thanks!
URL (or page path) is only important if you want to report on data based on which URLs your visitors went to.
If you app doesn't use URLs at all, perhaps it fits better with the "app" model where you are sending screen name data instead of page data. You can read more about the differences between web and app views here:
https://support.google.com/analytics/answer/2649553
I found out that URL is not needed. This type of problem can be solved by using GA Measurement Tool
https://developers.google.com/analytics/devguides/collection/protocol/v1/
Validate your hit here:
https://ga-dev-tools.appspot.com/hit-builder/
I'm building a web-app that uses the device's camera and location services. The browser (I'm sticking to Chrome for now) asks the user for permission to do so on the page where the service is used.
I want the interface to be able to ask for permission at an early stage in the workflow so the pop-up dialogs don't come up during the use of the app. I know they would go away after the first visit to a page, but I want to avoid it the first time too.
Javascript is pretty much the only tool I know how to use, and I know each page has a separate Javascript execution context, so I can't get references to the objects on one page and hand them over to another.
So is there a way that will work? Maybe I need to learn some other technology?
If you need to do it in the browser, then I would suggest creating a sort of initialization page before going to the actual app page.
In the ini page you can call all permissions and download+cache all needed app scripts and also validate which permissions were accepted and not. Kinda something like when using GMail you go through their ini page first before getting to the actual GMail ui.
Once the ini page has completely loaded simply redirect to the actual app.
If you want to do it outside the browser and still use the same web technologies, take a look at Electron or NW.js.
Both tools above lets you build cross platform desktop apps with web technologies. Things like asking for camera and geolocation can be done without user permission (as I recall. not sure)
So i'm looking at adapting a simple extension for myself. I browse with Safari and Chrome mainly, but occasionally test in Firefox and end up using it for a few days, so I wouldn't mind porting the idea to all three to forget about it.
Basically I want to automatically send every URL the browser visits via the Viglink REST-API. I'm going to assume this is pretty simple, but I have no idea how to get the address bar URL and send it and then return the change to the address bar URL (in essence I guess redirect everything via the API)
The API will check against its database and if no matches found just return the standard URL, if it see's a merchant it will return the affiliated link. This would ensure that i'd always get commission for my own browsing without remembering to affiliate all links via Viglink (or Skimlink) first as I often forget.
So I have a simple browser extension set up for all three browsers, but the HTML and Javascript parts are empty and I have no idea how id do what I need to do.
Here is the Viglink Rest API documentation http://support.viglink.com/entries/20646001-API-Documentation
How is it possible that web applications like Google Maps and Mixcloud update their urls without the use of a hashbang (also known as #!)?
Notice for example the coordinates right after the # sign in the URL while swiping the view in Google Maps. Or note that the music keeps playing while following some links.
I'm looking for a programmatic way to achieve the same functionality and I would also like to know how this works.
The HTML5 history API is a standardized way to manipulate the browser history via script. Part of this API — navigating the history — has been available in previous versions of HTML. The new parts in HTML5 include a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh), and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. This means that the URL in the browser location bar can continue to do its job as a unique identifier for the current resource, even in script-heavy applications that don’t ever perform a full page refresh.
Source: http://diveintohtml5.info/history.html
Have you taken a look at ASP.Net MVC? It uses the single page application concept. I'm not entirely sure what you're looking for but this is a good example: http://www.microsoftvirtualacademy.com/training-courses/introduction-to-asp-net-mvc
You also might want to look at AngularJs, which makes routing urls really easy.
I'm working on a web app which uses Backbone's HTML5 History option. In order to avoid having to code everything on the client and on the server, I'm using this method to route every request to index.html
I was wondering if there is a way to get Twitter Cards to work with this setup, as currently it can't read the page as everything is loaded in dynamically with Javascript.
I was thinking about using User Agents to detect whether it's the TwitterBot, and if it is, serving a static version of the page with the required meta-tags. Would this work?
Thanks.
Yes.
At one job we did this for all the SEO/search/facebook stuff etc.
We would sniff the user-agent, and if it was one of the following sniffers
Facebook Open Graph
Google
Bing
Twitter
Yandex
(a few others I can't remember)
we would redirect to a special page that was written to dump all the relevant data about the page for SEO purposes into a nicely formatted (but completely unstyled) page.
This allowed us to retain our google index position and proper facebook sharing even though our site was a total single-page app in backbone.
Yes, serving a specific page for Twitterbot with the right meta data markup will work.
You can test your results while developing using the card's preview tool.
https://dev.twitter.com/docs/cards/preview (with your static URL or just the tags).