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.
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.
Information Architecture for the World Wide Web
I'm finally finishing up my reading on user experience and web-based technologies with this book: Information Architecture for the World Wide Web 3rd Edition by Morville and Rosenfeld. It also happens to be the longest of the previous usability and web-design books I read, of course, this is due to the fact here they're discussing more than just user experience but many intricacies of large-scale web site design. The book is divided into six sections: Introducing Information Architecture, Basic Principles of Information Architecture, Process and Methodology, Information Architecture in Practice, Information Architecture in the Organization, and Case Studies. As you can guess, the book is pretty hefty and weighs in at a good 504 pages, including appendices and an index.
The Introducing Information Architecture section gives a quick history of information architecture from tablets and scrolls to libraries to websites and why information architecture is important. Next, it describes why information architects are needed and how it is practiced in the real world. The last chapter in the section outlines how users search for information and how to determine the user's information needs and information seeking behaviors.
Principles of Information Architecture contains six chapters and covers the basics of information architecture. These include: organization systems, labeling systems, navigation systems, search systems and thesauri, controlled vocabularies and metadata. Each of these basics is covered fairly well giving the reader insights into which ones are best for which type of websites and when to completely ignore an idea because it doesn't make sense given beginning parameters.
Part 3, Process and Methodology is only three chapters but describes how to successfully integrate information architecture into the web development process. It begins with the research and research methods then moves into how to convert the research into a strategy. This includes using metaphors, scenarios and diagrams along with project plans, presentations and a strategy report in order to sell others on integrating information architecture. The final chapter focuses on design and documentation. This includes: using diagrams, developing blueprints and wireframes, mapping the site's information, creating models and controlled vocabularies and getting buy-in from other members of the web design team.
Information Architecture in Practice delves into the educational, ethical, team building aspects of information architecture and helpful software. The chapter on education gives a list of schools that have substantial IA coursework in addition to discussing how important formal education is to hiring companies (hint: you'll need it). The chapter on ethics touches on some cases where ethics come into play when you might not even think about it. For instance, Amazon's search engine at one time would say 'Did you mean adoption?' when someone typed 'abortion' into the search box. As you can guess, this caused a little bit of a stir. Finally, they take on the idea of how to staff an information architecture team as a thought experiment. What are the pros and cons of having an in-house staff versus consultants? How many people would you need? What would be their roles? The final chapter of the section covers tools and software needed to build websites or helping analyze, categorize and integrating search into a website among other things. It also gives a list of questions one should ask about the software to determine if it is really needed for the project.
The fifth section is Information Architecture in the Organization which discusses how to pitch the idea of information architecture to clients, how to demonstrate information architecture's ability to positively impact a company's bottom line and finally, how to setup an information architecture framework to support a company for the long haul. If you want to get information architecture into a company, these are probably the most important chapters. The truth is, you're always selling no matter what you're doing so you might as well learn how to sell information architecture. These chapters describe the types of reactions you can get and how to respond to negative reactions to the idea of starting up using information architecture.
Case Studies is the final section of the book and it looks at two different information architecture projects and discusses their best practices and lessons learned through the projects.
In my opinion the first two sections Introducing Information Architecture and Basic Principles of Information Architecture are must reads. Process and Methodology is something you should skim in order to figure out how to integrate it into your design process and the other sections are sections you should jump to if you have a question that you see a definite answer for from the table of contents. I'd give this book a solid buy if you're going to be redesigning or designing websites with large amounts of content or want to know about a small but growing field that is firmly entrenched in Library Sciences and Computer Science / Engineering.