HERBERT CUBA GARCIA

It’s been a while since we gave you the SS 3.0 preview to play around with earlier in the year. Now we are getting serious. We are proud and excited to announce that SilverStripe CMS 3.0 alpha 1 and SilverStripe Framework 3.0 alpha 1 are ready to download and test now.

We’ve made the new CMS faster and more flexible. It shows an outstanding new user interface and last but not least; we separated the framework from the CMS and made it its own entity.

Alpha means this version is ready for you, the community, to test it and report any bugs you can find. Alpha also means that we don’t recommend using this version of SilverStripe for production sites yet, unless you did extensive testing on your own site first.

What's new in SilverStripe 3.0 alpha 1?

-Framework and CMS separated: You can now download SilverStripe Framework as a standalone tool without the CMS. That means more flexibility to build anything else than ‘just’ a website.

- New UI: The user interface has been completely redesigned to be more intuitive as well as more modern looking. You can switch between panels through Ajax, which will improve the overall loading performance. A collapsible menu with ‘fly-out sub navigation’ will save precious screen space.

While this is all still a work in progress, you can already start to see where we are heading with the new user interface. The interface is the result of interviews with users of our software and the interaction design work of SilverStripe Creative Director Felipe Skroski.

The main menus have moved from the top of the screen to the left hand side. The sitemap which used to greet you has now moved to its own section. The color scheme and visual aesthetic has been modernised. As a result, editing is done on a less cluttered page. At bottom right, a more visible 'Preview' button lets you see your work in progress.

- Preview function: You can now switch back and forth between the CMS and the previewed content much more easily. This will greatly speed up the work of CMS authors.

When you click preview, the page continues to show links back into the CMS ("<< Edit"), together with icons on the left hand margin of the page. You also get links to the Draft Site and Published Site to make it easy to see your changes. Yet to come, is a feature where you can see the page you are editing and the preview side by side, which will be available for users with wide screens.

- Add new page screen: SilverStripe CMS 3.0 makes more use of pop-up screens than v2.0. An example of this is the Add New Page screen. This is designed to make common tasks more intuitive to perform, and gives more space in the user interface. It has room for icons and descriptions of the various page types and therefore replaces the previous, rather unfriendly drop-down solution.

- Page tree: Based on interviews with existing users we decided to rebuild the sitemap editor. We just got started, but you can see that this now gets a full-screen interface rather than being squashed into the left hand side of the screen as is found in version 2.0. As we get closer to a stable version of 3.0, there will be more options for finding and performing actions on pages (e.g. publish, remove, etc.). There will also be a List View, which will help when you have thousands of items in the same part of the site, and need to use sorts and filters instead of painstakingly browsing to the page you want to edit.

- Themeable UI: It is now easier to customize the look and feel of the CMS UI.

- New ORM: A completely new ORM, based on lazy-loaded DataLists, gives developers much more flexibility.

- GridField, the ComplexTableField replacement: We have built a replacement for ComplexTableField from the ground up, based on the new ORM. This is still early stage, but you can already see that it is more reliable and flexible.

- Template language rewrite: The template engine has been rewritten, making it more reliable and adding a few key features.

- Javascript Rewrite: The Javascript of the CMS has been rewritten, built on a consistent base of jQuery, jQuery UI, Entwine. This will make it faster, more reliable, and more easily extended.

- Manifest builder rewrite: The manifest builder, which keeps track of the code in your site, has been rewritten to be more stable.

- Deprecation API: You can now choose which version of SilverStripe to show deprecation errors for; for example, you can see errors for features that are deprecated in v2.4 but not v3.0. We plan to use this API to build more upgrading tools.

See our changelog for more details and an upgrading guide.

Last but not least

These changes meant heaps of work under extreme time constraints for everyone involved. Many of you donated free time to help making SilverStripe a better tool. There is no better way to show your love for the tool you work with on a day to day basis, and for this your time is hugely appreciated.

Thanks to everyone involved in getting the alpha release out. Thank you for your discussion feedback on the mailing list, the pull requests and simply spreading the word on SilverStripe.

Special thanks goes to Edward Knight for his keen attention to detail on the page tree and ‘add page’ dialog, as well as Simon Welsh for improving our ‘MySQL database layer’.

But as you know; after the show is before the show. The next big milestone will be 3.0 beta at the end of the year, with stable to be expected in the first quarter of the new year.

What's next?

Here is a sneak preview on a few things that are on our roadmap for SilverStripe 3.0 stable.

- Continue developing the new UI: There is more work to be done on the user manager, files & images, and model admins, as well as polish on the core interfaces.

- Configuration system: A YAML-based configuration system will be added to the Framework, and will be used in place of the current static methods. This will provide better performance, be simpler for new users, and make it easier to add other tools such as GUIs on top of the config system.

- Dependency injection: Dependency injection (DI) is a pattern for defining how code is stitched together. We will be introducing a DI framework and using it throughout the Framework and CMS. This will make code more modular and testable. 

- Performance improvements: Building on top of the DI, ORM and configuration improvements, we will look to optimise the speed of the framework.

- More enhancements to ORM: We have more planned for the ORM, including filtering across relationships and lazy loading for better performance in MSSQL and PostgreSQL.

- More enhancements to GridField: We have more planned for GridField, including customizable search forms and pop-ups.

- Form validation rewrite: We will revamp the form validation to use existing jQuery plug-ins, as well as allowing more validation to happen at the ORM layer.

Stay tuned and don’t forget to test and report. If you find any bugs, please submit them here http://open.silverstripe.org/

It seems we narrowly avoided having the USA go bankrupt. The politicians have now agreed to loan themselves even more money. It is the same story in many other countries. The cost of running a country is rapidly growing out of proportion with reality.

Note: See a visualization of United States debt.

We see this all the time with Governments, but it is also a problem within many big companies. There is this idea that big business equals having to spend big money. If you are Government, you apparently have to choose the most expensive solution. And if you are an enterprise, you have to choose enterprise level solutions.

Let me give you three examples on a much smaller scale:

A Bridge + Plexiglass

I live in a small city with just 50,000+ people, and we have bridge spanning a stretch of water in front of the harbor. It is about a mile long. Over the years, there has been a problem that high winds caused big-rigs or trucks with high loads to crash.

So, the city council has now come with a plan. They want to put up a 6 1/2 feet barrier made of clear plexiglass, providing the needed protection without limiting the view.

It is a good idea, but here comes the problem. The city council has announced that they plan to spend $12 million on this - before even asking any contractor for a quote.

That is just stupid. You do not reveal what you expect to spend before asking for a quote. They can be certain that the cost is going to be exactly $12 million + about 30% in extra unpredictable expenses.

But this is only half the problem. Why $12 million?

I looked up two plexiglass providers and found that I could buy 1 inch thick, 61/2 feet high plexiglass, with enough sheets to span the one mile bridge both ways - for just $1 million. And that is without the huge discount the city would probably get for buying it by the ton.

Then we have to cost of iron support bars - add another $1 million... and labour cost. You could hire 10 people for a full year for just $500,000.

Total price: $2.5 million - or roughly a fifth of the budget.

Copenhagen Facebook

Back in 2007, the city of Copenhagen (the capital of Denmark) noticed this social thing starting out in the US, and wanted to create a social network for the people in Copenhagen.

We can all discuss the insanity of this idea. Why would people limit their social interaction to only the ones within the same city - instead interacting with their friends, regardless of where they live.

It flopped. They had projected a total of 125,000 users, but they only reached 1,800.

But the worst part was the price. The illustration below shows what they spent in the two and a half years it existed.

First, it is clear from the budget, that they had no idea what they were doing. So, they tried to make up for it by having a lot of meetings. They spend 4 times as much on project management than on creating the site.

But also look at hosting cost. They spend $186,000 to host a site with just 1,800 users for 30 months.

In comparison, this site is hosted at Rackspace. My server can probably handle a thousand times the traffic, and it costs me about $85/month. ...or to put it in another way. I could host their site for 182 years for that kind of money.

Ironically, last year during the COP16 (World Climate Summit), they did it again. The City of Copenhagen decided to create a social network just for COP. A site that also flopped and is now closed.

Total price? $980,000.

A new intranet

A couple of years ago I was invited to help a big company create an intranet. What they wanted wasn't anything special. In fact, the whole project was started because the CEO wanted to have a place to post his messages to his employees.

I told him to just use email. But then Human Resources also wanted their online place, and so they had "invented a need."

Essentially, all they wanted was an intranet where they could post news and updates. They went out to a number of enterprise intranet providers and came back with with quotes ranging from $50,000 to $150,000/year.

At this point, I told them that they were nuts (using different and more polite words). I told them that a much better solution was to simply install Wordpress on a server. Give everyone, who had something to say, an internal blog. The CEO would have blog. HR would have a blog. Marketing would have a blog. You could add special project blogs, and etc.

With a Wordpress blog, you would have all the tools you needed. Employees could comment, rate, and include extra things via the thousands of Wordpress plugins. And it would also allow employees to subscribe to the content that mattered to them, instead of being bombarded with everything.

And then, all you needed to do was to create a compelling front page. Something that, in a newspaper like manner (think Flipboard layout), would present the latest posts from all the blogs. This could be done in about a week by a fairly competent designer/developer.

Price:

• Wordpress = free
• Genesis framework = $59.95
• Server to put it on $999
• External development of front "portal" page = $3,000

Total price: $4,059.95 (or about 12 times cheaper than the cheapest quote from an "intranet provider")

They looked at me like I was some kind of alien. Apparently, my solution wasn't enterprise-ish.

The cost of business

I could give you thousands of other examples with a similar problem of inflated cost. We live in a new world. The cost today are different from that of the past.

Take email:

An enterprise go out and buy an expensive Lotus Domino server, another server for online replication, routers, UPS, a hardware firewall, a SAN storage server, and a backup server.

Then they will put it all in a room that has to be specially protected with a keyless entry lock, enforced doors and windows. They have to install industry strength air condition and fire suppressant systems. Not to mention buying expensive server rack cabinets.

They have to hire several supporters, an IT network administrator, and a CTO to manage them all.

And, they also have to buy and install Lotus Notes clients for every user.

The cost is phenomenal.

