Git(Hub) basic commands and usage

Create a local repository

Open your project folder in the chttp://www.albertcasadessus.com/wp-admin/post-new.phpommand line. Then:

git init
# to start a local repo
touch README
# Edit it, this file is required
git add .
# add all the files
git commit -m "first commit"
# do the first commit

Push it to GitHub

git remote add origin https://github.com/username/project-name.git
# create a remote repo
git push origin master
# push the commit/s to the master branch

Clone the repo to work on it from another computer

Open a terminal and go to the desired folder and:

git clone https://github.com/username/project-name.git
# now you have all the files in that computer, do all the changes
git commit -a -m "your commit text"
# commit all the changes
git push origin master
# push changes to GitHub

Update your local repo with the changes commited on github

git pull origin master
# to update the local files

Source:

Read More

Color scheme designer

For people like me who are not used to design a website from scratch, to design a website is a big deal (even if it’s just a backend).

To help you out to solve this problem (at least the color scheme one), I found this useful website http://colorschemedesigner.com/ which gives you a color set to use in your website, starting from a single hexadecimal colour. Actually I have redisigned my blog using it!

Just selecting to obtain the scheme:

 

colorscheme-picker

 

And then you can see some examples of how a website would look like.

 

colorscheme-lightpage

 

Source:

Read More

Redesign of the blog using Twitter Bootstrap

For people not very used to design a site (or the ones who are not focused in frontend development), to use a CSS Framework could be very useful. I’m one of these, and in my case I ‘ve to say that is at least, easier than starting from scratch.

As you could have seen with the title of the entry, I’ve used Twitter Bootstrap . It has been my second time using it, and I must say that it has been again a nice framework to worh with. I’ve used also the Responsive feature again, because almost the 25% of the people who visited my blog site, use mobile devices.

I’m not going to tell or describe the features that it offers or how make it works, because it is very easy to use and provide almost all the CSS styles that you would need in the frontend development of a site, and some scaffolding to get started with.

Summarizing, I can assert that I would use it in my future projects.

Sources:

 

Read More

MySQL backup and restore (mysqldump and mysql to restore)

mysqldump is an effective mysql’s native way to backup a database. With just a single command you can easily do a backup of your database. Of course, mysql provide as well a way to restore dumps.
Beyond its native way, it’s better to use this way instead of using e.g. phpmyadmin. Why? Well, first phpmyadmin don’t allow to restore backups from files highers than aproximately 2mb, and has also a limit for the dumps.
 

Backup a database.

So to backup a database, just do in a terminal/console:

mysqldump -u[user] -p[password] [dbname] > nameofdumpfile.sql

This option has more options (like backup all the databases, just some tables/databases, etc). To have a list of them, just query it by using –help flag.
 

Restore a database.

Restore a database is quite easy as well:

mysql -u[user] -p[password] [dbname] < nameofdumpfile.sql

Easy isn’t it?
If your dump file contains a CREATE DATABASE statement, you can avoid the [dbname] param.
 

Common problem on restoring a database

If you are trying to restore a database and you get the following error:

ERROR 2006 (HY000) at line XX: MySQL server has gone away

Most likely you are trying to load a bigger file than mysql configuration can handle. To solve that, just edit your mysql configuration file and restart the mysql service.

  1. Edit the file my.cnf (depending on the version or the OS, folder containing it may change)
    sudo nano /etc/mysql/my.cnf
  2. Look for the max_allowed_packet and increase it to fit the size of the file you want to load.
    [mysqld]
    max_allowed_packet=256M
  3. And finally restart the mysql service
    /etc/init.d/mysqld restart

 
Easy as it is, this can avoid you a lot of headaches.

Read More

Force download with PHP and mime types

This is a basic feature post, but I wrote it to keep it handy.

If you need to link a document/picture/video or whatever file in your website, you can do it using an a-tag <a href…> link </a> , but what if you want to force this file to be download by the user instead of be opened by the browser?

To do that, you’ll need to write a bridge script between the page and the file, and then the link as it follows:

<a href='download.php?file=filename.jpg'>download image</a>

Then in the file download.php, the important code will be:

<?php
// .... before that, you should, well
// must check the file, the path,
// code injection...
header('Content-type: application/octet-stream');
header('Content-Disposition: attachment; filename=name_of_the_file_to_show.jpg"');
readfile("path/to/".$_GET["file"]);
?>

 

You can change the content-type to help browser identifying the file type. Below I attach a list of the most common/used:

 

