Dave Mackintosh

Incorrect usage of html5 makes me a bit sad

May 6, 2012 by Dave

Firstly, all go read https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document and http://www.w3.org/TR/2010/WD-html5-20100624/ for gods sake.. He WILL smite you for not reading them before starting.

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/

Category HTML/XHTML, Semantics | Tags: , guidelines, html5, standards | No Comments
Window load vs document ready

March 29, 2012 by Dave
I see this issue all the time and perhaps even more worryingly I see the use of setTimeout() in places to defer listeners.

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).onload(function () {
                //Code here
        });
})(jQuery);
```
Simple as that!
Category JavaScript, jQuery | Tags: , dom loading, Jquery | No Comments
First & Next 3 Hour Challenge

March 26, 2012 by Dave
So I have decided to start challenging myself at least once a week, I call this the “3 Hour Challenge”.

The first was weekend before last, and was a tool for @boydleep which converts a JSON object into a variable map.

So you could input (or import the file) something like the below:
```
{
        "hello":"foo",
        "world":"bar",
        "yes":['this','is','dog'],
        "MoreJSON": {
                "Iterate":'here',
                "Over":'here',
                "This":'here'
        }
}
```
And you recieve
```
var a = {//ORIGINAL STRING},
    hello = a.hello,
    world = a.world,
    b = a.yes[0],
    c = a.yes[1],
    d = a.yes[2],
    e = a.MoreJSON.Iterate,
    f = a.MoreJSON.Over,
    g = a.MoreJSON.This;
```
its rough, but I did it in 3 hours 28 minutes, not the greatest start but its pretty cool.

This week I will be making an application that based on input tells you what browsers support what CSS selectors based on the WC3 docs. See http://www.w3.org/TR/selectors/#selectors

I will do this tomorrow night and perhaps write more about it then and there, I will also set everything up on my GitHub account.
Category JavaScript, jQuery, Titanium | Tags: , javascript, JSON, Titanium | No Comments
New Album Details

March 2, 2012 by Dave
I have new details confirmed for my new album

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.
Category Reason, Sonar Producer | Tags: , classical, metal, music, progressive, rock | No Comments

Coldfusion dateformat with day suffix

February 27, 2012 by Dave

I wrote a function for this since it was incredibly annoying that the built in functionality doesn’t have an option for it…

<!---
		@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>

Category ColdFusion | Tags: , Coldfusion, dateformat, day suffix | No Comments

Decommissioning the dFramewerk

February 7, 2012 by Dave

Well, with a long face and heavy heart I have decided to no longer support the dFramewerk; no longer actively develop it and no longer promote it. I have closed the website and will be letting it the domain expire so you can snap that up nice and easy at the cost of a normal domain name.

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.

Category dFramewerk, PHP, php developer, Zend Framework | Tags: , dframewerk, zend framework | No Comments
CSS pre-processing with LESS

January 27, 2012 by Dave
While I spend much of my time elbow deep in a mixture of PHP, ColdFusion and .NET I probably spend about 60% of my time cringing at the state of old websites CSS and writing new stylesheets and I try my best to keep up with the latest front end technologies and for the last 6 to 8 weeks I have been using (and abusing I must admit) LESS which has in my opinion been an absolute god send, from both a management and developer point of view.

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
Category CSS, CSS3, HTML/XHTML, LESS CSS | Tags: | No Comments
LESS CSS effects bootstrap

January 22, 2012 by Dave
LESS CSS is possibly the greatest thing to happen to any front end developers job, it handles mixins, parameters and on top of all of that it can be play a big role on the performance of your site with its compiler. To add to the Awesome (yeah, with a capital A) I often involve the compiler within my Capistrano scripts to automate everything during deployment.

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!
Category CSS, CSS3, LESS CSS | Tags: , css3, LESS CSS | 1 Comment
CSS3 future, new section to appear soon

January 5, 2012 by Dave

Hi guys,

Let me with you all a happy new year firstly, I’m sure this year we will all prosper in ways we couldn’t perceive yesteryear; on that note, I’m pushing on a lot more mobile and “future” development using the very latest in CSS3 including 3d transforms, LESS, SaSS and many other new and intriguing methods of working and will soon be opening a whole new section on my website for you to view my latest experiments and even toy with them yourselves.

I also plan to (finally) release my PHP MVC framework called the dframewerk to the public since I’ve now tested and used it on countless websites with little to no extra/manual coding for structure. There will be a website for it which contains all of the documentation so keep your eyes open for the dFramewerk – PHP in English

All the code will be publicly available under the MIT license and you can alter it with a preview on the fly, very much like jsfiddle!

I hope you all enjoy the new section, I’d like to dedicate this to the community, well wishers and estranged visitors to my site (there are over 5000 of you weekley! say’whut??)

Expect more!

Category CSS, HTML/XHTML, JavaScript, jQuery, webkit | Tags: , css3, html5, javascript, mobile development | No Comments
Slow internet Ubuntu 11.10 Wireless

December 19, 2011 by Dave
So this issue seems to be a new one in the latest versions of Ubuntu, a slow internet connection is a real pain in the ass but after relentless network testing and checking I have every update installed and yada yada I never thought to check the MTU (maximum transmission unit) which of course was set too high, this means that for wireless networking any packets larger than the default MTU (1492) will get lost in the network. Bad times, LUCKILY you can set this yourself!

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!
Category Linux, ubuntu | Tags: , linux, slow internet, slow wireless, ubuntu, ubuntu 11.10 | No Comments

Older Entries

Gripe…

@imports make me shudder..

Opinions on other issues

Conclusion