polymer / polycasts

This repo is now archived. Please follow our Twitter account for future updates

Polycasts

Polycasts is a biweekly YouTube series covering all things Polymer and Web Components.

Each episode contains an example project, which lives in this repo. If you have questions, concerns, comments, etc. file an issue or hit us up on the twitters @Elliott_Marquez @rob_dodson

polycasts's Issues

ep14-reusable-elements

It looks like I'm hitting some infinite recursion when using polyserve...
I cloned this repository and did this..

polycsts/ep14-reusable-elements$>  polyserve
Starting Polyserve on port 8080
Serving components from bower_components
File in this directory are available at localhost:8080/components/tiny-badge/...

When I direct the brower to http://localhost:8080/components/tiny-badge/demo.html, The url redirects to http://localhost:8080/components/tiny-badge/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/bower_components/.

An error message is displayed in chrome "ERR_TOO_MANY_REDIRECTS"

Am I doing it wrong?

Uncaught (in promise) DOMException: Registration failed - push service error

Hi,

In chrome firebase messaging throws error on getToken() method in requestPermission() call.
I have tried it in multiple projects and PSK. All fail to get token.

Source code to reproduce
https://github.com/vinvantest/git_issue_firebase_login

Stacktrace
Uncaught (in promise) DOMException: Registration failed - push service error
Promise.then (async)
refreshToken @ firebase-messaging.html:87
activateMessaging @ firebase-messaging.html:125
activate @ firebase-messaging.html:243
_bootstrapApp @ firebase-messaging.html:259
runMethodEffect @ property-effects.html:813
runEffectsForProperty @ property-effects.html:159
runEffects @ property-effects.html:125
_propertiesChanged @ property-effects.html:1703
_flushProperties @ properties-changed.html:338
_flushProperties @ property-effects.html:1551
_invalidateProperties @ property-effects.html:1523
_setProperty @ property-effects.html:1508
Object.defineProperty.set @ properties-changed.html:150
__appNameChanged @ firebase-common-behavior.html:47
runObserverEffect @ property-effects.html:214
runEffectsForProperty @ property-effects.html:159
runEffects @ property-effects.html:125
_propertiesChanged @ property-effects.html:1703
_flushProperties @ properties-changed.html:338
_flushProperties @ property-effects.html:1551
ready @ property-effects.html:1656
ready @ element-mixin.html:546
ready @ dir-mixin.html:140
ready @ legacy-element-mixin.html:198
ready @ class.html:232
ready @ class.html:232
ready @ class.html:232
_enableProperties @ properties-changed.html:321
connectedCallback @ properties-mixin.html:208
connectedCallback @ element-mixin.html:532
connectedCallback @ dir-mixin.html:150
connectedCallback @ legacy-element-mixin.html:105
_attachDom @ element-mixin.html:588
_readyClients @ element-mixin.html:561
_flushClients @ property-effects.html:1565
_propertiesChanged @ property-effects.html:1699
_flushProperties @ properties-changed.html:338
_flushProperties @ property-effects.html:1551
ready @ property-effects.html:1656
ready @ element-mixin.html:546
ready @ my-app.html:540
_enableProperties @ properties-changed.html:321
connectedCallback @ properties-mixin.html:208
connectedCallback @ element-mixin.html:532
(anonymous) @ my-app.html:849

I have attached screenshots of the behaviour. Sequence of events is stored as filename in chronological order just to simplify things. I have also attached 3 files from the PWA namely .. index.html, my-app.html (main element), login.html and firebase-sw.js. Hope it will provide all the context to the issue.

Firebase Product: messaging
bower polymerfire#^2.2.1 cached https://github.com/firebase/polymerfire.git#2.2.1
bower polymerfire#^2.2.1 validate 2.2.1 against https://github.com/firebase/polymerfire.git#^2.2.1
bower firebase#* cached https://github.com/firebase/firebase-bower.git#4.6.1
bower firebase#* validate 4.6.1 against https://github.com/firebase/firebase-bower.git#*
bower firebase#* new version for https://github.com/firebase/firebase-bower.git#*
bower firebase#* resolve https://github.com/firebase/firebase-bower.git#*
bower firebase#* download https://github.com/firebase/firebase-bower/archive/v4.13.0.tar.gz
bower firebase#* extract archive.tar.gz
bower firebase#* resolved https://github.com/firebase/firebase-bower.git#4.13.0
bower firebase#^4.13.0 install firebase#4.13.0
bower polymerfire#^2.2.1 install polymerfire#2.2.1

Environment
Operating System version: Mac High Sierra 10.13.4
Firebase SDK - [email protected]
Firebase Tools version: 3.18.4

