$ sudo adduser username
$ sudo passwd username

Use the command below to ensure your Ubuntu server and all apps/modules are up to date.

$ sudo apt-get dist-upgrade

If VSFTPD is already installed, use snippet below to remove it and purge the previous config files.

$ sudo apt-get remove --purge vsftpd

Install VSFTPD with snippet below.

$ sudo apt-get install vsftpd

Use snippet below to edit the vsftpd.conf file.

$ sudo nano /etc/vsftpd.conf

While editing the vsftpd.conf file, uncomment the directives below to make vsftpd ‘work’

local_enable=YES
write_enable=YES
chroot_local_user=YES

Add the following directive at the end of your vsftpd.conf file:

allow_writeable_chroot=YES

Once you’re finished editing your vsftpd.conf file, be sure to restart vsftpd with the following command:

$ sudo service vsftpd restart

Use the snippet below to change your access to ‘superuser’ so that you may ‘jail’ the ftp user to a certain directory.

$ sudo su

Use this snippet to tell vsftpd what directory you want to ‘jail’ the ftp user to.

$ usermod --home /opt/bitnami/apps/yourappname/htdocs/ username

Also, be sure to set up an inbound rule in your AWS EC2 instance to all ftp traffic.

TCP/IP Protocol Custom Range 20-21 0:0:0:0:/0

When it comes to contact forms, validating the information submitted by your visitors is key.

With proper form validation, we can help cut down fraudulent submissions and keep you relatively free from spam submissions as well. Below, I’ve gathered one of the simplest methods for validating your contact forms to keep your collected data valid and useful.

I’ve used javascript to validate my webform. You may copy and paste the code below to your site or application, but be sure to update the dependent code to match your web site.

One thing to remember is to invoke the javascript validation of your form with the ‘onSubmit’ tag.

I’ve Included 3 snippets of code to get your web form functioning and validating properly.  Although, the form is validated with javascript, I’ve used PHP to process the mailing function, so that your form sends on submit.

Part 1: The Contact Web Form

The form I’ve provided here is a very simple 4 field form to collect data for you web site or application. Here we’re gathering the basic information we need to gather from a visitor to contact them further regarding their inquiry. Here, we’re collecting Name, Email, Phone Number and their message or question.

<form class="form-container" name="myForm" method="post" onsubmit="return validateForm()" action="sendmail.php">
<div class="frm-element-lg fl">
<input type="text" name="name" id="name" class="icon-1" placeholder="Name*"></div>
<div class="frm-element-lg fl">
<input type="text" name="email" id="email" class="icon-3" placeholder="Email*"></div>
<div class="frm-element-lg fl">
<input type="text" name="phone" id="phone" class="icon-4" placeholder="Phone*" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');"></div>
<div class="frm-element-lg fl">
<input type="text" name="message" id="message" class="icon-5" placeholder="Message*"></div>
<div style="clear:both;"></div>
<input type="submit" value="Submit" class="submit-btn">
</form>

Part 2: The Form Validation

As stated above, we’re using javascript to validate our form submissions. Here, we set a javascript alert box to pop up on submission if a user has submitted incomplete form fields and we have set our email input field to confirm that the visitor is submitting a correctly formatted email address as well.

There are also 3rd party services you may integrate into your validation to confirm that the email provided is, in fact, a ‘real’ email as well, but that’s getting ahead of ourselves regarding our simple validation here.

