Feet Have Been » Browsers

Inconsistencies with File Upload

xangelo — Fri, 13 Aug 2010 03:17:21 +0000

Before I even begin I want to state that this shouldn’t be used as a definitive source for this information. I am utilizing an older version of Firefox (3.0) and IE7 for all my tests. I can’t vouch for Chrome, Opera or Safari’s take on any of this, but I gather that it is much the same.

At some point in your web programming or web design career you will inevitably encounter the dreaded file upload “utility”. This piece of crap, is only present to allow users to select a file on their machine and eventually transfer it to your servers. Of course, this is a vital piece now, but perhaps at the time it was something that was easily overlooked. After all, at a time when your ISP speeds were approaching the 14.4kbps mark, uploading files was really something only the computer geeks did.

Now however, with profile pictures, online resumes, cloud storage and so much more, the file upload feature is front and center. Some places have gone so far as to eliminate the default HTML object and instead go with a Flash equivalent. This doesn’t really fix the issue, it’s like me saying “oh your computer doesn’t work? Here, use my iPad” ¹ It’s just a bypass. We need to fix this now! It’s already too late, we’re just playing catch up.

Understanding the Process
File uploading is one of those features that, if you’re unlucky, you’ll have to design a layout around. That’s because, for some reason, every browser has decided that the File upload object is completely immune to CSS. No amount of styling can ever achieve what you want. It will always look like ass.

File upload in Firefox and IE

There is no easy way to style it, there is no way to replace it (unless you use flash, but that’s a whole different issue) and the only way to get around it is to hide it or integrate it directly into your design. There is absolutely no way to pretty it up. You can’t adjust the size of the button or the size of the input box. You are essentially stuck, with what you see. No way around it. Or is there?

Short of changing your entire design to work with default form elements (euych!) the only way to fix the file upload feature is to hide it completely. See, because we can still apply some style features to an encapsulating element ². So we could technically just hide the entire form field, and absolutely position it over our custom designed field. If we do it all right (we WILL have to use either a custom IE stylesheet or a bunch of hacks) we can make it look like our pretty file upload field is actually doing the work!

The Code
The code for this is primarily CSS with some JavaScript sprinkled in to make sure that everything is positioned where it should be. I am utilizing the jQuery library for a lot of this simply because I use it in a lot of my projects. If you use any other libraries, they should all have equivalent methods and if they don’t, you should ditch them and switch to something else. If you are trying to follow along in straight JavaScript good luck. One of the primary reasons I work with a JavaScript library is because of cross browser inconsistencies. With a library, I can be sure that someone has gone through the painstaking task of setting up different kinds of math and implementation for the different browsers.



  File Upload

The CSS below is what we will be using to style our new input fields.

#fake-file input {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 2px;
  }
  #fake-file button {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 1px 8px;
    background-color: #FFF;
  }

Now it’s as simple as adding some positioning values to our file-constraint field. We will also alter the z-index and position it higher vertically than our fake file upload. Then we can simply utilize some JavaScript to make things work like it should.

#file-constraint {
position: absolute; 
top: 0px; 
left: 0px;
z-index: 2;
display: none;
}

Bam instant hidden. Based on the position of your actual fake file field the top/left attributes will obviously change. The JavaScript is just as simple. I am utilizing jQuery to hook in to the onChange event for the real-file field, but it’s not necessary. You can do the same without a library. I just prefer jQuery because it means I can target all browsers the exact same way.

$('#real-file').change(function(e) {
var str = $(this).val(); 
str = str.split('\\')[str.length-1]; 
$('#fake-file-title').val(str);
});

Basically we get the value of the file upload field. In Firefox this is just the name of the file, while in IE it contains the complete path to the file. I prefer stripping out the path, but that is up to you. Basically the value from the real file field is just assigned to the fake file field.

Working with file uploads are a hassle and this really only covers a portion of the client-side. There are still many things to take into account such as temporary file locations, file permissions, fake-ajax / standard uploading etc. This tutorial isn’t meant to be a complete compendium of all things file uploading, but merely to point out some annoying UI inconsistencies.

