Reality of Life by Nova Fractal is featured on Dimensional Gateway 2 a compilation of Goa tunes.
Wow, we’re well into May and this is the first mix I’ve managed to do for the year. The reason for that is because we’ve been renovating our house and had to move out from January through April.
As my DJ set up is just my laptop and a midi controller which is smaller than the laptop, I could still have been doing mixes but the past few months have been pretty full on in many respects and I just didn’t have the time or inclination.
That’s also meant I haven’t had as much time for collecting new music but there have still been the odd few that have been added to the collection. Most of the tunes on this mix have been sitting waiting patiently for me to get around to them although there’s a couple like the Prot remix of Outerglow which I’ve picked up more recently.
This is another full-on psy trance mix which follows a similar formula to a lot I’ve done: starting off which some rumbling progressivey tunes before picking up the pace while moving through different flavours and then ending with one of my favourite tunes of last year which is actually a Goa trance tune, Reality of Life by Nova Fractal, a top drawer psy and goa producer from Croatia. He’s been popping up on various compilations for a while and I first heard this tune on a mix by DJ Celteric last year. If you like Reality of Life, definitely check out that mix too.
Tracklist is below and you can download it from the Mixes page.
Well actually, it’s been a case of a building site taking over my office. As a freelancer, I have the luxury of being able to work from home, but for the last four months, our home was being renovated.
We’ve completely remodelled the kitchen and bathroom, added a new bedroom downstairs and added a new level upstairs with bedroom, ensuite and office — essentially the whole back half of the house was demolished and rebuilt. We were without water or electricity for nearly the whole build and had to move out to a neighbour’s house around the corner. Being able to live so close to home was a blessing in so many ways — being out of your own home is disruptive enough but travel arrangements to work, school and daycare remained unchanged. There’s also the financial aspect with the next best option we found to be an on-site van in a caravan park for $700/week 20 minutes away from home.
The neighbour’s house did have unlimited broadband and I did spent a lot of hours working from there, but it wasn’t ideal for full-time work: I couldn’t easily set up my second monitor or my PC and my own particular workflow involves serving sites in development from my laptop via DynDNS which requires my IP address to be added to a setting, and the router running the network I’m on to be able to forward ports. I didn’t really feel like I could move in and say: Oh and by the way, I need to fiddle with your modem.
So I actually ended up working from another neighbour’s house, the one behind us, from which I could access my own network via wifi from the room closest to our house. Yes, we do have good neighbours (and it’s amazing how many comments just like that we got).
The routine
We have two dogs, a labrador and a border collie (you can see them on the 404 page) and they’ve never been to a kennel or lived anywhere for an extended time without us so we never really considered keeping them anywhere other than at the house while it was being renovated. They’re easy-going enough and don’t worry about having strangers around but they fret a bit if they’re left on their own and bark a bit and get destructive around the yard so we didn’t want to leave them alone at the house at night after all the builders had gone for the day.
So I would actually sleep at the house every night, using a torch to find my way in where I could turn on a lamp plugged into the powerboard that was plugged into an extension cord that ran out to the temporary metre box in the back yard.
An average day would involve:
getting up about 6am and taking the dogs for a walk
go around to the neighbour’s house where the rest of the family were for breakfast
take our eldest to school at 8:30am (he’s in his first year)
go back to the second neighbour’s house to work
pick up my son from school again at 3pm
work until 5pm when the rest of the family would get home
take the dogs for their afternoon walk
go back to the first neighbour’s house for the evening — dinner, kids’ bath/bedtime etc.
go back to our house to sleep
That routine changed a little bit for the last couple of weeks of the renovations, but that was how it worked for the majority of the time. We were staying in a granny flat under the neighbour’s house so we had our own space which was great but at times it did feel a bit cramped especially when you had a three- and four-year-old getting up to crazy kid antics while you’re trying to make dinner. There was also a few occasions, as I was walking out of the neighbour’s at ~11pm to walk back to our house, that I wished I could just stay put. But for the most part, being out of home, and living by an unusual routine wasn’t as stressful as I thought it might’ve been. (There was stress, but that’s a story for another time.)
The build
Our renovation was relatively painless from a building point of view. There were no hidden surprises that forced us to mortgage a child to cover the extra expense. We did go over the originally quoted price, sure, but the over amount fell within the standard 10% and we’d already budgetted for it.
We had a good builder who communicated with us well and regularly, and the team of tradies he had working for him were a good bunch who did good solid work. The same can’t be said of all the subbies who did different parts of the job though. But then if everything had gone completely smoothly, we wouldn’t have any funny stories to tell.
Like the subbie who came to replace a broken window, without actually bringing the replacement glass with him. He didn’t waste his time entirely while he was on site though; he did remove the broken glass — by just shoving it out from the second storey so that it smashed on the ground below and then left it there for someone else to clean up.
Or the chain-smoking plasterer, who was in his 70s, who apart from being a bit sloppy at his job, flicked a cigarette butt into the skip and set it on fire. He had to get a few buckets of water to put it out.
Or the guy who installed our mirrors who broke one of them getting it out of his truck. And then had the same thing happen on his second attempt. (Do you reckon glaziers live their whole lives with bad luck?)
The result
We’re pretty happy with the way things have turned out. There’s a few minor little things that still need attention that we’ll have to get back to the builder about, and we’re still finishing off painting the interior (doing inside ourselves and the downstairs storey outside; will need a professional to do the second storey), and we can’t put carpets in upstairs (all polished floors downstairs) or blinds or curtains until the painting’s finished. Which means that I have to use a sheet tacked over the window next to my desk at the moment.
But they’re just minor annoyances that are easy to put up with. The kids are loving being back in their own place with all their toys and plenty of room to run around in, and we’re liking the fact they have plenty of room to run around in that’s not necessarily right on top of us. ;) All the extra space is great too and seems to make the place seem much tidier (because we’re able to put stuff away that would normally have been left out or stored more visibly) although the house does seem a bit more echoey than before.
Of course, with any talk of renovations, there has to be the obligatory before and after shots:
The kitchen — before. Demolition had already started (didn't get around to getting a good pre-demolition photo of it).
The kitchen — after. All shiny and new and existing wooden floors which were sanded back and polished came up a treat.
Hero Framework is billed as a white label, open source PHP website content management system (CMS) and development platform which shares the same CodeIgniter framework as ExpressionEngine. It is developed by Electric Function who also created Membrr, the only add-on for EE that (currently) handles subscriptions.
Hero is a free CMS but it also offers a full-featured ecommerce add-on for $195. But as when I tried Concrete5, when I gave Hero a run I was looking for an alternative CMS to ExpressionEngine that I could use for simpler sites.
Installing and setting up Hero was a breeze. In fact, if it wasn’t for one particular aspect which I’ll come to soon, I would’ve gone from first installation to whole site completed in a couple of hours.
Design and templates
Like Concrete5 and Wordpress, Hero works with themes that can be installed and uninstalled and creating a custom theme just involves copying a default theme and modifying it to your own design. Hero is powered by the Smarty Template Engine, so anyone already familiar with it will be able to get up and running quickly. I’ve never used Smarty before but found the template structure to be very similar to the template partials approach to templating in EE as proposed by John D. Wells and taken up by Mark Croxton’s Stash module.
An example of a basic Hero Framework template
As you can see from the template above, a ‘framework’ template, layout.thtml, is called, into which the contents of the template is inserted. layout.thtml contains the parts of the template that are common to all pages, i.e. the
section, masthead, global navigation, footer etc.
The toolbar of the Hero Framework control panel.
From the Design menu item you can see in the toolbar pictured above you can set your theme but you can also edit all its files using the Theme Editor. There’s not much reason why you’d work in a textarea in a browser when you could use your favourite text editor, but one thing you do need the Theme Editor for is for mapping URLs to particular templates. The only other menu option under Design, and one which is one of Hero’s best features, is the Menu Manager.
Screenshot of the Menu Manager in the Hero Framework control panel.
As the screenshot above shows, the Menu Manager makes it easy to create menus from both pages on your site and external links. Including a menu in a template is as easy as {menu name="main_menu" show_sub_menus="yes"}.
Publishing content
The other main sections accessed from the control panel toolbar are the Dashboard, Publish, Members, Reports and Configuration. The Dashboard lists your most recent activity, Members and Reports I didn’t need for the simple site I was working on and Configuration includes site settings most of which I didn’t need to change (although I did need to install one additional module). That leaves Publish as the only other area we really need to look at.
Screenshot of the Publish menu dropdown in the Hero Framework control panel.
Most of the submenu items in the screenshot above are included by default. The ones that I added for the site I was working on were Manage Project which required its own custom fields and Manage Galleries which was added when installing the Gallery module.
Publish New Content takes you to a page where you choose the type of content you want to publish before then being taken to a publish form.
The Manage… menu items list entries published in different content types.
Blogs/Content Listings is where you create the sections which would be managed from the Manage News link. I didn’t need a news section or blog for the site I worked on so didn’t explore this area much. Likewise with the RSS Feeds section.
Under the Forms section, you can create pages to which you can attach different form templates. There’s a textarea where you can insert text which will appear above the form and also specify who the form should be sent to, where the user should be redirected to after the form is submitted and what the submit button should say (although that could just be hard-coded into the template).
Topics is something else that I didn’t delve into for the site I was working on so best refer to the documentation.
Screenshot of the different custom fieldtypes available in Hero Framework.
Content Types is the place in the control panel where you find Hero’s other main strength. Here you can create new content types and add custom fields to them, much like you would with ExpressionEngine. For the site I used Hero for I needed to display building projects with address and client details and image galleries. Address and client details just required simple text custom fields, but it was when I came to attach more than one image to an entry that I ran into a stumbling block.
Gallery module
With ExpressionEngine, if I want to attach multiple images to an entry there’s a few ways to do it using add-ons: Matrix, Grid Lite, Assets, Channel Images. With each of these you attach your images to the entry you’re creating and then output those images when outputting the rest of the information attached to the entry.
With Hero, this wasn’t so easy to do, and required a few trips to the support forum to get the exact process sorted out.
There is an add-on, the Gallery module (which isn’t linked to from the main site but rather found during a thread search of the support forum), which can handle attaching multiple images, but the process is a bit roundabout, and to my way of thinking, a bit backward.
To attach multiple images to a project entry, I had to first create a gallery entry and then create a project entry to which I then related the gallery entry I’d just created with a relationship custom field. So from a usability perspective it’s not ideal because I’m having to create two entries for a single piece of content.
Then in the template, rather than pulling the gallery information into my projects template, I had to do it the other way round, pulling the projects info into the gallery template. This is because displaying of images only worked properly using the template that is installed with the gallery module. The projects were related to the gallery by ensuring that the project and gallery entries had the same URL path.
Conclusion
As I mentioned earlier, without the requirement to attach multiple images to entries, the entire process of installing Hero, learning enough about how it works to get the job done, and building the site would’ve only taken a couple of hours. The gallery module thing threw a bit of a spanner in that works. Because of that I probably wouldn’t use Hero again for projects that require adding multiple images to lots of entries. But for sites that only have a single gallery, or a single page of galleries, or for lots of other scenarios, I think Hero would be a good choice. Those other scenarios also include the ability to do ecommerce which I haven’t tested out, so it’d be good to hear from anyone who has used it for that purpose.
As much as I love ExpressionEngine, sometimes it isn’t the right fit for a project, and often it’s because it provides more power and flexibility than a site really needs. Sometimes you just need something a bit simpler. Or sometimes you get a project that the site owners don’t want a CMS for, but as a developer, it’s quicker to build the site with one. So this year, I began looking at some CMSs that I could use an alternative.
Of course, I’ve used Wordpress in the past, as it was what Tyssen Design was originally built on, and for the sort of situations I’ve been looking at alternatives for, it would be a viable option. But this year I’ve also had cause to dip back into a bit of Wordpress development (working on sites that have already been set up with it), and have to say that I haven’t really enjoyed the experience. It could just be the themes I’ve had to work with, but the process of trying to track down a piece of content to edit across theme template files, theme framework files, theme language files, theme assets, or as a setting or user-entered content within the control panel has diminished my desire to work with Wordpress as a whole.
I’ve used CushyCMS on a couple of legacy static HTML sites in the past but it’s too easy for site editors to make a mess of layouts with, particularly with images that haven’t been resized to the correct dimensions beforehand.
There’s only been a couple of requirements for the CMSs that I’ve been looking at: the ability to easily create custom fields, and upload images of any size which could then be used in templates at the correct size for the design. I drew up a bit of a shortlist of the ones I wanted to check out and they were Concrete5, Hero Framework, PyroCMS and Processwire.
The first I tried and which I’ve used on two sites this year is Concrete5 which describes itself as a CMS made for Marketing but built for Geeks.
Concrete5 has a similar theming system to Wordpress: you add a folder to the themes folder and then select that theme from within the control panel. Like with Wordpress, you’re encouraged to duplicate an existing theme as the starting point for making your own. A Concrete5 template can be very basic. Below is an example of one from one of the sites I did this year:
You can create as many different templates as you need and can assign templates to pages in a similar fashion as you would with Wordpress.
Unlike ExpressionEngine and Wordpress, Concrete5 is designed primarily to create and edit content from the front end of the site, rather than the CMS control panel. So in that respect, it’s closer to Drupal. Once you’ve logged in to the control panel, you then navigate to the front end of the site where a toolbar appears above the page giving you a variety of editing options.
Screenshot of the Concrete5 edit toolbar
Where Area(’Main’) appears in the template above, you’ll see a text link to Add To Main on your site’s page when in page edit mode. Clicking on the link will bring up a context menu, of which one of the options is Add Block. Blocks literally are the building blocks of Concrete5 and give the site editor the ability to enter any sort of content into a particular area of a page. Not only that, but you can add as many different blocks as you want. After you’ve entered one block, a link to add another will appear below it.
Concrete5 comes with a default set of blocks that you can add that include:
WYSIWYG editor for general text content
HTML
forms
navigation
files
images
Flash
slideshows
search, and
video
Add-ons
You can also install custom blocks from the Marketplace to provide functionality not included in the default set, or you can code your own custom blocks. For one of the sites I did, I needed simple label/value pair functionality which if I’d been using ExpressionEngine would’ve required a single custom field, so I created a custom block. For the other site, the client didn’t like the functionality provided by the default Concrete5 image slider so I thought it’d be straightforward enough to replace it with Nivo Slider.
Well it would’ve been simple enough if I was using a CMS that handles custom field creation natively within the control panel: add a custom field for the images, output the necessary markup to the template, include the javascript, css and image assets and you’re done. Not quite so simple with Concrete5. Adding custom field functionality is a bit similar to the way it works with Wordpress: you actually have to manually create the files that handle the input and output of data yourself. That might give you more flexibility in what you can do with custom fields, but it’s not exactly conducive to setting up simple data constructs quickly.
In the case of the Nivo Slider, I ended up buying a $15 add-on from the Marketplace which did exactly what was required and also gave the client control over things like the delay between and speed of transitions. It didn’t give me as much control over the markup as I would’ve liked (for instance where the javascript assets were placed and without the ability to combine them with other scripts to reduce http requests), but when the choice was spend $15 on an add-on or spend quite a bit of time first understanding Concrete5 block development and then actually building my own, it was a no-brainer which one to go with.
The concept of add-ons for Concrete5 is similar to that of ExpressionEngine, but the process of adding them is different. With ExpressionEngine, you download your add-on (quite often after having purchased it first), which could be from one of several locations (although more often than not from Devot-ee), then upload it to your site and install. With Concrete5 the only place you can get add-ons is the marketplace, and whether it is free or not, it has to be added to a cart first so that it can be associated with a particular account. You then associate your account with individual sites and only sites that are linked to accounts that have the add-on associated with it can download and install the add-on which is all done through the individual site’s control panel.
This is good for add-on developers because it ensures that a licence is paid for before being used on a site, whereas with ExpressionEngine, you could download an add-on once and then just reuse it across several sites even though the licensing doesn’t permit it.
It may just be me, but I found the process of associating add-ons with a site a bit confusing. You first create a user account with Concrete5 and then log in to your site’s control panel and navigate to the site settings and choose to ‘connect to the community’ to create a project. You can then assign multiple URLs to a project which is good if you’re working on a site with different environments. That worked out fine for the first site I did, but when it came time to do the second, it seemed to me that I had to create a new account to create a new project as there’s no way to add projects from the projects page of your account. I didn’t think having multiple Concrete5 accounts was the way to go, so I just added URLs to the project I already had going which also doesn’t seem right because I would think it should be one project per site.
Pros & Cons
Pros
Some people like being able to see the page they’re working on when entering content and that also helps too if you prefer to have the site in front of you with its navigation easily viewable when adding new pages. Giving site editors that sort of ability is probably Concrete5’s main strength. That and its ability to add different content blocks and add more than one block per page. With some CMSs, if you want to add text, an image gallery, more text and then a video, the developer needs to know that information up front so templates can be coded accordingly. With Concrete5, that ability is all in the hands of the editor.
Getting up and running was also a fairly quick process. The way Concrete5 templates are put together is very similar to the way I code static PHP sites and also similar to Wordpress templates with includes for header and footer and then the body of your page in between.
Cons
As mentioned above, creating custom fields is not as easy with Concrete5 as it is with other CMSs as you have to code both the control panel views as well as front-end template output. And while it’s necessary to be able to edit the site from the front end, the other thing I don’t like about Concrete5 is that it forces some mark-up on you by adding scripts necessary for site editors. It’s not a great deal when not logged in, but if you like to have 100% control of your mark-up output, then Concrete5 may not be for you.
I find the management of users and their roles to be a bit unintuitive wth Concrete5. Users are managed from Users and Groups, but their permissions are managed from Sitewide Settings, and only after clicking Click here to modify other permissions from under the Access tab.
And by default, new user groups are created with Sign in as User set to Yes which means that once you’ve logged in, regardless of your other access permissions, you can navigate to the area of the control panel that lists other users and then choose to log in as that user, which means that if you choose a super admin, you can then get the same level of access. The very first Concrete5 site I worked on had been created by a developer who had then gone away on holiday and wasn’t contactable and the client couldn’t log in to actually make the site live. I was able to log in with their editor login and then log in as the developer and make the necessary changes. That was a good thing for the client in that particular case, but in general doesn’t strike me as a particularly good security practice.
Conclusion
I like some things about Concrete5 but there’s enough there that niggles me about it too for it probably not to become my main alternative to ExpressionEngine. If anyone else has had experiences with Concrete5 they’d like to share, I’d love to hear them in the comments.
In July I wrote about an idea I had about serving responsive images with ExpressionEngine, dynamically delivering images sized appropriately for the device on which they’re being viewed, i.e. small images for mobile devices and larger ones desktop computers.
Most of the solutions that had come to light at that time involved detecting the user’s screen size on the client side and then manipulating images based on that. To me, that concept didn’t seem to work too well if you were using your CMS to dynamically serve up differently-sized images from the same source file. I thought there needed to be some sort of server-side involvement so that information could be passed to templates and then processing carried out appropriately. Some time after I published my post, Luke Wroblewski discussed the same sort of thing and dubbed the process RESS: Responsive Design + Server Side Components.
The idea I had originally was to use PHP to carry out device detection, AKA user agent (UA) sniffing, and then set a variable based on whatever value was returned. There are a couple of problems with that approach:
As Jeremy Keithpointed out, UA sniffing can result in false positives and missing out devices not included in the device detection script.
Once you’ve detected the device, you then need to set another variable for its size. If you want to cover a lot of devices/sizes, you have to set your script up to set a lot of variables, rather than the size variable being set dynamically as is the case when you use javascript on the client side.
So ideally, you want a combination of both client side to dynamically detect the screen size, and then server side to set that as a variable which can be accessed in your templates.
Just a day after I posted my previous article on the subject, Matt Wilcox wrote about a technique that has now become Adaptive Images, and was recently featured in 24 Ways. The basic idea is you use javascript to set a cookie and then use PHP to access that value and serve up appropriately sized images. A couple of months later and Matt Stauffer took that idea and combined with the concepts that Luke Wroblewski proposed, created a Github project called Simple-RESS, which does exactly what I mentioned above, uses client-side detection to create a server-side variable.
I’m working on a responsive design at the moment and the Simple-RESS technique seemed ideal so I created an add-on based on it (my first attempt at writing an extension too), which you can find on Github. It comprises a plugin which checks if a cookie for the screen size has been set or not, and if not, injects the javascript to do so. (I’m using jQuery to access $(window).width() I was but now I’m not and the Github repo has been udpated. See the changelog for further details.) To do this, you need to add {exp:ress:cookie} somewhere in the <head> of your templates.
With the cookie set, that value is then checked by the extension in the package which sets a global variable {ress} which you can then use in your templates, e.g. {if {ress} > 768}show desktop-only content{/if}. The extension also lets you set a default screen size for those that don’t have javascript enabled. What that value should be will depend on whether you want to a take a mobile-first, or desktop-first approach.
This approach is much more flexible than the one I originally proposed because the screen size variable is set dynamically using javascript, rather than having to create a case statement that matches a screen size to every user agent string you want to check for. You can then use the variable with conditionals and case statements in your templates that match up with media queries in your CSS.
