see whatever…

jump to menu

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.

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!

July 30, 2008

cssutils 0.9.5 final…

Filed under: CSS,cssutils — see @ 2:25 pm

After about 6 months of development 0.9.5 of cssutils is released as a final version. The last final version has been 0.6 …

Not that final means perfect but at least I tested everything, the lib itself, the scripts which have been broken in some alpha and beta releases and also the examples on the website which have been changed quite a bit. There still are quite a few areas where I suspect problems but there has to be a release at some point ;)

Anyway a release means starting a new one. I guess I have to improve the basic property handling. New values have been added to CSS2.1, CSS3 modules can be added (especially the Color Module which is almost a recommendation).

But I think I do look into other small projects first as I have been concentrating on cssutils in my spare time for quite some time now…

July 14, 2008

cssutils 0.9.5 soon

Filed under: CSS,cssutils — see @ 10:59 pm

I guess this is one of the releases I have been tested much more deeply than any others before. I know there are still lots of bugs in the lib but I did not expect such a major one which has been fixed in 0.9.5rc2. It more or less made handling lib not as it is meant to be handled. Please see the change log for a more details explanation just in short:

The global setting cssutils.log.raiseExceptions defines if exceptions when using any DOM method are actually raised (the default) or simply logged away. Problem was that whenever you used any parse* function or any CSSParser.parse* method this setting was set to “False” and exceptions were not raised anymore. Exceptions would be if the parser itself was initialized with CSSParser(raiseExceptions=True) which I reckon hardly anyone who uses the lib had done.

0.9.5rc2 fixes this bug. Any parse* does restore the original value of cssutils.log.raiseExceptions to its former defined value (which would be “True” as the default value).

I know this is normally not a time for such a serious change (at least I think it is serious, is it not?) but I think better now than later. Also there is a workaround. Simply set csstutils.log.raiseExceptions to “False” or “True” whatever you prefer. Beware though that “True” (meaning raising) should be used except during a parse* but when actually working in the DOM.

Anyway, there are also some positive things to report. A few bug have been “squashed” and the performance has been improved by maybe 25% (depending on your source sheet). This was more or less a side effect of a bugfix which made me refactor the tokenizer and realize that there is massive room for optimization…

Guess 0.9.5final will be coming shortly. The next release 0.9.6 will probably concentrate on properties and values which are not testet very well and do have room for optimization – speaking positively ;)

June 16, 2008

build a web.py egg (0.23)

Filed under: Python,Web — see @ 8:49 pm

To “get an egg” from web.py just download and untar the archive from the website and edit setup.py:

#from distutils.core import setup

try:
from setuptools import setup, find_packages
except ImportError:
from ez_setup import use_setuptools
use_setuptools()
from setuptools import setup, find_packages

You obviously need setuptools installed or at least ez_setup (if you don’t know that you won’t need an egg either ;) )

Then just do:

>setup.py bdist_egg

and the egg will be found in folder dist…

Wonder why they only use distutils which cannot build eggs by itself. Anyway it is simple.

I just needed the egg as I try to minimize the need of installed libs and just pack it with an web.py application.

Older Posts »

Powered by WordPress