10 Random HTML5 Web Tools & Resources

We all know that HTML5 is a new web technology led by Apple and it will be the next big thing! In the not to far future, HTML5 will be a powerful weapon that all web developers and web designers can use when creating new innovative web based apps. In todays post, we have called [...]

Read more

Beautify Your jQuery Code Using beautify.js

It can be very time consuming to make your jQuery code neat and tidy. Fortunately, there are online tools and heaps of plugins that can automate this task for us. I recently had the need to generate JavaScript/jQuery code dynamically and thus it comes through messy and unreadable. So I decided to use beautify.js to [...]

Read more

2 Options to Show All JavaScript on Page

Here are 2 options to quickly view all the JavaScript used on a web page. Could come in handy when trying to find event handlers or specific code without searching through individual files. Option 1: Bookmarklet – A bookmarklet (drag it to your bookmarks) by Ichiro Hiroshi to see all JavaScript’s used on the web [...]

Read more

Using jQuery to Test New Website Fonts

This is a neat little script I found which lets you preview live new font’s for your website using jQuery Font Dragr. Could be useful if your showing a client what various fonts look like, or for just everyday font test for website. Enjoy.

Instructions

1. Copy and paste into a new bookmark (right click paste on the bookmark toolbar)
2. Visit the website you want to font preview
3. Click the bookmark
4. Populate the font list by dragging fonts into the bar
5. Instant preview on with jQuery selector to target specific elements

The Code

javascript: (function (d) {
    var s = d.createElement('script'),
        h = d.head || d.getElementsByTagName('head')[0];
    s.src = 'http://fontdragr.com/bookmarklet/fd-script.js';
    h.appendChild(s);
})(document);

View the code: http://fontdragr.com/bookmarklet/fd-script.js

Obfuscated Version

javascript:var _0x5a5b=["\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x73\x72\x63","\x68\x74\x74\x70\x3A\x2F\x2F\x66\x6F\x6E\x74\x64\x72\x61\x67\x72\x2E\x63\x6F\x6D\x2F\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x6C\x65\x74\x2F\x66\x64\x2D\x73\x63\x72\x69\x70\x74\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64"];(function (_0xf8bcx1){var _0xf8bcx2=_0xf8bcx1[_0x5a5b[1]](_0x5a5b[0]),_0xf8bcx3=_0xf8bcx1[_0x5a5b[2]]||_0xf8bcx1[_0x5a5b[3]](_0x5a5b[2])[0];_0xf8bcx2[_0x5a5b[4]]=_0x5a5b[5];_0xf8bcx3[_0x5a5b[6]](_0xf8bcx2);} )(document);

Read more

10 Tips to Master the Firebug Console

Here are some tips so you can start owning that Firebug Console!

If you don’t know what the Firebug Console is then here then start here: What is Firebug and how to set it up.

Tip 1 – How to Hide Annoying Errors

Firebug has options to hide those annoying network errors! (you might see these if your proxy settings are out, if your at work check with your admin that your using the right .pac file). This options menu can also be used to hide other error types. Very useful!

Tip 2 – Keyboard Shortcuts

Instead of clicking “run” with the mouse you can Press CTRL+ENTER to run the code that is in the Firebug Console. See a Full List of Keyboard Shortcuts.

Tip 3 – Firebug Console Table

Create a firebug console table – just paste in the code below to check it out!

var table1 = new Array(5);
for (var i=0; i<table1.length; i++)
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
console.table(table1);

Tip 4 – Console.dir()

The benefit of using Console.dir() instead of console.log() is that on objects, arrays and other types it displays their properties straight up, which can save time. You can simply type dir(nameofobject) into the Firebug Console. I like dir.

Also to note that “Dir” works without “console.” (but log doesn’t!)

JQUERY4U = {
    url:'http://www.jquery4u.com',
    mainTopics:'jquery,javascript'
}
dir(JQUERY4U); //works without console.
log(JQUERY4U); //doesn't

Tip 5 – Console.debug()

The benefit of using Console.debug() instead of console.log() is that it cuts out all the crap which can get annoying when your trying to debug you JavaScript code. Useful for those who use it frequently, not many do. Love debugging? Read more info on debugging chains

Tip 6 – Create a Quick Bookmarklet

You can create quick bookmarklet of the code in your Firebug Console. Simply press copy > right click bookmark bar > click paste. Job done. Now you can click that bookmark to run the code when you need it, even across browsers for testing purposes.

Some bookmarks to try out:

• jQuery Floating Bookmark Globe – Awesome Fun!
• JavaScript to Edit Web Page Directly

Tip 7 – Using Firebug NET Panel

Learn how to use the Firebug NET Panel: How to Analyse HTTP Requests using Net Panel, HTTP Fox & Fiddler2.

Tip 8 – Firebug “Add-ons” and Extensions

There are heaps of useful ‘add-ons’ to complement the Firebug Console. See: 10 Extension Plugins to Extend the Firebug Console

Tip 9 – Firebug Console API

If you didn’t already know there is a Firebug Console API with lots of useful information.

Tip 10 – Checking DOM CSS Styles

