Naming Conventions

This is a topic that will bring a wide range of opinions, but in order to keep myself consistent through my various projects, I have decided to follow the below naming conventions based on the language I am programming in.

PHP

Variable: underscore
Function: underscore
Class: camelCase

Javascript

Variable: camelCase
Function: camelCase
Constructor: camelCase

HTML/CSS

Class: hyphen
ID: hyphen
Other Attributes: hyphen/underscore (depending on project needs)

File Names

hyphen

MySQL

Database: underscore
Tables: underscore
Fields: underscore

Preventing Margin Collapse

Margin collapse happens when top and bottom margins of block elements are combined into a single margin whose size is equal to the margin of the element with the largest margin.

There are three basic cases of when margin collapse occurs.

1. Adjacent siblings
2. Parent and first/last child
3. Empty blocks

The most frustrating case for me is the second one. An example would be adding margin-top: 10px to a header element and instead of the expected behavior of having the header be 10px down from the top of the div the entire div moves down 10px. Setting the div's overflow property to anything but the default visible value fixes this problem.

Some great resources to check out:

• css.flepstudio.org
• developer.mozilla.org

Retain Height of Floated Elements

A very common thing that a developer moving away from tables will want to do is float divs next to each other. This is a great way to display elements side by side but one fall back is they lose there block height causing other content to come up from beneath them. There is a simple fix to this problem that I would like to show today.

The HTML

<div id="container">
   <div id="floatLeft">
       <p>I want to keep this elements height.</p>
   </div>
   <div id="floatRight">
       <p>I want to keep this elements height as well.</p>
   </div>
</div>

The fix is setting the parent div of both floated elements overflow property to hidden/auto.

The CSS

#container{
  width: 960px;
  margin: 0px auto;
  overflow: hidden;
}
#floatLeft{
  float: left;
  width: 480px;
}
#floatRight{
  float: right;
  width: 480px;
}

PHP Access Specifiers

There are three access specifiers in PHP: public, private, and protected.

Public

The access specifier public allows properties of a class to be accessed/modified outside the class without having to go through a get or set method. This allows for the least amount of protection for the property.

class Person {
 public $name;
 
 public function setName($name) {
  $this->name = $name;
 }
 
 public function getName() {
  return $this->name;
 }
}
 
$p = new Person();
$p->setName("Bob Jones");
echo $p->name;  // echos Bob Jones no error because it is public
$p->name = "Joe Smith" ; // this sets the name to Joe Smith only because it is public

Private

Private is another access specifier that offers the most protection for a property. The property is only editable within the class itself.

class Person {
 private $name;
 
 public function setName($name) {
  $this->name = $name;
 }
 
 public function getName() {
  return $this->name;
 }
}
 
$p = new Person();
$p->setName("Bob Jones");
echo $p->getName(); //this will echo Bob Jones
echo $p->name; //can't access name this way, only through getName()
$p->name = "Joe Smith" ; //can't set name this way either         

Protected

The protected access specifier offers more protection then public but allows for a property to be accessed in its class and all other classes that extend its class.

class Person {
 protected $name;
 
 public function setName($name) {
  $this->name = $name;
 }
 
 public function getName() {
  return $this->name;
 }
}
 
class Employee extends Person {
 
 private $employeeNumber;
 
 public function setEmployee($name, $employeeNumber) {
  $this->name = $name; //this is storing name in the person class 
  $this->employeeNumber = $employeeNumber;
 }
        
}
 
$e = new Employee();
$e->setEmployee("Bob Jone",10000100);
echo $e->name; // this would throw an error as it is only accessable through methods in Employee or Person class

Reformat Text for Blog

I wrote this for my blog. I have my blog set up so that I need to change all of my opening and closing tags (< >) for html elements to their html entity name element (&lt; &gt;). This can be done with a few lines of javascript.

$(function(){
 $('#cleanFormat').click(function(){
     $('#text').val($('#text').val().replace(/</g,"&lt;")); 
     $('#text').val($('#text').val().replace(/>/g,"&gt;"));
 });
});

To see an example of this follow this link.

Creating a Datepicker

I had a project recently where I needed to create a custom datepicker for a HTML form. I will walk through the basics of how I was able to accomplish this.

The CSS

