
Web Fundamentals - olalonde
https://developers.google.com/web/fundamentals/
======
kinlan
Owner of the site here:

We do need to update the landing page, we've gone through many updates over
the two years that this site has been out and I think this page doesn't
explain what Web Fundamentals site is.

Our goal with this section is to explain the fundamentals of web development
from the platform upwards with opinionated best practice guidance.

We are constantly adding new content for new areas of the web (like push
notifications) and refactoring guidance as we learn more of how this is used
in production (things change, but we base the initial guidance off how we have
used it).

~~~
austincheney
The site is called "web fundamentals" and looks to be educational.
Unfortunately, it is severely flawed due to a bias. The site is immediately
and inherently skewed towards interaction and programming. This mistake
(though incredibly common) is really really bad.

At the core to have the web all you need is two things: an application
protocol and a document structure format. The public web standardizes on HTTP
and HTML for those two qualities. This site does not address these two most
primary qualities explicitly. The implicit assumption is that these qualities
are not themselves important and instead necessary trivialities who technical
qualities can be indirectly surmised through study of more interesting
derivative works. This is a big mistake that makes learning these technologies
far hard than it really needs to be. Don't assume the technologies are simple
or that people will just get it right, because they won't.

If I were teaching a class on web fundamentals I would start with XML Schema.
Don't laugh, I am being serious, just hear me out. Learning XML Schema is
important because it forces the student to learn the importance of structure
and design in the crafting of human consumable information, which is really
what the web is all about. It also teaches the student about node types and
node relationships that is directly reflected in the standard DOM methods.
Equally important it also teaches the student about application scope.

XML Schema (and thus XML and HTML) features lexical scope for its scope model
in exactly the same way that JavaScript does. I cannot express enough just how
important this single quality is to understanding JavaScript. For people
coming from languages like C#/C++/Java this really seems to be the most
challenging experience to wrap their heads around, but it is absolutely
essential to understanding that language.

After XML Schema I would teach the DOM. I would teach this even before
teaching anything about JavaScript. Understanding the DOM from a high level is
a conversation of relationships and abstract modeling more than programming.
Many web developers never get this and they forever suck as a result. This
subject is so much easier to understand when separated from writing methods in
a programming language and then so much easier to apply once the student gets
to the programming part.

None of these principle standard technologies are hard to learn. They just
need to be taught in the right order and expressed through practice. Security
standards are hard, but web standards are easy. Yet, most developers I have
ever known always fail on the easy stuff. If you, as a potential educator,
aren't taking these technologies seriously then neither will your prospective
students.

~~~
cageface
You can't be serious. You expect beginning students of the web to start with
XML Schema? Have you ever taught beginners in technology?

~~~
austincheney
How would you start?

~~~
rpedela
I would just start with HTML basics so they could build something "cool" right
away. Part of a beginner class is getting them interested in the topic and
showing them why it is important. Starting with one of the most boring topics
is a bad way to do that.

------
iLoch
"Web fundamentals", headlined by Web Push Notifications. Good to know where
Google's head is at.

~~~
mawburn
Yeah, it's a little weird and out of place. I thought it was a page about PWA
Fundamentals.

You'd figure they would start off with an opening statement of what "Web
Fundamentals" means exactly, instead of some random feature.

~~~
kinlan
We are constantly updating the site (it's been live for two years now), and
that was one of the newest areas that has come through.

We manage all of this on github
([https://github.com/Google/WebFundamentals](https://github.com/Google/WebFundamentals))
and love getting feedback on what we need to improve!

~~~
SiVal
"Fundamentals" does not mean "the newest thing that has come through". It
means almost the opposite.

It's your site, but if I meant fundamentals, I would call it fundamentals and
start with fundamentals: HTML and CSS. If I meant building on the
fundamentals, I would write about the standard uses of JavaScript to bring
HTML and CSS to life. If I meant "newest things", I would call it a blog and
talk about the newest things: recently implemented and incompletely supported
APIs, such as notifications. Some of the newest things are very interesting as
what they are: new things.

Maybe I'm missing something, but I don't see any reason to label a site "web
fundamentals" and lead with something that has never been fundamental to the
Web unless the agenda of "web fundamentals" is something other than teaching
web fundamentals.

~~~
kinlan
It's a good point. We chose to aim this at already practicing web developers
and show them the best practice. There are already great HTML, CSS and JS
resources over on MDN and we had no intention of competing with them.

The home page needs some work, clearly and we can sort that.

------
ffwacom
"Web push notifications allow users to opt-in to timely updates from sites
they love and allow you to effectively re-engage them with customized,
relevant content."

Christ, opting into these things has always been a mistake for me.

------
ssn
Missing: "managing web projects".

Anybody has a good reference on this? Including managing teams from different
backgrounds and details on documentation and artifacts that support web
projects?

~~~
kinlan
Heh, I actually wanted to include something like this in the original site.
The very first version of the site we had a massive IA planning doc and guide,
style-guides, mocks, prototypes, user-stories and user-profiles (the type of
developers we wanted to write for). I've still got all the information.

I don't think we will end up getting this on to our site right now, but I
would love to see it.

Edit: Spelling.

~~~
mhoad
Any chance at all of getting that out "unofficially"? I would love to see that
and I think a lot of us would get a huge amount of value from that.

~~~
kinlan
Let me try somethings...

------
ucarion
In case someone reading this can fix it, there's a typo:

> App install banners make it easy for users to add your app to their home
> screen with a single click, and is an indication to the user that the app
> their adding, meets an important quality bar.

"their" should be "they're", and there shouldn't be a comma after "adding", I
think.

~~~
ebbv
Specifically the second "their".

------
wyck
Web Push Notifications are Google Fundamentals when using Firebase. A more
appropriate title.

~~~
kinlan
We are not saying to use Firebase although there is a firebase JS lib. If you
use Chrome on Android it connects to FCM (which is backed by firebase product
but it's not the same, it was called Google Cloud Messaging), if you Mozilla
it connects to their push service. That's the way the spec works, the browser
controls what push service you connect to.

~~~
kinlan
To be clear our guidance is to follow the spec.

------
wnevets
I just wanted to say I enjoy the video series on that page, Totally Tooling
Tips.

------
JustSomeNobody
You people complaining this isn't about fundamentals have your priorities
skewed. The web today is all about selling things and web developers finding
their next gig.

Those are the only fundamentals the web cares about today.

------
divbit
Might want to debug that in safari...

~~~
divbit
Wait - looks the same in firefox, maybe just my internet sorry :)

~~~
divbit
eh, loads perfect in chrome, but this is what I'm seeing in safari / firefox:
[http://imgur.com/a/reN2K](http://imgur.com/a/reN2K)

~~~
divbit
That said, thanks for the site, looks like something I probably need to read
:)

