Book Image

HTML5 Boilerplate Web Development

By : Divya Manian
Book Image

HTML5 Boilerplate Web Development

By: Divya Manian

Overview of this book

<p>HTML5 Boilerplate is the number one choice for many web developers to get their projects going. It provides a comprehensive set of starting templates to get your developments going, ensuring you don&rsquo;t forget any important elements of a typical web project while also ensuring you are writing quality code and mark up. Learning how to use this framework of page and code templates will allow you to kick-start your projects quickly without losing out on quality.<br /><br />"HTML5 Boilerplate Web Development" will enable you to build new projects effectively with minimal effort. HTML5 Boilerplate allows you to deploy quality websites successfully and quickly while also ensuring robust cross-browser performance. It takes you through the step-by-step process of creating a website and teaches you to take full advantage of the html layouts provided within HTML5 Boilerplate; be it styles, mark up, or code so you can accomplish your goals.<br /><br />This book will guide you through the process of building a music festival website, as an applicable example, using HTML5 Boilerplate. You will install, set up HTML5 Boilerplate and deploy production sites. <br /><br />First, we will look at how to install HTML5 Boilerplate so you can use it repeatedly to jumpstart your projects, then we will look at structuring your website using the base files. We will use Modernizr and feature detection to dynamically serve different styles and scripts based on support of certain features. We will discover how to best configure our server to provide high performance and security for our website. Finally, we employ the Build Tool to combine files, remove comments and make the site ready for production use.<br /><br />"HTML5 Boilerplate Web Development" offers a well-rounded tutorial in expert web development; not just a starting place for web projects. It develops code snippets, links to further resources for and in addition to makes you understand the nuances of HTML5 Boilerplate.</p>
Table of Contents (15 chapters)
HTML5 Boilerplate Web Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Contribute


If you like what you have seen so far of the project, you might want to contribute! Contributing to HTML5 Boilerplate is rewarding in all the learning and understanding that you get out of making even the smallest of changes. There are two ways to contribute; these are as follows:

  • Reporting issues

  • Submitting pull requests

Reporting issues

If you find something that is a mistake or is incorrect in one of the files in HTML5 Boilerplate, then you can file an issue so any of the contributors can take a look at it and see if it can be resolved.

The trick is to find out if something is an issue on HTML5 Boilerplate or something is caused by the code your project uses. You can verify if this is a problem with HTML5 Boilerplate by starting a clean install of HTML5 Boilerplate and verifying if the error still occurs.

If it is an issue with HTML5 Boilerplate, before you file an issue, make sure it has not been already reported. The GitHub Issues page at github.com/h5bp/html5-boilerplate/issues lists all open issues. Use the Search bar on top to search for the issue you are facing. It is likely that it may have been fixed, but the fix has not yet been pushed to stable branch.

If the issue is brand new, then make sure you isolate the problem in a way that is obvious through a reduced test case (Chris Coyier writes about what a reduced test case is in css-tricks.com/reduced-test-cases/). When you file a bug report, make sure it is easy to understand, so we can find a speedy solution. Ideally your bug report should contain the following:

  • A short and descriptive title

  • A summary of the issue and the browser/Operating Systems where this bug occurs

  • If it is possible, steps to reproduce the bug

  • A URL to the reduced test case (you can host one on jsfiddle.net or codepen.io)

  • Any other information that would be relevant to the bug, including lines of code that might be the cause of the bug, and potential solutions

Ideally, a bug report should be self-contained, so contributors do not have to follow up with you again to find out more about the bug and can instead focus on resolving it.

Following this process to file a bug report is a learning experience in itself in how to find out what is wrong with the markup, style, or script that you wrote.

Pull requests

If you have ideas on how to improve HTML5 Boilerplate, patches to fix some existing issues, improvements or new features, you would submit what is known as a pull request. A pull request is a set of changes you can submit for review to the HTML5 Boilerplate GitHub repository, so it can be reviewed by the core contributors and merged into HTML5 Boilerplate if found to be useful.

A good way to start contributing would be to find a small issue that you think you can fix, fork the GitHub project (learn more on what this means at help.github.com/articles/fork-a-repo), work on your changes and submit a pull request.

If your contribution changes a lot of lines of code and alters the nature of the project drastically, consider opening an issue on the GitHub project first.

The following are the steps to get started with creating a pull request:

  • Fork the project.

  • Clone your fork (in your terminal, enter git clone https://github.com/<your-username>/html5-boilerplate.git and press Enter).

  • Add an upstream remote (in your terminal enter git remote add upstream https://github.com/h5bp/html5-boilerplate.git and press Enter).

  • Get the latest changes from upstream (for example, by entering git pull upstream master and pressing Enter in your terminal).

  • Create a new topic branch to contain your feature, change, or fix (git checkout -b <topic-branch-name>).

  • Make sure that your changes adhere to the current coding conventions used throughout the project; that is, indentation, accurate comments, and so on.

  • Commit your changes in logical chunks; use Git's interactive rebase feature (more about this feature at help.github.com/articles/interactive-rebase) to tidy up your commits before making them public. Please adhere to these Git commit message guidelines at tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html or your pull request is unlikely be merged into the main project.

  • Locally merge (or rebase) the upstream branch into your topic branch.

  • Push your topic branch up to your fork (git push origin <topic-branch-name>).

  • Open a pull request with a clear title and description. Please mention which browsers you tested in.

This may seem like a lot of work, but it makes your pull requests significantly easier to understand and faster to merge. Moreover, your code becomes the documentation of the work you have done and anyone who wants to know why that section looks the way it does can go back to your commits and understand exactly why it is the case.

Working on HTML5 Boilerplate would get you started with best practices of collaborative development that you can take back to your workplace or any other collaborative work you do.