A startup go out and get a Google Apps for Business account. It is far more reliable. It is far more secure. Is managed 24/7 by some of the best people on the planet. Can be used on any device, using any client app, in any browser - anywhere.

The cost is just $50/year per employee.

In comparison: The cost of hiring an IT Network Administrator is 50,000/year, or the same as 1,000 employees with a Google Apps account.

Think like a startup

It is time to change. Not what you spend you money on, but how you spend it. If you want to be successful in the new economy, you have to think like a startup.

Just imagine what would happen with the US Government's budget, if they stopped talking about what to spend it on, and instead focused on how it is spent.

In all the above examples, you could cut the budget by at least 80% ...and still end up with a better product.

I came across the video below earlier today. It does a great job illustrating just how bad our traffic culture really is - no, not web traffic, but the real kind with cars, bicycles and pedestrians. This is just one intersection in New York, out of a total of 1230. And while New York is really big, it is just one city.

The video was created by Ron Gabriel and is part of the "3 Way Street" campaign. You can read more about it on his blog.

We’ve already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it’s encouraged!

The key is to first determine whether or not you’re okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That’s up to you to decide. However, always remember that websites needn’t look identical in every browser. At the conclusion of this article, we’ll work on a fun final project.

1. border-radius

Easily the most popular CSS3 property in the bunch, border-radius was sort of the flagship CSS3 property. While many designers were still terrified of the idea that a layout could be presented differently from browser to browser, a baby-step, like rounded corners, was an easy way to lure them in!

The irony is that we’re all perfectly fine with the idea of providing an alternate viewing experience for mobile browsers. Strangely, however, some don’t feel the same way when it comes to desktop browsing.

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Please note that both Safari 5 and IE9 implement the official `border-radius` syntax.

Circles

Some readers may not be aware that we can also create circles with this property.

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
 border-radius: 50px;

…And, if we want to have some fun, we can also take advantage of the Flexible Box Model (detailed in #8) to both vertically and horizontally center the text within the circle. It requires a bit of code, but only because of the need to compensate for various vendors.

display: -moz-box;
display: -webkit-box;
display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;

-moz-box-pack: center;
-moz-box-align: center;

-webkit-box-pack: center;
-webkit-box-align: center;

box-pack: center;
box-align: center;

2. box-shadow

Next, we have the ubiquitous box-shadow, which allows you to immediately apply depth to your elements. Just don’t be too obnoxious with the values you set!

-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

box-shadow accepts four parameters:

• x-offset
• y-offset
• blur
• color of shadow

Now, what many don’t realize is that you can apply multiple box-shadows at a time. This can lead to some really interesting effects. In the following screenshot, I use a blue and green shadow to magnify each shadow.

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

By applying shadows to the ::before and ::after pseudo-classes, we can create some really interesting perspectives. Here’s one to get you started:

The HTML

<div class="box">
   <img src="tuts.jpg" alt="Tuts" />
</div>

The CSS

.box:after {
   content: '';
   position: absolute;

   z-index: -1; /* hide shadow behind image */

   /* The Shadow */
   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                

   width: 70%;
   left: 15%; /* one half of the remaining 30% (see width above) */

   height: 100px;
   bottom:  0;
}

Want more cool effects? Refer to this tutorial on Nettuts+.

3. text-shadow

text-shadow is one of the few CSS properties that we can omit the use of vendor-prefixes. Quite similar to box-shadow, it must be applied to text, and receives the same four parameters:

• x-offset
• y-offest
• blur
• color of shadow

 h1 {
    text-shadow: 0 1px 0 white;
    color: #292929;
 }

Text-Outline

Again, much like its sibling, box-shadow, we can apply multiple shadows, by using a comma as the separator. For example, let’s say that we want to create an outline effect for the text. While webkit does offer a stroke effect, we can reach more browsers by using the following method (though not quite as pretty):

body { background: white; }

h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4. Text-Stroke

Be careful with this method. Only webkit, for the last few years, supports it (Safari, Chrome, iPhone). In fact, though I could be wrong, `text-stroke` isn’t yet part of the CSS3 spec. In this case, with white text, Firefox will display a seemingly blank page. You can either use JavaScript feature detection to get around this, or make sure that your base text color is not the same as the body’s background.

h1 {
   -webkit-text-stroke: 3px black;
   color: white;
}

Feature Detection

How can we provide one set of styling for, say, Firefox, and another set for Safari or Chrome? One solution is to use feature detection.

With feature detection, we can use JavaScript to test if a certain property is available. If it’s not, we prepare a fallback.

Let’s refer back to the text-stroke issue. Let’s set a fallback color of black for browsers which don’t support this property (all but webkit currently).

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

First, we create a dummy h1 element. Then, we perform a full cavity search to determine if the -webkit-text-stroke property is available to that element, via the style attribute. If it’s not, we’ll grab the Hello Readers heading, and set its color from white to black.

Please note that we’re being generic here. If you need to replace multiple h1 tags on the page, you’ll need to use a while statement to filter through each heading, and update the styling or class name, accordingly.

We’re also testing only for webkit, when it’s possible that other browsers will eventually support the text-stroke property as well. Keep that in mind.

If you want a more comprehensive feature-detection solution, refer to Modernizr.

5. Multiple Backgrounds

The background property has been overhauled to allow for multiple backgrounds in CSS3.

Let’s create a silly example, simply as a proof of concept. For lack of any suitable images nearby, I’ll use two tutorial images as our backgrounds. Of course, in a real-world application, you might use a texture and, perhaps, a gradient for your backgrounds.

.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

Above, by using a comma as the separator, we’re referencing two separate background images. Notice how, in the first case, it’s placed in the top left position (0 0), and, in the second, the top right position (100% 0).

Make sure that you provide a fallback for the browsers which don’t provide support for multiple backgrounds. They’ll skip over the property entirely, leaving your background blank.

Compensating for Older Browsers

To add a single background image for older browsers, like IE7, declare the background property twice: first for old browsers, and the second as an override. Alternatively, you could, again, use Modernizr.

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;

/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

Up until recently, we were forced to use sneaky-sneaky techniques to allow for resizable background images.

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

The code above will direct the background image to take up all available space. As an example, what if we wanted a particular image to take up the entire background of the body element, regardless of the browser window’s width?

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

That’s all there is to it. The background-size property will accept two parameters: the x and y widths, respectively.

While the latest versions of Chrome and Safari support background-size natively, we still need to use vendor-prefixes for older browsers.

body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

View Demo

7. text-overflow

Originally developed by Internet Explorer, the text-overflow property can accept two values:

• clip
• ellipsis

This property can be used to cut off text that exceeds its container, while still providing a bit of feedback for the user, like an ellipsis.

Did You Know? Internet Explorer has provided support for this property since IE6? They created it!

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}

At this point, you might consider showing the the entirety of the text when a user hovers over the box.

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

A bit oddly (unless I’m mistaken), there doesn’t seem to be a way to reset the text-overflow property, or “turn it off.” To mimic this “off” functionality, on :hover, we can set the white-space property back to normal. This works, because text-overflow is dependent upon this to function correctly.

Did You Know? You can also specify your own string, that should be used in place of the ellipsis. Doing so will render the string to represent the clipped text.

8. Flexible Box Model

The Flexible Box Model, will finally allow us to get away from those mangy floats. Though it takes a bit of work to wrap your head around the new properties, once you do, it all should make perfect sense.

Let’s construct a quick demo, and create a simple two-column layout.

<div id="container">

 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>

</div>

Now for the CSS: we first need to instruct the container to be treated as a box. I’ll also apply a generic width and height, since we don’t have any actual content in play.

 #container {
    width: 960px;
    height: 500px; /* just for demo */

    background: #e3e3e3;
    margin: auto;

    display: -moz-box;
    display: -webkit-box;
    display: box;

Next, let’s apply, for the demo, unique background colors to the #main div, and the aside.

#main {
   background: yellow;
}   

aside {
   background: red;
}

At this point, there’s not much to look at.

One thing worth noting, though, is that, when set to display: box mode, the child elements will take up all vertical space; this is the default box-align value: stretch.

Watch what happens when we explicitly state a width on the #main content area.

#main {
  background: yellow;
  width: 800px;
}

Well that’s a bit better, but we still have this issue where the aside isn’t taking up all of the remaining space. We can fix this by using the new box-flex property.

box-flex instructs the element to take up all available space.

 aside {
    display: block; /* cause is HTML5 element */
    background: red;

   /* take up all available space */
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
 }

With this property in place, regardless of the width of the #main content area, the aside will consume every spec of available space. Even better, you don’t have to worry about those pesky float issues, like elements dropping below the main content area.

We’ve only scratched the surface here. Refer the Paul Irish’s excellent article for more information. Also, be careful when using this method, as it’s not fully supported, of course, in older browsers. In those cases, you can use feature detection or Modernizr to detect support, and provide the necessary fallbacks.

9. Resize

Only available, as of Firefox 4 and Safari 3, the resize property — part of the CSS3 UI module — allows you to specify how a textarea is resized.

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

Note that, by default, webkit browsers and Firefox 4 allow for textareas to be resized, both vertically and horizontally.

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

Possible Values

• both: Resize vertically and horizontally
• horizontal: Limit resizing to horizontally
• vertical: Limit resizing to vertically
• none: Disable resizing

10. Transition

Perhaps the most exciting addition to CSS3 is the ability to apply animations to elements, without the use of JavaScript.

Though it looks like that dang IE9 still won’t support CSS transitions, that certainly doesn’t mean that you shouldn’t use them. The key is to enhance.

Let’s mimic the common effect, where, once you hover a link in a sidebar, the text will slide to the right ever-so-slightly.

The HTML

<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

The CSS

 ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

 a:hover {
    padding-left: 6px;
 }

transition will accept three parameters:

• The property to transition. (Set this value to all if needed)
• The duration
• The easing type

The reason why we don’t directly apply the transition to the hover state of the anchor tag is because, if we did, the animation would only take effect during mouseover. On mouseout, the element would immediately return to its intial state.

View demo

Because we’ve only enhanced the effect, we’ve done absolutely no harm to older browsers.

Final Project

