EzDev.org

html5-boilerplate

html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites. HTML5 Boilerplate: The web’s most popular front-end template


What is the use of the hackers.txt file?

First

No I am not asking you to teach me hacking, I am just curious about this file and its content.

My journey

When I dived into the new HTML5 Boilerplate I came accross the humans.txt. I googled for it and I came at this site http://humanstxt.org/.

Immediately my attention went to this picture:

Where is it located

Do I read this correctly? Hackers.txt?

So I resumed my journey in google and stopped at this articles

When I started reading this I had the feeling that its about the difference between Hackers and Crackers. Later I got the feeling that I'm might be wrong and that this place is that this hackers.txt file is a sort of guestbook for hackers?

Also other examples about hackers.txt files I found here

Some files contain code, others have just hurtfull information.

Now I'm realy confused, guestbook, hack tutorials or just history?

Question

What is the use of this hackers.txt file?


Source: (StackOverflow)

JavaScript on the bottom of the page?

I've read that it is better to keep all of your JavaScript files on the bottom of the webpage. The HTML5 Boilerplate template seems to agree: http://html5boilerplate.com/

And seems to be widely used.

My question is: first, does this have any real basis? I've done testing in Firebug and it seems to have some small effect, but is it trivial? Images and other sources don't seem to start loading until CSS files and script files have loaded, but sticking them on the bottom doesn't seem to make much difference in this at all.


Source: (StackOverflow)

What is the purpose of the HTML "no-js" class?

I notice that in a lot of template engines, in the HTML5 Boilerplate, in various frameworks and in plain php sites there is the no-js class added onto the <HTML> tag.

Why is this done? Is there some sort of default browser behavior that reacts to this class? Why include it always? Does that not render the class itself obsolete, if there is no no-"no-js" case and html can be addressed directly?

Here is an example from the HTML5 Boilerplate index.html:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

As you can see, the <html> element will always have this class. Can someone explain why this is done so often?


Source: (StackOverflow)

Can we use Foundation with HTML5Boilerplate?

My client wants me to use Foundation. I am habitual of HTML5Boilerplate with 960 Grid System. I am just wondering can I use Foundation with H5BP? I will appreciate your guidance.


Source: (StackOverflow)

I just created an HTML 5 Boilerplate project in WebStorm. Is there a standard command for compiling the "dist" folder?

I'm getting started with WebStorm 9. I created an HTML 5 Boilerplate project and I noticed a src and a dist folder.

Is there a standard command to compile the content of the src folder into the dist folder?

This is how my project looks like:

enter image description here


Source: (StackOverflow)

Should SVG contents be visible outside an embedded by default? [closed]

In the past I answered a question about "who was wrong" in regards to SVG images not being "cropped" (overflow: hidden) in IE9, where all other supporting browsers did so. The answer is here.

Today, while reviewing HTML5 Boilerplate again, I noticed that they claim they "[correct] overflow not being hidden in IE9" with this bit of code:

svg:not(:root) { overflow: hidden; }

I'm looking for someone to confirm or deny my original research by pointing to some other note in either the HTML5 or SVG specs. I cannot find anything, but I want to be sure I am not missing something.

The best I can find is that they are trying to apply rule 7 here, but that should only apply to an SVG Document, like via an img tag or when loaded directly.


Source: (StackOverflow)

is bower install html5boilerplate is a good thing ?

My question is it good to install html5boilerplate with bower? How can one proceed after that as it have its own directory for css and javascript and everything will come under bower_component/html5boilerplate


Source: (StackOverflow)

How do I use main.js and plugins.js from HTML5 Boilerplate?

There is a similar question that has an accepted answer, but the link it refers to is no longer available (not even on the wayback machine). The H5BP docs themselves are not very specific on this subject (here), at least not for a noob like me. And the answer to this similar question still doesn't explain much to me. It sort of touches on how to use plugins.js, but isn't very specific and doesn't explain main.js.

Unfortunately, these are the only bits of information I could find, and I still don't really understand what these files are for. So can anyone explain;

How do I use main.js and plugins.js from the HTML5 boilerplate?

What is their function, how would I use them?


Source: (StackOverflow)

HTML5 Boilerplate Page-specific Javascript Placement

Question

If you use a single javascript file to hold all scripts, where do you put scripts that are for just one page?

Background

This may be a matter of opinion or "best practice" but I'm interested in others' opinions:

I'm using the html5 Boilerplate on a project. They recommend you place all javascript in a single file script.js for speed and consistency. Seems reasonable.

