Good question buddy! So here’s the answer;

When I was thinking about how I should build ubui I had loads of ideas (and most of them were pretty zaney!) so I prototyped most of them and left it a few days so I could come back with fresh eyes and really assess the best option.

I prototyped with JavaScript MVC, Spine, bare JS (Using named JSON objects) and modular (kind of OOP but not quite there)

After much deliberation and toying with the most basic part of the ubui core I settled on a mixture of named JSON objects and modular JS, and here’s why:

I knew ubui’s core would be small and light and from the get go I didn’t want it to be big or hard to work with for extending. Once I’d sorted the auto loading of the framework and modules/dependancies I’d settled on a very small, very fast, very easy to understand structure where most of the modules are JSON objects assigned to module.exports and named in an index file for the ubuim’s (the modules are called ubuim’s) so they stay named and obvious to understand (always reference to the modules in the index file) and the framework models are generally assigned as anonymous functions to pre-process cli arguments before performing a selected action.

Take a look at the below example of the users module to understand more about why I’d use both styles (I promise it makes sense)

this.exec({
	"command": command,
	"success": function (a) {
		console.log('success');
		console.log(a);
	},
	"error": function (a, b) {
		console.log('error');
		console.log(a);
	}
}).run();

in the above example, exec is a framework model which is an anonymous function rather than a JSON object containing functions. Its an anonymous function so I can pass it arguments to set internally without the need for another method in-between exec and run which speeds up the loading and running of commands since we’re already going to be waiting for the shell to respond to us as well as checking we’re not running anything naughty.

The model will also return itself so its a circular reference thus making it both assignable and chain-able, you can also dump out the entire object for debugging (which was super handy)

I know a lot of people say frameworks standardise the structure of an application but that, in my eyes, doesn’t apply here since its such a simple structure and so simple to extend I have no plans to move over to any kind of framework either as there is no need to complicate or bloat the app.

And that my friend is why I didn’t use a framework for ubui’s core.

Clearly this isn’t the case as Opera have said they are backing down on it all and “just doing it” because of us, the developers not using the vendor prefixes.

WHAT?!

Now its this that really pushes me over the edge, why aren’t we using the vendor prefixes? Because we don’t know them? Because its an extra line in our CSS and we can’t budget for it? The client didn’t say “We want it to work across all browsers on as many devices as possible.” none of these excuses cut it for me its just shoddy workmanship in my eyes.

What would you say if a builder turned up to build an extension on your house with just the right number of bricks but PVA glue for mortar because you didn’t specify you wanted it to stay up during the rain?

Most of what I see these days in terms of CSS3 is round corners and text-shadows which is disappointing considering the massive potential CSS3 has for animations and timed events. Although I don’t personally believe that behavioural code lives within CSS we even have click listeners in the latest spec. Very cool, when will JS be but a distant memory?

But back to round corners and text shadows, I see this a lot which is the very reason Opera had to bend over and take it.

.my-class {
	-webkit-border-radius: 4px;
	text-shadow: 1px 1px 1px #000;
}

If you can spot what annoys the hell out of me then good on you, we can be friends. If you can’t then keep reading on because this is a pet hate of mine.

You’ve already started, why stop?

In the code above you’ve already made it half way out of being a douche by not prefixing text-shadow so why is border-radius prefixed? Because people that don’t keep up with the specs, browsers or live under a rock are being allowed explicit access to a code base they don’t know enough about to add commercial value to, but I can’t pin it all on the developers.

Where are our QA team?

These people are our lifeline when it comes to releasing something to a wild, they make sure our tamed beast doesn’t turn around and bite us in the ass or eat out leg; they’re the one’s that check the quality of our code and make sure it works across as many devices as possible and they *should* give us a compatibility chart after each test to show us where our site doesn’t work so we can improve in the next version.

Sadly, these days QA means “Check it looks ok and give it the green light ASAP” I remember when QA-ers opened your code to check there wasn’t anything disgusting in it like this

#header h1 a span#logo span {
	border:1px solid #F00!important;
	border-bottom:2px solid #00F!important;
}

*shudder* ok that was a bit too gross but still, they do not check for these things anymore, I call them browser vulnerabilities because the code is so bad its actually likely to break in newer versions of any browser or when some clever clogs inspects element and plays with the inner workings of your site.

So what aren’t they doing, well they’re not snooping at our code making sure we have all the prefixes we need, see below for the prefixes we’re all failing to use:

• -o-
• -moz-
• -ms-
• prefix-less

There aren’t many additions so why are we skipping them all and just using a poor mixture of prefix-less properties and webkit, pushing web innovators into bending over backwards to support a competing vendors prefix.

