WebAppers

Photoshop Template of iOS 7 GUI Elements

Ray Cheung — Mon, 17 Jun 2013 07:05:32 +0000

teehan+lax has released iOS 7 GUI PSD which is a Photoshop template of GUI elements found in the beta 1 release of iOS 7. The sole purpose of this file is to help you pitch, design and build amazing software.

The PSD is a well organized, labeled and layered PSD full of editable shape layers. Most people find it useful for mocking up apps. Others use it to concept ideas or create custom interface elements that work harmoniously with those native to iOS.

Requirements: Photoshop
Demo: http://www.teehanlax.com/tools/ios7/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Micro Grid Based Wireframe PSD Template

Ray Cheung — Mon, 17 Jun 2013 07:01:25 +0000

Advertise here via BSA

Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts. The repo includes: A Microframe PSD Template with a 12 column grid and 3 sample layouts, A Blank Microframe PSD Template with 12 column grid. A Microframe Detail PSD Template which you can place your Microframe PSDs in to explain/present to clients, or simply detail components for your own reference. The Detail PSD also has a view for laying out your layout variations.

The PSD uses guides to create a 12 column grid which you can use to align your elements all pertty like. There is a 12 column layout (for standard laptop/desktop views), a 6 column layout (for tablet views), and a 4 column layout (for mobile views). Each layout is grouped into a Photoshop group.

Requirements: Photoshop
Demo: https://github.com/jglovier/microframe
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Creative and Modern Button Styles and Effects

Ray Cheung — Fri, 14 Jun 2013 07:05:44 +0000

Advertise here via BSA

Codrops has shared some Creative Button Styles for our inspirations. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.

Requirements: CSS
Demo: http://tympanus.net/Development/CreativeButtons/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

100% Free and Open Source E-Commerce Solution

Ray Cheung — Fri, 14 Jun 2013 07:01:37 +0000

Advertise here via BSA

Sylius project provides a full stack e-commerce solution. In further parts of The Book you’ll learn how to master it and develop your next project really quickly. Sylius provides a complete webshop solution and some of features include:

Flexible product catalog, with multiple variants per product, options, properties (think attributes) and protypes.
Categorization engine, which allows you to categorize the products under various taxonomies, by “Brand”, “Category” or whatever you imagine.
Inventory tracking system, where you can track every single unit of your inventory or disable tracking at all.
Powerful shipping with configurable shipping categories, item sizes, weight, shipments management and customizable cost calculators.
Taxation engine, with support for many different tax categories, rates and zones.
Orders system allowing you to easily create and manage sales, with super-flexible adjustments which can serve many different purposes, from taxation & shipping to promotions and manual order total changes.
Customizable checkout process, built from reusable steps.

And best of all, Sylius is 100% free and open source − and they intend for it to stay that way.

Requirements: PHP and Symfony2 Framework
Demo: http://sylius.com/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Detect Errors and Potential Problems in JavaScript

Ray Cheung — Thu, 13 Jun 2013 09:30:35 +0000

Advertise here via BSA

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. The goal is to help JavaScript developers write complex programs without worrying about typos and language gotchas.

Any code base eventually becomes huge at some point, and simple mistakes–that would not show themselves when written–can become show stoppers and waste hours of debugging. And this is when static code analysis tools come into play and help developers to spot such problems. JSHint scans a program written in JavaScript and reports about commonly made mistakes and potential bugs. The potential problem could be a syntax error, a bug due to implicit type conversion, a leaking variable or something else.

Requirements: -
Demo: http://www.jshint.com/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Screen Specifications of Most Popular Devices

Ray Cheung — Wed, 12 Jun 2013 07:47:52 +0000

Advertise here via BSA

Screensiz.es helps you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from Wikipedia, and for a better understanding of Pixel Density. The “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzzy math.

Requirements: -
Demo: http://screensiz.es/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

TourBus: jQuery Tour & Walkthrough jQuery Plugin

Ray Cheung — Wed, 12 Jun 2013 07:31:57 +0000

Advertise here via BSA

jQuery TourBus is a jQuery tour/walkthrough plugin. It takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators and etc.

Start by including the jQuery plugin and base styles on your page, of course. Then we can define some ‘legs’ of our tour. Imagine you have a page with some stuff you want to lead the user through. You’ll find the basics of the leg styles (padding, background color, etc) which you can either edit or override in your own stylesheets.