My specific form required the ability for the user to add multiple dates for a specific event up to a maximum of 20. So I knew I needed to hide the unneeded date fields from view. So I created the class hidden to allow for this. The datepicker needed an absolute positioning because I wanted to move it around the page as needed.

 .hidden{
  display:none; 
 }
 #datepicker{
  background: #ccc;
  position: absolute; 
  z-index: 50;
  border: 1px solid #000;
  padding: 5px;
 }
 #closeButton{
  float:right; 
 }

The Datepicker

I used select lists to allow the user to select the date and start time. The key here was using php to pull in the current year so that I could dynamically create it. I also used php to create some for loops so that I didn't have to manually go through and type all of the options I wanted in my select lists.

<div id="datepicker" class="hidden">
 <table border="0">
  <tr>
   <td colspan="3"><strong>Date:</strong></td>
  </tr>
  <tr>
   <td>
    <select class="changeDate" id="month" name="month">
     <option id="month1" value="1">January</option>
     <option id="month2" value="2">February</option>
     <!-- etc... -->
    </select>
   </td>
   <td>   
    <select class="changeDate" id="day" name="day">
     <?php
      for($i=1; $i<32; $i++){
         echo '<option id="day'.$i.'" value="'.$i.'">'.$i.'</option>'; 
      }
     ?>
    </select>
   </td>
   <td> 
    <select class="changeDate" id="year" name="year">
     <option selected="selected" value="<?php echo date(Y); ?>"><?php echo date(Y); ?></option>
     <option value="<?php echo date(Y) + 1; ?>"><?php echo date(Y) + 1; ?></option>
     <option value="<?php echo date(Y) + 2; ?>"><?php echo date(Y) + 2; ?></option>
     <option value="<?php echo date(Y) + 3; ?>"><?php echo date(Y) + 3; ?></option>
     <option value="<?php echo date(Y) + 4; ?>"><?php echo date(Y) + 4; ?></option>
    </select>
   </td>
  </tr>
 </table>  
 <table border="0">
  <tr>
   <td colspan="3"><strong>Start Time:</strong></td>
  </tr>
  <tr>
   <td>
    <select class="changeDate" id="hour" name="hour">
     <?php
      for($i=1; $i<13; $i++){
         echo '<option id="hour'.$i.'" value="'.$i.'">'.$i.'</option>'; 
      }
     ?>
     </select>
    </td>
    <td>
     <select class="changeDate" id="minute" name="minute">
      <option id="minute00" value="00">00</option>
      <option id="minute01" value="01">01</option>
      <option id="minute02" value="02">02</option>
      <!-- etc... up to ten -->
      <?php
       for($i=10; $i<60; $i++){
         echo '<option id="minute'.$i.'" value="'.$i.'">'.$i.'</option>'; 
       }
      ?>
     </select>
    </td>
    <td>
     <select class="changeDate" id="ampm" name="ampm">
      <option id="am" value="am">am</option>
      <option id="pm" value="pm">pm</option>
     </select>
    </td>
   </tr>
  </table>   
 <input id="closeButton" type="button" value="Close"/>
</div>

The Javascript

I have condensed my code to just the basics. Please see comments for more specifics.

 $(function(){
   var globalFocus = 'required-date'; //I used this to see which date field was currently in focus
                
   $('#month<?php echo date(n);?>').attr('selected', 'selected');
   $('#day<?php echo date(j);?>').attr('selected', 'selected');
   $('#hour<?php echo date(g);?>').attr('selected', 'selected');
   $('#minute<?php echo date(i);?>').attr('selected', 'selected');
   $('#<?php echo date(a);?>').attr('selected', 'selected');
   //I used the above code to set up the defaults for the datepicker
   updateDate(globalFocus);//This sets the focused date field value
    
   $('.date').focus(function() { //corresponds to all of the date fields 
         globalFocus = $(this).attr('id');
         $('#datepicker').show();
         var position = $(this).position(); //Return position of date field to position the date picker right below it
         var height = $(this).height(); 
         $('#datepicker').css('top', position.top+height); 
         $('#datepicker').css('left', position.left);
  });

  $('.changeDate').change(function(){
        updateDate(globalFocus);
  });
  
  $('#closeButton').click(function(){
        $('#datepicker').hide();
  });
 });

 function updateDate(currentFocus){
     $('#'+currentFocus).val($('#month').val()+'/'+$('#day').val()+'/'+$('#year').val()+" "+$('#hour').val()+':'+$('#minute').val()+$('#ampm').val()+" - "+$('#hourend').val()+':'+$('#minuteend').val()+$('#ampmend').val());
 }