My New Best Telecoms Friend from Google

is Google Voice !

Yes i must say i was addicted to using Skype for such a long time that i forgot to keep my eye on the balls of the Telecom world. I have noticed that my Skype credits were being used up faster than a scared rabbit. As my OH is in India this winter, we use Skype every day for a chin-wag. It is nothing to spend 20 or 30 minutes per call for which Skype often eats about £2 to £3 of my credits. I’m thinking that since Skype was bought by Micro$oft they have been inflating their call charges, hence my need to look again.

Ok, one of my prior posts did review Bistri as a telecoms provider, though in practice, their user experience left something to be desired. Little did i know that Google have been beavering away on a gadget to allow voice and video from our Google Chrome browser. Cannot say if it works in other browsers, more anon.

For Google Voice to work, i needed two pieces of hardware : 1) a microphone and 2) speakers. Ok, well my trusty Apple MacBook has both build in, so i did not need to add further kit. No doubt, an auxiliary headphone/mircophone will work just as well. If you are a Skype user, you probably already have this kit.

All we need now is the bit of software that connects the hardware, thru the browser to the Google infrastructure. This driver can be downloaded from here: and installed in the normal way.

The next time i fired up my Google browser, there was a new bit of technology in the lower left corner of the screen. See that small icon like a folder ? If you click that, it should open a larger panel above it like this :Access Button

Google Voice access
Google Voice access

Then you’ll see two icons of a telephone and to the right of it, a video cam. To start a voice conversation, click the telephone icon. This should open a new panel bottom right that looks like a typical telephone number dialer. Dial Pad seen lower right

Ok, from here, we can key the telephone number of choice, or click the flag symbol to pick the country dialing code if you know it. Then click the CALL button to start your call.

I have not found a feature like skype that offers a list of contacts and their numbers, but no doubt that will arrive soon. The number entry panel does offer a redial feature so if you start to enter a number that you’ve already dialled previouly, you’ll see a dropdown of other numbers you’ve dialled, and from there you can pick a number for auto-completion.

There is nice feature, i stumbled on by accident that offers a neat calling history with charges per call.Access Option  There is a small down-arrow just after the current balance which, if clicked, will open a small choice of features, one of which is History. If you click to review your billing history, you’ll see the panel below. You can also see where you can top up your call credits. i used Google Wallet feature to provide Google with their revenue.

Call History

Must say my call charges are MUCH lower. As you can see here my most recent 20 minute chat with the Frau has cost me the princely sum of 40 euro cents, much lower than ‘that other guy’. Au revoir Skype, long live Google Voice !

JQuery UI Missing animated gif

Wanted to spiff up my jquery autocomplete widget with styling like:

        .ui-autocomplete-loading { background: white
url('images/ui-anim_basic_16x16.gif') right center no-repeat; }


Missing animated gif for autocomplete loading situations
Missing animated gif for autocomplete loading situations

but this requires an animated image like this: which is not typically available in the set of jquery theme icons. So you can save this one here into your website’s images folder as ui-anim_basic_16x16.gif or you can use either of these base64 encoded versions, one for CSS and one as  an html img src entry:

image tag encoded as base64 for use in img src:


Web Designer Tools

My Short List

Here is a short list of the tools i find most useful when constructing or changing websites. This is not a definitive list, it’s jst the tools that seem to work for me. You can always look at some of these :

Designer References

The Web Designer’s Wall – a constant reference on the design-side of life for tools, tips and tricks.

Another designer’s reference i like a lot is the CSS Tricks website. Tutorials and lessons plus news and views – spiffing !


Grids and Layouts, I hear you ask ? Yes, please ! A simple grid approach need not be tough, see here. And my perennial favorite, dontcha know, 960.GS – super ! Layouts for bigger displays can be a pain. Step forward 978.GS.


To teach my entry forms some manners, I pick from Nathan Smith, a constant reference any any business site builder nerd.