In Firebug you can easily check the styles associated with any element thats on the page. Simply right click and inspect that element then switch to the CSS tab. In the CSS tab, any styles that are striked through means that it has been preceded by another style. Remember styles take the following precedence: 1) inline, 2) in-page 3) stylesheet. You can edit the styles live and double click inside the tab to create a new style for that CSS tag.

Hope these quick tips helped you learn something you didn’t know about the awesome Firebug Console.

Read more

10 Forum Applications, Addons and Extensions

Despite the rise of social networking many of us are still into discussion forums. Suppose you have your own website, discussion forums are a great way of ensuring active participation from your site’s visitors. We’ve collected some free open-source forum install applications, scripts and add-ons that can help you improve your current forum or get a new forum going on your website. Enjoy!

The community is relatively smaller, so you’re riding on just the documentation for support, if needed. Looks more like a dated copy of phpBB, but it does have an integrated shout box and news system to its credit.
Pros: Integrated shout box and news system
Cons: Small community

Source

Offers excellent integration with WP and comes from the same stable as WordPress and. It shares the same database as WordPress, so if a user registers on the blog, he or she automatically gets a forum account.
Pros: Light-weight, superb integration with WP sites
Cons: Basic and limited features (in comparison to the others)

Source

Can be termed as the unexploited talent among forum software. It is still relatively lesser known, but has several unique offerings up its sleeve.
Pros: Options to create a portal, etc.
Cons: Less popular, so small community support

Source

It is free and highly responsive forum software that, at the moment, seems to show a lot of promise.
Pros: Light-weight, easily customizable
Cons: Still comparatively new, so there might be apprehensions about the future

Source

Is yet another light weight and easy to use forum software with great features such as Import of XML feeds as well as easy syncing with mailing lists.
Pros: Terrific features
Cons: Outdated (and dull) interface

Source

Has numerous features and is one of the fastest growing forum software (in terms of popularity).
Pros: Awesome feature set, well support
Cons: Fast enough, yet not the fastest software around

Source

Has nothing extraordinary to offer to its credit. However, most forum scripts are based on PHP. MW Forum, on the other hand, employs Perl.
Pros: Very fast
Cons: Basic set of features

Source

Has a sleek interface and is extremely easy to use. It is suited for beginners and intermediate users.
Pros: Regular updates, nice design
Cons: Small community

Source

Is one of the oldest players in the game (since 1998). Obviously, it enjoys widespread usage. However, of late, the update frequency has been lesser as compared to the newer alternatives.
Pros: Reliable, easy to install
Cons: Feature set becoming outdated

Source

It has been in active development since 2000. If you’ve been into web development for some time, chances are, you’ve already encountered phpBB in action somewhere. It also has bridge and integration options with certain CMSes.

Source

Read more

10 Tips for developing with jQuery in Notepad++

Notepad++ had always been my favourite free editor for coding with JavaScript ever since I can remember. Here are some tips I have picked up while developing with Notepad++.

1. Quick compare code using Notepad++

This feature is great for finding out quickly what code changes have occurred between files. First open the two files next to each other in the Notepad++ Editor (or copy and paste into a new file for quick compare).

Then with the first file selected press ALT+D or click from the menu Plugins > Compare > Compare

If the files match you will get a popup saying “Files Match”. Otherwise if the differences appear in a right hand pane highlighted so you can easily double click these to view the code.

Then to get rid of the compare window press CTRL+ALT+D or click from the menu Plugins > Compare > Clear Results

You can also view horizontally if you prefer! Simple right click on the divider column and click

2. Useful keyboard shortcuts in Notepad++

Just a few quick keyboard shortcuts that I use when developing.

1. F11 – Switch code to full screen without top menus. To switch back simply press F11 again. F12 does the same thing but not in full screen.
2. CTRL+D – quick copy paste current line to line below.
3. CTRL+Q – Quickly comment out lines of jQuery code. Press CTRL+Q again to uncomment.
4. SHIFT + right arrow – Quick select characters.
5. CTRL + SHIFT + right arrow – Quick select words.
6. Triple left click – Quick select whole line.
7. CTRL+A – Quick select whole document.
8. ALT+F2 – Quick Google search.
9. ALT+0 – Quick collape all code into blocks. To unfold code blocks press SHIFT+ALT+0

More Keyboard Shortcuts

3. Useful free plugins for Notepad++

There are heaps of free Notepad++ plugins available that do awesome things from simple spell checkers and color pickers to FTP synchs and Directory Searches. Here are some of my favs:

• TextFX – Lots of very useful features such as code cleanup, neaten, minify etc. One of the first, one of the best.
• Multi Clipboard – MultiClipboard plugin implements multiple (10) text buffers that is filled up via copying and/or cutting of text.
• Switched – Simply switch between any associated files, which is extremely useful if you have some of your excerpts set up with hot keys.
• Colorpicker – This plugin can decode the colour of a pixel on a palette and paste its RGB into the editor.
• SearchInFiles – Allows a user to find files that have a lot of excessive information piled deep within the code itself.

To install the plugins simply download the .dll files and extract them into the folder “App\Notepad++\plugins”.

