Design Woop | The Web Design and Development Blog » Browsers http://designwoop.com The Web design blog brought to you by Stu Greenham Mon, 06 Sep 2010 11:53:43 +0000 en hourly 1 http://wordpress.org/?v=3.0 Dribbble – Introducing My First Chrome Extension http://designwoop.com/2010/07/dribbble-introducing-my-first-chrome-extension/ http://designwoop.com/2010/07/dribbble-introducing-my-first-chrome-extension/#comments Thu, 08 Jul 2010 20:07:44 +0000 Stu Greenham http://designwoop.com/?p=1856 So I had a dabbble (notice the three b’s) at my first Chrome extension last week and so far I have had great feedback on the result that came from it. Been a user of dribbble myself, I thought it would be quite cool to be able to quickly preview the latest shots straight from my browser toolbar.

Quick note regarding the making of the extension, I was suprised how easy it was to get something simple up and running, there are some good articles on the web which helped me off and also Google’s own documentation is very handy. Here are two links to get you going:

http://code.google.com/chrome/extensions/getstarted.html
http://tutorialzine.com/2010/06/making-first-chrome-extension/

The Dribbble side of things was a little trickier! At the moment an API for Dribbble is in coming one day soon stage but for now I had to parse the RSS and I was limited to what I could actually achieve with the extension. At the moment the extension allows you to:

  • View the latest debut shots
  • View Everyone’s latest shots
  • View the shots of people you are following
  • The option to customise which user’s following you are seeing

I have had a request to be able to customise how many shots are been displayed at a time and this is on my growing list of to-do’s and should be done shortly! Anyways I won’t go on but here is the link you need to download my extension:

https://chrome.google.com/extensions/detail/gfkbkddclngipjikfhaaicpcpcdhgmai

I would love to hear your feedback and any further requests!

Here are some related posts:

]]> http://designwoop.com/2010/07/dribbble-introducing-my-first-chrome-extension/feed/ 1 How To: Get Chrome on your Mac with Extensions http://designwoop.com/2009/12/how-to-get-chrome-on-your-mac-with-extensions/ http://designwoop.com/2009/12/how-to-get-chrome-on-your-mac-with-extensions/#comments Wed, 09 Dec 2009 19:51:19 +0000 Stu Greenham http://designwoop.com/?p=599 Chrome officially rocks! right? I officially made the it my default web browser at work last week which is a big move for me as I have been a dedicated Firefoxian for several years. After Google added extension support to its browser I was hooked! A week later I have filtered down my favourite extensions (which will be a future post) and now I want it on my Mac too!

I’d given up hope that would happen and that I’d have to wait till early next year when Google pull there finger out, but I am happy to say I have found a solution and you can have extensions working in no time!

The Steps

First you need to head over to here and download the latest build of Chromium (At time of writing I am using 34164) and then install it to your Applications folder.

Next run Chromium and enter the following in the Search/URL bar:

chrome://extensions/

You will be redirected to the extension page which will be looking pretty boring right now. To find some extensions to install go to this website:

https://chrome.google.com/extensions

Once you reach an extension that you want to install you will notice that the ‘Install’ button is greyed out. Open another tab and head over to:

http://grack.com/blog/2009/12/08/re-enable-install-button-for-mac-chrome-extensions/

Scroll down to where it says ‘Enable Extension Install’ and drag this to your Bookmarks toolbar. Now flip back to the Extension you just found and click on the bookmark you just dropped. This will enable the ‘Install’ button at which point you can install the extension!

You will have to do this for each extension as Google will disable the ‘Install’ button but thats a fair price to pay for a working Chrome!

Bookmarks Synching

Another nice little treat is that the latest Chromium build has Bookmarks Synching as you will probably have seen on Windows versions which means for someone like me, you can Sync your bookmarks between both operating systems Boom!

You can find this option by clicking on Chromium in the top left and then ‘Bookmarks Synched…’ at which point it will ask you for your Google username and password.

Here are some related posts:

]]> http://designwoop.com/2009/12/how-to-get-chrome-on-your-mac-with-extensions/feed/ 1 PNG Image fix for IE6 http://designwoop.com/2009/08/png-image-fix-for-ie6/ http://designwoop.com/2009/08/png-image-fix-for-ie6/#comments Thu, 27 Aug 2009 12:14:16 +0000 Stu Greenham http://designwoop.com/?p=453 If you tend to put a lot of PNG images on your websites like I do, then you will know how much of a pain IE6 is! IE6 can display PNG images but it doesn’t play to well with transparent ones, in fact, the transparency won’t work at all! To get around this I have been using the following css hack to display a GIF image in IE6…

background:url('../images/image.png') !important;
background:url('../images/image.gif');

The hack is the !important part of the CSS, because if you put !important after a line in your CSS, then it will take precedence regardless of what appears after it, except in IE! This means for all browsers the PNG is displayed, but for IE the second line containing the GIF is displayed.

This is a good solution for most, and I have used it to get around the IE6 problem on several sites I have designed. Fortunately, there is another option which uses JavaScript to let you display PNG’s properly in IE6, with working transparency!

The DD_belatedPNG script was so simple to setup and so far it has worked like a charm! I have not had chance to fully test it but from what I have seen, it looks good! Here’s how to set it up for your website:

1) Download the JS file from here.

2) Include the following script in the header of your website:

<!--[if IE 6]>
<script src="http://www.domain-name.com/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('');
</script>
<![endif]-->

3) Finally, the fix(”) part of the script requires you to include any classes or id’s from your CSS that have PNG images set as their background. See the example below:

<!--[if IE 6]>
DD_belatedPNG.fix('.class1, class2 img, .class3, div.class4');
<![endif]-->

As long as you have your CSS Selectors correct inside fix(”) then the PNG’s should now display correctly within IE6! If you need to test out your site in IE6 then you can use IETester which is free and can be downloaded from here.

Here are some other posts:

]]> http://designwoop.com/2009/08/png-image-fix-for-ie6/feed/ 1 Help get rid of IE6 http://designwoop.com/2009/08/help-get-rid-of-ie6/ http://designwoop.com/2009/08/help-get-rid-of-ie6/#comments Wed, 05 Aug 2009 16:20:01 +0000 Stu Greenham http://designwoop.com/?p=414 Where to start with IE6! Well for a web designer, its the devil! Literally! It’s been a nightmare for many years now. The browser is so out of date its unreal, and its Microsoft’s responsibility to do something about it. They have now had long enough, and now its our duty to give them a push!

By adding the block of from www.ie6nomore.com, your site will display a message to all users of IE6 telling them they are using an out of date browser, with links to download either Firefox, IE 8, Chrome or Safari (see screenshot below).

IE6 No More Screenshot

I have added the message to this site, now you must all do the same! Go to www.ie6nomore.com to get the code! Spread this message!

Here are some other posts:

]]> http://designwoop.com/2009/08/help-get-rid-of-ie6/feed/ 1