5 ms·

I'm the content lead for web.dev. Just wanted to give a quick shout out to the people who made this happen because it's not clear on the site. I think this is a

I'm the content lead for web.dev. Just wanted to give a quick shout out to the people who made this happen because it's not clear on the site. I think this is also useful information because you'll see that a lot of CSS experts we're involved in this project. Adam Argyle [1] and Una Kravets [2] created the podcast series. Una mainly drove the overall project to convert the podcasts into this written series. Adam provided technical reviews on the written content and I also believe he created most or all of the self-assessments (i.e. the 'check your understanding' quizzes). Andy Bell [3] wrote all of the content (and demos, I think). Rachel Andrew [4] edited all the content. Rob Dodson drove the engineering work behind creating this new "courses" infrastructure on web.dev. I was hands-off on this project so I may not have gotten everyone's roles exactly correct, but I do know these were the main people involved. [1] https://twitter.com/argyleink https://twitter.com/argyleink [2] https://twitter.com/Una https://twitter.com/Una [3] https://twitter.com/piccalilli_ https://twitter.com/piccalilli_ [4] https://twitter.com/rachelandrew https://twitter.com/rachelandrew [5] https://twitter.com/rob_dodson https://twitter.com/rob_dodson

deleted 5y ago
[deleted]
mkoryak 5y ago
You have a bug on the focus slides where the first few buttons are actaully links to //web.dev and when you click them in order to give them focus the whole codepen iframe navigates back to your site.
iamunr 5y ago
Thanks for sharing this!
astatine 5y ago
It is interesting that this uses a podcast + text rather than what would have been a more conventional video based tutorial. The use of a podcast for describing something so fundamentally visual as CSS looks really unusual. I just started going through and came back here to note that it somehow seems to work well!
- wilsonrocks 5y ago
  I've listened to some of the podcast and it is really good, even in the car where you're highly unlikely to have devtools open.
- suyash 5y ago
  Yes, I found that odd as well, no plan to listen to 15 min podcast on a web-page when Im just trying to quickly learn something I need to know to fix my code. Though overall the aesthetics of the site are nice, very clean look and nicely organized.
  - SirSourdough 5y ago
    Content designed to answer individual questions (eg StackOverflow) is often different in form than content designed to provide comprehensive education like college classes.
    - suyash 5y ago
      That's poor strategy when creating developer docs, no one wants to listen to a 15 min podcast when they come to a page to learn something or find an answer to their question. Most people on website are scanning for relevant information and they don't want to spend more time than needed, that is how good content should be presented.
      - lintroller 5y ago
        These are not developer docs first. There are plenty of wonderful other resources that serve as CSS dev docs as a primary resource.
      - antris 5y ago
        Are you not aware that just because a certain piece of content doesn't suit you at this moment, doesn't mean that the content is bad? In addition to yourself, there are other people in other situations who are looking for different kinds of content.
regus 5y ago
Hey Kayce! How come you no longer do the chrome dev tools update videos on YouTube?
- kaycebasques 5y ago
  I stopped doing DevTools docs/advocacy when I became documentation lead (content strategy + people management) for Chrome DevRel (the team behind web.dev, developer.chrome.com, Chrome Dev Summit, Workbox, and lots of other stuff) about 1.5 years ago.
Jemaclus 5y ago
Just as an FYI, I'm seeing a certificate error when loading web.dev. I'm on latest Chrome Version 90.0.4430.212 (Official Build) (x86_64) on Mac OS Big Sur Screenshot: https://d.pr/i/gvj3fA https://d.pr/i/gvj3fA I've been trying to visit web.dev for days for various reasons, but I just get this and neither Chrome nor Safari will let me visit. But apparently a bunch of you can see the page, so I'm confused as to why I seem to be the only one seeing this... but maybe you or someone there can help? Thanks.
- edoceo 5y ago
  Open that Advanced button to proceed, inspect the certificate (click the lock icon in URL bar)
  - deleted 5y ago
    [deleted]
- macintux 5y ago
  Very odd, I'm on the same release (Catalina) and no difficulties. The certificate is from Google Trust Services, which presumably Chrome should honor. Perhaps you have a proxy causing interference? As the sibling comment notes, looking at the certificate using Advanced may help clarify things. Update: here's the full chain that I see: web.dev, signed by GTS CA 1D2, with a root certificate of GlobalSign Root CA - R2.
  - Jemaclus 5y ago
    This is what I see: https://d.pr/i/8VY9As https://d.pr/i/8VY9As As far as I know, I have no proxies to interfere...
    - macintux 5y ago
      Apparently there's still more to see if you dig deeper, but I'm unfamiliar with Chrome's UI for invalid certificates. If you can open your terminal, this may be easier: % openssl s_client -connect web.dev:443 It will hang (I guess awaiting more commands) but you can use Control-C to kill the connection. The gist below has the first several lines showing what you should see. https://gist.github.com/macintux/68ab1317d4b7677951069baf95cdee4c https://gist.github.com/macintux/68ab1317d4b7677951069baf95c...
