Alex Eguia's Codeblog

Choosing the best color palette for your project

4 Feb 2014

Choosing colors for your project might end in a nightmare, so that’s why there are some palettes around avoiding typical CSS properties like background-color: blue, red or yellow. One of my favorite palettes is the one given in the design guidelines for Android, where standard colors are presented in a not so saturated form, and matches any project perfectly.

You can hover over the color palette to get the RGB hex value:

  • #33B5E5
  • #AA66CC
  • #99CC00
  • #FFBB33
  • #FF4444
  • #0099CC
  • #9933CC
  • #669900
  • #FF8800
  • #CC0000

It’s also known that we can’t mix many colors on screen, or we’ll end up going back to the early 90s. To avoid this, we can use different shades for one color, depending on the element’s position or importance, or simply to create contrast.

  • #E2F4FB
  • #C5EAF8
  • #A8DFF4
  • #8AD5F0
  • #6DCAEC
  • #50C0E9
  • #33B5E5
  • #2CB1E1
  • #24ADDE
  • #1DA9DA
  • #16A5D7
  • #0FA1D3
  • #079DD0
  • #0099CC
  • #F5EAFA
  • #E5CAF2
  • #DDBCEE
  • #D6ADEB
  • #CF9FE7
  • #CB97E5
  • #C58BE2
  • #C182E0
  • #BA75DC
  • #B368D9
  • #AC59D6
  • #A750D3
  • #A041D0
  • #9933CC
  • #F0F8DB
  • #E2F0B6
  • #D3E992
  • #C5E26D
  • #B6DB49
  • #A8D324
  • #99CC00
  • #92C500
  • #8ABD00
  • #83B600
  • #7CAF00
  • #75A800
  • #6DA000
  • #669900
  • #FFF6DF
  • #FFECC0
  • #FFE3A0
  • #FFD980
  • #FFD060
  • #FFC641
  • #FFBD21
  • #FFB61C
  • #FFAE18
  • #FFA713
  • #FFA00E
  • #FF9909
  • #FF9105
  • #FF8A00
  • #FFE4E4
  • #FFCACA
  • #FFAFAF
  • #FF9494
  • #FF7979
  • #FF5F5F
  • #FF4444
  • #F83A3A
  • #F03131
  • #E92727
  • #E21D1D
  • #DB1313
  • #D30A0A
  • #CC0000

Source: Color | Android Developers.

Starting your new website’s design

4 Feb 2014

When you have got to start coding a new website, there’s nothing faster and easier in terms of design than starting with Bootstrap. This framework can be found here and allows you to create your website’s layout with some very easy tricks: just link the css, write some html code and class some of those tags, and you’re free to go with a great-looking Times-New-Roman-less front-end.

However, some of us might be detail-oriented or simply don’t like some Bootstrap features. In any case, we are not supposed to change the Bootstrap code, it’s recommended to use a personal stylesheet and override those properties.

Inspired by often.io, a place where you can store code you often use, here are some tweaks I usually do the standard Bootstrap library, thus becoming my usual starting point of the style.css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  letter-spacing: -0.5px;
}

p {
  margin: 0;
}

a, a:visited {
  text-decoration: none;
}

a:active, input[type="submit"]:active, button, input[type="reset"] {
  position: relative;
  top: 1px;
}

ul {
  overflow: hidden;
}

Installing Moodle on debian, nginx and php-fpm

30 Ene 2014

Moodle is fully tested to work with Apache2 by default, but will also with other web servers like lightttpd, nginx, cherokee, zeus and LiteSpeed [1]. There is also an unwritten rule with Apache2 which states that for every 50 users, you should increase the amount of RAM by 1GB on your server. In order to improve performance, we may want to install this LMS on an nginx based web-server, but it’s not that simple, since we have faced some problems below explained.

To begin the installation, create your new nginx host (i.e. via server-manager), edit its configuration file:

1
sudo nano /etc/nginx/sites-enabled/example.com.conf

And replace the code with this one:

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
29
30
31
32
server {
    listen 80;
    server_name example.com; #REPLACE SERVER NAME
   
    root /var/www/example.com/www/; #REPLACE MOODLE INSTALL PATH
    error_log /var/www/example.com/log/example.com_errors.log; #REPLACE MOODLE ERROR LOG PATH
    access_log /var/www/example.com/log/example.com_access.log; #REPLACE MOODLE ACCESS LOG PATH
   
    rewrite ^/(.*\.php)(/)(.*)$ /$1?file=/$3 last;
   
    location / {
        index index.php index.html index.htm;
        try_files $uri $uri/ /index.php;
    }
   
    fastcgi_intercept_errors on;
   
    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
       
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
       
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
       
        include fastcgi_params;
    }
   
    location ~ /\.ht {
        deny all;
    }
}

Remember to restart nginx: [1]

1
sudo service nginx restart

Now you should be able to install your Moodle, but installation will fail throwing some kind of error like this one:

1
upstream timed out (110: Connection timed out) while reading response header

This is caused because nginx is set to timeout queries longer than 60 seconds, and Moodle’s installation query doesn’t end until all database and modules are installed, printing a blank page and no error whatsoever.

To prevent this, change your nginx configuration file:

1
sudo nano /etc/nginx/nginx.conf

Find the fastcgi_read_timeout sentence, uncomment it, and change its value:

1
2
3
4
5
6
http {
  ...
  #UNCOMMENT THIS LINE, AND SET A TEMPORARY VALUE FOR TIMEOUT (600s, 9999s, ...)
  fastcgi_read_timeout 600s;
  ...
}

Restart nginx once again, and we should be good:

1
sudo service nginx restart

Once the instalation is completed, fastcgi_read_timeout should be reverted to its original value in order to improve your server’s performance.


[1] In case your Moodle’s host is the first one to be created on your server, remember to remove your default host and to create the symbolic link to sites-enabled folder.

1
2
sudo rm /etc/nginx/sites-enabled/default
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com