JSON is a well structure interoperable way of passing data between systems. It’s a good way of passing large amount of data into a web page for JavaScript to process and between system on the internet regardless of there architecture or programming language.

JSON is one of the hardest data structure to read directly as a human in it’s RAW format compared to other formal grammars such as XML, YAML or ini.

Fortunately there is an easy trick that you can do with Chrome, Firefox with Firebug and even Opera and IE9!

Take the JSON you have, wrap it in “eval()” the same as you would if you where writing a web page (because it is just JavaScript after all) run it and every modern browser this was tested with should allow you to inspect the resulting data structure.

Example JSON:

{"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}


Firefox with Firebug:

Chrome:

Opera:

Internet Explorer 9: Note: To see this structure you need to click the “Add watcher” link displayed upon running the code.

Responsive web design is an excellent way to make a site work really well for a variety of different screen sizes without having to serve more than one design to users. Responsive web design does pose additional challenges however.

Some of the challenges for you, as the developer, are being able to implement, test and debug the design implementation. Fortunately built in to Firefox’s arsenal of developer tools is an interface for exactly that!

Lets take a website that uses a responsive design:

Here is the ‘mobile’ view:

So every thing is normal you can use the developer tools and Firebug or whatever. If you then need to make changes to the smaller version and use Firebug you would have to pop out Firebug (which may or may not be to your preference) then resize the main window. This works ok but Firebug currently isn’t great for working with responsive designs as it doesn’t show you all the rules that might apply based on the screen size and other conditions. This is one area that the Firefox built in tools beat Firebug. The styles editor shows you all rules that could apply and their conditions.

To activate Firefox’s responsive design view press Ctrl + Shift + M. You can open the inspector and stlyes by pressing Ctrl + Shift + I. You can also access the responsive design view by going to Tools Web Developer. With responsive design view enabled you can still use Firebug without a problem, unless you enable the built in element inspector then you kind of lose loads of screen space.

If you are using Firefox browser on Linux Mint you might have notice that the default search engine is not Google but DuckDuckGo.

DuckDuckGo are presenting themselves as the biggest threat to Google search engine bringing as the main advantage more privacy than what Google currently offer.

If you are happy with it than you are fine but if you feel like me that DuckDuckGo might have some interesting features, it does not bring the same result or way of using internet than Google search engine then you might want to come back to Google then please follow the below step by step procedure:

Type about:config in the location bar and press Enter

Type keyword.URL in filter

Change the keyword.URL value to:

http://www.google.co.uk/search?ie=UTF-8&oe=UTF-8&sourceid=navclient&gfns=1&q=

Hope that help.

If you ever used Webmaster Tools in Firefox but have now switched to using Chrom(e|ium) instead then you probably miss the form filler – especially if you ever need to test checkouts or other form intensive web site user stories.

A nice little extension that I just discovered takes care of this, Chrome Form Fuzzer.

You can configure it for simple form filling or with a little creative configuration it could easily be used for security testing and more in depth testing to ensure that input is being sanitised and filtered properly.

Having issues with javascript dependencies or awkwardly structured html defining objects you need before run?

This is a little trick I used combined with csnover’s roundrect.js to provide IE versions < 9 with border-radius rounded corners.

Create a separate source file e.g. mylateloader.js and in it include the following code :-

function myInArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        var str = jQuery(haystack[i]).attr(‘src’);
        if(typeof(str) != ‘undefined’ && str.search(‘.*’+needle+’.*’) > -1) return str;
    }
    return false;
}

jQuery(document).ready(function(){
    var script = document.createElement(‘script’);
    url = myInArray(‘mylateloader.js’, document.getElementsByTagName(‘script’));
    script.src = url.replace(‘mylateloader.js’,'mycoolminifiedfile.min.js’);
    document.getElementsByTagName(‘head’)[0].appendChild(script);
    setTimeout("mycoolobject.run()",2000);
})

That way, at document.ready(), mycoolminifiedfile.min.js is loaded from the same directory on the server as the late loader js and 2 seconds later, the mycoolobject.run() is called.

If you have ever had to browse for a coding solution, you will have come across the problem of “smart” quotes replacing normal punctuation. Thankfully there is a simple fix to to this, a userscript called DumbQuotes which can be downloaded here.

This will convert all of the single & double quotes into something more code friendly.

Ever need to quickly test some HTML that you copied from some where?

If you have Firebug installed, you can open a new tab, go the the HTML tab in Firebug, click edit and paste your HTML and Firefox will render it. This is faster than having to open a text editor, paste the contents and save the file, but JavaScript on load events won’t fire.

If you’ve ever had that annoying problem where someone has asked you to put a flash banner on a site and it covers up your nice dropdown or pop-out menus, you’ll be glad to know that the current versions of flash don’t do that if you set the right parameter! Yes that even includes flash on Linux browsers!

The parameter is called “wmode” and needs to be set to “transparent” for the z-index problem to go away.

Don’t forget that search engines don’t read the text in flash files so you don’t want to use flash where you don’t have to, but when a banner is required and is provided by a third party it’s not always possible to avoid it.

If you use FireFox with phpMyAdmin you will be able to resize the left column as required by simply grabbing it with your mouse

However in Chrome that doesn’t work.

The fix is surprisingly simple, you just need to edit the index.php file and set all the frameborder=”0″ to frameborder=”1″

Job done

It used to be Tabberwocky but that’s died with FF4

I now recommend Tab Mix Plus which lets you achieve the holy grail, duplicate tabs!

Who would have though it was so hard.

Maybe FF5 will get some chrome like tab controls but for now this extension does a fair bit