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.

Getting responsive design to work

I was recently working on a web site and wanted to make it work across several mobile devices. In my case I was testing on an iPhone 4, Android Tablet and an Android phone. So no big deal, I created three different CSS files to cover the range of devices, namely phones, tablets and PC. The low level details are that you create the different CSS files and then specify which one to use based on the screen size using CSS media queries, like so:

<link rel="stylesheet" media="all and (max-width: 320px)" href="site-max320.css"/>
<link rel="stylesheet" media="all and (min-width: 361px) and (max-width: 800px)" href="selene-max800.css"/>
<link rel="stylesheet" media="all and (min-width: 801px)" href="selene.css"/>

However, once I started testing on the phone and tablet something wasn't working right. It was like the mobile browsers were ignoring the media queries; they were auto-zooming out to display the web site in its entirety, which was not what I wanted. After some googling, I discovered that you have to tell the browsers scale the content to the width of the screen, this way the media queries will be taken into effect. To accomplish this, you have to put the viewport meta data tag in the head of your HTML document, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

Once I added this meta data tag, it all worked as expected :) A more detailed explanation about this meta data tag can be found here.

Adobe Inspire

Once upon a time, Adobe used to have something called the Edge Newsletter, which was renamed earlier this month to Inspire Magazine. Its actually a nice little web site, with some interesting articles about Fluid Grid Layouts in Dreamweaver 6 (on my to-do list), a post about web standards, web site design with Fireworks 6 and so on and so forth. So I recommend you head over there and check things out, you might find something interesting to read about!

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!

More info on Adobe Shadow

In my last post I spoke about Adobe Shadow, their new tool for test web applications on various mobile devices concurrently. Since then, Adobe has posted a couple of short videos displaying the capabilities of Adobe Shadow. So what are you waiting for, click on the links below to check them out!

• Shadow Intro
• Remote Inspection

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!

Editing CSS on the fly in Firefox 11

As a developer, designing the look and feel of an HTML site using CSS can be a tedious task. Trying to get the dimensions of components or the colors of elements just right, can surely take its time. Thankfully over time, on-the-fly editing of CSS styles has been added to browsers and this is a great help. If you use Firefox or Chrome, you know what I am referring too, where you can right-click on an element on a page and then select "Inspect Element" using the context menu allows you to see all associated styles, make changes and see the effects of those changes directly on the page. 

There is one complaint I have with this on-the-fly editing method and that is that the UI used to make the changes is too small and can be a pain to work with sometimes. However with the upcoming Firefox 11 release, there has been a new feature added, called the Style Editor. You can access the Style Editor by hitting SHIFT-F7. What it does is display a floating window (see below), that allows you to access all the CSS files associated with the currently displayed page and then make changes on the fly. So nothing new there, but it's more akin to working in your favorite editor and even allows you to save the CSS to a file. It also provides Import functionality, which allows you to quickly load different CSS files and see the effect they would have on how your page looks.

I believe this to be a great development tool going forward, so get the Firefox and give it a try!