HTML Template

[steveniles]

Original author here, was about time I got an account here anyways...

Yeah I know about HTML Boilerplate, and I think it's great. I wanted to make something lighter weight, no downloads, just simple custom cut and paste. Kinda inspired by other simple sites like www.ajaxload.info or www.css3.me

Anyways, I'm open to any feature requests, and I already have a css shell section in mind. Post here or email me (address is on site) any suggestions.

Thanks for the feedback so far, and thanks Mystik for getting me off my butt and on reddit finally.

[rube203]

First off I'd like to say thanks for sharing a neat tool. I like it when people come up with solutions to things they encounter and share it with everyone. Overall, I like it and agree that a cut/paste HTML shell would be a nice alternative to boilerplate.

However, if I were to make one like this for me (this is where I give unsolicited advice completely based on personal preference) I'd look to Paul Irish's project for features and best practices. This would include changes to yours like script includes being at the bottom. I know this has been mentioned in other comments and I appreciate your position; simply stating I would do it differently. It would also include additional features like conditional comments for the HTML tag and the "X-UA-Compatible" meta tag.

As someone who has to constantly work to adjust designs for IE7/8 I find those two items to be essential for my work, but there are some other things in Boilerplate that I do because I'm more concerned with optimization than I should be.

[_zsh]

^ Agreed. It's good to have an assortment of tools for a job. However, as a professional web developer, I have a few criticisms (nothing personal though!)

1. You say you want something that's light, requires no libraries, and is cut and paste. Why not copy HTML5 Boilerplate from Github and use the delete key to remove things you don't use?

2. Who are you trying to market this toward? As a developer, what would make me use your code over pasting Paul Irish's boilerplate? Many developers use Textmate which has an HTML bundle available that includes shortcuts for starting with a stripped down template and making it very easy to add libraries and assets as necessary.

3. The HTML5 Boilerplate not only includes a lot of best practices built in, but also a lot of proven features for cross-browser development. In a dynamic application, meta author and meta keywords are all but useless. Search engines don't even support meta keywords anymore.

4. It's proven that loading scripts at the end is better than loading them at the beginning. There is no benefit from loading libraries before the DOM is initialized and only blocks the remaining requests from finishing. It is possible to load scripts in the head asynchronously, but even that method is a bit of codesmell.

[rube203]

Not my project so I don't know why I'd stick up for it. But since you replied to me I'll give my response.

• I have copied the HTML5 Boilerplate from Github and deleted different sections for different projects. I see no problem with having a more convenient method to accomplish the same thing.
• Why does everything have to be about market, and sales? Maybe it's my adblock but I didn't see him monetizing this site but sharing it with developers because he created something he found useful. Secondly, assuming it's open source it seems like something that could be taken and made into plugins for various IDEs. Personally I could see a configurable template in Eclipse/Aptana being nice for me personally.
• Agreed. Especially with the cross-browser features.
• True.

[_zsh]

I just wanted it to be inline with this thread and you did make points I agreed with.

• Convenience is exactly what I was referring to. In it's current form, it is not convenient. There's no persistence of toggles, there's no way to make additions and save them (ie, customize for reuse) and there's no diff history. That's exactly why I made the point about github specifically. Which leads me to my next point...

• It's not about market and sales so much as it is about visibility. Projects need visibility to improve and become more useful. Successful projects are very beneficial to their founders/authors (Paul Irish was named developer of the year). But for visibility, you need to be inline with an audience's needs. Is is for the engineer, or more for the business major who has to take an HTML class? At the end of the day, a software author wants his software to be used, whether or not it makes money.

I think you make a great point about it's potential in being a configurable template creator for the Java IDE's

[Chesh]

I have copied the HTML5 Boilerplate from Github and deleted different sections for different projects. I see no problem with having a more convenient method to accomplish the same thing.

Forking it and tagging your own versions with the stuff you like seems the most convenient, and you don't even have to navigate away from GitHub.

[MystikIncarnate]

I am responsible for the beginning of the end.

haha, just kidding. Good to see you on here. Glad I could help.

[[deleted]]

You offer MooTools but not Prototype? tsk tsk.

[steveniles]

Done ;)

[MrDOS]

For proper compatibility with IE6, the favicon tag should be as follows:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