Requirements: jQuery Framework
Demo: http://ryanfunduk.com/jquery-tourbus/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Easily Organize Your Code Snippets with GistBox

Ray Cheung — Tue, 11 Jun 2013 07:05:46 +0000

Advertise here via BSA

GistBox is the beautiful way to organize code snippets. Your library is saved to the cloud for backup. Never worry about snippets getting lost in the shuffle. GistBox was built on standard HTML5 technologies. On the go or at the office, you’ll always have GistBox.

GistBox uses GitHub’s backend but adds its own layer of label and search functionality. It was designed to be a curated, personal snippet library – like long term memory for the practicing software engineer. Multiple instances of GistBox will sync with each other in realtime. Change code once, see it everywhere.

Requirements: Github
Demo: http://www.gistboxapp.com/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

What are HTML5 Datalists and When to Use Them

Ray Cheung — Tue, 11 Jun 2013 07:01:39 +0000

Advertise here via BSA

Autocompletion is a pattern that all Web users are familiar with. When you do a search, your search engine suggests terms. When you type a new e-mail message, your mail client suggest recipients. This functionality, however, has not been available to Web developers without a nontrivial amount of JavaScript. One of the new HTML5 elements, the , brings this autocomplete functionality to the Web natively.

In this article, I’ll describe what datalists are, when it’s appropriate to use them, their limitations and what to do for browsers that don’t support them. Let’s get started.

Creating Datalists

To show how a datalist works, let’s start with a traditional text input:

Favorite Team:

This field asks a user to provide his or her favorite sports team. By default, the user will be given no additional help to complete the field. But by using a datalist, you can provide a list of options the user can select from to complete the field. To do this, define a datalist with an option element for each suggestion:

To tie a datalist to an input element, give the input element a list attribute and the datalist an id attribute that match. Here’s an example:

Favorite Team:

Notice that the list attribute of the input and the id attribute of the datalist contain the same value, “team_list”. This provides the link between the two.

That’s it. No JavaScript is required to make a datalist work. Figure 1 shows what the user will see in supporting browsers after typing a D.

Figure 1. Datalist Display (top left: Internet Explorer 10; top right: Firefox 18; bottom left: Chrome 24; bottom right: Opera 12)

Note: Internet Explorer 10 and Opera do not require the user to type a character before seeing suggestions, whereas Firefox and Chrome do.

Option elements can also have a value attribute. This is useful when a user might not know the code associated with a given option. Consider the following U.S. state input:

State:

Here, the user will see a list of full state names, but when the user makes a selection, the text input will be filled with the state’s code rather than the full name. An example is shown in Figure 2.

Figure 2. Selecting a Datalist Option with a Corresponding Value (Firefox 18)

The autocomplete Attribute

If the datalists in Figure 1 and Figure 2 look familiar, it’s because browsers have had autocompletion implemented for a long time. All browsers have some mechanism of storing a user’s inputs to be used for autocompletion later.

Authors can use the autocomplete attribute to control whether the browser should attempt to automatically complete the user’s data. The possible values are shown in the following example:

So what’s the difference between the autocomplete attribute and datalists? The autocomplete attribute tells the browser whether to give a user options for completion based on previous input and whether to store the entered value for future completion. Datalists are author-provided lists of suggestions that are always displayed regardless of previous input.

One caveat is that setting the autocomplete attribute to “off” prevents datalists from displaying in Opera. Here’s an example:

Other Input Types

While autocompletion is traditionally associated with textual input, datalists can also be used on a number of the new HTML5 input types. Consider the range input type, which allows for the creation of a slider form element. By combining this with a datalist, you can suggest points on the range to the user.

For example, the following input asks the user to provide a donation between $5 and $200 dollars.

Donation Amount (USD):

Figure 3 and Figure 4 show the display of a range input in Chrome 24 and Internet Explorer 10, respectively.

Figure 3. Range Input with Datalist (Chrome 24)

Figure 4. Range Input with Datalist (Internet Explorer 10)

You can see that each browser displays a tick mark for each datalist option provided. Additionally, Chrome will snap the slider to these predefined values as the user moves the slider near them.

Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time. Figure 5 shows support of datalists on common input types in modern browsers.

Figure 5. Browser Support of Datalists on Form Input Types

When to Use a Datalist

Since datalists have no built-in mechanism to require that a user select a provided option, they are well suited for inputs that can accept any value. The earlier example of providing a sports team fits here. While the datalist suggested teams, the user was free to input any value.