The crowd have some interesting tutorials i always find useful. Here is one on making Form checkboxes look better with some CSS and a bit of JQuery.


Have you ever seen a web site without a menu ? No, neither have I, so this quickie tool generates a lovely CSS3-based menuing system, courtesy of  CSSMenu Maker. Here’s one i made n about 10 minutes ->

CSS3 Menu Maker
CSS3 Menu Maker

Colors and Themes

For themes and color references, choose Color Scheme Designer – great for tetrad or analogic color combinations !

I may have blogged about Colors On The Web before, but i’ll repeat myself so you can see the neat tool they have to work out color themes. Look at their Color Wizzard to do the biz.


 Visibone is an old favorite of mine. It’s helps me build compatible color themes and offers more tools than just color manipulation. Worth a look.


Ok, not really a designer’s tool, as such, but useful, never-the-less is this image-to-CSS converter. it’s makes any image into a base64 encoded text string for convenient insertion into CSS or HTML documents from Web Coder Tools.

Sometimes, i don’t always want to use text as a design component, so a tool to convert text into an image can be quite useful. Look here.


CSS3 Gradients
CSS3 Gradients

The Ultimate CSS Gradient Generator gives us a quick route to several types of gradients. The CSS preview bar plus a convenient CSS-to-clipboard feature is vital in the day of high expectations from our user community.


Now that text shadowing becomes possible, our font faces and text can take on a nicer look, it’s a bit like drop-shadows on boxes. CSS3Gen now makes this possible. Thanx, guys !

No list would be complete without a nod to the website font industry. My favorites come free courtesy of the mighty Google men (and great gals, too!). Start here and look here for their web font loader tool and the developer webfont showcase offers graphic examples of the many possibilities we have for free, courtesy of Google.

Just a last item from the Opera browser community is this nice image gallery display. It doesn’t use lightbox but is a cool tool just the same. Hope to blog on this one in more detail, soon.


Ok, i confess, this post was really because i get so tired of looking up my links to favorite tools on my system as it’s always chocked to the gunnels with development software, i just can’t seem to find things. So for me, this is a tidy-up and i can always reference  my own post to retrieve them. Perhaps they’ll help you too. Cool tooling, guys !!


Sometimes i like to have nice shiny buttons to jazz up the user experience. Gradient buttons are even more extreme but worth a look if you have a moment. Look here. For a full set of possible choices, look here. Screen shot 2013-10-03 at 12.32.07 AM


Can’t even really explain this one – just stumbled on it, so perhaps you’ll understand this a little better than me. Start here or look here to see the background of this web page move several objects around as the user moves the mouse over the panel – Wierd !
—> —> The big picture from Sample of Beautiful Parallax Background

Import Bookmarks from Other Browsers Using Opera 12

While doing a review of my previous posts, it looks like many of you are interested in the import and export of bookmarks between browsers of differing persuasions. Read this if you need to know more about bookmarking in Firefox. This post covers the same ‘how to’ for the Opera web browser.

This version of Opera
This version of Opera

Next, assuming you are using this version of Opera, look at the menu bar at the top of your screen. Find the BOOKMARKS menu option and click that.

Take the MANAGE BOOKMARKS option
Take the MANAGE BOOKMARKS option

This choice takes us into the features of Opera where we can work with our previously stored bookmarks.

Import Bookmarks from Firefox
Import Bookmarks from Firefox

Click the FILE option, then click to import one set of bookmarks from the list of browsers shown. You may need to do this several times to harvest all the bookmarks from all your browsers.  Wait while Opera does a non-destructive copy of bookmarks from your chosen browser. At completion, you will find a new series of bookmarks have arrived in your Opera. Mine looks like this – hope your’s does too

Successful import of Firefox bookmarks
Successful import of Firefox bookmarks

Facebook Will Not Play Vimeo Video

Vimeo Fix For Facebook Users
Vimeo Fix For Facebook Users