Let’s combine the bulk of the techniques we’ve learned in this article, and create a neat effect. Review the final effect first (best viewed in Webkit browsers).

Step 1. The Markup

We’ll keep it simple; within our .box container, we’ll add two divs: one for the front size, and the other for the back.

<body>

   <div class="box">
      <div>Hello</div>
      <div> World </div>
   </div>

</body>

Step 2. Horizontally and Vertically Centered

Next, I want our card to be perfectly centered on the screen. To do so, we’ll take advantage of the Flexible Box Model. Just be sure to, later, use Modernizr to provide a fallback for IE.

As our page will only contain this card, we can effectively use the body element as our wrapper.

body, html { height: 100%; width: 100%; } 

body {
	display: -moz-box;
	display: -webkit-box;
	display: box;

	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	box-orient: horizontal;

	-moz-box-pack: center;
	-moz-box-align: center;

	-webkit-box-pack: center;
	-webkit-box-align: center;

	box-pack: center;
	box-align: center;
}

Step 3. Styling the Box

We’ll now style our “card.”

 .box {
    background: #e3e3e3;
    border: 1px dashed #666;
    margin: auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
 }

Note that we’ve also instructed this element to listen for any changes to the state of the element. When they occur, we’ll transition the changes (if possible) over the course of one second (transition: all 1s).

Step 4. An Effective Shadow

Next, as we learned earlier this article, we’ll apply a cool shadow by using the ::after pseudo class.

 .box::after {
    content: '';
    position: absolute;

    width: 70%;
    height: 10px;
    bottom: 0;
    left: 15%;

    z-index: -1;

    -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
    box-shadow: 0 9px 20px rgba(0,0,0,.4);
}

Step 5. Styling the Children Divs

At the moment, the children divs are still right on top of each other. Let’s position them absolutely, and instruct them to take up all available space.

 .box > div {
    background: #e3e3e3;

    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;

    font: 45px/200px bold helvetica, arial, sans-serif;
    text-align: center;

    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
 }

Step 6. Fixing the “Front”

Refer to the image above; notice how the back-side of our card is displaying by default? This is because, due to the fact that the element occurs lower in the markup, it, as a result, receives a higher z-index. Let’s fix that.

 /* Make sure we see the front side first */
 .box > div:first-child {
    position: relative;
    z-index: 2;
 }

Step 7. Rotating the Card

Now for the fun part; when we hover over the card, it should flip around, and display the “back-side” of the card (at the least the illusion of the “back-side”). To achieve this effect, we use transformations and the rotateY function.

 .box:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

Step 8. Mirrored Text

Doesn’t that look awesome? But, now, the text appears to be mirrored. This, of course, is because we transformed the container. Let’s offset this by rotating the child div 180 degrees as well.

/* Hide the front-side when hovered */
 .box:hover > div:first-child {
    opacity: 0;
 }

 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

And with that last bit of code, we’ve achieved our neat effect!

Conclusion

Thank you so much for reading, and I hoped you learned a bit!

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.

Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.

Download the set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

• download the set (.zip, 6 Mb)
• step-by-step tutorial and guide
• release on developer’s page

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Screenshots

Containers and Dialogs. Large view.

Controls. Large view.

Navigation. Large view.

Galleries. Large view.

Social Web. Large view.

Browser window. Large view.

Application window. Large view.

Lightbox. Large view.

Badges and icons. Large view.

Motivation behind the design

Here are some insights from the designer of the set:

“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.

Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.

I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.

I am constantly updating the website with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

Related Posts

You may be interested in the following related releases:

• The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)
• Free Medical Icons Set (60 Icons)
• Yummy! Free Food and Cakes Icon Set (20 Icons)
• Quartz Icon Set (90 clean sharp icons)
• gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: downloads, Freebies, templates, wireframing

There’s a saying that the School of Visual Arts in New York City once used in its ads: “To be good is not enough when you dream of being great.” We all have dream clients that we would like to add to our portfolio, but either we don’t know how to reach them or have no idea how to even start. Promotion is not a big subject at art school, and I know way too many creatives who stare at the phone and wonder why it’s not ringing.

There are many ways to promote yourself, and as with any product, you have to target your audience as efficiently and as cost-effectively as possible. Let’s go over some problems and solutions.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Seek Out More Work Than You Can Handle

If you want people to know you and consider you a valuable contact, then you must promote yourself. If you look at your career as a business, then as with any business, you must promote it.

What is your brand? Let’s not confuse a logo with a brand. Your logo is the visual “name” by which people identify you—your brand is how people remember you as a business. Is your brand personal? Fun? Wicked? Sweet? Choose wisely because you could be married to your brand forever and ever. Use peers and non-creatives as a sounding board. I had a brand that creatives thought was cool but clients just didn’t get (which I’ll write about in another therapeutic article).

Prepare your brand for all digital and social networks before hitting people with promotions. Essentials these days are a website or blog, Twitter, LinkedIn, Google Apps (if that’s your thing), business cards, stationary and envelopes—your business “front” as it were. Don’t scrimp, and inkjet print your own cards. If you can’t afford what you would spend in an afternoon at the pub for good business cards, then you might want to get a pony and dedicate the rest of your days to riding it.

“Welcome to Rainbow Pony World! Nowhere near Earth!”

Identify Top 100 People To Work With

You could crawl from small job to small job and make a fine career out of it… if riding ponies is your thing. But you dream of a certain caliber of work, so why not go after it?

Write a list of 100 people or companies you would like to work with. You might want to put a few people at one of those companies on your distribution list. How do you find those people? Start by researching the company. Go on LinkedIn and gather the titles of those people. If there’s not enough there, click on their profiles to see who they’re connected to, or use the “Also viewed” feature to stalk—er, hunt down the names you need. Use Google or a website such as Hoovers to get addresses and more information about the company.

Your city might have a book that list local companies, which could offer valuable information, as might the business section of your local paper. You have to hunt down names, network, steal, ask stray kids if their mom or dad works with designers, and take advantage of family connections (while still refusing to design that idea of your uncle’s that he’s been pushing at family dinners for years).

Don’t forget your own network. Your friends and fellow art school alumni are becoming art directors, creative directors and creative managers, and being on good terms and staying in touch with them is important.

At this point, I hope you’re at least keeping all of your contact information in a spreadsheet, because it can be uploaded to a variety of contact managers.

Get a good contact manager. Many programs are on the market, and even some native computer software will give you good contact management. Track how many times and when you have contacted someone, what they said, if you got work, if you got a referral, etc. When dealing with a client, you should be able to recall how you met, when you spoke and so on, so that they feel a bond, rather than feel like a target.

Some people prefer ACT as their contact manager. It’s good, but the comments following this article will no doubt suggest more management-oriented programs (after berating my negative comments about pony-riding).

Ready, Set… What Next?

What are you selling? What contact information do you have for your top 100? What promotional material can you send them? Are you ready for a follow-up if you do speak to someone? Are you ready for me to stop asking questions and get to it already?

“The Wright Brothers could never have flown if not for the drive and spirit of innovation among aliens.” (by Speider Schneider)

Even if you have print promotional material, there must be a digital component—something you can attach to an email or link to. Some people think you must have a website, and some think the WordPress platform is best… like, say, Smashing Magazine. Whatever the platform, you should have one. And please get a proper domain so that you’re not advertising rainbowponyrider.wordpress.com; rainbowponyrider.com is so much nicer!

Also, avoid email@yahoo.com for your email address. While many single-person businesses use Yahoo, Gmail, Hotmail and (snicker) CompuServe, don’t be one of them. For a few dollars, you could have a professional email address with your domain name, like name@yourbusiness.com.

Have you accumulated a ton of email addresses? Here’s a fun fact from years of working in a business that depended on communications marketing statistics: only 15% of emails are opened. If you use a mass opt-out email service such as Constant Contact to reach prospects, your costs will go up as your ROI goes down even before hitting “Send.” Still, it can be effective for multiple mailings during a one-month period, which is the membership period of such services.

Sending a link gives the recipient a chore. In addition to everything else they have to do, they must now go through the super-human motion of clicking on your link and waiting for your website to load. As sad as that sounds, this is now the world we know.

Snail mail. Believe it or not, what’s old is new again. People use to rely on source books and mailings for promotion. In the digital age, mail has gotten lighter. Another frightening figure from the marketing statistics folks: 98% of all greeting cards are actually opened (the 2% is for envelopes with printed labels and metered postage). This approach will run you between 50¢ and $1.50 USD per card when all is said and done. You also have to do it every month, but no more than twice a month, or else it’s legally stalking, and your prospects will see it that way. But people love getting cards! I’m constantly told that my cards are up on bulletin boards at companies across the globe. Well worth the money, I say.

Some online printers deliver a good product, leaving you to stuff, address and stamp the envelopes. I use an on-demand printer that comes with a contact manager and allows me to create campaigns and then do bulk mailings using my handwriting font and signature and auto-name-insertion. A few clicks and my 100 cards go off within 24 hours, leaving me with plenty of pony-riding time. Oops!

“I send postcards from vacation spots. What fun for a prospective client!” (by Speider Schneider)

Print-on-demand websites are intuitive, and you can upload images for full-bleed jobs, if you so desire. The fonts on these websites are limited, and you cannot control kerning or leading. Best to create everything in Photoshop and upload it that way.

Advertising And PR… For Free

Blog. An audience that looks to you for information and entertainment makes for good prospects. Write about your design passion. A past article of mine drew a comment from a young man who was upset about the lack of understanding between a designer and developer. There’s a blog right there. With a good writing style or by linking to stories on the subject, this person could develop a great promotional tool and really serve his passion for development and respect for its practitioners.

You could turn trends, type, design, fun, foible or whatever you really love can into a really strong promotional channel.

Volunteer. Personally, I’ve long been fed up with volunteering, but you should give it a try because it does build character… along with anxiety issues (but that’s another story). Try a local art organization or art project. Getting out there helps you meet the people you need to be meeting. I know I’m being hard on volunteering, but I’ve put in more than my fair share of time. Your turn.

Write for something like that “Smooshing Magazine” everyone’s been talking about. Even the local paper needs articles on the design of the new town hall or coverage of the next art event. Get your name out there.

Advertising And PR… But Not So Free