Chrome versions:
Google Chrome is up to date
Version 66.0.3359.139 (Official Build) (64-bit)] as well as in Chrome Android - [Application version Chrome 66.0.3359.126

Wrong import href in `ep17-theming`

Hi Rob.

First of all thanks for your videos! Great work!
You've got a typo (wrong import path) in ep17-theming inside ui-message.html:

Instead of <link rel="import" href="../polymer/polymer.html"> it should be <link rel="import" href="bower_components/polymer/polymer.html">

ep46 with app-route: category not updating on page refresh

In this video:
https://www.youtube.com/watch?v=xRONodYEF2A&index=3&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

at 7:08,
it seems that on page refresh, "the state has been reflected to the menu".

I'm following the same steps, using app-route, but on page refresh, my menu doesn't update (it works when I click on the links).

Here is my code (blog-app.html)

<link rel="import" href="bower_components/app-route/app-location.html">
<link rel="import" href="bower_components/app-route/app-route.html">
<link rel="import" href="bower_components/iron-selector/iron-selector.html">


<dom-module id="blog-app">
    <template>
        <style>
            :host {
                display: block;
            }

            a {
                color: black;
                text-decoration: none;
                margin-right: 8px;
                font-size: 18px;
            }

            .iron-selected {
                text-decoration: underline;
            }

            nav {
                height: 65px;
                margin: 0 auto;
                text-align: right;
            }

            main {
                width: 900px;
                margin: 0 auto;
                font-size: 21px;
                font-family: Georgia;
            }

            h2 {
                font-family: sans-serif;
            }
        </style>


        <app-location route="{{route}}"
                      use-hash-as-path></app-location>


        <app-route route={{route}}
                   pattern=":/category"
                   data="{{categoryData}}"
                   tail="{{categoryTail}}"></app-route>


        <iron-selector selected="{{categoryData.category}}"
                       attr-for-selected="data-page">

            <a data-page="art" href="#/art/list">Art</a>
            <a data-page="film" href="#/film/list">Film</a>
            <a data-page="photo" href="#/photo/list">Photo</a>

        </iron-selector>


        <div>route path: {{route.path}}</div>
        <div>category: {{categoryData.category}}</div>


        <main>
            <blog-pages category="{{categoryData.category}}"
                        route="{{categoryTail}}"
            ></blog-pages>
        </main>


    </template>

    <script>
        // https://www.youtube.com/watch?v=xRONodYEF2A&index=3&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN  @7:08
        Polymer({
            is: 'blog-app',
            ready: function () {
                // dirty fix
//              var curCat = this.route.path.substring(1, this.route.path.lastIndexOf('/'));
//              this.set('categoryData.category', curCat);
            }
        });


    </script>

</dom-module>

Am I doing something wrong?

[ep59-firebase-messaging] How to save tokens from multiple devices w/o overwriting?

polycasts/ep59-firebase-messaging/public/my-subscription.html

Lines 27 to 36 in 6e0ae52

	<firebase-messaging
	id="messaging"
	token="{{token}}"
	on-message="handleMessage">
	</firebase-messaging>
	<firebase-document
	path="/users/[[user.uid]]/token"
	data="[[token]]">
	</firebase-document>

What if the user opens the web app and enable notifications on multiple devices? The token from one device will overwrite the token from another device. How to save tokens without overwriting to send push notifications to all devices?

What happened to Polycasts?

@robdodson

What happened to the Polycast series you did?

Missing qoutes on two way binding

Not sure if it matters but missing double qoutes on this line

polymer-starter-kit: npm install build error

running npm install I get a build error part of the way through:

C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\Microsoft.Cpp.Platform.targets(42,5): error MSB8020: The builds tools for Visual Studio 2010 (
Platform Toolset = 'v100') cannot be found. To build using the v100 build tools, either click the Project menu or right-click the solution, and then
select "Update VC++ Projects...". Install Visual Studio 2010 to build using the Visual Studio 2010 build tools. [D:\dev\polymer-starter-kit\node_modu
les\browser-sync\node_modules\socket.io\node_modules\engine.io\node_modules\ws\build\bufferutil.vcxproj]

I don't have VS2010, but I do have 2012. Should this be changed to use whatever msbuild is in the env:path?

No more polycasts?

Hi Rob,

Did you stop making Polycasts? I would love to see more of you :D

Thank you!

Merc.

Example 46 not working

Hi, i cloned your repo and tested the example under windows 8. Actually it doesn't work even after the update to the new Polymer version. I can see the list of articles, but on click the request for the post isn't fired

define thunk behavior with polymer 2.0 classes

How to define a redux thunk that can be mixed in (used to be in the behavior array) with the new polylmer 2.0 elements.

Polymer-micro throws an exception

@robdodson I've tried running bower cache clean and re-installing my dependencies. However I keep getting the exception thrown by polymer-micro.html

Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)."

I just watched and followed your polycasts #57 and #58. The integration of firebase-auth went all right but then it broke when I added the element and firebase-query. I could not find the cause so I came here and copied your code but I still get the error.

Uncaught Vcode: "app/duplicate-app"message: "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)."name: "[DEFAULT]"stack: "FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).↵ at Z (http://localhost:5000/bower_components/firebase/firebase-app.js:27:364)↵ at Object.initializeApp (http://localhost:5000/bower_components/firebase/firebase-app.js:26:29)↵ at HTMLElement.__computeApp (http://localhost:5000/bower_components/polymerfire/firebase-app.html:117:36)↵ at HTMLElement._computeEffect (http://localhost:5000/bower_components/polymer/polymer.html:1684:24)↵ at HTMLElement._effectEffects (http://localhost:5000/bower_components/polymer/polymer.html:1507:7)↵ at HTMLElement._propertySetter (http://localhost:5000/bower_components/polymer/polymer.html:1491:6)↵ at HTMLElement.__setProperty (http://localhost:5000/bower_components/polymer/polymer.html:1500:6)↵ at HTMLElement._applyConfig (http://localhost:5000/bower_components/polymer/polymer.html:2110:6)↵ at HTMLElement._afterClientsReady (http://localhost:5000/bower_components/polymer/polymer.html:2104:6)↵ at HTMLElement._ready (http://localhost:5000/bower_components/polymer/polymer-mini.html:70:6)"__proto__: Error

Do you have an idea of how I could fix this?

'ep06-simple-app' app not working properly on mobile chrome, but working nicely on mobile Safari, both case are on iphone 5.

@robdodson , looks the core-drawer-toggle not function properly, any clues? BTW, 'ep05-core-drawer-panel' app works fine on mobile chrome. thanks!

policasts#25 convienet-page don't work

i downloaded the code but i see only a blank page, with no error in the chrome console