Sephy’s Platzish

This is the start of a short series on making your browsing on Firefox, which is already a more secure browser than Internet Explorer, but there are some improvements that you can make on your own to increase the security you have when browsing.

The first of those is to download an easy-to-use extension called NoScript. The purpose of it is to take all of those various scripts and objects that you find on a webpage and block them from getting to your browser. Needless to say, it is one of the most popular extensions for Firefox out there, consistently in the top ten in terms of downloads. However, there are some detractors who may ask why you’d want to use this, and also those who wonder how it works.

Why NoScript?

Have you ever wondered why it takes a site seemingly forever to load? Does your browser freeze on you when you’re viewing a page? Are you concerned about picking up a virus from an unfamiliar page on the internet?

A lot of the time, these issues all come back to the same sources - a script; either JavaScript, or possibly an object on the page (Flash, Windows Media Player, and Quicktime for example). Depending on the site you go to, there could be a lot of scripts and objects that get loaded as you visit the page. These could be loading just about anything - from those “most recent visitors” widgets, to Entrecard, ads, site counters, and even click-tracking scripts which are used to find out where people are clicking on a site.

Of course, most of these are scripts of the “friendly” variety, but there are some scripts that can be used to your detriment, by trying to exploit a security flaw, or in some rare instances, try to put a virus on your system.

Why not NoScript?

In the interest of fairness, there are several detractors to this particular extension - they point out that Firefox is already a very safe browser, which is true, but the point of NoScript is to allow you to choose which scripts run on a page. My personal favorite is this plea posted in the reviews section for the addon -

Please, for all that is sacred in the world of Web 2.0, do not use NoScript. Firefox is a secure browser, JavaScript can do no damage to your computer, the browser, your privacy or any personal data.

Of course, he goes on to explain how Cross-site scripting can be used to damage your personal data (by the way, NoScript blocks Cross-site scripting attempts).

Another common complaint about NoScript is that it is somewhat confusing for novice users to use, especially when the visit a site that says that they cannot view the contents because of JavaScript being blocked or disabled on a site. The truth is that NoScript can be a bit cumbersome to use to start out with, but the learning curve is not too steep if you have a basic understanding of menus on a program.

Installation & Getting started

To install NoScript, it is no different to installing any other Addon - simply visit the Mozilla Addons site and install the extension. After restarting Firefox, you’ll likely be directed to the NoScript website to see the change log (you’ll be directed to that site every time that it updates as well - you can turn that particular feature off; instructions are available in the FAQ).

When you visit the next site (except for sites that are already preloaded in the whitelist - Google, Yahoo, Microsoft, Mozilla Addons, and the author’s sites), you will receive a notification that looks like this -

You may also hear a sound from NoScript telling you that scripts have been blocked on the page. If you want to allow the scripts on a page, simply click the Options menu and choose to either Permanently or Temporarily allow the site’s scripts.

After allowing the scripts, you will need to reload the page to activate them - this is something you will always have to do whenever you select to allow or disallow scripts on a page. Also, when you allow a site, you can revoke the permission by clicking on the NoScript icon in the status bar - which is the blue S in a circle, possibly with a crossed circle on it if there are other scripts on a site which are still blocked.

Also, if you have turned off the notification bar, you can use the S in the status bar to adjust permissions on a site by site basis. This is what the menu looks like after allowing mozilla temporarily (a temporary permission is in italics and a permanent permission is in bold) -

So far, I’ve only shown mozilla.com which does not have any external scripts running on the site.

More advanced usage - sites with external scripts

However, where NoScript comes into its own is when you’re browsing a site that has a lot of external scripts. For this example, I’ll show you my site. First off, this is what a page on my site looks like with NoScript turned off (i.e. allowing all scripts to run globally) -

And then, this is what the site looks like with scripts turned off; you’ll notice the missing elements all in the right hand column - Entrecard, MyBlogLog, Blog Catalog and Alexa.

And, just to show you all the sites that have scripts on here, this is what the menu looks like when I’ve got all scripts blocked (note that this is the status bar menu, and not the information bar menu) -

This is where, for some users, NoScript can become quite tedious. If you want to allow a script to run on a site, you need to both the site that hosts the script (for example, with Entrecard, you need to allow both amazonaws.com (to show the card), and when you refresh the page to show the card, entrecard.com - so that you can drop your card). This is what the widget looks like if you only have amazonaws.com allowed -

As you can see, you can see the card, but the Drop yours link is not there. When you allow entrecard.com and reload the page, you will then see the link to drop your card -

Now, an important thing to know is that even if you have allowed a site to display its scripts, you need to allow the host site to show scripts before you can see things like Entrecard, MyBlogLog and Blog Catalog.

To use a practical example of how this works, this is what SCHWOIT looks like with schwoit.com blocked (note that the Entrecard widget should appear right in the upper-right corner of the site) -

