background preloader

Top 5 Considerations for Transitioning from Flex to HTML5 - Mindshare - Universal Mind

Top 5 Considerations for Transitioning from Flex to HTML5 - Mindshare - Universal Mind
The web application landscape has shifted rapidly in the past six months. Due to Adobe’s changing view of the Flash Platform, many companies who have relied on technologies like Flex are looking to migrate to HTML5. This transition can be tricky both for an organization as well as its developers. Here are five steps that should be some of the first an organization takes in this process: 1. Many developers will quickly become overwhelmed when examining the options for HTML5 web application frameworks. Within JavaScript you will find frameworks that differ greatly on each of these points. There are several key points to consider when making this decision for your organization: How documented is the framework? If your company is attempting to decide on an MVC architecture, I would recommend examining Backbone JS, Ember JS, Angular JS, and ExtJS / Sencha Touch. In addition, your team can augment the framework that you have chosen over time. 2. 3. 4. 5. Conclusion Related:  HTML

JavaScript Performance Best Practices This article gives valuable guidance for building faster web applications. The article is a collection of guidelines from various sources. Case study: Tips and tricks for improving JavaScript performance Tips & tricks in this article were collected from the developer experiences when creating an example application. Overview Source: Efficient JavaScript - ECMAScript First understand the big picture and the major component of the stack affecting the performance. Pick your battles. There are many interrelated components that play an instrumental role in the real-life web application performance such as those responsible for layout, rendering, parsing HTML, marshaling, DOM, CSS formatting, JavaScript -- as you see, JavaScript is only one part of the performance equation. The most expensive operations tend to be reflowing the layout and repainting. DOM access Interaction with the DOM is usually slower than normal JavaScript code. eval with for-in loops Core JavaScript pitfalls Slow: Faster: Faster:

Test plan Meet Grunt: The Build Tool for JavaScript If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in. But what do you use if the project is primarily JavaScript? That’s the problem Ben Alman set out to solve when he created Grunt. What exactly is Grunt? Grunt is a task-based command line build tool for JavaScript projects. Here’s the idea: when working on a JavaScript project, there are a bunch of things you’ll want to do regularly. That’s what Grunt aims to be. For more Grunt intro goodness, see Ben’s post on his personal blog and the Bocoup blog. Grunt is built on Node.js, and it’s available as a package via the Node package manager (npm). You’ll notice it installs quite a few dependencies; there are other npm packages that Grunt uses. You’ll notice a lot of initial output. Keep going and fill in the rest of the fields.

Code Conventions This is a set of coding conventions and rules for use in JavaScript programming. The long-term value of software to an organization is in direct proportion to the quality of the codebase. Over its lifetime, a program will be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and characteristics, it is less likely that it will break when modified in the never-too-distant future. Code conventions can help in reducing the brittleness of programs. All of our JavaScript code is sent directly to the public. JavaScript Files JavaScript programs should be stored in and delivered as .js files. JavaScript code should not be embedded in HTML files unless the code is specific to a single session. Whitespace Where possible, these rules are consistent with centuries of good practice with literary style. Blank lines improve readability by setting off sections of code that are logically related. while (true) { Avoid excessively long lines. Use line comments. Is

Important Considerations When Building Single Page Web Apps Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. There are numerous points to consider before building a new app; to make matters worse, the expansive web development landscape can be intimidating at the outset. I will expand on each of the points above in the following sections.

Flash Pro & CreateJS Following that is the handleComplete method. This remains almost identical to what was published, except that now it removes the Platypus instance that was on stage. We’ve also enabled touch interactions on our stage, so this game can be played on an iOS device. Quick Tip: In a more complex project, you’d likely get rid of the exportRoot , and add elements to the stage directly. This removes a layer from your display list, which makes elements easier to reference and performs a tiny bit better. Another important change we’ve made is to change the Ticker listener from stage to our tick function. Quick Tip: I’m keeping things simple here, but generally you should create a class that encapsulates your logic and register a method on it with Ticker, instead of polluting the global (window) scope. Adding game logic The tick function is called 20 times per second, and is the heartbeat of the game. Finally, and very critically, we call stage.update(). Handling interaction

Styling Checkboxes and Radio Buttons With CSS and JavaScript This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and drop down menu select lists. Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The example This script is stand-alone and does not require jQuery or other library to work. View a more comprehensive example How does it work? In a nutshell, the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked. Download the full script Download the CSS file To get the checkboxes, radio buttons and select boxes to work properly, you'll need to change three variables in the script: checkboxHeight, radioHeight and selectWidth on lines 21-23. The CSS The HTML Checkbox Radio button Select list Usage

Canvas + - Create a Custom Select Box with jQuery In this tutorial I will be teaching you how to transform boring select boxes into well styled form elements that are perfect for custom web applications. Using custom form elements such as select boxes can give your website a unique feel and make it stand out from the crowd. By the end of the tutorial you will have a fully functioning custom select box. The HTML Code Firstly lets go over the HTML required for a normal select box. Now in order to create our custom select box we need to duplicate this HTML structure using div and span elements. In the normal select box the outer wrapper is a select tag this can be easily replicated by using a couple of div and span tags as below: As you can see we now have the first blocks of our select box. Next is the select options, these are to be placed after the selectArrow span tag like so: Each option is represented as a span tag which holds the value attribute and inner text like a normal option tag. Here is a shot of what we have so far: The CSS Code

Centiped testé sur. ISO country list HTML select snippet Included in this page are the HTML select/dropdown code snippets to generate a list of countries using the ISO-3166-1 and ISO-3166-2 codes. You can choose between ISO-3166-1 Alpha-2, ISO-3166-1 Alpha-3, ISO-3166 Numeric or the latest ISO-3166-2 codes. Consult the ISO-3166 Wikipedia page for more details. Some country names have accents and other non-ascii characters, so make sure to set your HTML page's encoding properly. ISO-3366-1: Alpha-2 Codes ISO-3366-1: Alpha-3 Codes ISO-3366-1: Numeric Codes

Environement de dev. JavaScript image combobox v3.3 | Marghoob Suleman Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object. I hope you'll like this. Preview: Feature at glance: Fully Skin-able Your original dropdown is safe, so your form post will not be messed.Can be created via JSON object. Image DropDown v3.3 Features Each dropdown can have own properties. Dependency: Jquery 1.2.6 or later. This jQuery plugin works perfectly without any modification. 1. 1.1 Have a look at original dropdown. <select name="webmenu" id="webmenu" onchange="showValue(this.value)"><option value="calendar">Calendar</option><option value="shopping_cart">Shopping Cart</option><option value="cd">CD</option><option value="email" selected="selected">Email</option><option value="faq">FAQ</option><option value="games">Games</option></select> Yes, This is a normal dropdown but I've added image path in "data-image" attribute. 2. You are done.