Programming & Web Dev

Here are some useful things that I've learned slowly that Firefox can do, in conjunction with the Web Design toolbar, to make life easier for a web designer. These tools will allow you to pick up on mistakes much more easily, and help in the design of your site.

Firefox

Here are all the things that Firefox can do on it's own, without any extensions.

Error Console

The error console can be reached by going to Tools > Error Console in Firefox. It lists warning and error messages about your site. It can also be reached by pressing the far right icon on the Web Designer toolbar (see below).

It's useful to detect where a error is in CSS especially, although it is also useful for use in debugging Javascript. If you are debugging a CSS Error, make sure you fix the first error in the sequence, as one syntax error will throw off a lot of code after it. Here I have deliberately created an error in one of my css files, so you can see what a CSS error looks like:

The error I created was a missing '}', in the definition above the '#visual-portal-wrapper' id.

View Source

The View Source page (right click, View Source) is a wonderful tool. It will pick up on basic html mistakes. Also, if one of the other tools has given you a line number to look at, it will highlight the line selected, as well as putting numbers to the left hand side. All useful little tools.

See the screenshot here to see an example of a coding error: (Click for full-size)

I have circled the area which the mistake is in in red. All the text colour is done by firefox, including the red part showing close to where I've gone wrong. I've also blanked out some things that could be used to identify the site which I was working on. Yes, I know that HTML is awful. It was very early in it's build stage. It looks a LOT nicer now. I even managed to get rid of the table :)

Page Info

The page info section is a little box, hidden under Tools > Page Info, which gives you detailed information on the web-page. Not as much as you can get using the Web Designer toolbar, but it comes in handy every now and then, especially if you want to examine a security certificate closely, or get information on how a form is working.

Here are a couple of screen shots:

Media lists all of the images, audio and video used on a page. It even gives you a preview box. (Info box can be resized to make it fit...)


The "Save As..." button allows you to download the media item.

Web Designer Toolbar

If you are a web designer or developer, and you don't have this toolbar, GET IT NOW!

It adds so much functionality to Firefox just for web designers, its untrue. I only have time to go through a couple of those functions. I'm picking the ones I find most useful during my work. But, there is much, much more, so explore it when you have the chance!

You can get the toolbar from here: http://chrispederick.com/work/webdeveloper/ or here: https://addons.mozilla.org/firefox/60/.

Disable Cache

It literally, stops the browser from caching anything, from images to css style sheets. This means, that you can just hit "CTRL + R" to refresh, instead of "CRTL + SHIFT + R" or "CRTL + F5" to skip the caches. This tool, however, does eat your bandwidth, so I would recommend only using it if your development server is in the same building / on the same LAN.

Display Element Information

This is a really useful tool. It will allow you to both highlight elements on your screen, as well as see information about them. A quick way to activate this is using the shortcut "CTRL + SHIFT + F". Alternately, click on "Information" and then "Display Element Information".

Here is a couple of screen-shots, currently showing information about my main content frame. I have cut this image up a bit, for those on low-resolution systems to be able to see it properly.

As you can see, the information is quite comprehensive. All attributes are shown from the element, including (if defined) style elements. Also, you can see just below the Web Developer tool bar a box showing all the containers (and styles) of the item I have selected. (The .body class is an artefact from whilst I was leaning CSS: its no longer used.)

The entire frame around my blog highlighted in red whilst the cursor was on it. The Information box popped up when I clicked inside the element.

Resize

This is a feature of the web Design toolbar that I can't work without. We now design all of our sites to work with 1024 x 768 (As you may have noticed with this site), but also try to make them compatible with 800 x 600, as far as possible. Resize allows you to resize your browser to a defined value. When it is first installed, the resize drop-down only has 800 x 600, but it's just the work of a few moments to add 1024 x 768.
(Click on "Options"in the tool bar, click on "Options..." and then the resize tab. Then click the add button. Or, if you have the latest version, Click on "Resize" in the tool bar, and then click on "Edit Resize Dimensions")

No more changing my screen resolution, just to check the site. Here (again!) is a screenshot, of the options window that is opened when you choose get to the resize area...

Here is a screenshot of the drop-down menu:

Conclusion

Hopefully that has given you enough information. There are a plethora of other useful extensions to Firefox for Web Designers / Developers. If you have the time, look through the "Developer Tools" category in the Firexfox extention repository. I would also recommend the "Professor X" extension, which allows you to see a detail of a webpage's head, and all the information inside very easily, without having to open and scan through the source, and nicely formatted. (Screenshot here)

