Archive for the ‘javascript’ tag

Tips for developers: When Javascript meets modularization…October 17th, 2012

Javascript belongs to those programming languages which easily divides people between those who love it or hate it, especially when like me you have a strong background in Java. Some differences in the general philosophy of the language are sometimes not trivial to grasp. But imagining today a web world without javascript is a pie in the sky :-)

There would be a lot of things to discuss around this subject but today I want to talk about an important concept : modularization. There are no built in namespace and/or encapsulation concepts in Javascript available today in our browsers and this could have important consequences at Runtime. This is very annoying when you have to deal with lots of different script files written by different people, and this is more and more true nowadays where projects combine homemade scripts including Javascript frameworks (JQuery, Prototype, Dojo,…).

Of course, Javascript programmers quickly noticed this issue and proposed several workarounds and design patterns to deal with it : one of those is known as Module pattern (you can find a description of it at http://briancray.com/posts/javascript-module-pattern). Some frameworks also provide their own ways to reduce conflicts with other frameworks (especially when using the “$” alias) but it seems clear many people are unhappy with the current situation.

Another problem concerns dependencies and versions.  For instance the well known JQuery UI toolkit is based on JQuery core framework and therefore you need to load the second one in order to use the first one. Moreover, before using a cool third party JQuery widget, you have to make sure it will fit well with the version of JQuery used on your project. You may argue those problems are not currently solved perfectly in Java world either since there are specifications such as Jigsaw which aim to deal with it in Java 8 9. However Java is a static language which significantly reduces those issues at compile time and thanks to Maven POM definitions, we can also solve most of the possible issues at runtime.

Several initiatives have emerged in the Javascript world to solve those encapsulation and dependency issues. The clear winner today, on the client Javascript side, is the Asynchronous Module Definition format which has been adopted by Jquery, MooTools, Dojo and others… which basically works through 2 functions define and require. Then you will be able to lazily load dependencies via a script loader such as requirejs or curl.js. You can find more information on this well written article on http://addyosmani.com/writing-modular-js/.

Those issues explain why module concept should appear in the next ECMAscript version, known as Harmony, why is expected for next year. It is also important to note that the Javascript alternative from Google, known as Dart, includes some form of modularization.


Share and Enjoy:

blue-infinity develops new mini-site for Vacheron ConstantinApril 23rd, 2012

Vacheron Constantin entrusted blue-infinity with designing and producing an online communication platform for its new and very exclusive service called “Atelier Cabinotiers” so b-i created a mini-site that allows customers to discover this elite offering.

A special dedicated team at Vacheron Constantin is in charge of dealing with the special orders, from the design all the way to the production of the beautiful unique and completely customised timepieces.

The watchmaking company wanted to present and highlight:

  • A completely tailor-made service
  • A service that perpetuated its traditions
  • A service that highlighted Vacheron Constantin’s know-how

After an introduction video on the site, customers are invited to explore the service and its various aspects via five sections illustrated by a full-screen slideshow. The animations are entirely generated via HTML and Javascript technologies, which make them viewable on an iPad.

The project is still evolving and will feature new elements that will create a relationship between the client and the dedicated team.

The mini-website is accessible from the main menu on the Vacheron Constantin website, or directly using this URL: http://www.vacheron-constantin.com/en/atelier-cabinotiers-custom-watches.


Share and Enjoy:

Adobe + HTML5 = EdgeSeptember 1st, 2011

Programming without code? Well…

Five months after releasing Wallaby, an experimental tool designed to convert Flash animations to HTML5, Adobe has once again established it’s position as a major player in Web technologies with Edge.

Adobe Edge allows you to create rich animation directly in HTML5 (using CSS and Javascript) without a line of code.  

It reminds me of Flash in the late 90′s, but can be run on mobile devices which do not currently support Adobe’s Flash player.
 

Basically it’s pretty much the same; creating a new project will open a blank “stage” in which you can import image files (JPG, GIF, PNG or SVG) and add basic shapes and texts. The properties of each type of asset can be modified (transparency, size, position, colour etc.) and animated using “keyframes” within the timeline. The animation preview is rendered using Webkit, and Adobe claim the animations have been tested on Android, iOS, and other Webkit-based browers along with Firefox, Chrome and Internet Explorer 9. 

Publishing your animation will result in a bundle of files: HTML, CSS and Javascript; and it appears that it can be easily integrated into an existing HTML file without change. Its currently a preview version and is far from being perfect, but what we are seeing at will release another preview or (fingers-crossed!) a final release.

With the technology only in the preview stage, industry voices are expressing mixed opinions about Edge. According to netmagazine.com, there are concerns regarding the absence of SVG and canvas, which many would expect from a HMTL5 tool. Adobe have responded by reassuring developers that this is by no means a complete product, and that Edge will be evolving rapidly. We will have to wait and see what happens; in the meantime, this discussion can be followed over at the Edge forum.

Adobe offers an overview of Edge in the video they released in late June (below), however you can now also download the preview version from Adobe Labs and give it a try – let us know your thoughts!

 

 


Share and Enjoy:

Getting started with jQuerySeptember 20th, 2009

What is jQuery

jQuery is a JravaScript based framework that emphasizes interaction between JavaScript and HTML. The main goal is to simplify common commands of JavaScript. It was first realized in the beginning of 2006. jQuery is free, open source software Dual-licensed under the MIT License and the GNU General Public License.

The jQuery file can be downloaded here (http://docs.jquery.com/Release:jQuery_1.3.2).

jQuery contains the following features:

  • DOM (Document Object Model) element selections using the cross-browser open source selector engine Sizzle, a spin-off out of jQuery project
  • DOM traversal and modification (including support for CSS 1-3 and basic XPath)
  • Events
  • CSS (Cascading Style Sheet) manipulation
  • Effects and animations
  • Ajax (asynchronous JavaScript and XML)
  • Extensibility
  • Utilities – such as browser version and the each function.
  • JavaScript Plug-ins

Microsoft has announced plans to bundle jQuery initially in Visual Studio for use within ASP.NET AJAX framework and ASP.NET MVC Framework.

jQueryChart

Read the rest of this entry »


Share and Enjoy:

jeremy.cottino

Written by Jeremy Cottino

September 20th, 2009 at 4:29 pm