Try Google Ads and the like. Michael Muratore, owner of Store44, which represents illustrators and photographers, is the most plugged-in person I know. His work with global companies and a variety of digital sources and tools force me to defer to his knowledge on the subject:

I’ve been a Google power user for about five years now. As an agency catering to artists and advertising agencies, we can get hundreds of emails a day. The more I used Google for my business, the more beta invitations I received. I use so many Google services on a day-to-day basis that it’s a bit mind-boggling: Gmail, Voice, Docs, Analytics, Webmaster Tools… I could go on. However, in seven years of business, we have never bought Google Ads. One day, another invitation from Google arrived: “$100 in free AdWords advertising if you connect your Analytics account to a new AdWords account.” A hundred bucks? Sold!

It’s brilliant, actually. One hundred dollars is the perfect amount to get started, figure out how it works and experiment a little. Of course, when it’s all dialed in, it’s time to add more money.

The real epiphany for me came when I started managing campaigns by region. I started with the five regions that generated the most business for us: New York, LA, San Francisco, Chicago and Phoenix. With region-based campaigns, I could see where our ads were most successful, based both on clicks and inquiries. As the campaign progresses and as our budget changes, so does our AdWords buying. When money is tight, the campaigns that produce the fewest results can be shut off easily, leaving the best performers a greater portion of the budget. Usually, this means New York and LA, because our most popular artists are in fashion and music.

We use this same regional system when advertising our Facebook page.

Of course, it’s not just about regions. Different artists in the group have sets of keywords specific to their media and markets. When they want to promote a series of new works, we simply turn a campaign on for them to drive traffic directly to their new portfolio. We can have campaigns using general keywords to bring people to a landing page that features several artists. For those wanting to explore a variety of illustration styles, for example, they would land here: http://store44.com/illustration.html; if they were looking for something specific, like fashion editorial photography, then they would land right on the artist’s page. http://store44.com/irenepena

Costs vary with campaign, clicks and keywords. Because we’re paying by the click, we need to ensure that we’re not getting bad traffic. We use negative keywords to try to eliminate the irrelevant traffic (words like “schools,” “lessons” and “royalty-free”). We keep a base budget of $3.00 a day for a set of general keywords in our best regions. Three dollars is not much, and some keywords are very expensive to get on the front page. “Logo design” often fetches $10 per click. Having a variety of campaigns helps. I can easily adjust a particular campaign’s budget if an artist wants to spend the money on traffic.

A weekly graph comparing overall traffic to AdWords traffic.

Bottom line? The AdWords campaigns bring the website’s unique views from a usual 500 to 700 a month to over 1,000. When we get a call or email, I always try to find out their source. An active campaign can bring in three to five calls a month for $50 to $100 in ad spending.

The Most Difficult Thing For A Creative: Telemarketing

Cold calling is the hardest thing for anyone to do. If I hadn’t worked in telemarketing as one of my various jobs to put myself through art school, I would dread cold calls. Cold calling, for those who aren’t familiar with the term, is calling someone you don’t know to sell them something. Sounds easy, right? It is. They are just people like you and me. They need freelancers, and you’re a freelancer. If they don’t need a freelancer, let them tell you so. I’ve been after a client for three years; they’re in my top five of 100 names. I call and leave messages; I email images; I mail greeting cards with images and sales pitches. Why do I keep doing it? Because the prospect hasn’t told me to stop and go away. It’s sales, not dating.

The trick to telemarketing is to work from easy scripts:

Hello, Mr. Jones. My name is also Jones, and I’m a Web-developing, graphic-designing photographer. I’d like to set up an appointment at your convenience to show you my work. May I set up an appointment with you this week?

Mr. Jones will then either tell you that he is not interested, or ask you to call him the following week or set up an appointment right then and there.

Maybe you’ll have to leave a message for Mr. Jones. “Hello, Mr. Jones. This is Mr. Senoj. My number is 123-4567. Please call me at your convenience.”

Don’t tell him why you are calling or you’ll never, ever get to speak with him. Haven’t hear back? Call back. After a while, it becomes a guilty pleasure because you’ll wonder what they’re thinking.

Look at it this way: the client I keep trying to reach probably has a great story about this persistent person who calls, emails and sends cards. I wonder if anyone has ever said, “Why don’t you just talk to the guy?”

Another telemarketing ploy is called objection-response, and telemarketers make three responses before they stop asking. Have a script or two for that, too. Here’s some classic objection-responses:

Objection: “I don’t have time to meet.”
Response: “It will only take 15 minutes, and I’ll even bring coffee.”

Objection: “I really don’t have the time.”
Response: “May I drop off a packet of my services and keep you on my mailing list?”
(They’ll agree just to get rid of you. Take advantage of this by getting more information: “I don’t have your current email. Would you update me on that?”)

Objection: “I have all the freelancers I need right now.”
Response: “I really appreciate your loyalty to your regular freelancers, which makes me want to work with you even more. I understand and wouldn’t want to displace anyone, but people move on, and more work than your current pool can handle might come in. I’d like to stay in touch and see what the future holds, if you don’t mind?”

Don’t forget a thank-you note. A lot is at steak. (by Speider Schneider)

Out of desperation, I once told a person who had uttered those words of rejection to me that the entire pool of freelancers had choked to death. When he stopped laughing, he made an appointment and became a pretty good client. I don’t recommend this approach, though.

Think of any objection you might hear, and prepare a response of a sentence or two, printed out in large type in front of you. It really helps.

By the way, the best way to get rid of a telemarketer is to tell them either that you already have the product or that there is no way you could possibly use it. They will apologize, hang up and never call you again.

Not Such Crazy Ideas

Find a mentor. Some established professionals believe they owe it to the next generation to mentor them into replacing them. We teach and write, and then you take our jobs and spit on us as we crawl for safety. You young punks! Still, we do it because it is in the natural order of things to pass on our experience to the next generation, however ungrateful it is.

Socrates had something to say about this:

The children now love luxury; they have bad manners, contempt for authority; they show disrespect for elders and love chatter in place of exercise. Children are now tyrants, not the servants of their households. They no longer rise when elders enter the room. They contradict their parents, chatter before company, gobble up dainties at the table, cross their legs, and tyrannize their teachers.

Plato had Socrates, and you should be able to find someone who takes you under their wing and introduces you to people and teaches you wonderful things. Ask a teacher for a referral, or just write someone an old-fashioned letter asking if they would be your mentor. You won’t look strange, and your good manners will be appreciated, even if the person is unable to mentor you. A referral could hook you up with a terrific mentor, too.

Do work that really impresses. A friend of mine once said that if you ever take on a $200 job that should pay $2,000, do $2,000 worth of work and it will lead to a real $2,000 job. He also told me that he paid $2,000 for his house, so don’t take these amounts at face value. But his point is valid. A great job, whatever the pay, might lead to a spectacular portfolio piece.

A wild imagination can come up with some crazy ideas, but think twice before acting on them. Thankfully, my infamous “time bomb” promotional piece, touting “Dynamite service with explosive results,” died long before I mailed the first package, or else I’d have faced bomb scare charges and might have been writing this from prison. Be creative, but be sensible. Think of your aim: to be at the front of someone’s mind when they have a job to assign. Could you send a toy that sits on their desk or a calendar they keep handy? There are some great possibilities.

Keep moving forward! Sales is the hardest thing to do. You get a burst of energy, make all your calls and then get depressed when people aren’t beating down your door. It’s natural. Keep up your task of calling, emailing or whatever you do on a regular basis. Do something fun to break the mood, surprise your prospect, and don’t take rejection personally. A rejection today could be a job tomorrow and a repeat client further on. Just keep moving forward with the sucky part of the creative business.

(al)
Tweet

© Speider Schneider for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

To best serve your website’s audience, you need to understand them as best you can. The best way to do that? Analytics. There’s a few ways to track your website’s traffic, though Google Analytics is probably the most popular due to its price — free.

However, Google Analytics has several important features missing that other analytics providers offer; namely real-time stats and heatmaps. Reinvigorate is one of those providers, which we’ll take a look at today.

Read the Full Review on our Sister Site: Web.AppStorm

A web app review is a bit beyond the scope of what we cover on Nettuts+, however, it fits perfectly on the awesome Web AppStorm. Read the full review there, if this interests you!

Twice a month, we revisit or update some of our readers’ favorite posts and sessions from throughout the history of Nettuts+. This tutorial was first published last September.

Doesn’t the title say it all? There are a wide variety of tools and techniques which can drastically improve the speed at which we code. Particularly during time-sensitive settings, even a savings of a few seconds per iteration can add up substantially over the course of the month. I’ll show you eleven of my favorite tools in this article.

1. Zen Coding

Combine the power and specificity of CSS selectors with HTML mark-up, and you get Zen Coding. Certainly, I wasn’t the only one whose jaw dropped the first time he saw:

div#container>div#contents>ul#nav>li*4

…convert to:

<div id="container">
	<div id="contents">
		<ul id="nav">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

In this last year, the Zen Coding project has gained considerable attention, and has been expanded to support a wide variety of code editors, including Espresso, Vim, Netbeans, TextMate, and Komodo Edit.

“Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.”

• Download Zen Coding
• Watch My 4 Minute Screencast on Zen Coding

Alternatives

• Sparkup

2. Split Windows

For many, a simple tab-based coding experience is more than adequate; however, others prefer a more integrated approach. Unfortunately, the ability to split windows is not widely available across code editors. Luckily, though, a handful of them do support it at varying levels of flexibility (the king being Vim).

Alternatives

• Sublime 2
• Coda
• Komodo Edit

3. Embrace Social Coding

In the last two years particularly, the idea of social coding has gained considerable popularity – and why wouldn’t it? If it’s fun to share photos on Flickr, the same will of course be true for coding. With site likes Envato’s recently purchased Snipplr, Github, or Forrst, not only can you manage your own snippets for future use, but you can also take advantage of multiple brains by receiving community feedback on your coding techniques and choices.

Another social networking site? Yes, that is true; but, I must admit: it’s fun. Plus, it’s educational!

• Follow Nettuts on Snipplr
• Follow Jeffrey on Forrst
• “Getting the Hang of Github”

4. Code Management Tools