Had a situation pop up today at work. Spammers started to target (at a stupid hour in the morning) one of our customers' servers with referral spam. That is, they try and get their website's links into our logs.

Cue 9 hours later, I get in work, and one of our servers is complaining (seperate issue). Sort of fix that, to get a call "Our server is really slow."

So, go through the motions. Load on the server: 0.50 (for windows guys, think of it as the amount of spare thinking time the computer has, when load hits 1, its running at full capacity, when it goes above 1, it is having to make some tasks wait to run.)
Nothing wrong there.

Ping the server. 20ms response time. Nothing wrong there.

Remember that we installed ntop on a couple of servers a while back, and that this one should have it on as well. Load up the traffic graph. Wooo! Steady incoming traffic of ~2Mbps (~600kB/s).

Check the Apache server-status page. See stuff like this:

88.232.13.34 customerDomain.com GET hxxp://thecric.free.fr/AZenv/azenv.php HTTP/1.0

Referral spamming. See the ever useful wikipedia: http://en.wikipedia.org/wiki/Referer_spam

This is not the first time it has happened, so pull out our trusty tool for dealing with this (blacklist  program and log-scanning tool), and start playing wack-an-ip-address with the spammers. (Blacklisting their IP: no traffic at all will get to the webserver from that ip address.)

Fun.. so, LOTS of IP addresses later, traffic on the server is back to normal.

'So' I hear you ask, 'where does the stupidity come in?'

The server they attacked, is not public-facing. There are no fancy websites for you to visit. No content to be of any use to you. It is a corporate-tool hosting server. The referral statistics are not public. The spammers just wasted their time, and mine. With the sheer number of computers that decided to poke at us, it has to be infected computers in a bot-net.

Still, I like playing wack-a-spammy-ip. It's fun ^^, and the IP addresses can hopefully be used to stop these muppets from hitting our server again.

Why should you not use your notepad as a coaster? This is why:

The notes did say this, before my lovely hot black coffee destroyed them:

"begin"	== Start transaction
"commit"	== End transaction, saving all changes
"rollback"	== Undo all changes that you've made in the transaction

What are they? In mySQL 5, with a table storage type of "innodb" you can use transactions. This means, that you can make a set of changes together, like recording the removal of a credit, and the adding of an advert to a website, at one instance, even if it's multiple mysql transactions within one connection.

You do that, by sending the command (literally "BEGIN;" or "begin;") to start a transaction, run all the queries you need to run, and then run the commit if you want the all the changes to take, or rollback if you don't. If any one of the sql queries fails after you've made a begin, and it shouldn't have, you can rollback *all* the changes you've made to the database. Obviously, this needs one mySQL connection, but if you're using more than one each run of the program you're using, I'd be very surprised.

This is the rant I've been meaning to write for a while. What follows will be a lot of very angry random words chucked together. (Ok, so maybe not so random.) Now, don't get me wrong, I love Ubuntu. I have long since replaced Windows with it, and I was amazed at the time at how long it took me to switch to it from Windows XP totally. (3 hours, including install)

However, Ubuntu is not dreamy.

As part of my job (I work for Encryptec), we do a lot of server work, having to maintain our servers, as well as maintaining desktop machines. So, sometime last year, I created a pgp key, signed the Ubuntu code of conduct, and began basic triage work.

Some stats: I'm involved in  (commenting on, or triaging) 52 open (not invalid) bugs. Of those, I'm actively triaging 3, and I've got two reported bugs open.

Out of those 52, I have confirmed 16 (excluding closed ones.)

I stopped triaging bugs to the same extent I did about 5 months ago or so. Reason? I have 16 confirmed bugs that are just sitting there. I'm not in the QA-team (I never thought I'd triaged enough), and I am not a programmer to the extent that I could fix them. (If I went through the how-to's, and put my mind to it, I could fix some of the more basic bugs, as evidenced by my pushing a update to firehol through the SRU process. [For those of you who don't know what an SRU is, its a "Stable Release Upgrade", or basically a patch loaded into the -update repositories.)

Firehol

Lets take the firehol problem, bug #78017 in Launchpad. It took me starting a SRU process to get anyone to actually assign it a importance, with a bug that effectively turned firehol INTO A PIECE OF USELESS JUNK!

In case you don't know what firehol is, this is Ubuntu's package description about it:

An easy to use but powerful iptables stateful firewall
Generates generic firewalls with an extremely simple but powerful
configuration language, enabling you to design any kind of local
or routing stateful packet filtering firewall with ease.

