Posts Tagged ‘Coding’

July 5th, 2010

External Links New Window

Open All External Links in a New Browser Window

Expanding on the post about XHTML valid target post.

Lets make this a bit automated using jQuery to search for external links and add a class named external.
As before, these links will be XHTML valid.
Then from the post we are expanding on these links will be automatically opened in a new window.

To start we need to load jQuery in our site, quick and simple we will load it from Google.

Select All
1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Moving on to the code needed for our task,
The Full Code, I will explain following the code.

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

jQuery(document).ready(function(){
	//Process links to check if they are internal or external
	var start = "[href*='";
	var local = 'http://localhost/';
	var urlcheck = start + local + "']";
 
	jQuery("a[href^='http:']").not(urlcheck).addClass('external');
 
	//External links should now have a class added to them, lets process this classes action
	jQuery(function(){
	      jQuery('a.external').click(function(){
			window.open(this.href);
			return false;
	      });
	  });
});

The line that MUST BE CHANGED

Select All
1

var local = 'http://localhost/';

The http://localhost/ needs to be changed to the URL of your site.
For example, here it would be http://validwebs.com/

It gets added to the urlcheck variable and used for checking all links against with in the viewed page.
Then the search happens in this line

Select All
1

jQuery("a[href^='http:']").not(urlcheck).addClass('external');

If any links in the page do not have the URL var local they will have the external class added to them.

Then the click function is added to the class external the same as in the original post.

Select All
1
2
3
4
5
6

jQuery(function(){
    jQuery('a.external').click(function(){
        window.open(this.href);
        return false;
    });
});

From that point on all external links with in the site will open in a new browser window.

Tags:


Posted in:

jQuery

Comments:

No Comments »

April 15th, 2010

Web Development Tools of the Trade

When developing sites, coding in general or even support in a community there are quite a few tools that make the job a lot easier on a person. This is a list of tools that I use along with many other developers out there and are invaluable…

Note: Some of these tools can be resource intensive.
I run most of these tools, even all at once, but it is on a 4 Core workstation with 6 Gigs of Ram.
  • Local Host
    You simply can’t develop efficiently without one and you don’t want to be updating some clients site with out testing your code first. That’s where a local host comes in and is extremely faster than using a test site on the web somewhere because there is no uploading or transferring of files.
    • I prefer XAMPP
    • MAMPP for Mac
    • There are many other Local Host options out there, try a few and see what works best for you.
  • Browsers FireFox, IE6 – 8, Safari, Opera, Chrome
    • FireFox, If you don’t all ready have it I should reach out and slap you :)
    • IE Tester
    • Opera
    • Safari
    • Chrome
    • Generally speaking, if you develop in FireFox the others will usually be fine with the exception of less than IE8. You still have to browser check to be sure and do your minor tweaks!
      This is assuming your code validates.
  • Browser tools
  • Integrated Development Environment (IDE)
    • NetBeans is currently my IDE of choice.
    • Aptana Aptana Studio 1.5 had a PHP plugin. I will dig that up as well..
    • Eclipse Is just about the root of about 75% of all IDE’s out there as most of them are built off of it..
  • Quick Text Editor
    • NotePad++ My all time favorite quick code editor. Lite Weight and Free!
    • WinMerge is actually a diff tool but also has code highlighting. Used for finding differences between files and directories.
  • Graphics Editor
    • Photoshop You will need to spend some coin on this but nothing compares.
    • Gimp The GNU Image Manipulation Program.
    • Paint.NET – Free Software for Digital Photo Editing
  • Video Recorder for Video Tuts
    • JingPro My favorite and very reasonable price and the only one I could find with true quality..
  • GIT
    • Repo’s
      • Assembla I have a paid package for the private use feature for customer projects.
      • GitHub
  • SVN
    • Repo’s
  • Time Recording for keeping record of times on projects.
    I currently use HourGuard from NCH Software, it seems reliable and has a reasonable price tag (Free) and exports times to their invoicing software. I have tried many others, some that don’t even keep correct time and some that do but have less features or some other issue.
  • Invoicing Same here, I currently use Express Invoice from NCH Software, it seems reliable and has a reasonable price tag (Free – Pro version)
  • Project Management
    • Assembla, I can’t find any other site with more relevant tools for web development projects.
      I give Assembla[rate class="gold"]5[/rate]

There are a ton of web based tools for everything from photo manipulation to code editing to invoicing. I don’t use them for one simple reason, you need web access to work with them. Obviously you need web access for this line of business but having the tools on your machine will always be faster and if you have internet down time, you can still work..

On the same note, there are thousands of tools out there for web development, this I know. This is simply the list of the tools I use and the tools that I know do the job.

With that , have fun and happy coding :)

Tags:


Posted in:

Tools & Tips

Comments:

No Comments »

January 19th, 2010

Valid Code & SEO

I am not a marketing guru or an SEO expert, but I am a developer and part of my job as a developer is to code semantically with SEO in mind.

Does valid code improve SEO?
No it doesn’t improver your rank status.

BUT
If your code is not valid,

  • It can hurt your SEO rank because of semantic issues.
  • It simply looks unprofessional.
  • It will slow down page loading because the browser switches to Quirks mode to evaluate your code and decide how to display it.
  • It can cause display issues with in various browsers.
  • The list goes on…………….

Fact is, if your code can not be followed because of being invalid, it will most likely cause issues displaying in browsers, being read by bots /spiders and most likely will have accessibility issues.

Use the tools available, they are there for a reason.
For the employers, do this also, validate the work you payed for, you will not regret it and it will save you money in the long haul.

Validation Tools

Tags:


Posted in:

SEO

Comments:

No Comments »

December 30th, 2009

NetBeans 6.8 and Macros

Well, I have been playing with the new release of NetBeans and I must say, I Like It!
It has a lot of useful features that I am really enjoying and find very useful fro productive development.
2 main items being the Macro Recording and the Snippet Palette.

The macros I had a bit of difficulty finding documentation on keywords, which seems to be a common issue.
So here is what I have found out, all shortcut keywords are fair game. List_Of_Shortcuts , at least anything like this adjust-caret-top is for sure.

The keyword Action is usable, eg “caret-forward”.
So say you wanted to end a string with a shortcut to place a semi colon ; at the end of the line.
Here is the macro I use
caret-forward ";" and I set it to a shortcut of Ctrl + ;

So when you have say

echo 'This{Ctrl + ;}'

right after the s in This you hit Ctrl + ; and it will jump over the last quote mark and add a semicolon

Let’s do something a little more sophisticated like a comment block for a $variable.
Here’s your code

$my_var = '';

Now you want a decent comment block for that var, here is the Macro

"/**" insert-break "@var " word-match-next insert-break "@return " word-match-next insert-break

All you need to do is use your Set Shortcut for that Macro on the line before the variable and it will make a comment block that looks like this.

/**
 * @var $my_var
 * @return $my_var
 * 
 */
$my_var = '';

So with this Macro feature you can create all sorts of speedy shortcuts.

As for the Snippet Palette, well just highlight the code and drag & drop it in the category you want and name it. That simple.

Tags:


Posted in:

Tools & Tips

Comments:

No Comments »