Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

• Typicons
• Hutchings Twitter-Account
• Creative Commons Attribution-ShareAlike 3.0 Unported

Every year, the WordPress team releases a flagship theme, that goes by the name of Twenty-Something. We've had Twenty Ten and Twenty Eleven so far, and this past week, WordPress provided us with another addition to the line-up: Twenty Twelve! It’s an easy guess to relate the names to their release years. Even though it is a bit late and we are already in the later half of the year 2012, who wouldn’t want a good WordPress theme?

Following in the footsteps of its predecessors, Twenty Twelve has a lot of expectations to meet and shoes to fill. In this article, we shall take an in-depth look at the latest flagship from Automattic.

Introduction

Designed by Drew Strojny of The Theme Foundry, Twenty Twelve is an elegant and responsive theme. If you take a casual look at the theme, you'll notice that it isn't entirely like those blogging themes out there.

Of late, WordPress is being used to create websites of different genres — enterprise entities, news and magazines and even e-commerce sites. One can safely conclude that WordPress is no longer a mere blogging tool. Obviously, Twenty Twelve acknowledges the fact, that WP now has a user base beyond blogging. The home page does not list blog posts in the traditional style by default — instead, it has special areas and widgets for text and other content.

Digging Deeper

So, what does this theme have in store for us? Let's take it for a spin!

Mobile-First Layout

When WordPress 3.4 was released, one of the most talked-about features was the support for retina displays. Twenty Twelve does not disappoint in this section. The theme has a mobile-first layout and is totally responsive. It can be viewed on any device (well, almost) — smartphones, tablets, HiDPI screens — you name it!

Special Homepage Template

As mentioned above, the homepage does not enlist blog posts in the traditional style. Instead, it serves as an introductory or landing page for your website. You can add text, images and other media in the upper section, and use special homepage widgets in the lower region.

The custom homepage of Twenty Twelve is definitely one of the most loved (and hated) features. While some users are enthusiastic about its layout, others are genuinely unimpressed. In hindsight, not so long ago, WordPress itself claimed to be a blogging tool first, and anything else afterwards. The homepage layout, while looking absolutely impressive and useful, quashes the earlier claim. Of course, you can always retain the blog-based layout.

Typography

Nothing much to talk about here except for the fact that Twenty Twelve comes with the Open Sans typeface.

Post Formats and Widgets

Obviously, Twenty Twelve comes with support for multiple post formats. Depending on the format, posts are formatted differently than standard blog posts.

Speaking of widgets and sidebars, Twenty Twelve has a No-Sidebar template. In fact, even the Primary Sidebar won't show up on standard page templates if it does not have any widgets.

Header Images

Both Twenty Ten and Twenty Eleven loved header images — they went as far as having their own set of pre-loaded header images. Twenty Twelve, however, does not come with default header images. Furthermore, unless you yourself upload a header image, the header image section itself is not displayed.

Along similar lines, featured images are not displayed as gigantic banners at the top of posts and pages.

Conclusion

As of now, Twenty Twelve is available only for WordPress.com users. However, users of self-installed WordPress will be receiving this theme in the official repository soon enough (though at the moment, no fixed date has been provided). Interested in the theme and not willing to wait? Check out the demo!

What do you think of Twenty Twelve? Impressive or not? Feel free to share your thoughts with us in the comments!

(dpe)

Photographers considering using a computer based on Linux not seldom have exactly one reason to do so: Darktable. Darktable is an open source project, best compared to Adobe Lightroom. It is a photo editor following the workflow of photographers, thus having them easily feel familiar with the app. Beginners will be overwhelmed by its feature richness. Now there is another option, if you don’t want to use a Linux-system. A few days ago, Darktable has been made available for Mac OS X

Darktable: Lighttable, darkroom, tethering

It almost sounds too good to be true. But the project Darktable doesn’t need to hide behind the functionality of its commercial competitor Lightroom. Some even say, that Darktable’s RAW Tools are even better than those Adobe has to offer. Adobe recently changed the name of its product to Photoshop Lightroom and dropped the price for the most recent version 4 to an affordable 149 USD. As the competitors show similarities in the look of the whole user interface, I wonder who got inspired by whom…

