3 ms·

The mobile version of this site is seriously crippled; it doesn't allow filtering and runs pretty janky. Whenever you scroll it activates the ripple animation f

The mobile version of this site is seriously crippled; it doesn't allow filtering and runs pretty janky. Whenever you scroll it activates the ripple animation for one of the cards, which is very annoying. On desktop... It's also very bad. Has it seriously gotten this bad at Google? Maybe I should call for an interview. If you're going to hijack navigation, at least get it right. Most modern web browsers have tabs, allowing you to keep multiple links open at the same time. A common usage pattern is to browse a large collection and open the links of interest in tabs, in order to work your way through them later. If you have a mouse with a scroll wheel, you'll usually use the middle button to open links in a new tab. However, if you have a trackpad you'll use cmd+click on macOS or ctrl+click on Windows and GNU/Linux to open links in a new tab. This is the default behavior and it works perfectly out of the box. The navigation issue is easily resolved by opening the console and replacing the navigate function. Setting it to an empty function does the trick: app.navigate = () => {}. The annoying ripple animation can be removed with CSS: var style = document.createElement('style'); style.type='text/css'; style.appendChild(document.createTextNode('paper-ripple { display: none; }')); document.body.appendChild(style); Another bug: in the tutorials, navigating to a different step preserves your scroll position instead of resetting to the top as expected. Their WebAssembly Physics and DOM objects tutorial [0] is worth checking out if you wanna see a quick example of WASM in action. [0] https://codelabs.developers.google.com/codelabs/hour-chipmunk/index.html https://codelabs.developers.google.com/codelabs/hour-chipmun...

4x3l 8y ago
Thanks for the feedback! I dislike the ripple animations, too. This is coming from Material design implementation in Polymer components 1.0. Hijacking navigation wasn't very nice either, absolutely agree. Too bad we didn't have time to drop it. All of this is going to be replaced soon. Codelabs site is moving away from Polymer. Working on the new implementation in https://github.com/googlecodelabs/codelab-elements https://github.com/googlecodelabs/codelab-elements. Contributions are most welcome, of course.
candiodari 8y ago
Sadlly even this monstruosity is way better than the google I/O website itself. When push comes to shove ... it's a list of videos, and perhaps a schedule. There's a big bar at the top with the title. Then a tiny bar with the videos, and then a solid 2/3 of the height dedicated to the "feed". I mean come on. It doesn't take resolutions into account at all. At 1366x768 (apparently the most common web resolution) you can only see the title bar, "day 1" "day 2" "day 3" (clicking on them, of course, does not bring anything into view, you have to click, realize that it's not a link but a single page app, and then scroll to get it in the middle of the screen) and the text "highlights". Other than that, useless marketing picture/backgrounds and "design", which apparently means whitespace. The schedule, the other main reason people would visit that site, cannot be seen on the main page with my browser at 4k (!). Although of course the only things resizing are the marketing picture that is the "title bar" of the page and the 2 links at the bottom. Is this supposed to be good web design ? Because I actually find the youtube videos listing, which is designed explicitly to distract you away from the videos more usable than the I/O website. "Make information universally accessible and usable", indeed, except of course when marketing prefers pretty pictures that half of the web has grown completely allergic to. I mean, the pictures are not as repulsive as most business websites, but ...

4x3l 8y ago

Thanks for the feedback! I dislike the ripple animations, too. This is coming from Material design implementation in Polymer components 1.0. Hijacking navigation wasn't very nice either, absolutely agree. Too bad we didn't have time to drop it. All of this is going to be replaced soon. Codelabs site is moving away from Polymer. Working on the new implementation in https://github.com/googlecodelabs/codelab-elements https://github.com/googlecodelabs/codelab-elements. Contributions are most welcome, of course.

candiodari 8y ago

Sadlly even this monstruosity is way better than the google I/O website itself. When push comes to shove ... it's a list of videos, and perhaps a schedule. There's a big bar at the top with the title. Then a tiny bar with the videos, and then a solid 2/3 of the height dedicated to the "feed". I mean come on. It doesn't take resolutions into account at all. At 1366x768 (apparently the most common web resolution) you can only see the title bar, "day 1" "day 2" "day 3" (clicking on them, of course, does not bring anything into view, you have to click, realize that it's not a link but a single page app, and then scroll to get it in the middle of the screen) and the text "highlights". Other than that, useless marketing picture/backgrounds and "design", which apparently means whitespace. The schedule, the other main reason people would visit that site, cannot be seen on the main page with my browser at 4k (!). Although of course the only things resizing are the marketing picture that is the "title bar" of the page and the 2 links at the bottom. Is this supposed to be good web design ? Because I actually find the youtube videos listing, which is designed explicitly to distract you away from the videos more usable than the I/O website. "Make information universally accessible and usable", indeed, except of course when marketing prefers pretty pictures that half of the web has grown completely allergic to. I mean, the pictures are not as repulsive as most business websites, but ...