Online networks like Github, Snipplr, and Forrst are fantastic, however, they can be time consuming to access, when you need to reuse a specific piece of code (assuming it’s not already part of a bundle). The solution is to install one of the various code management applications available around the web.

Personally, as a Mac user, I prefer the not-free Snippets app.

With this tool, when I’m working on code, I can simply press, on the Mac, Command + F12 to insert my desired code snippet into my project. Even better, it integrates an “Export to Snipplr/Snipt/Pastie” feature that’s extremely useful.

While many editors offer an integrated snippets utility, I’d recommend embracing a third party tool instead. This way, your snippets aren’t limited to a single editor.

Pro Tip

If you want to sync your snippets across all your computers, via Dropbox, you can create a symlink.

• Step 1: Browse to ~/Library/Application Support/Snippets.
• Step 2: Copy the entire folder to Dropbox.
• Step 3: Create a symlink. In the Terminal, type: ln -s ~/Dropbox/Snippets ~/Library/Application Support/Snippets .
• Step 4: Rinse and repeat for all of your computers.

What Sorts of Snippets Should I Save?

Everything you can think of! As a rule of thumb, if you tend to type some block of code more than once, save it. Let’s do an obvious one together; when producing a new website, how often do you type out the three lines or so to create rounded corners in the modern browsers?

#box {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

This takes around ten seconds to type each time. What a waste! Instead, create a new snippet, and reduce your coding time by 90%.

Alternate Options

• Snippley : I used this one up until recently.
• Code Collector Pro : For Mac
• Snippet App

5. Choose a Proper Editor

The Holy Grail of efficient coding; your choice of code editor will have the largest effect on your coding speed. Unfortunately, there isn’t a definitive answer. Your decision will largely be dependent upon:

• Which languages you code in
• Your OS
• The type of UI you prefer
• Comfort with the command line (or lack of)

As an example, someone who predominantly creates HTML themes for a site like ThemeForest would be unwise to use a full IDE like Aptana. It’s simply unnecessary and too slow. However, the same is not true for a server-side developer.

Questions to Ask Before Deciding on an Editor

• How important is speed? Should the editor open nearly instantly?
• Do I require integrated debugging tools?
• Does this editor offer some form of bundle functionality?
• How easy to memorize are the keyboard shortcuts?
• Are my favorite extensions and plugins (like Zen Coding) available for this code editor?
• Do I require integrated Git logging?
• Am I okay with a GUI interface?
• Do I prefer speed over visuals…or Vim over Coda?

When I asked myself these questions, I determined that speed and performance were paramount. As such, I currently use Sublime 2 and Vim. The latter is significantly daunting at first, but provides an unprecedented level of flexibility and speed, due to the fact that even traversing your page requires a language, of sorts. However, for larger projects, which require debugging, I use Netbeans.

6. Use Bundles

Bundles: learn them…use them. Editors, like TextMate — and, subsequently E Text Editor — popularized bundles; however, they’re widely available from editor to editor.

What’s So Great About Them?

How many times have you found yourself typing the same generic piece of mark-up or code, whether that might be a new function, or the structure of a new jQuery plugin. How much time are you wasting each time you repeat this process? This is where bundles come into play.

For example, by downloading the TextMate CodeIgniter bundle, we can take advantage of a wide array of methods and snippets. Remember – less typing is always a good thing!

With this bundle installed, we only need to type the designated shortcut, and then press tab (in most editors). This will then expand the shortcut into the requested code. What separates a bundle from a snippet is that you can specify multiple tab stops to further expedite your coding speed.

Vim Users: if you miss/envy the TextMate bundle feature, check out the SnipMate plugin.

7. Use a CSS Preprocessor

Tools like LESS.js and Sass can drastically increase your coding speed. In terms of which one to choose: they’re both excellent. These days, I tend to prefer Sass, since the Compass framework is built on top of it, and provides an unparalleled number of convenience functions. It also seems to be what the cool kids use.

How Does it Work?

These tools allow for all of the features that you wish CSS had — such as variables and functions.

/*
Variables!
*/
@primary_color: green;

/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

#container {
/* References the variable we created above. */
	background: @primary_color;

/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
	.rounded(20px); 

/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
	a {
		color: red;
	}
}

Pro Tip: To make your browser update every time you save a file (very handy feature), use the watch method. Place the following at the bottom of your project. Of course, this assume that you’ve already setup LESS.js.

less.env = 'development';
less.watch();

• Get up and running with LESS.js (video and article)

LESS Compiler

Many might argue that it’s unsafe to use a JavaScript-based solution. But that’s okay; there are a handful of compilers available around the web. The best solution I was able to find is called LESS.app.

After you download it (free), you simply drag your project folder into the app, which instructs it to watch all .LESS files. At this point, you can continue working on your project, per usual. Every time you save, the compiler will run, which generates/updates an automatically created style.css file. When you’re finished developing your app, you only need to change your stylesheet references from style.less to style.css, accordingly. Easy! Now there’s no reason not to take advantage of LESS — unless you’re using a different solution, like Sass.

Take our mini-series to learn exactly how to work with Sass.

8. Prototype Early with Firebug

You know the drill: write a bit of JavaScript, switch and refresh your browser, receive an error, return to the editor…and rinse and repeat. Though we all do it, sometimes, there are far more efficient alternatives, such as protoyping early with tools like Firebug. By working directly in the browser, you cut out the middle man, so to speak.

The uber-talented Dave Ward recommended this tip, and has even created a screencast demonstrating this method.

9. Use Prefixr

Tools like Compass, or even a TextMate bundle are tremendously helpful – I use them often, actually. But, for many projects, they aren’t available. As a result, we’re left in the position of having to copy and paste over, and over…and over.

I built Prefixr to do all this tedious work for me. Simply paste in your stylesheet, press Prefixize (or hit Control + Enter), and Prefixr will filter through the applicable CSS3 properties and dynamically update them.

Can’t remember if Opera provides a prefixed version of, say, the transition property (o-transition)? Don’t worry about it; that’s already coded into Prefixr!

With Prefixr, you only code your stylesheets using the official W3C-recommended markup. When ready for deployment, run the stylesheet through Prefixr, and be done with it!

Learn more about Prefixr.

10. Find an Editor that Offers Multi-Select

I’ll first warn you that very few code editors offer a multi-select feature. The editor that I currently use, Sublime 2, does though. Even better, it’s available for both Windows and Mac users.

So what exactly is multi-selection? Well, editors like TextMate have long offered vertical selection, which is quite neat. But, with multi-selection, you can have multiple cursors on the page. This can drastically reduce the need for using regular expressions, and advanced search and replace queries. Perhaps a quick visual demonstration is in order…

11. Don’t Reinvent the Wheel

When first getting started in this field, I always took issue with comments like “Don’t reinvent the wheel.” It’s not about reinvention; it’s about understanding how the wheel functions. However, once you know the inner workings of the wheel, this argument certainly is true: Don’t Repeat Yourself.

Coding each new project from scratch is incredibly time consuming.

If you want to complete new projects as quickly as possible (and who doesn’t), save yourself some time, and take advantage of the various levels of abstractions that are available around the web. A handful of my favorites include:

• HTML5 Boilerplate – Whether you choose to use this template in its entirety, or in bits and pieces, it doesn’t matter. Just use it! And while you’re at it, split the sections of code into snippets for reuse! Watch the official guide to Boilerplate on Nettuts+
• CodeIgniter (PHP Framework) – For higher level PHP applications, the CodeIgniter framework is a fantastic choice. Even better, the community support is second to none. If you happen to be a visual learner, our CodeIgniter from Scratch series is, also, second to none.
• 960 (CSS Framework) – If you require grid-like structures, both the 960 and Blueprint CSS frameworks are fantastic choices. They easily turn hours of work into a two minute process; and, if you’re worried about file bloat, you needn’t. That’s a ridiculous argument. Let us teach you how to use 960!
• jQuery (JavaScript Library) – Does this one really require explanation at this point? Save yourself the headaches, and use it (that is, unless you’ve developed your own awesome library).

Conclusion

I’ll show you mine if you show me yours. Which tools and resources do you use to code faster?

The year 2010 is more than halfway through, and while there are amazing new website designs being launched regularly, the trend for the year has been established. Before the end of 2009, there were already predictions on what the 2010 top website designs would be. One of the predictions, if it could be called that, was that websites would turn minimalist.

And it did. We see the top website design for 2010 consistently across the board as having one or two main focuses on its main page, and not a lot of text. In fact, some of the hottest minimalist website designs have but a couple of words, some of them just the name of the product coupled with an amazing product shot.  Nothing over the top, stark simple, but it gets your attention in a snap.

Another website design that has been capturing the imagination of internet users and web designers is the use of the magazine-style layout. This kind website design recognizes the fact that eventually magazines will be overshadowed by magazine websites, mainly because of the paperless drive to save the environment from further abuse. This type of website design looks like your typical stylish print magazine with a lot of catchy headings and subheadings, links, and content previews – just like what you can expect from the front cover of your favorite magazine.

Looking at this website design, you notice it tries to re-create that magazine feel that most avid magazine readers have gotten used to. As a website, it appears to be overcrowded, but not for its target audience who prefers to get all the information and teasers it needs in one page.

Most hand-drawn website designs belong to artists or website design companies, and they use the first page of their website to dramatically emphasize their skills and creativity. The website below is a restaurant which means that artistry is starting to spill over to the mainstream websites. You can tell that a lot of thought has been put into creating this restaurant’s website, and it looks a little like a menu. You will also notice that it appears to be crowded, but really isn’t. Because of the dark background, there is a mystic that surrounds the website, as if beckoning one to call in for a reservation.

You will notice that the top websites of 2010 are more than just a business website. It  combines aesthetics with the personalized touch, before merging with the online business perfectly. This is a website trend that was not visible at all a few years ago.

The next top website design for 2010 is the retro look.  You may also call it vintage, but it basically refers to an understatement in web design, almost like an unfinished work of art.  Retro web designs can date back as early as 20 years ago, or go even further back to the days of black and white TV. In the example below, the product is a beer from Portland, Oregon, and one would assume from its web design that the company has been brewing since the 1960s. Except, this original brew from Oregon began selling beer only 24 years ago, in 1986.

