Thread

I’m working the excellent HTML5 Boilerplate into our EE installs, having used it on a few non-EE sites and been very impressed with it.  Just wondering if any of you guys have any experience with it, or any insight into how the standard setup might affect EE, particularly the .htaccess, (too long to post, but attached to this post and available on the homepage here if you scroll down). 

The last thing I want to do is significantly increase dev time by introducing a whole heap of stuff behind the scenes that doesn’t play nicely with EE!

A couple of things in particular:

I think this would be the correct way to set up the .htaccess to strip index.php, but not 100% sure:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond $1 !^(images|css|js|themes|uploads|favicon\.ico|robots\.txt|index\.php|backend) [NC]
  RewriteRule ^(.*)$ /index.php?/$1 [L]
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

There is pretty extensive cache control in the boilerplate, but I guess this will cause problems unless EE’s caching is disabled?

Best to remove -MultiViews?

# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist 
#   e.g. /blog/hello : webmasterworld.com/apache/3808792.htm
Options -MultiViews 
# -Indexes will have Apache block users from browsing folders without a default document
# Options -Indexes

Assume gzipping resources isn’t an issue.

There is also provision for a custom 404 page - EE handles 404’s just fine so I’m removing this:

# custom 404 page
ErrorDocument 404 /404.html

One last thing concerns their crossdomain.xml - again, I can’t see any issues immediately but there might be something EE is doing already on that front?

Any ideas or experience on this already?  There doesn’t seem to be very much discussion on the forums or elsewhere, surprisingly.

Any opinions on this?

I’ve now removed caching, crossdomain.xml and everything related to 404 errors, as EE can handle this just fine, but have left in -MultiViews to avoid conflicting with the EE site structure (see modified version attached).

Things seem to be working fine so far, but without knowing a huge amount about .htaccess config, I’m guessing that any issues are likely to come up further down the road if they’re present.

And sure enough, this broke about 10 minutes later, though that was largely due to my mod_rewrite causing throttling problems.  I’ve simplified the .htaccess even more, as I’ve also found that a huge amount of the non-HTML5 related functionality is actually doable using the config settings in EE.  Here’s what I have now, for anyone who stumbles on this, though I’d ideally like to strip the www from URLs as well as index.php, so more research might be needed.

# Apache configuration file
# httpd.apache.org/docs/2.2/mod/quickreference.html

# Force the latest IE version, in various cases when it may fall back to IE7 mode
#  github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>


# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>


# video
AddType video/ogg                      ogg ogv
AddType video/mp4                      mp4
AddType video/webm                     webm

# Proper svg serving. Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz

# webfonts
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType font/woff                      woff

# assorted types
AddType image/vnd.microsoft.icon       ico
AddType image/webp                     webp
AddType text/cache-manifest            manifest
AddType text/x-component               htc
AddType application/x-chrome-extension crx

# Remove server signature
ServerSignature Off

# Strip index.php from URLs
RewriteEngine On
RewriteCond $1 !\.(gif|jpe?g|png)$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]

Just wondering if you’d had success with this modified .htaccess file, I’ve started using the HTML5 Boilerplate and want it to play nice with EE2.

Seems to be working pretty well actually. 

I had problems with the ChromeFrame bit on one or two cheap hosts (1and1) and made a few tweaks to the mod_rewrite to play nicely with Structure and strip www from URLs. 

Here’s what I’m launching sites with right now (minus ChromeFrame):

AddType x-mapp-php5 .php

# Apache configuration file
# httpd.apache.org/docs/2.2/mod/quickreference.html

# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>


# video
AddType video/ogg                      ogg ogv
AddType video/mp4                      mp4
AddType video/webm                     webm

# Proper svg serving. Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz

# webfonts
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType font/woff                      woff

# assorted types
AddType image/vnd.microsoft.icon       ico
AddType image/webp                     webp
AddType text/cache-manifest            manifest
AddType text/x-component               htc
AddType application/x-chrome-extension crx


# Remove server signature
ServerSignature Off


RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.yourdomainhere.com$ [NC]
RewriteRule ^(.*)$ <a href="http://yourdomainhere.com/$1">http://yourdomainhere.com/$1</a> [R=301,L]
RewriteCond $1 !\.(gif|jpe?g|png)$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]

Nice one, I’ll give this a whirl.

No worries - let me know if you end up making any changes - would be good to know about them!

We’ve been using it for a while and it’s fantastic.  Using Leevi Graham’s .htaccess generator hasn’t disrupted anything for us.  We’re using the boilerplate template in EE and in WP via the Boilerplate theme.

The nice thing is that it organizes just about everything you’d need for mobile templates and html5/css3 in a nice orderly way (and gives me access to tricks I wouldn’t have otherwise known about).  The only thing I’ve had to change is moving jQuery up from the bottom of the page.  They put modernizr in the head and put jquery at the bottom of the body tag, but a lot of scripts still depend on jquery loading in the head, so most projects don’t get the intended speed boosts.

Jon @ Fireball: Thanks much for posting your R&D in this area with the H5BP. Very useful and insightful! Appreciated.

I don’t suppose anyone has any experience or pointers about how to set up the HTML5 build script?

I can’t seem to get my head around how to get the script to add in the minified css or jquery paths in the template files…

I’ve also found:

https://github.com/newism/eecms-build-script

But everytime I try and configure that - the settings fail (due to my lack of knowledge about what / how it is working and not know how to set it up)...

Anyone got any tips or pointers?

Ta
J

Hi James, I tried to get that github project working and it complained about paths being wrong.  I’m sure it’s just a matter of configuring the project.properties file until it works but it’s frustrating there’s no notes by the github author.

That project is relatively recent (September 2011) but it appears to be already out of date compared to the current HTML5 Boilerplate which is now version 2.0!  So I am comparing apples to oranges when I compare eecms-build-tool to the H5BP v2.0 build tool.  Which isn’t making it easy!

I’ve also started a new thread where I hope people will contribute their thoughts to getting a more stable H5BP solution for EE.

Here—> http://ellislab.com/forums/viewthread/203494/