How to Provide Content to Your Developer

Posted on: July 5th, 2016 by BuildMyWeb No Comments

When developing a new website, there are a myriad of solutions for developing your content. And let’s face it, rarely is anything more important about a website than it’s content. For the purpose of this article, we are considering the solution where you, the client, opt to write your own content. Typically the motivation is to save some money that might otherwise be (well-) spent on a professional copywriter. In the case where you are writing your own content and need to get it over to your developer, the following is an efficient means of doing so while mitigating confusion between both parties.

Use a Word Processing Program

Use a common word processing software like Microsoft Word, Google Docs, or Open Office Writer.

Replacing Content

A good protocol to follow when swapping out old content for new is to do something like the following.

  1. Identify the page to be edited
  2. Provide a relative location on the page
  3. State the CURRENT content
  4. Provide the NEW content that replaces the CURRENT

Identify the Page to Be Edited

On this page: http://buildmyweb.org/blog/how-to-provide-content-to-your-developer

Provide a Relative Location on the Page

First paragraph from top of page, first sentence…

State the Current Content

Please replace this: ‘there are many solutions for developing your content

Provide the New Content That Replaces the Current

with this: ‘there are a myriad of solutions for developing your content

Put it All Together

So when making a content edit on your website, the request would look something like the following;

On this page: http://buildmyweb.org/blog/how-to-provide-content-to-your-developer,

First paragraph from top of page, first sentence,…

Please replace this: ‘there are many solutions for developing your content

with this: ‘there are a myriad of solutions for developing your content

Providing New Content

When providing content for a new page or website, you will again want to use a word processing program. You will want to name each page and then provide the content for that page. Using an outline template is helpful. Be sure to reference other files (images, pdfs, etc) by their file name so as to avoid confusion.

An Example Three-Page Website

I. Home
[my_homepage_pic.jpg] (place this image above the text)
This is my awesome website! Please enjoy yourself.

II. About Us
This text is all about my company. It’s the best. It’s affordable.

III. Contact
My Company Name
100 Main St., Unit 12
Newtown, NY 10011

[Google Map] (place a full-width map underneath)

Manage Users with Paypal Account : Developer Access

Posted on: January 20th, 2016 by BuildMyWeb No Comments

User Accounts for your Paypal Account are only available in Business subscriptions. Meaning, not the free Paypal accounts. They are very important to understand and use when granting access to your Paypal account to other people. User Accounts can be added with specific permissions attributed to them by means of simple checkboxes.

For instance, you may want to give your web developer the ability to configure a PAYMENT button for an online product or setup a payment processing API for your ecommerce store. At the same time, you would not want that developer to be able to send cash out of your Paypal account or add new users. So those latter permissions would be restricted on the new Developer account you create.

Employees, Accountants, and Developers

Use your PayPal Business account to add users to your account, create multiple logins and access levels, and assign specific privileges, so your employees can complete tasks for you. For example, you can assign privileges to your accountant, administrative assistant, or developer if you have people in these roles.

Add New Paypal User Account Instructions

You can read more about this on Paypal’s website. “To get started using adding users to your account and managing their levels of access, log in to your PayPal account, go to your Profile, and click Manage Users under Account Information.”

How to Make Sticky Form Fields with PHP

Posted on: September 7th, 2015 by BuildMyWeb No Comments

Sticky Form Fields refers to having field Values populate in their respective fields in a form once submitted. So a user does not have to re-type the data if there is an error and the user is asked to correct a field(s).

Sticky Forms with PHP SESSIONs

The way I go about it is to place all $_POST values from a form submission into the SESSION array. I set all POST values to SESSION in my form handler script. So once a form is submitted, all fields with data in them are submitted to the SESSION. Then when we re-read the form, if a particular SESSION var isset(), I use it as that field’s value.

Here it is in action. This form requires, among other things, that we provide a valid email address. Our user typed in a First Name and a Last Name, then clicked the submit button. The form handler script brought us back to the page with the form, and displays a helpful message, letting the user know the email field is required. Normally, the data submitted in the First Name and Last Name fields would be lost. Thanks to Sticky Form Fields, they are saved and pre-populated in our form fields so that our user does not have to re-type them!

PHP Sticky Form Fields

Sticky Functions

I have a couple of functions that I use in my personal library on all projects. I call them from inside the HTML form for each field.


function do_sticky_field( $field_name )
{
    echo'name="' . $field_name . '"';
    
    if( !empty($_SESSION[$field_name]) )
    { echo' value="' . $_SESSION[$field_name] . '"'; }
}

function do_sticky_select( $name, $arr_options )
{
    echo'<select name="' . $name . '"><option value=""></option>';
        
    foreach( $arr_options as $key => $val )
    { 
        echo'<option value="' . $key . '"';
        if( $_SESSION[$name] == $key ){ echo' selected="selected"'; }
        echo'>' . ucwords($val) . '</option>'; 
    }
    
    echo'</select>';
}

Calling the Functions from the HTML Form

I call these functions from inside my HTML form like such:


<?php do_sticky_select( 'select_name', array('tv'=>'Television', 'internet'=>'Internet', 
'friend'=>'Friend or Relative', 'other'=>'Other') ); ?> 

<input type='text' <?php do_sticky_field('input_name'); ?> />

Place POST Vars into SESSION Array in Handler

The final piece of the puzzle is to place all desired field values from the POST array into the SESSION array in our handler script once the form is submitted:


