Web Development – Page 5

alex-arriaga April 8, 2014

Session 3: jQuery for the real world (in spanish)

jQuery, Web Development No Reply

Hi friends!

Here is the new session of our jQuery course, enjoy and share the video.

This class includes:

Creating events in the most optimized way
How to use “chaining”
Accessing Data attributes (HTML5)
Tips about responsive web design with Bootstrap 3

Visit the repository on Github to get all the code: https://github.com/alex-arriaga/jquery-para-el-mundo-real

alex-arriaga March 10, 2014

How to understand and use Chrome Developer Tools (in spanish)

Web Development No Reply

Hi friends!

Last week someone of the community asked me for how to do debugging of JavaScript in his web applications and web sites, to answer that question I have created a little video (40 minutes, more or less) to give you the big picture about the great tools for developers that are available in Google Chrome. During this video you will see how these tools can improve your skills as front-end developers.

First of all, let me tell you all the official documentation about every single available feature can be found in next link: https://developers.google.com/chrome-developer-tools/

Please, share this video with anyone who could be interested in. And remember, be happy with your code!

alex-arriaga March 10, 2014

Session 2: jQuery for the real world (in spanish)

jQuery, Web Development No Reply

Hi again!

Here is the second session of our jQuery course, please feel free to share it, download it or watch it as many times you want, it is totally free!

In this session following topics are shown:

Validation and use of jQuery from a CDN
Generation of content dinamically
Iterating into Arrays and exploring objects properties
Querying the DOM: find(), children(), next(), prev(), first(), last()
Tips about the best validation of undefined types
Recommendations about how to declare “jquery-generated-variables”

I hope you find this session very useful for your real life as a front-end developer.

Be happy with your code!

alex-arriaga March 4, 2014

Session 1: jQuery for the real world (in spanish)

jQuery, Web Development No Reply

Hi friends!

Today, I would like to share the first session of a new course that I am starting this week, this course includes a lot of the greatest features of jQuery library. During these sessions we are going to learn methods, tricks and advanced code in jQuery that will allow us to obtain a very high level in our jQuery skills. Please, share with your partners, colleagues or anyone who is interested in learning this wonderful library.
And remember, be happy with your code!

Regards.

alex-arriaga November 6, 2013

How to know jQuery version using Firebug console

jQuery, Web Development No Reply

This is a little tip for today: sometimes, you don’t have access to know what version of jQuery is loaded in a website or web application, so you can use the Firebug console to know what version is actually loaded. Just, type one of the next lines and you will obtain that data.

Both major version version 1.x and version 2.x have a property called jQuery.fn.jquery, we could check it:

//  It returns something like: "1.9.1"
console.log(jQuery.fn.jquery);

1 2	// It returns something like: "1.9.1" console.log(jQuery.fn.jquery);

// Of course we know jQuery == $, then we can use next shorthand syntax
console.log($.fn.jquery);

1 2	// Of course we know jQuery == $, then we can use next shorthand syntax console.log($.fn.jquery);

Also, we can use an alternative syntax:

// Alternative syntax
console.log(jQuery().jquery);

// or shorthand method
console.log($().jquery);

// Alternative syntax

console.log(jQuery().jquery);

// or shorthand method

console.log($().jquery);

That’s it!

Be happy with your code!

alex-arriaga September 24, 2013

How to create an “on update” trigger in MySQL to modify Virtuemart 2.x fields

Databases, MySQL, Web Development 2 Replies

Hi my friends!

Last week, we needed to add an action that could be thrown when a product was published on Virtuemart 2.x, for that reason a good solution was to implement a trigger in MySQL.

At the beginning it seemed to be something simple and fast, but no at all, I spent more that an hour to end it, so today I would like to share a small code to create an on-update trigger in MySQL and modify an specific field (column table).

DROP TRIGGER IF EXISTS `after_publish_product`;
DELIMITER //
CREATE TRIGGER `after_publish_product` BEFORE UPDATE ON `prefix_bd_virtuemart_products` FOR EACH ROW BEGIN
IF NEW.published=1 AND NEW.published_on='0000-00-00 00:00:00' THEN
SET NEW.published_on = NOW();
END IF;
IF NEW.product_in_stock<=0 THEN
 SET NEW.published = 0;
END IF;
END
//
DELIMITER ;

