Category Archives: WWW

Blog posts about web related things

How to remove (hide) annoying sections on web pages

Every now and then it happens that there is something on a web page which I visit frequently that I don’t want to see. Things that are simply just annoying. Sure I could try to ignore it, live with it, try to convince myself it’s not worth bothering. But why should I? There are easy solutions to get rid of it.

Most people probably know Adblock Plus and many use it, myself included. It is now available for almost every modern browser, like Firefox, Google Chrome, Opera 15+, and even Internet Explorer. It is obvious what it does, it blocks ads. But it can do more, like blocking things which aren’t ads, but still annoying.

I’d like to demo how to do it with this little example: YouTube allows to post comments (unless the person publishing a video disables it), but sadly a huge amount of comments are racist, xenophobic, sexist and so on and so forth. Few comments have any value. Maybe you are the kind of person who ends up reading that stuff even though you’d rather not and you know you just end up being disgusted. So lets assume you want to get rid of it, to kill that nasty temptation.

I will show how to do this with Firefox. But I assume it will work very similarly with other browsers and their Adblock Plus addons. Don’t be scared, it should be easy enough for the average internet user, not much technical background needed.

Everything starts with a fresh Firefox 23 and the latest Adblock Plus installed:

Firefox 23 with Adblock Plus

I opened a random YouTube page with comments:

YouTube page with comments

Now comes what’s probably the most challenging part. We need to find the area which we want to remove. Therefor we right click somewhere on top of the area which should go away, like on the text “All Comments”, and select “Inspect Element” from the context menu. In the left bottom area there is an HTML view. Click on the HTML tags (the things like <…>) and see the dotted border on the web page. Try to find the HTML tag which covers the area which you want to remove, and try to find one which has an id element (id=”…”) assigned. What we want is the line

<div id="comments-view" class="" data-type="highlights" >

Here is what it looks like:

Firefox Inspect Element

The relevant information is that it is a <div> tag, and that the id element’s value is “comments-view”. If there was no id element, we could also use the class element (provided there is a value assigned), however class is more risky because unlike id values, class values don’t have to be unique (you may block more than you intend to).

So here is how to form the filter string for Adblock Plus:

  • note the domain, here: youtube.com,
  • two # signs,
  • the tag name, here: div,
  • if you picked an id element, another # sign, if you picked a class element, a dot (.),
  • the id or class value, here: comments-view

So what we have is:

youtube.com##div#comments-view

Now right click on the red Adblock Plus icon (the one which looks like a stop sign) and select “Filter Preferences”. Select the Custom Filters tab:

Adblock Plus Custom Filters

Now click “Add filter group” and name it anything you like (I named it “My filters”):

Adblock Plus Filtergroup

Click the “Actions” button and select “Show/hide filters” from the menu. Then click “Add filter” and enter the filter rule:

Adblock Plus Filter

Voilà, the comments are gone:

Final result - no more comments

mysql.com goes HTML5 video

In my role as Web Developer for mysql.com I have always tried to advocate open web standards, and to adopt good new web technologies as early as possible. And I believe that an open source product like MySQL owes the World Wide Web open web technologies, rather than content which requires proprietary plugins. Which is why it’s a pleasure for me to tell you that demo videos which used to require Flash have been replaced by new demo videos which work with HTML5 video (and using Flash only as fallback for old browsers).

Take a look:

… or even better, take a look at the real thing at http://www.mysql.com/products/enterprise/demo.html.

Needless to say, not only the fact that these videos are delivered as HTML5 video is interesting, but of course also what the MySQL Enterprise Monitor can do for you, like analyzing your queries, or monitoring your replication and alert you when things go wrong.

And stay tuned, there is more to come in the future!

db4free.net has received better language detection

A few months ago I wrote about how to do language detection correctly, to respect the user’s preferred language setting in his/her browser, aka the HTTP_ACCEPT_LANGUAGE header.

Now, finally, db4free.net has received exactly this implementation. Took me a while, but now it’s there :).

Especially German speaking people will notice the difference. If German takes priority over English in the browser settings, the German version of db4free.net will be loaded by default. No more need to click the German flag. If neither German nor English is set, the site will default to English.

However, the English and German flags are still available, to change the language if a person chooses to. This allows for maximum flexibility.

OurSQL Podcasts available at dev.mysql.com

Noticed the new navigation item in the MySQL Developer Zone?

Sarah Novotny and Sheeri K. Cabral have picked up the OurSQL Podcasts again which were on hiatus for a while (well, they have now been back again for a while as well). The Podcasts are available on several resources:

A nice extra to the implementation at dev.mysql.com is that it uses HTML5 audio, so provided that you are using a technically up-to-date browser, you can not only download the sound file of an episode, but play it right in the browser. No plugin required.

Enjoy!

How to do user language/locale detection quickly without Zend Framework

Recently I wrote about detecting the preferred language or locale of a web site visitor, using Zend Framework.

Well, I have to start with one correction. In my last blog post about this topic I talked about the User Agent String, but since I wrote the article, I figured out that the User Agent String doesn’t play any role at all. Neither in the Zend Framework variant that I blogged about earlier, nor in today’s code. And that is good so, because both Internet Explorer and Mozilla Firefox will no longer add the browser language or locale to their User Agent Strings in the future. Other browsers are likely to follow, since there are efforts to make it harder to fingerprint users by their UA-Strings.