// any POST vars not being stored in SESSION should come after this loop
foreach( $_POST as $key => $val )
{
    if( isset($val) )
    { $_SESSION[$key] = $val; }
}

What is phpinfo()?

Posted on: August 14th, 2015 by BuildMyWeb 1 Comment

If you are going to be programming PHP logic into your websites and web applications, you will eventually find a use for phpinfo(). It is a function that outputs a large amount of data on the state of php as it is installed on your server. PHP extensions, the PHP version, paths, server configuration options, and the like can all be found in this data. That can be very useful. Particularly when making decisions on selecting solutions. You’ll want to know what your options are and what is available to you.

In a recent project I was working on, we wanted to be able to dynamically crop and resize images that users would be uploading to the server. We accomplished this by leveraging the GD Library. Before deciding, we wanted to make sure the library was indeed installed on our production server. We did so by way of the phpinfo() function.

Instructions

Create a new php file and call it anything you like. Something like phpinfo.php will do nicely. In that file, place your opening and closing php tags and then inside of them, write the function: phpinfo();. That’s it. Nothing more. Upload that file to your server and then navigate to the file in your browser: http://mydomain.com/phpinfo.php.

phpinfo

The above is a screenshot of the section I was looking for in this instance. When the file loaded, I hit ctrl-f to open the search field in my Firefox browser window and typed ‘GD’, then ‘Enter’. The search brought me down to the section you see above, confirming that the GD library was indeed installed and ready for use.

One word of caution, be sure to remove the phpinfo.php file when you are done with it as it is not the type of information you want to share with the public.

How to Detect a Browser Refresh with PHP

Posted on: August 13th, 2015 by BuildMyWeb No Comments

There has been many a time where I’ve needed to detect a user refreshing their browser within a web application. Here is a really simple solution that has worked for me in Firefox, Chrome, Safari, but of course not in good ol’ reliable (cough, cough) Internet Explorer. The bane of all developers since it’s inception. But enough IE bashing. Ha ha! I kid! There is never enough IE bashing. It’s the suck! Always has been a nightmare and likely always will be!

The suckiness of IE aside, here is the solution:


if( isset($_SERVER['HTTP_CACHE_CONTROL']) && $_SERVER['HTTP_CACHE_CONTROL'] === 'max-age=0' )
{
    // our page has been refreshed
}

You’re welcome.

How To Upload and Resize an Image with PHP

Posted on: August 12th, 2015 by BuildMyWeb No Comments

Upload an Image to Your Server with PHP

You can relatively easily upload images to your web host using an HTML form and a PHP script handler. The key ingredient is to include the following within your form element: enctype="multipart/form-data". And, of course, you will need the proper input that allows users to select and upload the file: <input type="file" name="file_upload"> .


    <form id="Upload" action="scripts/handler_upload.php" enctype="multipart/form-data" method="post">      
        <input type="hidden" name="max_file_size" value="<?php echo $max_file_size; ?>"> 
         
        <label for="file">File to upload:</label> 
        <input type="file" name="file_upload"> 
                 
        <input id="submit" type="submit" name="submit" value="Upload me!">      
    </form> 

When allowing users to upload any file to your server in this way, you are opening your server up to added security vulnerabilities. There are things you can do to mitigate a large number of these vulnerabilities and I would not allow users to upload files without researching this subject yourself as it is not covered under the scope of this article. You can limit the size and types of files that can be uploaded, for instance. If the purpose of this project is to allow users to upload profile pictures, why not limit the upload possibilities to an array of image formats: $permitted_extensions = array('jpg', 'jpeg', 'gif', ...); This article is not so much about uploading an image with PHP. That is covered extensively throughout the internet. This article is more concerned with resizing and cropping them. Something I had a much more difficult time finding good information on.

Resize and Crop Your Image

This single PHP Class allows one to resize and crop images dynamically and without distortion. Or with it if you prefer. There are options that will allow you to keep the aspect ratio intact or to force specific height and width dimensions. With the functions already built into this class, you can also save images to several different types of your choosing with adjustable quality. Best of all, it is basically plug-n-play.

The one major caveat is that it requires the PHP GD Library be installed on your server. If you’re unsure if your hosting provider has this installed, follow these instructions on phpinfo() to find out for sure.

Simply place the class into a file on your server. In this case, the call will be looking for resize-class.php. Use the Class Call to instantiate the class object. Be sure to edit path values to find your file(s) and save to the desired locations.

The Class Call

// *** Include the class if you don't have an autoloader
include("resize-class.php");
 
// *** 1) Initialize / load image you want to work on
$resizeObj = new resize('sample.jpg');
 
// *** 2) Resize image (options: exact, portrait, landscape, auto, crop)
$resizeObj -> resizeImage(150, 100, 'crop');
 
// *** 3) Save image
$resizeObj -> saveImage('sample-resized.gif', 100);

The Class


class resize
{
    private $image;
    private $width;
    private $height;
    private $imageResized;
 
    function __construct($fileName)
    {
        // *** Open up the file
        $this->image = $this->openImage($fileName);
 
        // *** Get width and height
        $this->width  = imagesx($this->image);
        $this->height = imagesy($this->image);
    }
    
    private function openImage($file)
    {
        // *** Get extension
        $extension = strtolower(strrchr($file, '.'));
     
        switch($extension)
        {
            case '.jpg':
            case '.jpeg':
                $img = @imagecreatefromjpeg($file);
                break;
            case '.gif':
                $img = @imagecreatefromgif($file);
                break;
            case '.png':
                $img = @imagecreatefrompng($file);
                break;
            default:
                $img = false;
                break;
        }
        return $img;
    }
    