This tutorial may cure issues where a vimeo movie that YOU have created will not play in facebook. If you see this screen when you attempt to play a vimeo video, then this tip should correct that issue. If the facebook box does not look like this, then this tip may or may not solve your issues. You do NOT need to buy the Vimeo Plus feature to make this work.

Facebook will not play vimeo video
Facebook will not play vimeo video

Log into your vimeo account. If you have more than one vimeo account, you will need to use the credentials and user name that you used when you created the video that does not work. Note that you CANNOT change the copyholder rights of videos that you did not create. You cannot change someone else’s videos.

This problem is because of copyrights and distribution rights you, as the video author, have given or withheld to each video you create. When you upload a video, you declare an undertaking that the video work is your own and that you are the owner of it, and that you have the right to do it. If you are not the owner or do not have the rights to exhibit it, then you should not upload it.

Follow these steps :

Log into your vimeo account.

Look at the menu choices at the top of your vimeo dashboard. Click the menu item Videos.

Click VIDEOS Choice
Click VIDEOS Choice

You should see My Videos as this sample shows. It will show you all the videos you’ve created with this user account.

My Videos
My Videos

Find the video that does not play in facebook. At the top right edge of that thumbnail, is a small icon of GEARS. Click that.

Click the icon that looks like a Gear
Click the icon that looks like a Gear

A panel appears showing you the basic info for this video, plus further menu options that you can play with and do other things with your video. You can put in a title and description of this video, tags that people can use to search for your video. You must save these changes as described below.

Video Settings / Basic Info
Video Settings / Basic Info

Find the PRIVACY choice in the menu bar. Click that.

Click PRIVACY Menu Option
Click PRIVACY Menu Option
Allow ANYWHERE Choice
Allow ANYWHERE Choice

You should see the Video Settings / Privacy panel. Notice that near the middle of this panel is a choice Where can this video be embedded ? As you can see here in my example, the choice was Nowhere which restricted the playing of this video to the vimeo site only. Confirm or change this choice to Anywhere. Also confirm that the other choices allow Anyone to have access to your video.

Settings should look like this after change
Settings should look like this after change

Click the  Save Changes button at the bottom of the screen to update your settings for this video within vimeo.


Go back to your browser and log into your facebook account.

Try to play your video now. It should play normally.  If it does not, then it may be because your browser has stored a copy of the video link in it’s own cache. If you clear out the cache on your browser, you can try to play the video again. It should play normally now. If it does not, then either you have not made these changes correctly, you have the wrong address for the vimeo video, or your browser is unhappy. Try to use a different browser so determine if this is a browser issue, or an issue with the rights on your video.

HTTP Header Content Type and Encodings

Sorry about this – It was thrown together quickly more as notes to myself. Maybe you can use it ?

Needed this info. for one of my websites. Wanted to put up a feature to allow downloading of PDF’s from my google app engine service. So had to dig into the google box to find this material. First up are some references i found that helped me to understand the complexity of the task. This is necessary to create http headers in the payload going to a client like a web-browser. The http session content type is like a ‘suggestion’ to the receiving client as to what the payload has in it. That way the client can properly render or deal with the payload. If no content type is indicated, then the browser will guess as to the type of content. Another important header is the ‘Content Disposition’ which has something to do with the MIME type of the document, and even more importantly, the character encoding. See wiki reference for more MIME.

Servlet Tutorial on Session Tracking


Servlet Response Headers Tutorial

How to Serve A PDF From a Java Servlet

This java sample works but runs as slow as water uphill. Typically you would have a server somewhere on the internet, say amazon S3 or perhaps google, at least a service that supports the running of java jvm’s. how-do-i-serve-up-a-pdf-from-a-servlet

Tutorial on Servlet Content Types

A must read to understand servlet content-type declarations. it’s not as easy as you think !

Unicode and Character Sets

The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
Joel on Software

RFC2045 (MIME) + Base64 Content-Transfer-Encoding

rfc 2045, 1996 – the document that started it all:

How to Create a Custom Jquery Plugin
– courtesy IBM developerworks

Wiki MIME Content Disposition

Oracles’ Servlet Specification Javadocs

Streaming Large Files In A Java Servlet

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ReaderServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 doIt(request, response);
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
 IOException {
 doIt(request, response);
private void doIt(HttpServletRequest request, HttpServletResponse response) throws ServletException,
 IOException {
// fill in tis bit with your PDF file to be read
 String pdfFileName = "somefilename.pdf";
 String contextPath = getServletContext().getRealPath(File.separator);
 File pdfFile = new File(contextPath + pdfFileName);
 response.addHeader("Content-Disposition", "attachment; filename=" + pdfFileName);
 response.setContentLength((int) pdfFile.length());
FileInputStream fileInputStream = new FileInputStream(pdfFile);
 OutputStream responseOutputStream = response.getOutputStream();
 int bytes;
 while ((bytes = != -1) {

It’s possible to have a servlet serve up PDF content by specifying the content type of the servlet response to be the ‘application/pdf‘ MIME type via response.setContentType(“application/pdf“). This tut demonstrates this as follows.

The TestServlet class is mapped to /test in your web.xml file. When the TestServlet is hit by a browser request, it locates the test.pdf file in the root of the web directory. It sets the response content type to be ‘application/pdf‘, specifying that the response is an attachment, and sets the response content length. Following that, it writes the contents of the PDF file to the response output stream.

If we hit the TestServlet, the browser may ask us if we’d like to open or save the test.pdf file. Some browsers will, others do not ask.

This technique can be useful in a variety of ways. For example, PDF content can be generated dynamically and returned to a user via the response output stream without ever needing to create an actual file in the file system. In addition, having a servlet serve up PDF content can restrict access to a PDF file in the file system  since a servlet can determine who should have access to a particular PDF file.
The original article is courtesy of Deron Eriksson:

Servlet Javadocs

Wiki for MIME

(Multipurpose Internet Mail Extensions) discusses these issues more fully: Here we can read up on the different MIME headers, versions, content id’s, content dispositions and transfer encodings. This is a more complex discussion of multi-part messages.

IANA manage the list of known MIME Media types, see here:
internet media types wiki:

java servlet response setContentType allows several possible configurations based on the MIME type: 

or for typical images, something like this:
Content-Type: image/jpeg
Content-Disposition: attachment; filename=santa.jpeg;

Here is a short list

Type of Application

For Multipurpose Files

application/atom+xml: Atom feeds

application/ecmascript: ECMAScript/JavaScript; Defined in RFC 4329 (equivalent to application/javascript but with stricter processing rules)

application/EDI-X12: EDI X12 data; Defined in RFC 1767

application/EDIFACT: EDI EDIFACT data; Defined in RFC 1767

application/json: JavaScript Object Notation JSON; Defined in RFC 4627

application/javascript: ECMAScript/JavaScript; Defined in RFC 4329 (equivalent to application/ecmascript but with looser processing rules) It is not accepted in IE 8 or earlier – text/javascript is accepted but it is defined as obsolete in RFC 4329. The “type” attribute of the <script> tag in HTML5 is optional and in practice omitting the media type of JavaScript programs is the most interoperable solution since all browsers have always assumed the correct default even before HTML5.

application/octet-stream: Arbitrary binary data. Generally speaking this type identifies files that are not associated with a specific application. Contrary to past assumptions by software packages such as Apache this is not a type that should be applied to unknown files. In such a case, a server or application should not indicate a content type, as it may be incorrect, but rather, should omit the type in order to allow the recipient to guess the type.

application/ogg: Ogg, a multimedia bitstream container format; Defined in RFC 5334

application/pdf: Portable Document Format, PDF has been in use for document exchange on the Internet since 1993; Defined in RFC 3778

application/postscript: PostScript; Defined in RFC 2046

application/rdf+xml: Resource Description Framework; Defined by RFC 3870

application/rss+xml: RSS feeds

application/soap+xml: SOAP; Defined by RFC 3902

application/font-woff: Web Open Font Format; (candidate recommendation; use application/x-font-woff until standard is official)

application/xhtml+xml: XHTML; Defined by RFC 3236

application/xml-dtd: DTD files; Defined by RFC 3023


application/zip: ZIP archive files;

application/x-gzip: Gzip

Type Audio

For Audio

audio/basic: mulaw audio at 8 kHz, 1 channel; Defined in RFC 2046

audio/L24: 24bit Linear PCM audio at 8-48kHz, 1-N channels; Defined in RFC 3190

audio/mp4: MP4 audio

audio/mpeg: MP3 or other MPEG audio; Defined in RFC 3003

audio/ogg: Ogg Vorbis, Speex, Flac and other audio; Defined in RFC 5334

audio/vorbis: Vorbis encoded audio; Defined in RFC 5215

audio/x-ms-wma: Windows Media Audio; Documented in MS kb288102

audio/x-ms-wax: Windows Media Audio Redirector; Documented in MS kb288102

audio/vnd.rn-realaudio: RealAudio; Documented in RealPlayer Help

audio/vnd.wave: WAV audio; Defined in RFC 2361

audio/webm: WebM open media format

Type Image

image/gif: GIF image; Defined in RFC 2045 and RFC 2046

image/jpeg: JPEG JFIF image; Defined in RFC 2045 and RFC 2046

image/pjpeg: JPEG JFIF image; Internet Explorer; Listed in ms775147(v=vs.85) – Progressive JPEG, initiated before global browser support for progressive JPEGs (Microsoft and Firefox).

image/png: Portable Network Graphics; Defined in RFC 2083

image/svg+xml: SVG vector image; Defined in SVG Tiny 1.2 Specification Appendix M

image/tiff: Tag Image File Format (only for Baseline TIFF); Defined in RFC 3302

image/ ICO image;

Type Multipart

For archives and other objects with more than one part.

multipart/mixed: MIME Email; Defined in RFC 2045 and RFC 2046

multipart/alternative: MIME Email; Defined in RFC 2045 and RFC 2046

multipart/related: MIME Email; Defined in RFC 2387 and used by MHTML (HTML mail)

multipart/form-data: MIME Webform; Defined in RFC 2388

multipart/signed: Defined in RFC 1847

multipart/encrypted: Defined in RFC 1847

Type text

For Human-Readable Text and Source Code

text/cmd: commands; subtype resident in Gecko browsers like Firefox 3.5

text/css: Cascading Style Sheets; Defined in RFC 2318

text/csv: Comma-separated values; Defined in RFC 4180

text/html: HTML; Defined in RFC 2854

text/javascript (Obsolete): JavaScript; Defined in and obsoleted by RFC 4329 in order to discourage its usage in favor of application/javascript. However, text/javascript is allowed in HTML 4 and 5 and, unlike application/javascript, has cross-browser support. The “type” attribute of the <script> tag in HTML5 is optional and there is no need to use it at all since all browsers have always assumed the correct default (even in HTML 4 where it was required by the specification).

text/plain: Textual data; Defined in RFC 2046 and RFC 3676

text/vcard: vCard (contact information); Defined in RFC 6350

text/xml: Extensible Markup Language; Defined in RFC 3023

Type Video

For video

video/mpeg: MPEG-1 video with multiplexed audio; Defined in RFC 2045 and RFC 2046

video/mp4: MP4 video; Defined in RFC 4337

video/ogg: Ogg Theora or other video (with audio); Defined in RFC 5334

video/quicktime: QuickTime video;

video/webm: WebM Matroska-based open media format

video/x-matroska: Matroska open media format

video/x-ms-wmv: Windows Media Video; Documented in Microsoft KB 288102

video/x-flv: Flash video (FLV files)

XML Use On The Internet

XML is described in more details in this Wiki:
The design goals of XML emphasize simplicity, generality, portability and usability over the Internet.

It is a textual data format with Unicode support for several world languages. It is widely used for the representation of data structures and as a data transport layer between applications written in many programming languages.

XML Dialects include RSS, Atom, SOAP, and XHTML plus several office products such as Microsoft office, OpenOffice and LibreOffice, plus one variant as a comms protocol called XMPP for chat sessions.


The original MIME specifications only described the structure of mail messages. They did not address the issue of presentation styles. The content-disposition header field was added in RFC 2183 to specify the presentation style. A MIME part can have:

  • an inline content-disposition, which means that it should be automatically displayed when the message is displayed, or
  • an attachment content-disposition, in which case it is not displayed automatically and requires some form of action from the user to open it.


In June 1992, MIME (RFC 1341, since made obsolete by RFC 2045) defined a set of methods for representing binary data in ASCII text format. The content-transfer-encoding: MIME header has  a two-sided significance:

It indicates whether or not a binary-to-text encoding scheme has been used on top of the original encoding as specified within the Content-Type header:

  • If such a binary-to-text encoding method has been used, it states which one.
  • If not, it provides a descriptive label for the format of content, with respect to the presence of 8 bit or binary content.

The RFC and the IANA’s list of transfer encodings define the values. See:

Import Bookmarks from Other Browsers in Firefox 14

A feature of Firefox that i particularly like is the ability to import all my book marks from other browsers that i use. Since i often have several hundred bookmarks, it would be quite tedious to copy all those bookmarks over from my Google Chrome, Apple Safari, Opera and Internet Explorer browsers.

So to import those bookmarks into Firefox, click the Bookmarks menu option in the menu bar. It should look like this :

Click Bookmarks menu option
Click Bookmarks menu option

and the Show All Bookmarks menu option should be clicked. This will open the Library panel where we can manage our bookmarks. Because i wanted to pull in my bookmarks from other browsers, i chose to click the button that looks like a star. It should look like this :

Bookmark Star Menu Option
Bookmark Star Menu Option

and from here we can click to see a panel of yet more options :

More options to handle all our bookmarks
More options to handle all our bookmarks

We have a number of choices here. We can choose to Import bookmarks from an external file encoded as html. We can Export all our Firefox bookmarks into an external file encoded in html, perhaps to send to someone or load into another browser. We can Backup all our bookmarks into an external file that can later be used to Restore if our bookmarks are lost or blitzed. Did i tell you that Firefox now automatically makes a copy of it’s bookmarks at the start of each day that you use it ? Click Restore to view a list of prior day’s automatic backups we can restore from. Days may appear to be missing because if we did not use Firefox, then it will not have made a bookmark backup.

Prior automatic backup copies of Firefox bookmarks
Prior automatic backup copies of Firefox bookmarks

My purpose this time is to take in bookmarks from another brower, so I click Import Data from Another Browser and should see this panel :

Choose Browser Bookmarks to copy
Choose Browser Bookmarks to copy

Click the radio button in front of the browser you want to be the donor, then click Continue. This feature will cause Firefox to look into the bookmark storage area of the browser you choose from this list and read all those bookmarks. This is a direct read from thta browser’s internal file system. Cool !  After doing that, my choice of bookmarks has been vastly increased. This pix shows how i imported both Safari and Google Chrome bookmarks.

Now, here is something i’d forgotten that i had tried some time ago – to import Firefox bookmarks into Google Chrome. That must have worked too as if we look at bottom right of this pix, we can see a folder called Imported From Firefox. 🙂   You should try it. It’s not hard 🙂

A Whole New Set of Bookmarks copied from my other browsers !
A Whole New Set of Bookmarks copied from my other browsers !