Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>NOTE</strong>: I've altered the order of your questions to leave the longer answer at the end.</p> <h1>Your questions</h1> <blockquote> <p>What suggestions do you or your team have for testing new browsers as they come out?</p> </blockquote> <p>Actually, as you said, Chrome and Firefox are continuosly delivering so it eases the process. The last version you have is mostly always the version the user has.</p> <p>For any other browser (and Chrome and Firefox old versions) just select a version of each and act as a "high pass filter", testing any version up from the one you selected.</p> <blockquote> <p>How do you decide when you will or will drop support for a browser version?</p> </blockquote> <p>Take a look at the statistics of browser use. There are many resources such as <a href="http://www.w3counter.com/globalstats.php" rel="noreferrer">statcounter</a>, <a href="http://www.w3counter.com/globalstats.php" rel="noreferrer">w3counter</a>, <a href="http://www.w3schools.com/browsers/browsers_stats.asp" rel="noreferrer">w3cschools</a>, or <a href="http://en.wikipedia.org/wiki/Usage_share_of_web_browsers" rel="noreferrer">wikimedia</a>. If possible, add an analytics tracker to your page and you will have data about what devices, platforms, browsers, and versions of them the visitors use to access the site.</p> <blockquote> <p>What things do you do during development to decrease possibility of having code break when a browser update comes out?</p> </blockquote> <p>The key is to use a well defined methodology, based on the existing standards. Continue reading for a personal recommendation.</p> <h1>Workflow to ease cross-browsing</h1> <h2>Step 1: Bootstrapping</h2> <p>At first decide: <a href="http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement" rel="noreferrer">Graceful degredation versus progressive enhancement</a>. Both are valid techniques, but makes sense using the first to fix existing projects and the second for newly created projects.</p> <p>Then select libraries to <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="noreferrer">avoid typing existing code</a>, focusing on the 3 languages: JavaScript, CSS, and HTML. HTML5 (+CSS3) is the better choice today but support for older browsers must be provided. The following libraries ease supporting them:</p> <ul> <li><a href="http://modernizr.com/" rel="noreferrer">modernizr</a> for feature detection and conditional loading of js or css.</li> <li><a href="http://jquery.com/" rel="noreferrer">jQuery</a> for ajax and dom related tasks.</li> <li><a href="http://necolas.github.io/normalize.css/" rel="noreferrer">normalize.css</a> for normalize default browser styles, rather than just "resetting" them.</li> </ul> <p><strong>Notice that all of the js libraries listed above allow custom builds</strong>, an important thing when performance matters.</p> <p><a href="http://html5boilerplate.com/" rel="noreferrer">Html5 Boilerplate</a> provides a strong template from which start the layout. It includes modernizr, jQuery, and normalize.css. <a href="https://github.com/h5bp/html5-boilerplate" rel="noreferrer">Its github repository</a> is a good resource to learn a lot about cross-browsing techniques. <a href="https://github.com/h5bp/html5-boilerplate/wiki/library" rel="noreferrer">This article on its wiki</a> has a nice set of links to start learning.</p> <h2>Step 2: Do the work</h2> <p>Designs should be mobile-first and responsive. <a href="http://www.html5rocks.com/en/mobile/responsivedesign/" rel="noreferrer">This article on html5rocks</a> introduces well why and how.</p> <p>While "doing the work":</p> <ul> <li><p>Follow <a href="http://www.w3.org/standards/" rel="noreferrer">the w3c standards</a>. Avoids using hacks, specially CSS hacks, when possible. Review often the <a href="http://www.w3.org/TR/html51/single-page.html" rel="noreferrer">HTML5 specification</a> as it is pretty unstable.</p></li> <li><p>Take care of <a href="http://www.ecmascript.org/" rel="noreferrer">ECMAScript 5</a> features when writing javascript. Rely on libraries to avoid code breaks caused by deficient browser implementations. <a href="http://perfectionkills.com/whats-wrong-with-extending-the-dom/" rel="noreferrer">Do not extend the DOM</a>.</p></li> <li><p><a href="http://en.wikipedia.org/wiki/Test_automation" rel="noreferrer">Automate tests</a> when possible. Layout and specially layout polishing, including animations, are <a href="http://en.wikipedia.org/wiki/Manual_testing" rel="noreferrer">manually tested</a> cause it's quicker but UI functionalities like form submision can be perfectly tested with automated tests.</p></li> <li><p>Use tools to ease tasks. <strong>Chrome + devtools</strong> or <strong>Firefox + firebug</strong> are the very basic must-use, but there are a bunch of tools to ease cross-browsing tests, even automating those tests.</p></li> </ul> <h2>Annex: Tools and resources</h2> <h3>Cross-browser testing</h3> <ul> <li><p><a href="http://www.browserstack.com/" rel="noreferrer"><strong>Browserstack</strong></a> is just awesome. Allows testing on all devices, platforms, browsers, and versions.</p></li> <li><p><a href="https://browserling.com/" rel="noreferrer"><strong>Browserling</strong></a> is an alternative to browserstack. It is <a href="https://browserling.com/#/about" rel="noreferrer">developed and maintained</a> by Peteris Krumins and James Halliday, both recognized members of <a href="http://nodeguide.com/community.html" rel="noreferrer">the node.js community</a> and well-known developers. They also published a tool to automate the process called <a href="https://ci.testling.com/" rel="noreferrer"><strong>testling-ci</strong></a>, but this is only relevant if using node.js on the back-end.</p></li> <li><p><a href="http://www.modern.ie/" rel="noreferrer"><strong>modern.ie</strong></a> provides tools to ease testing on internet explorer. Developed by Microsoft, the site provides live testing through browserstack and downloadable virtual machine images with pre installed software.</p></li> </ul> <h3>adaptability testing for "responsive design"</h3> <ul> <li><a href="http://respon.si/" rel="noreferrer"><strong>respon.si</strong></a> is an online tool meant to test the visually appearance of layouts. It allows selecting a resolution so it's useful for responsive layouts testing. Notice that any other tool to select a resolution can easily do the same.</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POBrowser Overflow ... How to ensure Cross Browser, Cross Platform Testing and Compatability
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USlaconbass
    1. USlaconbass
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POBrowser Overflow ... How to ensure Cross Browser, Cross Platform Testing and Compatability
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COw3schools stats are for w3schools which is predominately visited by developers. The best stats are your own log files.
      singulars
      1. PO
      1. USRob
    2. CO@Rob I completely agree. Everyone should keep in mind [the source of the statistics](http://webmasters.stackexchange.com/questions/17050/what-is-the-best-browser-usage-statistics-source). I think I explained good the benefits of an analytics tracker, those external resources are best-fit for project-start analysis. Do you think it's not clear enough? Thanks for the feedback :D
      singulars
      1. PO
      1. USlaconbass
    3. COyou can also try http://www.browserstack.com/responsive
      singulars
      1. PO
      1. USNakul
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload