Casper

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-13T14:05:43+00:00

Yes a construction like that gets too complicated for fancy one-liner CSS selecting.
So you need to do it "manually". I also found a bug in the selector for the text field so I updated that one.

Here's the refactored line:

   $$(".fieldpair").each(function(fieldpair) {
      if (fieldpair.down("input:checked")) {
         var input = fieldpair.down('input:[type="textfield"]');
         log("  Adding: " + input.value);
         total += parseInt(input.value);
      }
   });

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-13T12:16:52+00:00

Change the '+' to '~' and you should be good to go :)

You can read about CSS3 selectors here:
http://www.w3.org/TR/css3-selectors/

[Ruby] On Rails has_many count

2008-01-11T09:51:21+00:00

Or..come to think of it. This is a perfect place for an SQL JOIN. Databases love to do these kinds of things. And they do it fast. Here's a good place to read up on joins:

http://www.w3schools.com/sql/sql_join.asp

Solution now becomes:

# Untested since I don't have your database, but it should be 
# something like this:
grouped_count = Messages.count(:conditions => "user_id = #{current_user.id}",
                               :joins      => "join users on sender_id = users.id",
                               :group      => "usertype")


# You will get back an ActiveSupport::OrderedHash
# which you can loop like this:

grouped_count.each do |usertype, count|
  puts "#{userype}: #{count}"
end

[Ruby] On Rails has_many count

2008-01-11T08:59:48+00:00

Not going to comment on the Rails parts (you should move more code into the Model, and have less in your view). Just the "rubyism" part.

Since you have all the cross references in your models you should be able to access all messages for a user by saying user.messages, and access senders of messages by doing message.sender.

Then we group the usertype counters into a hash, so we don't have to hard-code all that stuff and the code stays flexible and "adapts" when you add new user types.

# Get all messages for the current user
messages_for_user = current_user.messages

# Initialize our hash where we store the counters
message_type_counters = Hash.new

# Loop through the messages
messages_for_user.each do |msg|
  
  # Grab the usertype of the sender
  usertype = msg.sender.usertype

  # Make sure the hash element is initialized
  message_type_counters[usertype] ||= 0

  # Add to the counter
  message_type_counters[usertype] += 1

end

# Display the results
message_type_counters.each do |usertype, count|
  puts "#{usertype}: #{count}"
end

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-09T20:22:53+00:00

Jermaine you are welcome. For Prototype it's best just to read the API docs:
http://www.prototypejs.org/api/

They are pretty good, and contain some decent examples. Usually when there's something I can't figure out how to do, and I can't find it in the API docs, I search with google "prototype javascript <the thing I want to do>". You will find some good snippets and examples that way. Just keep at it and it will get easier with a little time and experience :) Good luck.

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-09T14:18:08+00:00

You have a couple of bugs. First IDs always need to be unique in your HTML code. Now you've named them all "unique_line". That's invalid HTML. You need to name them "unique_line_1/2/3/4" in case that's the way you want to do it.

Second..onclick="remove_line"..remove_line will be called with the element that triggered the event as an argument. From there you could traverse up the DOM to find your fieldpair and remove it. No need for unique ID's.

Third. If you're practicing UJS then you've been naughty and added an onclick event in the HTML for your "Add a new line" link. That's not UJS :) UJS means no Javascript among your HTML code.

Now..I fiddled a little with the code and added some fancy schmancy Scriptaculuos effects to it also to make the adding and removing of lines appear smooth and "hey that's neat" web 2.0-ish.

Google for Scriptaculous to find their package. Download it, extract it, and put all the files from the "lib" directory of the package into a directory you name "scriptaculous" that sits in the same directory where you have your "prototype.js" file. That way you can load the scriptaculous stuff in your HTML code by including scriptaculous/scriptaculous.js, as I've done in the example below.

If you don't want the scriptaculous effects just remove it from my code and remove the "Effect.*" code lines. Also note that I add the new fieldpair as "display: none", so that the scriptaculous effect can later reveal it. If you remove the effects also remember to remove that style. Otherwise the new fieldpair line will never show up.

Here's the code:

## Javascript [javascript]

// Nice to have for debugging purposes if you don't happen
// to have Firefox + Firebug installed.
function log(s) { 
   $("log").insert(s + "\n")
}

