Technical

vtemplate 1.0.0 released

Today I’d like to release vtemplate 1.0.0. I’ve blogged about vtemplate before, but now I am relatively confident about its maturity to make an official release. Jeff Atwood has spoken about The Rule of Three in Reusable Software, and I’m happy to say that I’ve used vtemplate in far more than three sites since then. Oh, and if you are not a web developer, this post is probably not for you.

What is vtemplate?

The Git repository says it well enough: vtemplate is a boilerplate setup for starting new [web] projects which combines various industry standards. There are a few tweaks here and there, but otherwise it’s loyal to upstream. You’ll recognise many favourite technologies used in vtemplate, ranging from Stylus to Kohana to Behat. But before I run through these technologies, I’d like to highlight the ideals behind vtemplate:

  1. Favour industry standards over proprietary and personal hacks
  2. Promote standards that emphasise readable, maintainable, and simple code
  3. Don’t restrict or govern your desired code architecture

Let’s take a brief tour over the awesome stuff we get with vtemplate.

HTML5Boilerplate

You really can’t go wrong with HTML5Boilerplate. It’s a great piece of collaboration by very experienced frontend web coders and very well documented. This is a great first step to writing responsive, cross-browser, HTML5-valid code. This also brings in so many other frontend joys like HumansTXT, Modernizer, JQuery and so on.

Stylus

If If you’re using another CSS preprocessor, this’ll show you just how clean your CSS can really be. If you’re not yet using a preprocessor … well, you’ll soon find out why it’s so awesome. Admittedly Stylus isn’t as popular as the big boys like LESS, but it has a very lenient syntax and is easy to swap out.

Mustache

Learn why writing logic in your templates is evil! Stop writing Model-View-Controller and start writing Model-View-Template-Controller. Don’t let the backend team hold up the frontend or vice versa.

WYMEditor CMS

Why are your clients modifying their site with bloated CMSes and complex, unsemantic rich text WYSIWYGs? Keep things simple, and let your code govern the CMS, not the other way around. WYMEditor reads and writes directly to clean segments of frontend files and understands your CSS. Best of all, it makes it easy to review changes with version control. Read more about the simple CMS approach here.

Kohana

Modular (quite literally split into many Git submodules), PSR-0 compatible, forward thinking and high coding standards PHP web delivery mechanism with extremely flexible routing and HMVC architecture.

Composer

Composer is everything you wished PEAR could’ve been, and more.

Swiftmailer

Most webapps need a mailer library. Swiftmailer is a great one.

PHPSpec2

We all love TDD, right? BDD is even better because it’s semantic TDD! PHPSpec2 provides a really simple (but powerful) BDD tool complete with clean mocking and stubbing.

Behat and Mink

Another great tool from the same guys who brought PHPSpec2. Whereas PHPSpec covers all your unit testing, Behat is excellent for full stack and UI testing, with the beauty of a semantic Gherkin syntax. Mink is just icing on the cake, giving an easy to use abstraction to emulate browsers.

Phing

Test. Configure. Build. Deploy. Do it again!

So if you’re developing a web application with PHP, check out vtemplate :)

What’s new in vtemplate 1.0.0?

Well, apart from being the first release, where by definition everything is new, there have been a few more tweaks since my last post on it.

  • Phing building, deploying and quality control with all sorts of goodies
  • UTF8 and URL replacement bugs fixed in CMS
  • Sahi comes to Behat
  • New “Photoshopper” driver for image manipulation needs
  • More Behat feature definitions as defined in my post about behat
  • Improved humanstxt
  • Default encourages variable page titles and metas
  • moult/contact form bundled
  • Kohana bumped to develop version
  • Simplified installation / configuration

Feel free to fork :)

Life & much, much more

The Architecture Graduate Exhibition – University of Sydney

On the 5th of December, there will be the Architecture Graduate Exhibition at the University of Sydney. Yes, that’s right, my Bachelors degree is over! But before I move on to Masters, other projects, and life, I would like to dedicate a post to the exhibition itself.

The Architecture Graduate Exhibition is an annual event which showcases the work of all the graduating students. This year, it’ll feature the the graduating Bachelors, who show projects tackling the controversial redevelopment of Flinders Street Station in Melbourne, and the graduating Masters, who’ll showcase three distinct projects. Our organising team of five including myself are happy to present “ANALOGUE” (that’s an artsy theme, in case you haven’t guessed).

Architecture Graduate Exhibition - USyd - Logo

If you are available in Sydney on the 5th of December, be sure to drop in at the Wilkinson Building at 148 City Road around 6PM for live music (which I shall participate), free booze (which I shall graciously donate), and perhaps some design here and there.

This year shall also feature the release of the first online graduate exhibition catalogue. This’ll be reused in future years. It’s still under wraps but will be released at UsydArchExhibition.com once I have enough entries. You may also follow our Analogue Architecture Exhibition Facebook page where we post ongoings – you might witness the 200 plinths we built (don’t mind the mess in the backdrop, that’s the natural state of a creative environment).

Analogue Architecture Exhibition Plinths

Back to work!

Life & much, much more

A bullet point blog post because I’m back in business

What a hectic month. Will post about projects later, but here’s a bit of here and there:

  • Final exam on Monday 18th then I will truly be free.
  • All servers and boxes updated to latest software after several months.
  • Amarok is an amazing app, but that it took me this long to wrap my head around is a little sad. The MusicBrainz tagger is a lifesaver.
  • New GPG keys. It’s been 3 years since my old one.
  • Finally got around to talking to the registrars upstream to remove the hold status from WIPUP.org. It’s back online, still running the old Eadrax, but has some hotfixes applied.
  • The KDE Connect GSOC project is great.
  • The Sydney Architecture Revue went very well. Can’t wait for next year.
  • Oh, what’s this?

More posts later.

Life & much, much more

Architecture IRC channel on Freenode

Most of my readers will know that despite the majority of my blog posts being about technical content, I actually study architecture. The crossover between these two fields from my experience seems to be rather minimal. The computer geeks know a little about buildings, but not enough to do much about it. Similarly, the architecture folks dabble with computers, creating fields such as algorithmic architecture and parametric design. This dabbling rarely turns into anything serious from either party, and it’s quite hard to find an online community of those who are interested in both. I hope to change that with the new architecture IRC channel on freenode.

I recall lurking with the hopes of meeting another architect in #architect for a while. Occasionally someone would come but never stay, and the original channel founder left and hasn’t been back for a year or so. For this reason I have now registered ##architect (the double hash prefix due to Freenode’s channel rules) and will lurk yet again. I hope by writing this blog post other architects might notice and pop in.

What is IRC and how do I join the architecture IRC channel?

I realise that many architects might not be so familiar with what IRC is. IRC can be thought of as an online chat room divided into channels, which represent common topics of discussion. These channels are grouped into networks, which are simply organisations that provide these channels. So the full access details you need are as such:

Network: Freenode
Channel: ##architect

Just like you need a program such as Skype in order to chat with others using Skype, you will need an IRC program to chat with others on IRC. I recommend using downloading Quassel – it works on Windows, Mac and Linux.

If you don’t want to use a program, you can easily chat using the online Freenode webchat service. It’s super easy to get started, just type in a nickname for yourself and put ##architect in the channel box, and press connect.

Finally, don’t worry if nobody seems to be around, just stick around and we’ll respond when we’re back at a computer.

See you in the architecture IRC channel!

Edit: some people have popped up but leave quite quickly. Small IRC communities are frequently inactive but need people to stick around for it to grow. Please consider waiting a few hours, or just connecting frequently and when somebody else is also around we’ll have a chat.

Life & much, much more

Sydney revue coming up from the architecture faculty!

As some might remember, I was involved in a Sydney revue last year by the university of Sydney architecture faculty as the musical director. It was called Game of Homes (a shameless pun on the Game of Thrones series). Not only was I involved with music, it also gave me the wonderful opportunity to create a 3D animation for its opening sequence based on the original (and very well done) Game of Thrones sequence. You can view the animation sequence and corresponding revue poster in this post.

As this is an annual event, I’m happy to say that I’m again involved in it this year (as music again) and would like to present Floorless, a spaghetti western with a particularly complex pun for a title. It’s a joke on both the film Lawless, and on Flawless with an architectural twist. Get it? Nope? That’s alright. Me neither.

Sydney revue architecture

Anyway, you can tell that this is a quality Sydney revue because it has a quality poster. This means that if you’re in Sydney on the 5th, 6th or 7th of September, you should buy a cheap ticket and watch it.

Sydney revue poster alternative

It contains all the right ingredients for a successful western. These include bandits, sherrifs, the town stranger, the town drunk, the fastest shot in the West (which may sometime be the town drunk), the banjo brandishing hillbilly, the lonely harmonica player, a whip*, the mayor, Mexicans, the fine lass, and a Final standoff with capital F.

Also, there used to be an official revue website somewhere but as I can’t find it I assume that someone forgot to renew the domain and the site no longer exists.

Cheers, and see you at the event!

  • the whip may or may not be used at the actual event, and audience are recommended to not buy tickets for the front row.
Creative

Blender panoramic renders howto and demonstration

Doing a Blender panoramic render isn’t easy. This is because you can’t actually see what you’re going to create in the regular OpenGL-shaded 3D view. In fact, even when looking through the Blender camera, you won’t see what you’re going to end up with.

Blender panoramic renders with Blender Internal renderer

The technique is actually rather simple: just select the camera. Then in the object data settings panel, just click the panoramic button and play with the focal length until you get something you want. You can see an example of how to create a simple Blender panoramic render in the screenshot below:

Blender panoramic settings

You’ll soon discover is that you can only actually see what you’re going to get when you hit the render button. If you’re using the internal Blender renderer, this’ll become a pain really quickly. This is because you’ll have to constantly hit render and wait for the image to come up.

Blender panoramic renders with Cycles renderer

However if you switch the scene to Cycles Renderer, things become easier. This is because Cycles provides a real-time rendering view. Just set one window open to rendered view and you’ll see what you’re going to get (roughly) in real time. At the same time, you’ll notice that Cycles opens up new options on how your panoramic render should be like: the type of panoramic – whether it’s fish eye, equidistant, or rectangular, and how many degrees the field of view is.

Blender cycles panoramic camera settings

Now comes the fun part, actually building your scene. The best strategy is to have planned out your scene beforehand on paper so you know its composition. With panoramic renders, if you haven’t already got a scene built, now is your chance to bend reality in a Dali-esque manner and have fun with perspective.

Once your composition is planned out, create simple cubes and planes as proxy objects for the rough locations of where your scene objects are going to be. Then slowly replace them with the more detailed meshes of what you want to make.

Another useful tip is to use the Blender preview window. In Cycles, when in camera view, just press shift-b and drag and drop a cropped portion of your screen, and it’ll only render that area. This keeps rendering times low. There are plenty of other tips on how to reduce rendering times, so I won’t repeat them all here.

Below you can see a panoramic render I did a few months ago which uses the above techniques. As you can see, I’ve blended several scenes together with varying perspectives, which was only possible with a panoramic render.

Blender panoramic render

Good luck, and create those awesome renders!

Technical

Motion tracking with Javascript, HTML5 and a webcam

Why would you use the web for motion tracking? Simple. HTML5 Canvas is exciting. Javascript is (pretty) cool. Combined with a lazy afternoon, we can create an ultra simple hand motion tracking and colour recognition system.

This isn’t entirely true. It doesn’t track the hand, it tracks a bright blue bottle cap I found on the floor. Even more truthful is to say that it tracks anything bright blue. But enough chat, here’s a demonstration. Just click the small button with the dash in it to get started, grab something blueish and wave it in front of your camera. It won’t be as good as we got it since we adjusted it for specific lighting conditions, but it’s enough as a proof of concept.

We’ve also got pretty pictures to show. Here’s one of the quick n’ dirty strap we used to embed the bottle cap in.

php_hand_motion_tracking

And here is one of it in action.

php_hand_motion_tracking1

You can see the (bad, hackish, thrown together) code for it in my playground repository on GitHub.

Life & much, much more

Hello SevenStrokes: Building websites … a little differently

A few months ago, Chris Paplinski, Nathan Charrois, Kaushal Inna, Andre Brokman, Kelsie Rose and I, Dion Moult, gathered to create a company. Today, we would like to present to the world: SevenStrokes.

Sevenstrokes web development

SevenStrokes is a web development company but with a few key differences.

  1. Firstly, we see websites as a service, not a product. We don’t just build a website, we treat it as part of your larger corporate strategy.
  2. We build systems that mirror your day-to-day domain issues. We use a combination of behavior-driven development and code architecture that employs the same daily language that you do. This ensures our system makes sense not just in the software world, but in real life, and thus always move a step towards achieving your corporate goals.
  3. We follow many aspects of the open-source business model, ensuring that we assign the most motivated staff that want your site to succeed just as much as you do, and that full inspection guarantees your system integrity.
  4. We push for the latest industry standards and keep on pushing, even after launch. Websites are usually short-lived, but we’re changing that with a system architecture that maximises long-term life.

So what are you waiting for? Do you need a website built? Do you need somebody to help spearhead your latest online initiative? Check out SevenStrokes: Building websites … a little differently

sevenstrokes unique web design

Life & much, much more

DraftSight: a free and cross-platform alternative to AutoCAD

Whilst Linux is an excellent system for programmers, it’s certainly a little wanting for people who deal with creative graphics. There are tools like Krita, GIMP, Inkscape, Blender and Digikam and so on to help fill this gap, but one area which isn’t talked about so often are CAD tools. As an architecture student and a Linux user, I can safely say that the options are disappointing. It certainly is possible to have a complete graphics workflow on Linux, but it’s not as good as on Windows.

There were always CAD packages around such as FreeCAD and QCAD (I believe rebranded to LibreCAD) and its various derivatives, but they were all slow and not particularly powerful. However for the past few years, I’ve enjoyed DraftSight.

DraftSight - a free and cross-platform alternative to AutoCAD

Firstly, a disclaimer: DraftSight is not open-source. It is certainly free to use and works very well on all platforms, but it is backed by a commercial company (Dassault Systemes), is financed through an enterprise license, and certainly has no obligation to the community.

However perhaps the reason DraftSight is so much more powerful than the open-source alternatives is because it has a very clear goal: it wants to clone AutoCAD. Unlike GIMP, which has tried to define a new paradigm for itself, DraftSight keeps users in a familiar environment.

If you are on Gentoo Linux, I am maintaining the DraftSight package and as of May earlier this year, it is available in the betagarden overlay. For more information, you can see this bug.

Life & much, much more

A Beaglebone, a Blender, a Board, and a Swarm.

Hardware isn’t generally my thing. When it comes to software, I like to break and create. But in my opinion, hardware should just work. But even though that’s another story altogether, it did explain my apprehension when I greeted the UPS guy one morning delivering a BeagleBone Black.

beagleboneblack

Let’s begin with the BBB. It’s a computer the size of a credit card, which isn’t that impressive if you realise that your phone is a computer. I find the best way to explain it is in terms of two other products, the Arduino and the Raspberry Pi. The Arduino is a similarly sized (comes in multiple sizes though) controller where you can upload scripts, plug in a hardware circuit (wires and lightbulb, that sort of thing), and have it control the circuit. Despite its power in hardware control, it only has a small scripting interface for you to do your programming. The Raspberry Pi is the opposite. It’s a full Linux computer (based off Debian), but does not have proper hardware controls out of the box. The BBB provides the best of both worlds: a full Linux system (Angstrom Linux, but of course you can flash your own), and a ridiculous number of IO pins to control circuits. All this awesome power at 45USD.

