Archive for November, 2011


HSLA Colors – CSS3

As RGBA is to RGB, HSLA is to HSL; that is, it allows a fourth value, which sets the Opacity (via the Alpha channel) of the element.

At the time of writing, only Safari 3 and the Firefox 3 beta support the HSLA style of color declaration.

An example:

 

<div style="background-color: hsla(0,100%,50%,0.2);"></div> <div style="background-color: hsla(0,100%,50%,0.4);"></div> <div style="background-color: hsla(0,100%,50%,0.6);"></div> <div style="background-color: hsla(0,100%,50%,0.8);"></div> <div style="background-color: hsla(0,100%,50%,1);"></div>

 

<div style="background-color: rgb(243,191,189);"></div> <div style="background-color: rgb(246,143,142);"></div> <div style="background-color: rgb(249,95,94);"></div> <div style="background-color: rgb(252,47,47);"></div> <div style="background-color: rgb(255,0,0);"></div>

A fuller explanation of HSLA colors can be found in the W3C CSS3 Color Candidate Recommendation.

Advertisements

HSL Colors – CSS3

As well as using Hexadecimal and RGB colors, CSS3 could also see the introduction of HSL (Hue, Saturation, Lightness) values.

HSL takes three values:

  • Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades.
  • Saturation is a percentage value; 100% is the full colour.
  • Lightness is also a percentage; 0% is dark (black), 100% is light (white), and 50% is the average.

This gives a very wide spectrum of available colors and tones.

So far, HSL has been implemented in Opera 9.5, Safari 3, Konqueror and Mozilla browsers.

See this example:

 

<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsl(120,100%, 50%);"></div> <div style="background-color: hsl(240,100%, 50%);"></div>

 

<div style="background-color: rgb(255,0,0);"></div> <div style="background-color: rgb(0,255,0);"></div> <div style="background-color: rgb(0,0,255);"></div>

A fuller explanation of HSLA colors can be found in the W3C CSS3 Color Candidate Recommendation.


Integrate your MailChimp Newsletter Subscription (form)
Integrate a Newsletter Subscription Form with MailChimp’s API

MailChimp’s simple and direct API makes it easy to access the email service provider’s list management tools.

MailChimp is popular with small ecommerce site owners, thanks to the company’s “Free Forever” plan that allows a marketer to send as many as 12,000 emails per month at no charge. In this article, I will describe how to create a basic newsletter subscription form that uses the MailChimp API to automatically add subscribers to a MailChimp list, with some basic PHP and HTML5. This tutorial assumes that you are working with a web server that has PHP installed.

It is worth noting that MailChimp provides excellent API documentation and examples on its developer site.

Build the HTML Form

The first step toward creating a newsletter subscription form that is connected to the MailChimp API is to create the HTML form. In this example, my form collects the user’s email address, first (given) name, and last (family) name.

<form method="get" id="subscription-form">
<ul>
		<li>
			<label for="subscribe_email">Email Address, Please:</label>
			<input type="email" name="subscribe_email" id="subscribe_email" required aria-required="true" autocomplete>					
		</li>
		<li>
			<label for="subscribe_firstname">Given Name, Please:</label>
			<input type="text" name="subscribe_firstname" id="subscribe_firstname" required aria-required="true" >					
		</li>
		<li>
			<label for="subscribe_familyname">Family Name, Please:</label>
			<input type="text" name="subscribe_familyname" id="subscribe_familyname" required aria-required="true" >					
		</li>
		<li>
<button type="submit">Subscribe to Newsletter</button>				
		</li>			
	</ul>
</form>

There are a couple things to notice about this form. First, I am using the “get” method, which is how I will pass the values from the input fields to the MailChimp API. Notice, also, that I am using the HTML5 “email” input type for my “subscribe_email” field. This input type will do basic email address validation without any JavaScript or PHP coding. Finally, notice that I have made all of the fields required, and I am using aria-required=”true” to help visually impaired users. With a little CSS3, my form will look something like the following. Of course, it won’t do anything yet.

