Announcing Hubbub: GitHub Issues for iOS

Last month, my friend @mattieryan and I quietly released a little something we’ve been working on for the past year or so. I’m absolutely thrilled to announce Hubbub; a GitHub Issues client for iOS.

When Matt and I were building WillyWeather, we religiously used GitHub—in particular, GitHub Issues—for logging, assigning and organising tasks and bugs. We both craved a better experience from our mobile phones. Neither of us could bear to use any of the existing apps and with GitHub abandoning their official client, the demand for such a tool became even greater.

So, we built it. Here is just a hint at what’s already available in the first major release:

We’re already working on bug fixes, interface issues and performance shortcomings and have many great features in the pipeline, including Background Refresh, GitHub Enterprise support and more.

For now, we think you’ll really like the first cut of Hubbub.

Get Hubbub on the App Store

51bits 2.2: Touch, Speed and Typography

I’ve been working hard on the biggest update to this site since it launched, with some improvements I’ve wanted since the very beginning.

The feature banner on the home page has been redesigned, rewritten and now makes use of the HTML5 History API. I dropped iScroll and built it around hammer.js which made gesture recognition relatively simple, not to mention being a much lighter library.

I’ve also dropped Typekit and moved to web-safe and self-hosted fonts; Helvetica Neue just works.

Lastly, all graphics have been re-drawn using Sketch, which was a great way to dive in and learn this brilliant tool. As an aside I’m now using Sketch across my projects more than Photoshop, which is simply great.

The current design is a year old, but this update has left nothing untouched giving it a brand new vibe once again.

Preloading Activity Indication via Pseudo-Elements

A common practice in software design is to display an infinite activity indicator while a server or client task is being performed with an unknown completion time. On the web, this often comes in the form of an animating image which obviously must itself be loaded.

There isn’t much more jarring to a user than making a request and waiting, even for a fraction of a second, for part of the interface to catch up. This small lapse can be masked by preparing the loading indicator before the users’ action requests it. There are several ways to achieve this with pseudo-elements. Here is one:

element {
	display: block;
	height: 200px;
}
element::after {
	content: '';
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(images/loader.gif) 50% 50% no-repeat;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
}

This will render the pseudo-element invisibly, but ensure the browser has already pulled down images/loader.gif for when it’s needed. When an event has been fired that requires the element to display as active, all we need is a class to pull the indicator into view instantly.

element.active::after {
	display: block;
}

Toggling the .active class via JavaScript will control the elements’ activity indication. In most cases, the same effect can be achieved with background-position, visibility, opacity or other CSS definitions. It all depends on the context. Once again, this can be combined with the other methods outlined previously for an improved user experience:

Consistent Overlays with Pseudo-Elements

Last week I wrote about extending hit areas in CSS; just one handy application of pseudo-elements. Another convenient use is defining consistent overlays.

Consider a button, like the following:

button {
	display: block;
	position: relative;
	background: #226be4 linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,0));
	border-radius: 2px;
	line-height: 44px;
	color: #fff;
	text-align: center;
	width: 320px;
	height: 44px;
}

To define the button’s :active state, one might change it’s colour, dim the type or reduce the gradient. This approach is fine, but as soon as you introduce alternate button styles with different colours, or apply the same logic to other UI components, you need to define the pseudo-classes for those too. Then, if you want to tweak any of the attributes further down the track, you must also change those of the :active states.

Enter the pseudo-element:

button::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 2px;
	background: transparent;
}
button:active::after {
	background: rgba(0,0,0,.4);
}

It’s worth creating the pseudo-element directly on the button and then altering it’s background on the :active state, rather than writing it all solely to the :active state so that the browser has less work to do on demand.

This technique can be used in conjunction with last week’s trick by setting both ::before and ::after pseudo-elements and will, of course, work with :hover, :active or any other state.

Using Pseudo-Elements to Define Hit Areas

Pseudo-elements are a powerful yet underused feature of CSS. If you design for the web, you’ve probably at least used them for clear-fixing or creating complex shapes, but there are so many more practical uses if we explore just a little outside of the box.

One application of a pseudo-element is to define an invisible hit area around an interactive element, like so:

element {
	position: relative;
	display: block;
	width: 320px;
	height: 44px;
}
element::after {
	content: '';
	position: absolute;
	top: -12px;
	right: -12px;
	bottom: -12px;
	left: -12px;
}

This creates invisible bounds that extend from all edges of the element by 12 pixels. No matter what you do to the original element, so long as it’s position is anything other than static, it will maintain the extended hit area.

A good use case for this is to guard against the dead pixels between navigational items so that the chance of missing them—especially via touch input—is reduced.

Note that as above, CSS Selectors Level 3 specifics a syntactical difference between pseudo-elements and pseudo-classes:

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.

This is just one way that I take advantage of pseudo-elements in my work, every day. Over the next couple of weeks, I’ll publish some more of my favourites.

Close