The next step upon receiving this wonderboard was obvious. Let’s build a swarm of robots. Along with two university friends, Lawrence Huang and Gloria Nam, we set out planning the system.

world

The base was to be constructed out of a 1200x1200mm wooden plywood board and cut it into a circle with a hole in the middle. This would be the “world” where the robot swarm would live on. This world would operate like a Lazy Susan, and would have a two depots filled with some sort of resource. One at the center, and one at the perimeter. This gave the colony a purpose: it would need to collect resources. Above the board was where we would put the computer, BBB, power supply, and cables to hook up to all the bots below.

We then had to determine the behavior and movement capabilities of the swarm. It had to act as one, but still remain separate entities. It also had to disperse to discover where the rotated resource depots were, and the swarm as a whole had a set of goals and quota limitations. Five movement types (along with the math) were worked out to allow the bots smooth and flexible movement across the terrain.

rules

The overmind was next. We would use Blender‘s very flexible boid simulator along with custom Python scripts using Blender’s Python API to simulate the swarm behavior on the computer and set swarm goals. At the same time, a real-time top-down view could be generated and displayed. Due to budget reasons, we couldn’t build the entire swarm of robots, but instead settled on building just one bot in the swarm, and having this bot track the motions of a single bot on the computer screen, but still behave as part of the full 32-robot swarm on the screen. Viewers could then see on the screen the full swarm behavior, and physically see a single bots behavior in front of them.

swarmscreenshot

The car itself was then built. It was relatively small and was barely enough to fit the two continuous-rotation servo motors that were required to power its left and right treads. It had a little tank on its top to hold resources, a depositing mechanism at its front, and dragged along a massive conveyor belt to collect resources behind it.

car

Now the fun part – calibrating the simulated swarm with the actual physical swarm behavior, and doing all the physical PWM circuits. Many sleepless nights later it was a success. Here we see the bot doing a weird parking job into the depot and collecting resources, going back to the center, and depositing it. Apologies for the lack of video.

collect

And there we have it. A swarm of robots. Did it curb my fear of hardware? Not entirely.

frontshot

For those interested in the actual system, here’s a macro overview:

system

A few extra fun things from the project:

  • Calibration was not easy. Actually, it was very hard. No, it was stupidly hard. It was ridiculously hard. Real life has so many uncertainties.
  • Each bot is tethered to the overmind via 8 wires (3 per tread, 2 for conveyor belt). Could it be made into a wireless swarm? Yes. Did we have the money? No.
  • Could it be modified to move in 3D XYZ space like a swarm of helicopters? Yes. Would I do the math for it? No.
  • The actual simulation was done on the computer via Blender + custom python scripts. The computer was then connected via a persistent master SSH connection, which was reused to send simple signals to the pin’s embedded controller. So all in all the BBB actually didn’t do much work. It was just a software->hardware adapter.
  • Because the computer was doing all the work, it wasn’t hard to add network hooks. This meant we could actually control the system via our phones (which we did).
  • Weirdest bug? When (and only when) we connected the computer to the university wifi, flicking a switch 10 meters away in a completely separate circuit (seriously, completely separate) would cause the BBB to die. Still completely confused and will accept any explanation.
  • Timeframe for the project? 4 weeks along with other obligations.
  • Prior hardware and circuit experience: none. Well. Hooking up a lightbulb to a battery. Or something like that.
  • Casualties included at least three bot prototypes, a motor, and at least 50 Styrofoam rabbits (don’t ask)
  • Why are all these diagrams on weird old paper backgrounds? Why not?
  • At the time of the project, the BBB was less than a month old. This meant practically no documentation, and lack of coherent support in their IRC channels. As expected, this was hardly a good thing.

Project success. I hope you enjoyed it too :)

Technical

In order to discuss BDD, as a blogger, I need to talk about Behat

If you’re developing a web application, especially one that uses PHP, you should know about Behat.

Behat introduces itself as “a php framework for testing your business expectations”. And it does exactly that. You write down your business expectations of the application, and it automatically tests whether or not your application achieves them.