Notes:

I really don’t have one http://wheremy.feethavebeen.com/2010/02/blagging-about-the-ipad/ ↩
A div that contains the file upload field, for example ↩

ChromeOS – Revolution or Bust!

xangelo — Mon, 23 Nov 2009 14:00:41 +0000

Everyone seems to be going a little over board with the newly announced Chrome OS. Don’t get me wrong, I love all new shiny things – I’m a shiny-new-thing-lover, but people are not only blowing this out of proportion, they’re not even talking about the right things. Let’s break it down shall we?

What IS Chrome OS?
Simply put, Chrome OS is Google’s take on the PC. They essentially stripped out the actual operating system and you’re running a slightly glorified browser. Why slightly? Well, because they’re essentially using Google Chrome with a few added tweaks. Want to know how it will run? Just pop open Google Chrome and hit the maximize button. Sure there will be a few UI tweaks and a couple of additions here and there, but that’s essentially what you are looking at.

What’s the big deal then?
The big deal here is two-fold. First off, it’s by Google! For die hard Googlers (me and damn near everyone else -.-) nothing Google can do is wrong! And even if they put out something questionable, they either fix it, or kill it and explain why. Google is also huge on the internet. Their applications either enjoy huge successes, or bomb and are killed quickly. Therefore, people come to expect a certain level of awesome from Google, and they expect that by Google officially calling Chrome OS it’s own project that they will get awesome. Secondly they used the word “cloud” multiple times, and right now that word is a game changer.

I’m confused.
Don’t worry, you’re not alone, a lot of tech bloggers seem to think that Google tipping its toe into the PC market will result in a revolution. Some people even think that Microsoft should watch out. They’re wrong. Google is trying something different, sure, but it won’t have much of an impact on people who aren’t tech savvy. Let’s examine this idea a bit more, with the use of some average customers.

Customer 1 – Just want it to work
I worked for a while as a sales associate at a fairly large computer store. Customers would come in daily looking for a computer that they could use just for checking their email, browsing the internet and listening to some music. They didn’t do anything fancy, and were therefore not looking for anything overly expensive. Sadly, Chrome OS only satisfies 2.5 of their results, and even then, it clobbers them into something they’re not quite comfortable with. Web based email is something that is finally catching on to the main stream. It’s the newer generation that are really making strides with the cloud. Older generations are more comfortable with Outlook Express. That isn’t to say that won’t get used to a web-based client. It will just take some time. It took me a few months to move my parents away from Outlook Express and to Gmail. My father handled the move fairly well, but my mother found it a hassle. In fact, to this day she will delete and email rather than archive it, even if there is a chance she will use it later. The internet is what Chrome will excel at. But “browsing the internet” usually translates into 25-30 pages that a user will visit frequently. The last bit is where users will really get confused. Since ChromeOS doesn’t have a native file-system, there isn’t any way to store your files on it. That means that all your music on your old PC will stay on your old PC. If you have an mp3 player you can definitely hook it up and look at your music, but you can’t play it. Of course, if you have an iPod you’re just out of luck. iPod’s will require iTunes which requires a hard-drive. If you want to listen to music now, you’re stuck going with online services like Lala, Pandora and Last.fm. Of course, Pandora doesn’t work in most places, and that extensive library that they’ve build up won’t work.

Customer 2 – The Gamer/Hardware Guru
They know exactly what they are looking for and won’t waste your time. They’ll have a list of things they want and they’ll just run through your store and pick them up, stopping you only if they can’t find something. They’re veterans. They already know ChromeOS won’t let them play games or download movies and music or even let them tinker about with some music editing software that they need and they won’t waste time thinking about it.

Customer 3 – The self-proclaimed guru
These customers generally have some idea of what they’re looking for, but have no clue about specifics. They think of themselves as better than the average user and tend to have idea’s about systems that they’ve just picked up from others. They don’t know if ChromeOS is right for them, but once you mention that it doesn’t have a hard-drive they’ll be a little skeptic.