// Our main calculation function
function calculate() {
   log("calculate()");
   var total = 0;
   
   // For each fieldpair that has a child with a checked input
   // we get the sibling with a text input and add that value
   // to the total. jQuery does all the tricky element traversals
   // for us.

   $$(".fieldpair input:checked + input:text").each(function(elem) {
      log("  Adding: " + elem.value);
      total += parseInt(elem.value);
   });

   // Show the result
   $("result").update("The total is: " + total);
}

function add_line() {
   // insert() inserts at bottom by default
   $("calculation_area").insert(
     '<div class="fieldpair" style="display: none">' +
     '  <input type="checkbox"/>' +
     '  <input type="textfield" value="10"/>' +
     '  <a href="#">Remove</a>' +
     '</div>' 
   );

   // Since we just inserted the element as the last
   // element of the calculation_area div it's easy
   // to grab it like this:
   var fieldpair = $("calculation_area").childElements().last();
   
   // Now we can use CSS selectors to select the other
   // elements inside the new fieldpair div, and add
   // the event observers we want.
   fieldpair.down("input:checkbox").observe('click', calculate);
   fieldpair.down("input:text").observe('keyup', calculate);
   fieldpair.down("a").observe('click', remove_line);

   // Scriptaculous effect
   Effect.BlindDown(fieldpair, { duration: 0.4 });
}

function remove_line(event) {
   // Prototype always calls observers with the
   // event as argument. From there we can grab the
   // element that triggered the event, and from there
   // we use a CSS selector to find the first parent
   // element (up-element) that matches the ".fieldpair"
   // div. And then we remove it from the DOM. Easy :)
   var fieldpair = event.element().up(".fieldpair");

   // Scriptaculuos effect
   Effect.BlindUp(fieldpair, { 
      duration: 0.4,
      afterFinish: function() {
         // Remove the element from the DOM
         fieldpair.remove();

         // Recalculate our result since the box might
         // have been checked.
         calculate();
      }
   });

   // If you don't want the effects just delete the
   // Effect stuff above and uncomment the lines below:
   // 
   // fieldpair.remove();
   // calculate();
}

// This is called when the document DOM has 
// been fully loaded by the browser.
Event.observe(window, 'load', function() {
   log("Our output log");
   log("==============");
   log("ready()");

   // Do the initial calculation. Some fields might be pre-checked.
   calculate();
   
   // Attach event handlers for click event on checkboxes
   $$(".fieldpair input:checkbox").each(function(elem) {
      elem.observe('click', calculate);
   });
   
   // Attach event handlers for keyup event on text fields
   $$(".fieldpair input:text").each(function(elem) {
      elem.observe('keyup', calculate);
   });

   // Attach click handler to the add button
   $("add_button").observe('click', add_line);
});

## HTML [html]

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>

<div id="calculation_area">

<div class="fieldpair">
  <input type="checkbox" checked="1"/>
  <input type="textfield" value="10" />
</div>

<div class="fieldpair">
  <input type="checkbox" />
  <input type="textfield" value="20" />
</div>

<div class="fieldpair">
  <input type="checkbox" />
  <input type="textfield" value="30" />
</div>

</div>

<button id="add_button">Add a new line</button>

<p id="result">
</p>

<pre id="log">
</pre>

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-02T00:19:39+00:00

There was a semicolon missing in the first edit I posted. Maybe you copied that version? I tested the code over here on Firefox with Prototype 1.6. Recopy the code and try putting an alert() statement on line 28 before the first log() call to see if the window load event is getting triggered. Then keep putting alert statements further down to see how far it gets. The missing semicolon was in the log() method, so that probably killed it before.

Oh and just to double check..remember if you were using the jQuery version - do not load jQuery at the same time you load Prototype. The are not compatible. So remove the <script> tag that loads jQuery before you try it with Prototype.

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-01T22:03:47+00:00

Hi. The Prototype code is similar to jQuery. Method names are a little different and Prototype uses $$() as a CSS selector and $() as an element id selector, so we have to update those. Also in Prototype you loop arrays manually (with function(element) { ... }) most of the time, so we update for that too. Here's the Prototype version. Enjoy :)

## Javascript Prototype version [javascript_+_prototype]