    public function resizeImage($newWidth, $newHeight, $option="auto")
    {    
        // *** Get optimal width and height - based on $option
        $optionArray = $this->getDimensions($newWidth, $newHeight, strtolower($option));
     
        $optimalWidth  = $optionArray['optimalWidth'];
        $optimalHeight = $optionArray['optimalHeight'];
     
        // *** Resample - create image canvas of x, y size
        $this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight);
        imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight,
        $this->width, $this->height);
     
        // *** if option is 'crop', then crop too
        if ($option == 'crop') {
            $this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight);
        }
    }
    
    private function getDimensions($newWidth, $newHeight, $option)
    {
     
       switch ($option)
        {
            case 'exact':
                $optimalWidth = $newWidth;
                $optimalHeight= $newHeight;
                break;
            case 'portrait':
                $optimalWidth = $this->getSizeByFixedHeight($newHeight);
                $optimalHeight= $newHeight;
                break;
            case 'landscape':
                $optimalWidth = $newWidth;
                $optimalHeight= $this->getSizeByFixedWidth($newWidth);
                break;
            case 'auto':
                $optionArray = $this->getSizeByAuto($newWidth, $newHeight);
                $optimalWidth = $optionArray['optimalWidth'];
                $optimalHeight = $optionArray['optimalHeight'];
                break;
            case 'crop':
                $optionArray = $this->getOptimalCrop($newWidth, $newHeight);
                $optimalWidth = $optionArray['optimalWidth'];
                $optimalHeight = $optionArray['optimalHeight'];
                break;
        }
        return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
    }
    
    private function getSizeByFixedHeight($newHeight)
    {
        $ratio = $this->width / $this->height;
        $newWidth = $newHeight * $ratio;
        return $newWidth;
    }
     
    private function getSizeByFixedWidth($newWidth)
    {
        $ratio = $this->height / $this->width;
        $newHeight = $newWidth * $ratio;
        return $newHeight;
    }
     
    private function getSizeByAuto($newWidth, $newHeight)
    {
        if ($this->height < $this->width)
        // *** Image to be resized is wider (landscape)
        {
            $optimalWidth = $newWidth;
            $optimalHeight= $this->getSizeByFixedWidth($newWidth);
        }
        elseif ($this->height > $this->width)
        // *** Image to be resized is taller (portrait)
        {
            $optimalWidth = $this->getSizeByFixedHeight($newHeight);
            $optimalHeight= $newHeight;
        }
        else
        // *** Image to be resizerd is a square
        {
            if ($newHeight < $newWidth) {
                $optimalWidth = $newWidth;
                $optimalHeight= $this->getSizeByFixedWidth($newWidth);
            } else if ($newHeight > $newWidth) {
                $optimalWidth = $this->getSizeByFixedHeight($newHeight);
                $optimalHeight= $newHeight;
            } else {
                // *** Sqaure being resized to a square
                $optimalWidth = $newWidth;
                $optimalHeight= $newHeight;
            }
        }
     
        return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
    }
     
    private function getOptimalCrop($newWidth, $newHeight)
    {
     
        $heightRatio = $this->height / $newHeight;
        $widthRatio  = $this->width /  $newWidth;
     
        if ($heightRatio < $widthRatio) {
            $optimalRatio = $heightRatio;
        } else {
            $optimalRatio = $widthRatio;
        }
     
        $optimalHeight = $this->height / $optimalRatio;
        $optimalWidth  = $this->width  / $optimalRatio;
     
        return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
    }
    
    private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight)
    {
        // *** Find center - this will be used for the crop
        $cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 );
        $cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 );
     
        $crop = $this->imageResized;
        //imagedestroy($this->imageResized);
     
        // *** Now crop from center to exact requested size
        $this->imageResized = imagecreatetruecolor($newWidth , $newHeight);
        imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth,
        $newHeight, $newWidth, $newHeight);
    }
    
    public function saveImage($savePath, $imageQuality="80")
    {
        // *** Get extension
        $extension = strrchr($savePath, '.');
        $extension = strtolower($extension);
     
        switch($extension)
        {
            case '.jpg':
            case '.jpeg':
                if (imagetypes() & IMG_JPG) {
                    imagejpeg($this->imageResized, $savePath, $imageQuality);
                }
                break;
     
            case '.gif':
                if (imagetypes() & IMG_GIF) {
                    imagegif($this->imageResized, $savePath);
                }
                break;
     
            case '.png':
                // *** Scale quality from 0-100 to 0-9
                $scaleQuality = round(($imageQuality/100) * 9);
     
                // *** Invert quality setting as 0 is best, not 9
                $invertScaleQuality = 9 - $scaleQuality;
     
                if (imagetypes() & IMG_PNG) {
                    imagepng($this->imageResized, $savePath, $invertScaleQuality);
                }
                break;
     
            // ... etc
     
            default:
                // *** No extension - No save.
                break;
        }
     
        imagedestroy($this->imageResized);
    }
}

Source

http://code.tutsplus.com/tutorials/image-resizing-made-easy-with-php–net-10362

The Disadvantages of Content Management Systems ( CMS )

Posted on: August 11th, 2015 by BuildMyWeb No Comments

A good Content Management System, or CMS, can be a powerful tool. They are all the rage in the current web atmosphere because their strengths are obvious and significant. What are not so obvious, but equally or even more powerful, are their disadvantages. CMS applications such as WordPress, Joomla, Drupal, and their ilk are no-brainers for the right project and the right application. In the right context, they are a wonderful tool. Outside of that context, they are more problematic than they are helpful. Unfortunately, they are increasingly overused because the benefits are easy to sell.

