Ever have a page not load properly in IE 7 but it loads fine – without error – with all other browsers? After you validate all your CSS/HTML and the error or funky behavior persists…and you have made sure your doctype is correct – what can you do? Validate your JS using JS Lint.
What is JSLint?
I just got done with some cross browser consulting (my favorite) – and one of the pages would not load properly in IE 7 due to a JS error which did not make sense to me. I loaded up the offending JS in JSLint and within a few minutes – I figured out what the issue was and how to solve it.
JSLint is invaluable if you do any work with JS – so keep the link handy! You will thank me – and JSLint.
About a year or so back Demitrious shot me over a link to something he thought looked pretty slick: jQuery TOOLS. I took a quick look but never did anything else with it because I had my old standbys in place for most of what jQuery TOOLS offered (overlays, tabs, tooltips, etc).
What does jQuery TOOLS offer?
Last week I decided to finally step out of using what I normally used (Thickbox for overlays) and try something from jQuery TOOLS. One look at their demo and I was completely sold. The overlays were slick, easy to implement and best of all – really light weight. Demo: click on the photo.
If you have any web development projects coming up or in the mix, do yourself a favor and check out the demos at jQuery TOOLS. You can accomplish a lot with a little (and have fun doing it).
As you might have noticed – I took a week off from blogging in order to focus on something else – cleaning up Jappler.com. Over the past few months I have learned so much more about WordPress, web site optimization, and what I really used this web site for – so I decided I needed to take some time to redo this site.
From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.
From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.
From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.
All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.
Ever need a list which you can easily show/hide the content? Check out: http://cssglobe.com/post.asp?id=940
I recently switched from using a gallery WordPress plugin called fGallery to something that is more elegant and updated: NextGen Gallery During this transition, I found a really cool lightbox-ish plugin called Lightview Plus which is more polished than your typical lightbox plugin.
You do not have to add in extra code to get the images to show up in the lightview – it automatically takes care of everything for you.
I have recently been asked to create a tabbed interface for a few projects which does not require any page reloading. I am familiar with working with the Yahoo! User Interface Library (YUI) and decided to use their tabview component to make this happen.
What you need:
- Yahoo User Interface Library
- HTML (View Source)
A simple example:
Check this code out in action (reusing the tabs I created from the jappler menus).
You can easily “View Source” and use that as an example. The possibilities of customizing the “tabview” component are endless and can also be seen on jappler.com’s home page.
Moral of the story
Check out the YUI library, look at the examples and start using and reusing the code! This speeds up development and will make your life easier!