// Nice to have for debugging purposes if you don't happen
// to have Firefox + Firebug installed.
function log(s) { 
   $("log").insert(s + "\n");
}

// Our main calculation function
function calculate() {
   log("calculate()");
   var total = 0;
   
   // For each fieldpair that has a child with a checked input
   // we get the sibling with a text input and add that value
   // to the total. 

   $$(".fieldpair input:checked + input:text").each(function(elem) {
      log("  Adding: " + elem.value);
      total += parseInt(elem.value);
   });

   // Show the result
   $("result").update("The total is: " + total);
}

// This is called when the document DOM has 
// been fully loaded by the browser.
Event.observe(window, 'load', function() {
   log("Our output log");
   log("==============");
   log("ready()");

   // Do the initial calculation. Some fields might be pre-checked.
   calculate();
   
   // Attach event handlers for click event on checkboxes
   $$(".fieldpair input:checkbox").each(function(elem) {
      elem.observe('click', calculate);
   });
   
   // Attach event handlers for keyup event on text fields
   $$(".fieldpair input:text").each(function(elem) {
      elem.observe('keyup', calculate);
   });
});

[JavaScript] On How to Refactor from a Loop... to no Loops...

2008-01-01T09:41:40+00:00

I like to do these kinds of things using Unobtrusive Javascript (UJS). UJS is a way to keep the code logic of your page completelty separate from the presentation (the HTML). The idea with UJS is like CSS is for page styling. CSS allows you to keep the styling information neatly separate from the HTML code. The same with UJS. It keeps the Javascript separate so it does not clutter the HTML. Your pages become easier to read, modify and maintain.

UJS is possible because you can instruct the browser to start your Javascript code once the browser has finished completley loading the page. That way you can layer your functionality onto the page very neatly after the browser has finished loading all HTML.

In addition to using UJS it is highly recommended to use some sort of Javascript library to make all those cumbersom loops and findElementById() trickery go away.

Here I'm using jQuery, but Prototype for example will work just as well.

About the loop. I wouldn't try to get rid of looping. It's easy to get your calculations out of sync if you do not loop over all the checkbox/input-field pairs in one go. Looping guarantees you don't need extra magic code to double check that you really did calculate everything correctly.

The idea with the implementation below is that it's completely dynamic. If you want to add a new set of checkbox/input-field pairs you just insert it into the page as a div with a class of "fieldpair". The code will automatically adapt and include the new field pair into the calculations.

Here we go. First the HTML, and then the jQuery code.

## The HTML part [html]

<!-- Load jQuery -->
<script type="text/javascript" 
        src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.js"></script>

<script type="text/javascript">
  <!-- Insert the Javascript code from below here -->
</script>

<!-- Some fieldpairs. Insert as many as you like -->
<div class="fieldpair">
  <input type="checkbox" checked="1"/>
  <input type="textfield" value="10" />
</div>

<div class="fieldpair">
  <input type="checkbox" />
  <input type="textfield" value="20" />
</div>

<div class="fieldpair">
  <input type="checkbox" />
  <input type="textfield" value="30" />
</div>

<!-- Result goes here -->
<p id="result">
</p>

<!-- This we just use for our debugging -->
<pre id="log">
</pre>


## The jQuery Javascript code [jquery_javascript]

// Nice to have for debugging purposes if you don't happen
// to have Firefox + Firebug installed.
function log(s) { 
   $("#log").append(s + "\n"); 
}

// Our main calculation function
function calculate() {
   log("calculate()");
   var total = 0;
   
   // This is the loop that selects our fieldpairs. It's nice and
   // neat with jQuery element selectors.
   // 
   // For each fieldpair that has a child with a checked input
   // we get the sibling with a text input and add that value
   // to the total. jQuery does all the tricky element traversals
   // for us.

   $(".fieldpair").children("input:checked").siblings("input:text").each(function() {
      log("  Adding: " + this.value);
      total += parseInt(this.value);
   });

   // Show the result
   $("#result").text("The total is: " + total);
}

// This is called when the document DOM has been fully loaded by the browser.
$(document).ready(function() {
   // Here we go...start 'er up...
   log("Our output log");
   log("==============");
   log("ready()");

   // Do the initial calculation. Some fields might be pre-checked.
   calculate();
   
   // Attach event handlers for click event on checkboxes
   $(".fieldpair").children("input:checkbox").click(calculate);
   
   // Attach event handlers for keyup event on text fields
   $(".fieldpair").children("input:text").keyup(calculate);
});

