I am working on a collaborative website that I want to give users notifications while they are viewing or editing data. Something similar to how in StackOverflow if you are replying to a question and the notification at the top pops up saying that there is a new reply to the post.
I can see how to do this using some kind of polling AJAX magic, but I was wondering if there was any way to push the notification to the browser w/o using polling?
Thanks for any help/ideas :)
EDIT:
For those interested, I went with SignalR https://github.com/SignalR/SignalR/wiki/Hubs
Either use long polling for it to work in older browsers, or start reading up on eventSource:
http://dev.w3.org/html5/eventsource/
Nice article by Nicholas Zakas:
http://www.nczonline.net/blog/2010/10/19/introduction-to-server-sent-events/
Well im starting to use Websockets (see some of my previous questions) and they are cool to use instead of ajax :-D
Generally no, but there is a family of techniques that simulate such an effect.
Look into comet if you'd like to give it a shot: http://en.wikipedia.org/wiki/Comet_(programming)
Related
I'm trying to find useful tutorials about how to create modern websites that loads content without refreshing the page.
I have tried all kinds of words in Google, but I don't get any useful hits. Perhaps it's because I'm not sure what I should be searching for.
Tips and links to tutorials would be appreciated!
Thanks!
tl;dr: Googling ajax website tutorial or jquery address tutorial is a good start.
As has been noted, the key here is AJAX.
AJAX alone, however, is not the answer.
It's pivotal to a non-page-reload site, but there are also a lot of other things to consider.
Luckily for us all, the Internet is great, and lots of developers have an open-source is awesome mindset.
Suffice to say, this type of site has been done before, and there are people out there who have made developing a site like this easier.
Ignoring the back-end & server-side setup, the way I would recommend starting a site like this is to use the following:
HTML5 BoilerPlate
jQuery
jQuery Address plugin.
Use the plugin from the start; from experience, it's difficult to implement it after you've completed the site.
You'll want use ajax. There are also ways to poll the server for updates as well. You can use a setInterval call to periodically retrieve a URL; but this is only required if you're polling. If you're doing this action based on a user event, you can just use that to trigger the retrieval/update. I'd suggest looking at jQuery, it'll make this kind stuff much easier.
jQuery Ajax would make it possible in a simpler way!
There are frameworks built exactly for this. One of today's hot ones is Meteor.js.
Read about it. Worst case, you'll get your googling keywords and find an alternative you like.
So I take this class, and I'm way ahead of everyone else and a lot of people steal code from my website, I have already disabled right clicking but it's rather easy to get around this, is their any way to stop people from being able to view my source code?
tl;dr: Nope.
You could look into obfuscation, as well as CSS & JS minification.
"If you steal from one author, it’s plagiarism; Steal from many, it’s art."
No, if someone wants it, they will get it, you can make it harder but, you will just alienate your users from normal functionality, focus on your backend code.
If they steal your code, your lector will hopefully notice, either way they only hurt themselves.
Afaik the only way to hide your source code is if you put it on the server-side.
It is not possible from hiding client-side source code from users - sorry.
One suggestion would be stopping the user from right-clicking but that might cause you more problems...
You could render the html pages server side and convert them into images which get sent to the client. You could then have some image maps that handle clicking on the various locations.
There isn't a perfect solution (100% bullet proof) to protect your JavaScript code on the client side, however there are some tools on the market that can help you to protect your code:
Code Compression/Minification (Usually don't protect the code)
Google Closure (Free)
Uglify JS (Free)
Code Obfuscation/Compression/Minification
JScrambler (Paid, but is on my opinion the best one on the market)
Jasob (Paid)
Stunnix (Paid, it seems to be outdated)
Hope this answers your question!
My app will look like this: two people enter a chat or something else in a page and have a skype name or Gtalk. Is it possible to make an anchor to call a voice client from the web page? Is there a flash fallback for this?
I know the skype: prefix that actually doesn't work for me in Ubuntu, but should work for Windows users.
I primarily target PCs & macs, but supporting mobile platforms with a solution will be nice.
For Downvoters: any comments why you do this? Please bother to explain me the obvious thing that I don't know and make this question.
Your question is much too complex. Instead of answering it, which would take several pages, the person might as well write the application him/herself and sell it.
You have to divide your problem in tiny bits, and have a question for each one.
You could at least start with looking at gTalk API and Skype API to see what you need yourself.
I imagine there must be out there a website that collects information about HTML 5 feature and what browsers version started to support them.
This might be a good way to decide based on your website profile, if you can apply that HTML 5 feature without a fallback for your visitors.
Do you know such a site/resource ?
For example I want to know what browsers support the multiple upload feature for inputs and what browser version was the first.
Update
I'm not pleased with the sites suggested so I'm opening a bounty.
Suggestions so far: Html5Test, Caniuse, modernizr.com, QuirksMode
Update 2
Some people don't understand the question. I need to implement the multiple upload feature. I know from analytics what browser are they using ( I know this is not 100% correct ).
I'm willing to sacrifice some of the visitors by not offering some advance features but I need to understand how big is this procent. I'm NOT trying to DETECT in anyway the browser. It's a similar approach with other sites that dropped IE 6 support.
So please don't talk about bad practice.
Try to look at Html5Test or caniuse.
If it's server side, you can analyze user agent to find out if client's version supports HTML5. Wikipedia is your friend.
If it's client side, there's Modernizr library.
A quick search gave me this interesting result (reproduced in several blogs): http://www.findmebyip.com/litmus/
And you can may also want to take a look at this list of how to detect each feature: http://diveintohtml5.ep.io/everything.html
Here is another website, quite incomplete but verbose and "work in progress" as of March 2011, so it might be worth keeping an eye on: http://html5accessibility.com/
This one is off topic, but since I found it, I add it. CSS compatibility in IE browsers (very extensive): http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
And here you can find info specific to the gecko engine: https://developer.mozilla.org/en/HTML/HTML5
And, of course, MDC has compatibility tables for each feature, but separated in different pages, not as a table, e.g.: https://developer.mozilla.org/en/HTML/Element/input
http://www.modernizr.com/
HTML5Test.com collects the information but they don't give detailed reports for perusal.
A good reference site for some stuff is http://www.browserscope.org/ but that doesn't go into a lot of detail with HTML5 specific support
Another source of related stuff is http://w3c-test.org/html/tests/reporting/report.htm which is creating a set of HTML testing tools that can be run.
You or someone who wanted to create this information could use these tests and then store the UA String of each browser that hit the site with the results of each test.
Then you could just find the earliest version of each browser type that a feature successfully run on.
I think this information is stored in the databases of the sites mentioned but they just don't display it which sort of sucks. Maybe try emailing them and suggesting they add these reports.
Take a look at caniuse.com, it’s exactly what you are searching for.
QuirksMode is also a great resource, and there is an entry for multiple files input.
My vote is for:
http://www.findmebyip.com/litmus
Which i found via this blog:
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
You should try this website. I hope this is what you were looking for.
I've seen this and I have to admit I'm pretty impressed:
(source: blogspot.com)
http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachments-onto-messages.html
I'm almost certain that this is an HTML 5 feature (it's supported on Chrome and Firefox 3.5), and was wondering if somebody knew how is the browser feature called.
Bonus points for a tutorial/article on how to do something similar!
I believe this may be of help:
http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
For an HTML5 demo of drag-n-drop, check out:
http://html5demos.com/drag-anything
Seems like dragover, dragenter, dragexit, drop events + event.dataTransfer are how it all works. Putting it together with a multi-part/form ajax POST like the link that dhorn gave is more impressive in my opinion. I would hope that it could be done a little easier than that.