Last week, on the 3rd of May 2012 the GNU Image Manipulation Program, also known as the GIMP, released version 2.8 of their cross-platform software. It supports many new features, the most notable of which is the long awaited single-window mode as well as many other user interface tweaks which make this version more attractive and intuitive to use.

It is available to download from the gimp.org.

Single-Window Mode

The condensing of all those different windows into a single large window makes the use of this application significantly easier. The memories of using older versions of the Gimp mainly consist of losing these odd sidebars and taking time out of image making/editing to fit it all on screen – No more!

On-Canvas Text Editing

Moving font styling onto the image canvas makes changing the font and it’s size much easier.

The Gimp 2.8 hosts many new features (see full list), most of these changes are to the interface but it makes a huge difference. It worth a download.

As you may, or may not, already know on the 29th of February, Microsoft released the Consumer Preview of its new operating system, Windows 8. It is available at the moment for anyone to try from their website (ISO). Windows 8 harbours many new features and changes which will be looked at in this review.

Metro UI

A major change in Windows 8, which you can’t fail to notice instantly, is the Metro User Interface. It takes after Microsoft’s own Zune Player and Windows Phone interface with coloured tiles used for different applications. When using this interface with a desktop computer, as I am, you can’t help but feel somewhat out of touch as the interface was designed for mobile devices with touch screens. Although it doesn’t feel fluid when using a mouse and keyboard, it does however look amazing and has a surprisingly intuitive interface.

Each native Metro application, shown as a tile, has a coloured background and large icon making it easy to find what you’re looking for, quickly. In contrast however, most applications you’re used to using on Windows7 have a more generic look making it harder to instantly find what you’re looking for. This is illustrated in the screenshot below.

The Desktop

When using the conventional Windows 8 desktop, you’ll find that the visible interface has been cut back. For the first time since Windows 95, there is no Start button. The use of hot corners is now heavily used, the bottom left corner when hit with the mouse will show a start box and when clicked takes you back to the Metro UI. The top-left corner shows you the app you were just using and shows you all the other Metro apps in use. Either right-hand corner will show you the settings, share and search bar – which can also contains a start button.

This interface holds some very smooth animations and intuitive features, but there are still many problems. To access the start screen from the bottom left of the screen, for example, requires the mouse to be exactly in place to work.

The other noticeable difference to the desktop is the use of the ribbon in Windows Explorer which neatly adds more features in a clutter-free way. Windows 8 also uses the up and coming version of Internet Explorer 10, which is what I am using to write this article.

The Upsides

Windows 8 when used with a touch screen device and the Metro UI is a pleasure to use. It has a beautifully designed, responsive interface. The in-built software like the Mail and Calendar app are powerful and at the same time, simple to use. It is possibly the best experience on a tablet or touch screen laptop around.

Another feature which am I greatly impressed by is the fact that your settings and personalization is synchronized between computers using cloud computing. This means that your desktop is the same on all your Windows 8 machines and it all connects together into your ‘Microsoft Account’, a.k.a. your Live Account.

The Downsides

I’ll be honest with you, it took me close to 10 minutes to find out how to simply turn my computer off with Windows 8. The interface, although brilliant in some places can be confusing and more importantly inconsistent. For any readers not aware of turning your machine off within Windows 8, the correct button can be found within the right-hand bar, under settings.

The time can be found in multiple places throughout the system, depending on which suits you – which although this is not an issue is an unneeded inconsistency.

Conclusion

Windows 8 is a stepping stone to a great operating system but it is currently very fragmented. Microsoft is right not to plunge into an early release and in my opinion should takes things slowly. There are some very promising things on the horizon, like Windows 8 for ARM devices and Microsoft using the power of the cloud to enhance the desktop experience.

Windows 8 has been described, correctly in my opinion, as two operating systems. On the one hand you have the Windows 8 Metro UI for touch devices and on the other a Windows 7.1 with a new Aero Theme and no Start Button. This will need to change if Windows 8 is to be a success.

Hope you enjoyed reading this review, for more reading on the Windows 8 Consumer Preview there is a very good article by Matthew Baxter-Reynolds at the Guardian.co.uk – worth reading.

