Wouter Beugelsdijk's techblog - tech.wiedo.nl

webdevelopment and other tech related stuff 
Tags



10 February
 

Virtual PC IE6 and XAMPP

Virtualmachine

Just a quick writeup of some troubles i had lately.

I had a lot of troubles reaching my XAMPP webserver (on the host computer) on the virtual machine running the IE6 image of microsoft (download them here) on MS Virtual PC 6.

I first started mirroring my hosts file (windows\system32\drivers\etc\hosts) on my virtual machine with the one on my host machine, but changed the ip adresses from 127.0.0.1 to the ip adres of the host pc (find yours out by running 'ipconfig /all' in cmd.exe). But doing this alone wasn't the solution. When i go to for example localhost/phpmyadmin/ on my virtual pc, it wouldn't load.

After fiddling with a lot of settings in XAMPP and searching on the web, i found an easy solution myself. Here it is: Change the default 'Realtek Networking adapter' in the Virtual PC settings to 'Shared networking (NAT)' (see screenshot). That's it. It worked instantly.

Good luck testing your websites in IE6! Hope this isn't needed anymore in the near future, but until then, this is the best way i think.

Filed under  //   IE6   Internet explorer   LAN   XAMPP   virtual pc  

Comments [0]

10 January
 

Sass 3 Notepad++ User-Defined syntax highlighting

Scssimage
Couldn't find SCSS syntax highlighting in Notepad++ anywhere so made this myself. This is based on the LESS syntax highlighting of Mark Davies.
I know it isn't perfect (yet), so feel free to share, edit or extend this file. But it'll be nice if you keep me updated (in the comments)!

So to use this go in Notepad++ to view->user-defined dialog... then choose import and import this XML file, here your can also change the colors if you don't like mine.

Also if you like to have autocomplete, go to your Notepad++ folder then to /plugins/APIs/ and duplicate the css.xml. Rename this file to scss.xml.

Have fun! Download the file below.

Download SCSS syntax highlighting file

As a bonus i created a *.bat file to watch create a watch with a keyboard shortcut in Notepad++ (via the run menu). Just create a .bat file with something like this:



cd c:\xampp\htdocs\
sass --watch your/sass/folder:your/css/folder --style compressed

So first navigate to your root, in this case my htdocs folder, then create the watch: first folder is your sass folder, second folder is your css folder (seperated by the ':' sign). I also used a compression. The watch creates a .sass-cache folder in the root, so be sure to navigate to a folder where that's no problem (no version control).

Now save the .bat file and run it with Notepad++ (F5), if it's working, you could save the Run and create a keyboard shortcut (press save in the run screen).

(ps. I just started using Sass and i would recommend it to every frontend webdeveloper)

Filed under  //   notepad   sass   scss   syntax highlighting  

Comments [7]

20 November
 

The Facebook Like button is replacing ad units or Flash

Like
I'm was working on a facebook like button when i found a really strange problem. After placing my facebook button every google ad/iframe is changed into a facebook Like button. I din't 'like' that at all. Searching for a solution on the web i didn't find one. The link Facebook is providing is dead (at the bottom of this page: Like Button - Facebook Developers).

So the solution I could find is something like this:

You have to use Facebook connect-js.

  1. Add a div with the id 'fb-root' to the bottom of your page (before the </body> tag)
  2. Create a html file on your server which is called: channel.html which only contains this code: <script src="http://connect.facebook.net/en_US/all.js"></script>
  3. On the event: fbAsyncInit do a FB.init with a channelUrl linked to the channel.html (this link has to be absolute!)

An example code:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId        :     'YOUR APP ID',
            status       :     true, // check login status
            cookie       :     true, // enable cookies to allow the server to access the session
            xfbml        :     true,  // parse XFBML
            channelUrl   :     'http://hostname.nl/channel.html'
        });
    };

    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>

You still have to use the opengraph meta tags for you button like this (code example directly from facebook):

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>The Rock (1996)</title>
        <meta property="og:title" content="The Rock"/>
        <meta property="og:type" content="movie"/>
        <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
        <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
        <meta property="og:site_name" content="IMDb"/>
        <meta property="fb:admins" content="USER_ID"/>
        <meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
        ...
    </head>
    ...
</html>

I really don't know this is the way facebook has intended this. I didn't fully tested this yet. But this works for me now. If you have a better solution feel free to comment on this post. If I know more i'll create a followup post.

Filed under  //   Javascript   Open Graph   adsense   channel URL   facebook   iframe   like  

Comments [0]

11 June
 

Archive of moments webapplication

Prtscr_capture

I'm currently busy with the technical part of my girlfriend graduation project: 'Archive of Moments'.

A part of this archive is an online search application (this is the webapp i noted working on in my last post).
If you're interested, take a look here: Archive of Moments.

Beware, it does make a lot of use of modern webtechnologies (CSS3 styling and animation). So update your browser and preferably open it in Apple's Safari (5) browser for the best performance! It does make use of progressive enhancement though, so it should also work in older browsers, but i didn't test this at all. It's also in dutch language, but you can still experiment.

If you've found bugs or have some tips, please notice me via the comments.

The other technical part of the project is also interesting, you'll hear from it soon (hint: it does make use of an Arduino and RFID chips).

Filed under  //   Youtube API   css3   mootools  

Comments [0]

25 May
 

Mootools CSS3 transitions script

Screen_shot_2010-05-24_at_6

I'm quite busy with a sort of webapplication with a lot of fade animations. In an attempt to speed up those animations I tried CSS3 animations (dropping the fps and use a linear transition didn't help). Afterwards it seemed to perform a lot better in (especially) Safari. I made the script work for Opera, Webkit browsers and a future version of Firefox (i'm using 3.5.9). If the browser isn't supported, the script automatically switches back to a normal Mootools transistion.

If you want to try the script you can download it here. You can use .tween and .fade, just replace the first letter to a capital (like: .Tween). Not everything is working yet, just look in the source for further information.

I didn't test anything accept my own webapplication, so use it at your own risk!

You can see a very (very) basic demo here:
CSS3 transition demo

I made this script for a webapplication (also the advanced demo), you can check it out here:
Archive of moments(dutch)
Blog item about the archive of moments

Download zipped version here:
css3-transitions.zip

Please note me if you like it and you're using it (it's free to use and adopt upon and do whatever you like with it, but i like to know)!

If you don't like my implementation, check out the script of André Fiedler here: Mootools Forge Fx.Tween.CSS3 (i found this after writing my own script, i used a snipped of him found on the web and used it in my script). I use .tween and .fade very frequently, so that's why i prefer my script more (didn't try André's script yet).

Filed under  //   CSS3   mootools   script   transition  

Comments [4]