However, I have a bit of geolocation script that's only relevant to a single page, and not others. Should I break convention and just put this script on the page below my calls to the javascript libraries it depends on? Just put calls to the relevant functions (located in the script.js) file, below the links to the libraries they depend on?

Thanks!


Source: (StackOverflow)

How to use html5 boiler plate?

I am a newbie webdeveloper. Though, I understand what html5 boiler-plate brings to the table, I would like to know how can I extend/customize it to use it in all my html files?

As of now, it provides an index.html.

  1. So, what is the convention/method to create a new html file?
  2. Should I create a separate html folder?
  3. How do I inherit the properties of the index.html file?(Copy-paste?) Can't there be something like Django where I can inherit the baseurl?
  4. Though, I have some understanding of dealing with javascript and css, anything else I should take care of while dealing with html5 boiler plate and cross browser compatibility?

Source: (StackOverflow)

What is the proper way to override an element's CSS 'position: relative;' using Bootstrap 2.2.1?

I am working on a project using the Twitter Bootstrap 2.2.1 Initializr boilerplate. In order to properly override Bootstrap's default CSS attributes you need to create an entry for the affected class in 'main.css' and add the desired attributes.

In this particular case Bootstrap has a class called '.collapse' that is applied to the default navbar.

.collapse{
    position:relative;
    height:0;
    overflow:hidden;
    -webkit-transition:height .35s ease;
    -moz-transition:height .35s ease;
    -o-transition:height .35s ease;
    transition:height .35s ease
}

The portion that is causing problems for me is the 'position: relative;'. I need there to be no position statement. Now I know that I can just open the Bootstrap CSS file and edit it but if the file gets updated that change will be lost.

What is the proper way of overriding this CSS entry?


Source: (StackOverflow)

HTML5 Boilerplate .htaccess cache busting not working with WordPress

The .htaccess cache settings for HTML5 Boilerplate (http://html5boilerplate.com/) are awesome, but I'm running into an issue with the cache busting settings for JS and CSS versioning.

<IfModule mod_rewrite.c>
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
</IfModule>

I can't seem to get this to work with the WordPress rewrite settings already present in the .htaccess file.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
</IfModule>

At best, the rewrite on my JS files never happens. At worst, it breaks the site.

Anyone had any luck getting this to work with WordPress?


Source: (StackOverflow)

HTML5Boilerplate and the Image Replacement Class text-indent -999em

I have been using HTML5Boilerplate for most of my projects, as it is a great framework but me and the other developer have been going back and forth about the image replacement class and the use of text-indent:-999em.

He sent me these two links:

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

http://www.youtube.com/watch?v=fBLvn_WkDJ4

I know the HTML5Boilerplate team did a lot of research when they put together the stylesheet, and I know it is a common technique that a lot of developers use. What do you guys think of it? Should I start using another technique so our sites don't get penalized or is it OK to keep using it?

Thanks!


Source: (StackOverflow)

Using Html5boilerplate's code to load JQuery very slow when run locally

I have been using the following code for loading JQuery in all of my projects. I grabbed it from http://html5boilerplate.com/. There is extensive disussion of this technique here.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');</script>

This code works great and seems pretty darn quick once I've put it up on the interwebs, but when I open my .html file locally it takes ~10 seconds per refresh. Generally I get fed up and alter the code as follows:

<!-- uncomment when going live 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');</script>-->

<!-- remove following line when going live -->
<script src="jquery-1.7.1.min.js"></script>

Am I missing something obvious here? I feel like I should not be getting the super-slow loading times, but it does resolve itself when comment out those lines.


Source: (StackOverflow)

How to extend google analytics to track AJAX etc (as per H5BP docs)

I am trying to install the google analytics augments identified in the extend.md file of H5BP (https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md)

It states that the "optimised" google analytics JS snippet includes the following code:

var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];

and that additional augments such as track jquery AJAX requests, track javascript errors and track page scroll should be added after _gaq is defined.

In fact, the snippet included with the current version of H5BP does not make reference to _gaq as a variable:

        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');

This creates an undefined error when trying to use any of the H5BP extensions. E.g.

if (typeof _gaq !== "undefined" && _gaq !== null) {
    $(document).ajaxSend(function(event, xhr, settings){
        _gaq.push(['_trackPageview', settings.url]);
    });
}

Will not work as _gaq is not defined.

How are these augments intended to be implemented? Can someone provide a working example showing a full implementation of all the extensions?

Thanks


Source: (StackOverflow)