see whatever…

jump to menu

April 20, 2014

Windows program scaling on High-DPI monitors

Filed under: Programming,Win8 — see @ 2:01 pm

There are more and more highdpi screens coming. Laptops like the Yoga 2 (3200×1800 on 13″) or highdpi monitors from Asus, Dell, etc. This is a challenge for the OS as well as programs which have to cope with this. Problems like blurring or tiny menus, text or icons are still very common. Also different operating systems have a different degree of “support” for highdpi.

Apple had their called “Retina” displays earlier, so the OS and third party programs had more time to adjust to the challenges of highdpi display. It took even companies like Adobe some time to adjust but their  Adobe Suite (Photoshop, Illustrator etc) seems to work on “Retina” on OS-X now. There still seem to be some niggles here and there but overall the situation is not that bad.

On Windows the situation is still a bit worse, partly as highdpi devices came later and so are not as common (yet).

So just for myself I tried to find out if the stuff I have installed (not necessarily use ;) on my PC does work or not. I do think older versions of Windows (or OS-X) cannot be be expected to work well so only tested in the current version of Windows which at this day is 8.1 Update 1.

Testing

As I do not have a highdpi monitor yet I adjusted the “Make text and other items larger or smaller” in the Screen Resolution control panel to the highest possible scaling on my machine. As this would be the same settings to adjust on a highdpi monitor I think this should emulate the situation on a real screen sufficiently.

Following the list of programs I tested in ordered by how good they work highdpi. It is quite a subjective and incomplete list of course…

Programs that are OK and work well

  • Windows own things like the File Explorer, CMD shell, and most other Desktop helpers like Task Manager, Control Panel, Defender, Notepad, Snipping Tool, WordPad, etc work well
  • Bvckup 2 (beta 65)
  • FileZilla
  • Firefox (28) – a few icons in menus are blurred but everything else is fine
  • IE (11)
  • Microsoft Movie Maker
  • NotePad++ – menu icons are pixelated and ugly (as always) but appropriately large
  • Office 2013 – not sure if the setup bug for advanced account is fixed yet but that would be a very minor niggle if still present at all
  • Paint (ok, I know…)
  • SourceTree
  • TunnelBear – images are not sharp but UI is
  • Visual Studio 2013 – menu icons could be sharper but else great
  • WebMatrix 3 – menu icons could be sharper but else great
  • Windows Phone App for Desktop (Metro version works anyway)
  • Metro apps (including PDF Viewer and Adobes own Reader, CodeWriter etc)

OKish but with some problems

  • cmder – font-size is adjustable so will work but tabs are small
  • InkScape 0.48.2 – if disabling scaling it actually scales(!) well except some icons so bad
  • Scite – icon bar too small but everything else looks good
  • VLC – icon bar too small but all else good

Blurred but usable

  • Windows helper stuff: Computer Management, Device Manager, Disk Management, Event Viewer, Hyper-V Manager – actally this is a bit surprising but these are all not used very often, maybe except Hyper-V. I did not test any VMs yet though, only the manager itself it blurry
  • Baregrep
  • dbPowerAmp
  • Fiddler 2
  • KeyPass2
  • Notepad! – unexpectedly as this seems quite a new and modern app
  • SE-Explorer
  • Sync-Toy
  • WinMerge
  • XAMPP (Control Panel)

Blurred and unusable

  • Adobe Photoshop 6.0(!) – not small but blurs even the files so basically useless. Even the newest Adobe Suite CC is AFAIK not really good (not blurred but too small, not tested myself though)
  • Calipers (very old 0.x? but free version) – even with disabled scaling in Properties does not work
  • Chrome 34 – I think Google is working on it but it is not there yet, the alternative browsers are though (see above)
  • GIFcam – records wrong part of screen

Some conclusions

I guess just working with text or code is fine on Windows already. You might have to switch to another editor but most seem fine.

Working with graphics is another thing. Sadly programs like the Adobe Suite need some work before becoming usable. In Adobes case this is unexcusable, Inkscape being Open Source and with much less resources is annoying but maybe understandable. (UPDATE: Actually Inkscape is not so bad if you manually disable scaling in compatibility settings for the program). I guess there might be alternatives that work better but I have not looked into that yet.

In general the situation can only get better so not all is lost. I actually read and heard from people who actually used a highdpi screen that the much improved reading experience may already justify the expense of such a display. I guess I for myself wait a bit but am very tempted and am sure my next desktop monitor will be highdpi ;)

If you have any additions of programs that work or work not please add them in the comments, would be very interesting. Thanks!

