Matt Varone » Web Development

Back In White

Matt — Thu, 28 Jul 2011 15:34:19 +0000

New revamp of this site. I wanted it to be something simple and minimalist. The ultimate force behind this change is to help me write more so I’m hoping this works :)

Content is king as they say. I got rid of all the trendy buttons and overdone details. Most importantly I took some time to re-structure the menu and pages hoping to make it a little easier to navigate.

To celebrate I’m releasing Shortcodes Pro on the WordPress repository.

Thanks for stopping by!

This is a post from: Matt Varone

Back In White

Install WordPress from the OSX Terminal

Matt — Fri, 15 Jul 2011 14:37:47 +0000

This little snippet comes handy to install the latest version of WordPress quickly from the terminal. Drop the function on your /Username/.bash_profile and then simply call wp_install from the directory you want to install it.

wp_install() {
        latest="http://wordpress.org/latest.zip"
        curl -O $latest
        unzip latest.zip
        rm -rf __MACOSX latest.zip
        cp -rf ./wordpress/* ./
        rm -rf ./wordpress/
        mkdir ./wp-content/uploads/
        mv wp-config-sample.php wp-config.php
        touch .htaccess
        mate wp-config.php
        open https://api.wordpress.org/secret-key/1.1/salt/
}
# Note: If you are not a TextMate owner, change the line:
# mate wp-config.php
# to
# vi wp-config.php

Feel free to fork it at GitHub.

This is a post from: Matt Varone

Install WordPress from the OSX Terminal

Fresh UI Elements

Matt — Fri, 28 Jan 2011 00:10:39 +0000

Released a fresh and modern set of web elements. It comes with a handful of items you can use for free on any project. It’s very easy to add more colors too. You can get the Fully layered PSD file with all editable elements below.

Download Fresh UI Elements

This is a post from: Matt Varone

Fresh UI Elements

CSS3-only Buttons Library

Matt — Thu, 16 Dec 2010 13:09:11 +0000

This is a little library to create nice buttons for modern browsers in a faster way. No license attached, use for whatever you like. Thanks!

CSS3 Buttons Library: View the demo Download

How It Works

The library works by using custom defined classes on your HTML elements. For this classes to work link the buttons.css file from the head of your HTML document.





Your Website

To apply a button style to any element, add a .button class with one of the desired colors. The 21 available colors are detailed in the following section ( you can remove and add more easily ).

Im an anchor

Im a div!

hmmm and i'm a p

Adding More Colors

Its quite easy, just copy-paste one of the predefined CSS button colors and change the hexadecimal value of the background color. You only need to provide one color, the rest of the class will automatically create the gradients for the different states by using box-shadow and css3 gradients. For example you can copy the following CSS and replace the #c4c4c4 with any color you like. Make sure to rename the copied classes to match your new color.

/* SILVER */
.button.silver {
background: #c4c4c4;
background: #c4c4c4 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0)));
background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0));
}
.button.silver:hover {
background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0)));
background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0));
}
.button.silver:active {
background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0)));
background: #c4c4c4 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0));
}

Browser Support

So far, it only works on Safari, Chrome and Firefox. It has a decent degradation on Opera but not so much on IE. Hopefully this will change in the near future with IE9. Thanks for reading!

This is a post from: Matt Varone

CSS3-only Buttons Library

UItoTop jQuery Plugin

Matt — Thu, 03 Sep 2009 14:11:56 +0000

Current version: 1.1 3/4/10. WordPress plugin version over here.

Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ).

Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.

UItoTop: View the demo Download

RELEASE NOTES

ver 1.1 – Improvements to configuration conveniences. *
ver 1.0 – First Release.

* Big thanks to Rémy Tourbiez for this contribution to the code.

This is a post from: Matt Varone

UItoTop jQuery Plugin

SimpleForm: Easy PHP multi-form email handler

Matt — Thu, 16 Apr 2009 18:49:46 +0000

Releasing a new version of my contact form script, this time under the name SimpleForm. It’s a nicer version of the previous one, re-written from the ground up and with a couple of new features. SimpleForm is basically meant to be an easy solution to handle one or many forms with little effort. It’s mainly focused on ease of use and rapid deployment.