Conversely, the U.S. state example fails this test because there is a limited set of valid values that the user must provide. Such a use case is better handled by the select element because it forces a selection.

One exception to this is inputs with a large number of valid selections. For example, consider the traditional country drop-down list shown in Figure 6.

Figure 6. Standard Country Drop-Down

This list impedes users by forcing them to sift through hundreds of options to find the one they’re looking for. An autocomplete feature fits this use case well because a user can quickly filter the list by typing one or two characters.

Here’s how country selection can be implemented with a datalist:

Country:

Figure 7 shows what the user will see after typing a U.

Figure 7. A Datalist Approach to the Country Form Field

Enforcing a Value

While datalists do not natively allow you to require that an option be selected, you can easily add validation that does so. For example, the following code makes use of the HTML5 constraint validation API to add such validation:

// Find all inputs on the DOM which are bound to a datalist via their list attribute.
var inputs = document.querySelectorAll('input[list]');
for (var i = 0; i < inputs.length; i++) {
  // When the value of the input changes...
  inputs[i].addEventListener('change', function() {
    var optionFound = false,
      datalist = this.list;
    // Determine whether an option exists with the current value of the input.
    for (var j = 0; j < datalist.options.length; j++) {
        if (this.value == datalist.options[j].value) {
            optionFound = true;
            break;
        }
    }
    // use the setCustomValidity function of the Validation API
    // to provide an user feedback if the value does not exist in the datalist
    if (optionFound) {
      this.setCustomValidity('');
    } else {
      this.setCustomValidity('Please select a valid value.');
    }
  });
}

The constraint validation API is implemented in all browsers that support datalists, so if the datalist works, the validation should work as well. Now, when the user attempts to submit a form with an input that has a datalist (and they have not selected an option), they will see the error shown in Figure 8.

Figure 8. Constraint Validation API Error (Internet Explorer 10)

It’s important to note that the constraint validation API does not remove the need for server-side validation. Users working with older browsers will not have the constraint validation API available, and malicious users can easily subvert client-side scripts.

While this approach works in modern browsers, it presents an unusable UI to users running browsers that lack support. Users are told that they must select a valid value, but if their browser doesn’t support datalists, they cannot see the options. Therefore, if you plan on using this approach, it’s essential to provide a UI that works in all browsers. This can be accomplished by detecting whether the browser supports datalists and then polyfilling appropriately.

Unsupporting Browsers

At the time of this writing, datalists for text inputs are supported in Internet Explorer 10, Firefox 4+, Chrome 20+, and Opera, which unfortunately leaves out a large number of users.

Unlike with many new HTML5 features, for most use cases, no extra work needs to be done in browsers that do not support datalists. By default, the list of options you provide are merely suggestions; therefore, users with browsers that lack support will simply need to fill in the text field without any suggestions.

However, some fallback options can be used to provide a fuller experience to users running unsupporting browsers.

Fallback to Alternate HTML Content

One option, popularized by Jeremy Keith, is to take advantage of the fact that browsers that do not support the datalist element will still display child elements to the user. The following shows how the country datalist example can be altered and fallback to using If other, please specify:

The UI presented to users in browsers that support datalists will not change, but users working with browsers without support now see a select element with the country options and a text box they can use to enter any value. This is shown in Figure 9.

Figure 9. A Select Fallback for Datalists (Internet Explorer 9)

Polyfilling

One feature the select fallback doesn’t provide is the autocomplete behavior that datalists offer natively. If that is important for the datalists you’re adding, a second fallback option is to polyfill a datalist implementation.

To start, you first need to determine whether the user’s browser supports datalists. The popular feature detection library Modernizr provides such a test, as shown here:

if (Modernizr.input.list) {
    //The browser supports the list attribute and datalists.
  } else {
    //The browser supports neither the list attribute nor datalists.
  }
}

Using this approach, you can now polyfill a datalist implementation for users in unsupporting browsers. While several polyfills are available for datalists, I prefer using jQuery UI’s autocomplete widget. The following code shows a polyfill implementation:

var datalist,
  listAttribute,
  options = [];
// If the browser doesn't support the list attribute...
if (!Modernizr.input.list) {
  // For each text input with a list attribute...
  $('input[type="text"][list]').each(function() {
    // Find the id of the datalist on the input
    // Using this, find the datalist that corresponds to the input.
    listAttribute = $(this).attr('list');
    datalist = $('#' + listAttribute);
    // If the input has a corresponding datalist element...
    if (datalist.length > 0) {
      options = [];
      // Build up the list of options to pass to the autocomplete widget.
      datalist.find('option').each(function() {
        options.push({ label: this.innerHTML, value: this.value });
      });
      // Transform the input into a jQuery UI autocomplete widget.
      $(this).autocomplete({ source: options });
    }
  });
  // Remove all datalists from the DOM so they do not display.
  $('datalist').remove();
}

