h5bp / html5-boilerplate Goto Github PK

I'm not genius when it comes to apache config but the two instances of

...

are throwing errors.

We need to revise that.

http://www.phpied.com/conditional-comments-block-downloads/

Suggested soln is:

<!--[if lte IE 7]>
 <link type="text/css" rel="stylesheet"
      href="http://tools.w3clubs.com/pagr/2.expires.css">
<![endif]-->
<!--[if gt IE 7]><!-->
 <link type="text/css" rel="stylesheet"
      href="http://tools.w3clubs.com/pagr/1.expires.css">
<!--<![endif]-->

i'm not sure on the best way to serve this..

from:
http://www.cssquirrel.com/presentations/refresh-2009-12/

<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-device-width: 480px)" type="text/css" />
(Since the iPhone Thinks It's a Big Boy)


<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
(To Help An Anonymous Quirky Browser So It Won't Think It's Mobile)


<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
<meta name="viewport" content="width = 320" />
(So The iPhone Won't Be Zoomed Out)


Here's A Solution
<link rel="stylesheet" href="standard.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
(Option To Override With JS-Powered Switch)
(Save It With A Cookie)

Talking to some folks, I come to realize the templates definitely could use some documentation.
I'm going to just keep updating the content of this ticket, if anyone has anything to add, comment.

• What is htaccess and what does it do?
• What is Modernizr and what does it do?
• What do I have to do when I updated my images, css, or js?
  • If you're not using the apache .htaccess, you're fine. Otherwise.. there is fairly moderate caching on the static assets so users don't redownload them every pageload. As a result, you'll have to increment the ?v=1 to 2 and beyond each time you push the changes live to your host. (This will be addressed automatically in the future with a build script)
• What's going on in plugins.js?
  ** Hypothetically you'd put your jquery plugins inside of the (function($){ ... })(jQuery) block. This is good incase the plugin developers didn't write their plugins well.

from http://www.sergeychernyshev.com/blog/speed-up-your-site-drop-in-htaccess-file/

Right now on the site http://html5boilerplate.com - the entire htaccess section is pretty ugly looking. This is because there is no "brush" for the syntax highlighter script we're using.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

It would be pimp to have a real brush so the section would come off looking pretty good.

Anyone would regex smarts could tackle this in an hour or so.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/custom.html

http://www.slideshare.net/davidyeiser/once-source-to-rule-them-all

jquery-1.2.6.js is obsolete.

http://www.paulrhayes.com/2010-08/useful-css-snippets/

via kroc camen

"looking at http://html5boilerplate.com deflating svgz files seems a bit wasteful to me, svgz is meant to be gzip-compressed already"

via: http://twitter.com/erikdahlstrom/status/20818554822

Since you are using such far-future expires headers for caching in the .htaccess file should you not be using a format to version your css and javascript files.

Such as the "script.js?v=1.0" or similar example in the .htaccess file

freestylehtml
thestartingtemplate
sensible markup
the markup zygote
website embryo

"an un-framework"

http://delicious.com/paul.irish/aria

css: http://camendesign.com/design/
htaccess: http://camendesign.com/.htaccess

both are incredible.

The first paragraph doesn't wrap it just keeps going off to right.

I'll add more when I look at the code tomorrow.

button::-moz-focus-inner {border: none; /* overrides extra padding in Firefox */}

via: http://twitter.com/tedgoas/status/20820324262

should it be referenced in robots.txt ?

or just prevent a 404 and have guides on how to use it.

(I have revised this ticket summary after the issue has been fixed for clarity)

• Scott jehl was concerned with maximum scale = 1
• @riddle posted a few concerns as well.. "No scaling, no text adjustment?"

After discussions with Matt Henry, a front-end dev mobile expert, recently from Yahoo!, now at Viget...
We concluded to drop maximum-scale=1 and leave text-size-adjust commented out by default.

max-scale doesnt let the user zoom in as they please. However it prevents some weird layout shifting when a device is changed from portrait to landscape. It doesn't seem like a good default.

initial-scale remains 1. It's default is 'auto' and I have no understanding why a mobile browser would set it to anything other than 1, but it's explicitly set for now..

Also.. worth watching http://people.opera.com/rune/TR/css-viewport/ (though it's unimplemented anywhere so far)

are there any guidelines we can add to the default?
or guidance?

http://sandbox.thewikies.com/html5-layout/

via: http://twitter.com/3rdEden/status/20820800535

Confirmed!

DONE:

• header/footer elements.
• clarify license
• contributors section (and inspired by ish) - we'll include html5reset
• rename github repo

TODO:

• create non-documented release zip
• name that non-documented release.. (ideas?)
• write post
• contact homies

from peter @riddle:

pre, code, kbd, samp { font-family: monospace, sans-serif; }

re: http://html5boilerplate.com/#comment-67856913

Add WebM to the .htaccess file:
AddType video/webm webm

thx Kenneth D. Nordahl

"@paul_irish docwrite will throw because the this argument is incorrect. testcase http://bit.ly/d0ZGca #html5boilerplate"

via http://twitter.com/fearphage/status/20818399005

that sucks...

It's awesome you've added a fallback jQuery in case Google’s CDN goes down. Currently, you're using the following code:

<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.2.min.js"%3E%3C/script%3E'))</script>

You might be able to save a few precious milliseconds by getting rid of the unescape() call and using string literal escapes (\xNN) instead.

<script>!window.jQuery && document.write('\x3Cscript src="js/jquery-1.4.2.min.js"\x3E\x3C/script\x3E')</script>

Notes on Paul Irish's starter template.

Mike Taylor
11/08/2009

• meta name=keywords? I'm no SEO wizard, but I tend to still use this guy in conjunction with meta name=description.
• using HTML5 doctype and a html5 shiv script for IE, yet <div id=header>, <div id=footer>.
  Why not <header> & <footer>? Although I can understand if you don't want to force people to go server-side to fix FF2.
• How is<html lang=en> different from <meta http-equiv="content-language" content="en">? There might be something I'm not aware of here.
• In html5, <script type> defaults to text/javascript if not present. So, you can leave it out if you want to live in the future. I don't know if there are any real-world consequences to doing so today.

http://www.whatwg.org/specs/web-apps/current-work/#script
'(The default, which is used if the attribute is absent, is "text/javascript".)'

• Remy's html5 enabling script is a little out of date--<dialog> is no longer in the spec, nor is <eventsource>. (There are naturally more new elements in the spec, but I can't imagine you'd try to style a element, for example.)
• In script.js small typo:

//common domready code => common domready code

• In script.js FOO.config and FOO.strings could use some simple explanatory comments to explain why they're in there.
• In reset.css:
  • dialog can be removed from lines 21 and 36.
  • Line 32 of the html5 reset stylesheet (body{line-height:1} is essentially getting overwritten by line 109 (yui's body * {line-height:1.22em}, right? Or would there be some meaningful reason to have body at 1 but all of body's descendants at 1.22em? If not, 32 could be removed.
  • Shouldn't line 121 also include .ie6? i.e., .ie6 img, .ie7 img {-ms-interpol...;}
  • A few missing ending semi-colons: line 129, 140, 151, 152
  • If you were crazy like i am, you could change line 144 -> color: #003366 -> color: #36.

via aaron peters at http://html5boilerplate.com/#comment-67835184

You can further improve browser and proxy caching, and thus page performance:

1. To ensure proxy caching of CSS and JS files, ensure you send the Vary: Accept-Encoding response header as well (not just the Cache-control: public header), if you send them Gzipped.

http://code.google.com/speed/page-speed/docs/caching.html#LeverageProxyCaching

2. Send the Last-Modified header, to enable browser to make conditional requests and enable the server to send a (small, fast) 304 response.
   Set the Last-Modified date to the last time the resource was changed.

http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCaching

The project site is rendering quite poorly in IE6, running on Windows XP in a VMware Fusion image.

htaccess config port by voodootikigod: https://gist.github.com/225907185304dba63f38

validator.w3.org complains about several errors.

anything i can do for that?

(basically links to other techniques that are really good, but probably overboard for what should be an empty template without a lot of opinionated architecture.)

• http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

... to be continued.

• js/css concat and minification
• html minification
• filename revving for far-future expries.
• image optimization (jpegtran, pngcrush, etc)

others: http://daverupert.com/2010/06/web-performant-wordpress/

I'm unsure on how this could be added to the project in a general way.. something php/ruby/py/html folks could all use it.

From Comment on html5boilerplate.com: http://html5boilerplate.com/#comment-67622441

Key Points:

In general Arial is a better screen font than Helvetica being developed for the screen in the first place. More pressing problem is that Helvetica on Windows does not render well at all and you don't want to ignore the majority of your audience ;) - http://html5boilerplate.com/#comment-67626905

This is very true - Helvetica on Windows looks awful. But can't this be solved by simply using sans-serif as the first font-face? I'm pretty sure that will default to Helvetica on Macs and Arial on Windows. - http://html5boilerplate.com/#comment-67654932

these 2 comments cause err500 (for me at least)

ExpiresByType image/vnd.microsoft.icon "access plus 1 week" #favicon.ico

and

FileETag Size #can this be moved outside of the Location block?

placing the comments on separate lines solves the issue

http://github.com/chrislloyd/tyrone
and 52framework guy

My bet is a default would help people change it to something more fitting, than if it stays blank.

Suggestions on the favicon? http://miketaylr.com/favicon.ico is a personal favorite.

• yes it works with a grid: 960 or what-have-you
• css3pie? mmmaybe..
• omg css3please!

any other recommendations for additions for the boilerplate or Next Steps part should go here:

This is not really an issue but based on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/#comment-33260 would be nice to change the IE conditional classes to html tag.

As said, that will not block the download and save some bytes from the empty conditional comment at http://github.com/paulirish/html5-boilerplate/blob/master/index.html#L7

Thanks for your time!

Why are "article" and "section" tags not used but "div" tags with id "container" and "main" ?

From Enrique Ramirez http://html5boilerplate.com/#comment-68239665

"Reducing font size to 80% on ALL elements is, again, a really bad idea. This should be body {font-size: 80%}."

Why not use the latest version?

from patrick lauke, who did the research:

@paul_irish @jared_w_smith i'd actually remove a:focus { outline: thin dotted; } as you're not suppressing it for generic a

@paul_irish @jared_w_smith and replace a:active { outline: none; } with a:hover, a:active { outline: none; } perhaps?

I'm getting an error in IE6, running on Windows XP in a VMware Fusion image, when I visit http://html5boilerplate.com.

based on Chris Dary's comments: http://html5boilerplate.com/#comment-68227405

He also recommends IncludesNOEXEC:
http://httpd.apache.org/docs/2.0/misc/security_tips.html#ssi

I think it'd be fine to disable by default. It's a more pro-level feature you should have to opt-in to, I think.

Enjoy.

via labjs or require.

my "boilerplate" load.js file has LABjs inlined in it, and then uses it to load jquery, GA, and one site js file. if it helps, I have an integrated RequireJS+jQuery in one file: http://bit.ly/dAiqEG ;)

also how does this play into the expectation of a build script that concatenates and minifies all script? should script loading be an option?

From Kroc Camen:
http://camendesign.com/code/developpeurs_sans_frontieres

This might have to end up in a piece of documentation if I can't find a way to work it into the source or "make it better" section.