googlecodelabs/codelab-components

Web components for creating codelabs

Google Codelab Components

A set of Polymer elements, core of the Google Codelabs platform.

Dev setup

bower install is the obvious first thing to do.

To play with the demos, an easy thing would be to use polyserve: npm install -g polyserve.

Fire up the server with polyserve command and point your browser to:

http://localhost:8080/components/codelab-components/

Use web-component-tester to run tests. Can be installed with npm install -g web-component-tester, or just fire up polyserve and navigate to /components/codelab_components/test/<test-file>.

codelab-components's Issues

XSS in goToHome

1. https://www.code-labs.io/codelabs/about/index.html?index=javascript:alert(/xss/)
2. Click => Back arrow or Complete.

> content://com.google.android.apps.nbu.files.provider/2/1000013718

content://com.google.android.apps.nbu.files.provider/2/1000013718

Originally posted by @trixieboyle in trixieboyle/fluffy-pancake#93 (comment)

Buggy/intermittent scrolling on the x-axis of code samples on Chrome on Android

From @mrkiffie on July 18, 2016 10:11

Hi. Yesterday I incorrectly logged an issue on firebase/friendlychat #61 regarding a scrolling issue I experienced while working through that particular code lab. 😊

Would this be the appropriate place to report the issue? 😃

Thanks in advance.

Copied from original issue: googlecodelabs/feedback#66

Polymer 2.x compatibility

Do you have any plans to make this Polymer2.x compatible element?
Does anyone from this community work on this?

I think it would be helpful to add a notice about that it is not yet a 2.x polymer compatible element.

Thanks for your help in advance!

Add CI

To run tests for PRs.

polyserve failed on cygwin, win7

frren@FRREN-CN ~/git/codelab-components
$ polyserve
C:\Users\frren\AppData\Roaming\npm\node_modules\polyserve\bin\polyserve:14
const resolve = require('resolve');
^^^^^
SyntaxError: Use of const in strict mode.
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 Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3

Remove custom handling of up, down, PgUp and PgDown

Right now up, down, PgUp and PgDown are bound to move to previous / next step, which is incredibly frustrating since it changes default keyboard behaviour, which is to scroll down actual contents of a step using a keyboard. More than that, it seems that there are currently no way at all to scroll contents of a step using a keyboard, which forces the user to use mouse for no good reason. Please consider removing these keybindings.

Noticed this on https://codelabs.developers.google.com/codelabs/ng2-dart/index.html, but I'm pretty sure this would apply to other codelabs as well, thus reporting the issue here.

"Time Remaining" unclear

The "Time remaining" given at the top of codelabs seems unclear to me - it caused me to anxiously rush the codelab because I was under the impression that the content would become unavailable after that time.

I think adding something like "estimated" to it would improve its clarity

Make WCT tests less flaky

For instance, https://ci.cloudware.io/googlecodelabs/codelab-components/31:

02:06:11.228 INFO - Creating a new session for Capabilities [{platform=ANY, javascriptEnabled=true, browserName=chrome, chromeOptions={binary=/usr/bin/google-chrome, args=[start-maximized]}, version=48}]
Starting ChromeDriver 2.20.353124 (035346203162d32c80f1dce587c8154a1efa0c3b) on port 4348
Only local connections are allowed.
[info] Timeout request received, killing process

Title font and spacing cuts of letters like g or p

I am not sure this is the right place, but,
your Title (maybe subtitle) font, spacing and maybe padding cuts of a few leters like g, p q and maybe more.
Just look at this example
'Connecting to GitHub'

the g in connecting.

https://codelabs.developers.google.com/codelabs/flutter-github-client?hl=en#4

tested on win x64 firefox, edge, chrome.

I guess you changed the fonts years ago, and did not check or see this small issue.

see something - say something.

Codelab title appears on hover over images, links

Not sure what's causing this, but it seems to be happening on all of the codelabs pages.

First reported here:

googlecodelabs/polymer-first-elements#9

codelab previous step FAB not positioned correctly in narrow mode

Looks like the footer element needs to be a child of 'main' when in narrow mode.

I took at look at production google codelab components and it appears they implemented the drawer panel using iron-media-query and iron-selector and additional div wrappers. Any plans to merge those changes into this project?

Thanks.

Audited Resource, Min severity: Info

