HTML, CSS, JS and other unsorted stuff

Subscribe to RSS feed

Sticky post

In Blog Links

cleanPages extension service page

Experimental cleanPages for Opera Mobile
All cleanPages related articles.

cleanPages development discontinued until further notice

offline arc90 readability userJS+Button for Opera before version 11

WOT (Web of Trust) Userscript for all users who can't use the extension or who don't like to set up a WOT account just to see the results. It supports more search engines natively too ...
(All posts related to WOT)

Read more...

Latest (Last?) Opera 12 Performance Test

, , ,

Following the belief "Don't trust any test you did not set up by yourself" I tested Opera 12 against the latest stable versions of other browsers.

Why I used these tests
Most of the performance tests in the wild do not render anything during the test when it comes to DOM or CSS manipulation. My tests do.

Several browsers are quite fast while they run JS scripts without the need to care about visual DOM or CSS changes but eventually break down as soon as they have to render it to the screen. Performing DOM and CSS manipulations on non-visual elements is by far faster but does not measure the real impact those manipulations have on the visual user experience.

The tests utilize a broad variety of math object calls, array manipulations, bit shifting, time object calls, timeouts, intervals, function calls and other common things used on web pages in combination in a more or less real world mix and do not perform the same short action over and over again in a loop like some other tests do. Heavy use of math.random provides additional variances so that caching effects are mostly mitigated.

Of course these tests do not test the full spectrum of JS, HTML, DOM or CSS manipulations, but they were never meant to do so. They just show an aspect that many other tests do not show:
Interaction of browser "modules" while displaying what happens.

Read more...

cleanPages development discontinued...

, , , ...

... until further notice.

There will be no next major version until there is a human readable and detailed documentation about the new Opera-Chromium-V8 based extension model including well commented working examples coming from Opera ASA.

Sorry for the inconvenience.
Please send your complaints here.

Read more...

The Skins are Gone, Long Live the Skins

, , , ...

At 2013-01-24 the skins section of my.opera was disabled and all old Skins are lost, hundreds of hours of the author's creative work are gone. As it is, it is not even possible to download an old skin to reactivate and modernize it without hassle.

edit 2013-02-06
I posted all skins that I found the way described in this post, included direct download links and preview images, IDs and links to the authors "about" pages in this thread in the new Opera Old and Real Skin Forum. Download the linked MHT files and open them locally.
/edit

Interestingly the skin files themselves are still in their old places, Opera ASA just switched off the customize/skins web page and now redirects all requests to the addons page, however at the time of this post you can only find only 6 instead of the hundreds of skins from the customize pages on the addons page, which is quite pathetic IMHO.

Digging through the Google cache and archive.org pages brought many skins back but there was a problem with archive.org:
They did not save all skins in their archive and some of the links point to default.htm pages.

Solution:
The following little quick'n'dirty Userscript replaces the links in the archive.org pages with the direct links to the Opera server:
// ==UserScript==
// @name Direct Links to Skin Download
// @author QuHno
// @version 1.0
// @description Changes the skin download links inside archive.org to Opera's server
// @published 2013-01-25 07:16
// @include http://*archive.org/*my.opera*
// ==/UserScript==

window.addEventListener('DOMContentLoaded', function(){
	var theLinks = document.querySelectorAll('div.skinpad p.buttons a');
	if (theLinks.length === 0){
		theLinks = document.querySelectorAll('div.skinpad p.dl a');
	}
	for (var i = 0, j = theLinks.length; i < j; i++) {
		theLinks[i].href = 'http:' + theLinks[i].href.split(':')[2];
	}
	
}, false);

just save it as e.g. skinArchiveDirectLinks.js into your UserJS folder and start browsing. When the page is finished with downloading you can click on the "download" button and get the skin directly from the Opera server, like it was before.



http://web.archive.org/web/20120607150006/http://my.opera.com/community/customize/skins/tags/
is a good point to start.

With the help of this script on the archive.org pages and some additional Google-Fu I was able to "rescue" about 150 270 skins so far. Astonishingly even many older skins from 2009 and earlier still work quite well and need only a little bit of love to make them fully operational for Opera 12+.

If you belong to the creative kind of people:
Download a nice looking skin, try to contact the skin authors of the older skins and ask, if you are allowed to adopt and modernize them, add the (mostly just a few) missing parts and upload them to the addons catalog.

... may be, may be, sometimes the authors will even do it by themselves, if they are reminded that people love their work.

UserScript manager

, ,

If I look at this, I know that Opera really needs a built-in and perfectly working UJS manager:
http://userscripts.org/scripts?sort=installs


Best with auto update function, enabling and disabling of scripts, editor, one click UJS install ...

... oh, wait ...

... once upon a time there was a thing like that:
http://unite.opera.com/application/401/


It could be made even better, with an option to emulate the GM_ specific stuff on demand on a per script basis by injecting the necessary stuff directly into the script or rewriting it, if the script author didn't pay attention to us poor Opera users.

new cleanPages icons

,

After reading some complaints about the small cleanPages icon for the button and, to be honest, not being content with it by myself, I decided to give PS another go and try to paint a new one that is easier to shrink or enlarge and make it possible for the high density touch screens to see sharper icons with some more details (watch the eyes lol).

