ampproject / amphtml Goto Github PK
View Code? Open in Web Editor NEWThe AMP web component framework.
Home Page: https://amp.dev
License: Apache License 2.0
The AMP web component framework.
Home Page: https://amp.dev
License: Apache License 2.0
Currently it's left up to the component to resolve states between "layout" and "viewport" events and it's too easy to introduce a risk condition. In an example, amp-anim autoplays GIF when it enters viewport, but it needs to make sure that the image is ready. It's not too hard to implement it fully, but perhaps this can be made simpler.
Should probably be managed through special priority
Current state of discussion is:
Every type of resource has a base priority (image, pixel > ads). Actual load priority is influenced by position in viewport. Highest priority for visible resources, lower priority for resources that are about to becomes visible.
For the base priority we need thresholds: Based on prerender mode we may never want to render
During scrolling we never want to trigger loading an ad (I think, unless that ends up not feeling good due to incremental rendering).
amp-img
is loading all images in my page, before user scroll to there. It's correct?
Tks
We need to unify how we do this.
The idea to show it in the DOM (at least in dev mode is great), but needs to go through a common API and should also work for asserts.
Would also be nice if our logger would take an element and one could inspect what was logged for an element.
Scores are a bit more precise, but require more data, e.g. viewport info to calculate and quickly depreciate.
Hello,
I don't know if I can open issues here or if you prefer that I send to the google group, so sorry if I did wrong.
I'm trying to use amp-video
and the following error message appears:
TypeError: u.maybeApplyResponsivenessToItem is not a function
The same occurs with the example page newsstand.html.
In my test page, I'm using this amp.js: https://www.gstatic.com/amphtml/v0.js
Thanks
Git pulled on 10 sept 2015
By adding an < amp-pixel src="https://....." > the page turns blank. I'm getting the following error in Chrome's console
Uncaught Error: Layout not supported for: container
ElementProto.firstAttachedCallback_ @ viewport.js:45
ElementProto.attachedCallback @ viewport.js:22
Regards
Enrico Canardi
Each one generates 2 try-catch-finally blocks.
Disgusting :)
https://github.com/ampproject/amphtml/blob/master/gulpfile.js#L60
we keep passing watch: true
options which doubles the amount of watchers every time build extensions is ran.
this affects the bundling of the files as bundling gets slower and slower.
Hi
According to the attached comment done by Taylor in the "Component Spec Document", would be possible to include the preroll attribute in the tag ?
Thank you
Taylor Savage
Perfect. I'll add a preroll
attribute to the spec for the simple, built-in case. For something like IMA a pretty straightforward Extended Component should be created to enable IMA ads directly, and similar Extended Components should be created for other media ad networks.
That way we could find the element when generating the error message and could automatically point to the right element in the DOM.
Hi,
I have found on amp-html-components.md a doc about forms.
I have tried to use the example, but the message DISALLOWED_TAG is showed.
Are amp-input
and related tags avaliable?
DISALLOWED_TAG amp-form
(anonymous function) @ amp.js:10139
(anonymous function) @ amp.js:10138
DISALLOWED_TAG amp-email-input
(anonymous function) @ amp.js:10139
(anonymous function) @ amp.js:10138
DISALLOWED_TAG amp-on
(anonymous function) @ amp.js:10139
(anonymous function) @ amp.js:10138
QUICK DESCRIPTION:
When loading an AMP HTML file (attached) locally with Chrome the tags report the following error:
"...connection attempt to ads.localhost was rejected..."
GET http://ads.localhost/ads/v0.html net::ERR_CONNECTION_REFUSED
This comes from the AMP runtime (https://www.gstatic.com/amphtml/v0.js):
return"localhost"!=e.location.hostname&&e.location.hostname||(t="http://ads.localhost:"+e.location.port+"/ads/v0.html"),t}Object.defineProperty(n,"__esModule",{value:!0})
It appears that I need to load the file from a host. When I host the AMP HTML sample file on...
www.googledrive.com/host/0B2EN3x884QPPMUc1eVZscFRIeDg
...both the and tags appear to work using Safari, though the appear to fail on Chrome.
STEPS TO REPRODUCE:
EXPECTED RESULTS:
All frames should load with content.
OBSERVED RESULTS:
See attached screenshots (pieter-amp-ad-js-failed-1.png & pieter-amp-ad-js-failed-2.png).
The ad frames do not load with valid content.
RESOLUTION:
Works fine when the file is hosted. See: www.googledrive.com/host/0B2EN3x884QPPMUc1eVZscFRIeDg
A more convenient temp host location:
https://jsbin.com/detuniticu
https://jsbin.com/detuniticu/edit?html,console,output
To allow for format selection based on client capabilities.
TypeError: u.maybeApplyResponsivenessToItem is not a function.
CC @dvoytenko
This is just a ticket for what we discussed. Based on Ed's neutral designs with some public domain images, etc.
It adds too much complexity.
I've seen it in example docs, but the spec discourages its use including because it may be useless on mobile devices:
"Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet)."
http://www.w3.org/TR/html5/single-page.html#the-title-attribute
See https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari for the issue with iframes too large for their context in iOS.
We need to test this for
Commit hook for DO NOT SUBMIT
console.log/error, etc.
Tests passing (Can use travis CI when we are public).
Try to build a document that escapes our layout rules in as many ways as possible.
Try to add margins, padding, line-height, whatever, to make a document change size after content loaded.
CC @dvoytenko
Or decide the opposite.
From Taylor:
Poster would certainly be simpler/more platform aligned. The initial reasoning was to allow for more flexibility - if the author wanted to include anything more complex than an image, like a fancy splash screen with a custom play overlay that changed on hover, for example.
But certainly in favor of narrowing scope in the preview for this one and any others.
If width is specified, height should be as well.
Console error:
Uncaught Error: Expected height to be available and be an integer/length value: null
I tried to make a pull request for this already:
#18
The spec currently requires a validator to compress the stylesheet with gzip.
I'd like to propose simplifying this away, e.g., say "... if the author stylesheet is larger than 50KB" (or some other value. Reasons:
The spec says about links:
Links must be relative, protocol relative or use the schemas HTTP or HTTPS.
After thinking about it some more, we should allow all protocols except those which mess with the page that's being displayed (javascript: - anything else?). Reason for allowing the others is that some links go to / open native apps, and users may want that. E.g., a link may open the mail app or some other app. In other words, for these other protocols the act of clicking is still a navigation, more like http / https, and is quite different from the javascript: protocol.
PS: Yes I understand it's also a selfish request because the validator already behaves like this. A change to the validator to make it match the spec is easy to do, but perhaps the status quo is actually better. Thanks for considering.
You all need to update your upstream remotes
It is often more efficient to play a video than an actual GIF.
We should support the ability to provide a video src. Videos would for now never auto play. Also we should make sure that only ever one video is in play mode.
Otherwise you get mixed content warnings in prod.
A lot of work can be avoided if we know that no layout/viewport info has changed.
We need a clean and secure way to expose some actions for execution taking into account obfuscation and other issues.
To repro:
Scroll to YT videos.
Click reload.
The document doesn't load uniformly.
Lets find out why. This should not happen.
CC @dvoytenko
@dvoytenko hacked something up based on phantom.
We should make this so that you can easily add samples and confirm that rendering stays the same as you make changes (with the option to approve diffs, of course)
They make the output unreadable.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.