Customer 4 – Curious
This is the only customer that will pick up ChromeOS. They have an idea of what ChromeOS is about, and they know that it won’t replace a desktop or laptop, but still, they’re curious about it. These customers will come in looking specifically for ChromeOS and if you don’t have it, they’ll move right on to the next place.

And that is why ChromeOS isn’t going to go up against any of the big OSes. It’s not designed to. At its core, ChromeOS is meant for a very niche set of users. People who like Google’s products and are looking for a hassle free way to access them. It’s not meant to replace your current machine, it’s a supplement, something that Google themselves has tried to make clear. If you’re interested in reading up some more on Googles ChromeOS, I’ve included a couple links to some articles that I think address the situation rather well.

http://gizmodo.com/5408712/what-google-needs-for-the-chrome-os-to-succeed
http://arstechnica.com/open-source/news/2009/11/chromeos-announcement.ars/

FTP (and it’s cousin, SFTP)

xangelo — Mon, 26 Oct 2009 13:00:42 +0000

What is it?
From the techical side of things FTP stands for File Transfer Protocol. It’s just a fancy way of saying it’s a standard for transferring files between your computer and another computer, be it a web server, or just your friends pc. FTP isn’t something you generally need to worry about until you own a website, and then you’ll eventually realize that the file uploader that comes with your cPanel account by default just isn’t cutting it. When technical people refer to FTP they’re really saying FTP Program, which is a utility that you can install that can take advantage of the File Transfer Protocol and transfer some files from your PC to another one.

Do you have it?
Chances are, if you are the administrator of a server (even if it’s someplace you host your website online) you have access to FTP. Most hosting companies try to make it as easy as possible for people to set up their FTP accounts, and generally pouring through the help documents will ..well help. But if you log into your control panel (most likely cPanel) you can look for an icon that looks like this, or just says “FTP” on it
Setting it up
Essentially the page you are trying to get to will let you create and administer FTP accounts. The image below is what cPanel users will see. It’s a pretty straight forward form, and you just need to fill it out. The login is just the name that you will use to log in to your account. For my system, it’s set up to be login@feethavebeen.com, where “login” is a username that I created. The password is what you will need to enter to log in to your FTP account. Make sure it is something complicated, and if you’re not sure, just hit the Generate button and add a few characters onto the end. For some hosts, they automatically fill out the “Directory” setting. You should just delete this or set it to “public_html/”. That will ensure that the user you are logging in with can access all the files on your server. When you’re done just click the “Create FTP Account” button and wait for everything to be done. You’ll generally get to a confirmation page that will show you the username and password that you selected. Make sure you either write them down somewhere or remember them.

Accessing your account
Now that your account is created, the next step is accessing your server using that account information. To do this you have a couple of options. IE users can log in through their browser by going to ftp://www.yoursite.com and then logging in using their username/password combination. That’s fine for downloading files, but when you want to start uploading them, I’d recommend and actual FTP client such as one of the following:

http://www.smartftp.com/
http://winscp.net/eng/index.php
http://fireftp.mozdev.org/ - Firefox Addon Only
http://filezilla-project.org/ – Supports both SFTP, FTPS and FTP

You can download and install the FTP client and start it up. Generally when the clients start up they ask you for your account information to log in. You can set the host as your website, the username as the username you gave in the form, and the password that’s associated to it. Make sure that the PORT is set at 21. FTP utilizes port 21 to perform it’s functions. By default winSCP is set to PORT 22 (more on this in a second). Once that’s done, you can sign in to your ftp account.

Using FTP
Using FTP through one of the clients is very simple. You are normally presented with a split view. The files on your computer are on the left, and the files on your web server are on the right. To move files, you just drag them from your computer to the web server, or from the server to your computer. The files are then transferred over. There are many advanced functions that each FTP program offers, but that is something that is beyond the scope of this article.

