google / ioweb2016 Goto Github PK
View Code? Open in Web Editor NEWI/O web app 2016
Home Page: https://events.google.com/io2016
License: Apache License 2.0
I/O web app 2016
Home Page: https://events.google.com/io2016
License: Apache License 2.0
So we have them clearly defined for later
Also add gulp eslint
to its list of commands.
The new designs call for a scroll header with single card
These need to be removed in the phase1 branch
It uses some of the helper js files which have es6 stuff.
From page-animation.js and the markup in the main page.
Put back ink on the nav tabs...like a BOSS
No reason to limit to checking /scripts/**/*.js
TODO:
*.js
files pulled into elements (old countdown-timer code currently throws a million errors)http://localhost:3000/io2016/api/v1/social is returning []
in dist. So is https://events.google.com/io2015/api/v1/social fwiw.
We'll store the following information in Firebase and move away from using Google Drive app data:
There are a bunch of instances of
if (window.ENV !== 'prod') {
console.log(...);
}
We should refactor that out to a global debugLog(...)
helper.
I get js errors from data-worker.js when running gulp serve:dist
Looks like it's coming from scripts/helpers/schedule.js, Object.map()
in function generateFilters(tags) {
Think this is due to babel
Now that animations are simpler, we can move subpage tab selection to data binding.
e.g. remove IOWA.Elements.Masthead.querySelector('#subpage-tabs').selected = page.selectedSubpage;
type logic.
https://github.com/GoogleChrome/ioweb2016/blob/master/app/templates/schedule.html#L494-L501
We really don't need these any more now that pages are elements. We'll need to dynamically change page meta data (this was taken care of by the server on page load) when a page loads / transitions. Last year, we didn't do the latter :(
Issues I see that we need to look into:
+
button is not always right see #84firstOfBlock
needs to be recalculated for myschedule and filtering. The latter produces bugs like this:Some stuff we need to work out:
bower install
bpgdec8a.js instead of checking it in.detached
) it needs to clean up after itself.<coutdown-timer>
to load.Uint8Array
array with the pre-decoded output? That could be loaded directly in the app when the home page loads.Looks like gcloud preview app run
is no longer a thing and we need to use the gae dev server? I think the dev server flag is also --datastore_path
and not --datastore-path
here: https://github.com/GoogleChrome/ioweb2016/blob/master/gulp_scripts/backend.js#L176
@crhym3 can you take a look. Also update the README with any gcloud changes.
GAE supports http2 push. We should use it for a few critical resources on the main page.
FF 44 ships with sw tomorrow! We should check that everything is working :)
We can save users' bandwidth by reducing the number of items we're needlessly caching. There are some uneeded files (esp for phase 1):
For the last one, would it be possible to glob out entire directories? For example, we don't need all the images/onsite/, images/offsite/ now, but will later. The images will also be different so users will get uneeded images, cached.
Since we're no longer using templates/page.html for each page (they're elements now), maybe we should setup a manual list of page names and image directories to cache?
var PrecacheConfig = [["./","3bf0607ade46c9186dbcea16d5a3a49c"],["./?partial","a571166c09791ea01844936122774a8b"],["about","e7bfa32cd04bae4007a5406fe3d8868a"],["about?partial","e035d5c6252bdeafd73b007ebd51b501"],["bower_components/es6-promise/dist/es6-promise.min.js","69d3624630f5e2d043741d048872430a"],["bower_components/webcomponentsjs/webcomponents-lite.min.js","2c53f5231be8b6a0faefaa47d3e2137f"],["bower_components/webcomponentsjs/webcomponents.min.js","7ed13199f438d50e134e909f00eb4eec"],["data-worker-scripts.js","5011d45e54d8dabed29a2ae402775541"],["elements/elements.html","1f3502e30c977becd01ab17f4d8c80f7"],["elements/elements.js","52f6330603bdec0dc7ebd851216ec35b"],["embed","4739c2416689eb9b43790f029cf0bfe6"],["embed?partial","c2fb5be8ae16b78b0f37b1cf34d098ce"],["error_404","1b121b996e0203350c2ae8a68f7b213c"],["error_404?partial","cdd11e4b19640880da7c74af88a0738c"],["error_500","014ff9721be9bbb3c79f63ec38f821e4"],["error_500?partial","3c8f392705df541dc4c4399b73bf842a"],["faq","59f54aecf86567034f166c60de0d48d0"],["faq?partial","1f0035495972c0aa3b3a05ed624562b2"],["favicon.ico","bdd381fe7a8825bcf664b7f1ca96431f"],["form","8bcfe5328642d62a89158e0ccd222889"],["form?partial","923336718f9aa51f9e94abe69395fb8b"],["home","3bf0607ade46c9186dbcea16d5a3a49c"],["home?partial","a571166c09791ea01844936122774a8b"],["humans.txt","11eb77d7907e2c10c0ed7285cb430719"],["images/google-logo.svg","9c6ad27fab8abbc8072e3113169ed5d5"],["images/google_play_45.png","8e903b49edef08d6b29991f931b9bcaa"],["images/hash.png","abca25acebb323f337284d6c4619e801"],["images/home/cardboard.jpg","69b80fe0c04b369d97c7702bb51ee063"],["images/home/recap.jpg","97207d8341bc258a288615f8d7f0518e"],["images/io-logo-grey.png","000b3968dc6f7ca5e64f30817340cd7d"],["images/io-logo-white.png","104e313972d455fd010892bff0374df3"],["images/[email protected]","ee8201d91eb0afa367c7c5771ea67b96"],["images/io.png","b9efd08457b244c68c62d17ddd9be89b"],["images/io15-color.png","e559b3808822fb49aae59d5a3eb8fca1"],["images/offsite/stage-887.jpg","c6ac0cf209aedbfcb2c75512fc036e2f"],["images/offsite/[email protected]","7b48a6c026d6b08e5ec604e6d2fe81b2"],["images/onsite/Image-01.jpg","402bacd570dfbe68240f5da16df25bec"],["images/onsite/[email protected]","3200a41b19a8f3a651209c3114da44d8"],["images/onsite/lyft_pink.svg","94a9d66fd5a545be7e9a00d94ec9876b"],["images/onsite/map/io_floor1_label.jpg","9478f7b2b0029796d7ad0f3402271a1e"],["images/onsite/map/io_floor2_label.jpg","c023f2d9bb84f496c879d5b2684036bf"],["images/onsite/map/io_floor3_label.jpg","455c5f3cd72fd62777baa6347a34a03d"],["images/onsite/onsite2.jpg","279cd1ff7bdc28aca8a31a07a3c24ce7"],["images/onsite/onsite3.jpg","d69038bbb3e39ecf1bca00986e52d786"],["images/onsite/onsite_large.jpg","48ba10041cb280176fb50b2a4b8a3b31"],["images/onsite/onsitedude.jpg","ddeb49bda63dcd530fe9dadaf6ab4650"],["images/play-video-button-grey.png","d35fd202b671fcb9c7d16833e202d6d5"],["images/play-video-button.png","183a33b6e99b0a75fba2afeb23a6288f"],["images/schedule/channel1.png","707fee09c96e5d6b236da9c9086251bd"],["images/schedule/channel2.png","376b2bf545e3c5e6e6d818857acc084f"],["images/schedule/channel3.png","939341fd4001dfbdff4b175d146ae834"],["images/schedule/profile_placeholder.png","2b0b2305cb4ba2e87775e814743350fd"],["images/schedule/session_placeholder.jpg","7703bcfbd5dddb72671d798d375260ba"],["images/schedule/sessiondetail.jpg","5f1e8e058af814ec529d8a91fe7c61cc"],["images/schedule/[email protected]","0ef31150a83a142745a3c70fc0a46381"],["images/share-twitter.svg","4bbd29384a998d765ed5929586f0cef0"],["images/touch/homescreen144.png","0d13cdf30430acf611122ce49081d49c"],["images/touch/homescreen192.png","4fa11cbc3c002a8c18637f0a076c9297"],["images/touch/homescreen48.png","d7ef582c756834e4a66738abc23958e4"],["images/touch/homescreen72-fav.png","154175dec37da0bea07476675d95281d"],["images/touch/homescreen72.png","5c226be7b2b4dddc1cbec8fac8282d40"],["images/touch/homescreen96.png","a07df4cea81a25e58bf43305d7980ab3"],["offsite","7b22bf25c1c45cb748435b188faa2205"],["offsite?partial","2ac5eb0a7db139c97cd6a083da879752"],["onsite","9938c8557df9c383bfeecb8c1a14c746"],["onsite?partial","de06d140a3d4f731f0fd9478c4e56551"],["registration","7f9ed7ac8924f5b4c783224459837787"],["registration?partial","e9e75b8020dc232af7f1313cf560e7b0"],["schedule","13bc390c241c0fec309919de96920408"],["schedule?partial","753a2589a7207988a285f099909b3ffc"],["scripts/analytics.js","624a0ed8c245aa08ced29a4d347028a0"],["scripts/site-libs.js","1c74bbb0c2fa37de94e0de237dbed04c"],["scripts/site-scripts.js","0d3de3c6a252471a073e5208554b4a93"],["scripts/sw-toolbox-scripts.js","692aa43e6da2afb889b556608007c22d"],["styles/main.css","9120df4c75f33e66d6ad484050e929cb"],["styles/pages/error.css","96aa897460afada57c2513b3d506423a"],["styles/pages/permissions.css","aabaa6cfc7de2948c19a11e742d2f947"],["styles/pages/upgrade.css","89037cac1b941d27d7d2688330add6b0"],["upgrade","4c57fdaf323f8c303c093100e1478c31"],["upgrade?partial","c6e85b999d7e12ba8451bb38490b3514"],["videos","55e74bf70542c5baf72c0b4f37bf4e9c"],["videos?partial","a6e31a8eed252e8377b97e079f57fe52"],["widget","164180a2d8f7cba2049e42e8e0720add"],["widget?partial","e1b562d44db6da9d8b2cc22f0e846c47"]];
So we can leverage data binding on it's tab links. Right now some of these properties are manually updated in Router.prototype.updateUIstate
URLSearchParams
is the new hotness in Chrome 49:
https://www.chromestatus.com/features/5632984866619392
We should use it instead of the custom methods we have here:
https://github.com/GoogleChrome/ioweb2016/blob/master/app/scripts/helper/util.js#L142-L200
There's a polyfill here we can use:
https://github.com/WebReflection/url-search-params
Probably use https://elements.polymer-project.org/elements/firebase-element?active=firebase-auth, and keep the same hooks/interface we have now, or swap out the impl of elements/google-signin.html to use this element.
@nicolasgarnier want to take it?
It would be nice to rewrite the top level scripts in full ES6. Perhaps the Polymer code as well, but that is trickier. This would mean babel integration as well into the build process.
Now that code like #69 is landing, the bits to handle offline updates need to go in.
As per discussion with the Firebase team, we're going to take an approach where we:
And then each time the page is initially loaded, we'd also want to check for any queued updates in IndexedDB and replay those.
I updated server.config.template, but every time I generate the different configs, some contain 2015 data ("prefix": "/io2015",
start date is the 2015 url) even though the template is up to date.
What am I doing wrong?
https://github.com/GoogleChrome/ioweb2016/blob/master/app/bower.json#L66
@jeffposnick giving this to you or now, but feel free to pass to someone else. This maybe be a good task for @nicolasgarnier, @pengying, or @wibblymat.
We should already be hitting most of these, but the sanity check is:
And make sure everything is up to date (e.g. manifest updates + banner event).
For first paint, we may need to redo the I/O loading animation, use body-bind
, or go async with imports. I have some tricks.
Can you provide the follow people access to staging:
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
Right now, we're concatenating our JS and CSS into a few larger bundles as part of our build process. This [might be/is] an anti-pattern when using HTTP/2. I'm assuming that most of the client traffic we'll receive will be from browsers that support HTTP/2.
Additionally, using individual JS/CSS files means that the caching will be more effective, both service worker and traditional browser caches. When a specific resource changes, that will be the only thing that needs to be refetched, vs. having to refetch the entire set of bundled assets.
Currently the GCM subscription ID is sent to the Backend to be persisted using: https://github.com/GoogleChrome/ioweb2016/blob/master/app/scripts/helper/notifications.js#L96-L101
We're switching that to persisting it through Firebase. You'll need to use:
https://github.com/GoogleChrome/ioweb2016/blob/master/app/scripts/helper/firebase.js#L264-L268
We need to decide if/how we're going to handle fallbacks for read operations that would normally be done against Firebase when the user starts up offline.
If we are going to support that, then something IDB-based might end up making more sense than using the Cache Storage API, since the Cache Storage API only works with HTTP responses, and we're using a WebSocket-based Firebase connection.
<template ref>
is no longer supported and there is not a viable replacement. Need to create custom elements for each page.
Pattern: https://github.com/kevinpschaaf/polymer-sc/blob/master/elements/sc-app.html#L165-L184
(which is similar to ๐ tracker's system)
This will be great for:
Things that need to be worked out:
@jeffposnick for the fyi. This may also impact service worker caching.
The question to answer is: how many concurrent signed in users do we have at any given time?
GA gives us users during a time/date range, but we don't know how many of those are signed in.
This would help us know correlate sign-in users to correlate with things like notifications support.
@ebidel @brendankenny I can't seem to run any of the gulp
tasks:
$ gulp
gulpfile.js:46
let reload = function() {
^^^
SyntaxError: Unexpected strict mode reserved word
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:192:16)
at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)
I did run npm install
before executing gulp
.
$ node --version
v0.12.8
$ npm --version
3.5.2
So we know all these marvelous commands and flags.
with LICENSE information
It looks like the countdown at least will need something there. We'll have to figure out how to serve it/access it easily for dev mode
And adhere to https://github.com/google/eslint-config-google with a minimal set of disabled rules.
Similar to what we're doing with the global window.onerror
handler.
I put together this sample showing off the functionality, available starting in Chrome 49: https://googlechrome.github.io/samples/promise-rejection-events/index.html
[EDIT - @wibblymat] Need to make sure that the push registration flow is smooth. The UI/UX needs to be reviewed.
We should also switch out as much custom code as possible in favor of the Propel library.
The color switching of the banner isn't part of the new design. We can simplify the codebase by removing.
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.