futtta's blog

Frank Goossens' Twitterless twaddle

Archive for the ‘howto’ category

5 tips to tackle the problem with iframes

with 2 comments

Iframes have always been frowned upon by web-purists (confession: myself included). But things are never black and white and sometimes iframes can be the best solution for a problem (you could substitute “‘iframes” with “Flash” in the previous 2 sentences, but that’s another discussion). So here are 5 quick tips which might lessen some of the SEO- and usability-problems associated with the use of iframes;

1. Google loves doesn’t hate iframes done right!

Although Google is rather vague about the subject, iframes and SEO do not have to be mutually exclusive. But you will have to make sure it’s your main page that shines in search results, not the iframe-content. The main page (where the iframes are defined) has to be more then a mere placeholder for one or more iframes. Migrate as much information (titles, description and other text) from the iframe-content to your main page, which should describe what goes on in the iframe(s). Use the iframe title-property and insert alternative content between opening and closing iframe-tags. A quick example:

<h2>Calculate your mortgage rate</h2>
<p>Calculating your mortgage rate was never easier; just enter the loan-amount and the duration below!</p>
<iframe src=”http://page.url/iframe-container-page1″ …  title=”Calculate your mortgage rate here”>Your browser does not seem to handle frames properly, but you can calculate your mortgage rate <a href=”http://page.url/iframe-container-page1″>here</a></iframe>

2. Own the stage

Avoid visitors viewing the iframe-content out of the context of the main page (e.g. because they followed a link in search-results). Add javascript to the iframe-content to check if it is accessed stand-alone and redirect to the main page (or explain and provide link to the main page) if that is the case.

if(self.location==top.location) top.location.replace('http://contain.er/page-url/here');

3. Don’t draw blanks

When a visitor clicks a link at the bottom of a long page inside an iframe and the target is a shorter page inside the same iframe, then he/she will see a blank page which is … well not very usable, no? The (hackety-hack) solution; tell the browser to scroll to the top of the iframe each time a new page in it is loaded, by calling the function below (with the iframe id as parameter) when the iframe’s onLoad event fires:

<script>
var firstrun = new Object();
function frameMagic(el) {
if (typeof firstrun[el] === ‘undefined’) { firstrun[el]=true; }
else { document.getElementById(el).scrollIntoView(); }
}
</script>
<iframe id=”iframe” onLoad=”frameMagic(‘iframe’);”>

4. Your users really do need scrolling=”auto”!

Help your visitors access all iframe content no matter what configuration they’re using: don’t disable the iframe scrollbars! Disabling them will render the iframe partially inaccessible for some of your users, because the size your iframe-content needs depends on things outside your control such as operating system & versions (e.g. font & screen resolution), browser (e.g. css-implementation) and browser configuration (e.g. non-default font-size). Instead define a reasonable iframe-width and height, make the iframe-content width flexible (fluid) and let the browser decide if a vertical scrollbar is needed.

5. Smart sizing without scrollbars

If you really really really don’t want scrollbars, if you want your iframe to adapt to the size needed by the iframe-content automatically and if you’re not afraid to experiment; there are some nifty javascript-solutions that allow the iframe-content to communicate the required height to the main page. Check out Framemanager (stand-alone, has some issues though) and the JQuery-postmessage iframe-example (which does everything in javascript, which isn’t really ideal from an accessibility point of view).

Conclusion: iframes aren’t necessarily evil (either), but you’ll have to make a small effort to render them somewhat SEO- and user-friendly.

Written by frank

March 3rd, 2010 at 3:53 pm

How to crash Firefox with FoxyProxy

with one comment

FoxyProxy LogoIn this brief HOWTO I will describe the procedure to crash Firefox using the great FoxyProxy add-on.

  1. Check if your employer mandates the use of a filtering proxy for web-access
  2. Find a way to circumvent that proxy, regaining full-internet access
  3. Breach corporate IT-guidelines by installing Firefox
  4. Install FoxyProxy, add both proxies and enable “AutoAdd” (make sure to ignore the vague warning about “significant delays” in page loading times) to automatically use the alternative proxy for forbidden pages
  5. Open a new tab, go to gmail.com and wait for Firefox to freeze completely (if your browser complains that some script is taking too long to finish, just click on “continue”)