CMS Advantages

There are advantages to using a CMS in particular scenarios. These advantages are readily apparent and highly attractive and so often times are over-valued, however. I will list the major ones here in the hope of offering website owners an opportunity to consider the use of a CMS appropriately.

Editing Content Quickly and “Easily”

Perhaps the most obvious advantage is that a CMS allows non-developers an opportunity to edit their website content without knowing how to code. There is always a learning curve for each CMS but some are certainly easier to pickup on than others. A typical CMS allows amateurs and developers alike to build an HTML page and inclusive scripts with point-and-click actions. In a slick and well-developed interface, this could take only minutes. Saving time is a value to everyone. When familiar with a CMS, it is possible to get a fully functioning website online in just a few hours. Certainly, this will be a “canned” production, with little to no customization, but there are oodles of beautiful themes and plugins available ( usually for a price($) ) and a plethora of CMS applications from which to choose to get you started. A good developer can take this starting point and get you to a wonderful endpoint.

All-in-One Packaging

Layout and design, SEO, server-side functionality, are all touted by most CMS. They abound in various widgets such as calendars, image galleries, sliders, and the like. And indeed, they do provide for each of them to some degree. Usually this requires installing and configuring plugins. Despite the ‘easy to use’ claims made by the authors of these add-ons, editing source code is usually required as well to get them working the way you want.

CMS Applications Really Shine in Ecommerce

Where a CMS is frequently the best choice is in the realm of ecommerce. So much of what is required for a successful online business is server-side programming that the user never sees. It requires countless hours and lines of code to produce something that does a lot of things well and securely. Many of these needs are common to most ecommerce projects. If you’re selling something online, its almost certain you will need a way to display your product images and description along with pricing and shipping information. So it only makes sense to build something once and continue to improve upon it than to start from scratch each and every time. Hence, the CMS. Programs like Woocommerce for WordPress, Magento, etc. are built to do all of those basic functions and more. Their features are continually improved and added to in the more prolific systems. So why recreate The Wheel?

CMS Disadvantages

“With these advantages, why wouldn’t I want to use one?” That question is frequently asked by amateur web entrepreneurs. As the saying goes, “you asked for it”.

Even a Beginner Can Do It

Sounds great, right? Well it is if you’re a hobbyist wanting to get a website. Not so great, when you’re a “developer” looking to bill people for your services but don’t want to or aren’t capable of learning actual code and design. Web and online application development opportunities are tremendous and will continue to grow immensely for the foreseeable future. It can be done from anywhere that you can get an internet connection. And it can pay well, when you’re good at it.

For these reasons, there are throngs of young up-and-comers entering the pool as well as second career types. Many of them do not want to put in the investment required to develop quality productions. And you will just have to trust me, ( or Google it ), it takes a definitive commitment to learn web development. There are numerous skillsets that have to be leveraged and they are all constantly evolving at a high rate of speed as technology continues to explode. Many “developers” choose a CMS to learn that can do everything for them without actually learning about code or design. I cannot stress this enough, these are the types of people you REALLY want to steer clear of. Any developer worth his or her salt can look at one of these productions and almost immediately identify it as such. If we can, it’s because there are some seriously significant problems that you as a non-developer might not notice. Just like a car might look great to you but a mechanic can simply listen to it idle or peek under the hood and advise, “don’t buy that car”.

CMS Content is Dynamic – and Therefore Slow

A custom website will most often have HTML hardcoded to a page file or directly written to via another programming technology. CMS Rely on Database Calls for HTML content. What this means to you, the site owner, is longer times to view pages. There is no denying it or getting around it. If you have 50 viewers per week, you will rarely have more than one or two users at a time making those database calls to view your web pages and so the longer loads will not be too noticeable. If you own a busy site, you can literally track the time between page loads with a stopwatch.

Security Issues

The top three CMS, WordPress, Joomla, and Drupal, take up @ 70% of the market share in all CMS world-wide. That is ENORMOUS considering the thousands of CMS available today. Like many others, these three are Open Source which means everyone has access to the programming files that make them work. You, your competitor, and the hacker who wants to hijack your email all have equal access to the inner workings. Because of their popularity and ease of access, CMS are immensely vulnerable to hackers. Security updates are pumped out with more and more frequency but you don’t want to be among the thousands of users who lose their website to the hacking technique that necessitates Update Version 12.104.7.

CMS are Resource Expensive

This is a slightly fancy way of saying, a CMS website requires a lot more time and energy from the host server when compared to an equivalent custom HTML website. This translates to higher hosting costs and likely operational problems for you as the website owner. CPU usage, bandwidth, and storage are all taxed much more than on an equivalent HTML website. Despite the tricky advertising, no web host offers Unlimited Bandwidth, or unlimited anything for that matter. There are always caps and you have to read some very technical small-print to understand what those limitations are. If you exceed them, you will immediately hear terms like “throttling” and “account suspension” thrown at you.

Unlimited Bandwidth

CMS like WordPress are so resource intensive, and so frequently a cause of conflict between site owners and hosting companies, many hosting providers now offer packages specifically dedicated to them. GoDaddy, showcased above, offers WordPress Hosting Packages. Despite their claims that “it is very rare that a website violates our hosting agreement”, they have decided it prudent to developer hosting packages specifically for the WordPress (one of, possibly THE most popular) CMS. The sheer length of the Stack Exchange response to the question, ‘How to Determine Hosting Requirements’ for a CMS like Magento indicates that it is a significant concern.