<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
if (x == "") {
alert("Email Address must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
var x = document.forms["myForm"]["phone"].value;
if (x == "") {
alert("Phone number must be filled out");
return false;
}
var x = document.forms["myForm"]["message"].value;
if (x == "") {
alert("Message must be filled out");
return false;
}
}
</script>

Part 3: The Send Function

I’ve included the send function, as well, below. Here we use PHP to ‘send’ the email once the form is filled out by your site visitor and they click submit. You may take the code below and create a ‘sendmail.php’ file that is included in the form code above as the form action.

Be sure that all of your variables and form input name match correctly so that your send function operate correctly.

<?php $email_to = "your@email.com";
$name = $_POST["name"];
$email_from = $_POST["email"];
$message = $_POST["message"];
$phone = $_POST["phone"];
$email_subject = "Feedback from website"; $headers = "From: " . $email_from . "\n";
$headers .= "Reply-To: " . $email_from . "\n"; $message = "Name: ". $name . "\r\nEmail: " . $email_from . "\r\nMessage: " . $message . "\r\nPhone: " . $phone;
ini_set("sendmail_from", $email_from);
$sent = mail($email_to, $email_subject, $message, $headers, "-f" .$email_from);
if ($sent) { header("Location: http://yoursite.com/thankyou.php"); }
else { echo "There has been an error sending your comments. Please try later."; }
?>

There’s several ways available to validate and send your web forms. The method above, I’ve found, is the lightest and simplest way to achieve web form validation. I hope this helps and enjoy.

Your website’s page speed is of the utmost importance.

If your site doesn’t load fast enough, your potential customers and conversions are at risk. With our instant gratification culture of today, any page on your web site that takes more that 2 seconds to load fully will be abandoned immediately.

There can be a myriad of reasons that your site doesn’t load quickly. From not optimizing your images before uploading them, to improper server settings, your page load time can slow to a crawl. But, you’re in luck.

Below is a short list of my favorite resources for testing and addressing site page speed.

Free PageSpeed Test Tools:

GTMetrix.com

Pingdom.com

WebPageTest.org

Google Page Speed

Each of the page speed testing sites above will give you vital information on speeding up your website for optimal results. I use each of the urls above just a bit differently. GTMetrix is my favorite of the four. On your results page, they give you a breakdown of what’s causing your issues and give you guided hints on how to address and correct your page’s speed issues.

One of the biggest, and most common, page speed issues is Leverage Browser Caching (generally means that you can specify how long web browsers should keep images, CSS and JS stored locally).

Here is how to address Leverage Browser Caching on your site.  Add the following code to your .htaccess or httpd.conf file, dependent on your server type:

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##


Setting your leverage browser caching is one of several ways to improve your site’s page speed. A fast website will undoubtedly improve your visitor’s overall experience and catch those potential sales or conversions.

47% of consumers expect a web page to load in 2 seconds or less. (1)

PageSpeed Solution for WordPress Installations

I’ve also found this little gem for your WordPress blog or site. Speed Booster Pack WordPress Plugin address many, if not all, of your page speed issues for your WordPress installation.

Download the plugin for your WordPress site here.

Test, test, test and test some more to get your money making website to reach its fullest potential and as fast as possible. A slow site will kill your conversions and lose you potential sales and leads. Take the time to address every issue you possibly can related to page speed and show your website and visitors some love.

In a previous article, I posted on the benefits of using the pen tool in Photoshop to create quality cutouts of people or object on a complex background.

With there being many different ways in Photoshop to achieve this effect, I personally have found that using the pen tool is the best tool to use in this situation. You can refer to that blog post here.

Expanding on that post, here, I’ve created a video tutorial on using Photoshop’s pen tool for making precise, quality cutouts of shape and images on various backgrounds.

Although, you may have your own preferred method for making cutouts in Photoshop, this method I have found to be the best at creating high quality cutouts for use on other projects or design.

Thank you and I hope this tutorial video on Photoshop’s pen tool is helpful and informative.

Often, I come across the need to pull the user agent from the browser to echo custom CSS styles for that specific browser. This comes in very handy when developing for mobile. Below is a list of the major user agent/browsers and the php call to get the user agent from the session.

Use the following code below to grad the user agent for you development needs.

/// get user agent for custom browser styles
function get_browser_name($user_agent)
{
if (strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR/')) return 'Opera';
elseif (strpos($user_agent, 'Edge')) return 'Edge';
elseif (strpos($user_agent, 'Chrome')) return 'Chrome';
elseif (strpos($user_agent, 'Safari')) return 'Safari';
elseif (strpos($user_agent, 'Firefox')) return 'Firefox';
elseif (strpos($user_agent, 'MSIE') || strpos($user_agent, 'Trident/7')) return 'IE';

return 'Other';
}
?>

<style>
.IE #form form select {
width: 185px;
height: 26px;
margin-right: 5px;
margin-left: 9px;
padding: 0 0 0 15px;
font-size: 12px;
color: #666;
}
.IE input[type="text"]{
height:27px;
width: 185px;
margin-left: 8px;
/* margin-right: 8px; */
text-indent: 10px;
border: 1px solid #ccc;
}
.Firefox #form form select {
width: 159px !important;
height: 30px;
margin-right: 5px;
margin-left: 9px;
padding: 0 0 0 15px;
font-size: 12px;
color: #666;
}
.Chrome #form form select {
width: 190px;
height: 26px;
margin-right: 5px;
margin-left: 9px;
padding: 0 0 0 15px;
font-size: 12px;
color: #666;
}
.IE input::-ms-clear {
display:none;
}
</style>


<body class="<?php echo get_browser_name($_SERVER['HTTP_USER_AGENT']); ?>">

I often come across sites that need SSL but require the path to be force with NON-www.

Below is a handy snipped of code to place in your root folder in the .htaccess file. You can simply copy this code and paste it in to force all incoming urls to drop www and only use non-www urls, e.g.: https://sitename.com.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)(.+) [OR]
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} ^(www\.)?(.+)
RewriteRule ^ https://%2%{REQUEST_URI} [R=301,L]

Here I’m going to show you how to convert an Illustrator file/document to one color. This is mainly used (from my experience) for screen printing purposes but has many other applications.  I’ve had may clients ask me to put 30 different logos of varying colors and design, to all be one color to send to the printer.

This can be achieved very simply with just a few clicks in Illustrator.

The video below is a quick tutorial on just how to do this.

STEPS:

Open you artwork in Illustrator and select all the artwork. You can click and drag to select everything or use Ctrl ‘A’ keyboard shortcut.

Once all of your artwork is selected chose: Edit > Edit Colors > Recolor Artwork.

From the dialog box that pops up you can start the magic.

If the artwork contains black which you want to alter as well….. Click the little pref icon next to the “Preset” drop down menu. This will bring up the Color Reduction Options dialog.

• choose 1 from the colors drop down
• uncheck the “Black” item under “preserve”
• if “Grays” is checked, you’ll want to uncheck that as well.

If the artwork does NOT contain any black, simply choose 1 under the color drop down in the middle of the dialog window.

You can now double click “NEW” to edit the color or drag current colors to the new pane and adjust accordingly.

Be sure the “check” Recolor Art so that you may see you edits live.

Click “OK” and you are set.

I hope this helps.

While coding websites for several different clients, I’ve repeatedly had the need to a smooth scroll anchor function. Through several hours of searches and digging, I found something, that was actually in a comment somewhere, that executed the scroll function perfectly. Just a few lines of code and viola! It’s very light weight and uses a bit of css and jquery.

Place the code below right before the closing head tag “</head>”

<!-- SMOOTH SCROLL PLACE IN HEAD -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<!-- End of SMOOTH SCROLL -->

And now with the following code, place it just after the opening <body> tag.

<body>
tag ==> <div name="top"> </div>
<p>somethings</p>
ANCHOR LINK ==>    <a href="#top"> Go to top </a>

Try it out for yourself and enjoy the results.

This is by far the best way to cut out anything that you may come across in Photoshop. I do this almost every single day when cutting out people, shapes, buttons, you name it. It is clearly and by far the best method for your intended results.

I see so many people try to use the magnetic lasso or the polygonal lasso and this is just a mistake. I’m even guilty of trying to shortcut with the lassos when I was a junior designer.

Bottom line, the pen tool will out perform the array of lassos any day of the week. You have control of each point, line and curve. God forbid if you make a mistake with one of the lassos… BOOM, you have to start all over again.

With the pen tool, you can even close the document you’re working on and pick up that exact path at a later time with no consequence.

So the lesson here, PEN TOOL for CUT-OUTS  in Photoshop.

I will be posting video tutorials soon on my site. They will include Photoshop tips, Dreamweaver practices and other general design tips and tricks. I’ll be doing this with a screen capture software named “Camtasia.” I’ve noticed that sometimes when I’m searching for solutions on Google, it can take so long to find what I’m looking for and when I do find it, I always think to myself, “I could do that better.” So I’m putting my money where mouth is and going to make my own tutorials. Check back regularly to see what’s new.

This is a great tutorial I’ve used to fight back again spam on some of the website that I design. Most site use a captcha system to deter spam but that can kill your conversions sometimes. With the method in this tutorial, you can set up a spam-free contact for without captchas. It uses simple css, javascript and html. You’ll need to have a basic understanding of all three of these to complete this tutorial.

How to build a spam-free contact form without captchas: Read More…

javascript window.open function

Thewindow.open()function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes thewindow.open()function.

<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

Display:

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window thatpopsup.

javascript window.open arguments

There are three arguments that thewindow.openfunction takes:

1. The relative or absolute URL of the webpage to be opened.
2. The text name for the window.
3. A long string that contains all the different properties of the window.

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:

• dependent– Subwindow closes if the parent window (the window that opened it) closes
• fullscreen– Display browser in fullscreen mode
• height– The height of the new window, in pixels
• width– The width of the new window, in pixels
• left– Pixel offset from the left side of the screen
• top– Pixel offset from the top of the screen
• resizable– Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
• status– Display or don’t display the status bar

Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

upgraded javascript popup window!

Now that we have the tools, let’s make a sophisticated JavaScript popup window that we can be proud of!

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

Display:

Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!