Archive results for:

JavaScript Tip: Creating an Object

As with arrays, there are a couple of ways to create objects, and, just like arrays, one is preferred over the other. So even though you can do this:

You can also use object literal notation:

It’s safer to use the object literal notation {} as it’s unable to be overwritten. The object literal represents a new, empty object. Read more ›


Form Validation

HTML5 web forms have introduced new form elements, input types, attributes, and other features. Many of these features we’ve been using in our interfaces for years: form validation, combo boxes, placeholder text, and the like. The difference is that where before we had to resort to JavaScript to create these behaviors, they’re now available directly in the browser; all you need to do is set an attribute in your markup to make them available.

HTML5 Form Attributes

Browsers that support these HTML5 attributes will compare data entered by the user against regular expression patterns provided by the developer (you). Then they check to see if all required fields are indeed filled out, enable multiple values if allowed, and so on. Even better, including these attributes won’t harm older browsers; they’ll simply ignore the attributes they don’t understand.

In fact, you can use these attributes and their values to power your scripting fallbacks, instead of hard-coding validation patterns into your JavaScript code, or adding superfluous classes to your markup.

The required Attribute

The Boolean required attribute tells the browser to only submit the form if the field in question is filled out correctly. Obviously, this means that the field can’t be left empty, but it also means that, depending on other attributes or the field’s type, only certain types of values will be accepted.

If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element. Opera, Firefox, and Chrome provide the user with error messages; for example, “Please fill out this field” or “You have to specify a value” if left empty, and “Please enter an email address” or “xyz is not in the format this page requires” when the data type or pattern is wrong.

The required attribute can be set on any input type except button, range, color, and hidden, all of which generally have a default value. The syntax is either simply required, or required=”required”.

The autofocus Attribute 

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page.

HTML5 New Form Input Types

HTML5 gives us input types that provide for more data-specific UI elements and native data validation. HTML5 has a total of 13 new input types: search, email, url, tel, datetime, date, month, week, time, datetime-local, number, range and color.

Email Address

The email type (type=”email”) is, unsurprisingly, used for specifying one or more email addresses. It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

When you focus on the email field, the iPhone, iPad, and iPod will all display a keyboard optimized for email entry (with a shortcut key for the @ symbol). Firefox, Chrome, and Opera also provide error messaging for email inputs: if you try to submit a form with content unrecognizable as one or more email addresses, the browser will tell you what is wrong.

Styling Required Form Fields

You can style required form elements with the :required pseudo-class. You can also style valid or invalid fields with the :valid and :invalid pseudo-classes.With these pseudo-classes and a little CSS magic, you can provide visual cues to sighted users indicating which fields are required, and also give feedback for successful data entry:

 

HTML5_Validation1

Older browsers mightn’t support the :required pseudo-class, but you can still provide targeted styles using the attribute selector:

Fallback using Modernizr

Now as discussed in a previous post explaining how we can use Mondernizr to detect browser support of HTML5 CSS3 capabilities, we can add code to this example for older browsers:

 

Here is a working demo example.


JavaScript Tip: Strict Equal (===)

A strict equal comparison performs no conversion of types. Where “” == 0 would return true for a regular equal comparison, “” === 0 would not, since an empty string does not equal zero:


Handling IE 7 & 8

IE7 and 8 (yes, they are still around), by default, do not recognize the most HTML5 elements. To have these older versions of IE recognize all HTML5  elements, you can programmatically create them through JavaScript as part of the DOM and then style them accordingly, as in this example:

Of course, doing that for every single new HTML5 element would be a little tedious, and chances are that you would miss something.

