HTML5 is the rage and roar for any website designer: who doesn’t want responsive right? Previously though a lot of bootstrap users were shying away when using Angular 1.X and yours truly being one of them I thought it would be insightful if we could be on the same page regarding HTML5. Problematic stylesheets aside though: a lot of us still feel uneasy about going over to HTML5 for sticking through with our front end. Quid pro quo though: because Angular did not have mobile support until the release of Angular 2.0 which is also very recent.
Foundation – we will be using Foundation for this tutorial because it’s one of the simplest to use and has a very good documentation.
Adapt.js
Equally important is the number of applications that can run with JS, in fact you can’t imagine web applications without JS. Angular’s support with mobile was minimum but that’s one thing where Angular 2.0 is going better so if you want to start the design phases of your next website. This would literally be the best time.
Typescript is microsoft’s superset for JS so your mobile solutions can now go cross platform a lot easier. I am still unsure on how well that ports with ASP but we can look at those concerns later. The beta version gave a decent account of itself with bootstrapping techniques and it got rid of $scopes.
So developers now have an edge in the following areas.
■ Directives
■ Using Generics
■ Validations and forms
■ Dependencies
■ Object meta data
“If your site is to be a one-off production then updates won’t be an issue but if you plan to build the site then hand it off to others for updates, make sure that it’s easy to do so. Include instructions for those who come after you. Make sure you place comments in the code along with written documentation so those who come after you can see what you’ve done. This will make it easier for them to make updates/changes as necessary. “ – Nathan Segal
If you started learning HTML5 through Bootstrap you are probably having your head stuffed with all the facts on all different components. Updates are tricky but are ultimately rewarding if you can keep up with them. As is the case though, your frontend requirements can become outdated if you have not upgraded them from time to time.
One example of this is the event handling capability in Angular 2.0 which uses such events for all user generated in puts. It’s a neater method and becomes much more convenient for any team member who is working on your code to be able to read your code.
This is what makes HTML5 so impressive to use, especially on the server side. But on the client side, you have a host of options through which you can go for validation.
required'
The required attributes which can be specified on any input markup
element to annotate any field which is required.
A simple declaration is shown below.
<!DOCTYPE html>
<html
<head>
<style>
textarea:required:invalid, input:required:invalid {
background-color: lightyellow;
}
</style>
</head>
<body>
<header>
<h1>Validation demo</h1>
<p>Demo showing HTML5 validation</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
<form id="myform" action="#">
<input id="name" required><br>
<input id="phone"><br>
<input id="zip" required><br>
<input type="submit">
</form>
</body>
</html>HTML5 validation kicks in when the form is submitted (user clicks the Submit button). When this happens, the browsers starts going through its list of required inputs and prompts when the input is missing on the required inputs.
The validation starts when the form is submitted (click on the user button). The browser goes through the list of required inputs and then rapidly prompts when the input is missing on text. You aren’t using the back end and the compiler to execute the code but can do so right here. That is the essence of what makes HTML5 such a joy to use.
End of beta?
Currently, we can look forward to Angular 2’s JS capabilities because for trainees and pros, there is a good amount to be excited about. Once the beta is tested you can look at what features available for full app and website development and there enough tutorial resources to go around on it as well. Keep the feedbacks rolling within the community and responsive can’t make you go wrong.
Andrea Bell is a Freelance writer and a content contributor at www.zeolearn.com, which provides angularJS and big data hadoop training. She writes mostly on technology related stuff. Live simply, give generously and a sports lover.
Or send us an email at: [email protected]