We’re all human

We’re all human and its natural to want to get from a to b as quickly as possible with as little expenditure as possible, in this case the expenditure is the energy used to think and type.. poor I know but it seems most of us don’t have the energy, time, money, whatever other excuses you can come up with I’m sure.

And ok, not all of us have the time to prefix everything, this is why pre-processing libraries such as Sass, LESS and Compass are all great (and by the way I have built a library for all of them) because we can consolodate our code into one function and call it willy nilly and not have to worry about the prefixes because the functions handle that for us; but I’ll get that a bit later.

What I want to talk about is how to ensure you’re providing the best solution to your clients and the sub-sequent developers that get hold of your project. This can be ensured by QA-ing your own work on multiple screens/devices and at multiple resolutions to ensure the CSS you have written is solid enough for any of the *people* out there to play with, and we all know they’re going to play with it, its human nature to understand everything we can about something we’re interested in (So unless you’re a marketing genius or pirate and have people with no interest visiting your site) that’s hopefully everyone.

Its simple, make sure you use the technologies available to make your job easier such as LESS and Sass and use libraries that are all over the internet to help you, there’s no shame in learning from someone else’s ideas and work; I wouldn’t be in the position I’m in now to tell you how to do it if I weren’t where you are now so firstly lets look at the LESS option.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino

Its truly brilliant, much like Sass but with easier to remember syntax and there are some truly brilliant libraries out there to cut the work down even further, even I made one available here

https://github.com/davemackintosh/My-HTML5-CSS3-templates—tools

and there are many more, its the same with Sass; below is their blurb

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin

And my effects library will be converted to Sass just as soon as I can find the time! If you don’t want to use LESS or Sass or can’t use anything like that, at least settle for the brilliant prefix-less JavaScript library to help you out.

</rant>

I hope we all learned something here. I will continue to rant about this issue if I have to!

You could also do with reading http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

Yes I’m a stickler for standards but we would all descend into chaos if there weren’t standards so its a good place to start (And you’ll be pleasantly surprised how much you learn from a specification)

But when I see this:

I die a little inside, I *actually* saw the above and my mind vomited for 5 reasons immediately, that’s a very much shortened down version of what I physically saw (What is seen cannot be unseen…)

1. <section> used out of context, its not in the semantic place it should be

2. There are inline styles for major elements on the page

3. I couldn’t see any reason the particular links I saw needed to be in that order so why the hell are they using <ol> instead of <ul>

4. I couldn’t see a <hgroup> element for those headers or any <time> elements on the comments meaning that it makes no sense to search engines or prying eyes like mine..

5. Where the ARIA is my ARIA? Tsk tsk, accessibility people! http://www.w3.org/TR/wai-aria/roles#role_definitions

What I expected to see was this:

The above makes me feel giddy, excited even! But! It doesn’t follow one of Googles style guidelines, but it doesn’t work anyway.. Its not always correct so I’ve left the closing tags in.

