According to this explanation on stackoverflow, it appears that if you set the width and height of your canvas element in css
canvas {
height: 20px;
width: 20px;
}
whenever you render vectors on the canvas they will appear stretched as css only sets the container size not the canvas size. So you have to do something like this:
var canvas = document.getElementById("canvas");
canvas.setAttribute("width", "20);
canvas.setAttribute("height", "20);
How. Strange.
Thought I’d just write a quick post to both commiserate and celebrate the news that Joel Spolsky has decided to retire from blogging.
In the final .inc article Joel quotes Kathy Sierra:
“an entrepreneur’s blog has to be about something bigger than his or her company and his or her product”
so I thought I’d write up a brief tribute of why I thought Joel Spolsky’s blog/writing was important to software development as a whole.
Five years ago, I was working as a technical lead in a small design firm. I was the only full time technical person and dealt with everything, wearing hats from server admin to lead developer to pitching to printer technician to technical manager hiring and firing freelancers.
Suffice to say, the quality of work that came out of that company was not high and we were constantly faced with the very real possibility of bankruptcy. 14 hours a day I was rushed off my feet trying to get everything done, always playing catch up. I was inexperienced and stressed and after a grueling year I quit to take some time out and regain the shreds of my sanity.
At this time my love of the software industry was not very high, it seemed like a lot of hard work for not much reward and I was about ready to jack it in and become a wine farmer in Slovenia.
That was until I found myself reading a book that would change my opinions.
Here was a book that did 2 vital things for me.
Firstly, it made me feel like I was no longer alone. Here was a person who had realized the same things that I had realized about the nature of software development and was willing to stand up and champion this best practice. Now when a project manager tried to tell me why using SVN took too much time or a designer tried to tell me it was ok that he had done his design in anti-aliased VAG rounded and the web page needed to be exactly like it, I had the confidence to push back.
Secondly it taught me or clarified some best practice principles across other disciplines, from legacy code to complimentary services. It both increased the depth and breadth of my knowledge again helping me to feel more confident to push back in other areas that were not my specialty.
I finished reading the book and was excited to be a software developer again, armed with a new set of skills and I will always be very grateful for that. Joel spent many years evangelizing software development best practice and made mine and I suspect a lot of other people’s lives a lot easier giving us the knowledge and tools to be able to get on with the exciting pieces of building software.
After reading the book, I also listened to the ups and downs of the stackoverflow podcast and gleaned some new bits of industry information from that, but ultimately I think that had run it’s course and am happy they decided to end/change it.
I don’t know where Joel’s journey will take him next but I hope that it is equally as prosperous and continues to allow him the freedom and scope to do what he wants. I was certainly very interested to see the new Kiln project and incredibly helpful mercurial guide. Which I in turn will be using to help educate younger developers. So thanks Joel for ten years of great software development insights.
Enforcing Strict Model-View Separation in Template Engines by Terrance Parr
The short version is that JSP makes XHTML VIRTUALLY IMPOSSIBLE to validate in it’s fragmented form, which would be much, much, faster than compiling it and then running an html test on a server version to check it’s validity. “Fail fast” is the phrase du jour with CI/CD and JSP prevents this, as well as creating a HORRIBLE HORRIBLE mess of crappy crappy code.
So in short, never use JSP, or Faces, or any of those other ridiculous technologies. The only thing that prevents you using String template is unfounded fear. The pain you save your developers is worth it. Trust me.
I love using new technology. I really do. It’s great, basic things you knew how to do with an older system, get reinvented and become no longer trivial. They become a long drawn out, painful process, that involves your blood pressure raising to that perfect level where it reduces you lifespan by a twenty minutes. Each time.
So when I switched to command line Mercurial from Tortoise GUI SVN, you can imagine my delight.
To be fair, I actually had already got command line SVN experience, so thought the transition might be somewhat simpler. It wasn’t. The commands may be very similar but the process itself is not.
Frustratingly it is actually very simple once you know the command-set to get you up and running, unfortunately no has written a basic, 123 guide to setting up a googleCode mercurial instance on windows XP. So I thought I’d be the first.
cd \
mkdir testproject
cd testproject
hg clone https://testproject.googlecode.com/hg/ testproject
cd testproject dir
hg add *
hg commit -m "added first file to repository"
hg push
This will prompt you for a user name and password, the password IS NOT YOUR DEFAULT PASSWORD. Go to your accounts hosting page to find it.
default = https://testproject.googlecode.com/hg
https://(your username here):(your password here)@testproject.googlecode.com/hg
I hope this helps, I spent sometime this weekend trawling the internet for clues as to how to do this most basic of processes but could find no simple explanation, written in a language people could understand.
I’ve been ranting about this in drunken pub conversations for a few years now. But finally someone with an ounce of academic credibility to back me up.
My 2030 prediction for my company is:
A further interesting discussion of this was posted up by a fellow member of the London Futurists group.
Sit back. Close your eyes. Imagine the scene.
Your client is sat round a big 3 inch thick mahogany table, in a tastefully decorated 1930’s art deco hotel conference room. They lean back in their reclining leather chairs whilst sipping chilled Harrods mineral water served in crystal wine glasses. The leather creaks. The sun pierces the cloud glinting through the gaps in the blinds filling the room with a coruscating light, a dazzlingly you are praying to match in the events that follow. Formalities are exchanged and weather is discussed. A thin veil of cultural formality gives you a brief respite from the reason you all know you are there.
You tap the mouse connected to the macbook. The projector flickers into life. The first page of your masterpiece is lit up. Each pixel a glorious testament to your craftsmanship and the pain, sweat and blood you’ve slaved over for the past iteration. Each click though the journey provides the perfect accompaniment to your commentary, going deep and deeper into your world, building a crescendo around it that signifies your masterful control of your media. Click follows click. Ouuu follows ahhh. And then…
Bang!
Has this or something along similar lines ever happened to you before?
Your heart sinks. Your face burns as the blood rushes like a stampede of elephants into your cheeks. You blush. You stutter a laugh. Make a self deprecating witticism about the realities of live demos. You click ok. You proceed with the demo. Inside you are crying tears of shame and remorse. “Why didn’t I catch that before?” you think.
Which, by the way, is wrong.
If you had more time to think about the question you should have actually asked is “why did that happen at all?”. To which the answer would have been, it shouldn’t.
Debug code, should never make it into the production environment. It’s just bad practice. Plain and simple. So the question becomes, “how do we stop it?”.
On my latest project I’ve been working with CI or Continuous Integration. I won’t go into the details of how CI works, you can find that out yourself.
As part of this, I’ve been using 3 very important tools: Maven, JSLint4Java and JSLint itself.
Maven is a build tool that allows me to add the marvellous JSLint4Java ant plugin to it. This means when Maven is triggered by the CI system, JSLint gets run on all the Javascript and CSS files in my project. If they fail the validation: the build fails. Simple as that.
Now, this gives us a lot power, to help both enforce code consistency, valid code and good code.
But up until recently, JSLint has not had the functionality to check for the javascript global alerts, consoles, debug or opera statements. But as of 19th of November 2009, after suggesting a console check, on the JSLint working group forum. The ability to be able to check for the globals: console, alert, Opera, prompt and debug have been added to JSLint by programming/Javascript legend Douglas Crockford himself.
AWESOME.
The new functionality comes under the ASSUME keyword, that when you switch off using the following code:
/*devel : false, debug : false */
will fail the file if any of those statements are present in the code…
This brings us one step closer to the holy grail of front end code RELIABILITY and eradicates the scenario I wrote about at the beginning of the post. But still doesn’t completely protect you from looking like an idiot in front of the client, so take care!
Sometimes trying to code can be like standing on the edge of an abyss.
You desperately want to take that leap off the firm, solid edge of reason and safety into the infinitely consuming unknown world of possibility that awaits you. But for all your heart, passion and fire, your brain is resolutely locked, frozen in place, destined to stare longingly out of your cold dead eyes at the wonders that could have been.
Your fingers tense as you try to force line after painful line of code from them. With each line you see another 3 lines that you should delete from earlier in the forcing process.
Each decisions you make is an excruciating process of taking a thousand different possibilities whittling them down and then taking a random guess that it’s the correct course of action. With each character you type your struck by the heinous unreusability of what your creating and that your never going to be able to get back to the pure zen state of a blank page that your soiling at this very moment.
You close your eyes and everyone who has ever condemned you as a failure, mocked your ability, or questioned any sense of validity as a human being is stood in a large circle pointing and riotously laughing at you.
This, this my friends is the hell of coders block.
A crippling affliction akin to the crushing sensation you get as a man when you fail to perform sexually, or the soul crushing moment at school where you are picked last for a sports team due to uncoordinated inability. One of those moments in life where you literally question the entire worth of your existence and pose the question “should I go on?”.
Well, maybe not quite that bad. But pretty damn close.
Today, I have failed to be at all productive. Infected by this disease of the mind, I have sat trying to code for 8 hours but achieving nothing more than responding to emails, reading blogs, writing blogs feeding my lethargic, flu infested body, festering in the social underbelly of mankind.
I even googled, coders block to avoid actually having to write any code! This is not a good day. The sooner it ends, the better…
I’ve had to do a lot of things in my career as an interaction developer that I’ve despised.
A favourite bug bear of mine is having to reimplement standard browser controls in JavaScript. The familiar tale of the powers that be deciding they want to create custom designs for every tiny part of the web interface. Inevitably as the code monkey it’s your job to take it up the rear and produce these gems no matter how hard, annoying or pointless they are until someone, somewhere, can climax into a design ejaculation, probably whilst flicking through the centrefolds of a Taschen Philippe Starck product book. No wonder when you pick them up in Waterstones they are always sticky…
One of the repeat offenders of this list is the poor old scroll bar. Admittedly a tad ugly looking in some OS’s but never the less a stalwart of interaction design. The number of times I have been asked to re-implement this, using a variety of different colours, shapes, sizes has grown too long to count. I’ve spent a lot of time agonizing/swearing over scrollbar engineering principles and now it’s my turn to implement the scrollbars I want.
Now the scrollbars I want.
Are invisible.
I can’t remember when I watched it, but many moons ago, I came across Edward Tufte’s excellent dissection of the iPhone’s interface. The idea that really resonated with me on this, was the concept of eradicating “administrative debris”, controls that were just there to control, things that could be re-implemented to be intuitive behaviors, without the need for a reserved space of visual feedback that clutters and constricts the screen real estate. A beautiful example of this is how the iPhone, does away with scrollbars, in favour of a tactile drag/swipe scroll mechanism.
So, I thought, why not put the inane knowledge I have of JavaScript and the browser scrolling api to use, and implement a version of the iphone scroller, in a jQuery Plugin.
Six months later, someone else has beaten me to the punch.
There is already an jQuery iPhone scroller plugin, which is annoying as I produced the POC over six months ago, but only recently got around to tidying it up and refactoring it. BALLS. Oh well such is life. Anyway, mine needs some work, but is generally better.
Some examples are below:
The iPhone platform elegantly solves the design problem of small screens by greatly intensifying the information resolution of each displayed page. Small screens, as on traditional cell phones, show very little information per screen, which in turn leads to deep hierarchies of stacked-up thin information–too often leaving users with “Where am I?” puzzles. Better to have users looking over material adjacent in space rather than stacked in time.
To do so requires increasing the information resolution of the screen by the hardware (higher resolution screens) and by screen design (eliminating screen-hogging computer administrative debris, and distributing information adjacent in space).
This video shows some of the resolution-enhancing methods of the iPhone, along with a few places for improvements in resolution.
In 1994-1995 I designed (while consulting for IBM) screen mock-ups for navigating through the National Gallery via information kiosks. (The National Gallery had the good sense not to adopt the proposal.) For several years these screen designs were handouts in the one-day course in my discussion of interface design, and were then published in my book Visual Explanations (1997).
The design ideas here include high-resolution touch-screens; minimizing computer admin debris; spatial distribution of information rather than temporal stacking; complete integration of text, images, and live video; a flat non-hierarchical interface; and replacing spacious icons with tight words. The metaphor for the interface is the information. Thus the iPhone got it mostly right.
Another critique of the current weather application (one that I believe can be rectified once the SDK comes out in February): more detail is difficult to obtain. For instance, most standard weather displays (TV, newspaper, etc.) give the chance of precipitation and the humidity level. This information could easily fit on the weather screen, but it isn’t there. If I click on the Y! logo at the bottom left, it takes me to a Yahoo mobile page that shows ads and no additional details about the weather (plenty of other random info about my area though…).
Quisque sem diam, ullamcorper et, volutpat et, dignissim sit amet, ligula. Praesent accumsan justo vitae metus. Nunc pretium aliquet libero. Nulla ut pede et lectus iaculis accumsan. Nulla aliquet arcu at quam. Pellentesque cursus adipiscing dolor. Suspendisse volutpat magna id nisi. Ut pretium nisi in elit. Curabitur id arcu. Maecenas eu quam. Curabitur ultricies, lectus quis commodo dignissim, felis turpis vehicula arcu, ac faucibus risus metus vitae turpis. Maecenas et lacus ut enim vulputate interdum. Mauris ut diam ut urna laoreet tristique. Aenean malesuada consectetur erat.
Phasellus eleifend, velit at semper fringilla, metus dolor hendrerit dui, id consequat enim purus vitae est. Sed tristique. Quisque hendrerit ullamcorper tortor. Vivamus pretium fringilla lacus. Maecenas in mi quis lorem auctor egestas. Vivamus quis urna dapibus sem euismod congue. In hac habitasse platea dictumst. Mauris metus sem, molestie in, tristique non, pellentesque a, enim. Aenean eleifend urna sit amet libero. Cras in diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor pharetra quam. Cras ac massa in nisi semper rutrum. Aliquam at tellus. Morbi tincidunt.
To do so requires increasing the information resolution of the screen by the hardware (higher resolution screens) and by screen design (eliminating screen-hogging computer administrative debris, and distributing information adjacent in space).
This video shows some of the resolution-enhancing methods of the iPhone, along with a few places for improvements in resolution.
In 1994-1995 I designed (while consulting for IBM) screen mock-ups for navigating through the National Gallery via information kiosks. (The National Gallery had the good sense not to adopt the proposal.) For several years these screen designs were handouts in the one-day course in my discussion of interface design, and were then published in my book Visual Explanations (1997).
The design ideas here include high-resolution touch-screens; minimizing computer admin debris; spatial distribution of information rather than temporal stacking; complete integration of text, images, and live video; a flat non-hierarchical interface; and replacing spacious icons with tight words. The metaphor for the interface is the information. Thus the iPhone got it mostly right.
Another critique of the current weather application (one that I believe can be rectified once the SDK comes out in February): more detail is difficult to obtain. For instance, most standard weather displays (TV, newspaper, etc.) give the chance of precipitation and the humidity level. This information could easily fit on the weather screen, but it isn’t there. If I click on the Y! logo at the bottom left, it takes me to a Yahoo mobile page that shows ads and no additional details about the weather (plenty of other random info about my area though…).
Quisque sem diam, ullamcorper et, volutpat et, dignissim sit amet, ligula. Praesent accumsan justo vitae metus. Nunc pretium aliquet libero. Nulla ut pede et lectus iaculis accumsan. Nulla aliquet arcu at quam. Pellentesque cursus adipiscing dolor. Suspendisse volutpat magna id nisi. Ut pretium nisi in elit. Curabitur id arcu. Maecenas eu quam. Curabitur ultricies, lectus quis commodo dignissim, felis turpis vehicula arcu, ac faucibus risus metus vitae turpis. Maecenas et lacus ut enim vulputate interdum. Mauris ut diam ut urna laoreet tristique. Aenean malesuada consectetur erat.
Phasellus eleifend, velit at semper fringilla, metus dolor hendrerit dui, id consequat enim purus vitae est. Sed tristique. Quisque hendrerit ullamcorper tortor. Vivamus pretium fringilla lacus. Maecenas in mi quis lorem auctor egestas. Vivamus quis urna dapibus sem euismod congue. In hac habitasse platea dictumst. Mauris metus sem, molestie in, tristique non, pellentesque a, enim. Aenean eleifend urna sit amet libero. Cras in diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor pharetra quam. Cras ac massa in nisi semper rutrum. Aliquam at tellus. Morbi tincidunt.
In hac habitasse platea dictumst. Proin consequat bibendum tortor. Phasellus mollis, lectus non imperdiet ultrices, magna elit fermentum orci, rhoncus varius urna mi at est. Aenean ut velit. Pellentesque velit nunc, ullamcorper vel, iaculis cursus, facilisis non, nisl. Nam pede diam, venenatis sit amet, consequat vel, malesuada quis, enim. Ut adipiscing, turpis pulvinar mattis ultrices, enim mi euismod arcu, in imperdiet nunc nisl id pede. Maecenas non dolor. Nullam mi turpis, hendrerit ut, ultricies id, lacinia sit amet, turpis. Sed accumsan, ipsum at faucibus scelerisque, nisi neque commodo ante, sed tincidunt massa lectus in eros. Sed bibendum turpis scelerisque purus. Pellentesque vitae ipsum. Duis sodales fringilla ante. Pellentesque posuere posuere tellus. Phasellus gravida laoreet risus. Integer vitae felis tincidunt felis vulputate semper. Duis semper sem a pede. Praesent quis lectus vel felis varius feugiat. Phasellus ipsum nulla, auctor eget, euismod at, elementum ac, pede.
Proin venenatis augue sit amet felis hendrerit lacinia. In molestie augue sed arcu. Mauris posuere velit eu leo. Mauris commodo. Aenean lacinia dignissim libero. Curabitur quis enim quis augue interdum facilisis. Integer elementum sem nec lectus. Curabitur rutrum nulla in felis. Morbi mattis turpis id diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin lectus. Morbi lorem augue, suscipit nec, iaculis eu, tincidunt quis, erat. Duis at ante sit amet dui molestie scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sodales, risus eu lobortis posuere, justo turpis laoreet ante, eget aliquet nunc metus in erat. Praesent imperdiet orci. Quisque sapien nulla, interdum quis, viverra vel, varius et, lacus. Proin nec risus a ante egestas dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida. Etiam neque lacus, pulvinar a, sollicitudin in, scelerisque suscipit, risus. Vivamus tristique ipsum ac libero. Suspendisse at turpis. Fusce tincidunt, nisi ut porta porta, quam nibh posuere metus, non euismod pede tellus ullamcorper nisi. Praesent dignissim enim consequat odio. Nullam sed velit a arcu volutpat vulputate. Morbi vel est. Vestibulum suscipit nulla blandit libero. Ut aliquam velit in erat. Donec rhoncus ligula quis ante. Morbi fermentum erat in nibh. Suspendisse elit pede, commodo eleifend, faucibus at, eleifend ac, nunc. Phasellus interdum, mauris vitae egestas tempor, ligula sapien vulputate risus, vel placerat tellus ipsum quis tortor. Etiam sodales, tellus eget molestie blandit, metus turpis volutpat arcu, vehicula gravida diam massa vehicula elit. Aliquam id ante. In in ipsum at sapien condimentum varius.
Quisque sem diam, ullamcorper et, volutpat et, dignissim sit amet, ligula. Praesent accumsan justo vitae metus. Nunc pretium aliquet libero. Nulla ut pede et lectus iaculis accumsan. Nulla aliquet arcu at quam. Pellentesque cursus adipiscing dolor. Suspendisse volutpat magna id nisi. Ut pretium nisi in elit. Curabitur id arcu. Maecenas eu quam. Curabitur ultricies, lectus quis commodo dignissim, felis turpis vehicula arcu, ac faucibus risus metus vitae turpis. Maecenas et lacus ut enim vulputate interdum. Mauris ut diam ut urna laoreet tristique. Aenean malesuada consectetur erat.
Phasellus eleifend, velit at semper fringilla, metus dolor hendrerit dui, id consequat enim purus vitae est. Sed tristique. Quisque hendrerit ullamcorper tortor. Vivamus pretium fringilla lacus. Maecenas in mi quis lorem auctor egestas. Vivamus quis urna dapibus sem euismod congue. In hac habitasse platea dictumst. Mauris metus sem, molestie in, tristique non, pellentesque a, enim. Aenean eleifend urna sit amet libero. Cras in diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor pharetra quam. Cras ac massa in nisi semper rutrum. Aliquam at tellus. Morbi tincidunt.
In hac habitasse platea dictumst. Proin consequat bibendum tortor. Phasellus mollis, lectus non imperdiet ultrices, magna elit fermentum orci, rhoncus varius urna mi at est. Aenean ut velit. Pellentesque velit nunc, ullamcorper vel, iaculis cursus, facilisis non, nisl. Nam pede diam, venenatis sit amet, consequat vel, malesuada quis, enim. Ut adipiscing, turpis pulvinar mattis ultrices, enim mi euismod arcu, in imperdiet nunc nisl id pede. Maecenas non dolor. Nullam mi turpis, hendrerit ut, ultricies id, lacinia sit amet, turpis. Sed accumsan, ipsum at faucibus scelerisque, nisi neque commodo ante, sed tincidunt massa lectus in eros. Sed bibendum turpis scelerisque purus. Pellentesque vitae ipsum. Duis sodales fringilla ante. Pellentesque posuere posuere tellus. Phasellus gravida laoreet risus. Integer vitae felis tincidunt felis vulputate semper. Duis semper sem a pede. Praesent quis lectus vel felis varius feugiat. Phasellus ipsum nulla, auctor eget, euismod at, elementum ac, pede.
Proin venenatis augue sit amet felis hendrerit lacinia. In molestie augue sed arcu. Mauris posuere velit eu leo. Mauris commodo. Aenean lacinia dignissim libero. Curabitur quis enim quis augue interdum facilisis. Integer elementum sem nec lectus. Curabitur rutrum nulla in felis. Morbi mattis turpis id diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin lectus. Morbi lorem augue, suscipit nec, iaculis eu, tincidunt quis, erat. Duis at ante sit amet dui molestie scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sodales, risus eu lobortis posuere, justo turpis laoreet ante, eget aliquet nunc metus in erat. Praesent imperdiet orci. Quisque sapien nulla, interdum quis, viverra vel, varius et, lacus. Proin nec risus a ante egestas dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida. Etiam neque lacus, pulvinar a, sollicitudin in, scelerisque suscipit, risus. Vivamus tristique ipsum ac libero. Suspendisse at turpis. Fusce tincidunt, nisi ut porta porta, quam nibh posuere metus, non euismod pede tellus ullamcorper nisi. Praesent dignissim enim consequat odio. Nullam sed velit a arcu volutpat vulputate. Morbi vel est. Vestibulum suscipit nulla blandit libero. Ut aliquam velit in erat. Donec rhoncus ligula quis ante. Morbi fermentum erat in nibh. Suspendisse elit pede, commodo eleifend, faucibus at, eleifend ac, nunc. Phasellus interdum, mauris vitae egestas tempor, ligula sapien vulputate risus, vel placerat tellus ipsum quis tortor. Etiam sodales, tellus eget molestie blandit, metus turpis volutpat arcu, vehicula gravida diam massa vehicula elit. Aliquam id ante. In in ipsum at sapien condimentum varius.
Quisque sem diam, ullamcorper et, volutpat et, dignissim sit amet, ligula. Praesent accumsan justo vitae metus. Nunc pretium aliquet libero. Nulla ut pede et lectus iaculis accumsan. Nulla aliquet arcu at quam. Pellentesque cursus adipiscing dolor. Suspendisse volutpat magna id nisi. Ut pretium nisi in elit. Curabitur id arcu. Maecenas eu quam. Curabitur ultricies, lectus quis commodo dignissim, felis turpis vehicula arcu, ac faucibus risus metus vitae turpis. Maecenas et lacus ut enim vulputate interdum. Mauris ut diam ut urna laoreet tristique. Aenean malesuada consectetur erat.
Phasellus eleifend, velit at semper fringilla, metus dolor hendrerit dui, id consequat enim purus vitae est. Sed tristique. Quisque hendrerit ullamcorper tortor. Vivamus pretium fringilla lacus. Maecenas in mi quis lorem auctor egestas. Vivamus quis urna dapibus sem euismod congue. In hac habitasse platea dictumst. Mauris metus sem, molestie in, tristique non, pellentesque a, enim. Aenean eleifend urna sit amet libero. Cras in diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor pharetra quam. Cras ac massa in nisi semper rutrum. Aliquam at tellus. Morbi tincidunt.
In hac habitasse platea dictumst. Proin consequat bibendum tortor. Phasellus mollis, lectus non imperdiet ultrices, magna elit fermentum orci, rhoncus varius urna mi at est. Aenean ut velit. Pellentesque velit nunc, ullamcorper vel, iaculis cursus, facilisis non, nisl. Nam pede diam, venenatis sit amet, consequat vel, malesuada quis, enim. Ut adipiscing, turpis pulvinar mattis ultrices, enim mi euismod arcu, in imperdiet nunc nisl id pede. Maecenas non dolor. Nullam mi turpis, hendrerit ut, ultricies id, lacinia sit amet, turpis. Sed accumsan, ipsum at faucibus scelerisque, nisi neque commodo ante, sed tincidunt massa lectus in eros. Sed bibendum turpis scelerisque purus. Pellentesque vitae ipsum. Duis sodales fringilla ante. Pellentesque posuere posuere tellus. Phasellus gravida laoreet risus. Integer vitae felis tincidunt felis vulputate semper. Duis semper sem a pede. Praesent quis lectus vel felis varius feugiat. Phasellus ipsum nulla, auctor eget, euismod at, elementum ac, pede.
Proin venenatis augue sit amet felis hendrerit lacinia. In molestie augue sed arcu. Mauris posuere velit eu leo. Mauris commodo. Aenean lacinia dignissim libero. Curabitur quis enim quis augue interdum facilisis. Integer elementum sem nec lectus. Curabitur rutrum nulla in felis. Morbi mattis turpis id diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin lectus. Morbi lorem augue, suscipit nec, iaculis eu, tincidunt quis, erat. Duis at ante sit amet dui molestie scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sodales, risus eu lobortis posuere, justo turpis laoreet ante, eget aliquet nunc metus in erat. Praesent imperdiet orci. Quisque sapien nulla, interdum quis, viverra vel, varius et, lacus. Proin nec risus a ante egestas dictum.
Not all developers are created equal.
In a perfect world, everyone would be super diligent and proficient at creating CSS, but in reality this is not the case. In some cases less experienced developers can make mistakes, create inconsistant code or not reuse exiting code. Even in other cases when more than one experienced developer works on a project, you can still end up with inconsistency and repeated code just by the dint of different working styles.
I thought I’d start experimenting with automated testing of frontend presentation code, focussing on regression testing. This topic is not really discussed a lot, as the standard response is that there is no replacement for an eyeball test, but humans are by nature unreliable beasts and I’d like to change that and make front-end more of an accepted science.
My hope is that by trying out some techniques and bringing them into the forum I can at least start a discussion that results in an advancement of this field. Allowing us to escape some of the common traps we see at the moment and mitigate some of the risks associated with our profession in the same way back end coding has with unit testing.
This is by no means the first time anyone has looked at this problem. There are other software solutions available like Hp’s WinRunner, but in my opinion they are generally unsuccessful or not fit for purpose. The existing solutions rely on doing algorithmic pixel-based comparisons of screens. Of which the process involves, a screen being designed & built. A “good version” of the screen captured and stored. Then every time the application goes through the build process, the screen is re-captured and compared for differences to the master. Any deviations are noted and the build process fails.
Now this works for static screens. But the problem is that most of the time our applications do not have static screens, the content dynamically changes and therefore, everytime it does so, the build process would fail, invalidating the automated nature of the process. Not only that, but these screens render differently in each browser, so you end up taking 4-8 captures, which exponentially increases the potential to fail incorrectly. In essence these tests are too brittle and so not actually very useful, as they break too easily.
Given that doing very low level atomic checking seems to be unhelpful, let’s analyse what the actual process is, that a human developer uses to validate a page by eye.
When I look at a page against a design, I don’t compare pixel by pixel. I compare a higher level. First I look at the design. From the design I create a number of mental rules. In my head I create a list of all the different font variations, the different colors used and the rough layout. If the design has too many variations in these things, then it is inconsistent and hence bad user design, in which case I end up going back to the designers and asking for a higher level of standardisation. When we have this basic checklist of “design principles”, we can compare the font size, weight and face, compare colors, compare widths, heights and alignments to the implementation. This enables us to take a design and an implementation and quickly gauge at a high level whether it is likely to be correct.
Taking this principle changed the way I started thinking about unit testing CSS, what if we could formalise this set of design principles and turn them into a programmatic set of rules that we could test each page against?
For this, my experiment led me to create cssUnit, a framework for checking style consistency.
Like all software projects, not all processes are suitable for every situation, this is no exception. You will have to evaluate whether css unit testing is right for your project, the key factors I would take into account for this are, project lifespan, number of developers and size of site.
The scenarios in which cssUnit testing will be helpful are:
As well as being a tool to maintain quality - unit testing is also a way of communicating and distributing knowledge in a direct fashion, few developers will bother to spend the time reading the style guide, but many will learn the rules through failing tests.
cssUnit is not a number of things - I thought I would just mention the ones I did not mean it to be
Not cross-browser tested - although in principle it should be easy to make cross browser - it is not - not yet anyway - if it proves to be useful, then perhaps there is a case for making it cross-browser
Not beta - cssUnit is not by any means complete, and is as expressed before is more of an experiment, I have only coded for the scenarios I thought of, I’m sure there are better ways of doing this, but this is at least a starting point to explore how it might be done.
Not a service - lots of testing platforms have become services recently, but this is not currently my aim. There are many directions this could take, at the moment I’m not sure making it a service is the correct path.
Not easy - like all unit testing, cssUnit takes time to set up and implement in the beginning. The hope is that in the long term it saves you more time than it costs. It is also dependant on you having a strict style guide - with out standardisation in your design, cssUnit becomes useless.
Just a quick entry to point out something that I found out recently. I’ve long had the problem in IE7 where applying opacity to an element with a PNG image as a background or image using jQuery (or any other library) results in the transparent pixels turning black. It seems the ever robust IE7 engine has a bug (oh my god who would have guessed?), but with an accident and a bit of research I have come up with a work around.
Back in the days before JavaScript libraries existed a developer often had to write their own cross browser transparency functions, somewhat of a rite of passage I would imagine, at least it was for me.
Having written a few of these routines myself, I was pretty confident I knew how jQuery was achieving this effect cross browser. In standardised browsers (FF, Safari, Opera, Chrome etc.) one has just to use the opacity property (- it wasn’t always this way, back in the pre FF2 days one had to use the -moz-opacity property as well) but in IE you have to use one of the wondrous non-standard propriety filters, a prospect that is about as attractive as participating in a Jade Goody munging contest.
The IE filters are notoriously SHIT and behave in a sinuos fashion to anything you might try and do with them. But as mentioned previously, the combination of the opacity filter and a transparent PNG (8 or 32) has the marvellous side effect of turning any transparent pixels in to black, until the filter is reset. Like so:
So, I spent some time trawling the web for workable answers or solutions but none seemed to present themselves. But then it struck me that on the same site I was working on I’d already acheived the effect and it hadn’t broken on IE7. How was this possible? I set about creating some test pages to figure out exactly what was needed for it to work in IE7. I discovered three vital steps that need to be taken.
Then finally you will achieve a result like the following:
So that’s it, embrace the hacks and join me in the Microsoft hell of unmaintainable, bloated, bastardised semi opaque code. This development lark, It’s fun. Honest.