Check browser version using Dart rather than JS? - dart

Is there an "Angular/Dart" way to detect older unsupported browsers and prevent to continue with an elegant message (there are plenty of examples using javascript) rather than continue and show a weird layout with code that doesn't work?
Even the angulardart.org/demo site should do this IMO to stop IE8 (I know, but some enterprise customers still have those old browsers installed - and set as default - for legacy apps) from showing content that doesn't even work.

If Dart code cannot be executed the test has to be done in Js. I'm not aware of a library that makes this test.
The test should follow What browsers do you support as JavaScript compilation targets?.

Related

Unknown Format in feature testing rails capybara

I am writing capybara tests. There is a link I have in the view. When I click over the link that links open a pop-up js warning. I have configured Js. in capybara by using phantomjs and petergiest gem.
Without the requested information it's impossible to give an exact answer, but the error you are seeing means the app is requesting a non-JS response (probably HTML). This could be occurring for a couple of reasons
You're not actually running the test with a JS supporting driver. I don't see any js metadata on your scenarios so depending on how you've configured Capybara/RSpec this could by your issue. To confirm, swap from Poltergeist to using Selenium with Chrome or Firefox (non-headless while trying to debug) so you can see if the browser actually starts
You have a JS error preventing JS from running so a normal request is being made instead of XHR. This could be because you actually have a bug in your JS or because you're using Poltergeist/PhantomJS which is massively out of date in JS/CSS support. To test this, swap to using Selenium with Chrome or Firefox and look in the developer console.
Your link isn't correctly configured to make an ajax request - This is impossible to tell without the HTML of the link
Additionally, neither of the tests shown in your image are actually asserting/expecting anything so it's very unclear what exactly you're trying to test.

Polymer in Chrome for iOS - it is not working, right?

I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.

Dart without Dart-Editor: Refreshing

I'm trying to program in Dart but without the Dart-Editor. It works fine so far but its really annoying and slow to always call pub build after making a change to either html/css or dart code.
As far as I remember when launching the app with Dart-Editor you just have to refresh the page.
Is it possible to get this working without the editor?
Thanks!
You can use pub serve which is similar to the webserver integrated in the Darteditor.
If you are using Dartium as browser you can add --no-dart2js so pub serve doesn`t generate JavaScript (which is slow) but directly serves Dart which Dartium can process directly.
For other browsers it's of course convenient to use the integrated dart2js conversion.

Issues while upgrading jquery from 1.2.7 to 1.9.1

I'm in the process of upgrading an old codebase containing jquery v1.2.7 to the v1.2.9. The corresponding UI upgrade is from v.1.6b to v1.9.2 (1.10 doesn't work with IE6). There are a bunch of ui plugins that are atleast 6 yrs old, and most of their authors no longer actively support them.
I took a layered approach of performing this. I first upgraded all the core files (jquery, jqueryUI), then upgraded inhouse js code (attr, $.browser) and such. Then I monkey-patched some of the plugins that had attr and browser. I've managed to work through all the bugs and errors so far. I now have a "clean" build, with a lot of the ajax functionality working as well.
BUT, I'm facing a pretty sticky issue with the facebox.js (yup THAT relic) plugin. I don't see any errors (js, network, or others) in the debuggers (IE8,FB,Chrome), but the facebox dialog displays incorrectly. It still displays the content inside it, but it is transparent and the background and edges do no show. I checked all my css as well as validated using w3c validator. Due to an NDA, I can't post the markup here. I realize that without the markup, even the considerable expertise here might not be able to give a complete solution. Could someone atleast give me some pointers on what I could be overlooking, or things to look for? TIA
eastwood
As you said, without markup it's difficult to figure out what's going on there, and my answer might be really stupid - but since you don't get any errors in the debug consoles and the box is transparent - is it possible that the images are missing/incorrectly referenced in the CSS?
Not sure how this old facebook.js plugin works, but I've seen one some time ago that used images for backwards compatibility with IE6 (for alpha transparency/rounded borders) - but not always. I think for modern browsers it drew that stuff itself. (pretty much like Facebook did it itself on its site)
So perhaps the error is related to JavaScript expecting images/etc. to be handled by CSS, but the CSS uses an only-IE6-hack?

What JavaScript framework do you use with trigger.io? (backbone, knockout, ember, angular)

What JavaScript framework do you use successfully with Trigger.io? I mean client side JS app frameworks like backbone, knockout, ember, angular?
We use angular.js here but have some significant problems when using router for our app ... see details here https://groups.google.com/forum/?fromgroups#!topic/angular/XGDRAskA8qs .
Trigger.io and using angular.js router doesnt work together.(at least we could not get it to work)
Do you use some other JS framework you can recommend as working fine with trigger.io using application router capability? (I could see similar router feature in ember or backbone for example)
Although we don't endorse one particular library, and our goal is to be compatible with them all, I normally reach for Backbone first when starting a Trigger app. It's simple, lightweight but powerful and has a bunch of nice extensions.
Apart from the issues with Angular which we aim to have fixed as part of our next major release (probably end of July '12), we've not had reports of any snags with other libraries apart from Amber Smalltalk, which should be fixed in the same release.
We have demo apps using Backbone and Sencha here and here, and our initial demo app is written using jQuery Mobile.
I'm using jQuery, Backbonejs, Handlebars, Coffeescript, LESS as my framework - they are pretty much all from my Web development effort. Didn't have to change too much.
In fact, so far, I'm finding I have to simplify a LOT of things to get it down to a level where it fits the mobile environment.
Angular JS is one of the best contenders out there as far as JavaScript Frameworks. I ran all the way through the Angular tutorial, created a new Trigger app, and dropped in the tutorial app in place of the default scaffolding.
RAN NO PROBLEM WHAT SO EVER!!! IOS, Android, and WEB
Interestingly enough, I adapted the Angular tutorial with my own data from a server. Even works using XHR requests, and Cross Origin Resource Sharing.
In my opinion, build your app using Angular.JS + Zepto/Jquery.
Use either of those frameworks to add CSS Transitions to your app for your UI.
The reason I recommend making your own UI rather than using something like JQuery Mobile, or Sencha Touch 2 is for the past 3 days I have been doing extensive research and testing on numerouse JS Mobile UI Frameworks, and JQmobi is the only one that came close to being fast but it didnt look vary nice.
Making your own will reduce size of the app, give you full control, and keep the app running smooth..your using will never know its not native ;P

Resources