Constantly and Frequently Upgrading Software

At times a CMS will simply have new and improved features to share. Many other times, they are fixing bugs or addressing security loopholes that have been discovered when they release updates. The core files are authored and maintained separately from plugins, themes, and customizations. If you own a CMS, it is not a matter of ‘if’ but ‘when’ you are going to have an incompatibility problem. One of the above will be updated and it will not be compatible with the other pieces of the puzzle. This will result in a design bug, functionality breakdown, or a complete shutdown of your website.

Higher Costs

Many new clients come to us with a recommendation from a friend of a friend, or their sales partner, or their neighbor Larry, that they use a CMS because it will be cheaper. You take the CMS, you install it, make a few minor customizations so it doesn’t look like every other CMS website in existence and you’re done, right? Wrong. Even for an “easy” or “free” CMS, if you care about your business, you will need a developer to make it look and work like anything other than a beginner’s attempt. If I need a contractor to fix my leaky roof, I’m not going to look for a beginner. So I’m surely not going to look for a contractor that looks like he can only afford a beginner’s website. As noted above, hosting requirements are higher and so you typically need to pay more for it.

Perhaps most notable is the fact that CMS websites are chock full of features that you may never use. That means lots of unnecessary code that can conflict with future changes in your website, browsers, programming version upgrades, new plugins, hosting changes, and on and on. All of this superfluous code can make programming what would be a simple feature on a custom site built just for you, a major undertaking in a CMS. So if you need to make customizations to that CMS, and you do!, you could easily pay more for development than on a custom HTML site. Not always, but more often than most think. Know if this is one of those times before deciding on a CMS as opposed to a custom production that does exactly, and only what you need it to do.

Code Bloat, an Unnecessary Evil

Speaking of superfluous code, what those in the know call ‘code bloat‘, it can be a major bummer. It frequently accounts for poor site performance (viewing speed), declines in SEO, conflicts with future updates and add-ons, unwanted disparities when viewing in different browsers or devices, and more. You want to avoid bloat at all times.

Templates

Customization is a necessity for any business related website. If you make use of a template to which the public has access without customization, you are giving the impression that you either do not care enough or are not successful enough to take your impression on others seriously. For the same reasons that business people where suits and medical doctors use the title ‘Doctor’, business owners ought to have a professional -looking, custom website. Even when a CMS is a good choice, it usually requires the skillsets of a professional developer to execute successfully.

Updating Content is Never as Easy as Advertised

The most notable strength of any CMS is that you can add your own content. But should you is more relevant than can you. There is no doubt there is value in being able to update your own content when the changes are frequent (daily or weekly) and your budget is small. The problem is that when non-developers start making changes to their website, they all too frequently do not do it well. Do you know how to optimize images? How to choose good META information or even know what it is? How to properly name and link to files? Do you know how to write good content from the perspective of a Search Engine bot? All of the aforementioned will either improve or destroy both user experience and SEO. I cannot tell you how many times a client has started editing their site via their CMS and not even realized it has bugs or completely breaks down in Safari or on a mobile device because they always view it in Internet Explorer on their desktop computer. Most times we do not long display CMS-developed websites in our portfolio because once the client gets their hands on it, things quickly get ugly.

In Conclusion

If you make frequent and simple content updates to your site such as a few paragraphs of text weekly for your news announcements, a CMS is an obvious choice. If you want to open an online store to sell your wares, a solid system like Woocommerce or Magento is worth taking a look at. If you’re a hobbiest and just don’t want to pay someone else to build your “Cat on Cat Love and Aggression” fan site, then a CMS like WordPress is certainly the way to go.

In most every other situation, hire a developer to build a custom website. There’s a good chance it won’t be anymore expensive than a CMS and will likely look and function better. Then go tell your neighbor Larry to fly a kite.

How To Make Google Maps Responsive

Posted on: July 24th, 2015 by BuildMyWeb No Comments

Google Maps and many others like it, make it really easy to embed a short snippet of code that will render a beautiful, interactive map on your website. It’s simply a matter of typing in your address, clicking the ‘share’ button, and grabbing the iframe embed code. In today’s mobile world, this is not enough.

How to make Google Map iframes Responsive

Google iframes come in fixed width dimensions. This will not do on a responsive site. I was recently looking for a solution that is fluid and responsive when rendering a Google Map iframe on my page. The below bit of css worked quite well for me. I want to share it for others who might look for a similar solution.

JSFiddle

On a sidenote, if you’ve ever tried pasting a snippet of code into a WordPress Post for display, rather than rendering, you know it isn’t so easy to do. If you don’t know what I am talking about, just try it. Copy my code below, paste it into a Post on your blog, and see what happens. There are many solutions to choose from for sharing code in a blog environment. I haven’t had a chance to play with too many but JSFiddle is a free service that suits my needs quite well. You can see the results below.

JSFiddle: https://jsfiddle.net/

Concept Source: http://www.labnol.org/internet/embed-responsive-google-maps/28333/

IE11 main element display: block; not supported

Posted on: July 23rd, 2015 by BuildMyWeb No Comments

Internet Explorer is The Suck

Lord, I hate Internet Explorer. I’ve heard,.. well really read this so many times before from other developers, I cannot bare to say it again. But I will. I hate Internet Explorer. I’ve been developing sites since before IE6. And man alive, was THAT a beast. The worst browser ever conceived by man. But that’s for another time. Just take my word for it if you haven’t already formed your own opinions on the matter, when it comes to browsers, IE is the suck.

