background preloader

Wysihtml5 - A better approach to rich text editing

Wysihtml5 - A better approach to rich text editing

Plupload - A tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus Abide The UI Widget Strategy DISCLAIMER: The term widget is being broadly used in this article to refer to any user interface element that either supports (e.g. fieldset or splitter) or directly aids (e.g. textarea or tree) the display of information. It is extremely uncommon for a visual designer or interaction designer building an application user interface to open a design program and begin to re-create the wheel in terms of UI patterns. No, in fact, the majority of the work that is done when designing a new application interface is based on common patterns that users already intimately understand. Imagine the scenario where the expectation placed on the designer was to create new and unique UI patterns for each UI project. They would argue to no end that from a usability perspective this would be UI suicide, not to mention the large amount of time (i.e. money) that would be needed for such an innovative endeavor. Chrome 28: Frameworks: Standalone: Let's examine each of these in more detail. Strategy 1. Strategy 2. : le web design puisé à la source blueimp/Bootstrap-Image-Gallery Controlling History: the HTML5 History API and ‘Selective’ Loading Today we’re going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We’re effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable. This technique effectively allows ‘selective’ loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. It saves time on loading Search engines take load time into account when ranking The web is becoming more mobile and top internet speeds aren’t available everywhere, and hey, not everyone has a dedicated broadband connection, so saving some time on your load speeds is always going to benefit your users. By using the History API we cut out all the junk. 2. Soundcloud uses this technique to keep music playing

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right to Left Support

Progressively enhancing HTML5 forms, creating a 'required' attribute fallback with jQuery HTML5 required attributes are a fantastic addition to the HTML5 spec, they save a lot of time when working on client-side form validation and enhance the user's experience. The HTML5 required attribute provides us with full client-side 'required' checking and validation, which is easy to add to several types of form elements. DemoDownload The required attribute is developer friendly. It's a boolean attribute too which means we don't need to supply it any data, it's either present or not. In browsers that support the attribute, you don't need to do anything when it comes to alerting users they haven't filled/checked in an input field (or textarea, radio buttons and so on...) If someone were to not fill in/check a required input, the form would not submit the information and the user would be notified by a small popup above the relevant field that they needed to fill it in. But what about legacy browsers? HTML5 feature detecting Adding the required attributes Required attribute loop Full scripts