1 Comment

Installing Gimp 2.8 on Ubuntu 12.04

{,}
 May 31st, 2012

Gimp 2.8 has been released a few weeks after the major major Ubuntu 12.04 LTS update. Unfortunately, because Gimp 2.8 has some nice improvements. Luckily it’s quite easy to install Gimp 2.8 manually with adding a PPA and do an update. There is no need to compile it manually.

The latest update of this PPA also offer new newly compiled plug-ins for Gimp 2.8, which is quite an improvement, because I could install Gimp 2.8 today to over 2.6 without a hassle. Some sites tell you that you need to uninstall anything before or that you will running into problem, An that was true, until a few days.

Just paste this in a terminal:


sudo add-apt-repository ppa:otto-kesselgulasch/gimp
sudo apt-get update
sudo apt-get install gimp gimp-plugin-registry

It worked for me with no problem for with Gimp 2.6 install.

What’s new in Gimp 2.8

A fine list is you can find on the Gimp website:

But what I like is a nice and quick feature to create a screenshot from any webpage:

file -> create for webpage -> url

Well, it’s more then a screenshot because it renders the whole page not only what’s visible in the viewport of your browser. Something like the Shutter can do as well.

It did hang though on some sites with flash content.

Other changes include that saving is now only impossible as xcf file, the native Gimp file format. Other formats, like jpeg, or pgn is now called exporting, This isn’t a regression only you need different menu item, and there is a shortcut `export to` for fast exporting.

How to add `save as compressed xcf file`

XCF files are big uncompressed files, saving it as a xcfbz or xcfgz cab save a lot of MB’s but somehow that option is missing from the new 2.8 install. Luckily it’s not so difficult to get it back, just install the file-compressor plug-in manually., by taking it from an older gimp build.

UPDATE: with the latest ppa update the file-compressor is installed automatically.

How to get the menu back in Gimp under Unity

Gimp does support the global menu for Gnome 3 or Unity, in short this saves worthy space on your screen, but because Gimp uses several floating windows for layers, and the toolbox this isn’t working well, because the toolbox doesn’t have a menu, and the main menu doesn’t show when the toolbox window is selected. Also that can be cured easily, just enable the window menu again in the picture window.

That can be done by adding this environment variable to the command to run Gimp:

APPMENU_DISPLAY_BOTH=1

The best way to do that:

Copy the gimp.desktop  file from /usr/share/applications/gimp.desktop to ~/home/.local/share /applications and change the line with

Exec=gimp-2.8 %U

to

Exec=env APPMENU_DISPLAY_BOTH=1 gimp-2.8 %U

and drag the gimp.desktop file from the ~/home/.local/share/applications folder to your launcher.

That will create a new launcher that will start Gimp with a menu in the image window. So you can use that menu, and the global menu.

To be honest, I had to get used to Unity/ the dash / global menu / Hud, but now I’m used to it and and start missing it on other Ubuntu machines

No Gimp image showing in the launcher

The gimp.svg icon is missing in /usr/share/icons/hicolor/scalable/apps .

Just download it from here by:

wget http://upload.wikimedia.org/wikipedia/commons/0/05/GIMP_Icon.svg

and rename and  copy it to the usr/share/icons/hicolor/scalable/apps folder. You need root access for that.

Then change the line that start with Icon in the desktop file to this:

Icon=/usr/share/icons/hicolor/scalable/apps/gimp.svg

Gimp not showing in the dash

Somehow the dash is not showing Gimp, anymore but it’s offering it for download. CLicking it will open Ubuntu Store, and that will tell you Gimp is already installed. Well, that’s because Gimp is not called Gimp but the GNU Image Manipulation Program in the desktop file. Now you know why Gimp is called Gimp.

So change the line that start with name in the gimp.desktop file to this:


Name=Gimp

Then log out, or reboot.

Posted in Webtechnology | 1 Comment

No Comments

The development of Linux, and Git

April 5th, 2012

We wrote about the Git (and Github), and proposed that the Nobel Peace Price should be awarded.

The Linux kernel is maintained and developed in the Git, and here a video about how powerful that is.

The only question that remains.
Linux is everywhere but not on our desktop computer?

