background preloader

Best Practices for a Faster Web App with HTML5

Best Practices for a Faster Web App with HTML5
While good, this article only tells part of the performance story. View for the whole picture of performance improvements. Introduction Much of HTML5 aims to deliver native browser support for components and techniques that we have achieved through JavaScript libraries thus far. Using these features, when present, can end up delivering a much faster experience for your users. Tip 1: Use web storage in place of cookies While cookies have been used to track unique user data for years, they have serious disadvantages. These two web storage objects can be used to persist user data on the clientside for the length of the session or indefinitely. Tip 2: Use CSS Transitions instead of JavaScript animation CSS Transitions give you an attractive visual transition between two states. By adding the toggling the classes of totheleft and totheright you can move the box around. Tip 3: Use client-side databases instead of server roundtrips No guarantees, though. :)

Handlebars – SproutCore The following post refers to SproutCore 2.0, which has split off as a separate project. However, the information within this post is entirely applicable with respect to using SC.TemplateView and Handlebars in SproutCore 1.8. If you wish to use SC.TemplateView in SproutCore, you only need be aware that the many views and controls in the Desktop framework may contain templates, but should not themselves be contained within templates. When people check out SproutCore 2.0 for the first time, one question that they frequently ask is: Do I have to use Handlebars? Handlebars, if you’re not familiar with it, is a semantic templating language written entirely in JavaScript. Handlebars, unlike other templating solutions like Eco, doesn’t tempt you to embed domain logic in your HTML. So, while the answer to the question is use whatever templating system you’d like, we think Handlebars is a great option.

Non-Jquery Page Transitions lightweight | Free software downloads Dart : Structured web programming Mobile Web Apps: Loading PagesBuildMobile This is the fourth excerpt from the book “Build Mobile Websites and Apps for Smart Devices” by Earle Castledine, Myles Eftos and Max Wheeler. BuildMobile is exclusively publishing a complete chapter from the book, the chapter on Mobile Web Apps, and this section is called “Loading Pages”. Now that we’ve learned the basics of handling touch screens, and picked up a couple of quick wins by optimizing our links and forms, it’s time to roll up our sleeves and get to work on the biggest component of just about any mobile web app. Unless your application is very basic, chances are you’re going to need more than a single page, and therefore, you need to think about how to switch between pages. Putting everything on one page, and then hiding and displaying sections as requiredLoading in new pages via AjaxIncluding only the complete skeleton of the app up front, and then bringing in data as required The approach you take will depend heavily on the application. 4.1. 4.2. Let’s start on the CSS.

TurboManage Schepp/CSS-JS-Booster Build HTML5 and Flash Charts & Graphs for Web Applications Build interactive HTML5 charts using our JavaScript charting library and feature-rich API set. Render them in any browser and on any device. Export them quickly and easily. ZingChart offers the flexibility and resources to create stunning visualizations. View the Chart Gallery Want fast web charts? Want to do dataviz like the big boys? We needed a charting solution that is fast, scalable, and looks good. We now provide the most comprehensive and sophisticated financial charts in the industry and ZingChart helped us achieve that goal.Richard Radnay / CTO/CIOXTF, Inc. Download a Free Trial See Our Pricing

Gérer ses dépendances JavaScript avec Google Closure Compiler / Library (1 / 2) JavaScript ne propose pas (encore) de moyen d’organiser son code et notamment de déclarer les dépendances entre les différents fichiers JavaScript de votre projet. Dans un langage compilé comme ActionScript ou Java, vous avez les directives « import pack.sub.MaClasse » qui vous permettent d’indiquer au compilateur qu’une classe requiert une autre classe pour fonctionner. Si vous avez quelques dizaines de lignes de code JavaScript dans votre projet, vous pouvez toutes les mettre dans un seul fichier ou directement dans le fichier HTML mais quand vous commencez à avoir plusieurs centaines / milliers de lignes de code, vous allez rapidement découper votre code en différent fichiers. Comme il n’y a encore rien dans le langage pour vous aider, plusieurs librairies / systèmes ont été créés, notamment: Pour en apprendre plus sur RequireJS, une des plus populaires, je vous conseille de lire ce très long et très bon article @mklabs : RequireJS ➤ mo-du-la-ri-té ! goog.provide(…) goog.require(…)

Building a Custom HTML5 Audio Player with jQuery « Neutron Creations We recently built an HTML5 audio player for Tim Van Damme's The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we'll run through the code to explain how it works, covering a few caveats along the way. Here's the player interface, and the markup for it. As you can see, we have a few span elements for each component of the interface: playtoggle is the play/pause toggle button. gutter is the timeline track loading is the bar indicating the loading or buffering progress handle is the circular element that serves as the playhead, indicating current position in the audio file, and also acting as a drag handle to move to a different point of the audio timeleft is the play time remaining, in minutes and seconds We won't cover the CSS for the player here, but if you want to see how it's styled you can inspect the styles on the live site. if(!!