The website is a testimony to their marketing angle that they have been brewing the best Portland beer for a long time. And it works superbly.  If you notice, this design also tries to be minimalist by not putting too much information on its top page. The graphics zeroes in on the product, and not much else. By all accounts, it appears that from now on, retro is making a strong comeback in design, this time evident in many website designs all across the globe.

Other 2010 top website designs veer towards the use of large graphics, large fonts, oversized footers and headers, and bold typeface and fonts. For 2010, and into 2011, the attitude towards website design has gone from trying to squeeze everything in one page to a more relaxed and subtle approach. Although, there is still the in-your-face design that can make anyone stop and stare. Generally speaking though, the approach remains minimalist and artsy.

For now, there are many websites that carry more than just website design. One example would be the Von Dutch website that incorporates the hand painted top border, large graphics, and textured background.  It also has the retro look, as well as an interesting black and white image, which is something you might see in a magazine-style website.

For web designers and business owners, the spectrum of design has gone explosive. There are no more barriers or inhibitions in creating a unique impression that could help drive traffic to the website simply on the basis of its extraordinary design. And therein lies the reason why it is called a trendy website design for 2010, and one to watch out for in the coming months.

When Thierry Henry scored his hands goal against Ireland in the World Cup qualifiers, everyone claimed that the assistant ref should have seen the incident as he “according to the graphics” had clear sight of the debacle. As everyone could tell from the graphics, the ref DID see, infact, was looking straight at the incident. But he didn’t blow his whistle. He didn’t call the attention of the field ref and he intentionally sent France, rather than Ireland, to the World Cup. According to the graphics.

The matter of the fact was that the graphics didn’t tell the truth at all. The ref actually had his view blocked by several players, and had no chance in hell to see the incident. There was thus something missing in the graphic, which was there in reality. Something which the journalists neglected, as it was so much more fun to talk about the graphic.

Similar is the nature of social media and consultants active in the field. A lot of diagrams out there that look great. They tell us what we want to see, convered with compelling arguments that sound logical. In fact, most of them are bullshit. Although good looking, and seemingly accurate in their analysis the diagrams, just like the graphics from the World Cup qualifier, lack the one important aspect which would make them relevant – they do not cohere with reality.

In reality, social media is not fast, it is not like a grilling party and it is not the most suitable forum for creating lasting relationships with your customers. The success stories I have seen, and the selling practices I have engaged in, so far, that have been truly successful, are all connected with direct call to action and sales cycles. They have completely lacked the remarkable content, nor have they focused on transparency.

What they have focused on is product, delivery and keeping promises. Old and sound business ideals. Conversion has come about when there has been a clear scent throughout the campaign, where call to action haven’t been fuzzed out and where the offer has had a social element to it (ie. get your friends in on it…) and a great offer (…and get it cheaper). Surely there are situations where you can see customer service being enhanced and improved through social media. But the dialogue is not so much about fantastic writings, images or other content. The dialogue focus on products. That’s where the conversion takes place.

And just as any good SEO would focus on the converting keywords, a good social media guru should focus on the converting discussions. There is simply too much buzz out there to focus on the latent laughter being created from investments based on bringing joy to the world.

The recipe is quite simple. Great product, plus promises kept, means online business. And whilst the focus is placed in what tool to chose and what campaign to make viral, the most important part of communicating what you actually can deliver is lost. Instead of focusing on what the core of your offering is, you focus on how you can make it spark like gold. That’s what our/MY industry has fed you with. They/I have told you that you should focus on long term projects that take aim at being the hub of resources used when discussing your vertical in online channels.

But you have no chance. The social web is not open. It is closed in networks. And although you make the best campaign in the world, that is shared between users like mad, they will not care when it comes to the decision of making the purchase if they cannot find dialogue about your products and offering online. What do they get when they get it from you? That’s the story you should be promoting. That’s the dialogue you should be listening in on. That’s the content you should be assembling rather than trying to explain it yourself.

It should be common knowledge nowadays that user reviews increase conversion rates in most verticals. Testimonials do as well. Do you show UGC on your website? (if you don’t know what UGC stands for you really should be unemployed). If you don’t have it, well then you should be unemployed as well. REally… I am sick and tired of all the bs. All the long term mofo’s talking crap out there. Social media is not about making money tomorrow. It is about making money today.

At least for businesses it is.

Yes. When we as users roam facebook profiles, stalking hot and ugly friends of ours, we do not want to sell or buy. But when we do want to sell or buy, we are in no mood to listen on a story about someone’s CSR profile. We want to get the goods and get out of there. What’s between us and our purchase is if the product we are aiming at is really what we want. That’s when social media matters for business.

Now some of you go – but but but… I could put this building on fire… – but just like Newman in office space you will get sent to the basement. You ask yourself, but what about PR-crises, what about Branding? Well, if you don’t say anything other than what you do, then PR will be a breeze. If you sell good products that you deliver with a promise you can fulfill, then you will have all the brand equity you need. Just look at Apple. They are complete assholes. But we still love their products cause they are what they are. We create forums we give Apple-sounding names. We call our children iChild and we take the haul of shit just to stay clear of the blue screen of death the PC so handsomely delivers to our screen every now and then.

The discussion about social media is distorted. We need to put it back on track. We need to start talking about how to identify a buyers behavior, how to include scent when users share information through links, we need to understand how to take charge of information architecture on external platforms and we need to CRM the living shit out of all the data we can get out of it. That’s how we make money NOW and not in the future.

So stop pissing me off with retarded Keynote slides with crazy looking megaphone people on them. X that shit out and start exploring, researching and sharing how to do “the deed” for real.

Or to quote a successful Swedish entrepreneur… “..the only KPI I pay notice to in social media is money out…”

The graphics can tell you a very neat story. But does it correlate with the data you see on your back end? If not, then it is probably not true. So please stop pretending that it is. Question it, question me!! We need to be questioned, and I feel beefed up to handle the heat. How about you mr/mrs social media expert… are you up for it?

//Jesper

Possibly related posts:

• Related posts on Social Media Metrics
• How to Select a Media Monitoring Service
• Social Media and Vuvuzela Marketing

• Related posts on Social media money
• Wo Reichtum und Erfolg wirklich zu finden ist | Social Media Money
• How to Write Effective Blog Posts

There are hundreds of ways to writing out code with hundreds of methods to achieve certain functionality. However, out of these many ways of writing code to get to the final product, there are many habits that are not great to the programmer or to the functionality of what you are trying to achieve. Furthermore, we discuss 10 tips for improving and writing better PHP code.

Development Style

Tabbing, double-spacing, all on one line; we all have our style of writing out code and there really is not a right or wrong way of laying your code out. However, many developers tend to fail at keeping their development style fluent throughout a project. I myself have been caught a few times adapting to new styles within one project.

Furthermore, it is best to keep your code laid out using one development style rather than several to keep your code easily readable and organized. If your development style sometimes evolves to something different, it is best to not use your new development style on a project that uses a different style, but rather implement your new development style on new projects you may start. This keeps all of your projects fluent and organized.

Good Variable and Function Naming

Many developers do not really care about proper variable and or function naming. However, good function and variable naming is key to have more organized code, which categorizes under better-written code as it becomes clearer to understand and comprehend.

Naming variables and functions properly is rather something easy to do and should be based on what the variable value is and what the function achieves. This not only provides easy to understand names, but it also helps you and other developers understand what each function or variable performs and holds by just reading the short name.

Commenting Your Code

Commenting your code is a major step to organized and readable code and actually compliments most of what you can do to organize your code, as it is a key aspect in organization and usability. When writing comments to describe certain actions, functions, or code, it is best to keep the comments strict and to the point without describing what everything is.

For example, if you have a code snippet that is quite obvious in terms of its functionality, it is best to either leave a few words about it or not to comment it at all, as too many comments can be obnoxious.

Do Most of the Work

Copying and pasting code is something we tend to do most of the time, from one project to another, or from code, we may find useful on the net that has been done for us. However, copying and pasting code can sometimes hurt you in the end as you may not be familiar with your project or code as much as you had hoped you were or as much as you need to be. Furthermore, copying and pasting a few snippets is fine, but you should do most of the work to freshen your memory.

Look Around

Sometimes we might be doing something new and do not know what the best route is to take in terms of speed and performance, thus, looking around at other code from people who created something similar to what you are creating is sometimes a great idea to do to obtain a general idea on how to approach it better. This does not necessarily mean copy and paste the code, but rather just get a general idea of how it works.

Understand the Language’s Limitations

We sometimes try to achieve many things the language was not designed for or is not capable of doing by creating workarounds. This is not a great idea, as your created workaround may not work sufficiently or effectively. Therefore, it is best to understand the language’s limitations, and to work within them.

Receive Structural Feedback

We sometimes think that we are the only ones, who know how to properly develop, but we are not and in fact, there is always someone out there better than us. My point is, it is always good to receive a second opinion on your code in terms of structure, as some feedback can be critical to enhance the performance of your script.

Testing Your Code Often

Part of making your scripts closer to bug free is to test your work often and as you go along. The problem with many developers is that they think what they develop should work fine the first time and decide not to test certain aspects of their script as they go along, and in the end, they end up with several bugs and many they may not catch immediately. With that said, it is in your best interest to test many aspects of your code or script for bugs as you go along in development, this is proven to reduce bugs in the long run.

Built-ins over Building Your Own

We sometimes tend to recreate a built-in function just to have it. The problem with unnecessary recreation of built-ins is that the performance is affected. Moreover, using built-ins when applicable is a better idea and not only does it increase performance, it also keeps your scripts clean from unneeded code.

Don’t Split Everything into Files

Splitting your code into several files is actually part of keeping your scripts or projects organized instead of having everything all in one file. However, many projects I have seen tend to split everything into many files, sometimes separating individual functions into individual files.

This overkill and not only affects the way your code is laid out but it also affects performance. For example, instead of splitting individual functions into individual files, create a functions file and store all of them there, or group them into files. This still keeps your project organized and it keeps things reasonable.

Remember, doing something beneficial is great, but overdoing it or not doing it at all causes a negative effect, thus, use your judgment, and use techniques and methods reasonably.