You begin every feature description with a three liner following the form:

[sourcecode]
Feature: Foo bar
In order to … (achieve what goal?)
As a … (what target audience?)
I need to … (use what feature?)
[/sourcecode]

This is then split up into individual scenarios of using this feature, all of which are described using natural English following the Gherkin syntax. It then uses Mink which is a browser abstraction layer to run these tests.

I’ve been enjoying Behat for quite some time now, and I’ve noticed certain tests I need to write that come up again and again which aren’t included in the default Mink definitions.

The first is to check whether or not an element is visible. These days, Javascript heavy UIs use a lot of hiding and showing, and often this is vital to the business expectations of how the website should work. These sorts of tests need a non-headless browser emulator, such as Sahi. Simply prefix your test with the line @mink:sahi, and now we can use the following definition:

[php]
/**
* @Then /^"([^"]*)" should be visible$/
*/
public function shouldBeVisible($selector)
{
$element = $this->getSession()->getPage()->find(‘css’, $selector);
if (empty($element))
throw new Exception(‘Element "’.$selector.’" not found’);

    $display = $this->getSession()->evaluateScript(
        'jQuery("'.$selector.'").css("display")'
    );

    if ($display === 'none')
        throw new Exception('Element "'.$selector.'" is not visible');
}

[/php]

… so you can now write …

[sourcecode]
Then "div" should be visible
[/sourcecode]

Worth highlighting is the ->evaluateScript() function that is being called. This means that anything you can check with JQuery can be tested. This is pretty much everything.

Another useful query is dealing with images. Modern web apps have to handle image uploading quite a bit, and often this comes with resizing or cropping (for avatars, keeping to layout widths, thumbnails). Wouldn’t it be great if you could just write…

[sourcecode]
Given I have an image with width "500" and height "400" in "/tmp/foo.png"
Then the "img" element should display "/tmp/foo.png"
And the "img" element should be "500" by "400" pixels
[/sourcecode]

… and of course, now you can. All this code is included in vtemplate under the FeatureContext file.

Happy testing!

Creative

So then I built an oil lamp

A few months ago I was walking in the park near my university and stumbled across a rather warped but stylish fallen branch. Immediately I knew that this branch was destined to become an oil lamp. A couple months later of on-and-off work, I had finished.

enter image description here

The lamp itself was made out of laminated rings of wood, which encased a copper oil container. A sculpted nozzle allows the wick to raise out of the wooden container and light up. The container is hinged and can be refilled whilst the lamp is burning. The nozzle was made out of laminated ply, whereas the alternating colours of the container were various hardwoods. The heat distributors were zinc (if I recall right), and the glass was cut out of an old soya bean milk bottle.

enter image description here

The branch itself didn’t become the lamp, but rather the stand for the lamp. The slight uneven and rustic look makes it suited more for the outdoors, placed on top of lawn.

enter image description here

The wick passes through a wick raising mechanism. The design for the mechanism, built from steel and aluminum, was actually taken by a patent advertised by the International Guild of Lamp Researchers (yes, you read that right).

It consists of two cogs, one with pointed teeth, and another indented so that they mesh together. These are encased inside a block with a two channels – one for the cogs to fit into, and one for the wick to pass between them. Turning the cog with teeth catches the wick, and allows you to raise and lower the wick. This feeds in extra wick when existing wick burns out, and allows you to “dim” and “brighten” the lamp.

Each cog spins on an axle, but the indented cog’s axle has a extended slot, and by twisting a screw outside, you can push the cogs closer to one another. This allows the wick mechanism to accommodate for differently sized wicks.

enter image description here

This entire project was built from scratch (with exception of the wick and metal fastener at the top with the ugly blue plastic which was bought), with thanks to the helpful folks over at the university workshop.

enter image description here

All in all, I call this project a success. I’ve learned a ton about woodwork and metalwork, and got myself a rather unique lamp in the process. I hope you all enjoyed taking a peek too :)

