Category Archives: design

design, development, php, professional, software development, web authoring

JetBrains WebStorm 2.0 and PHPStorm 2.0 First Look

1 Comment

I respect JetBrains, an IDE company which survives despite intense competition from free tools such as Eclipse and NetBeans. It does so because developers like the products, especially the IntelliJ IDEA Java IDE. The tools are focused on coding; there are few visual designers but lots of coding help, such as code completion, refactoring, find usages, and fast navigation. The tools are also relatively lightweight, so start up quickly, and generally run on Windows, Mac OS X and Linux.

The latest from JetBrains is two related web development IDEs. WebStorm 2.0 is for general HTML/CSS/JavaScript work, and PHPStorm 2.0 is a superset of WebStorm which adds PHP editing and debugging. There is also some support for Adobe’s Flex and ActionScript code.

New in PHPStorm is PHP 5.3 support, Zend Debugger support, improved SQL editing, support for the Mercurial source code management system, and updates for HTML 5 and EcmaScript 5.

I am interested in these tools since HTML development is increasingly important. Browsers are getting increasingly powerful, with HTML 5 and fast JavaScript engines challenging plugins as rich application runtimes, and PHP is less well served by IDEs than you would expect considering its popularity.

My first impressions though are mixed. I noticed a lot to like, in particular the work JetBrains has done on supporting mixed languages: HTML, JavaScript, CSS, SQL,XML and so on. One of its features is that code completion works even within quotes. For example, if your PHP is outputting HTML to the browser, code completion still works. Most editors treat anything within quotes as plain text rather than as code.

image

The IDE is highly configurable and also supports plugins. Live templates let you expand abbreviations to code fragments. There is support for generating documentation with JSDoc, ASDoc and PHPDoc. Testing with PHPUnit is integrated. These are products that will appeal to developers who are code-oriented – are there any others? – and who like the ability to fine-tune their tools to improve productivity.

That said, I did not find it easy to get started with PHPStorm. The main challenge is configuring your PHP environment to support debugging. I have not yet succeeded, though I have not spent all that long on it. Difficulty getting PHP debugging working seems to be the biggest single topic on the support forums currently.

I know this is tricky and it took me a while to get it working with Eclipse. It is important though, and anything the tools vendors can do to make this easier to setup would be welcome. There is a case for simply installing a dedicated LAMP or WAMP server with the product so that developers get immediate and reliable support for PHP debugging, with the option to configure for their own PHP server later.

Another thing I found annoying was the over-zealous spell checker, which seems inclined to check variable names as well as being unaware of PHP extensions like mysqli:

image

I expect there is a way to fix both issues by configuring the product.

In general JetBrains does not seem to suffer from the “not invented here” syndrome and uses open source libraries and tools; in fact it depends on Firefox for JavaScript debugging, and automatically installs its own plugin to improve integration.

image

However I picked up a note of disapproval in the description on the Zen Coding site about the way JetBrains has chosen to implement Zen Coding abbreviations:

These plugins are developed by third-party and has their own ZC engine implementation, which leads to different feature set and abbreviation syntax. Zen Coding team has no relation to this projects

WebStorm is modestly priced at £54.00 for individual developers or £115 per concurrent user for organisations.  PHPStorm is £77 or £154 on the same basis. Free licenses are available for education or for open source projects, on application.

Competing products include the free Eclipse PDT and NetBeans, the commercial Zend Studio, and for a more designer-friendly approach to PHP, Adobe Dreamweaver CS5.

design, web authoring

Review: Web Design for Developers by Brian Hogan

2 Comments

The title of this book struck a chord with me. I’m comfortable with code but I don’t find design easy. Design is not magic though, and design skills can be learned. Maybe a typical developer will never be a great designer, but the ability to create web pages that look professional and attractive should be achievable.

Brian Hogan’s book Web Design for Developers (Pragmatic Bookshelf) looks like it might be the answer. Sub-titled “A programmer’s guide to design tools and techniques” it is aimed at developers who have “little or no design background”.

The book starts well, with a section called “The Basics of Design”. There are chapters on sketching out a layout, selecting or creating a colour scheme – with helpful insight into something that seems from outside like a black art – and a chapter on fonts and typography, explaining mysteries like the baseline grid and leading.