#78017 basically locked down firehol, no traffic in, no traffic out. This bug made us loose ssh connection to remote servers & desktop computers we were upgrading. It was first reported January 4th, 2007. Confirmed by another reporter on the 5th. But no triager saw it, even though it was confirmed on the 5th. 'What about the maintainer of firehol' you say?

Trust me, its very scary to have a ssh session die on you in the middle of a dist-upgrade.

The closest thing to a maintainer of firehol would be me, after I added myself as a bug contact as part of the SRU process.

We were told that it had been fixed upstream on July 31st 2007. And, for the first time ever, we got a MOTU's attention, when someone put together a debdiff patch.

On 16th of October2007, I said that we needed to put firehol through SRU. But, I didn't know how. On the 9th of November 2007, I put together another debdiff, and started the SRU process. Mainly because Encryptec said I could do it on work time, whilst I had little else to do.

THE ONLY REASON FIREHOL IS FIXED IN FEISTY & EDGY IS BECAUSE IT WAS SPONSORED!

I wouldn't have had the time it took to go through the (at the time) confusing SRU process, not track down the one character fix, nor ask for all the help that I did on #ubuntu-bugsquad. I'm grateful to "pochu" to this day for the help he gave me.

I re-built the debdiff patches on the 16th of November, as requested by the motu-sru devs who looked at it. A few steps later, and the bug was fixed on the 27th of December 2007. Through paid work time.

Why did it take so long for a dev to look at, even though I'd posted on the bugsquad list asking for help?

Xen

We've recently moved all our servers to be Xen instances, running on top of the server hardware as virtual servers. It makes management easier. At least, it should, if Xen on Gutsy was stable. See all the tweaks we require to make Xen work. And then, you should also really re-compile your kernel, as the Ubuntu guys have applied the Xen patches to the latest kernel version. Xen is still on version 2.6.18, and their software is designed to WORK with that kernel!

Using a different kernel than the one the xen developers are using is a really, really dumb idea, because XEN IS KERNEL BASED! It is patched into the kernel, (hence needing a special kernel, if you're going to run Xen) which gives massive performance benefits over VMware, or other virtualisation software.

Whilst we're talking about Xen, take a look at bug #184412. Basically, Ubuntu is using the file image loader "file" instead of "tap:aio". Why is that a problem?

The Xen guys stopped working on "file" a long time ago. its quite old, and has performance, among other, issues. What does this result in? Kernel Ooops's. Fun Fun...

How to ignore a security bug

My boss found a security problem in the way Ubuntu used LTSP in Ubuntu. We've given this plenty of time to be fixed and SRU'ed, but since it has only been fixed in Gutsy, and not feisty or edgy, I'm going to say this in the open.

By default on Edgy & Feisty the ltspfs daemon is started with a "-a" , which turns off Magic Cookie authentication.

Why is that important?

In this mode, ltfsp works fine: you can see and mount USB and CDROM's on the thin client without any problem.
Trouble is, so can anyone else on the server.

What does that mean?
Put in a USB key, and wave goodbye to your files once somebody clever knows about this bug.

Now, I can understand that this is probably going to be a pain in the neck to fix, but that does not excuse the fact that it has not been, for 5 months. (This bug is listed as a security bug, under LTSP. Its publicly viewable. Anyone with a little bit of brains, wanting to find a vulnerability could just go look in Launchpad.)

Conclusion - So what IS wrong in Ubuntu?

Bug triage. Ubuntu needs more triagers, with access to change the priority of bugs. Possibly even a couple of guys just to run around checking the work of people who are just starting to triage, without that access, applying priorities as needed, and keeping an eye on those who might not be doing a good job. (I certainly know that a couple of the bugs I worked on were useless.)

Ubuntu needs more developers, who take an active interest in looking after server problems, as well as the more visible desktop problems. Firehol, Xen, and LTSP are all CLI-based applications, running on Ubuntu Server. They also need developers who look at bugs, all day long, and FIX THEM. Its all well and good the bug being triaged, but it also needs fixing.

Why don't I try to become an MOTU/QA triager? Because currently, I don't have the free time. I would if I did, but other things eat my time. Like, car trouble. And RPGs that I help run for fun. The fact I'm just a basic trainee Web-Deb programmer comes into it as well. (I know HTML, CSS basic Python [mainly the plone implementation], a little bit of PHP and MySQL. I'm *sure* that knowledge can be used to fix bugs...)

Now, this rant does not mean I don't like what Ubuntu is doing with the devs that they do have. But, guys, please can you just stop adding more features, and start FIXING BUGS for just one release period. Please! Pretty Please with Pink Sugar Icing and a Pink Feather on top!

Edits:
21/01/08, 1419: Fixed typos x2