Modifying CSS in the LightWord theme for WordPress
The theme that I am currently using on my website, LightWord, is generally very nice and I love it. However, there are a few issues with it, luckily, LightWord offers a nice way to correct some of the formatting issues without actually having to update the theme itself through the LightWord Settings page.
To access the LightWord Settings page, go to the Appearance -> LightWord Settings choice on the left side menu in the WordPress admin dashboard.
In this page, scroll down to the Custom CSS settings text box. At this text box you can enter any additional CSS and it will be inserted into every page on your blog. I've used this to fix a few issues that I have with LightWord. First, I wanted my blog title to appear in a different color. I changed this, with the following bit of CSS:
h1#logo,h1#logo a{color:#FF6600;}
Secondly, I wanted a different background; which was solved with this snippet:
body {background:url('wp-content/themes/k3290370.jpg') repeat;}
Lastly, the drop down menu background was too small for some of the titles it was displaying so it would cause them to overflow. I did a quick change that expanded the size of the menu drop down background, like this:
#front_menu ul {width:300px;}
Of course, you can override all the CSS you want within this text box, so if you wanted to change the color of links or whatever, you can do it right here without modifying the actual LightWord theme. In addition to the Custom CSS, the settings page also allows you to add in additional scripts, headers, and footers.
Debugging JavaScript in a browser
Debugging is one of the most time consuming tasks one can do while programming in my opinion. Debugging JavaScript that runs within a browser is the most time consuming and annoying tasks one has to do, period. Which is why I'm all for finding better ways to debug JavaScript within a browser. Here I'll talk about some of the tips and tricks that I use to make debugging JavaScript within a browser a little less tedious and annoying (I'm not going to say fun, since debugging is rarely fun:)).
The first technique I employ is using alert statements. The alert statement pops up the dialog box with a message, that you as the programmer have inserted into the code. I use these to pinpoint where in the JavaScript code the script is failing so I can quickly get to the problem segment or method within the code. This makes a great first pass since you don't need any specialized tools or add-ons to your browser for this to work. The problem is, you're always rerunning your code in order to see where it fails once you make a change or in order to further pinpoint the problem section.
The second method I use is the Web Developer tool bar add-on for FireFox and Google Chrome. The Web Developer tool bar lets you inspect each element in the HTML and see all of its properties. This is extremely handy when scripts are changing properties of HTML elements; using it you can see if an element has changed it's properties or not or if the property you've added has actually been added. The only downside to the Web Developer toolbar is that it doesn't seem to work in real time. If you've made it display form details then run a JavaScript script that modifies the form details programmatically, the updates won't be shown until you hide then redisplay the form details.
The third option, and the one I've grown most fond of recently, is using Safari and WebKit add-on. I've found this to be the nicest real-time debugger for JavaScript. With a simple selection of Develop->Start Debugging JavaScript from the menu button, a fully functional debugger is added to the bottom of the window and it allows you to set breakpoints, see the call stack and inspect all the elements being used within the JavaScript code being run. This has been the most helpful when I've located the method in which a problem is occurring, but can't figure out why exactly it is happening. All it takes is setting a breakpoint, running the code to the breakpoint, then stepping through the code line-by-line and watching all the scope variables to see if one does not have the value I think it should. More often than not, I find out a variable is null or undefined when I thought it should have had a value.
The fourth option, I've used when debugging AJAX methods within my code. Using a tool called Fiddler, a web debugging proxy, I can intercept all messages being passed between the server and the browser and see exactly what is being passed in the AJAX commands. I've found Fiddler to be the most helpful when used in conjunction with another tool, like WebKit's JavaScript debugger.
These four options do a very good job of helping me determine where errors are within the code and fixing them. When it comes to speeding up JavaScript, a JavaScript Profiler is what is needed. Safari with WebKit has a nice one that can be started with the Develop->Start Profiling JavaScript menu choice and FireFox has a nice one with the YSlow plugin. In the case of profilers, I find YSlow to be a bit nicer since it will profile the page and return hints on how to speed up the loading of the page. However, that doesn't mean that Safari's JavaScript profiler is worthless -- I've used it an awful lot too. It does a very good job as well. Lastly, Fiddler has a very good profiler for determining the time it takes for various elements within the HTML to be transferred from server to client.
Hopefully these four options I've shown will give you a better idea of tools that can be used to debug and profile JavaScript in order to have bug-free code with a swiftly loading web page. If there are any other tools that I've missed, or debugging methods that you've found helpful, let me know in the comments section and I'll update this page accordingly.
Programming Classes in Javascript
After mucking around in all sorts of Javascript problems, I've come to the realization that not many people know how to write Object-oriented code in Javascript. Initially I had written out a fairly simple Math class in Javascript that people could see how to do all of it. Then I saw this article on Mozilla's web site, which pretty much made my attempt worthless. So, even though it is a few years old, it is definitely worth the time to read the article.
Mac OS X 10.6 and all the wonderful peripherals
After receiving my new desktop machine, I've been working on getting all of my peripherals working on the new machine. Of course, with it being a Mac, you should just be able to plug all the stuff in and rock and roll, right? Well, the answer is "Wrong" when you're using an HP Deskjet 995c with Mac OS X 10.6 because HP no longer supports any piece of hardware over 5 years old and politely tells you to buy a new printer.
The largest issue with looking for a new printer is the fact all printers are now apparently these all-in-one monstrosities that do everything except the dishes in the dishwasher. Whatever happened to a nice quality printer with bluetooth or wireless capabilities? Am I asking too much of the printer companies to make a quality inkjet or laser printer with bluetooth or wireless and none of the other frivolities they normally throw on the printers now?
Along with what appears to be my search for a new wireless printer, I have an Iomega network storage device that likes to be seen on the network, but not actually usable. Of course, this just isn't a Mac issue, it isn't working with the PCs as well. Just another thing to troubleshoot. At least all the other devices work just fine with the iMac so I can't complain too much.
Your write like…
Have you ever wondered which famous author you write like? Me neither, but this website I Write Like will let you know. Using a statistical analysis tool they analyze your word choice and writing style and compare it to all the famous writers in their database. I threw in a bunch of posts from my website and found out I write like David Foster Wallace writes (or should I say wrote). They even give you this spiffy little badge to display on your website if you're so inclined (I was inclined, although I do dislike the advertising at the bottom so I removed it).
Simplify Media shutting down
A few months back I wrote about Simplify Media being a great way to stream songs between computers and to the iPhone. However, I've found out that Simplify Media is shutting down their servers and going in a different direction so it'll no longer work after June 30th. As ticked off as I am about it since it worked really nicely I've got to find something else to replace it.
The alternatives I've found are:
Since Air Video doesn't have music support yet, it is out of the running for the time being leaving me to look at ooTunes and Subsonic. I'm currently leaning toward trying out Subsonic first since the Subsonic server is free (for 30 days) and the only thing you've got to pay for initially is the Subsonic iPhone / iTouch application; but if the server isn't looking too hot, I'll break down and give the ooTunes server software a try. I really don't want to write my own application to do this.
If you have any suggestions, let me know in the comments below.