Is that because Windows is bundled with desktop computers in every shop? I mean I had to really throw away some Windows 7 OS’s, because I didn’t want them. Still I had to buy it. Dell, Acer  don’t sell without Microsoft Windows.

There is something wrong with the desktop computer market in the EU/World. And our government fails to act.

Unbundle the sale of hardware and software:

  1. Buy a computer.
  2. If you want Windows: great, buy Windows for another 100 bugs.
    If you want Linux:  download Linux at your neighbour, at the library or wherever you want.

Posted in Webtechnology | No Comments

No Comments

Spinners and sliders with just native javascript

April 5th, 2012

In an earlier post we waved goodbye to jQuery UI for animations. CSS transform and transitions are more powerful, easier to maintain, hardware accelerated, and last but not least less code.

And you could save bandwidth by not loading jQuery UI.

And now I have rewritten the former example to drop jQuery, and believe it or not, it’s even less inline Javascript code. Sure the former example wasn’t really clever programmed – now we use event delegations – but it’s quiet astonishing that using native JS requires less code then the former jQuery example. And of course one library less to load.

Why can we drop jQuery in a lot of cases?

Because CSS animations aren’t working in old browsers anyway, so it doesn’t matter that don’t understand the latest HTML5/ECMA Script 5 / Javascript additions. That’s what graceful degradation means. No eye-candy for older browsers.

Important HTML5/ECMA Script 5 / Javascript additions:

  • classList api: easy toggling, adding and removing of classes.
  • document.querySelectorAll, the native selector API,  get you’re DOM elements like the way you do with CSS
  • new powerful array functions, like forEach etc.
  • even Microsoft products (Explorer 9) now support Javascript specs: like addEventListener, XMLHttpRequest,  javascript objects instead of ActiveX objects etc.
  • innerHTML, outerHTML
  • DOM traversal

Above list is not complete, but in most cases jQuery was used for things like, binding events, toggling classes, selecting elements, add elements, and ajaxify sites.

Here is the new example

And the used Javascript code:


(function(){
var spinner = document.getElementById("spinner"),i=null
spinner.addEventListener('click', function(event){
// event.preventDefault()
// event.stopPropagation()
// which element is the target
i = Array.prototype.indexOf.call(spinner.children, event.target);
// if(window.console) console.log(i,event)
switch(i){
case 1:
// clicked left, pop -> unshift
spinner.insertBefore(spinner.lastElementChild, spinner.firstElementChild)
break;
case 3:
// clicked right shift -> push
spinner.appendChild(spinner.firstElementChild)
break;
default:
}
// Opera bug workaround
spinner.classList.toggle('operabug')
}, false);
})()

Caveats

The Opera bug with DOM mutations and CSS transform/transitions isn’t resolved yet unfortunately. Somehow the DOM mutations don’t seem to trigger a reflow.

UPDATE: there is an easy fix for the Opera Bug, trigger a reflow by setting a bogus class on any element:

// Opera bug workaround
spinner.classList.toggle('operabug')

Posted in CSS3, HTML5, Javascript, Webtechnology | No Comments

3 Comments

Screens are getting bigger and wider and uberwide: 30720×768

April 5th, 2012

While taking a look at the screen-resolution tab of the Technology -> Browsers and OS section of Google analytics for this site, I found  a visitor with a baffling 30720×768 screen-resolution.

I know I have geeky visitors, but wow, that’s what you  call a widescreen.

What kind of a device is it?

  • A new Apple super touch-screen for elephants?
  • A Microsoft touchtable?
  • A stretched Limousine laptop?
  • A new Chinese invention for one screen per schoolclass?
  • An interactive bar in the Google Android Cafe?
  •  Or just a browser bug or proxy hacker?

Anyone a clue?

Posted in browser, Webtechnology | 3 Comments

6 Comments

Unleash the power of SVG sprites

April 4th, 2012

Here at Webonomic we always liked SVG. We experimented with SVG and SVG background quite a few times, also creating some fancy animated backgrounds and other animations at the times Apple hadn’t even released Safari or thought about CSS transforms, transitions, and animations.