Wiki Directory of Notepad++ Plugins
Sourceforge Download List

4. Minify your code using Notepad++

Pretty useful feature to quickly minify your jQuery code. Simply do the following:

• Edit > Blank Operations > Trim Header and Trailing Space
• Edit > Blank Operations > Remove Unnecessary Blank and EOL

Also see: Other ways to minify/hide your JavaScript code.

5. Neat up your code using Notepad++

Previously I have posted on how to making your jQuery code pretty using Notepad++. Simple select from the main menu TextFX > TextFX Edit > Reindent C++ Code.

However, I have found an awesome online tool called Javascript unpacker and beautifier. This tool actually makes your JS source code look nice and pretty and was worth a mention.

6. TortoiseSVN plugin for Notepad++

Make sure TortoiseSVN is installed and you’ve installed the latest version of Notepad++.

The plugin comes in the form of a zipped, dll. Simply unzip the dll and place it in the Notepad++ plugins directory. For a typical install, it will be located here: “C:\Program Files\Notepad++\plugins”. Next time you launch Notepad++, the plugin will automatically be loaded.

The plugin should work under Windows XP, Vista, and 7. Both 32 bit and 64 bit operating systems are supported. If you find any bugs on these systems or others, drop a comment and I’ll see if I can address them.

I’ve noticed that sometimes Notepad++’s auto-updater thinks the plugin needs to be updated. This usually results in a new version being overwritten by version 1.0. If you update to 1.1 or 1.2, do not use Notepad++’s auto-update feature when it prompts you for this plugin.

Download

7. The Notepad++ Wiki

Stuck on something technical in Notepad++? Don’t stress out just visit the Notepad++ wiki and there might be something on there to help solve your problem.

Notepad++ Wiki

8. Set language to JavaScript in Notepad++

Don’t forget to change the language your coding in so that the built in Syntax highlighter can work it’s magic!

9. Delete Line Numbers

Sometimes when copying code from other websites we end up with stupid line numbers and have to manually remove them in order to use the code. Notepad++ to the rescue!

TextFX > TextFX Tools > Delete Line Numbers or First word

10. Word Wrap

Useful if you like coding with all of your code visible on screen and hate scrollbars (i know i do!).

Simply click the word wrap button or select from the main menu View > Word Wrap.

Conclusion

That’s it! Hope you have learnt something new with Notepad++ to assist with your future jQuery developments. If you know of any more that I have missed please post a comment.

Get Notepad++ for Free

Read more

10 Free Desktop Apps for Managing Code Snippets

Lets face it, copying and pasting pieces of code into text files etc is disorganized and a waste of time. Here we’ve collected 10 FREE amazing desktop apps for managing your code snippets. These applications will make your development life much easier, so start checking out the list, and see which one would fit your style best. Have fun!

Lets you easily organize, use and share code snippets using a clean Mac-like interface. You can store snippets of code and retrieve them with a few keystrokes.

Source

Is a clean and simple application that makes your code snippets—as well as clippings and files—available at your fingertips. You just do a single click or press a single keystroke and you have your snippet.

Source

Saves you countless hours by allowing you to create shortcuts for your snippets as well as phrases you frequently type. Create new snippets from the clipboard or via the easy-to-use snippet editor.

Source

Not to be confused with the other Snippet Manager below, is a free simple-yet-feature-rich application for managing snippets. In addition to storing snippets locally, you can optionally store your snippets online to access them from anywhere.

Source

Is a free utility for managing your code snippets in a variety of languages: VB, C++, C#, Java, SQL, ASP, PHP, HTML, even COBOL, Assembler and Fortran. You can also use Snippet Manager to manage plain ASCII text data.

Source

Is a free, simple, fast program which stores your code snippets so you can use them anywhere. With CodeDogg, you can synchronize snippets with all of your computers and devices, so you always have the latest versions of your snippets handy.

Source

Is a free code snippet manager with support for a local database as well as a shared database. With the server side application you can share a code snippet library between multiple users.

Source

Is a free basic text and code organizational tool. By using it you can save, organize and retrieve your snippets in one convenient location.

Source

Is a free online code snippet collector tool with a clean and simple interface. The snippets are stored online and since it is web-based, you can access them from any computer, platform and browser without the need to install software.

Source

Is a free cross-platform application that helps you manage your code snippets. It is written in Java.

Source

Read more

WireShark – go deep! (HTTP Request Analysis)

Wireshark is a network protocol analyzer for Unix and Windows. I have only brushed the surface with this tool so far but it comes in handy when performing analysis on http requests between your machine and others on the network.

http://www.wireshark.org/

Before you start

• Wireshark captures every request so only click start when you are ready to capture and click stop when your finished
• You’ll need your IP address

Basic Instructions

1. Download, install, run
2. Click start to capture requests
3. Use the expression filter to find your requests, here are some common filters:
   1. ip.addr == 10.27.999.99 (for example)
   2. ip.dst == 10.27.999.99 (for example)
4. Find the request you want to analyse and Right click > Follow TCP Stream
5. This should bring up the request in full

Read more