SFTP?
By default, FTP transmissions are not encrypted. This means that your files and more importantly your passwords (thanks for pointing out that I missed this part Felipe) are passing in plain-text between you and your webserver. Most times this isn’t an issue, but if you are transferring sensitive data, or are just paranoid like me, you’ll want to use Secure FTP. Secure FTP encrypts all data that it transfers and therefore, is a little slower than standard FTP, but it is worth it (at least tome). Out of the FTP clients I mentioned, only winSCP can handle the SFTP. When using SFTP, you have to make sure that your PORT is at 22 instead of 21.

Cross Platform Bookmarking with Delicious

xangelo — Thu, 22 Oct 2009 13:00:41 +0000

Personally I never saw the use for Bookmarking tools until I started having 20+ tabs open. Then bookmarking tabs became the only way that I could keep track of them. I would bookmark a tab, close it and just get back to it whenever I had time later on. The default bookmark manager was more than up to that simple task. And then I started working with multiple browsers and multiple locations and things got a little more confusing. Suddenly, it wasn’t as simple as hitting a button anymore. I needed a way that I could not only bookmark items but also look up these bookmarks on a computer where I couldn’t install addon’s. I needed to be able to access it from a multitude of browsers and 2 different OS’es.

After much searching on the net, I settled with Delicious.

To start off with, Delicious requires you to create an account with them. Registration is free, and only takes a few moments. Lukily, I had already registered my name when Delicious first started (it’s a habitI have) so I logged in and took a look around. What you’ll want to do once your in is either add the add-on for Firefox or Internet Explorer, or grab the bookmarklet if you’re using anything else. I’d recommend going through the Quick Tour pages as it covers setup and basic use of it. Since I’m using Firefox as my default browser, the rest of the screens will be from the addon installed on that.

Since I only need to see my bookmarks and add new ones, I’ve customized the interface a little. First off, I right clicked near the address bar and select Customize and then dragged the following two icons to my single toolbar interface.

The first icon is the “Tag” icon. It lets you quickly save a page to your Delicious library. So when you stumble on a page you want to save, clicking it opens a little form for you to fill out. Hit save to add the link to your library.

The other link simply opens a little sidebar that lets you browse through your bookmarks and open them up and re-organize (tagging, deletion, renaming etc).

Short of registering your account on Delicious, you never actually need to set a foot on the website since prettymuch everything can be managed right through your browser.

If you’re looking for a cross-browser bookmarking service, definitely go with Delicious!

Single Toolbar Interface for Firefox

xangelo — Wed, 21 Oct 2009 13:00:17 +0000

This is a video tutorial that I did a long time ago for one of the earlier versions of FHB that went by the name Xangelo (which is my online identity). It covers some handy features like customizing the Firefox interface and keyword shortcuts for search engines.

Since I work on a laptop primarily, screen space is of vital importance to me – the more I can see the better. I’ve taken the default firefox from it’s 3 Toolbar + Tab bars to a single toolbar + tab bar. To do this I utilized the “Customize” feature in the video above to drag all my elements around. I also used the ability to hide and show toolbars (they’re in the same menu as customize) to eliminate the unneeded ones.

My toolbar now looks like this, with the Navigation tool bar and Bookmarks toolbar disabled.

For more information about customizing your toolbar in Firefox, check out this great post over on Online Tech Tips

Must Have Apps

xangelo — Tue, 20 Oct 2009 14:00:05 +0000

I just did a fresh install of Windows 7, legitimately gotten through MSDNAA, and so I decided to write up a list of applications that I don’t think a windows user should be without.

Browser

To me, you have two real choices here. Either Firefox or Chrome. Chrome doesn’t support extensions that I require so Firefox is it for me. Chrome offers allthe features that Firefoxdoes except for extensions, but if you just need something to browse the next, Chrome is it. You’ll find it faster than Firefox too when it comes to rendering pages, and when you have 20+ tabs open, it will feel a lot snappier. Firefox, on the other hand, offers an extensive extension library as well as tabbed browsing, password management (albeit very basic), anti-pshishing controls, standards compliant web-browsing and a pop-up blocker (Chrome offers these as well).The extensions add everything from Chat to advanced download managers to twitter clients. Once you get used to that, I’d recommend checking out this video I made a long time ago: http://www.youtube.com/watch?v=RXGpBYjnFkE It covers converting your default browser to take advantage of as much screenspace possible, and also covers a more advanced tip about search shortcuts.

