Home

Ruby on Rails > Will_paginate - customizing the styling E-mail
Tuesday, 23 November 2010 21:22

The method below doesn't work in the Rails 3 version of will_paginate.  Look here for instructions for on that.

 

Sometimes you get very specific directions from designers, and sometimes there are places where they're not able or willing to budge.  Recently I had a project, built in Ruby on Rails, where the pagination needed to look like:

 

will_paginate

By default, will_paginate provides links for "Previous page", "Next page", and numerical links for the pages in your collection.

 

The Rails will_paginate gem/plugin provides a lot of styling flexibility out of the box, but this was something that needed customizing at the code level.  Thankfully the project is well-designed and allows for easy extensibility.  (The code that follows is not mine, but unfortunately I've lost the original location of where I found it, otherwise I would attribute it to its original source.)

 

Here's what I had to do:

  1. The black square separator was cut as an image from the layout PSD
  2. Created the HTML and set the CSS for the static elements on the page (the "page" text and the black square separator in the image above)
  3. Create a special helper in my Rails application to overwrite the default WillPaginate::LinkRenderer class.  I called this file pagination_list_link_renderer.rb and placed it under /app/helpers. (code below)
  4. In the view where the pagination was to show, I implemented it with the following:

<%- if @count > 12 -%><span class="medium" style="display:inline">page&nbsp;</span>
<%- end -%><%= will_paginate @entries, :renderer => PaginationListLinkRenderer %>

 

The pagination_list_link_renderer.rb file looks like:



 
Skeleton project outline E-mail
Sunday, 21 November 2010 14:25

As a project manager, and especially as a freelancer, you have to organize projects into smaller, more manageable subprojects, so that when you bill your clients you can provide sufficient level of detail about how much time was spent on what task.  At the same time, you don't want to go overboard with the specificity (i.e., "changing header background color from #fff to #fafafa", or "Updating footer text from xyz to abc").  Indeed, many small tasks will require less time to perform than to keep track of if you insist on being overly meticulous, which not only costs your clients extra money but also results in more headache for you in switching back and forth between tracking tasks and actually performing them.

 

The taxonomy I have arrived at that works for me, I believe, achieves a good balance between the two - specificity and ease of use.  I like to structure my projects so:

 

Project name

  • Research and setup
  • Work performed
  • Testing
  • Revisions
  • Meetings

Within each of these categories you can define as many (or as few) subcategories that you feel is appropriate for the scale of your project.  For a small catalog-type site, for example, I would stick with just these five categories, whereas for a larger-scale project I could expand it to something like:

 

Project name

  • Research and setup
    • Asset collection - quality and completeness check
    • Database design and setup
    • Reviewing project requirements
    • Development, test environment, and version control setup
    • Other research

 

  • Work performed
    • HTML/CSS programming
    • Client-side programming (JavaScript, jQuery, AJAX)
    • Server-side programming (PHP, Ruby on Rails, MySQL)

 

  • Testing (and deployment)
    • Cross-browser testing
    • Unit, functional, and other business logic testing
    • Production environment testing
    • Deploying to demo or production environment

 

  • Revisions (and troubleshooting)
    • Styling revisions
    • Functionality revisions
    • Other revisions
    • Fixing others' mistakes
    • Fixing discrepancies between local and remote environments

 

  • Meetings


 
Web DB with HTML5 UI (Prefer C. Springs) E-mail
Sunday, 21 November 2010 14:03

Web DB with HTML5 UI (Prefer C. Springs)


Date: 2010-11-21, 9:25AM MST
Reply to: This e-mail address is being protected from spambots. You need JavaScript enabled to view it [Errors when replying to ads?]


I am founder of a small company developing a software package for autism specialists. I am in need of some part time help with the coding. I require expertise in MySQL, PHP, and JQuery and Java Script. HTML5 experience would be a bonus. I am offering $20/hr to start and require references and a portfolio of previous work. I don't care if you are a student, a recent grad, or a moonlighting professional - so long as you have talent and expertise in this area. This could easily become a full time job by January. E-mail me your resume, 4 references (phone numbers, relationship, and email) and links to sites you have built (if you have them). This job will be filled in the next 10 days.

  • Location: Prefer C. Springs
  • Compensation: $20/hr
  • Telecommuting is ok.
  • This is a part-time job.
  • This is a contract job.
  • Principals only. Recruiters, please don't contact this job poster.
  • Please, no phone calls about this job!
  • Please do not contact job poster about other services, products or commercial interests.
PostingID: 2072348258

Tags: Craiglist  job posting  $20/hr  MySQL  PHP  jQuery  JavaScript  HTML5  
 
Designers vs. developers - pretty funny E-mail
Friday, 12 November 2010 00:06

Infographic of web designers vs. web developers



 
jQuery/jCarousel - image/content misalignment E-mail
Thursday, 11 November 2010 20:49

(I know this would be much easier to demonstrate with an example, and I'll try to get one up soon.)

Problem

When using the jCarousel plugin for jQuery for a carousel in your website that shows not just an image but associated content that changes with each image, it can happen that if you click rapidly on the previous/next buttons the content and the associated content will get out of synchronization, so that, for example:

  • Clicking twice rapidly forward will display Image[2] and Associated_content[3], because while the image is slowly sliding in the text content responds to the two rapid clicks and advances twice.

Solution

I had this happen recently in a project for a client, and this is the workaround I devised for the problem:

function nextClick() {
 
var index = $('.active').index();
 
if(index < /*total number of items */){
 
     // remove class active from last item
 
     $('.active').removeClass('active')
 
     // add "active" class to the index+1 div with class "associated"
 
     $('div.associated').eq(index+1).addClass('active');
 
     // advance carousel
 
     carousel.next();
 
     }
 
     window.setTimeout(function(){
 
          $('.next').one('click', nextClick);
 
          }, 1000);
 
     return false;
 
}

The key here are the .one() jQuery method (instead of the more common .click() method) and the window.setTimeout JavaScript method.

jQuery's .one() binds the click event just once, and each time the window.setTimeout JavaScript method kicks in, disables the button for 1000 milliseconds, then enables it again and rebinds .one() to let the user click the navigation buttons once again.

 

As for jCarousel, here's how that's configured:

jQuery(document).ready(function() {
 
jQuery('#carousel').jcarousel({
 
     visible: 1,
 
     scroll: 1,
 
     start: /* number of items */,
 
     wrap: null,       buttonNextHTML: null,
 
     buttonPrevHTML: null,
 
     initCallback: mycarousel_itemLoadCallback
 
     });
 
});

The callback function mycarousel_itemLoadCallback looks like:

function mycarousel_itemLoadCallback(carousel, state){
 
// all your regular code in this function
 
     jQuery('.next').one('click', nextClick);
 
     jQuery('.prev').one('click', prevClick);
 
}

And prevClick() is configured just like nextClick() above, except the .eq value is index-1 instead of index+1.



 
What's your backup strategy? E-mail
Monday, 08 November 2010 21:45

Update

In addition to what's mentioned below, I also do the following:

  • Backup e-mails locally with MailStore Home and save a copy remotely with Sugarsync
  • Run a bash script on my domain that e-mails me a backup of all the MySQL databases I have there, like for my personal blog, this site, and other projects

 

Another web developer I know recently had a hard drive crash.  I don't know exactly how much but he lost quite a bit of data, including work he was doing for current clients.  In addition he lost precious working time and money because he had to send the failed hard drive for partial recovery.

 

This incident made me feel empathy for my colleague, but also glad that I backup my data not just locally but also in "the cloud".  What I do is pretty simple:

  1. Save some important files to my Dropbox account, including my Microsoft Outlook data file.
  2. Save other important files to my Live Mesh account, including project asset files for current projects.
  3. Frequently commit and upload work on projects to an off-site Mercurial repository.
  4. At least every 24 hours (during a regular work week), I make a full hard drive backup image using Macrium Reflect.

This way I figure the most I can lose is one day's worth of data, and certainly less than that of actual work for clients.



 
All-in-One-SEO-Pack plugin and WordPress 2.8.6 and earlier E-mail
Saturday, 06 November 2010 16:21

It's a known issue that the form submit button disappears when using the latest version of the All In One SEO Pack plugin with older versions of WordPress.  I'm running WordPress 2.8.6 and it was an issue for me.

 

Here is the fix.



 
«StartPrev12345678910NextEnd»

Page 4 of 18