(Disclaimer: I provide no guarantees that this will actually work, I never watch porn and I take no responsibility if your browser does (not) crash)

Written by frank

November 20th, 2009 at 12:06 am

Posted in browsers, howto, lang:en

Tagged with , ,

5 valuable Cufón tips

without comments

cufon test page zoomed in: quality is less what default fonts have to offerCufón is one of the solutions available to force browsers to display a page with non-default fonts. Here are 5 tips for using Cufón, based on real-life experience:

  1. Don’t use Cufón unless you can sleep knowing that at least some of your visitors are bound to run into cufon-specific issues
  2. Be sure to include all characters you might need (e.g. €, é, ç, …) when generating your Cufón font files.
  3. Be sure to enable gzip/ deflate and to implement caching directives on your webserver to somewhat limit that often ridiculous amount of font-data users have to download
  4. Tell Cufón to render using cufon.now() before calling those nasty external javascript-includes (e.g. Google Analytics) to avoid a visible delay between the moment the DOM is loaded and your cufon-javascript applying the new fonts
  5. Try to find a “default” font that comes as close to your Cufón font as possible (in terms of size, weight, …) to limit the visual impact of any Cufón-rendering delay

As for the accompanying image (of a zoomed in Cufón demo page); don’t be surprised if someone tells you your text seems just a little bit less readable, because it will be.

Written by frank

November 9th, 2009 at 2:31 pm

Posted in Web development, howto, lang:en, rants & raves

Tagged with , ,

Impatiently flashing my HTC Hero into shape

without comments

the new android recovery image menu in actionI’m an impatient man, so although I heard rumors that Mobistar might be testing the HTC Hero update (which is Belgium-specific, as the YouTube application has to be removed because of privacy law concerns), I decided to go the “less official” way and root and flash the darn thing myself. The process was pretty easy (thanks for the info Thomas & Serge), the outcome is great; my phone is a better Hero for it!

So suppose you’re as impatient as I am, suppose you don’t care that this may void your warranty, suppose you’re not scared of bricking your brand new toy, suppose you’re a not entirely technically ignorant, then you could follow these steps:

  1. Root your HTC: by using flashrec.apk to flash a new recovery image on your HTC as described here. If you get a “backup failed” error in step 10 as I did, you just need to power off and on and try again (the backup itself isn’t used anyway, that step is just needed to have flashrec allow you to continue).
  2. Upgrade your rooted HTC: from the new recovery image menu flash MoDaCo custom ROM v2.x (I installed 2.2, 2.3 was released a couple of hours ago) to your system as described here. And don’t forget to wipe before flashing as I did.
  3. Update to the latest radio package to version 63.18.55.06EU_6.35.06.18 from the recovery image menu (you should know the drill by this step) for optimal radio performance.

But you could also wait for the official update, off course …

Written by frank

September 22nd, 2009 at 8:46 am

Posted in Technology, howto, lang:en, linux

Tagged with , , , ,

How to exclude blogposts from your feed

with one comment

I decided to start auto-posting weekly digests of my Lifestream-events to this blog, but wanted to prevent those items from polluting my rss-feed (call me a old-fashioned, but I like rss-feeds to have some body instead of just a couple of links and an occasional YouTube-clip). This turned out to be very easy with some category-tinkering and thanks to Feedburner.

Here’s what I did:

  1. Add a category “rss-able” and make it the parent of all existing categories
  2. Add a category “web wandering” (not under “rss-able” off course) and configure Lifestream to use that for the digests
  3. Configure Feedburner to use http://blog.futtta.be/rss-able/feed instead of http://blog.futtta.be/feed
  4. Exclude both new categories from being displayed in my “category cloud” widget

And there you have it; my Google Reader shared items, YouTube video’s and favorites, Facebook status and Tweets (if ever I would decide to do such a thing) are automatically collected in a weekly blogpost without bothering rss-readers or my Facebook-friends (who get that info shoved down their throats via Facebook-imports of the individual feeds anyway).

I decided to start auto-posting weekly digests of my Lifestream-events to this blog, but wanted to prevent those items from polluting my rss-feed (call me a old-fashioned, but I like rss-feeds to have some body instead of just a couple of links and an occasional YouTube-clip). This turned out to be very easy with some category-tinkering and thanks to Feedburner. This is what I did:

