Tag Archives: Cascading Style Sheets

jQuery Basics

I’d been hearing a lot of buzz around jQuery and how much developers like it.  While I myself am not a front-end developer and prefer doing mostly back-end work in Java or Rail, after I saw jQuery in action at SXSWi I wanted to learn to code it in first hand.

One of the reasons I never liked coding in JavaScript is because I didn’t like it being dynamically typed language and having to deal with retrieving DOM elements based on their names and the ability for the namespace to constantly change.  I also found it cumbersome to have to deal with integrating CSS and JavaScript.  jQuery resolves a lot of these issues for me.  jQuery is basically a JavaScript library that lets developers manipulate DOM objects as if they were POJOs, and also manipulate objects based on their CSS classes.  It also has an extensive animation library giving user a richer experience.

For those out there who are new to JavaScript I highly recommend the following sequence of tutorials:

  1. Getting Started with jQuery
  2. Additional Tutorials
  3. Pretty jQuery Interfaces
  4. AJAX with jQuery

And of course you need the requisite tools to get up and running so I’d recommend downloading the lates version of FireFox and installing the Firebug plugin to help with debugging any JavaScript issues you might have.

If you want to get further into jQuery check out the main site, which includes a testing framework QUnit,

Enhanced by Zemanta

Ruby Tuesday: Debugging

When I was a freshman at Duke, coding away in Teer basement, I would often hear disgruntled engineers shout: “Damn, I’ve got 300 syntax errors, I left off the semicolon!  Why does everything have to be so exact?”  Those were the days of coding in C++, a language in which you had to actually compile, but hey it was faster than punchcards!

Nowadays we have dynamic typed languages like Ruby that don’t even require semicolons!  But that doesn’t mean we’re in the clear.  We still have to debug.  RoR has done a good job of building in a lot of debugging tools.

Here is my philosophy and methodology for debugging:

  1. Errors and Exceptions are the easiest: Load the web app, if there is an error or exception thrown in the webpage tackle that first.  If I don’t know what the exception means e.g. InvalidAuthenticityToken, I will look it up.  And read about it and usually that will lead me to a solution.
  2. I love logs! If the web app seems to load properly, but some functionality is broken I go look at the logs.  You can add log statements based on the level of logging you want to controllers in RoR with the following code: logger.debug “BUGGY” or logger.info “YO”
  3. Data Corruption: to the Database! If the data appears to be displayed incorrectly then I go straight to the database.
  4. Look & Feel: if something is off with the way the page is rendered then it is most likely something I did wrong in HTML or CSS.  I like using Firebug for CSS issues.
  5. Vijayashanker Code If something is off about the functionality, and I have a sense of where it is happening I will go through and read my code.
  6. Debugger Last: I’m not really a lazy person, but setting breakpoints and stepping through code can be tedious.  So I save this as a last resort if I can’t use any of the above techniques to find my bug.
  7. I hate “debug” statements! I’m a neat freak, I don’t like polluting my code with debug statement, and creating more work for myself in having to go and remove them later.  If I can’t get the debugger to do what I want then I will resort to using debug statements.

As I was debugging today I discovered a few good resources here are a few of them:

  • Debugging Rails Applications (walks you through common debugging techniques and also explains logging levels and configurations)
  • Logging Tips (Everything you ever wanted to know relating to logging in RoR)
  • RoR Google Group (I found solutions and insights into most of the problems I was experiencing today)
Enhanced by Zemanta

Table Tips

Everyone once in awhile I get have to go for coding mode to designing and writing HTML and CSS for an internal tool or translating it into Velocity.  I’ve learned to use Firebug to debug most HTML and CSS issues.  Lately, I’ve been running into table formatting and layout issues, here are few tags and settings you can use or play with to help you resolve yours.

1.  rowspace: when this attribute is used, usually defining a table cell, it will take up space in the current row, and the row below, so watch out for any strange formatting.

2. valign: aligns font either to the top, bottom, or middle of a table cell.

3. td: make sure all rows in your table have the same number of table cells otherwise your table elements will be incorrectly formatted.  A caveat to this is if you use colspan and specify the number of td’s you want, then you dont have to explicitly use “<td></td>”.  Also if you are using th (headers) make sure that you have the same number of th’s as td’s.

4. input type=”hidden”: I love using this when submitting forms, because I can place an id of the object that the form is referencing, and then parse it out of a HttpServletRequest.

5. class: use this as much as possible and define your classes in CSS.  One thing I love doing is referencing the CSS file in Firebug and changing it on the fly.  To do this just open Firebug in Firefox, select ‘CSS’, and choose the file you want to edit from the ‘Edit’. Then you can easy change the values of the elements, and the changes are instantly rendered in the browser.  If you don’t want to see the changes then just refresh the page.  This doesn’t persist anything to your CSS files, it just helps you figure out what looks good.

Enhanced by Zemanta