You may have seen various types of speech bubbles across the web, some use images and others use pure CSS to create this effect. In this article we will be looking at how you can create a triangle with CSS and how you can use this triangle to then create simple speech bubbles.

Photo by StreetFly JZ.

Triangles

The basics of CSS triangles is illustrated brilliantly by both CSS-Tricks and Dave Walsh. Triangles basically consist of an element with zero width and height, a single large border and two transparent borders – so shown in the example below.

HTML

<div class="triangle"></div>

CSS

.triangle
{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;

	border-left: 25px solid MediumVioletRed;
}

Demo

There are many different shapes and sizes you can achieve using this method of rendering, as well as many uses – arrows being the obvious choice. But my favourite, and the one we’ll be covering in this article, is using CSS triangles to create speech bubbles.

Speech Bubbles

A huge number of variations can be achieved simply by tweaking certain areas of the code, so here’s just one example:

HTML

<div class="bubble">Hello World!</div>

CSS

.bubble
{
	position: relative;
	width: 160px;
	padding: 20px;
	background-color: SteelBlue;
	border-radius: 2px;
	color: #FFF;
	text-align: center;
}
.bubble:after
{
	content: "";
	position: absolute;
	top: 100%;
	left: 75px;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;

	border-top: 30px solid SteelBlue;
}

Demo

So that’s all for now folks! If you’re interested in this subject there are some more interesting articles available, like Speech Bubble Arrows that Inherit Parent Color by CSS-Tricks and Pure CSS speech bubbles by Nicolas Gallagher. Also, if you like this article remember to share it.

Yesterday, the 20th of October 2011, WordPress 3.3 Beta 2 was released. With an array of minor and major changes, this is still just a Beta copy but gives great incite into what’s to come. An in-depth list of changes are available for Beta 1 and Beta 2 on their blog. The WordPress development team are aiming to release the full version of version 3.3 by the end of November.

The Admin Bar

One of the major improvements to WordPress 3.3 so far is the Admin bar with general aesthetic enhancements, simpler interface and a few interesting features.

Theme Design

This Beta also includes improvements such as Theme Options. So, for example, the Twenty Eleven Theme has the option of a Light or Dark colour scheme.

Media Uploader

Beta 2 is also bundled with a new media uploader, allowing you to drag and drop image files straight into the uploader. A simple and effect difference which adds nicely to the feel of WordPress.

Download

Download WordPress 3.3 Beta 2

Note: This should only be used to test-drive and learn what’s to come with WordPress and shouldn’t be used to run a production copy of a website (yet!).

Google accidentally released a video earlier this month showing the new Gmail interface which is on its way soon. In my personal option it is about time and it looks amazing (from watching the video).

Within Gmail, it is possible to use the Preview Theme to get similar qualities and appearance to the proposed interface. To activate the preview theme, as you would with any other theme. Go into ‘Settings’ by clicking the cog icon in the top right corner, then down to Mail Settings. Once in Settings, click the ‘Themes’ tabs and click on Preview to try an intermediate version of the interface. Note: this is not in any way the final version, just a refined theme for the current interface. Have fun!

Columns are lovely things. They allow you to read text easier, make chunks of text look nicer and now with the power and beauty of CSS3 you can make columns dynamically – yey! No more table columns and splitting of paragraphs to achieve the same effect.

This is supported by Chrome (with prefix), Firefox 3.5+ (with prefix) and Opera.

Style.css

p
{
	column-count: 2;
	column-gap: 30px;
}

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lorem erat. Suspendisse blandit pellentesque mattis. Donec condimentum venenatis quam at vulputate. Suspendisse potenti. Quisque pretium enim nec lectus sodales molestie. Suspendisse sollicitudin justo diam, in bibendum arcu. Vestibulum a nunc elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et nulla augue.

#columndemo
{
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-moz-column-rule: 2px solid #36F;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	-webkit-column-rule: 2px solid #36F;
	column-count: 2;
	column-gap: 30px;
	column-rule: 2px solid #36F;

	text-align: justify;
}

This is all well and good if you’re using an adequate web browser, but what if you’re not? Shouldn’t you get a similar user experience which ever browser you’re using? Well, like with most CSS3 functionality, it is possible to run a JavaScript fall-back. More information on this can be found here.

Photo by 96dpi