If you view the full size image, you’ll notice that the information on the info bar has changed. Since there are scripts on this site from other sites that I’ve permitted to show scripts, it now says that scripts are partially allowed, and tells you how many sites are allowed out of the number of sites that have scripts on that page. Now, if I go to allow schwoit.com, this is how the window looks -

More advanced features

There are a few more advanced features that are included in NoScript, such as a pseudo blacklist - that is available in the menu under Untrusted. However, since NoScript is a whitelist-based add-on, the only thing that this untrusted list does is prevent a site from appearing in the list you see of sites to allow when you open the Options menu, status bar menu, or right-click menu.

For a full list of features, along with the full range of settings that are available to you in NoScript, you can check out the features page at the author’s site.

Any questions?

If you have any questions about how this all works, or if you have more advice on making the NoScript experience better, feel free to leave a comment.

As always, if you’d like a how-to written up about something, all you need to do is drop me a line via the contact form. If I know how to do it, I’ll write it up, but even if I don’t know how to do it, I will go and figure it out and then write up the how-to on getting it sorted out.

Coming soon

Sometime in the next week or so, I’ll have the other half of the combination that makes (at least) my browsing experience so much more improved - Adblock.

I had planned on this being a post to show you how to fix a problem with some recent versions of the All-in-One SEO plugin for WordPress, but actually, the solution’s as simple as downloading the latest version - 1.4.5.3 - and installing it on your site.

The problem that I was going to describe would be one where you hadn’t set an option in the Options panel of putting your blog’s title into the Home Title section, your blog’s homepage would wind up not having a title at all. While your blog’s title would still be visible in the body of the site, search engines would see your site as not having a title.

Fortunately, according to the Change Log, this issue has been rectified by going back to the old behavior of having the plugin revert to the blog title in case the Home Title wasn’t set in the options panel.

I have to say that while some people complain about the frequent updating of the plugin, I think it’s a good thing to see that uberdose, the author of the plugin, pays attention to bugfixes and makes sure to not leave things unresolved for a long time.

I’ll be honest - I don’t update it every time there is a new update; generally, I do plugin upgrades at one time every so often - but when I have a setup that works, I like having it stay the same and not worrying if an upgraded plugin will break the site (which is very unlikely anyway). 

One of the things that happen when you switch a site from one place to another, or from one blogging platform to another is that you need to be sure to update any sites that are dependent upon your present address for providing services.

Among those is FeedBurner, if you have chosen to use their services; if you haven’t, it’s definitely recommended and if you need help on getting started with their free service, I have put together a how-to on putting your feed on there. It’s quite simple to do, and did I mention that it’s free?

Now, if you’ve already burnt your feed with them, changing the source feed for it is quite simple to do.

First, log in to your account, and from the My Feeds page, click on the title of the feed you want to change.

Then, in the feed stats dashboard, click on Edit Feed Details…

A little sub-window will pop up giving you the title of your feed, the current original feed address, and the Feed Address that you’re using for FeedBurner. There will also be an advisory to not change your original feed address unless you are actually changing the address of your original feed.

Since that is precisely what we want to do here, go ahead and change the address that is in the Original Feed line to what your new feed’s address is. If you’re using WordPress, you’ll want to use - http://{domain}/feed . By the way, you’ll need to click on this to see the image in full - it’s just too wide to put in full width

Then, click Save Feed Details to confirm the changes you want to make to your feed.

If you’ve just changed your hosting to a new service, you may see a 404 error; that is not unusual - all that means is that FeedBurner’s servers haven’t found your site’s new address - try again in a couple of hours, and it should work then.

Last week, I happened upon this post which asked about how you position an image in WordPress - this person had been used to working with Blogger’s style of inserting images with the dialog and only 3 positions possible.

Although WordPress is a very powerful system to work on with your blogging, with the use of a simple plugin - Advanced TinyMCE Editor - all the image options are just as easy now, as it was with Blogger.

Generally, when you insert an image in WordPress, you’re using the upload section, found below the editor window in the new post page. It’s a very straightforward thing to do, but if you need a refresher, Snoskred has an excellent guide on how to do that.

If the image you want to insert is not one you’re uploading to your own site - for example, a Flickr photo you have permission to repost (either direct from the photographer or through a Creative Commons license) - there is a function built into the Editor. It’s the Image button, which can be found in the second row of the toolbar -

That will bring up this dialog, just like this with all the lines blank -

When you put the address in, the editor will go ahead and load the image in the Preview panel. If you’re satisfied, then click Insert. The great thing is that, unlike Blogger, you can always go back and edit the image’s look without having to worry about knowing much HTML.

If you simply insert the image using the defaults, it will appear like this on your blog. It will use the specifications that are found in your theme’s CSS file for spacing and borders, and other bits for appearance.

