4 ms·

Google I/O 2018 codelabs

110 points by marcacohen 8y ago

TheAceOfHearts 8y ago
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 ...
mathnode 8y ago
It feels so inhuman. Like everything google, there are no names, no faces, no citations. Just walls of information and puzzles. Khanacademy has gone a similar direction; they have removed the human element from learning and are not hiding that fact. Even scam emails at least try to pretend they are genuinely sent from humans. My favourites are still coursera and MIT OCW. They may not be the most perfect web technologies, but the landing pages right now contain people, faces, names, places and history. I think this is the dystopian model of learning. We are faceless droids to them completing emotionless tasks. And to what end? So that one day a future generation might be able to qualify for a job that the AI is not capable of doing? If my grandchildren solve enough puzzles in the VR-web-o-sphere they will qualify to be blessed by, The Google. THE Google!
- some_account 8y ago
  I prefer this to marketing faces. Marketing faces are random actors and models, not having anything to do with the product, so it's a dishonest relationship from the start. It's designed to manipulate you into thinking the product is more genuine and is used by people you can look up to, and thats why you miss it now. You miss being manipulated. A colleague of mine is bashing open source a lot because it sometimes has humor, like 'ooops a funny thing happened' or 'taking the poison pill' instead of 'We apologize for this error, please contact customer support bla bla'. The windows attitude is also 'sit back, we are taking care of you' while the Linux experience is more genuine, less polished.
  - marcacohen 8y ago
    The lack of a human touch on this site is simply a function of our priorities. This site was developed by volunteers, in the proverbial Google 20% style, and we've put very little effort into marketing. Admittedly, it could stand a bit more warmth, but, for better or worse, we've always put our focus on the content -- giving developers a fast track to building something fun.
    - prepend 8y ago
      Take a look at the open source projects parent mentions. Do you think they are putting their focus on marketing over content? OSS sites are made by real volunteers. While this project is neat and is a side project, all the contributors are paid by Google, right? So it’s perhaps possible to get 21% time. Or convince someone with some empathy to volunteer as well. The problem has been solved by many community driven projects. Apache has amazing content as well as a “human” touch. This site demonstrates that someone put some effort into the design, so perhaps the easy solution is to spend even more time on marketing and skip the design-o-tron.
hdlothia 8y ago
Interesting that I couldn't find any golang content

110 points by marcacohen 8y ago

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 ...

mathnode 8y ago

It feels so inhuman. Like everything google, there are no names, no faces, no citations. Just walls of information and puzzles. Khanacademy has gone a similar direction; they have removed the human element from learning and are not hiding that fact. Even scam emails at least try to pretend they are genuinely sent from humans. My favourites are still coursera and MIT OCW. They may not be the most perfect web technologies, but the landing pages right now contain people, faces, names, places and history. I think this is the dystopian model of learning. We are faceless droids to them completing emotionless tasks. And to what end? So that one day a future generation might be able to qualify for a job that the AI is not capable of doing? If my grandchildren solve enough puzzles in the VR-web-o-sphere they will qualify to be blessed by, The Google. THE Google!

some_account 8y ago
I prefer this to marketing faces. Marketing faces are random actors and models, not having anything to do with the product, so it's a dishonest relationship from the start. It's designed to manipulate you into thinking the product is more genuine and is used by people you can look up to, and thats why you miss it now. You miss being manipulated. A colleague of mine is bashing open source a lot because it sometimes has humor, like 'ooops a funny thing happened' or 'taking the poison pill' instead of 'We apologize for this error, please contact customer support bla bla'. The windows attitude is also 'sit back, we are taking care of you' while the Linux experience is more genuine, less polished.
- marcacohen 8y ago
  The lack of a human touch on this site is simply a function of our priorities. This site was developed by volunteers, in the proverbial Google 20% style, and we've put very little effort into marketing. Admittedly, it could stand a bit more warmth, but, for better or worse, we've always put our focus on the content -- giving developers a fast track to building something fun.
  - prepend 8y ago
    Take a look at the open source projects parent mentions. Do you think they are putting their focus on marketing over content? OSS sites are made by real volunteers. While this project is neat and is a side project, all the contributors are paid by Google, right? So it’s perhaps possible to get 21% time. Or convince someone with some empathy to volunteer as well. The problem has been solved by many community driven projects. Apache has amazing content as well as a “human” touch. This site demonstrates that someone put some effort into the design, so perhaps the easy solution is to spend even more time on marketing and skip the design-o-tron.

hdlothia 8y ago

Interesting that I couldn't find any golang content