November 19, 2012

Windows 8

Filed under: Usability,Win8 — see @ 11:24 pm

I wanted to write a bit about Windows 8 for quite some time now but never came round actually doing it. While reading Nielsens Alertbox on Windows 8 I remembered and actually have a reason now to write something, mainly to address some points in Nielsens rant – ok, it is none ;) but some stuff in general too.

 

I have noticed quite a few reactions to Windows 8 until now:

In the beginning (maybe end of 2011/beginning of 2012) most were hostile, later on hate came to that…

Magazines like c’t magazine (maybe one of the leading german computer magazines?) printed pages over pages of basically rants about a system they never even tried properly (as it was not finished at the time). I don’t want to go into details but in my humble opinion they seemed kinda biased at the time. Everything a certain other company did (even the very minor and even to long time OS-X users lame Mountain Lion update) was great, everything MS did was not so.
Strangely enough this has changed in the latest issues. They now are critical as they are supposed to be (and which in one reason I like the mag) but not “ranty” in the sense of almost unfair and biased anymore.Actually Windows 8 seemed to have grown on them?

BTW, haters are to be seen elsewhere too of course. ZDnet seems to have a lot of writers on anything MS does and some like Win8, some just hate it. (Commenting on all the writers of all the online mags and blogs and if all the stuff they write is actually just for the sake of writing anything is another topic ;) .

Even reactions of people I know were partly “hate”. Ironically enough mostly from Windows users. Mac users were actually quite open and somehow interested (not that they would switch but still).

Other reactions by some people I know were simply “ignorant” – not in a negative way though.
I myself have not really  looked into any upcoming version of Windows until at least Service Pack 1 was out.
That is not since Windows 95 ;)
Exception was Windows 7 to which I upgraded almost immediately (not that I disliked Vista much, but Win7 seemed and was mature enough).

And then Windows 8. I got a Windows Phone in 2011 and immediately liked the UI. So guess because of this excitement actually installed the first version of Win8 I could lay my hands on (Consumer Preview in about April 2011?) in dual boot with Windows 7 on my main PC. I did not use CR that much (CR was an early preview) but the later version from I think May/June I gradually used more and more until with the general availability of the RTM (actually even earlier) I hardly ever booted into Windows 7 at all anymore.
So I guess I have used Windows 8 for almost 6 months now. Not exclusively as I still used Win7 (almost daily) at work but still. I actually updated to Win8 at work now too though ;)

 