Show your support by nominating SilverStripe CMS in PacktPub's annual software awards!

Your nomination will help us to secure our position as a finalist, which in turn allows us to secure money we can devote on furthering our open source project. Gaining a good position in the PacktPub awards also helps us to spread awareness of SilverStripe CMS, which fuels adoption and encourages growth in our developer community.

For the past four years, PacktPub have centered their awards on open source content management system software. This year the awards have been expanded to all open source software, with two categories remaining for content management systems. The appropriate category for SilverStripe CMS to be nominated for is 'Open Source CMS'.

In the past years we won 'Most Promising CMS' (2008) and placed second for 'Best Overall CMS' (2009).

Nominations close September 17: spread the word and help us to get a good number of nominations. Thanks!

[Image CC-A by Terry Johnston]

A fun post for a Tuesday morning, Aaron Newton shares his path to becoming a JavaScript ninja, and how you can too. Some of his tips (I encourage you to read the whole article):

1. Study design and designers. I’m not saying you have to have the talent to be an awesome graphic designer, but you should pay attention to people who are. When you are surfing the web, pay attention to what works. What looks good? What communicates to you that you can do something on a page? A great example here is this video of Bill Scott’s work on UI patterns. He gives great examples of what the “interesting moments” are in UI design. But in general, you should pay attention to the sites you visit and notice when they get things right and wrong. I often ask interview candidates what sites they admire and why.
2. Study JavaScript. I mean really dig into it. Watch all those awesome Crockford videos – ALL OF THEM! – on the YUI theater. For that matter, watch all the OTHER videos there. Seriously awesome stuff. I don’t agree with 100% of what they all say, but they are educational for sure. Read Crockford’s JavaScript: The Good Parts. Again, I don’t agree with it 100%, but it’s a seriously solid overview of the language.
3. Study JavaScript Frameworks. Note that this is plural. The single most important thing I’ve done in my education with the language was to write the original documentation for MooTools. To do this, I had to read the entire library’s undocumented source and figure out what it was doing and why. I’ve learned a lot since then, but nothing I’ve done has ever resulted in as big a jump in my knowledge. When I wrotejqueryvsmootools.com I did it again, this time with jQuery. I read the entire source so that I could understand it. I did it again with Dojo when I put together a talk about programming to patterns that I first gave in tandem with Dylan Schiemann of the Dojo team (the talk wasn’t about frameworks so much as it is about the value of abstraction, and I wanted to make sure it wasn’t just a MooTools focused talk). I’ve done the same thing with other frameworks to learn the lessons that I can from other people’s development styles. Don’t just use jQuery or YUI or MooTools. You need to study all of them to understand what makes them the same, different, and interesting. Don’t stop until you understand everything that these frameworks are doing and, more importantly, why. Don’t hesitate to ask their authors for explanations; most are happy to talk about their work.
4. Get involved with a framework. The second most important thing I’ve done with JavaScript was getting involved with the MooTools project itself. Working with open source projects is a HUGE boost to your resume and, here’s the thing, you don’t need to really know that much to get started. You just have to be willing to spend the time. Right now, there are dozens of bugs open on every framework out there. Go fix some! Go write test cases! Go write a blog post about how you use it! Do these things and get committer status and I promise you you’ll start getting a ton of interesting job offers.
5. Release some of your own code. I can’t stress this enough. If you don’t have code on github (or google code or your own site or whatever) you’re wasting a big opportunity. Releasing your own code allows me, a potential employer, to know your capabilities before I hire you. This stuff gets people interested in you. If you release a lot of your code, you may even get others to help you maintain and grow it. This is how open source projects get going. I almost consider it a red flag to see a resume without a url to github or something similar.
6. Blog about it. Write down everything you learn as you learn it on your blog. Next thing you know, 3 years have gone by and you have this huge body of work. Stuff on your site draws the attention of other developers who are struggling with similar problems. You become an expert without really meaning to. If you blog constantly about what you are doing, what you are studying, you’ll find that people come to you with work to be done expecting that you are awesome because, well, you’re explaining all this stuff to them. I can’t stress the value of this enough, though it is very time consuming. This is especially valuable if you’re a freelancer.
7. Build something interesting. I once spent a month or two writing a photo gallery in PHP just to have an excuse to learn PHP better. I learned Smarty with that little project, too. I’ve built a lot of things for the excuse to learn it. I built Iminta.com with a friend and we chose Ruby on Rails mostly because neither of us had built anything with it and wanted to learn it. Forcing yourself to do things with new languages and environments will grow your skills faster than anything. Don’t rely on the skills you have; always look for chances, excuses really, to do things in new ways. Working with emerging technologies will make you debug that technology itself and maybe contribute fixes back to it. It can be painful, but it also makes you really learn how that technology works.
8. Join a startup. I know, this one can be tricky, especially if you don’t live in the SF Bay area. But joining a startup will make you tackle problems that aren’t in your domain because, well, there’s no one else to do it. If you’re not experienced enough to be the 2nd or 3rd person at a startup, aim for being the 10th or 20th. You’ll be asking for long hours and low pay, but you’ll get a mountain of experience. Think of it as an extended college education that pays you a little cash and (if the stock takes off) might buy you a house.
9. Take the time to learn why solutions work. When you’re working on something and you get an error and find the solution on Google, take the time to really understand what the problem was. When you are starting up an app server – ruby on rails, django, lamp, whatever – and you get a stack trace, take the time to dig into it and understand the problem and what the logs are telling you. Debugging stuff on the command line will teach you a ton. It’s slow, thankless work, but it’ll greatly improve your value when you take on more challenging tasks at new jobs.
10. Be curious, and fight off laziness. This is a bit of a weird one, I know. What I mean by it is that you should look at tasks that require you to do new things as opportunities. Recognize when these moments come along and cherish them. There is nothing more awesome than having a job that pays you to learn. If you have coworkers that know things that you don’t, and vice versa, trade them. When I was in college I told the guy who was building the web site for my school that I’d help him design it and show him how to use Photoshop if he would teach me HTML. I joined Cloudera 18 months ago and knew zero Python and now I’m pretty decent at it. If you have a job that uses technologies you don’t know, don’t just stay in your little JavaScript world; find ways to expand your knowledge however you can.

Graphs and charts are a great way to break down the information at hand to the user in a descriptive and visually enticing manner. These visual structures allow you to easily simplify complex data and output easier to understand content. Everyone can use a graph or chart, however, not everyone has the right tools to create an effective one.

Below we’ve compiled the best JavaScript graphs and chart solutions. We chose to put a list of JavaScript graphs because of their flexibility and functionality.

JS Charts

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs.

jQuery Visualize Plugin

This JavaScript technique provides a simple way to generate charts, but more importantly, because it bases the chart on data already in the page in an HTML table element, it is accessible to people who browse the web with a screen reader or other assistive technology, or with browsers that don’t fully support JavaScript or HTML5 Canvas.

Highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Emprise Javascript Charts

The Emprise JavaScript Chart solution relies on pure JavaScript in order to shell out great features such as zoom, interactive functionality, stackable, and a variety of AJAX capabilities that are built in.

PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started.

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features such as numerous chart style options, date axes with customizable formatting, automatic trend line computation, tooltips and data point highlighting, and more.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via Javascript. The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.

TufteGraph

TufteGraph lets you configure dynamic functions and it also allows you to work with a compact API for a much faster web app. It also uses a non-core layout that is done through the use of CSS.

Raphaël’s Javascript Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

milkchart

A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 canvas tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

Graph-It

With Graph-It you can easily create graphs out of raw data using Graph It! Just input the name/value pairs of the involved graph elements, and leave the rest to the script. The values can be either absolute or percentage (using two versions of script).

Canvas 3D Graph

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D

Protovis

Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.

ProtoChart

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.

Right to Left

One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a[title="home"] the first thing thing interpreted is a[title="home"]. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.

ID’s are the most efficient, Universal are the least

There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:

#main-nav > li {   }  /* Slower than it might seem */

Even though that feels weirdly counter-intuitive… Since ID’s are so efficient we would think the browser could just find that ID quickly and then find the li children quickly. But in reality, the relatively slow li tag selector is run first.

Don’t tag-qualify

Never do this:

ul#main-navigation {  }

ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient.

Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t.

Descendant selectors are the worst

David Hyatt:

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive — especially if the selector is in the Tag or Universal Category.

In other words, a selector like this is an efficiency disaster:

html body ul li a {  }

A selector that fails is more efficient than that same selector matching

I’m not sure if there is much we can learn from this, because if you have a bunch of selectors in your CSS that don’t match anything, that’s, uhm, pretty weird. But it’s interesting to note, that in the right-to-left interpretation of a selector, as soon as it fails a match, it stops trying, and thus expends less energy than if it needed to keep interpreting.

Consider why you are writing the selector

Consider this:

#main-navigation li a { font-family: Georgia, Serif; }

Font-family cascades, so you may not need a selector that is that specific to begin with (if all you are doing is changing the font). This may be just as effective, and far more efficient:

#main-navigation { font-family: Georgia, Serif; }

CSS3 and Efficiency

Kind of sad news from David Hyatt:

The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance.

The whole comment is worth reading.

CSS3 selectors (e.g. :nth-child) are incredibly awesome in helping us target the elements we want while keeping our markup clean and semantic. But the fact is these fancy selectors are more browser resource intensive to use.

So what’s the deal, should we actually not use them? Let’s think about practicalities a bit…

Practicalities

That Mozilla article I linked to at the top? Literally 10 years old. Fact: computers were way slower 10 years ago. I have a feeling this stuff was more important back then. Ten years ago I was about to turn 21 and I don’t think I even knew what CSS was, so I’m not going to get all old school on you… but I have a feeling we don’t talk about this rendering efficiency stuff very much is because it’s not that big of a problem anymore.

This is how I’m feeling about it: the best practices we covered above make sense no matter what. You might as well follow them, because they don’t limit your abilities with CSS anyway. But you don’t have to be all dogmatic about it. If you happen to be in the position where you need to eek out every last drop of performance out of a site and you have never considered this stuff before, it may be worth revisiting your stylesheets to see where you can do better. If you aren’t seeing much rendering slowness in your site, then don’t worry about it, just be aware for the future.