DROP TRIGGER IF EXISTS `after_publish_product`;

DELIMITER //

CREATE TRIGGER `after_publish_product` BEFORE UPDATE ON `prefix_bd_virtuemart_products` FOR EACH ROW BEGIN

IF NEW.published=1 AND NEW.published_on='0000-00-00 00:00:00' THEN

SET NEW.published_on = NOW();

END IF;

IF NEW.product_in_stock<=0 THEN

SET NEW.published = 0;

END IF;

END

DELIMITER ;

This little SQL script sets published_on field to NOW (date and time when the trigger is executed) when the field published is true and no publish date exists (it means, when the product is published).

By the way, Virtuemart 2.x does NOT have a published_on field, we had to add it to the products table.

That’s it!

Be happy with your code!

alex-arriaga August 9, 2013

How to send an email using JavaScript / jQuery and the mail client (it includes a PHP example)

jQuery, Web Development 1 Reply

When you are creating a web project and you need to send an email you could choose between two options:

Server-side solution. I consider this is the best way to send an email because with this solution you can customize all as you need like: HTML, styles, attachments, etc. but it is more complicated because you will need to program in any server-side language (PHP, Java or any .NET language).
Client-side solution. In this case you only need to know a little of JavaScript, disadvantages of this solutions are: you can’t send HTML, styles or attachments, ie. you can only send plain text (with some scape characters like: \n).

In this post we concentrate in client-side solution.

Preparing our example

In next code we have an array constructed with PHP:

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

// An array to simulate a complex JSON object

$userAttributes = array(

"personal_information" => array(

"name" => "Alex",

"last_name" => "Arriaga",

"age" => 25

"extra_information" => array(

"twitter" => "alex_arriaga_m",

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

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

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

)

);

Then, we create a JSON object using json_encode function:

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

1 2	// Creating the JSON object $jsonObject = json_encode($userAttributes);

Suppose, we have an anchor element where the user will click on:

<a id="sendByEmail" class="btn" href="#">Send now!</a>

1	<a id="sendByEmail" class="btn" href="#">Send now!</a>

Finally, we iterate inside of it and configure the body of the e-mail and the url in order to throw the mail client and send the email. Please, pay special attention in the SendByMail function.

	(function($){
		var userAttributes = <?php echo $jsonObject;?>;

		// Function to "simulate" capitalize string
		String.prototype.capitalize = function() {
			return this.charAt(0).toUpperCase() + this.slice(1);
		}

		// Our sending by mail function (reads a PHP JSON object and throws mail client)
		function SendByMail() {
		    var body = "-- User Attributes --\r\n\r\n";
		    var list = "";

		    $.each( userAttributes, function( fkey, fvalue ) {
		    	list += fkey.toUpperCase().replace("_"," ") + "\n";
				   $.each(fvalue, function(skey, svalue){
				   		list += skey.replace("_"," ").capitalize() + ": " + svalue + "\n";
				   });
				list += "\n";
			}); // First level

		    body += list;
		    // Configure mailto
		    var uri = "mailto:?subject=";
		        uri += encodeURIComponent(document.title);
		        uri += "&body=";
		        uri += encodeURIComponent(body);
		        window.location.href = uri;
		}

		$(document).on('ready', function(){
			$("#sendByEmail").on('click', function(){
				SendByMail();
			});
		});
	})(jQuery);

(function($){

var userAttributes = <?php echo $jsonObject;?>;

// Function to "simulate" capitalize string

String.prototype.capitalize = function() {

return this.charAt(0).toUpperCase() + this.slice(1);

}

// Our sending by mail function (reads a PHP JSON object and throws mail client)

function SendByMail() {

var body = "-- User Attributes --\r\n\r\n";

var list = "";

$.each( userAttributes, function( fkey, fvalue ) {

list += fkey.toUpperCase().replace("_"," ") + "\n";

$.each(fvalue, function(skey, svalue){

list += skey.replace("_"," ").capitalize() + ": " + svalue + "\n";

});

list += "\n";

}); // First level

body += list;

// Configure mailto

var uri = "mailto:?subject=";

uri += encodeURIComponent(document.title);

uri += "&body=";

uri += encodeURIComponent(body);

window.location.href = uri;

}

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

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

SendByMail();

});

})(jQuery);

Testing our code