Current version: 1.1.4 7/31/09

These are a couple of it’s main features ( ver. 1.1.4 ):

* Multiform handler.
* Support for required fields.
* PHP email validation.
* Unobtrusive JavaScript function to pre-check form data ( 4KB file ).
* Lightweight, easy to use.
* Multilingual support.
* External configuration file that can reside outside the public folder.

View the demo Multiple Forms Download

HOW DOES IT WORKS?

It’s very simple, first there is a configuration file where you define all of your website forms, by this I mean form title, form fields, form required fields and the location of each form. Then there are some snippets you have to add to your form page/s and thats all. SimpleForm takes care of pre-cheking the form fields with JS and then validating them with PHP, if it’s valid then it will send the email to the configured email address and return the user to the form page with a success message or otherwise, with an error message.

INSTALLING THE SCRIPT

These are the necessary steps to have it up and running ( requires PHP 5 ):

Download SimpleForm ( ver 1.1.4 )
Open sf-config.php and edit the necessary info.
Upload sf-config.php to your host ( preferably outside the public folder ).
Open simpleform.php and edit the variable $PATH_TO_CONFIG_FILE ( on line 24 ) with the path from simpleform.php to sf-config.php ( leave empty if it resides on the same folder ).
Upload simpleform.php, simpleform.css and checkform.mini.js inside your public folder.
Open your form page/s and add the necessary code snippets.

EDITING THE CONFIGURATION FILE SF-CONFIG.PHP

# ------------------------------------------------------------ #
// SIMPLEFORM CONFIGURATION								      //
# ------------------------------------------------------------ #
/* GENERAL CONFIGURATION
/////////////////////////////*/
// The name of the website/client. Example: "My Website".
$aSettings["szFrom"] = "";
// The email address that will receive the emails. Example: "me@myemail.com".
$aSettings["szRecipient"] = "";
/* The email address that will be used to send the emails. To work properly this has to be a real account
configured on the same server of the site. Example: "noreply@mywebsite.com". */
$aSettings["szFromEmail"] = "";
/* FORMS CONFIGURATION
/////////////////////////////*/
/* The next step is to configure the Form/s.
   You can add as many as you want. */
$aForms = array(
	1 => array( 									// FORM ID: 1
		"szFormTitle" => "",						// FORM TITLE - Example: "Contact Form"
		"szFormURL" => "",							// FORM URL ( users will be redirected to this page )
		"szFormRequired" => array(					/* REQUIRED FIELDS ( array of name attributes ) */
			"name",
			"email",
		),
		"aFormFields" => array( 					/* LIST OF FORM FIELDS AND THEIR OUTPUT NAME
 													  All input fields coming from the form should go here.
													  The first value is the name attribute used and the second value
													  on the right the name displayed on the outputted data.
													  Any required field that contains the word "email" will have
													  it"s value validated as an email address. */
		   	"name" => "First Name",
			"email" => "E-mail",
			"work_email" => "Work Email",
			"phone" => "Telephone",
			"-sep1" => "This is a separator",		/* This is a separator. Any variable starting with the sign "-"
														will act as a content separator. */
			"color" => "Color Option",
			"comments" => "Comments",
			"-sep2" => "This is Another separator",
			"newsletter" => "Subscribe to our Newsletter?",
			"interested[]" => "Im interested in",
			/* add more */
			)
	),
	2 => array(										/* Form 2. Same as above */
		"szFormTitle" => "",
		"szFormRequired" => array(),
		"szFormURL" => "",
		"aFormFields" => array(
			/* add more */
			)
	),
	3 => array(										/* Form 3. Same as above */
		"szFormTitle" => "",
		"szFormRequired" => array(),
		"szFormURL" => "",
		"aFormFields" => array(
			/* add more */
			)
		),
	/* add more */
);
/* RESPONSE CONFIGURATION
/////////////////////////////*/
/* Response Messages: These are the variables that hold the messages
the system prints as response. You can modify them to suit your project needs. */
 // Form has been sent.
