Giter VIP home page Giter VIP logo

webfundamentals's Introduction

webfundamentals's People

Contributors

addyosmani avatar agektmr avatar beaufortfrancois avatar chenxsan avatar dandv avatar dgash avatar ebidel avatar ianbarber avatar igrigorik avatar jakearchibald avatar jecfish avatar jeffposnick avatar joshua1988 avatar jpmedley avatar kaycebasques avatar kyarik avatar limhenry avatar lucab85 avatar mathiasbynens avatar meggin avatar paulkinlan avatar paullewis avatar pbakaus avatar petele avatar philipwalton avatar robdodson avatar rottina avatar samdutton avatar surma avatar wibblymat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webfundamentals's Issues

980px

In rwd-fundamentals the paragraph reads:

"In order to attempt to provide the best experience, mobile browsers will render the page at a desktop screen width (usually about 960px), "...

Actually, it's exactly 980px on just about every smartphone with a WebKit based browser (aka most of them), and 1024px on IE mobile and Blackberry. See http://www.quirksmode.org/mobile/metaviewport/

iPhone iPad Android Samsung Android HTC Chrome Opera Presto Kindle Fire BlackBerry IE
980 980 980 980 980 980 980 1024 1024

It's a small, but important detail.

Resources is unclear

The text says "Follow these guides and build web content users can access on any device they choose."

Are the blocks really guides? Isn't "Follow these guides and build web content users can access on any device they choose." the general advice for the content under "Documentation" ?

Couple notes on the responsive images section

Just had a few quick notes on https://developers.google.com/web/fundamentals/documentation/introduction-to-media/images/index#responsive-images, having written up the “responsive images problem” like a thousand times now.

An image that is 50% width may work just fine when the browser is 800px wide, but will use too much real estate on a narrow phone.

This kind of implies the “big enough for wide-screen layouts will be too big for small screens” problem, but it might be worth adding something to the tune of “an image large enough to be appropriate for a wide-screen layout comes with all the same bandwidth overhead when scaled down to suit a small-screen layout.”

Also, might be worth mentioning the upcoming picture element in the content images section?

https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/vuLeAM9fJww/UHnMz7QLRWgJ
http://picture.responsiveimages.org

Great stuff, guys—looking forward to reading through everything!

Advise users never to use device-width media queries

"
A note on min-device-width
In addition to *-width, it is also possible to create queries based on *-device-width; the difference is subtle but very important. min-width is based on the size of the browser window, where as min-device-width is based on the size of the screen.
"

Much worse, actually. In some browsers, including Android WebKit, it's the screen size in device pixels. In other browsers, including Chrome, it's the size of the ideal viewport (the one you get with width=device-width). So you'll never know what you'll get.

See also http://www.quirksmode.org/blog/archives/2013/11/screenwidth_is.html , which is about screen.width/height, but device-width/height is ALWAYS, in all 50 browsers I tested, equal to screen.width/height, so the conclusions are valid in this case as well.

Advise users NEVER to use device-width/height.

Sub-optimal clientX/Y example script

https://developers.google.com/web/fundamentals/documentation/user-input/touch-input/touchevents/index
"
if (window.navigator.msPointerEnabled) {
point.x = evt.clientX;
point.y = evt.clientY;
} else if (evt.targetTouches && evt.targetTouches.length > 0) {
point.x = evt.targetTouches[0].clientX;
point.y = evt.targetTouches[0].clientY;
}
"

Detecting MSPointers is not necessary here. I do the following, because your example doesn't work with the mouse, and mine does. Also, checking if changedTouches has a length is unnecessary since it will always have a member if a touch event just fired. (OK, the length won't hurt, either)

if (evt.changedTouches) { // touch events
point.x = evt.changedTouches[0].clientX;
point.y = evt.changedTouches[0].clientY;
} else { // pointer and mouse events
point.x = evt.clientX;
point.y = evt.clientY;
}

Dead space in article links

screen shot 2014-05-01 at 1 25 03 am
Padding on ::before pseudo-element seems to be creating unclickable dead space in the links. Tested briefly on Chrome and FF (Mac) latest without padding and it doesn't seem to be required here.

Issue in: /documentation/multi-device-layouts/index.html

On this page at /html/body/div[2]/div[2]/div/ol/li[3]/p the word integration should be integrate.

<p class="g-wide--push-1 g-wide--pull-1">Learn how to integration navigation patterns into your site and get users to complete the actions you want them to.</p>

Make links to content more visible on the home page

Much of the interesting information on the home page is below, and it's not obvious that there's a fold :(. The end result is page that appears, at least initially, to have much less content than it does.

Possibly better to use changedTouches than targetTouches

The preference for targetTouches is not explained anywhere, and I think changedTouches is preferable because it will also work ontouchend, when touches and targetTouches are empty. This is especially important for scripts like drag and drop where the touchend event contains important information. As far as I know there is no drawback to using changedTouches as long as you're working with one touch at the time.

Icons don't render in Firefox on Mac

The icons under "Get Started" and inside the four colored circles on the homepage don't render in Firefox 29 on Mac OS X 10.9.2.

screen shot 2014-04-30 at 4 21 32 pm

The icons load fine on Safari and Chrome on the same system. Happy to do any other debugging as requested.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.