Here are the new icons:

the icon above is for high density screens (retina(TM)) and will have the same size like the next on those screens:


and some new for help and back to the settings:



Are those icons OK? Should I change them?
edit:
They were not OK. Here the second try:

/edit

edit 2:
3rd try:

/edit

edit 4:
4th try:

/edit

What do you think?

Sidenote:

Some settings icons are still missing but I must admit that I am reeeeaaallly slow if I have to work with such small dimensions.

Apart from that it took me hours (literally) to create those few icons so that they have an almost consistent appearance. The main problem is, that despite I work with vector layers, I have to correct the anchor points for those gruesome 18*18px icons. There is no way to get them really sharp by just resizing them because 64 does not share the 3 as common divider with 18. Working with 16px and putting a 1px empty space to all edges is no option for me, the space is already limited enough as it is and I see no way to cram all the information in 16*16px.

24px would still be a PITA but easier and, as a positive side effect, it would fit exactly into the buttons dimensions instead of leaving a 3px border around it.

0.05+0.01=0.060000000000000005

The code says all:
(function () {
    var catastrophe,
        java_script = 0.05,
        mathematics = 0.01;
    catastrophe = java_script + mathematics;
    if( catastrophe !== 0.06 ) {
        alert( 'JavaScript and Mathematics is a Catastrophe!' );
        return;
    }
    alert( '0.05 + 0.01 = ' + catastrophe );
})();


Is there any decent BCD math library for JavaScript out there?

HTML daftness 002

, ,

Today I got an issue report for cleanPages, about figures not being displayed on this page are not displayed. Some words in front: Under some conditions cleanPages can cope with layout tables:
  • There should be more than about 60 characters of text in the table
  • text should be visible text
  • images should be surronded by text
Look into the relevant part of the source code and try to find the content:
<table cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
	<td>
	  &lt;br />
	</td>
  </tr>
  <tr align="center">
	<td>
	  <table cellspacing="0" cellpadding="0" border="0" align="center">
		<tr>
		  <td>
			&lt;br />
		  </td>
		</tr>
		<tr valign="top">
		  <td align="center">
			<img src="http://media.wiley.com/Lux/64/20364.nfg006.gif" align="absmiddle" border="0" alt=""/>
		  </td>
		</tr>
		<tr>
		  <td>
			&lt;br />
		  </td>
		</tr>
	  </table>
	</td>
  </tr>
  <tr>
	<td>
	  &lt;br />
	</td>
  </tr>
  <tr align="center">
	<td>
	  <table cellspacing="0" cellpadding="0" border="0">
		<tr valign="top">
		  <td nowrap="nowrap">
			<strong>Figure 1</strong>
		  </td>
		  <td>
			<p />
		  </td>
		</tr>
	  </table>
	</td>
  </tr>
  <tr>
	<td>
	  

	</td>
  </tr>
</table>
Yes, one image and "Figure 1", that's all!

WTF?!

We have got CSS since the dark ages, there is absolutely no need for 3 (in words: THREE!) nested TABLEs since about 10 years. Neither you need one table for the effect, nor advances CSS3 techniques - plain simple CSS1 is enough. As an additional benefit the page would load faster.

Any heuristics, that needs at least a small portion of text (and with TEXT I mean more than ONE Word and ONE number!) to find the relevant content, chokes on this. The code to content ratio is about 25:1 - which is not acceptable in any way.

This is a clear WONTFIX for me. As it is, I don't even know if it can be considered as a real bug. Sorry.

first test for the new cleanPages 2 interface

, ,

Several cleanPages users asked for more flexibility for the settings. I can remember wishes like setting different fonts, sizes and colors for all of the elements individually. That was a long standing wish in my personal wish-list too, but I knew that it would mean a lot of work, tedious digging through the specifications and lots of pestering people, who are better at writing JavaScript than I am. Thanks to all of them, and don't think I am finished with that wink

Here my first experiment for the new interface. It should work well enough to give you a glimpse of the upcoming interface:

cleanPages 2 settings page test
Give it a try and tell me if you can imagine if this principle will work. *1)

Warning! Dont change the font before clicking on an element that can be changed! An endless loop will eat up your Opera!

I reused some of the older experiments like e.g. the select-box-replacement. The font detection and the fancy styled color selector will be in the new interface too, but I omitted it in this version to keep the code simple.


*1) Yes, it is raw and unstyled, it is just about the functionality. If you are a designer: Start designing a nice interface, that can hold those and a couple of more settings, because I suck at design wink

Select Box Replacement

,

While I was starting to redesign the preferences for cleanPages to fulfill some of the user wishes, I stumbled in a big problem with select boxes:
The option elements can not be styled individually but I would need that to build the multiple font selections with font-preview.

I started to write one in JS that replaces the select box by a UL but ran into several problems I could not solve on my own. Thankfully BS-Harou stepped in and here is the new, improved version:

select box replacement.

See the comments for what is not supported (and will not be built in, at least not by one of us wink) and if you want to know how it started.

Read more...