nonrecursive 5y ago
This is amazing. Did y'all use any kind of static site generator or documentation tool (e.g. Antora) or was it hand rolled?
- kaycebasques 5y ago
  All of web.dev is open source. Here's the directory [1] for the Learn CSS content. The site is all based on Eleventy [2]. I don't know if Rob (engineering lead [3]) and team did any funny stuff for the Learn CSS infrastructure in particular but you can ping him on Twitter for questions. [1] https://github.com/GoogleChrome/web.dev/tree/main/src/site/content/en/learn/css https://github.com/GoogleChrome/web.dev/tree/main/src/site/c... [2] https://www.11ty.dev/ https://www.11ty.dev/ [3] https://twitter.com/rob_dodson https://twitter.com/rob_dodson
  - nonrecursive 5y ago
    Thank you very much!
cuddlecake 5y ago
Una and her content are great. Checked out the first two chapters on this resource and immediately recommended it to my colleagues as well.

deleted 5y ago

[deleted]

mkoryak 5y ago

You have a bug on the focus slides where the first few buttons are actaully links to //web.dev and when you click them in order to give them focus the whole codepen iframe navigates back to your site.

iamunr 5y ago

Thanks for sharing this!

astatine 5y ago

It is interesting that this uses a podcast + text rather than what would have been a more conventional video based tutorial. The use of a podcast for describing something so fundamentally visual as CSS looks really unusual. I just started going through and came back here to note that it somehow seems to work well!

wilsonrocks 5y ago
I've listened to some of the podcast and it is really good, even in the car where you're highly unlikely to have devtools open.
suyash 5y ago
Yes, I found that odd as well, no plan to listen to 15 min podcast on a web-page when Im just trying to quickly learn something I need to know to fix my code. Though overall the aesthetics of the site are nice, very clean look and nicely organized.
- SirSourdough 5y ago
  Content designed to answer individual questions (eg StackOverflow) is often different in form than content designed to provide comprehensive education like college classes.
  - suyash 5y ago
    That's poor strategy when creating developer docs, no one wants to listen to a 15 min podcast when they come to a page to learn something or find an answer to their question. Most people on website are scanning for relevant information and they don't want to spend more time than needed, that is how good content should be presented.
    - lintroller 5y ago
      These are not developer docs first. There are plenty of wonderful other resources that serve as CSS dev docs as a primary resource.
    - antris 5y ago
      Are you not aware that just because a certain piece of content doesn't suit you at this moment, doesn't mean that the content is bad? In addition to yourself, there are other people in other situations who are looking for different kinds of content.

regus 5y ago

Hey Kayce! How come you no longer do the chrome dev tools update videos on YouTube?

kaycebasques 5y ago
I stopped doing DevTools docs/advocacy when I became documentation lead (content strategy + people management) for Chrome DevRel (the team behind web.dev, developer.chrome.com, Chrome Dev Summit, Workbox, and lots of other stuff) about 1.5 years ago.

Jemaclus 5y ago

Just as an FYI, I'm seeing a certificate error when loading web.dev. I'm on latest Chrome Version 90.0.4430.212 (Official Build) (x86_64) on Mac OS Big Sur Screenshot: https://d.pr/i/gvj3fA https://d.pr/i/gvj3fA I've been trying to visit web.dev for days for various reasons, but I just get this and neither Chrome nor Safari will let me visit. But apparently a bunch of you can see the page, so I'm confused as to why I seem to be the only one seeing this... but maybe you or someone there can help? Thanks.

edoceo 5y ago
Open that Advanced button to proceed, inspect the certificate (click the lock icon in URL bar)
- deleted 5y ago
  [deleted]
macintux 5y ago
Very odd, I'm on the same release (Catalina) and no difficulties. The certificate is from Google Trust Services, which presumably Chrome should honor. Perhaps you have a proxy causing interference? As the sibling comment notes, looking at the certificate using Advanced may help clarify things. Update: here's the full chain that I see: web.dev, signed by GTS CA 1D2, with a root certificate of GlobalSign Root CA - R2.
- Jemaclus 5y ago
  This is what I see: https://d.pr/i/8VY9As https://d.pr/i/8VY9As As far as I know, I have no proxies to interfere...
  - macintux 5y ago
    Apparently there's still more to see if you dig deeper, but I'm unfamiliar with Chrome's UI for invalid certificates. If you can open your terminal, this may be easier: % openssl s_client -connect web.dev:443 It will hang (I guess awaiting more commands) but you can use Control-C to kill the connection. The gist below has the first several lines showing what you should see. https://gist.github.com/macintux/68ab1317d4b7677951069baf95cdee4c https://gist.github.com/macintux/68ab1317d4b7677951069baf95c...

nonrecursive 5y ago

This is amazing. Did y'all use any kind of static site generator or documentation tool (e.g. Antora) or was it hand rolled?

kaycebasques 5y ago
All of web.dev is open source. Here's the directory [1] for the Learn CSS content. The site is all based on Eleventy [2]. I don't know if Rob (engineering lead [3]) and team did any funny stuff for the Learn CSS infrastructure in particular but you can ping him on Twitter for questions. [1] https://github.com/GoogleChrome/web.dev/tree/main/src/site/content/en/learn/css https://github.com/GoogleChrome/web.dev/tree/main/src/site/c... [2] https://www.11ty.dev/ https://www.11ty.dev/ [3] https://twitter.com/rob_dodson https://twitter.com/rob_dodson
- nonrecursive 5y ago
  Thank you very much!

cuddlecake 5y ago

Una and her content are great. Checked out the first two chapters on this resource and immediately recommended it to my colleagues as well.