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.
How we built our HTML email editor using liquid, wysihtml5 and premailer Managing email design and content is extremely important to our customers. From day one, we wanted to give our customers full control over the look and feel of their email. Here are our first iterations of email editing in Customer.io. The naive approach We started with a big old text box using Ace editor for syntax highlighting. We started dogfooding the editor to manage our transactional, triggered and drip HTML emails that we send to customers. We love the static-site generator Jekyll. Separating Content from Form We were already merging content into emails using Liquid e.g.: {{ customer.firstname }}. The first step is two html text boxes. This makes it easy to separate concerns. Making it easy for everyone to write emails So, now we have some separation. After looking at another option, we implemented a slick WYSIWYG editor, WYSIHTML5. What’s great about this is we’ve limited what’s available in the WYSIWYG portion of the editor. Putting it all together inline the styles
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
xing/wysihtml5 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
ejholmes/active_admin_editor 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.
Saving Canvas Data as an Image Over the past few months, we have talked quite a bit about HTML5, more specifically canvases. There are plenty of other interesting HTML5 subjects canvases offer, which makes it by far the most fascinating and flexible object. We have covered topics ranging from simple rotations to photo filters. Today we are going to go over how to take your canvas and save it as an image. Introduction Getting the pixel data from a canvas is fairly simple, as we learned in the grayscale filter tutorial. Before we get started with some code, it should be noted that you can only get image data, in any form, from sources on the same domain on the canvas. As a result, due to the constraints of having javascript on the page on Tech.Pro Tutorials (only fiddles allowed), we do not have a demo, however all of the code needed to get started is below: HTML Example Digging In Now, the code to get your image data is actually really straight forward. Once you have this string, you can use it many different ways.