Take a look at the logs for Audited Resource (minimum severity: Info) in project pure-respect-423918-i4: https://console.cloud.google.com/logs?advancedFilter=resource.type%3D%22audited_resource%22%20AND%20severity%3E%3DNOTICE%20AND%20timestamp%3E%3D%222024-06-01T18%3A29%3A04.359-05%3A00%22%20AND%20timestamp%3C%3D%222024-06-01T18%3A29%3A04.360-05%3A00%22&project=pure-respect-423918-i4&src=VESPA

npm package?

Would you consider publishing these components as an npm package? Bower is deprecated now, and it would simplify usage workflow for creating codelabs.

Update document.title/fav icon with # min remaining

Can't create a new instance, opens a blank screen

When I run on polyserver, I get a blank screen with a few 404s:

FEATURE REQUEST: Add "Date Updated" to course page (all code labs)

It would be cool if you guys could add the Date Updated to the main course page also, as opposed to just having it on the main code labs page.

Polyserve : Throwing error " Use of const in strict mode. - commandLineArgs"

Running polyserve throwing follow error
const commandLineArgs = require('command-line-args'); ^^^^^ SyntaxError: Use of const in strict mode. 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)

Refer the image for more info

Inproper paper-styles breaks automation while "bower install"

bower install command still needs user interaction, which bowers me a lot.

"
Unable to find a suitable version for paper-styles, please choose one:
1) paper-styles#~1.0.11 which resolved to 1.0.13 and is required by codelab-components
2) paper-styles#^1.0.0 which resolved to 1.1.2 and is required by iron-component-page#1.0.9, iron-doc-viewer#1.0.12, paper-dialog#1.0.3, paper-fab#1.1.2, paper-icon-button#1.0.6, paper-item#1.1.3, paper-material#1.0.6, paper-menu#1.2.2, paper-radio-button#1.0.12
3) paper-styles#^1.1.0 which resolved to 1.1.2 and is required by paper-toolbar#1.1.3
4) paper-styles#^1.0.4 which resolved to 1.1.2 and is required by paper-dialog-behavior#1.1.0

Prefix the choice with ! to persist it to bower.json

? Answer 3
"

Fix keyboard scroll

Up / Down and PageUp / PageDown don't work to scroll codelab contents.

Reproducing

1. Open https://codelabs.developers.google.com/codelabs/web-assembly-intro/index.html?index=..%2F..%2Findex#0
2. Press Left / Right to ensure pages are flipped
3. Press Up / Down and PageUp / PageDown to see that vertical scroll doesn't work

Expected

Up / Down and PageUp / PageDown scroll step content.

References

• #28
• canonical-web-and-design/tutorials.ubuntu.com#615

Solution

Solution is to re-add keyboard shortcuts from #29 to forward Up / Down keyboard events to specific control, but I have no idea what the action should be. As an alternative, it should be possible to push these keyboard events from parent control to content pane, but again - no idea.

Pin repository to organization

This repository is really useful, but hard to discover. Pinning it at @googlecodelabs repo list will make things better.

Implement embeddable version of labs

Here's a proposal to add a few properties (they're false by default so users get all the goodies). The use case is to turn things off / allow users of the the components to custom the styling of the elements themselves.

• - no-theme: does not load our custom css. This might be the most difficult one because adding dynamic styles need to go through Polymer's style shimmer.
• - no-arrows: hides the arrows
• - hide-toolbar: hides the top nav. This is the <paper-toolbar hidden$="[[hide-toolbar]]">

This properties also need to be added to properties

Component Demo is broken

1. Open https://googlecodelabs.github.io/codelab-components/components/codelab-components/#google-codelab
2. Click Demo top right
3. Click right nav

Counter on he left switches, but content doesn't change. Console shows errors.

[Deprecation] Styling master document from stylesheets defined in HTML Imports is deprecated, and is planned to be removed in M65, around March 2018. Please refer to https://goo.gl/EGXzpw for possible migration paths.

