Web Development – Page 6

alex-arriaga August 7, 2013

Which web browsers should I support if I am using HTML semantic elements?

As a web developer I am sure you have asked yourself many times how to decide which web browser your project should support when it is using new HTML5 semantic elements, well today I will try to summarize -with this short article- a list of resources and suggestions that could help you with this task.

After studying compatibility among most popular browsers and HTML5 + CSS3, I consider your target should be:

Internet Explorer 7+
Firefox 19.0+
Chrome 25.0+
Safari 5.1+
Opera 12.1+
iOS Safari 4.0+
Opera Mini 7.0+
Android Browser 2.2+
Blackberry Browser 7.0+

With this list of browsers we can support almost all new semantic elements HTML5. The next figure show a list of web browsers with full-support for HTML5 semantic elements (you can see the full list in: http://caniuse.com/#cats=HTML5). It is true that Internet Explorer 7 and 8 doesn’t support semantic elements but there is a list of “tricks” that we could use in order to create a good solution for that (Mondernizr and Polyfills).

Figure 1. Semantic elements support in different web browsers.

Related Resources

Below there is a list of websites where more information about this topic can be found.

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga August 2, 2013

Regular expression to validate an HTML hexadecimal color in jQuery

jQuery, Web Development 1 Reply

Today, I would like to share a useful code that could help when you need to know if a color is correctly entered in an input field. So, here is an example of how to validate an HTML hexadecimal color by using a regular expression in JavaScript.

The regular expression to accomplish this task is:

^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

1	^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$

Explanation:

^ – Represents the beginning of the string

# – Number symbol (to accept only colors starting with “#”, like “#33cc55”)

( – Indicates the beginning of the group

[A-Fa-f0-9]{6} – Accepts six characters: letters among A to F, a to f or digits.
| – An “OR” condition
[A-Fa-f0-9]{3} – Accepts three characters: letters among A to F, a to f or digits.

) – Indicates the end of the group

$ – Represents the end of the string

Now, for testing we need a little HTML like this:

<div class="testing">
	<input id="links_color" name="links_color" value="#445566" />
	<a id="validate" class="btn" href="#">Validate</a>
	<div id="errors_output"></div>
</div>

<a id="validate" class="btn" href="#">Validate</a>

</div>

And this code uses the regular expression in JavaScript:

	(function($){
		$(document).on('ready', function(){
			function checkRegexp ( o, regexp, n, errors_output ) {
				if ( !( regexp.test( o.val() ) ) ) {
					o.addClass( "ui-state-error" ); // Uses a jQuery UI class
					errors_output.html("Error: " + n);

					return false;
				} else {
					errors_output.html("Correct! ");
					return true;
				}
			}

			$("#validate").on('click',function(){
				var links_color = $("#links_color"),	// This read a DOM object (input)
				errors_output = $("#errors_output");

				var valid = checkRegexp(
						links_color,
						/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
						"Enter valid colors like #42AB56",
						errors_output
						);
			});

		}); // ends document ready
	})(jQuery);

(function($){

$(document).on('ready', function(){

function checkRegexp ( o, regexp, n, errors_output ) {

if ( !( regexp.test( o.val() ) ) ) {

o.addClass( "ui-state-error" ); // Uses a jQuery UI class

errors_output.html("Error: " + n);

return false;

} else {

errors_output.html("Correct! ");

return true;

}

$("#validate").on('click',function(){

var links_color = $("#links_color"), // This read a DOM object (input)

errors_output = $("#errors_output");

var valid = checkRegexp(

links_color,

/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,

"Enter valid colors like #42AB56",

errors_output

);

});

}); // ends document ready

})(jQuery);

If you prefer to test this code in a complete example you can download it! http://www.alex-arriaga.com/wp-content/uploads/files/compressed/demo-regex-example.zip

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 23, 2013

How to set directory and files permissions for a Joomla site in a production environment

GNU/Linux, Joomla, Operating Systems, Web Development 2 Replies

When you have a project created on Joomla CMS, you will need to protect your directories and files in order to avoid a possible attack or loosing information. During my time as a web developer and as a server admin in Government I learnt about what’s is a good configuration for setting permissions, for this reason I would like to share a list of commands that you can use in your own server. This set of commands apply to a GNU/Linux or UNIX-like operating systems, obviously I don’t recommend use IIS from Microsoft (I am sorry Microsoft, but PHP + IIS is NOT a good option).

In a nutshell, you can use these commands:

find /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY -type f -print0 | xargs -0 chmod 644
find /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY -type d -print0 | xargs -0 chmod 755
chmod -R g+w /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY/images
chmod -R g+w /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY/cache
chmod -R g+w /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY/tmp

find /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY -type f -print0 | xargs -0 chmod 644

find /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY -type d -print0 | xargs -0 chmod 755

chmod -R g+w /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY/images

chmod -R g+w /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY/cache

chmod -R g+w /YOUR_SERVER_PATH/YOUR_ROOT_JOOMLA_DIRECTORY/tmp

For example, if my SERVER_PATH is something like this: /var/www/ and my ROOT_JOOMLA_DIRECTORY is digital-newspaper, then we can use this commands:

# This line sets all files inside of digital-newspaper to "644" permissions
find /var/www/digital-newspaper -type f -print0 | xargs -0 chmod 644

# Setting all directories to "755"
find /var/www/digital-newspaper -type d -print0 | xargs -0 chmod 755

# Special group permissions are necessary in images, cache and tmp directories
chmod -R g+w /var/www/digital-newspaper/images
chmod -R g+w /var/www/digital-newspaper/cache
chmod -R g+w /var/www/digital-newspaper/tmp

# This line sets all files inside of digital-newspaper to "644" permissions

find /var/www/digital-newspaper -type f -print0 | xargs -0 chmod 644

# Setting all directories to "755"

find /var/www/digital-newspaper -type d -print0 | xargs -0 chmod 755

# Special group permissions are necessary in images, cache and tmp directories

chmod -R g+w /var/www/digital-newspaper/images

chmod -R g+w /var/www/digital-newspaper/cache

chmod -R g+w /var/www/digital-newspaper/tmp

So, that’s it!

Be happy with your servers!

—

Alex Arriaga

alex-arriaga July 23, 2013

Reading an XML file by using Joomla 2.5 API – JFactory::getXML()

Joomla, PHP, Uncategorized, Web Development 2 Replies

Imagine the situation where you need to read a list of configuration permissions, these permissions are inside of an XML file called permisos.xml in a valid directory of your server. In this short article we will see how to read an XML file, parse it and create an array with all entries of this file. There are several ways to do this, but we will use the compatible option with Joomla 2.5 API, why? well, because Joomla 2.5 is the stable and recommended version -currently- of this CMS (Content Management System). So, please let me show you how to complete this task.

Next is a valid XML file:

<?xml version="1.0" encoding="utf-8"?>
<permisos>
   <grupo id="8" nombre="Administrators">
         <modulo nombre="COM_ADMIN_ORDER_MOD" visible="true">
            <menu nombre="COM_ORDER_S" visible="true"></menu>
            <menu nombre="COM_REPORT" visible="true"></menu>
            <menu nombre="COM_USER_S" visible="true"></menu>
            <menu nombre="COM_SHOPPERGROUP_S" visible="true"></menu>
            <menu nombre="COM_COUPON_S" visible="true"></menu>
         </modulo>
   </grupo>
 	<grupo id="11" nombre="Team Members">
   		<modulo nombre="COM_ADMIN_ORDER_MOD" visible="false">
   			<menu nombre="COM_ORDER_S" visible="false"></menu>
   			<menu nombre="COM_REPORT" visible="true"></menu>
   			<menu nombre="COM_USER_S" visible="false"></menu>
   			<menu nombre="COM_SHOPPERGROUP_S" visible="false"></menu>
   			<menu nombre="COM_COUPON_S" visible="false"></menu>
   		</modulo>
	</grupo>
</permisos>

<?xml version="1.0" encoding="utf-8"?>

</modulo>

</grupo>

</modulo>

</grupo>

</permisos>

Now, with this simple code we can read all this file using Joomla 2.5 classes and methods, in particular we will use the static method getXML() from JFactory.

$usuario =& JFactory::getUser();
$grupos_usuario = $usuario->groups;
$permisos = array();

	// Reading file
	$xmlfile = JURI::base().'/some_path/permisos.xml';
	$xml = JFactory::getXML($xmlfile,true);

	foreach($xml->children() as $grupo):
		$id_grupo_xml = $grupo->getAttribute("id");
		foreach($grupo->children() as $modulo):
			// Permissions by module
			foreach($grupos_usuario as $id_grupo):
				if(in_array($id_grupo_xml, $grupos_usuario))
					$permisos[$id_grupo][$modulo->getAttribute("nombre")] = $modulo->getAttribute("visible");
			endforeach;

			// Permissions for each menu entry in every one of the modules
			foreach($modulo->children() as $menu):
				foreach($grupos_usuario as $id_grupo):
					if(in_array($id_grupo_xml, $grupos_usuario))
						$permisos[$id_grupo][$menu->getAttribute("nombre")] = $menu->getAttribute("visible");
				endforeach;
			endforeach;
		endforeach;// all modules
	endforeach; // all groups

	echo "<pre>";
		print_r($permisos);
	echo "</pre>";

$usuario =& JFactory::getUser();

$grupos_usuario = $usuario->groups;

$permisos = array();

// Reading file

$xmlfile = JURI::base().'/some_path/permisos.xml';

$xml = JFactory::getXML($xmlfile,true);

foreach($xml->children() as $grupo):

$id_grupo_xml = $grupo->getAttribute("id");

foreach($grupo->children() as $modulo):

// Permissions by module

foreach($grupos_usuario as $id_grupo):

if(in_array($id_grupo_xml, $grupos_usuario))

$permisos[$id_grupo][$modulo->getAttribute("nombre")] = $modulo->getAttribute("visible");

endforeach;

// Permissions for each menu entry in every one of the modules

foreach($modulo->children() as $menu):

foreach($grupos_usuario as $id_grupo):

if(in_array($id_grupo_xml, $grupos_usuario))

$permisos[$id_grupo][$menu->getAttribute("nombre")] = $menu->getAttribute("visible");

endforeach;

endforeach;// all modules

endforeach; // all groups

echo "<pre>";

print_r($permisos);

echo "</pre>";

After reading content of the XML file we will get an output like this:

Array
(
    [8] => Array
        (
            [COM_ADMIN_ORDER_MOD] => true
            [COM_ORDER_S] => true
            [COM_REPORT] => true
            [COM_USER_S] => true
            [COM_SHOPPERGROUP_S] => true
            [COM_COUPON_S] => true
        )

)

Array

(

[8] => Array

(

[COM_ADMIN_ORDER_MOD] => true

[COM_ORDER_S] => true

[COM_REPORT] => true

[COM_USER_S] => true

[COM_SHOPPERGROUP_S] => true

[COM_COUPON_S] => true

)

As you can see, it is really easy to read XML files, if you have some comments about this, please let me know.

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 22, 2013

Validating if a jQuery plugin exists before running code that use it

jQuery, Web Development No Reply

When we are creating plugins or simple code in jQuery and there is a single or many plugin dependences among them, a common task is to implement a mechanism to validate if a jQuery plugin exists before running “depending” code, for example if we have this code and we have not included jqprint (a nice plugin to print a fragment of an HTML document), then an error will appear indicating that jqprint function is undefined.

(function($) {
    $(document).ready(function() {
        $(".print-this-section").on('click', function(){
            $("#section-to-print").jqprint();
        });
    });
})(jQuery);

(function($) {

$(document).ready(function() {

$(".print-this-section").on('click', function(){

$("#section-to-print").jqprint();

});

})(jQuery);

So, in order to solve this “undefined” error we could add a little validation before running jqprint code.

(function($) {
    $(document).ready(function() {
 		if( jQuery().jqprint ){ // Verifying jqprint exists
	        $(".print-this-section").on('click', function(){
	            $("#section-to-print").jqprint();
	        });
		}
    });
})(jQuery);

(function($) {

$(document).ready(function() {

if( jQuery().jqprint ){ // Verifying jqprint exists

$(".print-this-section").on('click', function(){

$("#section-to-print").jqprint();

});

}

});

})(jQuery);

With this simple code, you would be able to avoid errors in your code when a plugin is not defined.

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 17, 2013

How to set expiry date of a cookie (using jQuery Cookies plugin)

jQuery, Web Development 2 Replies

In a previous post I explained what is the process for Saving a complex JSON object in a cookie by using jQuery (demo included in PHP). Now, I would like to add some related information about how to set an expiry date of a cookie using the same plugin (jQuery Cookies).

First of all, it is important to know that an expire date is just a valid JavaScript Date Object, I mean, you will only need to create a date and then assign this to an array of options when you save your data in a cookie. Let me explain using a little example:

function setUserConfigInCookie(){
      var expireDate = new Date;
      expireDate.setDate(expireDate.getDate() + 7); // It expires in a week

      var options = {
        path: '/',
        expiresAt: expireDate
      }

      userConfig = {}; // This is a valid JSON object that you need to save in a cookie
      $.cookies.set( 'userConfig', userConfig, options);

      // console.log('Expires=' + expireDate.toGMTString());
    }

function setUserConfigInCookie(){

var expireDate = new Date;

expireDate.setDate(expireDate.getDate() + 7); // It expires in a week

var options = {

path: '/',

expiresAt: expireDate

}

userConfig = {}; // This is a valid JSON object that you need to save in a cookie

$.cookies.set( 'userConfig', userConfig, options);

// console.log('Expires=' + expireDate.toGMTString());

}

With this simple code we can save a cookie (complex JSON object) and set an expiry date (in this example the cookie is going to expire in a week). If you want to verify that all is working, you could search for your cookie in your favorite browser, for example next image uses Firefox to see this cookie:

That’s it at this moment.

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 10, 2013

Saving a complex JSON object in a cookie by using jQuery (demo included in PHP)

jQuery, Web Development 8 Replies

Today, I spent almost three hours to test and implement a mechanism to save a complex JSON object and get it to render in a HTML output,, for this reason I would like to explain what was the ~~best~~ easiest way that I found for saving my object.

First, I would recommend you to be sure that your object is well-created, I mean, it is important that your JSON object is according to JavaScript Object Notation (you can visit this link to read more about: http://www.json.org/).

Second, I have used some compatible plugins with jQuery (I have tested this plugins using jQuery 1.8.2, this because in my project jQuery had already existed, also I have tested in jQuery 1.10.2), In a nutshell, we need the next JavaScript files:

Creating our complex JSON object

I have decided to use PHP to create our testing object (because most of developers have knowledge in this programming language).

// An array to simulate a complex JSON object
		$userSettings =  array(
			"personal_information" => array(
				"name" => "Alex",
				"last_name" => "Arriaga"
				),
			"extra_information" => array(
				"twitter" => "alex_arriaga_m",
				"facebook" => "alex.arriaga.m",
				"website" => "http://www.alex-arriaga.com/",
				"programming_languages" => array("HTML5", "CSS3", "JavaScript", "PHP", "Java", "C# .NET", "AWK", "LESS", "XML")
			)
		);

		// Creating the JSON object
		$jsonObject = json_encode($userSettings);

// An array to simulate a complex JSON object

$userSettings = array(

"personal_information" => array(

"name" => "Alex",

"last_name" => "Arriaga"

"extra_information" => array(

"twitter" => "alex_arriaga_m",

"facebook" => "alex.arriaga.m",

"website" => "http://www.alex-arriaga.com/",

"programming_languages" => array("HTML5", "CSS3", "JavaScript", "PHP", "Java", "C# .NET", "AWK", "LESS", "XML")

)

);

// Creating the JSON object

$jsonObject = json_encode($userSettings);

Saving and getting our complex JSON object

Now, we can create a simple JavaScript code to save our JSON object and get it later.

	(function($){
		$(document).on('ready', function(){
			//A cookie by the name 'userSettings' now exists with a serialized copy of $userSettings
			$.cookies.set( 'userSettings', <?php echo $jsonObject; ?> );

			//A variable named 'userSettings' now holds the unserialized object, it should be identical to the PHP variable 'userSettings'
			var userSettings = $.cookies.get( 'userSettings' );

			// Do something with the values read from cookie
			console.log(userSettings);
		});
	})(jQuery);

(function($){

$(document).on('ready', function(){

//A cookie by the name 'userSettings' now exists with a serialized copy of $userSettings

$.cookies.set( 'userSettings', <?php echo $jsonObject; ?> );

//A variable named 'userSettings' now holds the unserialized object, it should be identical to the PHP variable 'userSettings'

var userSettings = $.cookies.get( 'userSettings' );

// Do something with the values read from cookie

console.log(userSettings);

});

})(jQuery);

Verifying result

To see the saved object please use Firebug (in cookie tab). See next images like a demo of this.

Figure 1. Saving JSON object

Figure 2. Getting JSON object and verifying in Firebug console

It is possible to configure several parameters, but I think is better for you read them in the official github page of this plugin: https://code.google.com/p/cookies/

You can download this example code for testing more parameters or personalize according to your project. Download here.

That’s it. Be happy with your code!

—

Alex Arriaga

alex-arriaga July 10, 2013

How to trim or delete trailing white spaces automatically on save in Sublime Text 2

Mac OSX, Operating Systems, Web Development No Reply

Sublime Text 2 is my opinion one of most beautiful and useful editors for web developers, of course I really like Notepad++ (but this one, it doesn’t have a version for MAC OSX). A common task when we are creating awesome source codes is trim/delete trailing white spaces, because these are not good and even they could bring on some issues in programming. So, if you want to do this automatically when you save your files and you are using Sublime Text 2, then is really easy, please just:

1) Click on: Sublime Text 2 > Preferences > Settings – User

2) This will open a file with a JSON format configuration.

3) Add the next configuration parameter to your Sublime Text 2:

"trim_trailing_white_space_on_save" : true

1	"trim_trailing_white_space_on_save" : true

In my case my configuration file looks like this:

{
	"color_scheme": "Packages/Color Scheme - Default/Eiffel.tmTheme",
	"font_size": 14.0,
	"ignored_packages":
	[
		"Vintage"
	],
	"trim_trailing_white_space_on_save" : true
}

{

"color_scheme": "Packages/Color Scheme - Default/Eiffel.tmTheme",

"font_size": 14.0,

"ignored_packages":

[

"Vintage"

"trim_trailing_white_space_on_save" : true

}

Note: It is important the comma “,” before the line “trim_trailing_white_space_on_save” : true in order to avoid error in your configuration file.

For Windows users

I think, Sublime Text 2 – Windows version has an alike option, please look for this and follow the same procedure.

That’s it. Be happy with your code!

—

Alex Arriaga

alex-arriaga July 10, 2013

How to solve the “Cannot modify header information – headers already sent by…” error in your PHP applications

CakePHP, Web Development No Reply

Today, when I updated a repository in git I realized that my co-workers -accidentally- broke a project (in CakePHP). What error was displaying? simple and a little confusing:

Warning (2): Cannot modify header information - headers already sent by (output started at /app/config/database.php:1) [CORE/cake/libs/controller/controller.php, line 742]

1	Warning (2): Cannot modify header information - headers already sent by (output started at /app/config/database.php:1) [CORE/cake/libs/controller/controller.php, line 742]

So, for solving this common PHP issue, I recommend use these steps:

1) The first thing is to find a file (or several files) with a blank line at the beginning or at the end of the file. You can read this article for finding a list of files by using a short command: How to find blank lines in a set of files in GNU/Linux or UNIX-Like Operating Systems

2) Be sure that your “pure” PHP files don’t contain a white space or a blank line after CLOSING PHP TAG (?>) or before STARTING PHP TAG (<?php ). In fact, when you create a PHP file (with only PHP source code) it is NOT recommended to use CLOSING PHP TAG (?>). You can read about this in: http://framework.zend.com/manual/1.12/en/coding-standard.php-file-formatting.html (thanks to Daniel Guerrero for sending this link).

3) As you can see -in my case- the error was indicating that the issue was related with a file called database.php in line:1. So, I looked for a blank line or white spaces but no, the file did not have any of these 🙁

4) Last thing that you need to know is about ENCODING, yes when you create or modify a file, some editors save your files in a specific encondig, please read a little more in these links:

When previous steps don’t work, try to find what is the character-encoding used by your PHP file, usually they are in ANSI, or UTF-8 (this second encoding is recommended). So, in my case only was necessary to change the character-encoding to UTF-8 and that solved the problem.

That’s it. Be happy with your project 🙂

—

Alex Arriaga

alex-arriaga June 28, 2013

The easiest way to check if an element exists with jQuery

jQuery, Web Development 1 Reply

When you need to know if an element exists in the DOM (Document Object Model), only uses this small code:

<script type="text/javascript">
(function($){
	$(document).on('ready', function(){
		if( $("element").length ){
			// Do something :)
		}
	});
})(jQuery);	
</script>

(function($){

$(document).on('ready', function(){

if( $("element").length ){

// Do something :)

}

});

})(jQuery);

</script>

The length property returns the number of elements that match with our selector. For example, imagine that you have the next HTML estructure:

<div class="parent">
	<ul>
		<li><a href="#">Some link</a></li>
	</ul>
	<div class="child"></div>
</div>

<ul>

</ul>

</div>

If you want to know if the element with class=”child” exists, just it is necessary to do:

<script type="text/javascript">
(function($){
	$(document).on('ready', function(){
		if( $(".child").length ){
			alert("Child exists");
		}
	});
})(jQuery);	
</script>

(function($){

$(document).on('ready', function(){

if( $(".child").length ){

alert("Child exists");

}

});

})(jQuery);

</script>

That’s all at this moment, be happy with your code!

—

Alex Arriaga

What would you like to know about?

Alex Arriaga

Category Archives:
Web Development

Which web browsers should I support if I am using HTML semantic elements?

Related Resources

Regular expression to validate an HTML hexadecimal color in jQuery

Explanation:

How to set directory and files permissions for a Joomla site in a production environment

Reading an XML file by using Joomla 2.5 API – JFactory::getXML()

Validating if a jQuery plugin exists before running code that use it

How to set expiry date of a cookie (using jQuery Cookies plugin)

Saving a complex JSON object in a cookie by using jQuery (demo included in PHP)

How to trim or delete trailing white spaces automatically on save in Sublime Text 2

How to solve the “Cannot modify header information – headers already sent by…” error in your PHP applications

The easiest way to check if an element exists with jQuery

Join me, have fun and learn!

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Archives

Join me, have fun and learn!

Recent Posts

Archives

Recent Comments

Categories

What would you like to know about?

Category Archives:Web Development

Related Resources

Explanation:

Join me, have fun and learn!

Tag Cloud

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Tag Cloud

Archives

Join me, have fun and learn!

Recent Posts

Archives

Tag Cloud

Recent Comments

Categories

Category Archives:
Web Development