Inline Elements Do Not Render Vertical Padding

I recently was developing a site in HTML5 and had an issue where a background image on my main element was not rendering in IE11. It was fine in Firefox and Chrome, but f*cking IE11 would not do it’s job. That is what caught my attention. But then I noticed it wasn’t accommodating the vertical padding I coded either. So I put on my thinking cap and pondered, ‘What would cause a primary block element such as main not to have padding?’ And then it hit me. I heard my inner voice say ‘block’ and I thought, ‘well an inline element wouldn’t take padding.’

Solution for Main Element Display

So on a whim I applied display:block; in my CSS to the main element and wouldn’t you know it! It worked. My background image appeared and the padding was accommodated. So I did a quick little search and it turns out there are plenty of complaints and questions about this. Is it a bug? Makes sense to me as IE has always been and likely always will be a piece of shit. Apparently IE11 is missing a User Agent Style for the

element.

How to Create Equal Height Columns with CSS

Posted on: July 22nd, 2015 by BuildMyWeb No Comments

There is an ever-present need in the design world for containers of equal height within a document. Unfortunately, there is a serious lack of support currently for this concept. I’ve been hearing for quite some time that Flexbox is going to be our savior but support is not quite there yet.

In the meantime, there are several interesting techniques I’ve come across in recent history. Table display, display:table; (parent) and display:table-cell; (child) is frequently my go-to but recently I came across another css technique that is elegant and, I would think, even more tolerant of variations.

CSS Padding and Margins to the Rescue

In essence, you want to give an overly large amount of padding at the bottom of each child element and counter it with an equal amount of negative margin. Then, wrap the children in a parent container with an overflow:hidden; to clip off all of that excess at the bottom that we do not want.

The HTML:

Equal Height Columns HTML

The CSS:

Equal Height Columns HTML

Of course, no good article would be complete without citing our sources. The example code and my introduction to this technique came from http://callmenick.com/post/css-equal-height-columns-three-different-ways. I am not sure who ought to receive original credit for the concept. I do not see it referenced from nick’s site. Whomever you are, thank you!

PHP Function str_getcsv() not working

Posted on: July 19th, 2015 by BuildMyWeb No Comments

It is a common practice to develop new sites or significant changes to an existing website on a development server. You do your rockstar work, follow it up with some stellar testing and debugging, and then,… when completely satisfied with your results,… you publish your new files to your production server. And voila! Something breaks down.

I ran into this issue recently and for some wonderfully delicious reason, my mind immediately went to ‘check php versions’. Sure enough, my development server is running PHP v5.3 and my production server is running v5.2. The reality is, I was about to flip the site mode switch back into ‘dev’ mode so I would have seen the error that was thrown and realized str_getcsv() was not being supported. But it’s all the more satisfying that I figured it out on my own.

Organize a settings.php File for Site-wide Variables and Constants

See, I keep a settings.php file in all of my productions. I keep many global variables and CONSTANTS there for easy reference. One such setting I have is a SITE_MODE constant. I have lots of conditionals that say for instance,