docs.js:155 Behavior Polymer.IronA11yKeysBehavior not found when mixing properties into google-codelab!
keyframe-effect-constructor.js:128 Uncaught TypeError: Failed to execute 'animate' on 'Element': 'function (a){return a}' is not a valid value for easing
    at Object.b.newUnderlyingAnimationForKeyframeEffect (keyframe-effect-constructor.js:128)
    at b.Animation._rebuildUnderlyingAnimation (web-animations-next-animation.js:86)
    at new b.Animation (web-animations-next-animation.js:35)
    at b.AnimationTimeline._play (timeline.js:48)
    at Object.b.newUnderlyingAnimationForGroup (group-constructors.js:189)
    at b.Animation._rebuildUnderlyingAnimation (web-animations-next-animation.js:90)
    at new b.Animation (web-animations-next-animation.js:35)
    at b.AnimationTimeline._play (timeline.js:48)
    at b.AnimationTimeline.play (timeline.js:65)
    at HTMLElement._runAnimationEffects (neon-animation-runner-behavior.html:62)

Starting demo shows blank page

I cloned the project and ran polyserve in terminal, it gave

om26er@chaotic:~/code/ubuntu/codelab-components$ polyserve 
compile cache set to 52428800
Files in this directory are available under the following URLs
    applications: http://127.0.0.1:8081
    reusable components: http://127.0.0.1:8081/components/codelab-components/

But when I actually open that url, it just shows a blank page. Am I not supposed to see a demo codelab ?

Cannot read property 'mq' of undefined

Not sure how consistently this can be repro, but anyway:

1. Go to https://code-labs.io/android-dev-summit.
2. Open js console and make sure "Disable cache" is not checked on the Network tab.
3. Focus URL bar (cmd+L) and hit enter. This is different from refresh.
4. Observe splash screen and then blank page:

Users wouldn't normally navigate this way but I noticed this is also happening during normal navigation, e.g. selecting a view from the drop-down from the main index. Not as consistent though, hence the steps above.

Create your first Android app  |  Get started  |  Android Developers

""Hello Android"
https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-2%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-first-app#:~:text=displays%20the%20text-,%22Hello%20Android,-!%22.

this.state not preserved for resuming in this.async()

First, thanks for the codelab-components! It's awesome and really useful to have opensourced this :)

I'm having an issue with resume not fired up. Adding some debug, I observed that this.state doesn't keep the same value in _stateLoaded before and after this.async() call.

I added some debug logs in _stateLoaded:

      _stateLoaded: function() {
        console.log("State loaded: " + this.state.stepIndex)
        // allow everything render and initialize,
        // especially this.steps which runs at the same init level
        // as iron-localstorage (on attached).
        this.async(function() {
          console.log("Resume check: " + this.state.stepIndex)
          […]
        }, 500);
      },

So, here is what I'm seeing, on page load:

State loaded: 2
Resume check: 0

As you can see, this.state.stepIndex has changed. This is due to _selectedChanged being fired in between due to steps being initialized on attach.

One way could be to prevent the this.set('state.stepIndex', this.selected); assignement on attach via a loading variable, do you think of a better fix? (It sounds wrong to change this.selected, as resume isn't selected at this point).

Integrate closure pass in CI

Add a closure compiler pass as a CI task to at make sure the codebase stays compatible for future changes.

Wrong slide behavior

Consider for eg. if we are in step 3. Click the "Next step" icon. Now when you try to go to any previous step from the left panel you can note that the page slides from right which should have slided-in from the left side.

root directory

Is it possible to drop /codelab-components-master/ in to APACHE root directory and run EVERYTHING from there?
Your demo is looking for polymer components in a root directory but some of us prefer to keep all dependencies in a native /codelab-components-master/
I tried renaming links but gave up after a while.

Falta as constantes no codelab de poynt

private static final int AUTHORIZATION_CODE = 1993;

private static final int COLLECT_PAYMENT_REQUEST = 13132;

codelab.html tests are currently failing

This is due to a neon-animated-pages depe (iron-selectable-behavior) that updated in the last release to use Polymer's new observerNodes API instead of a MutationObserver. This shouldn't have broken us, but the commit removed the items getter, which gave a live query of the distributed nodes. We were using this.$.pages in google-codelab to set the steps. Unfortunately, the upstream removal + change means neon-animated-pages doesn't have a populated .items when google-codelab is attached to the done. The easiest solution is to introduce a new event google-codelab-ready that fires when neon-animated-pages gets it's .items.

PolymerElements/iron-selector@88658f2

Threshold of what tho?

Incident: Data egress rate over the network
https://console.cloud.google.com/monitoring/alerting/incidents/0.ng3oz9bytuyo