h5bp / html5-boilerplate Goto Github PK
View Code? Open in Web Editor NEWA professional front-end template for building fast, robust, and adaptable web apps or sites.
Home Page: https://html5boilerplate.com/
License: MIT License
A professional front-end template for building fast, robust, and adaptable web apps or sites.
Home Page: https://html5boilerplate.com/
License: MIT License
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.
(function($){ ... })(jQuery)
block. This is good incase the plugin developers didn't write their plugins well.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?
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%}."
(I have revised this ticket summary after the issue has been fixed for clarity)
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)
anything i can do for that?
Why not use the latest version?
from peter @riddle:
pre, code, kbd, samp { font-family: monospace, sans-serif; }
Why are "article" and "section" tags not used but "div" tags with id "container" and "main" ?
are there any guidelines we can add to the default?
or guidance?
http://github.com/chrislloyd/tyrone
and 52framework guy
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.
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.
any other recommendations for additions for the boilerplate or Next Steps part should go here:
via aaron peters at http://html5boilerplate.com/#comment-67835184
You can further improve browser and proxy caching, and thus page performance:
http://code.google.com/speed/page-speed/docs/caching.html#LeverageProxyCaching
http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCaching
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.
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
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
The project site is rendering quite poorly in IE6, running on Windows XP in a VMware Fusion image.
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.
button::-moz-focus-inner {border: none; /* overrides extra padding in Firefox */}
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
via: http://twitter.com/3rdEden/status/20820800535
Confirmed!
http://www.paulrhayes.com/2010-08/useful-css-snippets/
via kroc camen
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]-->
(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.)
... to be continued.
I'm getting an error in IE6, running on Windows XP in a VMware Fusion image, when I visit http://html5boilerplate.com.
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)
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?
DONE:
TODO:
validator.w3.org complains about several errors.
Add WebM to the .htaccess file:
AddType video/webm webm
thx Kenneth D. Nordahl
"looking at http://html5boilerplate.com deflating svgz files seems a bit wasteful to me, svgz is meant to be gzip-compressed already"
"@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>
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.
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
jquery-1.2.6.js is obsolete.
Notes on Paul Irish's starter template.
Mike Taylor
11/08/2009
<div id=header>, <div id=footer>
.<header> & <footer>
? Although I can understand if you don't want to force people to go server-side to fix FF2.<html lang=en>
different from <meta http-equiv="content-language" content="en">
? There might be something I'm not aware of here.<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".)'
<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 //common domready code => common domready code
The first paragraph doesn't wrap it just keeps going off to right.
I'll add more when I look at the code tomorrow.
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!
freestylehtml
thestartingtemplate
sensible markup
the markup zygote
website embryo
"an un-framework"
htaccess config port by voodootikigod: https://gist.github.com/225907185304dba63f38
css: http://camendesign.com/design/
htaccess: http://camendesign.com/.htaccess
both are incredible.
I'm not genius when it comes to apache config but the two instances of
...
are throwing errors.
We need to revise that.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.