Portfolio: Ripsurance website

I've made a new website for myself and everyone that wants to use it — Ripsurance. It is a very cool idea about how you can save money on household insurance. I still need to implement graphs, etc. Currently it's not getting any hits, but I'm not actively improving it at the moment either.

Anyway, I thought the spiral design was cool — especially since I'm not a designer.

Take care
Tjorriemorrie

Text-decoration for CSS

CSS Text-decoration is not often used in content. My, myself and I do not use it much. At most I'll underline links and such. Never use blink, nuf said.

Here's the spec:

'text-decoration'
    Value:    none | [ underline || overline || line-through || blink ] | 

inherit
    Initial:    none
    Applies to:   all elements
    Inherited:   no (see prose)
    Percentages:   N/A
    Media:    visual
    Computed value:   as specified

This property describes decorations that are added to the text of an element using the 

element's color. When specified on an inline element, it affects all the boxes generated 

by that element; for all other elements, the decorations are propagated to an anonymous 

inline box that wraps all the in-flow inline children of the element, and to any block-

level in-flow descendants. It is not, however, further propagated to floating and 

absolutely positioned descendants, nor to the contents of 'inline-table' and 'inline-

block' descendants.

Underlines, overlines, and line-throughs are applied only to text (including white space, 

letter spacing, and word spacing): margins, borders, and padding are skipped. If an 

element contains no text, user agents must refrain from rendering these text decorations 

on the element. For example, images will not be underlined.

The 'text-decoration' property on descendant elements cannot have any effect on the 

decoration of the ancestor. In determining the position of and thickness of text 

decoration lines, user agents may consider the font sizes of and dominant baselines of 

descendants, but must use the same baseline and thickness on each line. Relatively 

positioning a descendant moves all text decorations affecting it along with the 

descendant's text; it does not affect calculation of the decoration's initial position on 

that line.

Values have the following meanings:

none
    Produces no text decoration.
underline
    Each line of text is underlined.
overline
    Each line of text has a line above it.
line-through
    Each line of text has a line through the middle.
blink
    Text blinks (alternates between visible and invisible)

There's not much more to say. All I can think of is to use line-through instead of the 'del' tag.

Take care
Tjorriemorrie

Here is an example of a Zend Form

Let's make a Zend form for our contact page. I will finish the controller and mail functionality in a later post:

application/forms/contact.php
class Form_Contact extends Zend_Form
{
 public function init()
 {
  $hash = new Zend_Form_Element_Hash('hash');
  $hash->setSalt('zendweaves');
  
  $name = new Zend_Form_Element_Text('name');
  $name->setLabel('Name:')
   ->setRequired(true)
   ->addFilter('StripTags')
   ->addFilter('StringTrim')
   ->addValidator('NotEmpty', true)
   ->addValidator('Alpha', true, true);
   
  $subject = new Zend_Form_Element_Text('subject');
  $subject->setLabel('Subject:')
   ->setRequired(true)
   ->addFilter('StripTags')
   ->addFilter('StringTrim')
   ->addValidator('NotEmpty', true)
   ->addValidator('Alnum', true, true);
   
  $email = new Zend_Form_Element_Text('email');
  $email->setLabel('Email:')
   ->setRequired(true)
   ->addFilter('StripTags')
   ->addFilter('StringTrim')
   ->addValidator('NotEmpty', true)
   ->addValidator('EmailAddress', true);
   
  $message = new Zend_Form_Element_Textarea('message');
  $message->setLabel('Message:')
   ->setRequired(true)
   ->addFilter('StripTags')
   ->addFilter('StringTrim')
   ->addValidator('NotEmpty', true);
   
  $submit = new Zend_Form_Element_Submit('submit');
  $submit->setLabel('Submit')
   ->removeDecorator('Label');

  $cancel = new Zend_Form_Element_Submit('cancel');
  $cancel->setLabel('Cancel')
   ->removeDecorator('Label');

  
  $this->addElements(array($hash, $name, $email, $subject, $message, $submit, $cancel))
   ->setName('contactForm')
   ->setMethod('post')         
   ->setDecorators(array(
    array('Description'),
    array('FormElements'),
    array('HtmlTag', array('tag' => 'dl')),
    array('Form')
   ))
  ;
 }
}