Darktable, available in several languages, that are automatically invoked, according to the operating system it detects, follows a modularized workflow. Lighttable lets you do administrative tasks in the likes of Bridge or Picasa or … Lightroom. Meta-data can be viewed and changed. Categorization can be done from here, as well as sorting operations in a variety of ways.

The module darkroom is responsible for the manipulative work. As darktable is limited to tasks that real photographers would do in real darkrooms, we don’t have the opportunity to work on collages or other montages. All effects, corrections and related functionality can only be invoked on photographs. Darktable’s methods are powerful and very finely tunable. The results are often described to be better than what can be achieved using so-called professional software such as Lightroom. The last module, called tethering, is used to connect cameras to Darktable in a way that their contents can be imported automatically.

The product is comfortable and fast, the results are high-class. Moreover, Darktable is completely free. If you’re into one of the many Linux-derivatives, you probably know that the software has been available for quite a long time to the users of the open source OS. Ubuntu-users will even find a version of Darktable pre-installed. Be aware that these usually are older versions, so make sure you update soon as possible, using one of the many repositories available. If your OS carries names such as Fedora, Suse or Gentoo, the same applies to you. Fit as a fiddle programmers of course just compile their own version using the Sourcefourge- or Github-sources, just like Chuck Norris would do. Wait, probably with Chuck Norris sources compile themselves to avoid having Norris compile them. Anyway…

Freshest member of the family is the Darktable-version for Mac OS X, which is available as a DMG using this link. If you read the blog entry that announces the availability of the Mac-version, you’ll feel flooded with comments of users stating to have a wide variety of problems using, configuring, but also even installing the app.

Darktable for Mac OS X: a little self-test

Gotten insecure from the comments I mentioned before, I decided to give Darktable a spin, so none of our readers would run into trouble and probably blame me for having gotten their MacBooks damaged. I installed Darktable as is usually done using the downloaded DMG. Darktable went from a lean 15,5 MB DMG to a not so much fatter 52 MB app. And I did not experience any problem whatsoever. I imported over 1.000 pictures into lighttable and I was able to fire effects and filters at chosen pictures without any misbehaviour on the side of Darktable. Everything worked absolutely flawlessly, until I tried to connect my camera via the tethering-module. I couldn’t get that to work, but a workaround for this problem is already in existence. As I never use automatic importing of pictures, I didn’t give this workaround a spin, though.

The recent version of Darktable carries the number 1.05. The whole project is organized professionally und comes with a documentation, that leaves no stone unturned. You should definitely check out the project’s ressources-section.

People seeking a solution to professionally manipulate their photos, need not push out cash any longer. As cash always tends to vanish as soon as you look at it, Darktable might save you from premature bankruptcy and help you lead a happier life. You should have a 64-bit OS, though. It still runs on 32, but you know…

Microsoft’s new UI, once known by the name of Metro, has caused quite some buzz in the tech world. Meanwhile the name has been dropped, which again caused quite a buzz in the tech world. We don´t know why this was done nor do we know if the next Windows will be a market success. What we know is, that Metro as a design style has its fans. If you are one of them, we have great news for you. Thanks to Metro UI CSS you can give your very own website the same tiled look, the interface of the next generation Windows will have. Go ahead!

Metro UI CSS

Metro UI CSS is actively developed by Sergey Pimenov, who proves generous enough to leave the tool for us to use free of charge under the MIT license. Pimenov not only copied the typical Metro design, but also implemented a variety of effects from the original Microsoft product, for example the fade-in of subtitles on pictures or the switch buttons.

Metro UI CSS: A feature-rich framework

Get your own impression of what Metro UI CSS is capable of by visiting the demo. You’ll find several pages with examples of how pictures, forms, buttons and the typical tiles, bound to substitute the former Windows icons, look and interact.

Metro: Tiles

Ever seen Metro on a tablet? On these devices, Microsoft implemented vertical scrolling as the standard scroll direction. That’s just the way Pimenov implemented it in Metro UI CSS. Using a touch-device you can elegantly scroll through your website. You’re not forced to, though, as mouse scrolling is also supported.

Metro: Buttons

Metro UI CSS: Made with, yes, CSS and JavaScript