If you’re in the process of developing a WordPress theme, browser caching isn’t necessary and it can be a pain because your theme won’t always update after you have made a change. On the other hand caching plays a crucial role in the speed and download times of websites. So what are we to do? In WordPress it’s actually very simple, if you know what you’re doing, to set up a function to force the browser cache into re-downloading the CSS file again. Depending on your level of PHP knowledge, there is a plugin already built for this task called CSS Cache Buster, or you can write your own function.

All the code for doing this yourself can be found on Alister Cameron’s website which is what my code is based on.

Functions.php

// Stop CSS Caching
function stop_css_caching()
{
	$split = explode("wp-content", get_bloginfo('stylesheet_url'));
	return get_bloginfo('stylesheet_url') . "?" . filemtime(ABSPATH . "/wp-content" . $split[1]);
}

This function basically takes the URL of the default stylesheet and adds the time modified variable to the end of it.

Header.php

<link rel="stylesheet" type="text/css" href="<? echo stop_css_caching() ?>">

The browser will see this as a different stylesheet and download it again and show your recent change.

Photo by mauricesvay

JavaScript libraries, such as jQuery, make easy work of animations and effects when working with websites. They allow you to move, change and fade different DOM elements in your web page, which can improve your website visually and sometimes make it more usable. There are, however, disadvantages to using jQuery, for example, most modern web browsers have the ability to turn JavaScript off and Firefox has a popular addons called ‘NoScript‘ which will also disable JavaScript – and your effects too. CSS, with version three of its specification, has CSS transitions which allow you to do very similar animations and effects as jQuery.

At the moment CSS transitions are supported by FF4+ (with Prefix), Chrome (with Prefix), IE10 (with Prefix) & Opera 10.5+ (with Prefix).

style.css

a
{
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;  
}

Demo

#example
{
	display: inline-block;
 	margin-top: 16px;
	padding: 6px 10px 6px 0;
 	font: 18px Georgia, serif;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}

#example:hover
{
	padding-left: 200px;
	background-color: #333;
	text-shadow: 0 0 4px #000;
	border-radius: 16px;
	color: #FFF;
	font-style: italic;
}

For more information on CSS transitions I would recommend reading ‘CSS3 Transitions‘ on Net|tuts+ and ‘Connecting The Dots‘ by Smashing Magazine.

[Photo Source]

WordPress, by default, includes a local copy of jQuery which gets loaded up on your website and also used by the WordPress Admin Dashboard. This is great because it makes life easier but wouldn’t it be even greater if WordPress used a copy of jQuery which was stored on Google’s CDN (or jQuery’s CDN for that matter). Well, with a tiny bit of theme editing this is possible.

Functions.php

// JQUERY FROM GOOGLE CDN
// IS_ADMIN() == DASHBOARD

if ( !is_admin() )
{
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"), false, '1.6.4', true);
	wp_enqueue_script('jquery');
}

There are many advantages to using jQuery from a content delivery network, it’s faster for a start because it’s likely that the script has been cached already and it puts less strain on your server. But what if, however unlikely, that Google’s CDN goes offline? Well, jQuery wouldn’t get loaded. So the bullet-proof approach would be to also add the fall-back into your theme.

Footer.php

<script>
	window.jQuery || document.write('<script src="/js/jquery-1.6.4.min.js"><\/script>')
</script>

jQuery

// SMOOTH-SCROLLING

function filterPath(string) {
	return string
	.replace(/^\//,'')
	.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
	.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
	var thisPath = filterPath(this.pathname) || locationPath;
	if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') )
	{
		var $target = $(this.hash), target = this.hash;
		if (target)
		{
			var targetOffset = $target.offset().top;
			$(this).click(function(event)
			{
				event.preventDefault();
				$(scrollElem).animate({scrollTop: targetOffset}, 400, function()
				{
					location.hash = target;
				});
			});
		}
	}
});

// use the first element that is "scrollable"
function scrollableElement(els)
{
	for (var i = 0, argLength = arguments.length; i  0)
		{
			return el;
		}
		else
		{
			$scrollElement.scrollTop(1);
			var isScrollable = $scrollElement.scrollTop()> 0;
			$scrollElement.scrollTop(0);
			if (isScrollable)
			{
				return el;
			}
		}
	}
	return [];
}

Code Source