Establish a MailChimp Account

Since I am focusing on working with the MailChimp API, it stands to reason that you will need a MailChimp account. Once you have registered for a MailChimp account and created a list (since our goal is to add subscribers to that list via the API), you will need to collect two numbers for the MailChimp API.

First, you need the unique list ID. You can find this list ID by navigating to Lists > Settings in the MailChimp interface. Select a list and the unique list ID will be near the bottom of the page.

Next, you need an API key. To generate this key, navigate to Account > API Keys & Authorized Apps in the MailChimp navigation. You will need to “add a key” and then almost instantly, MailChimp will display your new key.

Download the MailChimp API for PHP

Once you have unzipped the MailChimp download, you will need to place at least MCAPI.class.php and store-address.php in your site’s folder structure.

Update store-address.php

In an effort to be an appropriately lazy developer (remember that an efficient developer often reuses code), I simply used the store-address.php file MailChimp provided as an example, rather than writing a similar bit of PHP myself. From this code, I removed several lines that I did not need.

You will need to add your API key and unique list ID to this code as the values for the variables $api and $listid. Notice also that I have inserted my form input field names as the specific keys for the $GET superglobal. (In PHP, a “superglobal” is a built-in variable available in any scope.)

<?php /*/////////////////////////////////////////////////////////////////////// Part of the code  by xyz (aa@xyz.com) http://xyz.com Distributed under Creative Commons license http://creativecommons.org/licenses/by-sa/3.0/us/ ///////////////////////////////////////////////////////////////////////*/ function storeAddress(){ require_once(‘MCAPI.class.php’);
$api = new MCAPI(‘YOUR_API_KEY_GOES_HERE’); $list_id = “YOUR_LIST_ID_GOES_HERE”; $mergeVars = array(
‘FNAME’=>$_GET[‘subscribe_firstname’], ‘LNAME’=>$_GET[‘subscribe_familyname’]
); if($api->listSubscribe($list_id, $_GET[‘subscribe_email’], $mergeVars) === true) { return ‘Success. Check your email to confirm sign up.’; }else{ // An error occurred, return error message return ‘Error: ‘ . $api->errorMessage; } } ?>

To reference this file from my subscription.php file, I used PHP’s built inrequire_once.

<?php require_once (‘store-address.php’); ?>

I want the page to display the subscription form when a user first arrives and display a success message once the form has been filled out. So I wrapped the form in a conditional statement that checks for the existence of a “subscribeemail” key in the $GET superglobal. I used the NOToperator “!” So my conditional reads, “if subscribeemail does _not exist, do the following.”

I am mixing PHP and HTML here, so I use PHP’s alternative syntax.

<?php if (!$_GET[“subscribe_email”]): ?>
… // from HTML here
<?php endif; ?>

I used a similar conditional statement to display the success message.

<?php if ($_GET[“subscribe_email”]): ?>
<p>Thank you for subscribing to xyz.com. Look for a confirmation email soon.</p>
<?php endif; ?>

hat is it. When a user completes the form and clicks the submit button, the MailChimp API will generate a confirmation email and — once the confirmation is complete — the subscriber is added to the MailChimp list.


jQuery form plugin and PHP file uploads
How to upload a file via Ajax using a form with JQuery and PHP?

Click here to download JQuery files .

  • Create a new file called form_upload.php 
  • Include JQuery and the JQuery Form Plugin between the head tags in the form_upload.php file.
<head>
    <title>Ajax File Uploader</title>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
</head>

Include the following code between the head tags underneath the JQuery Form Plugin include

<script type="text/javascript">
    <!--
        $(document).ready(function() {
            var options = {
            target: '#message', //Div tag where content info will be loaded in
            url:'upload.php', //The php file that handles the file that is uploaded
            beforeSubmit: function() {
                $('#uploader').html('<img src="ajax-loader.gif" border="0" />'); //Including a preloader, it loads into the div tag with id uploader
            },
            success:  function() {
                //Here code can be included that needs to be performed if Ajax request was successful
                $('#uploader').html('');

            }
            };

            $('#upload').submit(function() {
                $(this).ajaxSubmit(options);
                return false;
            });

        }); 
 //-->
 </script>

Between the body tags we include the actual form and necessary div tags.

<div id="message"></div>
    <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data">
        <table cellpadding="4" cellspacing="4" border="0">
            <tr>
                <td colspan="2"><h1>Upload File via Ajax</h1></td>
            </tr>
           <tr>
                <td nowrap>File:</td>
                <td nowrap><input type="file" name="fileToUpload" id="fileToUpload" /></td>
            </tr>
            <tr>
                <td nowrap colspan="2"><input type="submit" id="uploadFile" value="Upload File" /></td>
            </tr>   

        </table>
    </form>
    <div id="uploader"></div>
  • Create a file called upload.php this file will handle all request that are posted via the file upload form. Example of upload.php
echo '<pre>';
print_r($_FILES);

The complete code can be obtained below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Ajax File Uploader</title>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>

    <script type="text/javascript">
    <!--
        $(document).ready(function() {
            var options = {
            target: '#message', //Div tag where content info will be loaded in
            url:'upload.php', //The php file that handles the file that is uploaded
            beforeSubmit: function() {
                $('#uploader').html('<img src="ajax-loader.gif" border="0" />'); //Including a preloader, it loads into the div tag with id uploader
            },
            success:  function() {
                //Here code can be included that needs to be performed if Ajax request was successful
                $('#uploader').html('');

            }
            };

            $('#upload').submit(function() {
                $(this).ajaxSubmit(options);
                return false;
            });

        }); 
     //-->
    </script>
</head>
<body>
    <div id="message"></div>
    <form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data">
        <table cellpadding="4" cellspacing="4" border="0">
            <tr>
                <td colspan="2"><h1>Upload File via Ajax</h1></td>
            </tr>
           <tr>
                <td nowrap>File:</td>
                <td nowrap><input type="file" name="fileToUpload" id="fileToUpload" /></td>
            </tr>
            <tr>
                <td nowrap colspan="2"><input type="submit" id="uploadFile" value="Upload File" /></td>
            </tr>   

        </table>
    </form>
    <div id="uploader"></div>
</body>
</html>

Brushless Paintings by Amy Shackleton

Amy Shackleton is a 25-year old Torornto based artist who paints without brushes. Instead, she uses gravity. Shackleton uses ketchup like bottles to squeeze copious amount of paint onto the canvas and then rotates it to manipulate the flow of the paint. As the paint streaks down the canvas she guides it to create curves, lines, splashes and landscapes.

In a 30-hour time-lapse video posted on YouTube, Shackleton can be seen working on a new urban landscape painting titled “Terrace City.”

This slideshow requires JavaScript.


Vivid Sydney Festival 2010

Vivid Sydney – the festival of art, music, light, and ideas is the largest international music and light show in the Southern Hemisphere. The festival that is held annually in Sydney brings together large scale light installations and projections, music performances, creative ideas, stimulating discussions and debates, showcasing Sydney as a major creative hub in the Asia-Pacific Region. The festival began on May 27 and will continue till June 21, 2010. Last year’s show attracted 200,000 locals and visitors.

This slideshow requires JavaScript.

Photo Courtesy: Getty Images, Reuters


Snake Burgers

A restaurant in Indonesia’s capital city Djakarta is serving snake burgers made from local snakes.

The kitchen area resembles a factory floor, with snakes everywhere – in various states of preparation. The snakes are first beheaded, then peeled to remove their scaly skin. Next, the carcasses move to the cleaning and fileting area, and finally the meat is minced, ground, and blended with seasonings.

The snake patties are then fried, topped with the usual condiments and sandwiched between sesame seed buns. According to China Radio International Online (CRI), the burgers “taste like chicken”.

This slideshow requires JavaScript.

[via Inventor Spot]