Super-speed, Zero-practicality

So we know that ID’s are the most efficient selectors. If you wanted to make the most efficiently rendering page possible, you would literally give every single element on the page a unique ID, then apply styling with single ID selectors. That would be super fast, and also super ridiculous. It would probably be extremely non-semantic and extremely difficult to maintain. You don’t see this approach even on hardcore performance based sites. I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.

Thanks to Jason Beaudoin for emailing me about the idea. If anyone knows more about this stuff, or if you have additional tips that you use in this same vein, let’s hear it!

Just as a quick note, I’d also like to mention that since CSS style selectors are also used in many JavaScript libraries, these same concepts also apply. ID selectors are going to be the fastest while complicated qualified descendant selectors and such will be slower.

In the countdown to the SilverStripe CMS 2.4 release, we'll be running some interviews with people involved in key aspects of our upcoming release.

First up is Sean Harvey, one of SilverStripe's early employees. Sean has been working for more than a year now on various improvements in SilverStripe to do with the Microsoft platform, and answers some questions put to him below:

SilverStripe is an open source software written in PHP. Why is it important to support Microsoft technology?

Because a lot of our customers and developers want it. The number of people downloading and installing SilverStripe on Windows is sometimes close to half the downloads we get in a month. A lot of these installs are for trial or development purposes but, as Microsoft improves support for PHP on Windows Server, we're increasingly seeing SilverStripe running on Windows in production.

So what's the biggest advance that SilverStripe 2.4 brings in terms of supporting Microsoft technology?

That you can run SilverStripe on Microsoft SQL Server 2008. We've officially supported running SilverStripe on Windows for years, but you still needed to use MySQL for its database. With 2.4, the full server stack can be in Microsoft technology: operating system, web server (IIS), and database. To achieve this, several people worked on an object-oriented database abstraction layer, which allows for SilverStripe to elegantly run on a number of different databases. The first database beyond MySQL we got production-ready was Microsoft SQL Server 2008, dictated by the fact that there were several Government agencies that wanted it for their production environments.

How does SQL Server support change the SilverStripe install process?

There's two ways to install SilverStripe on Windows. The most commonly used and simplest method is using the Web Platform Installer via Microsoft's Web Application Gallery. The other is manually setting up your web server environment and using our PHP-based installer, which offers more control over your configuration. Either way, when SilverStripe 2.4 is released, the installers will ask which type of database you want to install onto, and if you choose Microsoft SQL Server 2008, it will set up the whole application for you within seconds. In the Web Platform Installer, the choice is presented like this:

If you do a manual install, the choice is presented in much the same way. The only difference is that a manual install requires you to download and uncompress the SQL Server SilverStripe module (or other alternative database modules) before you begin the install process.

SilverStripe 2.4 will benefit from improved unit test coverage. How does this relate to the Microsoft platform work you've been doing?

First, you can now run tests at the Windows command line. This required adapting SilverStripe to accommodate both the Windows command line and Linux command shells such as bash. This means we could more robustly and comprehensively test what we were doing on SQL Server and other related work.

We have set up a continuous integration buildbot for automated unit testing on checked-in code. This makes us more aware of any code checked in by developers that could break support for the Microsoft platform.

As with any automated testing activity, this job is never complete, but it goes a long way to make us sleep easy at night.

What else is new in SilverStripe 2.4 to do with Microsoft technology?

Mainly bug fixes and performance improvements. Thanks to more people using SilverStripe on Windows and reporting issues they have to us, we've improved the reliability of SilverStripe running on IIS and Windows Server. This is very valuable as we're wanting to support users on Windows Server 2008 R2 right back to the still-popular Windows XP. We've also tested that SilverStripe runs reliably with Microsoft's dynamic caching product, WinCache. Finally, as part of our process in deploying SilverStripe on customer websites, we've identified and incorporated Windows-specific performance improvements.

What has the relationship been with Microsoft in doing this work?

SilverStripe staff and the developer community are responsible for doing all of the programming work, however we've had some really valuable assistance from Microsoft along the way. Mostly, when we've had a question, be it on SQL Server, PHP support on IIS, WinCache, or the Web Platform Installer, we've had Microsoft staff provide us with answers that kept us on the right track, and didn't let us waste time trying to solve technical challenges. They've also tested our application from time to time and offered suggestions on how to do things following best practices.

This support means we feel more confident about the technical approach we've taken when supporting Microsoft technology. Besides technical assistance, we've had Microsoft accept us into their Web Application Gallery, and we were very excited to be one of the initial couple of PHP applications to achieve this status last year.

Does this impact SilverStripe's values with open source?

Not at all. SilverStripe supporting Microsoft technology is in addition to everything else we do. Just as we ensure the CMS allows content authoring to be done in various web browsers, we want to offer choice on what operating system and database you can run our software on.

There are many online image editors. Like Picnik (which was recently bought by Google), Pixlr, Aviary Phoenix, Photoshop online and many others. All them require that you go to their website to edit your images. Wouldn't it be interesting if you could bring the online image editor into your own web apps.?

What if you could embed an image editor?

Last week I received an email from a new startup called Picmeleo. And they have done just that. An image editor that you can embed into your own site or web app.

That's just brilliant.

Think of the opportunities here. This is an easy way to integrate image editing directly into publishing systems. Need to scale the image, no problem. Need to crop it? Yep - done! Need to add image editing into your social app. Yep that too.

As Picmeleo puts it:

We created Picmeleo in order to provide a better tool for online photo editing. Third-party developers can easily add Picmelo to their web service and launch the light-weight yet powerful photo editor whenever their users need to to upload or to edit an image. By adding Picmeleo to your web service, you can now engage your users with even richer content. Unlike other photo editors, Picmeleo opens within your site and your users never leave your service.

The service is completely free, but they plan to add a premium version later with more features.

- Read Comments

Back in late October 2009, Adobe Labs showcased an upcoming feature in Photoshop called Content Aware Fill. And it was absolutely amazing. Now they have released another video, showcasing even more impressive image manipulations.

It allows you to remove parts of an image, defects, lighting errors, unwanted elements with just one stroke of the brush. And it will simply generate a completely real background it its place.

This takes image manipulations to a completely new level. Virtual images are now just as easy to make than real ones.

- Read Comments

The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one.

When designing with usability in mind you must make sure you test extensively, and consider the fact that what may be easy for you to interact with, may be difficult for others. It is about finding the right balance that will allow a wide variation of users to exit your website satisfied with the user experience.

Why and What to Ask?
We’ve put together several questions (you might not have heard of) that will help you enhance and assess the quality of your websites usability. Not every question may apply to your case, however, these questions are meant to help you to think a bit more from a users perspective.

How Can I Enhance the Usability of My Links?

I was a bit hesitant to start off with this very question, mostly because some believe that links don’t play any part in a websites usability factor. However, from previous testing and links being a definite part of user interaction, we know that we must find ways to make links as clear and concise as possible.

A user must clearly be able to point out a link within a sentence, paragraph, or anywhere else on the site for that matter. Many designers have solved this issue by adding small icons to links through CSS, and adding anchor text. Links that are associated with your websites navigation need to be given even more attention. A sites navigation can make or break the user experience. This is especially true with tweaking your website for maximum accessibility.

What is the Five Second Rule?

When you refer to a websites usability, you’ll sometimes come across the “five second” rule. Even though there may be several versions of the five second rule such as three or two seconds instead of five, the general idea is that a user should be able to digest or have a quick break down of what your website is all about, as well as what you have to offer within the first few seconds of their visit. Anything after that will more than likely result in disinterest and may eventually drive visitors away.

The homepage is key, since it is the first thing users will become acquainted with. What does this have to do with usability? Everything. If your website fails to catch the attention of the targeted user, then there simply will be seldom interest in using your website. The Five Second Test (usability testing tool) goes hand-in-hand with the five second rule.

Are the Titles and Headings Distinctive?

This benefits every site, however, if you run a blog/magazine then this will be one of the most important elements of your websites usability. You should make sure that your titles for sections and posts are easily distinguishable and clear. They must be easy to read, understand, and remember. When you style your headings it’s important that you don’t over-do-it and you take your time in selecting the right type of font. Bad titles and headings can make sure site look convoluted and somewhat distorted.

Is the Content on My Site Displayed in a Consistent Manner?

The information displayed on your website should be structured in such a way that it represents consistency. Content that isn’t structured will make your website look messy and unappealing.

For example, if your blog posts are all aligned to the left, you should make sure that every post is aligned to the left. It wouldn’t make much of any sense to have one post center aligned, the next to the left, and a few to the right. Users will be confused and their eyes will most likely end up hurting after trying to read the mess on your site.

Do Clickable Items Lure Me to Click Them?

Simply said, what’s the point of having an item you want users to click on if it doesn’t even seem clickable? For example, if you have image ads on your website you’d definitely want users to click on them. A simple and straightforward way to do this is to add a property such as a drop shadow to all of your image related ads through your CSS.

CSS-Tricks is a reasonable example of what we’re talking about. Check out the sidebar with the 125×125 ads, see how they interact and the size of the border around them. All of these factors contribute to luring you in to clicking on the ads. In such a way, elements you want users to click on should be undeniably clickable and are expected to contrast the rest of the content one way or another. Make it easy for your users, guide them a bit and you’ll see that they’ll respond much better to anything you “throw” at them.

Is the Entire Site as Functional as It Is Appealing?

What’s the point of having a website that has been aesthetically “perfected” if it isn’t nearly as functional as it looks? Your website should respond well to actions performed by the users. If the site can’t deliver quality functionality, then you’ve more than likely defeated the purpose of usability. True usability is more than just design, it’s function. We’re not inferring that you should place more emphasis on the back-end of your website, however, there should be a balance between the front/back end design. These two will always work together to ultimately create a much better user experience.

Does the Site Load Quickly?

Even though this question is obvious to some, it’s still something that should be included within this article. The speed of which your pages load can drastically contribute to the usability of your website. If your web pages fail to load quickly, then this can put a strain on the time users have to interact with your website. The faster your pages load, the better users are able to interact with your website, resulting in a much more appealing UX.

Remember you can always post your usability related questions on Design Reviver Answers for accurate and informative responses.