So I think I have a bit of experience with this new Windows. And NEW it is. So I thought I comment a bit on the issues Nielsen writes about in his Alertbox.

  1.  The double nature of Win8 is jarring at the beginning
    True. At the beginning…
  2. Lack of multiple Windows?
    Desktop still works with multiple windows, just as before (more on that later). And actually there are at least two possible windows in Modern-UI. But true, it might not be the easiest thing to do this. But especially compared to e.g. iPad/Android tablets this is a great and welcome improvement (even if maybe used by more advanced users only).
    BTW, browser apps actually almost only have a single “screen” and not a lot of people complain about this. There would be the option of multiple browser windows at the same time, but almost no one I know uses this setup. There also are tabs in most browsers, but one could simply see multitasking on tablet OSs as this.
  3. Flat style:
    Maybe Nielsen is right, the “extreme flat” is basically a reaction to the extreme skeuomorphic style of especially iOS and maybe both are just too extreme. OTOH, I think MS did not have the chance to go the middle ground… And actually partly think this IS a matter of taste and actually I like it a lot :)
  4. low information density:
    True, but not necessarily bad. And mostly dependent on the app…
  5. Overly live tiles:
    Definitely true. But this totally depends on the app and the live tile it provides. Of course most app providers go over the top (like every website goes over the top with the homepage ;) and maybe MS should at least point this out during app submission (they should not reject apps for this, there are other companies whose name should not be spelled out ;) who would do this but I do hope MS does not). OTOH you can always disable a live tile, again, maybe an average user does not know this or won’t bother.
    AND: I think live tiles are generally the best thing since sliced bread. Ok, ok, not really ;) but still they are verrry useful (if done right like Nielsen points out, e.g. apps like Calendar, Mail etc) and are a big improvement over static icon-filled screens with no real value. I guess there always will be the typical offender with a massively annoying livetile but the same could be said for icons. I think tiles are simply the next evolution of app icons.
    Maybe comparable to static images vs video or a static JPG vs GIF. For some purposes the static version is better (and should be used static) but for some purposes (and especially with all the communication stuff like messaging services, email, social stuff etc) a live tile is just the thing to do (again, if used properly). With tiles you have the choice.
  6. Charms:
    True, they are hidden. A friend of mine did not even find the search in the Store app. And it took me some time to find out how to shut down my PC or print from the Mail app. But actually the charms are very useful once properly understood. I especially like the “Share” charm which makes better (than simple copy&paste) inter-app communicationpossible at all.True, maybe search and esp Devices (used e.g. for printing) need getting used to. But once they are, they are much faster and easier to use than app specific stuff.
    Guess a bit similar to websites where certain things have become almost the norm like the logo in the top left, search in the top right for the exact same reason they are the way now in the Charms bar. And the difference of a website or a single app to an OS feature is that people will get used to the feature just because no app can do different (unlike a website which may screw up almost any best practice – sorry for the use of this terrible term ;)
  7. Gestures:
    Yes, some are complicated. The most complicated (open tasks view) has two simplifications though: Use ALT-TAB if you have a keyboard. Use swipe-in from the left to quickly switch between all open apps.Actually multitasking on touch seems generally hard. Android now has an explicit button for it (copped out ;) . iOS double click and endlessly swipe through a lot of icons (no app preview) is actually worse.So I guess gestures on Win8 could be improved on and maybe we see this in Windows 9 or even in “Blue” already? But again, once you used to the gestures, they are real time savers (on touch at least).
  8. Terrible for PCs:
    Actually I think this is not true. Windows 8 could simply be used like Windows 7. Use the desktop only, maybe even install a start button replacement app (you won’t need one, just try without).
    This is actually the point where I think Nielsen is missing something. Maybe some Modern-UI apps are difficult to use on a non-touch PC. Yes, but there is always a desktop replacement. Windows 7 was complete(!) and Win8 did actually not remove anything from it (again, forget that start button!).Also, maybe people should try a touch PC. I am already happy without one but see e.g. Jeff Atwood’s interesting posts about touch laptops/replacement
  9. One Windows Everywhere:
    Nielsen says: “wrong”. I don’t think so. Just ignoring the fact MS could not simply have developed a completely new and totally unrelated OS (like Apple did with iOS in 2007) now, no one including me would have been interested.
    Nielsen totally ignores the interoperability aspect (or would the term network effect?) of different devices. The web was and still is so successful because it runs everywhere. And yes, the web also has a lot of usability problems, also and maybe because it runs everywhere…E.g. synchronization seems one of the most interesting and also hardest problems and having the same OS (or at least very similar, see Win8 vs WinRT) is a step towards it. And yes Windows 8 is far from perfect. But the direction is exactly right and a needed innovation.

Maybe to summarize a bit.

I think Windows 8 is at least as useful and productive as Windows 7. An average user maybe needs a week to come up to speed with it, but then would even be more productive than with Windows 7 (Windows 8 has quite a few improvement like improved startup time, native opening of a VM or ISO images which is very useful, an improved file explorer including improved libraries and even slightly improved taskbar, etc, etc). The average user probably won’t use much of modern UI (on a normal non-touch PC) but will use the desktop maybe for 95% of the time.
The new Start screen is in this scenario just a glorified Start menu (if using desktop apps only there would even be no live tiles but just program shortcuts just like in Windows 7).

But Windows 8 does add some stuff too and there are already quite useful and impressive Modern-UI apps which show even with keyboard and mouse new ways for programs.

On a touch PC (laptop, all-in-one, touch-monitor or whatever) Windows 8 mostly uses the same programs and apps, but more importantly the same services etc. And compared to other tablet OSs, Windows 8 usability is IMHO already better, just new and needs more time getting used to. I think like Windows Phone the Windows 8 UI is not learned nor liked in 5 minutes. It gets appreciated as you use it. And an OS does not need to be learned in 5 minutes if it is useful in the long run. (For if an OS needs to be liked in 5 minutes is  maybe a problem for marketing, but that is another topic altogether…).

Windows 8 with touch is even better. Or maybe a hybrid laptop is the best machine.

Anyway, there is no real reason not to use Windows 8. The very average user won’t upgrade anyway (he never does) but when getting a new PC/machine/laptop/device Windows 8 is an improvement over Windows 7 even a very average user will be happy with it I believe.

 

October 3, 2012

Touch handling in Windows 8 JS app

Filed under: CSS,HTML5,Javascript,Win8 — see @ 9:12 pm