Winner – Firefox
Runner Up – Chrome

Chat Service

There are numerous chat services out there, but for me only two matter. Windows Live Messener (or MSN Messenger as it used to be called) and Google Talk. In fact, it’s safe to say that my chat services are dominated by WLM to the point that I can get by without installing Google Talk as a separate client and I just use the web version. This will sorta be dictated by geographic region, I find countries like India and Indonesia use Yahoo! Messenger more than WLM, which seems to dominate the West. You can also go with Skype, Digsby (if you’re into multiple chat clients), Trillian and a host of others. However, these are kinda dictated by your friends. If everyone uses WLM, you’re probably going to use it too.

Winner – Windows Live Messenger
Runner Up – Digsby

Anti-Virus
This is the biggest thing that Windows users need. I can’t point my finger at Windows forbeing riddled with security holes in comparison to other systems. It’s just that so many more people use Windows, and so many people are looking for ways to break it. But that doesn’t mean you can’t take a few steps to secure your system against threats. A good anti-virus program won’t cost you much (heck, it’s probably free) but will save you tons of time and headaches later on. A good anti-virus should provide constant scanning and frequent updates to its virus database. As well, it should be as light on resources as possible. Price is also a factor. For that reason I have chosen NOD32 and Avast!. Avast! offers a free version of their anti-virus located here, while NOD32 is pay only. I highly recommend NOD32 if you have the cash, because it is a great piece of software. However, if you’re strapped, Avast! offers much of the same functionality.

Winner – NOD32
Runner up – Avast!

Those 3 types of applications form the basis of all your computing. Your browser allows you to interact with the web, your anti-virus keeps you safe, and your chat services let you connect to friends. Everything else is just icing on the cake.

Downloading With Rapidshare (Premium User Account)

xangelo — Mon, 19 Oct 2009 14:00:58 +0000

Rapidshare is becoming one of the number one sources for downloading illegal materials damn near anything. Of course, downloading from Rapidshare can be a bit of a hassle. The problem is two fold.

Rapidshare forces users to click a download link, even if they are premium users
Often times downloads are split into multiple parts

This guide will set you up for downloading everything you want from Rapidshare through Firefox, with the use of some handy addons.

Set Up Direct Downloads
This is something that can be configured through your Rapidshare premium account. Log in to your account and look for the account settings link. You want to look for the configuration section and make sure that Direct Downloads is checked off. Then you can save your changes. This ensures that if you are logged into your Rapidshare account you will be able to bypass the button click to download files. Simply pointing your browser to a valid file will let you download it. We’re almost done here, but DON’T click log out. Because of how Rapidshare works, as long as you are logged in you can continue to download without clicking the link and logging into your account.

Getting a Download Manager
Since at FHB we try to stay as cross platform as possible, I’m recommending one of the best addon’s you’ll find for Firefox, DownThemAll! DTA! lets you quickly download all the links or images present on a page. It also offers you a comprehensive download manager as well as a host of other options. I suggest you check out our post on DTA! for a full run-down. Regardless, even if you don’t use Rapidshare files, you’ll want to install this addon. There’s no point in using it just yet though as you’ll find that Rapidshare links are often posted as text instead of actual click-able links (referred to as Anchor tags). This is a problem since DTA! can only read actual links, so we’ll need some sort of mediator between the two.

FlashGot (The Mediator)
FlashGot also allows us to highlight links and select download, but it also offers us the handy ability to highlight a selection of text links and select “FlashGot Selection” to download them. This is what allows us one-click access to downloading Rapidshare files. The Problem with FlashGot is, it doesn’t come with its own download manager. It just sets up everything so that another download manager can get use them. When you first start FlashGot it will ask you what download manager you want to use, make sure you slect DownThemAll!. And that’s it, with this addon in tow, we’ve now got an excellent way to download any illegal legal rapidshare files.