You have to use Form_Zend as that is the namespace Zend uses. And what we have set in our autoloader. It extends Zend_Form (no suprise there). The function starts with init() and must be public.

My form has 7 elements. The hash element is for cross site request forgery (csrf) — I'll cover that in a later article. The rest is your expected elements — I'll also cover the filters and validators in a later article. What we did was to create each element seperately, at the end we added all the elements to the form. There we also set the name (or id) of the form, it's method and decorators. I use the default decorators and just style it appropriately with CSS. The only reason I set the decorators again is to give the form a description which I use for status messages after submits.

Take care

Tjorriemorrie

Using the CSS text-transform property

CSS has a text-transform property — I believe it's hugely underused.

Text-transform will be best used where you wish to capitalize headings. All lowercase for footnotes and such. Capitalize is also useful, but the drawback is that it doesn't lowercase non-first letters.

Here's the spec:

'text-transform'
    Value:       capitalize | uppercase | lowercase | none | inherit
    Initial:       none
    Applies to:     all elements
    Inherited:      yes
    Percentages:    N/A
    Media:       visual
    Computed value: as specified

This property controls capitalization effects of an element's text. Values have the following meanings:

capitalize
    Puts the first character of each word in uppercase; other characters are unaffected.
uppercase
    Puts all characters of each word in uppercase.
lowercase
    Puts all characters of each word in lowercase.
none
    No capitalization effects.

Take care

Tjorriemorrie

How to use Zend headLink and headScript

Zend has a very nice feature in that you can add your stylesheets and javascripts to your layout. I normally always load a few of these sheets and scripts for every website. The downside is that the user needs to make a lot more requests to the server, but other than that it really improves coding time and reusability.

Let's look at stylesheets first. Adding javascripts will be the same method. To include a stylesheet in the layout, you would add the following in the head tag:

/application/views/layouts/layout.phtml
    headLink()->appendStylesheet($this->baseUrl() . '/css/global.css')
        ->headLink()->prependStylesheet($this->baseUrl() . '/css/resets.css')
    ?>
headLink() ?>

That will add the stylesheet to your page. Note how I've used prepend for the rest css file, and append for my global css file — that way my resets will be placed above other appended stylesheets. Normally it loads in the order in which it is added.

That's all well and good, but let's there's another method which I prefer. And that is to load your CSS stylesheets form the bootstrap file. You can in your bootstrap also add the files like so:

/application/Bootstrap.php (function not complete)
 function _initView()
 {
  $view->headLink()->prependStylesheet('css/resets.css')
   ->headLink()->appendStylesheet('css/global.css')
   ->headLink()->appendStylesheet('css/forms.css')
   ->headLink()->appendStylesheet('css/pages.css');
 }

Why I prefer this method is because you reduce your layout file. All that is now left in the layout file is:

/application/views/layouts/layout.phtml
headLink() ?>

Very important!

Take a look at the first headLink example at top. Note how I add the CSS stylesheets to the Zend layout with a headLink()->etc for all your stylesheets it will add the current one and echo all the stylesheets that has been added to the headLink before as well. This leads to CSS stylesheets being added multiple times, instead of being linked once. Remember to set your headLink and once all are linked then echo it.

Javascripts works the same way, but it uses headScript instead. I'm just going to give the bootstrap way of how I attach my javascripts. I'm sure you can figure out how to use and implement it yourself.

/application/Bootstrap.php (function not complete)
 function _initView()
 {
  $view->headScript()->prependFile('js/jquery-1.3.2.min.js')
   ->headScript()->appendFile('js/jquery-ui-1.7.min.js')
   ->headScript()->appendFile('js/jquery.easing.1.3.js')
   ->headScript()->appendFile('js/docready.js');   

 }

As you can see I link my jQuery javscript and just echo it in the layout file like so:

/application/views/layouts/layout.phtml
 headScript() ?>

My docready is the file I use to start my scripts once the document is loaded, i.e. that file contains the $(function() {}); function and others as well.

Take care!

Tjorriemorrie