Documentation for handling touch in Windows 8 style (Metro ;) apps with Javascript is not really sparse but nevertheless or maybe because of that a total mess. Lots of decriptions of classes (random links…),  some blog posts, a few samples which all seem very complicated and a few (better) pointers can even be found at StackOverflow (where else ;) .

Guess as until now I only used wrapper libs like Zepto or a few jQuery plugins for mobile touch handling (mostly iOS) which abstract the hard parts away I expected the code to handle a simple swipe left/right to be simpler.

After playing around a few hours, being lost in the depths of the Microsoft docs I came up with this:

 // define GestureRecognizer
 var recognizer = new Windows.UI.Input.GestureRecognizer();
 recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationTranslateX
 recognizer.addEventListener('manipulationcompleted', function (e) {
   var dx = e.cumulative.translation.x
   // **actually do something, left or right defined by dx > 0 or < 0**
 });

 // actual element which feeds the GestureRecognizer
 var processUp = function (args) {
   try {
     recognizer.processUpEvent(args.currentPoint);
   }
     catch (e) { } // translateYfails ?!
   }
 var swiper = document.querySelector('.swipearea')
 swiper.addEventListener('MSPointerDown', function (args) {
   try {
     recognizer.processDownEvent(args.currentPoint);
   }
     catch (e) { } // translateYfails ?!
   }, false);
 swiper.addEventListener('MSPointerMove', function (args) {
   try {
     recognizer.processMoveEvents(args.intermediatePoints);
   }
     catch (e) { } // translateYfails ?!
   }, false);
 swiper.addEventListener('MSPointerUp', processUp, false);
 swiper.addEventListener('MSPointerCancel', processUp, false);

All in all and in the end almost logical. You preprare a GestureRecognizer and feed it with events from a DOM element. This actually seems capable of doing lots of much more advanced stuff but for a simple swipe left/right gesture seems almost overkill. I wonder if there is something simpler?

In addition I do not understand why the recognizer feeding methods like recognizer.processUpEvent do actually raise an exception if in the above case a up/down swipe is used. One reason is that the element actually has a normal overflow, so the normal scrolling works there. This is the reason the recognizer is set up to only actually handle manipulationTranslateX gestures. But why the additional exceptions?

Anyway, the above seems to work (at least on my desktop and the simulator with both Mouse and BasicTouch mode). Not the simple stuff I have hoped for but maybe I did it all too complicated? Any hints are very much appreciated :)

August 7, 2010

HTML5 canvas API chainable (jQuery like)

Filed under: HTML5,Javascript — see @ 7:01 pm

While playing around with HTML5 canvas (with jQuery on the page) I noticed the rather tedious writing of

canvas = $('canvas')
ctx canvas.get(0).getContext('2d')
ctx.dothis...
ctx.dothat...

So I thought a jQuery like chaining syntax would be nice. Only first try but it seems actually quite simple. Code I came up with:

function jqContext(canvas) {
	function jqContext(canvas) {
	/* Canvas 2D Context wrapper allowing jQuery like chaining */
	var self = this
	self.context = canvas.get(0).getContext('2d')
	
	// wrap properties of context chainable, without argument
    // returning current value, with argument setting value
	$(['fillStyle'
	   ,'font'
	   ,'strokeStyle'
	   ,'textAlign' ,'textBaseline'
	   ,'mozImageSmoothingEnabled'
	]).each(function() {
		 var property = this
		 self[property] = function(a) {
		  	 if (a != undefined) {
		 		 self.context[property] = a
				 return self 
			 } else {
				 return self.context[property]
			 }
		 }
	})
	// wrap methods of context
	$(['arc',
	   'beginPath', 'closePath'
	   ,'drawImage' //?
	   ,'fillText', 'strokeText'
	   ,'lineTo'
	   ,'moveTo',
	   ,'fillRect', 'strokeRect', 'clearRect'
	   ,'stroke'
	]).each(function() {
	    var method = this
	    self[method] = function() {
		    self.context[method].apply(self.context, arguments)
		    return self			
	    }
    })
	// wrap methods of context NOT chainable
	$(['createLinearGradient'
	]).each(function() {
	    var method = this
	    self[method] = function() {
		    return self.context[method].apply(self.context, arguments)
	    }
    })
}

So now I can write:

c = $('<canvas></canvas>').appendTo('body')
c.css({
	width: 800,
	height: 400,
	border: '1px solid #ccc'
})

x = new jqContext(c)
x
.strokeStyle('#f00')
.strokeRect(0,0, 100, 100)
.fillRect(40,50, 100, 100)
.clearRect(70,50, 80, 100)

Don’t know if worth the effort and only a test (not complete at all obviously) but fun ;)