$aSettings["aMessages"]["szSubmitSucess"]  = "Your message has been sent succesfully. Thanks!";
// Missing fields.
$aSettings["aMessages"]["szMissingFields"] = "Please complete all required fields.";
// Unvalid email address.
$aSettings["aMessages"]["szUnvalidEmail"]  = "Please insert a valid email address.";
// Email not sent by system error.
$aSettings["aMessages"]["szSystemError"]   = "There was an error in the system. Please try again later. Thanks!";
/* ADVANCED CONFIGURATION
/////////////////////////////*/
// Name of the GET variable to pass response messages
define( "GET_NAME", "response");
// Debug mode ( prints email content, and system errors )
define( "DEBUG_MODE" , false );
/* Check if the domain of the submitted email addresses exists.
False by default as it may bring problems with some servers. ) */
define( "CHECK_EMAIL_ADDRESS_DNS" , false );

INTEGRATING SIMPLEFORM WITH YOUR FORMS

Below you’ll find the things you need to do to your form page ( must be php file ) for SimpleForm to work. I also have included a full example at bottom.

A. Add Javascript and CSS files

Add simpleform.css and checkform.js ( or checkform.mini.js ) inside the element:

B. Define the path to the config file and Include simpleform.php in the document ( before your form/s ):

C. Add SimpleForm Responses function

Prints the systems response and can reside anywhere on the document.

			Please insert a valid email address.
 		   	$sForm->handleMessage(); ?
 		   	>

Output example:

Please insert a valid email address.

D. Add SimpleForm Form function

This function generates the required hidden input fields for simpleForm to work. The value passed is the ID assigned to the current form in the configuration file. This function must reside in between the

elements.

 printData(1);
?>

E. Edit the
attributes:

Point the form’s action attribute to simpleform.php and then add the checkform function to enable the js data pre-checking.

The checkform() function supports an optional string parameter which alters the text you
want to display on the js alerts. The variable #name is provided as a wildcard for the field Name.

Examples:
“Please complete the field #name”
“The field #name is missing”
“Por Favor complete el campo #name”

				onsubmit="return checkform(this,'The field #name is missing')"

Full Example

	
		
		
			
			SimpleForm Example
			
			
		
		
			handleMessage();
			?>
			
		 	
		 	printData(1); ?>
				Personal Details:
		        Name
		        
		        Email (required)
		        
				Work Email
		        
				Telephone (required)
		        
		        Color Options: (required)
		        
		        Comments
		        
		        
		        
		            Subscribe to our Newsletter? (required)
		             Yes
		             No
		        
				
		            Im interested in: (required)
		             Arts
					 Science
					 Sports

View the demo Mutiple Forms Download

RELEASE NOTES

ver 1.1.4 – Another Email Bug fixed ( Courtesy of megabonez ).
ver 1.1.3 – Email Bug fixed ( Mayor thanks to Jim from cpscreative.com ).
ver 1.1.2 – Minor Bugs fixed.
ver 1.1.1 – Optional Email DNS checking.
ver 1.1 – Easier path deployment, Configurable response variable name, Debug function and minor bug fixes.
ver 1.0 – First Release.

This is a post from: Matt Varone

SimpleForm: Easy PHP multi-form email handler

Matt Varone » Web Development

Back In White

Install WordPress from the OSX Terminal

Fresh UI Elements

CSS3-only Buttons Library

How It Works

Adding More Colors

Browser Support

UItoTop jQuery Plugin

RELEASE NOTES

SimpleForm: Easy PHP multi-form email handler

These are a couple of it’s main features ( ver. 1.1.4 ):

HOW DOES IT WORKS?

INSTALLING THE SCRIPT

These are the necessary steps to have it up and running ( requires PHP 5 ):

EDITING THE CONFIGURATION FILE SF-CONFIG.PHP

INTEGRATING SIMPLEFORM WITH YOUR FORMS

A. Add Javascript and CSS files

B. Define the path to the config file and Include simpleform.php in the document ( before your form/s ):

C. Add SimpleForm Responses function

D. Add SimpleForm Form function

E. Edit the attributes:

Full Example

RELEASE NOTES

E. Edit the
attributes: