jQuery support in Dreamweaver CC

jQuery is one of the most used JavaScript libraries out there and the latest version of Dreamweaver, called Dreamweaver CC has enhanced its support of the library. You can see a demo video of the new features here. Not only have they added support for jQuery UI Widget (Dialogs, Accordions, Menu, etc...), but it also adds support for jQuery Mobile, so that you can quickly built HTML5 application that will run on a variety of devices. You can learn more about Dreamweaver CC here.

HTML5 / CSS / Javascript documentation

One of the best tools we have at hand when developing is online documentation. Online documentation is available for many programming languages such as Java, PHP, Ruby and can also be found for application frameworks such as jQuery and Spring.

For HTML, CSS and JavaScript, I typically go to the W3Schools web site to look something up and it has been a great resource for many years. Recently however, Adobe put forth a community drivin Web Platform Docs wiki site for all related web technologies. Although the site is currently in alpha form, it seems to have gotten off to a very good start. So I suggest you head on over there to take a look and contribute if you can :)

Other sites that I typically go to for such information is caniuse.com and the HTML5 comparison of layout engines.

Brakets, the code editor

I've been doing a lot of HTML/JS/CSS development in the last year and most of this work has been done in Eclipse. Now Eclipse is good for this type of development, but with many 3rd party JavaScript libraries out there, it is hard to find good support for these libraries in IDEs.

So I am always trying to find a better HTML/JS/CSS code editor, having used Dreamweaver, Sublime Text and WebStorm over the past year, and now we have Brackets.

Brackets is an HTML/JS/CSS code editor, developed, interestingly enough in HTML/JS/CSS :) And it's goal is to be an editor focused on HTML/JS/CSS development. Right now, the currently available download could be considered beta 1 (or perhaps not even that) and offers very little. It does have two interesting features however. First, it connects with your browser, so as you edit your file(s) and the browser will auto-refresh to show you what your changes look like. Secondly, if you highlight say a Javascript function call or a CSS class and hit CTRL+E, you will get what's called "Quick Editing". Quick Editing, allows the related piece of code from another file to appear in an overlay in the current file so you can make changes right away and save them. Saves you the hassle of having to go open a file and look for related piece of code.

Apart from that, Brackets doesn't offer much, for now. There is no code auto-completion of any kind, as this editor is still in its infancy. And hopefully at some point, it will have 3rd party library support as well. You can actually recommend features or vote for exiting ones here. But it will be growing from week to week, so I recommend, checking it out from time to time, or even contributing to the project if you can!

Adobe releases Shadow beta

In this mobile crazy world we work and live in today, as web application developers one of the hardest things to do is testing. With all the various devices and all the various screen sizes, testing your web application to make sure it looks and works properly in various permutations can be a difficult thing.

Enter Adobe Shadow, an inspection and preview tool. Here is how it works. You link a device (phone, tablet) to your main computer and then as you browse your web site on your main computer, the same web site automatically appears on your linked device(s). Furthermore you can remotely inspect the DOM and CSS from the web browser of the device, make on-the-fly changes and see them take effect in real-time. This is a great way to do testing across different devices and get your web application just right. Check out the quick tutorial video to learn more!

HTML5 Local Storage vs Session Storage

Some new features in HTML5 are really useful, like Web Storage, but you have to make sure you understand how it works and make sure you use it in the correct scenarios. There are actually two ways that HTML 5 Web Storage works: local and session storage. I ended causing some end-user confusion by using local storage all the time, so here is breakdown of how both work and when they should be used.

Local Storage

When using window.localStorage, the data associated to this object will never expire. So long as you don't uninstall your browser (or forcefully delete the data), the data held within this object will remain forever.

So a good example of using localStorage is when you have a web application where you create data and want to remember the last country selected, so the user doesn't always have to re-select it. So write your JavaScript code to remember the last country used and then retrieve it the next time the user comes to the page to preset the last selected country.

Session Storage

When using window.sessionStorage, this data will only be retained for a browser session. Meaning that once the user closes the browser instance, the data is gone.

This is useful when you have a search page and want to always retain and show the last criteria entered by the user. But once the user closes the browser, you want the data to be gone, so when he or she re-enters your application the next time, they start with a fresh page.

Two great books to study JavaScript

Since I've been concentrating mostly on Flex development since 2004 and have been getting back to JavaScript development in the last year, I thought it would be a good idea to get a couple of books to refresh my skills. Thus I've listed below two books which I've picked up recently to this effect:

• JavaScript Patterns
• High Performance JavaScript

I've just started reading the second book and I must say both books are well written and are worth the dollars I spent. Both are for intermediate to advanced level and you sure do learn some little nuances of the language that go the extra step to help a developer write the most efficient JavaScript code. So go check them out and become and better developer!

My mini-browser review

Being the first post of 2012 and seeing how I am currently brushing up on my JavaScript skills, I'd thought I'd post a mini-browser review.


Chrome
Over the last month, this has been my browser of choice at both home and work. Based on my perception, it is the fastest browser out there. It is also smooth (meaning initial start-up & opening app tabs) and when something goes wrong, you can just open up the Chrome Task Manager and kill the offending tab. I think its what most people think Firefox should be like. The only downside is that the developer tools are clunky to work with.


Firefox 4+
I have always love this browser from the start and it has been my main browser since then. But do I dare say, it seems bloated at times? The initial start-up can cause it to freeze for 30 secs (with only 2 app tabs mind you) and if a tab crashes, it takes a moment or two to recover. But for development purposes, its tools are unmatched.


Internet Explorer 9
I just can't use it. Its UI, while trying to catch up to Chrome and Firefox is still ugly. Some web sites still don't render properly and it is still behind its in implementation of HTML5/CSS3 web standards. Also how many releases have Chrome and Firefox have their been since IE9 came out? That's what I thought. Slow output from a company that needs to greatly pick up the pace. I'll wait till version 10 to see if my mind changes.


Opera 10+
I think Firefox stole its UI :) I use it from time-to-time to just see what it can offer and its pretty good. Pages load fast and it has interesting built-in development tools. How fonts look could use a little work however. It truly is the little browser that could.

When is Javascript going to be updated?

Do you know since when has JavaScript been around? Well if you don't, I'm going to tell you. 1995. That's 16 years ago and since then, it feels like the language has not evolved one bit. Well at least it doesn't feel like it. Having worked with ActionScript allot over the recent years, it makes me yearn for the day that JavaScript takes on some of its characteristics. So here are a few random thoughts on the subject:

• Why is everything still loosely typed? Why can't I declare the data type of my variable. Once we are allowed to do this, it also means we have greater support for the language in our development tools, meaning less typo mistakes and shorter development times.
• When will we be able to finally declare a class like any normal person can. You know by using the class keyword. No more of this everything is a function mumbo jumbo. Proper class inheritance would be nice as well.
• How about having a compiler that can run through our code, to advise us in advance of any syntax errors. Rather than random discovery at run-time of any simple programming errors.