Unfortunately SVG has never been really embraced by the majority of browser vendors, only Opera was enthusiastic about it, probably because both Adobe (Flash) and Microsoft (Silverlight/ Vector Markup Language (VML) had their own standards and felt threatened by it. (Adobe doesn’t make browsers, but SVG support in their Creative Suits has never been impressive)  Maybe that’s gonna change now with HTML5 and even Microsoft Explorer 9 support.

Using SVG as images was one thing, using it as a background image was even better.

Setting SVG images by using :target and ID’s

And now we stumbled upon this clever trick showing layered SVG images by setting the hashtag to an ID on a g element and using the CSS :target rule. Simple and elegant.


g { display: none }
g:target { display: inline }

Compare:

yoga

yoga position 1

yoga position 2

Works in Firefox and Opera at the moment. What about Chromium?

Combine with background images

Combine that with a background image and you can use sprites without setting the horrible position values:

Compare this elegant code

div{ background: transparent url(pathto/yoga.svg) no-repeat;}

div.position_1{ background-image: url(pathto/yoga.svg#postion_1); }

div.position_2{ background-image: url(pathto/yoga.svg#position_2);}

with this old code

div{ background: transparent url(pathto/png) no-repeat ;}

div.postion_1{ background-position: 10px 20px}

div.position_2{ background-position: 30px 20px}

Live Demo

Let’s try setting the background image in the following two paragraphs:

The problem of the last example is not only that you have to calculate all the horizontal and vertical offsets, but also the maintenance of the sprite itself.  And scaling issues are much better handled by SVG then of PNG or GIF. I think even a SVG-minifier can be made to concat and minfy several SVG images into one SPRITE – it’s XML in the end – without going back to Inkscape or GIMP, (or Adobe CS  if you prefer to use proprietary software.)
Works in Firefox and … Well, only Firefox at the moment. Great that you can set the SVG-layer from the main document. But why can’t we set the fill or strike color?

We need CSS access

The last thing we wish for is that you can set the CSS from within the main document. I never understood why you couldn’t do it with SVG objects, but it would be even better if you could do something like this (both for SVG images and SVG background images):

.user svg[src=pathto/svg] #position-1{
fill :blue;}

.student svg[src=pathto/svg] #position_2{
fill :red;}

Of course above example isn’t working or correct, – how should we select both images and background images with actual CSS grammar – but making SVG (background) images accessible for  CSS (and JS?) would be awesome. (beware security and cross origin issues)

Targeting SVG Images with CSS


// targeting SVG images
img[src=pathto/svg]

// new CSS syntax for targeting both SVG and SVG background images
svg[url(pathto/svg)]

// I guess setting the URL is better then setting an extra ID or class, after all aren't URL's unique by definition.

Then you can unleash the power of SVG sprites completely, and skin every site and web-app `on the go`!

Posted in SVG, Webtechnology | 6 Comments

No Comments

How to manipulate styles with javascript

March 15th, 2012

In the DOM the document has a styleSheets property which is a StyleSheetList object, which is a collection of CSSStyleSheet objects which has a cssRules property which is a CSSRuleList object which is a collection of CSSStyleRule objects.

alert(document.styleSheets[0].cssRules[0].cssText)

And the  CSSStyleRule has a cssText property which gives a CSS rule declaration like

body{background-color:white;}
The StyleSheetList and the CSSRuleList are array like objects, but like domNodeList you can’t call foreach methods on it but they are enumable with a loop. Each style tag or link tag to an external  stylesheet is created as a seperate StyleSheetList object. That does make sense, but sometimes one big array of rules can come in hand to. This is the code to achieve that. We use some tricks like calling the splice method to  list to create arrays. 
var rules = Array(),superCSSSheet='';

Array.prototype.slice.call(document.styleSheets).forEach(function(sheet){

 rules = rules.concat(Array.prototype.slice.call(sheet.cssRules))

 })

rules.forEach(function(rule){
superCSSSheet += rule.cssText+"\n"
})
alert(superCSSSheet)

Which clearly shows WordPress isn’t very efficient with CSS code: to be more specific most themes and plugin aren’t 🙂

Another funny thing came to attention is that CSS color values are read out differently then set.

Posted in CSS3, Javascript, Webtechnology | No Comments

Older Entries
Newer Entries