1. Add a category “rss-able” and make it the parent of all existing categories
2. Add a category “web wandering” (not under “rss-able” off course) and configure Lifestream to use that for the digests
3. Configure Feedburner to use http://blog.futtta.be/rss-able/feed instead of http://blog.futtta.be/feed
4. Exclude both new categories from being displayed in my “category cloud” widget

And there you have it; my Google Reader shared items, YouTube video’s and favorites, Facebook status and Tweets (if ever I would decide to do such a thing) are automatically collected in a weekly blogpost without bothering rss-readers or my Facebook-friends (who get that info shoved down their throats via Facebook-imports of the individual feeds anyway).

Written by frank

July 16th, 2009 at 4:07 pm

Posted in Internet, blog, howto, lang:en

Tagged with , , , , ,

Wordpress 2.8 loves your proxy

with 3 comments

Up until version 2.7.1, running WordPress on an intranet was a real pain in the ass. It connects to the outside world to look for updates, to check comments for spam (using Akismet) or to fetch RSS-feeds for widgets if you configured those on your blog, … But as you typically don’t have direct internet-access on an intranet and as there was no way of letting WordPress know about a proxy, your blog timed out while it was trying to fsockopen those external sites.

chet bakerBut that was yesterday, because the recently released WordPress 2.8 “Baker” (which is chock-full of new features) has support for internet-connections through a proxy, thanks to its great HTTP API. Don’t bother looking for it in the admin-screens, you’ll need to configure the proxy-settings in your wp-config.php.

Here’s what you’ll have to add (values are examples which you’ll have to replace with settings for your environment off course):

define('WP_PROXY_HOST', '192.168.22.1');
define('WP_PROXY_PORT', '9099');

If you need to authenticate to access the proxy you can add your credentials this way:

define('WP_PROXY_USERNAME', 'frank');
define('WP_PROXY_PASSWORD', 's3cr3t');

You can also exclude requests for specific hosts from going through the proxy:

define('WP_PROXY_BYPASS_HOSTS', 'localhost, blog2.corpintranet');

And finally you can block all outgoing requests by default and add domains to a whitelist to only allow those to connect:

define ('WP_HTTP_BLOCK_EXTERNAL', 'true');
define ('WP_ACCESSIBLE_HOSTS', 'api.wordpress.org, akismet.com');

Off course some WordPress-plugins do not use the HTTP API yet (e.g. Lifestream and wp-security-scan rely on Simplepie, which does not use the proxy-aware wp_remote_get-function), so you might have to be careful when installing plugins that need internet-access.

Written by frank

June 18th, 2009 at 10:22 am

Posted in Internet, blog, followup, howto, lang:en

Tagged with , ,

SP.Anciaux; partij spartelt tegen

with 3 comments

Dus Caroline Gennez en den Baard voerden de “Partij” in sp.a af om een handvol “Progressieven” binnen te halen en zijn nu verwonderd dat de partij tegenspartelt? Misschien hebben ze soortgelijke plannen met de “a” in de naam; een handvol ACW”ers, oud-Agalevers en andere Alternatievelingen staan ongetwijfeld te drummen om ook een letter te krijgen.

Dergelijke minimalistische verruimingsoperaties bieden echter weinig meerwaarde. Integendeel, de sp.a verliest op die manier verder van haar eigenheid. En is die wazige positionering niet juist één van de redenen voor de slechte resultaten bij de verkiezingen in 2007 en in de opiniepeilingen?

Mag ik daarom een tegenvoorstel doen? Laat die gedemodeerde “a” terug vallen en voer als SP (“Socialistische Partij” of “Socialistisch Progressieven” als U dat echt wilt, zolang het maar “Socialistisch” is) keihard oppositie tegen de sociaal-economische politiek van deze regering. Als Johan, Caroline en Bert zich daar niet in kunnen vinden, mogen ze gerust een stapje terugzetten. Dan mag één of andere oude bulldog wat mij betreft gerust nog even uit zijn kot komen.

Written by frank

January 16th, 2009 at 12:21 pm

Posted in Politiek, Quickie, Technology, howto, lang:en, rants & raves

Tagged with ,