CSS Formatting Woes
Posted by John in CSS, Programming on November 4th, 2009
As much as I like to save some bandwidth here and there, going in to edit a stylesheet where each rule is on its own line can be a nightmare. I went in search of some CSS formatting tools to make life a little easier. (Because who wants to reformat 4000 lines of CSS by hand, right?).
Validness
It’s always a good idea to try and keep your CSS as valid as possible. On occasion you might need to put some hacks in there for IE6 or IE7 – if there are many, it’s probably a good idea to separate those out to stylesheets that are then loaded in with conditional comments.
To validate your CSS, head over to http://jigsaw.w3.org/css-validator/ – there you can point to a stylesheet URL, upload a file, or directly input CSS and have it validated.
Formatting
To format CSS you can use the “Clean CSS” service at http://www.cleancss.com/.
Input the CSS you want to format and choose from several options, hit submit, and voilà, out comes formatted CSS – it also lets you know the code changes that it made.
The options
From the dropdown select the type of formatting you want. For a production output you should probably choose “High (moderate readability, smaller size)”, if you want to make CSS more readable, use the “Low (higher readability)” option.
Unless you know what you’re doing – you should probably leave “Sort selectors” and “sort properties” unchecked, as these have the potential to break the cascade of styles in your stylesheet.
I personally prefer to keep the “Compress font-weight” option unchecked – (e.g. this changes font-weight:bold; to font-weight:700; doesn’t quite read the same).
What’s wrong with Outlook? – Tatham Oddie
It has been an interesting few weeks in the world of web standards for email.
The boys from Campaign Monitor executed a successful awareness campaign in the form of fixoutlook.org which rapidly racked up over 24,000 Tweets and overtook the Iran Election in Twitter’s trending topics. Unfortunately for all of us, it has been a case of message received – but not understood.
I build quite a few emails at work for a variety of clients, and time and time again I have to do some creative image slicing, and then build with nested tables in nested tables in nested tables, etc. just to get emails to work in Outlook 2007.
Building emails should be as easy as building a simple HTML page with some standard HTML and CSS. Since outlook 2007 uses the Microsoft Word rendering engine, email developers are now forced to write bad, bloated code to make sure that emails work correctly. Not only do we need to adjust our code, we need to adjust the designs as well, because guess what, Outlook 2007 (or rather the Microsoft Word rendering engine) has no support for background images.
There is a campaign over at fixoutlook.org – if you’re on Twitter, you can send a tweet to your account from there to help send a message to Microsoft.
Write less with Less to make more CSS
Posted by John in CSS, Programming on July 5th, 2009
Less is a CSS pre-processor that I came across a short while ago and there is quite a bit of buzz going around about it, including some discussion at Sitepoint about what is good about it, what really sucks about it, and so on.
After seeing some of the drawbacks, and the advantages of using Less, I’ve decided that it should be put through it’s paces and I’ll be trying to use it in a project in the near future so I can see if it will be a benefit.
A quick breakdown of what Less is
Less adds variables, mixins, operations and nested rules to CSS. This will enable us to treat our CSS a bit more like a programming language rather than a style descriptor language.
Collecting add-ons
Posted by John in Shared, Uncategorized on June 17th, 2009
Mozilla has recently re-vamped their addons site, and with it publicly released Collections.
Collections is an essentially an awesome way of grouping a bunch of add-ons for Firefox. You can then subscribe to these “Collections” and manage them using the “Add-on Collector” add-on for Firefox.
You can make your own collection or select one that’s already made filled with the add-ons of the author’s choice.
This is going to make installing all those add-ons on a fresh copy of Firefox just that much easier. You can use this for your own personal installation(s) of Firefox, but think also of the Sys Admins here, they can make a collection of default add-ons that they want all users in the organisation to have installed – handy, I think so.
At the moment you need a Mozilla account (you can register for free) to create collections and subscribe to them, you do not need an account to browse through the publicly available collections and download the add-ons within.
Naturally I couldn’t resist and I made a collection of Web Dev add-ons that I frequently use.
Klok your time
Posted by John in News, Programming on June 17th, 2009
I seem to always forget where I actually spend my time when I am working on a client’s website, and I’ve been looking around for decent time tracking software for a while – scribbling down numbers on a bit of paper just doesn’t cut it any more.
Recently, I stumbled across Klok. It is an Adobe AIR application which will run on Mac/Windows/Linux. Not only will it run everywhere, it’s also free. Bonus.
But what does it do?
Klok is a time tracking application. It allows you to enter projects, and sub projects/tasks within those. This is obviously a major plus over other time trackers that only allow you to enter a task and track time for that task. You can also enter comments for each time you’re tracking work on a task
Klok features a ‘Project View’ in which you have an overview of the project details and time entries. There is also ‘Week View’ – a calendar like view that allows you to get a nice visual representation of what you’ve worked on.
Sadly the reporting and exporting in Klok isn’t anything to get excited over, at the moment it only seems to be able to show a pie chart of projects in the root of the project list, exporting of weekly timesheets is really just what it says on the label, you can only see a timesheet for 1 week and export that to an Excel document. This is something being addressed in future versions.
For those of you keen to give it a try, I recommend the latest Beta (1.5.1 RC1.1) – it has both weekly and monthly timesheet exports.
http://klok.mcgraphix.com/klok/index.htm
Some new this and that
I’m in the process of actually designing and building a new website, for myself. One that I’m actually going to finish. I don’t know how many times I’ve had ideas, whims and other feelings of the like to start on my own site but never get around to actually finishing it.
The plan is to have 2 or 3 designs for the site – 1 of them is largely done already, 1 exists half in Photoshop, half in my head, and the last, so far only exists in my mind.
Read the rest of this entry »
1 line CSS Grid Framework
Posted by John in CSS, Programming on June 8th, 2009
This is the challenge of writing entire CSS layout system with one line CSS class.
I just wanted to prove how easy CSS can be, and with little imagination we can be build cool things.
via Carrer Blog: 1 line CSS Grid Framework.
I wouldn’t mind giving a simple grid framework like this a try, quite often we do have to deal with columns of similar widths. If only designers would follow some simple rules, like actually making sure that they have everything line up with a grid.
Advanced docking using jQuery
Posted by John in JavaScript, Programming on June 8th, 2009
Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC.
via Advanced docking using jQuery.
I wouldn’t mind using something like this on a website sometime. On the right site, this could be an invaluable tool.
jQuery Highlight Plugin | bartaz @ GitHub
Posted by John in JavaScript, Programming on June 8th, 2009
It will probably not be a big surprise that jQuery Highlight plugin can be used to highlight pieces of text on a page. It’s based on great Highlight plugin by Johann Burkard. To be honest most of the credit should go to him, as all I did was a little refactoring and customisation (so blame me if I broke something).
via jQuery Highlight Plugin | bartaz @ GitHub.
Prepare for Automatic Update distribution of IE8
Finally, this is what many of us web developers have been waiting for (again). Over the next few weeks and months, Internet Explorer 8 will be pushed out over Automatic Updates/Windows Updates to upgrade users running Internet Explorer 6 or 7.
Oh, and just like Internet Explorer 7, 8 is also available completely free, without the requirement for Windows Genuine Advantage (WGA). This means that everyone running the latest versions of Windows XP, Vista and Server 2003/8 will be able to update!
Starting on or about the third week of April, users still running IE6 or IE7 on Windows XP, Windows Vista, Windows Server 2003, or Windows Server 2008 will get will get a notification through Automatic Update about IE8. This rollout will start with a narrow audience and expand over time to the entire user base. On Windows XP and Server 2003, the update will be High-Priority. On Windows Vista and Server 2008 it will be Important.
via IEBlog : Prepare for Automatic Update distribution of IE8.
Recent Comments