Brackets is now Adobe Edge Code

I recently wrote about Adobe's foray into creating an HTML/CSS/JavaScript code editor called Brackets. Since then Adobe has created the Adobe Edge Tools and Services platform, which contains a suite of tools to help developers build better web applications and as such, Brackets has become Adobe Edge Code within this suite. The difference between the two is that Adobe Edge Code integrates with other Edge tools such as Edge Web Fonts and PhoneGap Build; while Brackets remains the open source version of the code editor. The open-source Brackets web site is still maintained on GitHub.

You can currently download the preview of Adobe Edge Code from the web site to give it a try if you are interested. I wrote about some the features in a previous post here. Also, if you want to see the editor in action, there is great demo video that can be found on YouTube right here.

Enjoy!

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.

Firefox 15 is great for development

Firefox 15 was just released this week and I have been using it since the beta began and as far as I am concerned it is the best browser for development purposes. Let me highlight a couple of reasons why.

Working with CSS
A lot of times when developing a web site or web application, getting the "look" just right requires quite the effort. Up to now one of the best tools for working with CSS in Firefox was Firebug. However with the latest Firefox, you can just right-click on any element on a page and select "Inspect Element  (Q)" and you get to see all the properties of the element and adjust them on the fly and see what effect your changes. Now this has been there for a while, but with version 15, in the bottom-right corner, you now get visual tool showing you the overall size of the element and the size of each of its properties (borders, padding and margins). Quite useful, here is a sample:

Testing for Mobile
As we go along in 2012 and beyond, a good portion of work will require us to make sure a site is mobile-ready. So if you are doing Responsive Design (using CSS Media Queries), you can now test your design in Firefox 15 without the need of having various physical devices. Simply navigate to the site and select from the Firefox menu, "Web Developer > Responsive Design View" and you will be able to see how your site looks based on some predefined screen resolutions that are available.

So happy developing using Firefox 15!

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!

PHP Namespaces

I've been working on a PHP project lately and when I started working on it, I remember thinking to myself that there must be the equivalent to Java packages in this language. Otherwise loading/including/referencing classes from another class can be a bit of nightmare. There is the common PHP autoload pattern, but I find this is not enough and so I kept on digging and eventually ... success! Since PHP 5.3 there is the concept of PHP Namespaces, similar to Java packages which is very helpful in creating re-usable code. Basically in your class declaration, start it off with putting your namespace definition before anything else, like so:


namespace acme\utils;

class User {
...
}
?>

And then you can re-use your class from another class or PHP file, like so:


namespace acme\business;

use acme\utils\User;

class ProcessCommand {
...
$user = new User();
...
}
?>

Hope that helps and happy PHP coding!

Learn to build

There are a lot of technologies out there these days to work in: Flex, PHP, HTML, CSS, JavaScript, Ruby, the list goes on and on. And each one of them has their place in the grand scheme of things, each with its own strengths and weaknesses, each with its own particularities and each one has its appeal.

At some point in time, you will have to use one technology or another to get a job done, be it either by your own choice or because it is a requirement. And the technology of choice might not be one that you have used before. So what are you to do? Grab a book of course and starting reading. I've done that many times in the past. Another way is to read online tutorials and yes I've done this many times before as well. But honestly, the best way to learn is to ... build something! Ain't nothing like writing the lines of code yourself and seeing the results unfold right before your eyes. Really its the best way to learn, I can't stress that enough. It's the best way to learn the little hidden details of a language (or just a technology or framework for that matter) and to put what you have been reading into practice and really get a good grasp on things. You don't have to build anything complicated, just a simple contact manager will do, just enough so that you can really understand how something works.

So like my blog post title says, "Learn to build", or more like "build something" to "learn" :)