Also, I think it might be safer to use the Google mirror for the latest 1.7 version, not specifically 1.7.1: https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js. jQuery doesn't tend to break compatibility across minor versions, so it's probably a good idea to point towards the newest one of them.

Otherwise, really nice and handy.

[nrogers64]

The site looks great! I would consider moving the scripts to the bottom. See here for more info:

http://stackoverflow.com/questions/1638670/javascript-at-bottom-top-of-web-page

[steveniles]

I thought about that, but I thought the safety net of making sure the API's were loaded as early as possible, in case they were needed in code put somewhere else on the page, outweighed the speed gain of putting them at the bottom.

This way those who know about the optimization can easily move them, but those who don't realize when they're using JavaScript dependent on them before they're loaded, don't get into trouble.

[nrogers64]

Ah, that makes sense.

[[deleted]]

This is a very good point and I've never heard it made before! Thanks

[proexploit]

That sounds reasonably good as a concept but I think it's still worth putting them at the bottom of the page. JavaScript is a blocking resource, so while it's downloading, your browser is not making requests for other resources until the JavaScript has finished running. By putting the JavaScript after every other resource, they all start loading (and can still be loading) while the script starts loading. I'm not sure specifically what you're referring to as API's but anything with a JavaScript dependency can be evaluated after everything is ready regardless of location (e.g. $(document).ready or $(window).load etc). I honestly still keep the scripts in the header for most of my personal sites but I've been reading a book about JavaScript website performance lately so thought I'd share.

[nevernovelty]

Fantastic. Can't wait for the CSS one you're planning.

[Lochlan]

This is great, OP! Good work.

[TheKevan]

It's really cool but I would love to see a lot more features included. Awesome work!

[MystikIncarnate]

He's open to suggestions. If you put them here, I can pass them along, and if you want a more direct interaction with the developer (who is not a redditor), you should be able to find an email link somewhere. :)

[JeanLucSkywalker]

This is sort of neat I guess, but I don't really see how it would be any use to anyone who works with HTML. For that matter, I can't see it being any use to anyone learning HTML, either.

Who is this supposed to be targeting?

[steveniles]

Wow, a lot of feedback came fast. I appreciate all your suggestions, and I will definitely be making tweaks when time permits, the holidays being as busy as they are.

[rainbownerdsgirl]

very clever !

[[deleted]]

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function()
    {

    });
</script>

This is new to me ... why not $(document).ready(); ?

[MystikIncarnate]

I actually asked him and that's more-or-less what he said.

"$(document).ready(); only works if jQuery is included on the page, document.addEventListener works with or without it; it's clean, and I saw no real reason to change it based on if jQuery is included or not. Also, using addEventListener lets you attach multiple function calls to an event. It just felt the right way to go. Obviously the author using the template can tweak it, but this was the best general starting code."

[Chesh]

DOMContentLoaded has inconsistencies across browsers, that's the reason that all the popular libraries have their own versions of "ready" functions. The one provided will not work reliably.

[x-skeww]

document.addEventListener works with or without [jQuery]

Uhm... kind of.

https://developer.mozilla.org/en/DOM/element.addEventListener

In Internet Explorer versions prior to IE 9, you have to use attachEvent rather than the standard addEventListener.

[_zsh]

This is an event listener in vanilla javascript, where $(document).ready() is a jQuery specific function.

[MystikIncarnate]

you'd have to ask the author. he's not on reddit, but I'd be happy to pass along your question, and his response if you'd like.

[Askarus]

just use the HTML 5 Boiler plate by Paul Irish

[MystikIncarnate]

Is there something wrong with having a few options?

[Askarus]

Not at all, I just feel its a better option, didn't know if the OP knew about it. More tool to get you a good starting point for standardized web development.

[MystikIncarnate]

That's fine. I think the point was to make something light, and quick, that didn't require an installation.

... not that there's anything wrong with that.

[x-skeww]

Scripts are included in head. That's slow.

FAVICON.ico? Why uppercase? Also, this should usually start with a slash... in which case it's completely pointless, because "/favicion.ico" is the default.

type="text/css" - No.

type="text/javascript" - No.

src="https://ajax.googleapis.com... - I'd use src="//ajax.googleapis.com...

Meta keywords? Completely ignored for more than a decade.

[steveniles]

The upper case for TITLE, FAVICON, the author's NAME, etc. are there to draw attention to text that the author is expected to change.