When you click on the anchor element the SendByMail fuction will be called, then the mail client will be thrown. See next image as an example of the mail client and the result after iterating our JSON object:

If you want to test this in your own computer, please, download this code.

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga August 9, 2013

What is LESS?

LESS, Web Development No Reply

LESS is a dynamic stylesheet language published as open-source. It includes a pre-processor that allows compile a template -in LESS language- and get a standard CSS as output. Main difference among LESS and other CSS pre-compilers is that LESS allows real-time compilation via LESS.js by the browser (client-side) or even it is possible to compile server-side.

LESS provides the following features to create awesome stylesheet:

Variables. A variable is a storage location and an associated symbolic name (an identifier) which contains some known or unknown quantity or information, ie. a value. In LESS it is possible to define variables with a variable name and re-used where you need them.
Nesting. Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
Mixins. Allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.
Operations. Let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want. Any number, color or variable can be operated on. The output is pretty much what you expect—LESS understands the difference between colors and units.
Functions. Map one-to-one with JavaScript code, allowing you to manipulate values however you want. LESS provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

Advantages of using LESS

Better organization in your project. Imagine that you have too many stylesheets, manage them is usually complicated, so with LESS you can use namespaces, functions and mixins, all this allow you improve the way your project are organized.
Avoid repetitions. When we are working with CSS is common to have many repeated rules, for this reason if for example you need to change the value of a color it will be necessary to change all rules where this color is been used. With LESS you can use a variable to solve this situations, just declare one and re-use it wherever you want!
Optimizing your CSS. When you use LESS and a tool it is possible to define some parameters like compress by default, delete comments, etc. so, your stylesheet will be optimized and ready to integrate in your project.
Re-using CSS rules. LESS has mixins they allow you re-use styles wherever you need, for example you could define a set of CSS rules and then with a single line you can “call” them to render in a specific place (inside other class, for example).
Arithmetic functions. This feature is awesome! Imagine that you need a font-size calculated depending an operation (like a division), well with less it is possible to run arithmetic functions and assign the result to a CSS property later.

As you can see, with LESS we have a lot of resources to improve our front-end development, if you need more information please visit the official website of LESS: http://lesscss.org/

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga August 7, 2013

About media queries support in different web browsers

CSS3, HTML5, Web Development 2 Replies

Imagine the possibility that you could control how your website is displayed when someone visit it in a smartphone or in a tablet, that is an awesome feature that it will do your visitors love you! Well, media queries, are an excellent way to change styles (images, backgrounds, colors, height, width, spacing, etc.) depending of the device that you are using to visit a website. This kind of techniques improve a lot the user experience and create a better opinion in your visitors about your site.

Since inclusion of new devices like smartphones or tablets, users have changed the way that they use web portals, right now thousands of people prefer to visit a website from their mobile device instead of use a personal computer, for this reason is too important create or adapt our pages to render them correctly and friendly on these devices. So, if you want to improve the user experience in your website maybe media queries will be really useful to give different “sights” to your visitors.

Media queries support

If you are asking yourself which web browsers support media queries you could find the next table very useful (for more details please visit: http://caniuse.com/#feat=css-mediaqueries):

As you can see, the support is really good and maybe you are thinking about what happens with Internet Explorer, well, don’t worry about that because almost all devices (smartphones or tablets) have a good web browser and probably you won’t never have problems with this situation.

That’s it. If you need a complete article about this, please visit next link: https://wiki.base22.com/display/btg/Media+Queries

Be happy with your code!

—

Alex Arriaga

alex-arriaga August 7, 2013

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

HTML5, Web Development No Reply

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

What would you like to know about?

Alex Arriaga

Category Archives:
Web Development

Session 3: jQuery for the real world (in spanish)

How to understand and use Chrome Developer Tools (in spanish)

Session 2: jQuery for the real world (in spanish)

Session 1: jQuery for the real world (in spanish)

How to know jQuery version using Firebug console

How to create an “on update” trigger in MySQL to modify Virtuemart 2.x fields

How to send an email using JavaScript / jQuery and the mail client (it includes a PHP example)

Preparing our example

Testing our code

What is LESS?

Advantages of using LESS

About media queries support in different web browsers

Media queries support

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

Related Resources

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

Preparing our example

Testing our code

Advantages of using LESS

Media queries support

Related Resources

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