Eduvacation

Still on holidays, have some time set aside for projects, which is nice.

I wanted to create some music but have been feeling frustrated by limitations of my knowledge around digital audio production. In the past I’ve muddled through and learnt bits and pieces as I’ve needed them. Unfortunately this breaks your creative flow and makes the entire process rather stilted.

I would find it hard to justify tertiary musical/creative study (again), but every now and then I get The Urge To Study (you know, that concentrated type of learning). Especially when it comes to detailed technical/hard skills—it’s been a while.

I watched a few freebie tutorials and even purchased some, but struggled with a lack of detail/passion from presenters. Earlier this week, I was lucky enough to stumble across Tom Cosm. His content, pace and humour have been working really well for me. His premium content is amazing value. Big thank you to Tom!

I’m learning a lot, it’s exciting! I love the feeling of knowledge rushing through your hair as you blast through the self-paced video tutorials in your open-topped… wait, I may have butchered a methophor in there somewhere.

All of his tutorials (and most of the others I’ve stumbled across online) are based in Ableton Live, which I don’t have. It looks like the right tool for the kinds of techniques I’d like to use. After investing in Pro Tools 10 and 11 (time and money), it seems that the universe is encouraging me to switch to Live—I should have listened to Incrementalist, he gave me that tip a long time ago.

Hmmm, I sense another musical investment in the near future.

Posted in

Custom app icons updated

Spent a little time revisiting the Custom app icons plugin for WordPress.

It was well overdue for a revisit, since initial release in 2010, Apple have released a bunch of new devices of differing display resolutions and with them a range of different dimensions of app icon to support. This plugin update allows you to specify a different sized app icon for each device.

I’ve also added the ability to specify if you’d rather Apple didn’t add the glossy effect on top of your icons (select ‘My icons are pre-composed’) in the configuration screen.

Thanks to Stephan S for saying hi and suggesting the idea!

Posted in

Pure CSS ‘tags’—ala SoundCloud

For the recent irama.org realignment I wanted to emulate the cute little ‘tags’ that sit below a track on SoundCloud.

I wanted to try to do as much as possible using CSS alone—without background images, too many extra elements, or general hackery. Ideally, the markup would be:

<a href="…">Tag text</a>

There are lots of posts around the interwebs about CSS triangles, but it’s hard to find a concise tutorial for putting an arrowhead on the end of a box. So I started by pinching borrowing a technique Ben pulled together for a site we were working on.

I noticed the negative margins were not playing nicely with iOS so I switched to relative positioning to offset the arrowhead. This also simplifies the padding/margin calculations, makings the final solution easier to tweak.

.tags a {
	float: left;
	background: #c5c5c5;
	color: #fff;
	text-decoration: none;
	margin: 0 0 10px 18px;
	padding: 2px 10px 1px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	position: relative;
	transition: all .25s linear;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
	line-height: 21px;
}

.tags a:before {
	content: "";
	border-style: solid;
	border-color: transparent #c5c5c5 transparent transparent;
	border-width: 12px 13px 12px 0;
	position: absolute;
	left: -13px;
	top: 0;
	transition: all .25s linear;
}

Hover states need to cover the anchor background and the triangular border colour…

.tags a:hover {
	background-color: #39F;
}
.tags a:hover:before {
	 border-color: transparent #39F transparent transparent;
}

For the ‘hole’ punched in the tag, I thought I’d have to rely on a background image. Ben made a good point about reusing the bullet from a list item (which worked, with some negative margin trickery).

I finally thought to check the approach that soundcloud actually take and I was pleasantly surprised… clean minimal markup and a CSS-only solution!

Why didn’t I check their implementation sooner??

In the end, I borrowed their approach for the hole…

.tags a:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 1px #737373 inset;
    content: "";
    height: 5px;
    left: -1px;
    position: absolute;
    top: 10px;
    width: 5px;
}

Which ends up looking like this…

Screenshot of two tags in situe next to a blog post

Hats off to the designers and front end devs at soundcloud, they know what they are doing!

Posted in

Realignment, irama.org 4.0

I figure it’s high time to start posting again, and long overdue to update the site template—some of the legacy cruft was getting a little embarrassing.

I had an irama.org 3.0 design in the works a few years ago. Noting came of it. Thank goodness, it was awful. I can’t bring myself to show you.

This update (skipping straight to 4.0) features a clean, minimal design, focusing on the content. The overall colour scheme and structure has remained as it always was (it’s just a realignment, after all).

The code is a fairly heavily modified version of the simple Skeleton theme for WordPress—I’ve given up rolling my own themes from scratch, the amount of effort required to output cleaner code is just too high. With legacy cruft gone, there’s room to embrace contemporary technologies: HTML5 replacing XHTML, CSS3 media queries for responsive layout to replace the old JavaScript-driven approach.

I haven’t testing the IEs yet. If you’re using IE, I’m sorry, how embarrassing for you ;)

I’m sure there will be tweaks to come in future.

Edit (11/04): For this design I played with visual hierarchy using ‘negative visual weight’—i.e. fading back secondary elements so the content stands out. This reduces accessibility for some visitors. If this applies to you, I apologise—please let me know how you prefer to deal with sites that have colour contrast issues? e.g. Do you: a) Use a custom style sheet? b) Look for a ‘zoom layout’ or ‘accessible version’ button? c) Curse the designer and leave/complain?

Posted in

WIP—Rise of the Red Dragon

A Work In Progress. Feedback welcome (here or on soundcloud), be gentle ;)

Part two of a two (or three) part suite loosely themed around the conflicted nature of a fallen angel. Mostly just an excuse to play with MIDI and VIs!

Posted in