Hogan makes an interesting comment about fixed font sizes and accessibility. It used to be assumed that relative fonts are better for accessibility, as you can use the browser to increase the size. Hogan argues that zoom tools in the application or the operating system are better, since resizing fonts while images remain fixed makes a page look bad, so it is OK to use fixed font sizes.

The next part covers graphics, using Adobe Illustrator and Photoshop; Hogan says these are industry standards and you should use them if possible. There is a chapter on logo design, and three chapters creating a design mock-up for a web page, including a detailed step-by-step on designing an icon. Useful chapters, though I would have liked this section to be longer. There is too much on the mechanics of using Photoshop, and not enough on the design decisions themselves. How do you go about deciding what size each section of a page should be? How do you avoid making a page too busy and cluttered, or leaving too much space so that elements look detached from one another? What’s the secret to adding decorative elements without making the page look like a flashback to Geocities?

Unfortunately, rather than drill further into these topics, Hogan devotes the rest of the book to more mechanics, including working with HTML and CSS, how to achieve compatibility across different browsers, exporting images from Photoshop, search engine optimization, and performance issues. There’s plenty of good advice, though some is out-of-date: Hogan says that “at the time of writing, IE 6 has more active users than Firefox”. That is no longer the case.

Although these are important topics, to my mind they are not especially challenging for developers, who know how to look up a CSS reference or figure out how to deal with cross-browser compatibility. Working out how something should look is more challenging than the implementation.

Hogan lost the “for developers” focus and ended up writing a book that could better have been called “Web Design Essentials” or something similar.

Not a bad book then; but not what I was hoping for. I do think the general topic of “Design for developers” is under-served, especially as design has become far more important in the last few years, for numerous technical and strategic reasons, and would like to see further books on the subject.

 

adobe, design, microsoft, software, software development, vista

The new power in computing: design-centric development

I’ve been mulling over the insights from Microsoft’s Remix 08 conference in Brighton, and in particular Bill Buxton’s contention that it was a focus on design that saved Apple, and that a focus on design is the only thing that can save Microsoft.

It is all very well to nod heads and agree that design is a critical matter; but we are generally not good at integrating design into the software development process. One of the problems is that most development methodologies that I have seen do not address this matter well. In fact, one of the problems is that we do not know how to talk about design or even what it is. When Martin Fowler wrote Is Design Dead he meant something different from what Buxton is talking about. Design is fuzzy and hard to measure.

The best I can come up with at the moment is that design is about user interaction. If software is about input –> processing –> output, then design is about how you do the input and get the output. Design is not about appearance; but it includes appearance. Design is not engineering; but design problems can sometimes be solved by engineering and vice versa. Design is not functionality; but doing the right thing at the right time is within the scope of design.

One of Buxton’s themes is the importance of transitions. How you get there is as important as what you get. This could mean visual effects, or what you have to press or click or move to get from one place to another. Think of the way Vista users get annoyed by having to go via a Network and Sharing Center to get to what they want, the Network Connections dialog; that is a design failure. Or all that discussion around Vista’s shutdown options provoked by Joel Spolsky’s somewhat unfair article. Design issues, of which there are many other examples

Design is ascendant for several reasons. One is that increased computing performance has given designers more freedom, though that also means there are more ways to get it wrong. Another aspect is that falling prices have made adequately powerful personal computers (or for that matter MP3 players) a commodity, and design is now key to differentiation. Third, the Web has focused minds on the minutiae of design, as sites compete for user attention. Macromedia’s (now Adobe’s) work with Flash has been a big influence, especially after the company joined the dots back in 2002, and started to promote Flash as a means of improving the user experience in applications.

If I reflect for a moment on the last 30 years or so of software development, it is easy to pick out ideas that have really made a difference. Object orientation. The graphical user interface. Test-driven development, and another big insight of the Agile movement, participation between all stake holders.

I suggest we should add design-centric development to that list, even though at this stage we are not sure how to do it. There’s been a lot of discussion about designer/developer workflow, and a few tools and ideas from Adobe and Microsoft that help to enable it, but this is only scratching the surface. Further, with their focus on graphics and graphical effects, they make it hard to distinguish between design and decoration.

So how do we do design-centric development? Learn from Apple and Google is one answer. Have developers and designers in the same room, or appoint more designers to the board, could be another. I think this topic is one that deserves, and will get, lots of attention in the next few years.