Life & much, much more

The one and only IBM Model M Keyboard

Any computer enthusiast will tell you that whereas computers in general have been getting better over the years, keyboards have been steadily degrading in their preference for design rather than build quality. Simply put, all keyboards nowadays (characterised by mushy rubber dome chicklet keys) are terrible. If all of this sounds like a weird geek fetish to you, stop reading now. Otherwise, read this series of posts which will give you a good general knowledge of the subject.

I had been debating for a while now whether or not to invest in a proper mechanical keyboard. Given that I am mostly mobile on a laptop, lugging around another keyboard would be a pain. But recently I stumbled across an IBM Model M back from 1991 (there is a birth certificate on its back).

IBM Model M Keyboard

After giving it a thorough cleaning, I have been using this for a month now and it is a beauty to type on — I doubt I’ll ever go back to using a regular keyboard again.

A few gotchas for the uninitiated:

  • It’s loud. Loud loud loud. Fine for your bedroom, but can be annoying in the office (you will bring it into work, won’t you?). However it’ll make everyone aware that you’re definitely hard at work.
  • It’s big. So big that it won’t neatly fit into any bag. You may want to consider a “Spacesaver” edition without the numpad.
  • There is no super (windows) key. Annoying if you rely on it for shortcuts, but ultimately a small price to pay for angels tapdancing on your fingers.
  • It’s not hard to press. Although the keys are bigger, it’s easier to type on this than on other keyboards.
  • It uses a PS/2 cable. You will likely need to buy a PS/2 to USB adapter to use it.

For those who have had the same dilemma as I did, make the switch. You won’t regret it.

Creative

Free major and minor scales for piano sheet music

Two months have gone by without blogging. In that time, I’ve been wrapping up the first half of my uni year. There are plenty of stories to tell, but I’ll delay that just a little bit longer.

In the meantime, I wanted to share some basic scores I produced for piano. I teach piano in my spare time, and I find it quite irksome that there aren’t any nicely-engraved free scores for download online for basic exercises such as major and minor (both harmonic and melodic) scales. These are also great if you’re trying to learn piano on takelessons.com or a similar site.

The score is 5 pages long. The first two covers major scales, and the final three cover the minor scales, which alternate between harmonic and melodic. Fingering is included when there are fingering changes. The sheet has no copyright or attribution text that might get in the way of professionalism when presenting to students. The sheet is created using LilyPond, which is quite possibly the world’s best music engraving software.

Free piano major and minor scales sheet music

Click here to download (Edit: now goes to learnmusicsheets.com)

The document is licensed under CC-BY. You are required to attribute (by linking to this page) should anyone ask or if you want to share this on your own website.

Technical

VTemplate: a web project boilerplate which combines various industry standards

You’re about to start setting up the delivery mechanism for a web-based project. What do you do?

First, let’s fetch ourselves a framework. Not just any framework, but one which supports PSR-0 and encourages freedom in our domain code architecture. Kohana fits the bill nicely.

Let’s set up our infrastructure now: add Composer and Phing. After setting them up, let’s configure Composer to pull in PHPSpec2 and Behat along with Mink so we can do BDD. Oh yes, and Swiftmailer too, because what web-app nowadays doesn’t need a mailing library?

Still not yet done, let’s pull in Mustache so that we can do sane frontend development, and merge it in with KOstache. Now we can pull the latest HTML5BoilerPlate and shift its files to the appropriate template directories.

Finally, let’s set up some basic view auto loading and rendering for rapid frontend development convenience, and various drivers to hook up to our domain logic. As a finishing touch let’s convert those pesky CSS files into Stylus.

Phew! Wouldn’t it be great if all this was done already for us? Here’s where I introduce vtemplate – a web project boilerplate which combines various industry standards. You can check it out on GitHub.

It’s a little setup I use myself and is project agnostic enough that I can safely use it as a starting point for any of my current projects. Fully open-source, guaranteed by 100s of frontend designers, and by good PHP developers – so go ahead and check it out!