JavaScript boilerplate file

var App = function() {

    var debug = true;
    var self = this;

    /**
     * Initializing app on document ready
     * or device ready in case of PhoneGap
     *
     * @returns {App}
     */
    this.init = function() {
        self.settings();
        self.events();

        return this;
    };

    /**
     * Setting various variables and making
     * some DOM changes
     */
    this.settings = function() {

    };

    /**
     * Binding events
     */
    this.events = function() {

    };

    return this;
};

 

Image under text in an HTML email

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body style="font-family: 'Myriad Pro', sans-serif;font-size: 16px;font-weight: 400;color: #252525;">
    <table style="width: 100%;max-width: 600px;margin: 0 auto;">
        <tr style="width: 100%;height: 0;">
            <td></td>
            <td rowspan="2">
                <img src="http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg" alt="Background">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="vertical-align: top;padding-top: 27px;">
                <table style="width: 100%;">
                    <tr>
                        <td>Some purely random text</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>


</body>
</html>

 

Styling a radio box with CSS

the CSS:

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;  
}  

input[type=radio] {  
    display: none;  
}  

label:before {  
    content: "";  
    display: inline-block;  

    width: 16px;  
    height: 16px;  

    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}  

input[type=radio]:checked + label:before {  
    content: "\2022";  
    color: #f3f3f3;  
    font-size: 30px;  
    text-align: center;  
    line-height: 18px;  
}  

.radio label:before {  
    border-radius: 8px;  
}

the HTML

<div class="radio">  
    <input id="male" type="radio" name="gender" value="male">  
    <label for="male">Male</label>  
    <input id="female" type="radio" name="gender" value="female">  
    <label for="female">Female</label>  
</div>

 

JavaScript Preload Images

var images = [];
var images_to_preload = [
  'path/to/image/one',
  'path/to/image/two'
];

function preload(images_list) {
     for (var i = 0; i < images_list.length; i++) {
         images[i] = new Image();
         images[i].src = images_list[i];
     }
}

preload(images_to_preload);

 

My bashrc file

# Bash colouring
PS1="\[\033[0;33m\]\u\[\033[0m\]\[\033[0;32m\]@\h\[\033[0m\] \[\033[0;35m\]\w\[\033[0m\]\[\033[0;31m\]>\[\033[0m\] "

# Start tmux if it's screen : )
if [[ ! $TERM =~ screen ]]; then
    exec tmux
fi

# Aliases
alias v="vim"
alias art="php artisan"
alias gita="git add -A"
alias gits="git status"
alias gitc="git commit -m "

 

Apache htaccess authentication

Add this to your .htaccess file (note that you need to have the full path to the .htpasswd file)

AuthUserFile /full/path/to/.htpasswd
AuthType Basic
AuthName "Authentication required"
Require valid-user

you can generate .htpasswd(password) from this website: http://www.htaccesstools.com/htpasswd-generator/

CakePHP 2 “remember me” feature

So I am going to show how to implement a “remember me” feature in CakePHP 2 while utilizing Cake’s Auth.

I assume that you already have a working installation of CakePHP 2 and that the controller which you are using for authentication is called: User. Also, that your username and password fields in the ‘users’ table are called respectively ‘username’ and ‘password’( this should be the case if you want Auth to handle things automatically for you ). If you don’t have Auth configured and working you can go here and follow the instructions there.

So firstly, add the following code to your login form view. This is just using CakePHP form helper to output the “remember me” checkbox and a label. You can style it however you like.

<?php echo $this->Form->input('rememberMe', array('type' => 'checkbox', 'label' => 'Remember me')); ?>

Depending on how your login function is implemented the code above should be used in a similar manner:

if ($this->Auth->login()) {
    // The previous piece of code goes here

    $this->redirect('/users/profile');
}

Next, add the following code in the beforeFilter() method of your AppController class( which resides in app/controller/AppController.php ) so it should look like the following:

class AppController extends Controller {
    // Our code follows from here
    public function beforeFilter() {
	// set cookie options
	$this->Cookie->httpOnly = true;
	
	if (!$this->Auth->loggedIn() && $this->Cookie->read('rememberMe')) {
	     $cookie = $this->Cookie->read('rememberMe');

             $this->loadModel('User'); // If the User model is not loaded already
	     $user = $this->User->find('first', array(
	            'conditions' => array(
	                'User.username' => $cookie['username'],
	                'User.password' => $cookie['password']
	            )
	     ));
	
	     if ($user && !$this->Auth->login($user['User'])) {
	            $this->redirect('/users/logout'); // destroy session & cookie
	     }
     }

     // The rest of AppController goes here
}

Updating the logout function accordingly. Add this to any controller which you want to handle the logout poccess. Note the use of $this->Cookie->delete(‘rememberMe’).

public function logout() {
	$this->Session->setFlash("You've been logged out");
	$this->Cookie->delete('rememberMe');
	$this->redirect($this->Auth->logout());
}

That’s it. You can go ahead and test it now. Note that I’ve tested this on CakePHP 2.2.5 but it should work on anything upwards of 2.0(inclusive)

TIP: When creating new controllers and you are overriding the beforeFilter() method you should add the following code at the beginning of your beforeFilter() method. This ensures that the last piece of code always gets executed:

parent::beforeFilter();

TIP: Remember to load the Cookies component in you AppController as follows:

public $components = array(
                    ‘Cookie’
                    // Load other components
);

 

Simple HTML slidebar – works on mobile

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#bar{
    width:200px;
    height:25px;
    border:1px solid black;
    position:relative;
}

#slider{
    width:0%;
    height:100%;
    background-color:red;
    top:0px;
    left:0px;
    position:absolute;
    cursor:pointer;
}

#info{
    width:200px;
    height:25px;
    border:1px solid black; 
}

</style>

<script type="text/javascript">
var bar, slider;

function init(){

    bar = document.getElementById('bar');
    slider = document.getElementById('slider');
    info = document.getElementById('info');
    bar.addEventListener('mousedown', startSlide, false);   
    bar.addEventListener('mouseup', stopSlide, false);
}

function startSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'start' + set_perc + '%';  
    bar.addEventListener('mousemove', moveSlide, false);    
    slider.style.width = (set_perc * 100) + '%';    
}

function moveSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'moving : ' + set_perc + '%';
    slider.style.width = (set_perc * 100) + '%';
}

function stopSlide(event){
    var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
    info.innerHTML = 'done : ' + set_perc + '%';
    bar.removeEventListener('mousemove', moveSlide, false);
    slider.style.width = (set_perc * 100) + '%';
}

</script>

</head>
<body onload='init()'>

<div id='bar'>
<div id='slider'>

</div>
</div>
<br />

<div id='info'>info</div>

</body>
</html>