if( SITE_MODE == 'dev' ){ ADMIN_EMAIL = 'info@buildmyweb.org; }

. All of my scripts utilize ADMIN_EMAIL instead of hardcoding email addressed. This way I can use my own email address when developing a project to receive notification emails and quickly edit one line of code when ready for the client email address to receive notifications, in LIVE mode. I also keep database values stored here, configure timezones for date functions, etc. But I digress…

“Call to undefined function str_getcsv()”

When I put my new site into ‘dev’ mode, I received the error: ‘Call to undefined function str_getcsv()’. I was attempting to read the contents of a text file and split the string into an array. But, as you can guess, the str_getcsv function was not working. I could make a case with my hosting provider to upgrade my server’s PHP version. Or some hosts allow you to switch between a few versions yourself. My client’s host is GoDaddy however. Yes, holy mother of all that is foul and intolerable, I would have to deal with GoDaddy. Rather than suffer through that process, I chose to look for an alternative. I did a quick Google search and came across this little golden nugget:

// if php version < 5.3, use our custom str_getcsv()
if( !function_exists('str_getcsv') ) 
{
    	function str_getcsv($input, $delimiter = ',', $enclosure = '"') 
	{
        	if( ! preg_match("/[$enclosure]/", $input) ) 
		{ return (array)preg_replace(array("/^\\s*/", "/\\s*$/"), '', explode($delimiter, $input)); }
	
        	$token = "##"; $token2 = "::";
			
        	//alternate tokens "\034\034", "\035\035", "%%";
        	$t1 = preg_replace(array("/\\\[$enclosure]/", "/$enclosure{2}/",
                "/[$enclosure]\\s*[$delimiter]\\s*[$enclosure]\\s*/", "/\\s*[$enclosure]\\s*/"),
                array($token2, $token2, $token, $token), trim(trim(trim($input), $enclosure)));

        	$a = explode($token, $t1);
			
        	foreach($a as $k=>$v) 
		{
            	    if ( preg_match("/^{$delimiter}/", $v) || preg_match("/{$delimiter}$/", $v) ) 
		    { $a[$k] = trim($v, $delimiter); $a[$k] = preg_replace("/$delimiter/", "$token", $a[$k]); }
                }
			
        	$a = explode($token, implode($token, $a));
        	return (array)preg_replace(array("/^\\s/", "/\\s$/", "/$token2/"), array('', '', $enclosure), $a);
    	}
}

In essence, it runs a conditional to see if the function str_getcsv() exists. If it does not, it declares the custom one above. I’ve used it and it worked perfectly. It was a stackoverflow thread that directed me to the above: http://stackoverflow.com/questions/19048959/call-to-undefined-function-str-getcsv

How to ‘Find and Replace’ in MySQL with phpMyAdmin

Posted on: June 3rd, 2015 by BuildMyWeb No Comments

The Problem:

You have a large number of image files stored on your hosting account and want to move them to a new subdirectory. However, you have a database that stores the absolute path to each of these images files and do not want to go through the tedious task of manually checking and editing hundreds or thousands of table rows.

The Solution:

You can Find-and-Replace strings of text in your mysql database tables just like you would in a MS Word document. Log into phpMyAdmin and select your database.

The Procedure

The first thing I would do is make a backup of your database. Or alternatively, backup the Table within the database you are going to be working on. Keep that safe to restore your table/database should something go horribly wrong. If you don’t know how to do this, you really shouldnt be working in your database at all. Contact a professional to help you if you hold any value on your database because it could all blow up rather easily. And without proper backups, there is no restoring your data. Databases do not have a Recycle Bin like your Windows OS. Once you make a change, it is permanent.

phpmyadmin

Now that you have your parachute tucked away nice and safe, you will want to navigate to the table in question and click on the SQL tab toward the top of the screen to run a SQL query. In the snippet below, you will find an example. Of course, replace the italicized text with your actual values.


UPDATE table_name SET field_name = REPLACE(field_name, 'original_text', 'new_text');

This will search out and find every instance of original_text and replace it with new_text in the field with the name field_name in the table named table_name. In our hypothetical problem for this article, let’s suppose we are editing a WordPress database. We need to replace an old URL with a new one so we might run a query something like this:


UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://mydomain.com/wp/uploads/15/03', 'http://mydomain.com/blog/uploads/15/03' WHERE post_status = 'publish');

Your final step is to click the GO button at the bottom right of your SQL query frame. If you followed my instructions, all should go well. Good luck!

Microsoft Announces Pilot Program to Hire People with Autism

Posted on: April 11th, 2015 by BuildMyWeb No Comments

Sure, some will be skeptical and call it a publicity maneuver. Undoubtedly, it is positive publicity. Being a skeptic myself when it comes to the actions and motivations of corporations, I agree. There is no doubt in my mind that some eggheads sitting in a board room are thinking, and likely saying out-loud, what a wonderful little scheme this will be for gaining positive notoriety on behalf of Microsoft. On the other hand, behemoths like Microsoft are going to seek that publicity one way or another. Why not relish in the fact that this time their marketing effort has the much added benefit of making the world a better place?

As noted on Microsoft’s own blog post in regards to the action, ‘It’s simple, Microsoft is stronger when we expand opportunity and we have a diverse workforce that represents our customers. People with autism bring strengths that we need at Microsoft, each individual is different, some have amazing ability to retain information, think at a level of detail and depth or excel in math or code. It’s a talent pool that we want to continue to bring to Microsoft!’

The original post:
http://blogs.microsoft.com/on-the-issues/2015/04/03/microsoft-announces-pilot-program-to-hire-people-with-autism/

New Google Mobile Friendly Search Algorithm

Posted on: April 10th, 2015 by BuildMyWeb No Comments

Mobilegeddon is April 21 2015

From Google’s own Blogger page: http://googlewebmastercentral.blogspot.com/2015/02/finding-more-mobile-friendly-search.html

“As more people use mobile devices to access the internet, our algorithms have to adapt to these usage patterns. Starting April 21 [2015], we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”


Mobile Friendly Test Tool

Here is a great little tool Google is offering for users to see if their webpage is considered ‘mobile-friendly’ by Googlebot: https://www.google.com/webmasters/tools/mobile-friendly/

Mobile Friendly Definition

And here is Google’s definition on what makes for a Mobile-friendly webpage design: http://googlewebmastercentral.blogspot.com/2014/11/helping-users-find-mobile-friendly-pages.html


What Does This Mean For Website Owners?

If you own a website, and want users to be able to find it via Google (or any other Search Engine, for that matter), you should be concerned. If your website does not render well on a mobile device such as a tablet or smart phone, Google will penalize your search ranking. Thereby making it that much more difficult for users to find your website.

How Do I Know If My Website Is Mobile Friendly?

Plug the url (web address) of the webpage you want to check into the field on the Mobile Friendly Test Tool linked above and click the ‘Analyze’ button. If it says there are problems, you will likely need to contact a developer for assistance.

Problems with Wix, Weebly, and other Do-it-Yourself Website Builders

Posted on: March 13th, 2015 by BuildMyWeb No Comments

We frequently have clients come to us after making an attempt to build their own site. Either they will ask if we can ‘spruce things up’ on their existing website or they will ask us to develop a new one altogether. The point being, much of our personal experience with these types of builders is with clients that have already run up against the inherent problems they pose. In fairness, I am sure there are lots of happy DIY-ers that we never come across.

If you are a hobbyist or selling gizmos out of your trunk, you likely do not have or do not want to invest a lot of resources into your web presence. But you want something. So you call a couple of freelance developers, assuming (correctly) that they will be cheaper than a company, and find out that you actually have to spend some money to get a professional. The ‘soup and a sandwich’ barter proposal wasn’t as appealing to freelancers as you thought it might be. And the ‘intern designers’ who you gave a shot quit the job half-way through when they couldn’t accommodate your revisions. So you’ve turned your eye toward a DIY builder such as;

  • Wix
  • Weebly
  • GoDaddy’s Website Builder

What follows here is not necessarily going to be true of each of the above or any other DIY website builder. Each offering is unique but there are a lot of commonalities across most of them. So I am writing a bit anecdotally as representative of a generic experience.

Very Little is Free in Life

The upsides are obvious. They typically start you off with a free package. Once you begin to work with this free package, you realize you are limited to only 3-5 pages and you need 6 pages. Or you have to use a subdomain of theirs (http://mydomain.weebly.com) instead of your own (http://mydomain.com) which not only is embarrassingly unprofessional but sucks for SEO purposes. Or they are going to have blocks of advertisements on your website which requires no explanation as to why it sucks. Free is no longer free because you now need to upgrade to a ‘Pro’ or ‘Business” package.

They Own You

The WYSIWYG (What You See Is What You Get) interface that is so appealing with these DIY builders is proprietary. The power of it is that a non-programmer can build a webpage visually by point-and-click techniques and then the builder writes the code for you. Being proprietary, there are many tradeoffs for that power. Typically, it is required that you host your website with them. So you must pay the $15.99 monthly fee they charge rather than shopping around for hosting packages that offer twice as many resources for half the price. This brings us back to Very Little is Free in Life.

What’s worse,.. MUCH worse,.. is that you have no access to the source files. And there is no means to download your code. Or if there is, it is given to you in format that can be downloaded but not uploaded anywhere, as it is with Weebly. You cannot even upload it back to Weebly themselves! In essence, it is mostly useless. This makes the backup process difficult at best. If your site gets corrupted, or hacked, or Weebly goes out of business, or Weebly deletes your website for a Terms of Service violation you are not even aware of (this happened to me once with Yahoo!), or any one a number of situations, you are out of luck. Your website is gone and there is no way to get it back. Or maybe you just realize you are limited to an unacceptable degree or don’t like their service and want to leave for another provider. You are welcome to leave, but you cannot take your website with you for reasons I listed above.

Limited Functionality and Customization

You are limited in the access you have to your own website. Third Party API’s and scripts are frequently not permitted. You may have access to HTML and CSS but programming logic is not possible. CMS (Content Management Systems) such as WordPress, Joomla, and Drupal have hundreds of developers building all kinds of extensions, templates, and plugins for their respective products because they are Open Source. DIY builders do not. Because of this enormous limitation, DIY websites usually ‘look’ like a template and have limited features and functionality available to their users. A short list of the MANY things you frequently cannot customize on a DIY website include image optimization, third-party picture galleries (you are severly limited by what the DIY host offers) image meta information, inability to configure browser caching, webfont delivery optimzation, and the inability to use your own form data sanitization or field validation.

Each DIY builder has a small selection of templates that look professionally done and so upon first glance seem to be sharp looking. The problem is that ever other user of this DIY builder thinks the same handful of templates look sharp and you wind up having all kinds of websites using the same templates with variations in text and image content.

Poor Responsive Design for Mobile Devices

With the ever increasing use of mobile devices to view the web, Responsive and Adaptive design is critical. Some DIY builders say they are accommodating the needs of mobile views but their reputation for doing so has not yet won many professionals over. I myself did a quick search on the topic and found a Feb. 10th 2015 Weelby.com blog post on the matter. The very page they are actually discussing their responsive design prowess on lacks significant responsive design itself!

In this blog article, there is a long thread of user comments. Most unfavorable. That alone is indicative to me that there are some serious problems.

No Going Back

Template or Theme selection in some builders like Wix are critical to get right the first time because you cannot change themes without completely rebuilding your website. This is ludicrous and this single point alone will keep me from ever giving them a try. Wix also does not allow for access to CSS. So if you had a specific element that you want designed differently than the stock template offers, you’re out of luck Charlie.

A Problem Occurred With This Webpage So It Was Reloaded

Posted on: March 8th, 2015 by BuildMyWeb No Comments

I came across a problem recently that to some degree or other seems to involve the following players in concert:

  • Apple IOS 8.x.x
  • Safari
  • Chrome
  • CSS3 Animations
  • CSS3 Transitions (maybe)

While developing the website, I was viewing it on an iPad4 with IOS 7.x.x. I had no problems. When complete, I asked a few friends to take a look and several of them said they received the Title name as an error. Namely, ‘A Problem Occurred With This Webpage So It Was Reloaded’. The page had broken and would not render whatsoever. One of the friends forwarded me a screenshot and it also read, ‘A problem repeatedly occurred on “http://mywebsite.com”‘.

I started doing some googling for the error message and found the following: http://joelglovier.com/writing/solution-for-css-transitions-crashing-safari/. Joel notes the problem as being related to transitions. I could not replicate his findings. But I DID find issue with CSS3 Animations.

I removed all of the animations in my css file and refreshed the page. It now worked in Safari on IOS 8.x.x. So one-by-one I began adding back in the animations and keyframes until things broke down. It seemed when I called two separate @-webkit-keyframes on the same page, it was breaking down on me. Of course, ultimately I removed one and no problems now.

I post this in hopes that someone else may benefit in some way from the findings when they get stuck with this crappy ‘A Problem Occurred With This Webpage So It Was Reloaded’ bug of IOS 8.x.x. As an aside, Apple, get this fixed please. It’s really annoying.