[PHP] On Output div block with PHP conditional statement

2007-12-07T19:35:52+00:00

You have a missing close brace "}" before the else statement.

Also when you have a lot of HTML code it's easier not to "echo" it, just type it out outside the PHP block instead, and keep the PHP code inside the <? ?> blocks. See below alternative 1.

Or..if you have a big block of text you can use what's called the heredoc operator. This will let you type in quotes and any text until the end of the heredoc. See alternative 2. Not as "clean" as alternative 1 perhaps, but demonstrates the heredoc operator.

## Alternative 1: HTML code outside the PHP blocks [php]

<?php if (the_ID() == 8) { ?>
  <div id="menu_show" class="slideshow">
    <img src="..." />
  </div>
<?php } else { ?>
  <div class="header"></div>
<?php } ?>

## Alternative 2: HTML code with echo + heredoc operator [php]

<?php if (the_ID() == 8) {
  echo <<<EOL  // <- We use the heredoc operator. Notice 3 times '<'
    <div id="menu_show" class="...">
      ...
    </div>
EOL;  // End the heredoc block. Has to be the first characters on the line,
      // so don't indent it.
} else {
  echo "<div class=\"header\"></div>";
}
?>

[JavaScript] On Javascript threading

2007-12-07T16:54:02+00:00

Like BK said you have global variables all over the place and this breaks the code. You have to think about what happens when your methods are called concurrently. For example "console" will be overwritten by the latest call, since it's a global variable.

But, the number 1 rule of coding is don't reinvent the wheel. XMLHTTPRequests have been done a million times before, and there are very good libraries that wrap this stuff into much easier packages. For example the solution by using the excellent jQuery library:

## Html snippet [html]

<!-- Import jQuery -->
<script src="http://jquery.com/src/jquery-latest.js" type="text/javascript"></script>  

<div id="ping_div_live"></div>
<div id="ping_div_standby"></div>

## Javascript part [javascript]

// Untested code, but hopefully you get the idea
function startup() {
  ping('live',    10000);
  ping('standby', 10000);
  // ...
}

function ping(hostname, interval) {
  setInterval(function() { do_ajax_ping(hostname); }, interval);
}

function do_ajax_ping(hostname) {
  // Using the jQuery AJAX method here, makes this easy
  $.ajax({
      type: "GET",
      url: "../php/ping_sys2.php?target=" + hostname,
      processData: false,

      // Using a closure to be called on success here
      success: function(data) {  
        // jQuery DOM manipulation. Again..easier like this.
        $("#ping_div_" + hostname).append("<div>" + data + "</div>");
      }
   });
}

[C] On Socket read line in C

2007-12-06T23:15:54+00:00

Several comments.

1: What do you do with the string that is returned from the socket? In many cases when you use sockets you process some data or commands that you receive, and then discard the string you read. If you do something similar here it's innefficient and unnecessary to every time realloc a new string in memory for every call to your function.

Look at how standard C-library read functions are coded (read() or fgets() for example). In most cases it's the callee's responsibility to preallocate the string. Since in most cases the callee (i.e. you) will know what the maximum line length or string length that is about to be read is.

It's much more efficient, and less memory fragmenting, to code it that way, and less error prone. You preallocate one buffer. Say char my_buffer[MAX_LINE_LENGTH]. This you then give to your method:

while (i_want_to_read_some_stuff) {
socket_read_line(sock, my_buffer, MAX_LINE_LENGHT);
/* process the data you received... */
}

2: If you're reading lines anyway you can convert the socket description into a standard C FILE stream and use fgets() instead: FILE *socket_stream_in = fdopen(sock, "r"); fgets(my_buffer, MAX_LINE_LENGTH, socket_stream_in); Why reinvent the wheel? :)

3: The line cr = (ch == '\r' ? 1 : 0); can be refactored as simply cr = (ch == '\r'); I would use a more descriptive variable name though. I like those to make the code more readable. So rename it to something like int got_cr = 0; got_cr = (ch == '\r'); But I'm kind of nitpicky on these..but it still makes if statements read more fluently: if (got_cr) { ...do stuff... }..