The reason I like the above is because it makes semantic sense (like I was reading a book, I have the main article, some extra stuff on the side and if I wanted to dig deeper I can see that the roles match what I’m looking at to confirm I’m reading the right part of the page (works the same with search engines, they don’t know what <div id=”MostImportantPartOfMyPage”> is..)

it doesn’t take too much longer to get this right and the only caveat is getting the actual tags right depending on the context they’re needed!

For instance, my home page has a number of articles so would I want a whole bunch of article tags on there? no, not really because that doesn’t make sense, the page should be an <article> (but for gods sake not as the wrapper, <div> is still the dogs nuts for that) and each post should be a <section>, as in a section of the page.. Makes sense now huh?

In each section you should have a <hgroup> unless you only have the one heading otherwise its not a group and its a singular entity (poor lonely header..) so get wrapping!

Your <hgroup> be followed with your content (duh..) or if not, the only other element I would consider acceptable here is <time> to mark the publication date/time.

After your content you should have a <footer> element which contains your comments and any other meta information you want attached to each section of content.

Then you should have a perfectly semantic page… get cracking! I’ll do another post on proper JavaScript as a continuation of why !! pisses me off.. http://jsfiddle.net/dmackintosh88/7cRyr/

If you don’t need to wait for images/scripts to load use:

(function ($) {
        $(document).ready(function () {
                //Code here
        });
})(jQuery);

If you need to wait for media to load, use this:

(function ($) {
        $(window).load(function () {
                //Code here
        });
})(jQuery);

Simple as that!

The album will be called 13

There will be 9 tracks listed below in order.

1. 3
2. 6
3. 7
4. 9
5. 11
6. 13
7. 33
8. 39
9. 77

Odd album and track names but to some people they mean a LOT. No I will not explain them.

Looking for a late 2012 early 2013 release.

Influences include:

Dream Theater circa 90′s
Rush circa 70′s to 90′s
Genesis
Ludovico Einaudi
Opeth

Should hopefully get some teasers up over the next few weeks.

<!---
		@author ~ Dave Mackintosh
		@Description ~ Formats the date with the day suffix
	--->
	<cffunction name="DateFormatter" returntype="any" description="Formats the date with the day suffix">
		<cfargument name="in" required="true" type="date" />
		<!--- Format it --->
		<cfset out = dateformat(in, 'd mmmm yyyy') />
		<!--- Convert it to an array --->
		<cfset date = ListToArray(out, ' ') />
		<!--- Give it a suffix --->
		<cfset sub = Mid(date[1], Len(date[1]), 1) />
		<cfset suff = '' />

		<cfscript>
			//We only get st if its the first number and not 11
			if (sub eq 1 and (date[1] neq 11)) {
				suff = 'st';
			}
			//We only get nd if its 2 and not 12
			else if (sub eq 2 and (date[1] neq 12)) {
				suff = 'nd';
			}
			//Same with rd, only if its 3 and not thirteen
			else if (sub eq 3 and (date[1] neq 13)) {
				suff = 'rd';
			}
			//Otherwise its going to be a th!
			else {
				suff = 'th';
			}
		</cfscript>

		<!--- Now replace the substring --->
		<cfset date[1] = date[1] & suff />

		<cfreturn ArrayToList(date, ' ') />
	</cffunction>

The reasoning

After years of using the dFramewerk myself I have learned many things about PHP (and still continually learn) and I have strayed into using the Zend Framework for my projects, this has worked out very well for me and my clientele and I feel comfortable enough with it now to stop active development of the dFramewerk as the combination of both the maintenance and updates takes up as much of my time as the actual software development!

The evolution of the framework itself has been slowing down over the last 18 months, to a stand still in-fact but I still had support requests and bugs to fix for the general public, now I know many thousands of people have downloaded and implemented the framework and as with any open source software the risk was that support and development may stop at any time but it is; at the end of the day my choice to discontinue the development of the project and offer my greatest apologies for all that I am disappointing.

This decision didn’t come lightly but it is in the best interest for my clients that I use a more standardised framework and a framework I can rapidly develop with.

Gripe…

It allows the use of mixins, variables and adopts a fairly DRY methodology, until you render.

I’ll get the gripe over with before I move onto some of the plusses of LESS; during any CSS writing I’ll try to visualise the formation of my selectors so that I can maximise the effect of DRY and for years and years that has worked for me, so when I heard about LESS, researched it I was gob-smacked to see I could write arrow-head formated code and not generally have to worry about repeating selectors over and over. This was all until I came to compiling, take this LESS snippet for instance:

#myunorderedlist {
    //Clear the element
    overflow:hidden;
    border:1px solid #F00;

    li {
        float:left;
        border-right:1px solid #F00;

            a {
                padding:8px 20px;
                text-align:center;

                &:hover {
                    cursor:pointer;
                    text-decoration:underline;
                }
            }
    }
}

Will end up like this, with a lot of repeated selectors that aren’t exactly necessary:

#myunorderedlist {
    overflow:hidden;
    border:1px solid #F00;
}
#myunorderedlist li {
    float:left;
    border-right:1px solid #F00;
}
#myunorderedlist li a {
    padding:8px 20px;
    text-align:center;
}
#myunorderedlist li a:hover {
    cursor:pointer;
    text-decoration:underline;
}

This isn’t a massive issue for me, I recently said for everything good out there, there is something twice as bad and twice as stupid so I took this with a pinch of salt and hit the drawing board to try and think of a way to morph my working method into something to reduce this. I failed. But having said that, the amount of time saving involved with the use of mixins is fundamentally one of the biggest time savers of my day and the ability to organise my CSS into separate files and compile out to one is something of a miracle.

@imports make me shudder..

Now, normally when I see @import ‘some-file.blah’; I feel a little sick and shaky, these are a personal hate of mine. I have no idea why, but I hate these but LESS has taken it to another level and allowed for *.less inclusions which on compilation are actually written to the callee.

Take the below code for example:

@import 'effects.less';
//For anyone out there reading this, NORMALISE stop resetting!!  
@import 'normalise.less';
@import 'html5.less';

html {
    min-height:100%;

    body {
        min-height:100%;
    }
}

@import 'home.less';
@import 'about.less';
@import 'services.less';