UPDATE: Improved the class a bit, calling a property wrapper with no value returns the current value now, also added a few more methods…

October 8, 2009

cssutils 0.9.6final release and …

Filed under: CSS,cssutils,Python — see @ 12:53 pm

Yesterday I finally made a final release of cssutils after five alpha and four beta releases in about 10 months. This shows I sadly could not spend much time on it but actually this release has some nice stuff I think:

  • serializing is much improved (like 0.0px gets 0 now and so on)
  • some IE only values are at least parsable (alpha(…), expression(…)) and so these sheets can be minified with cssutils now
  • a complete rewrite of CSSValues (which still need a lot of work though)
  • Jython and GAE compatibility
  • added extensible CSS profiles (even someone used this for a start of a SVG profile)
  • implemented @font-face and http://www.w3.org/TR/css3-fonts/ spec (not complete probably but at least all stuff should be parsable now)
  • lots of both reported and internal bugfixes
  • lots of minor improvements…

Maybe I did this release now mainly because I wanted to start a little bit of new stuff and get this “out of the way”. Also a single (final) release in a year is the minimum I guess.

For 0.9.7 I plan some new stuff. For a long time there has been a big discussion about CSS variables and some people think they are even evil (to which I partly agree). On the other hand there seem to be quite a few CSS preprocessors (lesscss, hss, clevercss, etc) springing up so there seem to be a certain need for it. Also there is the CSS Variables spec which I think is even implemented in Webkit. So I thought why not add something like this to cssutils. People need not use it but if they want to, why not put it in this lib too ;)

So I guess I will implement the CSS Variables spec and maybe something like mix-in classes which I guess would be an extension to this and also seem to be quite useful.

A simple WSGI based CSS handler which would resolve both – variables and mix-ins – on the server would be nice. In the past I mainly used web.py but maybe I’ll try out a few other “mini-frameworks” (not sure if they like being called that but in lack of a better name) like e.g. werkzeug or bobo. If you have any preferences or suggestion please write in the comments (I prefer smaller frameworks and not bigger ones like Django for now but the results would certainly be very easily adaptable).

In addition to this (which may or may not lead to something) CSSValues still have to be reworked.

Also there is going quite a bit in the CSS world currently (the mailing list has become very lively in the last one or two years). So I guess I pick a few things which I think may be useful in the near future (and also will not take too much time to implement :) and add them to the next release.

July 6, 2009

@media 2009

Filed under: Design,Usability,Web — see @ 9:30 pm

I have been to @media 2009 in London last week (or more exactly the week before). Again after @media AJAX 2007 a really, really good conference for web development. I did not except so much design related stuff, speakers nor attendants but actually that was a true bonus. Talks I expected nothing from were among the best (interesting, inspiring and entertaining). The 1st day was more design related with the second  with the focus more on technical stuff including usability etc.

