PHP: Insert an element at the end of an Array

This part is of the PHP Post Series dedicated to spread knowledge about PHP

array_push is a PHP function used to add elements at the end of an array.

Example Code

$a = array('a', 'b', 'c');
array_push($a, 'c');
var_dump($a);

Results

array(3) { [0]=> string(1) "a" [1]=> string(1) "b" [2]=> string(1) "c" }

Return

array_push returns the number of elements existing in the array.

 Web Developer Weekly: Javascript, Pair Programming

We have a range of new things to play and read in this week’s Web Developer Weekly. There’s also the release of a new version of KnockoutJS:

Interesting Reads

Releases

Freebies / Software

 HTML5: Progress tag

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Progress bars are usability patterns that represents how long a process would be. It may also represent how long you still need to wait.

A few years ago, progress bars were introduced to the web. Javascript scripts, some CSS and a bit of HTML code were used to develop this usability pattern.

The famous ones of today are jQuery UI’s progress bar and Twitter bootstrap’s progress bar component.

HTML5 has also introduced its own implementation. This is through the progress tag.

Attributes

The progress tag has two attributes:

  • value – Represents how much has been completed
  • max – Represents how long the progress will be

Sample Code

Represents 30% completion:

<progress value="30" max="100">30%</progress>

Represents 80% completion:

<progress value="80" max="100">80%</progress>

In Action

See the progress tag in action! using the above code with 30% and 80% completion.

Browser Compatibility

The progress tag is supported by Chrome 6.0+, Firefox 6.0+, IE10 and Safari 5.2+

 HTML5: Contenteditable attribute

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

HTML5, HTML5 HTML5 Everywhere!

In the last 5 years or so, we have seen so many javascript plugins that do many fantastic things we wish we could have with only simple HTML like validation, datepickers and autocomplete.

Here we are faced with one fascinating HTML5 attribute, contenteditable.

Values

  • true – The contenteditable attribute when given the value of true, makes content inside elements editable.
  • false – The attribute contenteditable can be given a false value which renders it useless.
  • inherit – It can also be given the value of inherit which makes it inherit contenteditable functionality if the parent is editable.

Sample Code

Can be edited

 <div contenteditable="true">
    This an editable element. Edit the content as much as you can.
  </div>

Cannot be edited

 <div contenteditable="false">
    This an editable element. Edit the content as much as you can.
  </div>

Usage

The contenteditable attribute is quite useful especially when creating CMS that uses javascript to directly edit HTML.

In Action

If you’re using one of the browsers that supports contenteditable, feel free to visit our demo

Browser Compatibility

The contenteditable attribute is supported in modern browsers like IE7+, Firefox 12, Chrome 20, Safari 5.1 and Opera 12.