Browsers:

Chrome 26 (Chrome dev channel - http://www.chromium.org/getting-involved/dev-channel)
Firefox 18.0.2 (Release)

Steps to reproduce:

1. Go to http://www.mobify.com/mobifyjs/modules/accordion/
2. Open an accordion
3. Close that accordion
4. Attempt to open that accordion again

Result:

The accordion fails to open. Also, when the accordion is fully closed the accordion is pushing page content further down the page then it should.

Feature suggestion: Mobify only supports capturing the landing-page. However AJAX and PJAX (pushState + AJAX) loaded content could benefit from the same capability.

My proposed functionality for Mobify has the following:

1. HTMLParser - this takes the xhr.responseText (or any string) and parses it to create a HTMLDocument
2. DOMProcessor - applies processing rules to a document
3. Glue - make the parser and processor work for the captured landing page, etc.

HTMLParser

Looking forward, the HTMLParser will be part of the browsers XMLHttpRequest. In IE8 and below it would be nice to enable html5 elements. Also, in IE9 and below the mere creation of <img src> downloads the resource, so it would be necessary to escape @src before parsing.

DOMProcessor

I suppose this contains a bunch of optional convenience rules, and the capability for externally provided processing.

Glue

• I feel that using document.write is a mistake. Mobify generates a DOM - just insert that into the window document. Scripts will need special handling, but that is potentially a win because it allows you to schedule their loading / execution. At least allow this to be controlled externally.
• A responsive work-around to prevent pre-loading of images is to use something like <a href class="image">. People who use this approach might still prefer mobify if it could do in-place DOM-processing (instead of capture-to-external-document-then-rewrite-page).

From old repo:

"Enhance polyfilled orientationchange using jQuery special events.

There is no equivalent in Zepto - devices that don't have orientationchange support won't get the events.

How should we polyfill this event?"

Currently when you encounter an error when making a selection inside of your mobify.konf you get an error message that looks something like this:

It would be nicer if the error was:

a) A bit louder (logged to console.error instead of console.warn)
b) Showed more detail about the error instead of just 'ReferenceError {}' or 'SyntaxError {}'

I know the plugin says it only supports IE10+, but in IE8 it breaks the JS. I am getting the error:
"Message: 'window.Mobify.points' is null or not an object
Line: 99
Char: 1
Code: 0
URI: http://cdn.mobify.com/mobifyjs/examples/capturing-picturepolyfill/index.html"

On IE, Firefox and Opera, the document.open(); document.write(); document.close() call seems to add a new browser history entry with the same URL.

After this occurs, clicking the browser back-button will return to the previous history item which is still the current URL.

On IE and FIrefox this results in the current page reloading, the boot-script and mobify re-executing, document.open()/write()/close() being called and thus back to where we started. You can't leave the current page by clicking the back-button.

Opera however, restores the state of the page before open()/write()/close() - this is just a blank page. Clicking the back-button once more will return to the real previous page.

Device: Samsung Infuse (Android OS 2.3.6), Galaxy S (Android 2.3.3), iPhone 3GS (iOS 6.1.1), iPhone 4S (iOS 6.0)
Original URL: http://www.epicurious.com/recipes/food/views/Mushroom-Leek-and-Fontina-Frittata-51143040

On the specified page we include almost all of Javascripts (keep about 30 external and 45 inline scripts, combining all of them with JazzCat) joining the remaining scripts with JazzCat. On Samsung Infuse though script loading time increases when using combineScripts().

Measured time from html header render till window.onload() event:
Infuse: 26 sec. with JazzCat and 10 sec. without
iPhone 3GS: 18sec. with JazzCat and 10sec. without
iPhone 4S: 5.7sec. with JazzCat and 3.0sec. without

The time doesn't change significantly whenever JazzCat request is cached and no new connection is made to it on page load, but depends on the amount of scripts combined with JazzCat: the more scripts, the more noticeable the difference is.

Based on this Roman assumed that the issue might be caused by slow data-url parsing on these devices.
Do you think you could try reproduce the issue with a synthetic test and fix JazzCat performance for this device?