Extension Type
(all files) application/octet-stream
avi video/x-msvideo
bmp image/bmp
css text/css
doc application/msword
dot application/msword
eps application/postscript
gif image/gif
gtar application/x-gtar
gz application/x-gzip
htm text/html
html text/html
ico image/x-icon
jpe image/jpeg
jpeg image/jpeg
jpg image/jpeg
js application/x-javascript
latex application/x-latex
mov video/quicktime
mp2 video/mpeg
mp3 audio/mpeg
mpa video/mpeg
mpe video/mpeg
mpeg video/mpeg
mpg video/mpeg
pdf application/pdf
pps application/vnd.ms-powerpoint
ppt application/vnd.ms-powerpoint
prf application/pics-rules
ps application/postscript
qt video/quicktime
rtf application/rtf
svg image/svg+xml
swf application/x-shockwave-flash
tgz application/x-compressed
tif image/tiff
tiff image/tiff
txt text/plain
xls application/vnd.ms-excel
zip application/zip

 

Another way would be using fileinfo or other functions available in php to query a file.

Read More

Creating first app with phonegap apache cordova and jquerymobile

It’s kindly obvious that if you are a web developer, it will be easier for you to entry into mobile development using web apps (html5 + JS) than native code.
I’m not writing this post to let you figure out all the capabilities and possibilities that web apps gives you instead of native apps, but for me there are. And basing my decision on this I would like to share my code of one of my first test projects/snippets using (in this case) Android, jQuerymobile and Apache Cordova / Phonegap (both names Cordova and Phonegap are used along the post to reference the same).

All the cited and detailed code below can be forked there:
https://github.com/llissssss/wp-feedreader-droidgap

and the working example to install to your phone here:
https://github.com/llissssss/wp-feedreader-droidgap/raw/master/bin/Albert%20Casadessus%20feed-reader.apk

The idea is to create a web app which requests all the posts of a wordpress site, and keep them in local storage, providing readability even when you are offline, and to sync with the site and get new posts when necessary.

What do I need to start?

Create project

Then create a project, with one empty activity. Then, edit your MainActivity.java to look like:

package com.albertcasadessus.albert.casadessus.feed_reader;
 
import android.os.Bundle;
import org.apache.cordova.DroidGap;
import android.app.Activity;
import android.view.Menu;
 
public class MainActivity extends DroidGap {
 
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
 
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}

In /assets/www/ you should create your index.html file.
At this point, you don’t need to code java or change android parameters anymore, well I’m mistaken, you need to modify your AndroidMAnifest.xml to add the permissions we’ll request to use on our app:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />   
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Not all of them are necessary. For this project we just need to check the internet connection, access to read and write local storage, and notifications.

The code.

All the needed code is linked git. As I said before, you can also fork the project on github.

The code (HTML)

The HTML has no secrets. In <head> I just referenced the necessary files. Body is created using jquerymobile because I didn’t want to spend time creating the visual interface for a test.

https://github.com/llissssss/wp-feedreader-droidgap/blob/master/assets/www/index.html

The code (JS)

First line is the one which fires the applications. When phonegap is ready to access phone utils, is launched.

document.addEventListener("deviceready", onDeviceReady, false);

On that function, I open the database to work with. And I load the data stored in local storage with getJsonDB(), and I try to get data from the wordpress site calling getJsonFromWeb(), using sqlite and key/value pairs.

getJsonDB() , creates the table if not exists (first launch) and tries to retrive the posts stored in local. Calling processJsonDB() checks if there’s local data, if not notificates the user using native phone notifications, but If there’s, generates the page content (see generatePageFromJson())

In parallel, via ajax, I request the posts from the wp site. If request fails and there’s no local data, I show a error, but if not, local posts are displayed.
If everything went okay, I update the local data via updateData() and the page, well the post lists is re-generated with new data calling the previous function generatePageFromJson()

Have a look at the code and everything is going to be clearer for you.

https://github.com/llissssss/wp-feedreader-droidgap/blob/master/assets/www/js/funcions.js

Easy isn’t it? I guess you may be thinking why I not compare the posts date in order to decide if there have been changed, but that’s not the aim of project, so please just note about the use of phone utilities such as notifications, checking internet connectivity, and local storage and how easy is to create just once the logic and the interface and being able to use it in all platforms.

 

To try this example, you can install the app on your phone:

https://github.com/llissssss/wp-feedreader-droidgap/raw/master/bin/Albert%20Casadessus%20feed-reader.apk

 

Read More

Reading files with PHP: “auto detect line endings”

With this PHP code:

