background preloader

Wysihtml5 - A better approach to rich text editing

Wysihtml5 - A better approach to rich text editing

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.

10 Feature-Packed Javascript WYSIWYG And Rich Text Editors WYSIWYG (What You See Is What You Get) and Rich text editor can be easily found in CMS (Content Management System, such as Drupal, WordPress, Joomla etc). There are so many of them, to carefully choose one that suit your needs, you will have to go through each of the features, examine its documentation and play with it for a while to make sure it suits your project. In this post, I have found 10 of the most updated, feature-packed WYSIWYG and Rich Text editor just to save your time. I have listed out most of the notable features and hopefully will save you some time. Mercury Mercury is a full featured HTML5 editor. TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB.View and edit HTML codeHandles most text formatting, list, images, table and linksEnhanced Table creation with border customization etcCustomizable. : le web design puisé à la source 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. 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

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit HTML 5 Canvas Tutorial - Drop Shadows While working on the Pulse graphics engine I'm learning all kinds of new techniques and tid bits about Canvas. One of the latest things I've been playing around with and working on is creating shadows. This is actually pretty easy with the JavaScript drawing api available for canvas. Before jumping into the code there are a couple of items to note. That'll spit out something like the following. Looking at the code it starts out by grabbing the canvas and then the context from the canvas. shadowOffsetX - the horizontal offset for the drop shadowshadowOffsetY - the vertical offset for the drop shadowshadowBlur - the size of the blur of the drop shadowshadowColor - the color of the drop shadow At a minimum the shadowBlur and shadowColor properties have to be set in order for the shadow to be used. That wraps it up for this tutorial.