Metro UI CSS is not pure CSS, but relies on several JavaScript libraries for advanced functionality. The foundation is, as it often is, jQuery with some complementing plugins and the new superstar Bootstrap. Pimenov wants it mentioned, that he also integrated some of his very own JavaScript functions.

Metro: Pictures

If you like to learn along the guidelines of a thorough documentation, Metro UI CSS is not for you. Because there simply is no documentation. The demo can be downloaded, that’s it.  But it contains all elements for which the Metro style is available and thus should be a good starting point for the first steps to your very own tiled website. Several effects are invoked simply by calling the corresponding classes. You can easily find out by sneaking through the source code. Metro UI CSS needs a modern browser. Microsoft’s own Internet Exploder is supported from version 9 onwards.

(dpe)

It's been merely a few days, since Firefox 15 has seen the light of day in its final version. But the Mozilla crew isn't lazy and has already pushed out the beta of Firefox 16. Since August 30th Firefox 16 can be downloaded for all the usual platforms. Even a version for Android is already available. This time Mozilla doesn't only target the end-user with some shiny new functionalities. This time Firefox is all about the web developer. Improved developer tools, including a brand-new command-line, and the unprefixing of several important CSS properties will have the community cheer.

Mozilla Firefox 16: It's hyperactive developers code like crazy

It's not always the case that shortened release cycles lead to a higher speed of innovation. Regarding Firefox, though, it does. Looking back at the times where Firefox got updated twice a year, we can clearly see how fast-paced they go now. Say thanks to Google's Chrome for starting a new era. No browser vendor can afford slow-paced development any longer, if they don't want to get lost along the way. Firefox is going full throttle. Of course that's nothing to complain about. The product is improving faster than before and the changes make for a better user experience with every new release.

As Firefox is a product for the masses, the average internet user, we as developers shouldn't wonder that most updates target the end-user. Higher speed, new user interface, improved sharing, mobile clients and what not. But this time Firefox focusses on the developer community.

Firefox 16: Unprefixing of important CSS properties

CSS3 is constantly gaining momentum. Vendors are implementing the functionality faster than could have been hoped for. It's mobile browsing on Android and iOs that's forcing for a faster innovation speed. Firefox got a little behind as of lately and is now hoping to gain some ground in it's constant battle against Chrome. Version 16 brings the possibility to unprefix several important CSS properties as there are:

• CSS3 Animations
• Transforms
• Transitions
• IndexedDB
• Battery- and Vibration API
• Image Values (The Image Values module defines how properties link to pictures via URL. All properties taking pictures as values use this module, e.g. "background-image" and "list-style-image")
• Values and Units (…that CSS properties can have)

Firefox 16: Developer Tools introduce new command-line

Is it the best invention since canned beer? I don't know. But what I know is, that the improvements to the Developer Tools will be enjoyed by the community, to say the least. Mozilla has further centralized tools that where somewhat cluttered around the interface. Now it's even easier to access all developer related functionality from one place. Even better than that is the implementation of what Mozilla calls the Graphical Command Line Interface (GCLI), which is a command line tool for accessing most of the browser's functionality right from the keyboard without having to click around. We all know that a lot of developers claim to be much more productive when they are able to leave their fingers on the keyboard.

The command line can be called using the navigation menu or by a keyboard shortcut (see where that leads?). Once opened, developers can use simple commands to call whatever functionality they like to address. The command line is not limited to control the Developer Tools though. The command help console tells you the available commands and their parameters. After fiddling around a little, you'll soon notice, that the functionality of the command-line is much more powerful than can be seen at first sight. You can even address CSS selectors oder HTML elements individually.

The command pref, combined with corresponding parameters can be used to change configuration options directly. Using the command resize to responsive designs can be tested. You can even take screenshots right from that tiny little command line. What's even better, Mozilla promises to improve the command set of the GCLI in upcoming releases.

Watch Mozilla's video for a first impression:

Web developers should really take a thorough look at Firefox 16 now. It's well worth it!

Related links:

• Firefox Beta Now Available for Download and Testing – Mozilla Blog
• New Firefox Command Line helps you develop faster – Hacks.Mozilla.Org
• Firefox Beta Desktop Notes – Mozilla.org