So here is my ZF-less variant:

$m = array();
$http_accept_language = 
   isset($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? 
     $_SERVER['HTTP_ACCEPT_LANGUAGE'] : 
     "";
preg_match_all('/([a-z]{2})(?:-[a-zA-Z]{2})?/', 
               $http_accept_language, 
               $m);

$pref_locale = array();
foreach($m[0] as $locale) {
    $pref_locale[] = $locale;
}

$pref_lang = array();
foreach($m[1] as $lang) {
    if (! in_array($lang, $pref_lang)) {
        $pref_lang[] = $lang;
    }
}

The array $pref_locale will contain all locales in order of the user’s preference, and $pref_lang will only contain the languages in order of the user’s preference. Other than my ZF code from last time, this allows to look up secondary, tertiary etc. choices of the user as well.

Here is an example. Lets assume, these are the user’s preference settings:

$_SERVER['HTTP_ACCEPT_LANGUAGE'] would contain:

en-us,en;q=0.9,de-at;q=0.7,de;q=0.6,es-es;q=0.4,es;q=0.3,ja;q=0.1.

After running my code, the $pref_locale array would contain this:

Array
(
    [0] => en-us
    [1] => en
    [2] => de-at
    [3] => de
    [4] => es-es
    [5] => es
    [6] => ja
)

and the $pref_lang array would contain

Array
(
    [0] => en
    [1] => de
    [2] => es
    [3] => ja
)

Still simple enough, and most importantly, still a better solution than what Google still does.

Running multiple Firefox versions & profiles at the same time

Oh my freaking Flying Spaghetti Monster!

I used to think that I know Mozilla applications like Firefox and Thunderbird quite well.

Now I’m wondering, how could I miss this feature that I’ve been wishing for so long? And actually, it was very near the top of my most wanted features that I wished Mozilla would implement. Today I found out, it’s been there for many years.

It is, as the subject says, to run multiple versions of Firefox, or Thunderbird, at the same time. Especially at times like these, as Firefox 4.0 is baking and becoming increasingly suitable as a day-to-day browser, while still having a few flaws which sometimes want me to refer back to version 3.6, this may be extremely useful.

However, even if you have 2 versions of Firefox installed. As long as one version is running, and you try to start an instance of the other version by just starting Firefox the “normal way”, you get a new window of the version which is already running. But there is a solution.

And it’s very simple. It’s important to have different profiles as well (this is something that I would recommend anyway, never run different versions on the same profile – it can get pretty messed up). They are easy to create, just start Firefox (or Thunderbird) with

firefox -P


I always leave one “naked” profile which I used to call “virgin” 😉

So you need at least 2 profiles. Lets assume we have a profile “ff36” to run Firefox 3.6 on and one profile “ff40” to run Firefox 4.0 on. How to start them? Here is what it could look like (assuming we have Firefox 3.6 in /opt/firefox-3.6 and Firefox 4.0 in /opt/firefox-4.0b4):

/opt/firefox-3.6/firefox -P ff36

This is basically the standard way of starting Firefox with a specific profile. Now lets start the Firefox 4.0 instance:

/opt/firefox-4.0b4/firefox -P ff40 -no-remote

Notice the -no-remote? This is the little piece that does that trick. Without -no-remote you would have gotten just a new Firefox 3.6 window. With it, you get a nice Firefox 4.0 side by side your Firefox 3.6. And here’s what it looks like:

The same works for Thunderbird as well, and probably for most or even all XUL-based applications (SeaMonkey, Songbird, Instantbird are a few that spontaneously come to my mind).

The shocking thing to me was that it has already been introduced in Firefox 2, as the MozillaZine Knowledge Base article told me.

Smarty 3 and __autoload()

When I first tried out Smarty 3 (which is available as Release Candidate 3 at the moment), which was that I updated an existing Smarty 2 installation, I ran into this error message:

Fatal error: Class ‘Smarty_Internal_Template’ not found in lib/Smarty/Smarty.class.php on line 444

I started to investigate what the problem may be and soon found out that libraries in Smarty/sysplugins/ were not loading. So I picked up my already existing __autoload() function and added the following code:

function __autoload() {
  // other stuff that had been here before

  if (substr($classname, 0, 15) == "Smarty_Internal") {
    $classname = "Smarty/sysplugins/" . strtolower($classname);
    require_once $classname . ".php";
  } 
}

With this addition, Smarty 3 worked perfectly, but I still kept wondering why I had to tell my autoload function explicitly to load the Smarty_Internal libraries. I found it quite ugly that I had to add it myself.

So I asked in the Smarty forum and here is why: Smarty registers its own autoload function, using the spl_autoload_register() function. Having my own __autoload() function breaks this, unless I register my own function with spl_autoload_register() as well. So the solution looks like this:

function autoload() {
  // my old stuff, but no more loading of Smarty libraries
}

spl_autoload_register("autoload");

Very simple solution, if you just get the right hint. So maybe if somebody stumbles upon the same error message, this may be of help to resolve this nicely and quickly.

If you are interested in seeing my post in the Smarty forum, it can be found at http://www.smarty.net/forums/viewtopic.php?p=65975.