Following just a few links to the presentations I could find online. Sadly not all seem to be available (or I am just not search-capable enough :) .

  • Andy Clark‘s “Keynote” which was really good (and presenting a workflow I strongly agree with, have agreed with for years and sometimes are even able to promote and use). Unfortunately I cannot find the slides…
  • Simon Collison on Process. Even transcribes are available: http://www.colly.com/comments/media2009_the_process_toolbox/

    http://erskinelabs.com/post/the-process-toolbox-part-one-project-backbone

    http://erskinelabs.com/post/the-process-toolbox-part-two-collaboration

  • Jon Hicks on Icon design (and much more!) The most surprising and one of the best talks for me. Not just “fancy icons” as I expected at first but much much more interesting stuff, sorry!
  • Dan Rubin on Designing Virtual Realism (actually not what I expected but certainly not bad)
  • Mark Boulton on Typography/Fonts for the Web which was really good and true. Mark speaks as engaged and inspiring as hardly anyone I heard before. Sadly no presentation found yet :(
  • Jason Santa Maria on Thinking Small (for website design). Nice (not as good as his designs which is no criticism because that would make him about  the best speaker ever…) but no slides either yet :(
  • Douglas Crockford on Quality most which (the lack of) was (sadly) too true (at least from my limited experience).
  • Chris Wilson on the Web Platform which unexpectedly (for me) was also about typography and fonts on the web. Good talk! No slides found yet though :(
  • Molly Holzschlag on HTML5. Shown was e.g this and a jolly talks with HTML5 itself was presented too. I expected an a bit more agressive talk after that post of her a while ago (can’t find it anymore?) but it was interesting new material about HTML5 after all. I just cannot find any more material of the talk itself…
  • Andy Budd on Guerilla Usability Testing: Good but probably as I have seen and experience a lot in this area nothing really new for me here. But again no slides found…
  • Robin Christopherson who himself is blind gave a talk on new stuff for a more accessible web. Very interesting and for anyone never seen a blind person using a laptop a revelation in itself. Definitely something I need to look more into even as I know quite a bit in this area already…

All in all a very broad spectrum of topics but just deep enough.  And therefore very recommended!

If anyone knows where to find the missing slides please let me know or put it in the comments. Very appreciated.

March 8, 2009

property filter with cssutils

Filed under: cssutils — see @ 6:22 pm

cssutils 0.9.6a2 has just been released and the main new feature probably is custom property profiles. You might want to filter any given stylesheet on certain properties. This might be predefined ones (like CSS 2 properties like e.g. “color”)  or predefined ones but with a limited set of possible values or even custom properties with custom values.

Example

Following a simple example how to define a custom profile and filter any given sheet (at least style declaration properties, filtering of certain @rules is not shown):

import cssutils
# remove ALL predefined property profiles
cssutils.profile.removeProfile(all=True)

# add your custom profile, {num} is defined in Profile and always available
macros = {'myvalue': 'a|b|c'}
props = {'abc': '{myvalue}|{num}', 'color': 'red|blue'}
cssutils.profile.addProfile('my-profile', props, macros)

# keep only valid properties (valid in given profile)
cssutils.ser.prefs.validOnly = True

print cssutils.parseString('''a {
    color: green;
    color: red;
    abc: 1;
    abc: b;
    abc: 1 a
}''').cssText

results in (some messages may be doubled – not shown here – because messages are output on parsing AND during serializing):

ERROR   Property: Invalid value for "my-profile" property: green [2:9: color]
ERROR   Property: Invalid value for "my-profile" property: 1 a [6:9: abc]
a {
    color: red;
    abc: 1;
    abc: b;
    }

How to

To define your custom property profile you just need to define the properties with the possible values in a standard dictionary. Each key is a property name, each value a regular expression defining valid values. Actually the value is not (yet) a regular regular expression but may contain macros which may be used to simplify the definitions. Each macro is defined with enclosing {} and must start with [a-z]. You may define your own macros (“myvalue” in the above example) or you may use predefined macros. The basic ones are defined in cssutils.profile directly. To get a list use:

import cssutils, pprint
print "TOKEN_MACROS"
pprint.pprint(cssutils.profile._TOKEN_MACROS)
print "MACROS"
pprint.pprint(cssutils.profile._MACROS)

resulting currently in:

TOKEN_MACROS
{'escape': '{unicode}|\\\\[ -~\\200-\\777]',
 'ident': '[-]?{nmstart}{nmchar}*',
 'int': '[-]?\\d+',
 'name': '{nmchar}+',
 'nl': '\\n|\\r\\n|\\r|\\f',
 'nmchar': '[\\w-]|{nonascii}|{escape}',
 'nmstart': '[_a-z]|{nonascii}|{escape}',
 'nonascii': '[^\\0-\\177]',
 'num': '[-]?\\d+|[-]?\\d*\\.\\d+',
 'number': '{num}',
 'string': '{string1}|{string2}',
 'string1': '"(\\\\\\"|[^\\"])*"',
 'string2': "'(\\\\\\'|[^\\'])*'",
 'unicode': '\\\\[0-9a-f]{1,6}(\\r\\n|[ \\n\\r\\t\\f])?',
 'uri': 'url\\({w}({string}|(\\\\\\)|[^\\)])+){w}\\)',
 'w': '\\s*'}
MACROS
{'angle': '0|{num}(deg|grad|rad)',
 'color': '{namedcolor}|{hexcolor}|{rgbcolor}|{uicolor}',
 'frequency': '0|{num}k?Hz',
 'hexcolor': '#[0-9a-f]{3}|#[0-9a-f]{6}',
 'integer': '{int}',
 'length': '0|{num}(em|ex|px|in|cm|mm|pt|pc)',
 'namedcolor': '(transparent|orange|maroon|red|orange|yellow|olive|purple|fuchsi
a|white|lime|green|navy|blue|aqua|teal|black|silver|gray)',
 'percentage': '{num}%',
 'rgbcolor': 'rgb\\({w}{int}{w},{w}{int}{w},{w}{int}{w}\\)|rgb\\({w}{num}%{w},{w
}{num}%{w},{w}{num}%{w}\\)',
 'time': '0|{num}m?s',
 'uicolor': '(ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonFace|Butt
onHighlight|ButtonShadow|ButtonText|CaptionText|GrayText|Highlight|HighlightText
|InactiveBorder|InactiveCaption|InactiveCaptionText|InfoBackground|InfoText|Menu
|MenuText|Scrollbar|ThreeDDarkShadow|ThreeDFace|ThreeDHighlight|ThreeDLightShado
w|ThreeDShadow|Window|WindowFrame|WindowText)'}

You may also use any macro defined in the predefined profiles. As these may use other macros all have to be added (in the following example the “‘identifier” macro):

from cssutils.profiles import macros as predef
from cssutils import profile
macros = {'my-font': predef[profile.CSS_LEVEL_2]['family-name'],
          'identifier': predef[profile.CSS_LEVEL_2]['identifier']}
props = {'f': '{my-font}'}
cssutils.profile.addProfile('my-font-profile', props, macros)
print cssutils.parseString('''a {
    f: 1; /* 1 is invalid! */
    f: Arial;
}''').cssText

resulting in:

ERROR   Property: Invalid value for "my-profile2" property: 1 [2:9: f]
a {
    /* 1 is invalid! */
    f: Arial
    }

I hope this does not feel to complicate… If you have any suggestions or questions please try the cssutils Google Group.

December 26, 2008

combine and minify CSS

Filed under: CSS,cssutils — Tags: , , — see @ 12:55 pm

I have been working on minifying CSS for quite some time now and had written a simple web.py based CSS handler which does exactly that. Actually it simply uses the minify option of cssutils

Additionally the handler does combine all imported stylesheets of a given proxy sheet into a single one. Nice for development as you can split sheets into as many as you like but deploy only one. So you may have the following stylesheet style.css:

/* proxy sheet */
@import "basics.cs";
@import "layout.css";
@import "forms.css";
/* etc... */

(I normally separate styles into something similar).A given HTML page always references the single stylesheet style.css which would even work without a combinator as @imports will be loaded by the browser anyway. But for deployment or when using the simple combinator handler style.css will contain all rules from all imported sheets resulting in only a single HTTP request. If additionally minified after combination the savings on load time in most cases is substantial.

For the next release of cssutils I added a combinator function to cssutils itself:

proxysheet = cssutils.parseFile(PATH_TO_CSS) # or use parseUrl etc
combinedsheet = cssutils.resolveImports(proxysheet)
cssutils.ser.prefs.useMinified()
print combinedsheet.cssText

Based on this I thought it would be nice to have a service which does just that, resolve all imports in a given sheet, minify it and return it. So I started the CSS Minifier at GoogleAppEngine (GAE). It has a basic frontend where you enter an URL, may optionally select advanced options (for now the error level below which errors are simply swallowed, the target encoding which may currently be UTF-8 or ASCII and the option if the imports should actually be resolved).

Additionally it may be used as a simple service which returns a combined and minified sheet or in case of any errors a HTTP 400 BAD REQUEST with the error log.

The only problem on GAE was that it prevents usage of urllib/urllib2 to actually fetch the content of URLs. But it has it’s own API for that so no big problem to rewrite the fetching code. For the next cssutils release I actually added the code for GAE into cssutils itself. If cssutils thinks it runs on GAE it uses the GAE specific fetcher code, else urllib2 as before.

To detect if a script is running on GAE for now I try to “import google.appengine”. Not quite sure if that is enough but for now it seems to work.

Anyway, hope this service may be useful.

October 16, 2008

CSS Systems

Filed under: CSS — see @ 10:28 pm

