I decided to phase out Wordpress due to three reasons:

• my site was composed of a few static pages, no comments, no articles
• I’m too lazy to keep Wordpress up to date (at least to fix security issues)
• I’d like to present my self in an original manner

My idea was to design my professional website as a presentation so I started searching for a slide-engine with the following capabilities:

• easy to setup
• HTML5 compliant
• coming with some nice built-in themes
• nice-looking on mobile devices

Reveal.js was the answer!

After a rapid prototyping of the required sections of the site, I could set up my new website in a couple of hours, just 10 lines of javascript and well structured HTML5 code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Reveal.initialize({
  controls: true,
  progress: true,
  history: true,
  center: true,

  theme: Reveal.getQueryHash().theme,
  transition: Reveal.getQueryHash().transition || 'default',

  // Optional libraries used to extend on reveal.js
  dependencies: [
      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
  ]
});

And here you are!!

Maybe it is still a bit spartan, but it is also effective and that was my first requirement.

If you have ideas or suggestions to improve it, don’t esistate to share, it’s still a work in progress…

In this post I don’t want to list pros or cons of git versus svn or viceversa but I’d like to share a very simple worflow I’ve adopted to manage my live and dev environments and to keep them in sync through git.

Setup

Live Server

You need to create a bare repository (that we called newrepo.git) somewhere in your live server. I’m assuming that the /var/git/repo directory has been previously created.

1
2
3
4

cd /var/git/repo
mkdir newrepo.git
cd newrepo.git
git init --bare

As second step, you should clone the newrepo.git to your webserver root directory, assuming this repo will contain the website files you are working on.

1
2

cd /var/www
git clone /var/git/repo/newrepo.git newsite

Development Server

On your development server, you have to clone the same repository newrepo.git. It is worth to note that the clone has been added the remote url automatically since you are cloning through ssh protocol.

1
2

cd /var/www
git clone ssh://myuser@myliveserver.com/var/git/repo/newrepo.git newsite

Deploy local changes

Development Server

First of all, you should to prevent web access to the .git directory (differently from svn, it exitsts only at your clone root) by creating a .htaccess file at the same level of .git folder.

1
2

cd /var/www/newsite
touch .htaccess

1
2
3

# deny access to the top-level git repository:
RewriteEngine On
RewriteRule \.git - [F,L]

Now add your first extra-complicated index file :)

1

echo 'Hello World!' >> index.html

And sync the changes with your local repository.

1
2

git add .
git commit -m ".git folder protected from web access"

Last step consists of pushing local changes to the remote repository (with ‘remote repository’ I mean the one on live-server at /var/git/repo/newrepo.git path).

1

git push origin master

Live Server

Finally, pull down changes from the newrepo.git repository to the clone in your web server root directory.

1
2

cd /var/www/newsite
git pull origin master

There is plenty of sophisticated libraries to manage ajax file upload. Being a fan of jqForm that I massively use in the frontend of my applications, I decided to stick on that for this tut.

Problem

Let’s consider the example on the jqForm website. As explicitly explained, there are some limitations for old browsers when you need to get a JSON response back from server.

“Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object. This is a common fallback technique, but it has inherent limitations. The iframe element is used as the target of the form’s submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn’t work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.”

Official jqForm documentation suggests to modify the server side code to let it send back the JSON data between a <textarea> tags. I don’t dislike their solution but I found an alternative that worked worked pretty well in a couple of my web apps and maybe it is simpler.

Solution

Server Side Code (Php)

1
2
3
4
5
6
7
8
9
10

<?php

// process uploaded file

$data = array();

// populate $data with the json data to return

echo json_encode($data);
?>

As you can see, I have voluntarily not specified the response Content-Type to workaround the problem we are addressing.

Client Side Code (Javascript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/Javascript">
 // I'm assuming that the form id is "myUploadForm"
 $('#myUploadForm').ajaxForm({
        beforeSubmit: function(a,f,o) {
          // show loader gif
        },
        success: function(data) {
          // here we get raw data, not yet encoded in JSON object
          var json_data = null;
          try{
              json_data = jQuery.parseJSON(data);
              // make something with json_data
          }
          catch(e)
          {
              alert('Ops, something went wrong :(');
          }
        },
        complete: function()
        {
          // hide loader gif
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
          alert('Ops, something went wrong :(');
        }
    });
</script>

Don’t set the Content-Type in the server response and let jQuery intelligently guess the response content type ( take a look at datatype option specifications ).

Among the interesting features offered by Yii, there is one that has been a real headache: the form widget and the client-side validation. Yii framework allows you to define validation rules in the model classes and then it generates the javascript code to perform validation also on the client. The js code is generated on CActiveForm widget rendering. When the user submits the form, the validatio code is executed on the browser and if everything is fine, the data are sent to the server.

Problem

Till now, everything looks awesome, but at some point I needed to let jqForm jQuery plugin to handle the Ajax form submission. BUT I would love to keep the Yii generated javascript validation. AND I don’t want to change the Yii javascript library code.

Solution

EVENTS!! Yes, the Yii form widget allows you to specify a javascript function that is called after client-side validation. This is what should happend once the Yii submit listener intercepts the submit button click event:

• prevents default form submission
• validate user input
• executes the “afterValidate” function, if any
• if validation is ok, it submits the form to the server

The “afterValidate” function should be designed to perform at least three tasks:

• check that the validation was successful
• if user inputs have been validated, submit the form using jqForm plugin
• prevent the form submission by the Yii javascript library

Import jqForm library

In the form view file:

1

<?php Yii::app()->clientScript->registerScriptFile('/js/jquery.form.js'); ?>

This code tells Yii to include the jquery.form.js file in the html page header.

Define afterValidate function

In the form view file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php

Yii::app()->clientScript->registerScript('yiijqform', "
   function myAfterValidateFunction(form, data, hasError)
   {
        if(!hasError)
        {
            $(form).ajaxSubmit({
                dataType: 'json',
                timeout: 10000,                
                success: function(data)
                {
                 // do something
                },
                error: function(xhr)
                {
                 alert('ops...');
                }
            });
        }
        return false;
   }
       
", CClientScript::POS_HEAD);

?>

When the myAfterValidateFunction is invoked, the form is Ajax submitted through the ajaxSubmit function defined in the jqForm plugin. Please be sure to check for the hasError paramter that contains the result of the client-side validation. If it is false, the form shouldn’t be submitted to the server.

The return false at the end of the function body prevents the flow of Yii javascript form submission handler to be resumed. Otherwise, the form would be submitted twice!

Attach function to afterValidate event

In the form view file:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
$form = $this->beginWidget('CActiveForm', array(
    'id'=>'myform_id',
    'action'=>array('/my/action'),
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
        'validateOnChange'=>false,
        'afterValidate'=>'js:myAfterValidateFunction'
    )
));
?>

As you can see, attaching a javascript function to afterValidate event is pretty simple using the CActiveForm widget options.

Final thoughts

As you can see, integrating jqForm with Yii javascript libraries is quite easy once you know how to hook your code without touching framework core files. Fortunately Yii framework is very well documented and the source code can be understood by experienced Php developers. If you know more elegant ways to accomplish this task, please drop me a line via e-mail or comment below.