If I start a paragraph right after the photo without a new paragraph or setting text positioning settings, as you can see, the text will start from the bottom right of the image. This is something that can also be changed in the Insert/Edit image dialog.

To access the dialog after you’ve posted the image into your post, simply click on that image, then either click on the Insert image button again, or right click on the image and select Image properties. The dialog will come up and look like the second one posted above. To change specific items about the image, click on the Appearance tab, which looks like this -

The quickest way to change the alignment of an image in your post is to use the line of the same name. There are a myriad of selections that you can use. Below, using the same image as above, I’ll show you what the that will look like. The image above is using the “– Not Set –” option.

The baseline setting is no different to the not set setting. The text will start at the bottom of the text, as if the image was part of the line of text.

This is the top setting - in this setting, the image acts like it’s the main feature of the line, but the text to the right goes from the top of the image, and creates a large white space between the end of the first line’s text to the beginning of the second line.

The middle setting will place the text in the middle of the image vertically. This creates a large white space between the top of the image and the text, and then between the text and the rest of that paragraph.

The bottom setting is, again, no different to the default or the baseline settings - as in those, the image is seen as part of that line of text.

This is the text top setting - not really any different to “top”. By this point, you can probably see that with HTML, there are generally a few different ways to get to the same conclusion.

The absolute middle setting is another clone of the “middle” setting from above.

This is the absolute bottom setting - look familiar anyone?

Now, we get to some interesting looking images. This is the left setting. As you can see, the text will now flow around the image; generally, if someone is putting text as part of their regular posting - such as showing people what product they’re talking about, or an image of the author of that particular column. The catch is that, with this setting, all of the text will flow around the image - including other images.

---

Depending on the width of your screen, this horizontal line might still be to the right of the last image, but the next image is over there, on your right. This is, as you might guess, the right setting. Once again, all text will wrap around the image, and this will include images once more. Eventually (and I’m judging this on my monitor being maximized and the editing window being quite wide), you will see that the text will start move back to the extreme left of the line after the previous image. If you’re on a smaller monitor, the text probably has already gone under this image.

---

Something you will have noticed is that the only image that has moved away from the left side of the page - that is because all of these adjustments to the alignment have to do with the vertical alignment of the image in relation to the text. If you want to put the image into the center of the post, you simply use the buttons in the toolbar. :)The next section that you see in the window are the dimensions. This is only really useful if you want to post a full image and then resize it to fit your needs. Generally, I don’t recommend using this function as this will make images not look very good - the only time that you should reduce the size of an image is when it is definitely too big for your blog’s design, and you can’t use a thumbnail linked to the original image. The next image will have a setting of only typing in 125 for width, and checking the constrain proportions box. The great thing about that box is that you only need to put one dimension in, and it will automatically sort out the dimensions to keep the image in the same shape it was.

Now, let’s take a look at the vertical and horizontal space functions. In some blog templates, these will have some default values set out in the CSS properties for that theme, others will not. First off is the vertical space. I’ll set the next image to have a vertical space of 30 pixels - just to exaggerate the effect.

Edit: Now that it’s live, I can see that my template doesn’t like the settings. I’ll work on a fix for that. I’m guessing it will involve CSS…

The image is on the “not set” for the alignment, and as you can see, thanks to the vertical spacing, there is now an appreciable white space around the image. For the next image, I’ll change the horizontal space to 30 pixels again.

Now here, you can see that the image is well clear within the same line to the text. There is one last example to use - setting both variables to 30.