via Isotoma found Natalie Downe’s CSS Systems, some thoughts about it:

  • a “system” for better communication for the end user (in most cases another developer) is a good and valid point
  • ordering (#17) and grouping (#18) of different style “areas” is mostly on what I would agree on.
  • the term helper classes (#18) for e.g. forms is great. I guess I did this unintentionally anyway but terming it this way is great
  • during the whole presentation (it is a PDF from a pres.) there is lots of “I like” or “I don’t like”. It seems CSS has quite some areas which are a matter of taste (and it seems my taste differs in more than one area…)
  • Using CSSEdit on Mac (which I don’t know as I do not work on Mac) seems to influence how you write your styles too. I normally use Aptana with a custom helper script (server side) which allows working in more than one file but get as an end result a single CSS file (to cut down HTTP requests)
  • Some of the things I do like (but not Natalie apparently):
  • IE specific sheets verses CSS Hacks: I prefer the hacks as IE condiditional comments require:
  • more than one sheet with more than one HTTP request PLUS maintainance problems with styles littered over several sheets (hacks keep related styles together). I do use valid hacks only though and try to minimize them too which normally is possible with most designs to develop HTML + CSS for
  • “Selector based indentation” (#44): This is actually something I do quite often. Not for everything but for the styles Natalie would put into the area of “page structure” (the layout I guess) and “page components” (some say “modules”). The general layout (e.g. 2 column-container with a left and and right column in it) seems a perfect fit for indentation. As this general layout is mostly quite simple (as it is a skeleton only) and stable hopefully ;) (if not the HTML and there for CSS has to change substancitally anyway) I don’t see a problem of maintainance here. Also as page componens/modules are normally not really that long (I find for most designs and therefor also page modules the HTML is quite simple and therefor the CSS mostly too) and are by definition self-contained (a module…) indenting there is a helpful way to make the CSS more readable. If you factor out helper classes (e.g. for a specific kind of link or headline or list etc) these groups become even smaller so indenting makes these even more useful.
    If you use CSSEdit this may be different but it seems CSSEdit does show something like an improved version of Aptanas “Outline” which I do not find very helpful anyway so guess CSSEdit would not help me much either (again a position of tool and taste)
  • Maybe indentation also is a matter of what programming languages you use? I could even live with a CSS without any curly braces just defining declaration blocks by indentation. But that would be a Python programmers wish (actually there is a script which allows you just this but for that I am more a HTML/CSS than a Python guy ;) ). But the same as Java programmers seem to hate indentation with a meaning in Python some people seem to ignore indentation in CSS as a help for adding addiotional information/context
  • Class instead of element name selectors: Indentation makes most sense if you have a self-contained module with selectors mostly using element names and not classes (at least not module specific classes). E.g.:
  • .download {}
      .download h2 {}
      .download ul {}
        .download li a {}
        .download li .specific-helper-links-extended-here {}
  • this way you minimize the amount of classes needed altogether (yes you need to keep track when e.g. changing the “h2″ to an “h3″ but if you change the HTML for this case the whole structure where this module is used changes so you should be aware of the anyway. But I am not dogmatic here, you may still use a class “.header”. If you are worried to use “ol” instead of “ul” you probably will be better of styling the “li” anyway) [but I am drifting off...]
  • I do agree on to think about “what” to style and not “where” (#44) it will be (semantically on the module and not the single HTML element level of course so this is not really an argument against indentations of related style declarations IMHO). Anyway, the CSS classes reflect this in their “semantic” naming as a result. Sometimes there may be a problem here though. For designs not being stable yet (but the CSS to be done nevertheless, deadline ACK!) but also for websites running a long time and being extended/changed etc,  sometimes finding a proper and longlived name is sometimes really difficult. Especially if you get a design, start trying to find related modules and their respective (class) “names” but then the design uses just the same before defined modules for sometings totally different or the actual client puts totally different content in these the semantic names are actually totally wrong…
  • Sandboxing (#47): I agree on this which seems to contradict my point made about indentation. But in my experience most people simply try to be too clever (and therefor complicated) or sometimes even too bureaucratic. Simplifying the CSS (leave out any not needed selector part) sometimes make a sheet not just dramatically shorter and maintainable but also
  • style leaking by keeping the element name with a class it maybe ok for helper classes but to page components (which I would equal to modules – not sure now if Natalie actually meant this) I find an adding of a module class (above example “.download”) sufficient.
  • “height” being evil I strongly agree on…
  • 2 points I think are missing:
  • #id versus .class: I only use IDs for tying label and form elements together and anchors so normally NOT for CSS styling at all (maybe for Javascript enhancements but even then hardly). You mess up your cascade and also you never know if you may use a style declaration again (which you can’t in case it is an ID without duplication the style declaration OR adding another ID…)
  • Once you use “!important” you are lost. Never use “!important” except maybe for print styles or even more-maybe for IE bug fixing but you have to be very careful…

August 2, 2008

lost mail…

Filed under: Death,Web — see @ 1:53 pm

despite my freudian misspelling of mail (male ;) I lost all mail which I got on friday August 1…
Thunderbird got confused while handline over 500 of “:o) ” referred emails and simply seems to have swallowed all still in my inbox. Very annoying.

Luckily I don’t too many really important emails (hopefully I do no offend anyone with this statement ;) but please resend any mails you may think I should have read or answered (but did not). Thanks a lot!

Older Posts »

Powered by WordPress