So I’ll take it from the top, the other day I made public a CSS3 effects bootstrap that is cross browser (of course excluding IE) and I import that into every project that I think is going to use any kind of transitional effects (which lets face it is becoming more and more popular/regular) this file contains nothing but a disclaimer and a set of mixins to make my job easier and faster and if I don’t use any of the functions the disclaimer is the only thing that is output in the CSS.

I NEVER reset, sorry Eric Mayer you’re a legend but its not the best anymore. I normalise which I find much better and I’ve got my own LESS file for this, just run the CSS > Sass converter tool to convert this to LESS and tidy it up a bit.

In the example I set a few basic rules on the html and body tags, this was just representational so you don’t need these; I then start importing my page specific files.

The actual ability to import page specific stylesheets is brilliant (in the sense it ends up in the same file) although it does create an unhelpful amount of bloating but its quicker than writing plugins for CMS’ to attache specific stylesheets to pages. It also allows for more than one person to work on a website and compile to the same file with no loss of data which is brilliant for where I work and what I do.

Opinions on other issues

A few people mentioned that the use of debug toolbars (Firebug, webkits toolbar, Dragonfly, etc) to check css layouts is annoying when using CSS pre-processors as 100% of the time the line-number is wrong making it difficult to find the actual line of code that is wrong. Big deal I say, organise your code more efficiently using LESS imports and mixins/variables or any other way you find beneficial.

Its also been heard that LESS/Sass makes front end developers code lazily, I completely disagree with this. I find it incredibly hard to code lazily with LESS as the arrow-head formation makes it easy to read and search through so amends are easy to implement, also with the ability to use JavaScripts // comment syntax you can clearly label your selectors to something more memorable to search by or note a change made/original value.

Conclusion

LESS/Sass and in general CSS pre-processors are great for some projects, perhaps not all but definitely a time saver for me 80% of the time, it requires no training because it is just far too easy to use. For any HTML5 or CSS3 projects its almost an absolute must with the likely-hood of falling into the no-DRY hole, easily fixed with imports and libraries containing different effects its a dead-cert that you’ll love using LESS but find it gainful only half of the time depending on your work type.

Give it a go, after all its free and it takes no time at all to learn it. Also download Crunch its the best LESS editor/compiler currently available. Even if it doesn’t work on Ubuntu just yet

But this post isn’t about that, not this time I’m here because I’ve been working on a generic effects.less which contains a set of generic mixins I use so very regularly its a simple include. Download it here!

To use the file just stick this in the top of your LESS file.

@import 'directory/to/effects.less';

And you will have added the below effects to your CSS library instantly:

1. .rounded ([@radius]);
   This adds a border radius to your element with the specified radius
2. .border-radius ([@topleft: 4px, @bottomleft: 4px, @topright: 4px, @bottomright: 4px]);
   This allows you to specify each corners radius seperately
3. .transition ([@transit: all, @speed: 1s, @ease: linear]);
   This watches for transitions and allows you to, cross browser (Bar IE) set the transition methods
4. .boxShadow ([@horiz:0px, @vertic:0px, @blurRad:5px, @color: #000]);
   Adds a shadow to any element capable of having a shadow, this is an OUTER shadow
5. .insetBoxShadow ([@horiz:0px, @vertic:0px, @blurRad:5px, @color: #000]) ;
   Adds a shadow to any element capable of having a shadow, this is an INNER shadow
6. .gradient([@color: rgb(36,36,36), @start: rgb(36,36,36), @stop: rgb(89,89,89)]);
   This applies a very simple bottom/bottom linear gradient to the selected element
7. .perspective ([@amount:800, @left: 50%, @top: 50%]);
   This applies perspective to your element for 3D transforms
8. .perspectiveOrigin ([@left:50%, @top:50%]);
   This is automatically called by .perspective() and sets the origin of the transform
9. .preserve3D ();
   This preserves any 3D aspect attached to the element during transforms

I hope very much that you all enjoy using this file, its sped up my development no end and deserves sharing

If you like it and think I deserve a beer then just send me a buck or two via Paypal to the address in the top of the downloadable file.

happy LESSING!

its recommended that you test from 1499 down, I got to 1464 before my network seemed ok.

Run this command and keep lowering the value until you stop getting the message “Frag needed and DF set”

Run the below in your terminal:

sudo ifconfig eth0 mtu 1464
ifconfig | grep MTU

This lowers the maximum packet size and it sped my network speed up from around the 20kbps mark to my Windows 7 speed which is around 4mbps.

EDIT:

So mine started to slow down again, which really sucks and this is a reported Kernel 3 bug, BUT if you set your wireless router to NOT send a wireless N signal it will speed up brilliantly!