Port this fix (https://github.com/mobify/portal_app/pull/1570) back into mobify.js

Add testing (this markup will make it break unless we have proper exception handling):

Currently things bomb out when you give a int rather then a string for say, overriding image quality. This should be fixed!

To reflect naming of the service

Some users may want to have elements in the accordions that are just links, instead of having content. Let's implement this feature.

Transfered from old repo:

"Let's make people be explicit about removing these ---- this makes it easier to build the responsive konf.

jb"

resulting in paths of the form /%22http://static.beyondtherack.com/collateral/messecaplomo/splash_banner_messecaplomo.jpg%22 in the image resize server logs, which is not a valid request, causing a 400 and no image to display.

Opera Mini on iPhone is having similar problems.

Currently investigating with Firefox on Android

for use with $.fn.resizeImages() because the DOMy way is slow when done in numbers. Also, use this for absolutification with combo.

1. Better error reporting
2. Console reporter

A hidden/invisible character in makeElement() on api/extractDOM.js causes a blank page, whose console shows the error:

ReferenceError: Can't find variable: Â

You can sorta see this invisible character through Github.

The weird thing is that it causes problems only on certain pages. @jansepar I'll email you the details.

How to enable / disable debugging mode

Right now, debugging is activated based on whether the mobify-path cookie is set to a non-empty value.

With the new opensource tag, mobify-path is not set in development.

You could enable it by setting a cookie but that's kind of a pain.

We could:

1. Check for #mobify-debug=1 on the page and set the cookie / enable it if found. We could then encourage people to add it to their URL to activate debugging
2. Add another parameter to Cauldron compilation for @production, and set debugging to true if the file is being compiled in non-production mode.

The docs mention the konf frequently -- so maybe rename to mobifykonf.js or konf.js. Regardless, currently .konf does not suggest to JS developers that this is just plain javascript. Plus it means that syntax highlighting isn't automatic for most text editors.

With cloud feature disclaimer added.

Hi there,

Is it possible to convert inline css images?

Please let me know.

Rein

We should be able to customize class names as options, also prefixes.

Another configurable option people may want is the ability for the entire page to reflow when opening and closing (right now, height of the accordion is reflowed in one frame to improve performance).

Why is escapedHTMLString() called as it is now? Shouldn't it be unescapedHTMLString() perhaps?

In the doc's Quick Start page, the main.js sample has this comment:

// To escape content, we prepend resources with "x-",
// so to change the src, you must set x-src.

In this case, the word 'escape' means adding the prefix.

However, that meaning is contradicted with what escapedHTMLString() does:

Returns a string representation of the captured document, but with all resources enabled (prefix removed).

What's the correct definition of 'escape'? Thanks.

When I visit - for example - http://cdn.mobify.com/mobifyjs/examples/capturing-picturepolyfill/index.html in IE10, and then click in the address bar and press enter to reload the page, I get a blank page.

When I capture the network activity, the first visit loads all expected resources - including mobify.js and main.js - but on the second visit nothing is loaded after mobify.js.

If I edit the boot-script so that script.onload is set before the script is inserted into the document then this issue is resolved. It seems that IE10 (and presumably IE9) has a subtle bug related to the the script preloading behavior.

Tested on a few machines and am getting a very weird issue in firefox. Plugin functions fine but it breaks the reload functionality in firefox. Go to any demo page, make the page scroll vertically and try to reload the page, with the reload button, cmmd + r, or even location.reload() in JS. It will not reload. Have to hit enter in URL bar.

This seems to be related to this:

// Show the bubble once the icon has loaded.
var icon = new Image();
icon.onload = loaded;
icon.src = $('link[rel="apple-touch-icon"]').attr('href');

$('#mobify-bubble-icon').css('background', 'url(' + icon.src + ')');

loaded is never called. iOS 5 may have changed the preloading behaviour.

Currently $('head') works inside the konf... but $('html') doesn't!

On the desktop, when I go to select text within a carousel for copy & paste purposes, swipe events appear to be firing instead. The result is any text within a carousel is unselectable.

Documentation states that items are center aligned by default and then later states that items are left aligned by default.

Nowhere in our docs do we talk about Mobify.enhance, which adds classes depending on the device, sd/hd, touch support, landscape/portrait, etc. Let's add it!

Make image resizing url rewriting resilient to service failure by preserving the original src value in a data attribute, and setting up an onerror handler that will restore the original src.

Since the picture proposal is still a draft, and future changes to it are highly probable, adding it to the markup can actually be harmful to the standardization process and can create future compatibility issues.

A different pattern (such as picturefill’s use of spans with a “data-picture” attribute) is highly preferred, since it enables Web developers to experiment with a picture-like syntax, without the possible compatibility issues.

Would it be possible to avoid the use of picture and switch to a similar pattern instead?

It would be nice to have alternate init, when mobify script is completely injected into page (via asset manager).

For example, we do hybrid app, where client's html is loaded only once, and then everything switches to ajax http://dev.nodeca.com/ . I this case, injecting customized build of mobify.js directly into page looks quite reasonable.

Could you provide alternate initializer for that?

With cloud feature disclaimer.

We need to store api/util.js in the ark.

Spaces and other escaped characters in URL are inconsistent between the URL used to create the key and the URL used to look up the value later, ensure keys get URI encoded before they are used.

Result:

Change https:// to http://.

Once the <plaintext> tag has been inserted the page is blank until it is rewritten.
This turns into a completely unusable page / site if anything prevents this rewrite from happening, e.g.

• mobify.js fails to load because it is on an external server (CDN perhaps) which is down or blocked
• mobify.js throws an error, because it encounters an unexpected browser behavior
• main.js throws an error because it wasn't tested cross-browser

Ideally the initialization script provides a fallback to re-make the page as though there were no <plaintext> inserted.

I have an Android 2.3.5 (HTC Desire HD). When I open:

http://cdn.mobify.com/mobifyjs/examples/capturing-picturepolyfill/index.html

No images are loaded. A bit of digging later:

this version of android removes the tags from the DOM completely. The only place I can mage to get workable, is within and

A temporary solution for my own site was to rename 'source' to 'imgsource', but of course this is not really a good solution. The other way would be to go with s, like upstream picturefill does.

Is this a known problem? And maybe much more important (for me): is this only a problem on Android 2.3? And is it only my Android, or does it fail on every Android (2.3)?

Tnx for your time, and of course, for an awesome javascript library; it works really awesome :D

Which is to say, should detect URLs that are already using the service, and not rewrite them.

Image indicator example is broken, or at least, I don't see any image indicators.

http://www.mobify.com/mobifyjs/modules/accordion-examples/

This relates to a bug in the v2.0 branch.

/complete|interactive/.test(document.readyState) and document.onreadystatechange are not reliable as DOM ready tests. All versions of IE can have interactive state before the DOM is fully loaded. Also, readystatechange can fire before the DOM is fully loaded.

I have written an exploratory test which is sufficient to confirm this bug.

https://gist.github.com/shogun70/5388420

The jQuery project also has a bug report -
document ready is fired too early on IE 9/10
and a "fix" -
sometimes IE10 and lower have document.readyState == "interactive" way too early

domReady also has a report and fix -
Add Guard for invalid readyState in IE9 and IE10

I miss 'scrollTop' from jquery. Now we do this really jarring jump to top when someone clicks a Back to Top button. Is there anything we can do about that?

As discussed before, it would be great to have a debug toolbar. Do we think this would be useful in the non-iframe view? Trouble is that people's CSS might conflict with the debug toolbar. Alternatively we could also do a postMessage and display the debug info on a different way in the preview iframe view only, for cloud.mobify.com, and for non-iframe, consider the console output sufficient.

Now that we've got the basics of combo setup, let's clock its performance.

We'll want to measure bandwidth and execution time across a range of resources.

in:

• Jazzcat docs
• IR docs
• Readme
• Homepage

We should also have an icon for the cloud.

Domain sharding doesn't appear to provide any performance gains in modern mobile browsers, as they will open more simultaneous connections to a single domain.