Browsers

588 views

Published on

Talk about differences in browsers important for JavaScript developers at OdessaJS on April 13, 2013

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
588
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Browsers

  1. 1. Browsers,or what standards do not tell Dima Malenko
  2. 2. Prelude
  3. 3. OpenOffice.org on iPad
  4. 4. Open. Window. Please.
  5. 5. Unscientific JavaScript Tutorials Survey alertwindow.open 0% 20% 40% 60% 80% 100% 120%
  6. 6. Unscientific JavaScript Tutorials Survey A little more than always alertwindow.open 0% 20% 40% 60% A little less than always 80% 100% 120%
  7. 7. window.open(‘http://new.window.url’, ‘_blank’, ‘width=W, height=H’)
  8. 8. What’s important for us?1. It has to be a window2. Size has to match, what’s on the server3. Should be able to resize to catch up with the server
  9. 9. What can happen as a result of this call? window.open(‘http://new.window.url’, ‘_blank’, ‘width=383, height=92’)
  10. 10. Nothing Happens
  11. 11. Nothing Happens …unless you are in Chrome kind ofNew window is actually created, DOM isloaded, but window remains hidden and window.outerWidth == 0
  12. 12. Window Sized 383x92 Opens Correctly!
  13. 13. Window Sized 383x92 Opens Correctly! … and they lived happily ever after.
  14. 14. Window Sized 383x92 Opens Correctly …unless you are in Chrome • Would open a window with all dimensions not less than 100px • Would let you resize to a smaller size from within the window At least there is a workaround…
  15. 15. Window Sized 383x92 Opens Correctly …unless you are in fullscreen on Mac • Safari would always open new window in a tab when in fullscreen • Chrome and Firefox would open regular windows even in fullscreen And there is no workaround for that…
  16. 16. Wait! Aren’t all those browsers “standards compliant”?
  17. 17. 5.1.6 Browser Context Names … a new browsing context is being requested, and what happens depends on the user agents configuration and/or abilities. More at http://www.w3.org/TR/html5/browsers.html
  18. 18. Oh, You Want to Read Some Keys?
  19. 19. Oh! You tell meyou want to read some keys?
  20. 20. JavaScript Madness: Keyboard Eventshttp://unixpapa.com/js/key.html
  21. 21. Who Moved My Mouse?
  22. 22. Stay cool! It’s under control • mousedown • mouseup • mouseclick • mousemove
  23. 23. It’s the mousewheel Or should I call itDOMMouseScroll, Mr. Firefox?
  24. 24. Trying to make some sense # of “clicks” Scrolling down?WebKit, wheelDelta/120 wheelDeltaIE is negativeFirefox detail/3 detail is positive
  25. 25. Touchpad scrolling • Highly granular • All over the place • Decide for yourself
  26. 26. Let Me Size That For You
  27. 27. rollApp File Opener
  28. 28. open
  29. 29. Beyond Belief
  30. 30. What’s the best bullet proof completely reliable “workseverywhere” way to design a block?
  31. 31. That’s right – image. In PNG* format.* PNG stands for Portable Network Graphics
  32. 32. What Do You Choose, Neo?
  33. 33. More at http://superuser.com/questions/579216
  34. 34. So What?Sooner or later• You’ll need to do something that your framework does not support• Something in the browser will change before your framework supports it• A bug in the framework will bite you
  35. 35. Each browser is incompatible with any other browser. W3C darmoyedy?
  36. 36. Standards Are Good. I mean “really”
  37. 37. Easy and Consistent Checks for Capabilities function processMouseWheel(event) { var delta = 0; if (!event) { /* For IE */ event = window.event; }Unfortunately, this slide is not sponsored by caniuse.com
  38. 38. Meaningful Fallback and Development Strategies• Compatibility layers with standard interface – WebSockets via Flash – Canvas via Flash• When browser catches up, throw compatibility layer away
  39. 39. Our Jobs Arent Getting Easier Developers of Blink say “Hi!” to you Developers of Servo say “Hi!” to you too
  40. 40. Any questions?Now: and later: @dmalenko dmalenko@rollapp.com www.dmalenko.org

×