With this setting, you have a pseudo-border; one that is transparent and will blend into the background of your blog’s template. However, if you want to use an actual border, use that line; an example of which (set to 15n be seen in the next image.

I just want to note that for this image, I made the color red by putting this line in the style line of the dialog box - border-color: #ff0000. With that, you can see that there is the separation between the image and the text again, but this time it is a colored area.

Edit: OK, I’ve changed everything to a CSS-based property, but it appears that my template likes everything now except for the border example, which it doesn’t like at all…here is what it looks like in the editor (with a manually-added 2 pixel border ) -

The next line of the box, class, is used to select from the two style classes that are involved in the editor, the same ones in the class drop-down in the toolbar - generally, there won’t be much use to those options. The last line that is in there is the style entry - there you can enter any CSS you would like to use to change the appearance of the image. However, most of the functions covered by style (although they’re the preferred method now) are covered by the other sections of the box.

This will now bring us to the last tab of the dialog box - Advanced. Here, as the term suggests, you can adjust advanced settings. I’m not going to go into the explanation of the options, as, quite honestly, they’re stuff you’re likely never to use - at least I don’t use them.

It’s not terribly difficult to work with images in WordPress, and the settings are, as I mentioned, even more powerful than anything you’d ever seen in Blogger - also, you don’t get all the excess code that Blogger dump into their image code (you know, the cursor settings and other stuff that clutter up the code more than anything else).

As always, if you’d like something explained, drop me a line via the contact form.

Something that anyone who has their own webspace needs to know how to do from time to time is how to upload files to their server. If you are lucky enough to have a server where you have access to a piece of software called “cPanel X” or some other control panel software that has an included file upload manager, FTP can prove to be a useful backup.

However, most of the time, you don’t have access to something like this and have to rely upon a special type of program called FTP - which stands for File Transfer Protocol. There are a lot of programs out there - most of them free - which will allow you to use this protocol easily, and not have to worry about all of the technical details behind the scenes.

While you can use Internet Explorer’s built-in FTP features for your uploading and downloading needs, there is a much better solution out there, and it is absolutely free.

FileZilla is an open source client which has been around since early 2001, and has been available for just about every Operating System for the last year or two. It is available for download from the FileZilla Project homepage.

After you’ve downloaded and installed FileZilla, run the program and this is what you will see at first -

The quickest way to connect to a server is to use the toolbar that has the “Quickconnect” button on it. In this example, I’m going to be blanking a lot of stuff out, since I’m going to be logging into my own site’s ftp space, and I like to have my security you know.

All you need to do is type the host you’re connecting to (usually ftp.{yourdomain}, unless told differently by your system administrator or host), your username and your password into the lines and click Quickconnect. You will not need to worry about the Port slot unless you’re told to use a port different to 21, which is the default.

After you’ve connected, a couple of things will have changed - first, the top part of the window will have had a lot of text scrolling through - that is just simply FileZilla connecting to the server, sending your username and password and listing the directory of the home directory you’re starting from. Also, the file listing from that directory will be listed in the right hand panel. It will look something like this -

Almost all of the time, you’re going to be just uploading files to your server, and you need to make sure that you do it in the right place. If I were to upload a file to the home directory for my site, you would not be able to view it. Depending on the setup of the server you’re on, the directory you will need to upload your files into will vary. For some it is “public_html”, but for my site, it is contained in the httpdocs directory. To open it, simply double-click on that directory. Again, some text will flash by on the top screen, and the new directory will appear in the right pane again. You will also notice that above the file listing, the directory listing will change to reflect your new location on the server.

To actually upload a file, be sure that you are in the directory that you want to upload the file to. In this case, since I’m going to be uploading a picture, I’m going to put it in the /img/ directory. As you can see, there are the three WordPress directories there - wp-admin, wp-content, and wp-includes; that’s because I have my WordPress install in the root directory.

There are a couple of ways to upload a file to a server in FileZilla - the first is to use the built-in file explorer. There, just head to the folder on your computer where the file(s) you want to upload are located, and then double click on the file you want to transfer to the folder. You can also open up a Windows Explorer window in the folder where the file is located and then drag and drop the file into the server side of the FileZilla window.

During the transfer, the file(s) you’re uploading will be listed in the bottom panel of the window as queued transfers. The number that is in parentheses will tell you how many files are left to upload. If, for some reason, a transfer fails, it will go into the failed transfers. After transferring the file successfully, it will be listed in the Successful transfers tab, again, the number in parentheses indicates how many files have been successfully transferred during the session. If you click on the Successful transfers tab, it will look like this -

A couple of additional items that are good to know about FileZilla are file permissions and the Site Manager.

File Permissions

In FileZilla, they are called File Attributes, but it is the same thing - there are times when you’re working, say, with WordPress and it will ask you to change permissions on a file or folder. To do that, simply right-click on the file or folder and select File Attributes. This window will pop up -

When you’re asked to change permissions by WordPress, it will say, for example, to “chmod {file} to 777.” In order to do that, you can simply type in 777 in the numeric value box and it will change the checkboxes to the appropriate settings for that particular mode and then click OK to confirm the changes.

Site Manager

The Site Manager is useful if you have multiple sites you’re connecting to via FTP. While the Quickconnect bar will keep a history of the servers you’ve connected to (just click the down arrow next the the Quickconnect button to see that list), the Site Manager will save any and all sites you need to have access to. It also will make a quick list of sites to connect to from the toolbar - click the down arrow next to the first button on the toolbar to see the list of sites in the Site Manager.

To add a site to the Manager, go to File and then Site Manager. It will pop up in its default state - i.e. with nothing preloaded.

Click New Site and then enter your Host, change Logontype to either Normal or Ask For Password if you would prefer to not have your password stored with FileZilla. Again, unless told by your server admin, you will likely not need to worry about Port, or the other tabs of the Site Manager window.

By the way, if you’re curious, here’s the file that I uploaded - you’ll have to click to see it (in a new window).

If you have any questions about FTP, or about other FTP programs, feel free to leave a comment. Also, if you’d like me to post a walkthrough of something else on the net, feel free to get in touch