<?php
$fp = @fopen("file.txt", "r");
if ($fp)
{
	$i = 1;
	while (($line = fgets($fp, 4096)) !== false)
	{
		echo "Line ".$i.": ".$line;
		$i++;
	}
}
?>

And this file.txt content:

aaaaa
bbbbb
ccccc
ddddd

You expect an output like:

Line 1: aaaaa
Line 2: bbbbb
Line 3: ccccc
Line 4: ddddd

A problem appears when you read a file created in a Mac environment (eg, \r instead of \n ). Then you could get something like:

Line 1: aaaaa bbbbb
Line 2: ccccc
Line 3: ddddd

To avoid that and always get a correct (and an expected!) performance, just add this line in the beginning of your code:

ini_set("auto_detect_line_endings", true);

Read More

Geolocation API with HTML5

Geolocation API and a browser supporting HTML5 location feature, may help you to know geolocation of a visitor (not so much accurate, cause it doesn’t use GPS to get location).
How? Let’s take a look to a simple code:

function GeoHtml5()
{
	if (navigator.geolocation)
        navigator.geolocation.getCurrentPosition(onGetPosition,onErrorPosition);
	else
        alert("geo not supported");
}
 
function onGetPosition(geolocation)
{
    var latitude = geolocation.coords.latitude;
    var longitude = geolocation.coords.longitude;
    alert("Your lat: " + latitude + "\nYour long: " +  longitude);
}
function onErrorPosition()
{
    alert("Error on get position");
}

First function, detects if browser supports this feature. Second one is triggered when getting location is OK, second one when it’s not. I’m not going to explain inline code, because it’s very intuitive and simple.

Here is the code running.

If W3C and browser “companies” improves it, it could reduce a little bit more differences with mobile’s web-apps and native apps.

For more information, visit W3c’s Geolocation API site.

Read More

How and why to create a “child theme” in WordPress

Child themes are those which inherit styles and functionalities from another parent theme.

Why use child themes?
One of multiple utilities reside in change ,for example, only the styles/appearance without creating a new theme (because a child theme, just require a style.css file). For example, if you want to change colorset of your current theme and you edit their style.css, everything will be ok… until you update your theme and you will lose all your changes.

How to do that?
Is simple as just create one folder in your /wp-content/themes/ , just as another wp theme. Then, just copy (eg.) parent theme style.css, and add this at the beggining:

/*
Theme Name:     Responsive personalitzat
Description:    Child theme for responsive theme
Author:         Albert Casadessús
Author URI:     http://www.albertcasadessus.com/
Template:       responsive
Version:        0.1.0
*/

Where Template must be the name of the parent theme folder (case sensitive!). Above there’s style.css of my child theme to change a bit the responsive theme I use.

So in this example, my folder struct will be:
/wp-content/themes/responsive_child
/wp-content/themes/responsive_child/style.css
(and if you want to modify another files, just put in the folder and think about the header above)
/wp-content/themes/responsive/
/wp-content/themes/responsive/(with all the files of the theme)

Read More

Get web browser preferred language with PHP $_SERVER variables HTTP_ACCEPT_LANGUAGE

HTTP Language headers.
In php the way to get the language information sent by browser is with server reserved variables.

1
2
3
<?php
echo $_SERVER['HTTP_ACCEPT_LANGUAGE']);
?>

Which output (in my browsers):

  • ca,en-us;q=0.7,en;q=0.3 in Mozilla Firefox 13.0.1
  • es-ES in Internet Explorer 9 64b
  • ca-ES,ca;q=0.8 in Google Chrome 20.0

The “q-value” (when it’s shown in a value range between 0-1) indicates the percent that the browser prefer this language. If it’s not provided, we asume is 1 (maximum).

How to get the preferred language?
Here’s a simple function I’ve coded to get the preferred language according q-value in ISO 639-1 format:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
function GetLanguageCodeISO6391()
{
	$hi_code = "";
	$hi_quof = 0;
	$langs = explode(",",$_SERVER['HTTP_ACCEPT_LANGUAGE']);
	foreach($langs as $lang)
	{
		list($codelang,$quoficient) = explode(";",$lang);
		if($quoficient == NULL) $quoficient = 1;
		if($quoficient > $hi_quof)
		{
			$hi_code = substr($codelang,0,2);
			$hi_quof = $quoficient;
		}
	}
	return $hi_code;
}
 
echo "Your browser preferred language is: ".GetLanguageCodeISO6391();
?>

To check what will output in your browser, go to this demo.

 

Read More