Tag Archives: CSS

jQuery Basics

by in Software Development, , , , , , 2 Comments

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

Table Tips

by in Software Development, , , , , , , 0 Comments

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

15 Ways to Speed Up Your Front-End

by in Software Development, , , , , , , 0 Comments

Last week I attend the Percona conference in Santa Clara.  The purpose of this conference was to talk about performance related to databases specifically mySQL.  Most of the talks went over my head.  However, there was one talk I attended “Website on Speed” by Philip Tellis from Yahoo! that I thought was outstanding.  In his 20 minute presentation he covered some key optimization techniques to speed up website and improve latency for users, that don’t require time-consuming back-end database restructuring.  Here are some of the ideas I found useful:

 

1. Reduce the number of domains your site has.  Having numerous domains requires a lot of DNS lookups, which makes the site seem slow to users.

2. Avoid redirects or point to a load balancer.  Redirects cause the site loading to slow down user experience.  Load balancers handle request processing by distributing them based on the current capacity of each server.

3. Combine CSS and JavaScript into a single file.  Having a file for each increases the time it takes to download the site content.

4. Combine decorative images into sprites.

5. Cache aggressively.  This of course depends on the content of your site, and how much data is being manipulated by users.  But I would recommend caching static data for as long as possible, which will speed up download time and improve the user’s experience.

6. gZip content over the wire.

7. Minify CSS and JavaScript using a YUI compressor.

8. Reduce cookie size.

9. Post-load components after on-load.

10. Put CSS on top so the browser will download it first, and page has rendered.  This improves user experience, because they can at least start to view the page, even if they can’t interact with it yet.

11. The corollary to #11 is to put JavaScript at the bottom so that it doesn’t block rendering.

12. Avoid using tables for layout in HTML, because you have to wait for the entire table to download before the page can be loaded.

13. Attach events on a container rather than on each element.

14. Use specific HTML elements e.g. unordered list (ul) vs. many divs, this reduces the number of elements that need to be loaded.

15. Profile your JavaScript using YUI profiler, there is also another new profiler called YSlow.

Enhanced by Zemanta