Luckily, you can use something called HTML5Shiv (http://code.google.com/p/html5shiv), written by Remy Sharp, which includes all the new elements and another bit of JavaScript called IE Print Protector, which helps IE display HTML5 elements correctly. The “shiv” is designed to allow versions prior to IE9 to recognize the HTML5 elements and allow them to be styled using CSS.

Even though the script has conditional code within, so it runs only in IE, you might as well wrap it in a conditional comment of your own so only IE 8 and older download and run the code. This script must go in the head tag and before style sheet calls. It is up to you if you prefer to serve the html5shiv file locally or link directly to the http://googlecode.com-hosted file.

Having the file locally will prevent both “resource not found” from any remote access issues and breakages due to future modifications to the JavaScript file.

Reference: http://www.paulirish.com/2011/the-history-of-the-html5-shiv/

Making CSS Compatible

Now that you can make IE support new HTML5 elements, you need to make it play nice with CSS. Most modern browsers know how to handle the new elements by default and without any styling; however, to make sure IE plays nice, you need to set your new elements to display: block.

If you use a CSS reset, you could include the code above, or there are various CSS resets currently available that include the HTML5 fixes:

 Polyfilling

Being able to detect what HTML5 features are supported, is only half the battle. Ultimately the goal is to be able to support the HTML5 functionality in the various browsers and versions of browsers that your users use to visit the web applications and sites you create. To allow for browsers that do not support a specific HTML5 functionality, you would need to use a third-party library that includes code for the various browsers to have the same functionality. The code or library of code that allows the feature to be supported on browsers is called a polyfill or polyfiller.

An example of a polyfiller could be a library that provides canvas support for Internet Explorer since Internet Explorer does not support the canvas element directly but has its own drawing functionality such as Silverlight. You want to be able to develop with the new APIs and still offer the same experience to browsers that do not support them natively. We have seen examples of using a JavaScript library such as jQuery to plug some of the gaps, but there is no one library that will fix everything.

Reference: http://html5please.com/#polyfill


Boilerplates

Boilerplate is readily reusable code—a template, if you like—that you can use as a basis for your projects. Extracted from a website, the boilerplate code is what you use over and over again without changes to start off a project or a file.

A good boilerplate takes advantage of the wealth of research done by the Web community, providing optimized, best-practice baseline code. It enables you to hit the ground running, reducing your development time as you start to customize.

While boilerplates can reduce development time, they often depend on incorrect assumptions about your project’s needs. This can affect their suitability for your use. For example, they may support browsers and devices irrelevant to your target audience at the cost of your site’s performance. This emphasizes the need to understand the nuts and bolts of boilerplates and make informed decisions about when to use them.

HTML5 Boilerplate

HTML5 Boilerplate (H5BP), is an extensively used boilerplate and actively developed project.

H5BP is aimed squarely at modern browsers by default and provides some graceful degradation options for older ones. The baseline version even provides a warning to IE7 and earlier users by telling them to upgrade their browser. If you need to target older browsers and devices, there may be better options.

Bootstrap

Bootstrap provides a lot more functionality than HTML5 Boilerplate. Where H5BP is a minimal boilerplate (although some argue otherwise) for a developer who wants a lot of control, Bootstrap takes the opposite view and includes the kitchen
as well as the kitchen sink. This means that choices about font sizes, grid systems, and responsiveness are all made for you out of the box.

If you don’t like default Bootstrap, you can decide what to package up using a little tool on the website. As Bootstrap is built using LESS, it can take the variables you provide and give you totally personalized CSS that can be used in your project.

Foundation

Foundation is a responsive boilerplate made by ZURB that’s designed to be responsive out of the box, leaning heavily on a grid system that adapts across different devices.

The latest version takes a mobile-first approach and employs the lighter Zepto JavaScript library rather than jQuery. It is heavily geared towards rapid prototyping, encouraging design overrides and avoiding the issue Bootstrap suffers of sites looking too “Bootstrappy.” While it was originally intended for prototyping, it is growing into an excellent boilerplate solution.

Skeleton

Skeleton is a minimal framework geared toward cellphone-oriented displays that allow scaling out to bigger sizes. It’s based on a 960-Grid-System-like approach at higher resolutions, which then stack or remove items at the lower resolutions.
Skeleton is a better option for mobile-oriented sites where you may be creating an experience distinct from desktop contexts.

Semantic Grid System

The Semantic Grid System project takes a different slant on the standard grid system by using the power of CSS preprocessors (support for LESS, Sass/SCSS, and Stylus) alongside more purely semantic HTML.


JavaScript Tip: Minifying Code

Once you’ve written, tested, debugged, optimized, and finalized all of your code, it’s time to release it into the wild. This is to say: distribute the code on live sites. There’s one more step you could take before doing so: minify the code.

To minify code is to remove all of its comments and extraneous white space in order to condense the code as much as possible. Minifying a script will significantly reduce its file size, perhaps by as much as 50 percent. This in turn makes the site load faster in the browser, as there will be less data for the user to download. Read more ›


Media Query Syntax

Media query syntax follows this syntax:

The not keyword (which is optional) negates the query, effectively saying “If the following is not true, apply these styles.” The not keyword negates, the entire query, so:

evaluates as:

and not as:

The only keyword forces just those browsers that support CSS3 media queries to evaluate the query. In essence, it conceals the CSS from older browsers:

The type refers to the media type, such as print, handheld, screen, or, in this case, all.

The logical and allows us to create complex queries and such:

This will apply the enclosed CSS to screen viewports where the width is at least 600px and no wider than 1200px;  The logical and is used to add constraints to a query; you can combine as many as you like.

Finally, the expression is the media features we’re testing against. Again, most often you’ll use a few of these.

A little known fact is that CSS3 media queries also allow a logical OR. A comma can be used for this purpose:

This says, “apply the CSS on screen if either the pixel density is at least 300dpi OR if there are two device pizels for every CSS pixel.” For the record, this is not a real world example as of yet; these features are not yet well supported.

Media queries can be used within CSS files:

They can also be applied via the media attribute of the link element:

Lastly, they can be imported with @import:

Reference: http://cssmediaqueries.com/what-are-css-media-queries.html


Page 16 of 17« First...10...151617