Figure 10 shows the display of the country list example in Safari with the jQuery UI autocomplete polyfill.

Figure 10. Country Datalist Polyfilled Using jQuery UI’s Autocomplete Widget(Safari)

You may have noticed that by default, jQuery UI’s autocomplete widget matches characters anywhere in the options, whereas datalists match options only at the beginning of the string. Unlike the native datalist, the autocomplete widget allows you to customize this to match options however you’d like.

The following example shows how you can build an autocomplete feature that matches options only at the beginning of the string:

Older Versions of Internet Explorer

To make any polyfill of the datalist element work in older versions of Internet Explorer, you need to take two extra steps.

Option Elements

The first is that Internet Explorer version 9 and earlier all require that option elements be immediate children of select elements. If they are not, these versions do not recognize them, and they will not be visible to the polyfill.

Luckily, this is easy to work around. By using conditional comments, you can place a select element around the options only for these versions of Internet Explorer. Refer to this example:

Internet Explorer version 9 and earlier will now detect the options appropriately. Internet Explorer 10 will not be affected since conditional comments were removed from the parser in Internet Explorer 10. All other browsers will also ignore the comments.

HTML5 Shiv

In Internet Explorer version 8 and earlier, unknown elements cannot contain children. Therefore, even if a datalist’s option elements are within select elements, they will still not be recognized.

Fortunately, there’s an easy fix for this issue as well. The popular HTML5 Shiv library allows elements unknown to Internet Explorer 6–8 to have children. This shiv is included by default in Modernizr; just be sure the “html5shiv” check box is selected when you configure your download.

Limitations of Datalists

Although datalists are perfect for adding suggestions to text inputs, they suffer from a lack of customization capabilities that many modern Web applications require. For example, you cannot do the following with datalists:

Use CSS to change its display or the display of its options.
Control the positioning of the list.
Control the number of characters typed before the browser displays results to the user.
Control what is considered a match (case sensitivity, match at beginning of string vs. anywhere, and so on).
Tie the input to a server-side datasource.

This means that if you need any of this functionality, you need to look into a more robust autocomplete solution. The jQuery UI autocomplete widget provides the ability to do all of this and more. The autocomplete widget also supports all browsers back to Internet Explorer 7 without the need of a polyfill. For more information on the autocomplete widget, check out its demos and API documentation. (The autocomplete widget handles only text-based inputs, therefore it won’t be able to help you for some of the more specialized input types like range and color.)

Wrapping Up

Datalists provide a quick, native means of displaying input suggestions to the user. Since the options are merely suggestions, for many situations it’s not necessary to provide a fallback for unsupporting browsers; users of these browsers simply will not see the suggestions.

For situations when you do want to provide a functional datalist to all users, you can detect support and polyfill the functionality for browsers that lack support.

While datalists are great for offering suggestions, they are limited in the functionality they provide. If you need a more robust autocomplete solution, jQuery UI’s autocomplete widget is a good place to get started.

This article is part of the HTML5 tech series from the Internet Explorer team. Try-out the concepts in this article with 3 months of free BrowserStack cross-browser testing @ http://modern.IE.

About the Author

TJ VanToll is a Web developer and jQuery UI team member. He lives in Lansing, Michigan, and writes about his experiences with jQuery, HTML 5, CSS and other things that strike his fancy on his blog. He is the proud father of twin sons, and when he’s not on the Internet, he’s usually found chasing them in circles. Find TJ on his Blog and on Twitter-@tjvantoll.

Sponsors

Professional Web Icons for Your Websites and Applications

Easily Remove Background from Images Online

Ray Cheung — Mon, 10 Jun 2013 07:05:17 +0000

Advertise here via BSA

Clipping Magic lets you easily remove the background from your photos to create masks, cutouts, or clipping paths online. Simply drag your image onto the drop-zone above, or choose a file using the button.

And then mark some foreground green and some background red and the algorithm takes care of the details. The background is removed by adding an alpha channel, with a suitably feathered boundary. You can also share the download link, to avoid sending large files by email.

Requirements: -
Demo: http://clippingmagic.com/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications