Category: Articles

Main articles page for all things web tools and code. A free resource for the public containing information and tips.

Looking for a PHP developer, a Symfony expert or Wordpress web developer? Perhaps a business system architect that specializes in scalable MySQL business system design and deployment? We have reliable, fast and professional developers that meets your organization’s needs! Contact us for your next web development project and schedule a free consultation today.

Preventing double form submissions with Parsley form validation

07/29/2016 Aaron Belchamber No Comments

Thanks to Jon Leigh for this snippet!  If you use Parsley form validation, a reliable form validation library, here’s an easy way to prevent double submissions of forms.  This disables the form submission button only once the form passes Parsley’s form validation.

$.listen('parsley:form:validated', function(e){
    if (e.validationResult) {
        /* Validation has passed, prevent double submissions */
        $('button[type=submit]').attr('disabled', 'disabled');
  }
});

I’ve implemented this in a few different places and it works flawlessly!  This is especially useful for mobile device users on slow Internet connections where double submissions can be more prevalent.  I hope this helps some businesses out there, it’s helped WordPress Developers and Symfony experts alike improve visitor UX while reducing complaints from people who may have been charged twice.


Mesocolumn WordPress child theme fix after updating theme

05/15/2016 Aaron Belchamber No Comments

It was bound to happen, the very reliable Mesocolumn WordPress theme finally made an entry in a website’s fatal error logs.  I make a habit of examining website error logs, if you have a business with a web department, insist that they regularly scan and check your website error logs or subscribe to a service or has a script that can report 500 errors immediately.

Here was the error that cropped up:

[22-Apr-2016 09:27:05 UTC] PHP Fatal error: Call to undefined function get_theme_option() in /webroot/prolificfutility.com/public_html/wp-content/themes/mesocolumn-child/footer.php on line 119

500 server errors are never pleasant, it’s a fact of life if we don’t dedicate QA time to test, test and then test the sites again and again.  There is a point of diminishing returns of dedicating too much time to testing because that takes time away from web development, you know, actually creating coding solutions?!

Fixing WordPress 500 errors

This was an easy fix, because the error was easy to spot in the logs — get_theme_option function was undefined and there was a condition in the footer that called on it, so I simply wrapped the condition throwing the error first with this check:

if (function_exists('get_theme_options')) {
 // execute other code that was in the child theme here...

It’s not an ideal fix, but since I didn’t have time to investigate further, at least the page would continue loading if the get_theme_options() function was actually deprecated from the theme during a recent update.  It’s all about prioritizing your web development tasks to make sure you are optimizing your code production and in the context of other due dates, projects and considering the ROI of this task, it’s way down on the priority list.  So far down it will probably never be addressed since, truthfully, there are usually much more important and profitable web development tasks to perform.  Perhaps the next update it will fix itself, there’s no harm in doing an extra check to see if the function exists, even if they bring it back.

The more important benefit is that the page continues to load without throwing a fatal error, which is not only bad for SEO, it’s bad for the UX of every visitor and that’s always something that’s top on the priority list!


GeoTagging HTML pages, and even geotagging outside of earth, now that’s thinking ahead

05/14/2016 Aaron Belchamber No Comments

I was looking up the newest microformats for the latest SEO tips, specifically geo location, since geo location helps search engines with a particular content relevance score, mainly an organization or structure’s location.  Helpful info, it’s probably becoming even more relevant for search localization.

Obviously, if you are in Rapid City, SD looking for a donut shop, it’s much easier to discover the best donut shop there, Jerry’s Cakes and Donuts (by the way, Jerry’s, your website is truly awful!) as opposed to some other donut shop like that place called Dunkin Donuts, that for some strange reason doesn’t have a location in Rapid City South Dakota, nor anywhere in South Dakota for that matter.

I’m shelling out a lot of free advice in this post, but gee, Dunkin’s do you think maybe there’s a market for people who like coffee and donuts in South Dakota?!  You might want to do some market research there.

Here’s the gist about meta geotags from Wiki:

ICBM method

This info is from the Wiiki page: ICBM address

The GeoURL[9] standard requires the ICBM tag[10] method which is used to geotag standard web pages in HTML format:

<meta name="ICBM" content="50.167958, -97.133185">

The similar Geo Tag format allows the addition of placename and region tags:

<meta name="geo.position" content="30.167958;-87.133185">
<meta name="geo.placename" content="ABC Rural Municipality, Sample, Canada">
<meta name="geo.region" content="ca-mb">

RDF feeds

The RDF method is defined by W3 Group and presents the information in RDF tags:[11]

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"> <geo:Point> <geo:lat>35.701</geo:lat> <geo:long>22.552</geo:long> </geo:Point> </rdf:RDF>

Microformat

According to the latest microformat documentation, the Geo microformat allows coordinates within HyperText Markup Language pages to be marked up in such a way that they can be “discovered”.  An example of such HTML tags looks like this in your page body:

<span class="geo">
<span class="latitude">50.167958</span>
<span class="longitude">-97.133185</span>
</span>

and it will likely display on screen like this:

50.167958; -97.133185

 

I was surprised to see HTML 5 doesn’t already incorporate data-longitude and data-latitude as an attribute now, but that would be too clean and easy, nothing like a bunch of really smart web people making things more complicated than they need to be (which isn’t very smart, I’d like to point out.)

Also, I found out that there is a proposal to extend Geo to cover other bodies, such as Venus and the Moon.  Now that’s planning ahead.  I only hope we get how to properly geotag all of earth properly first.

The Wiki page also cites Flickr as an example of providing geographic data for any geotagged photo in any of the formats mentioned above.  I only found out from a co-worker weeks ago that Flickr’s still around.


AMP: Accelerated Mobile Pages basic information and resources

04/23/2016 Aaron Belchamber No Comments

A quick shout out to Chad Lio who brought AMP to my attention about three months ago.  The web is moving so fast, there’s so much innovation and evolution going on, how do companies, web departments, and web developers keep up and prioritize?!  Really, you can’t keep up with it all, but you can learn enough to make an informed decision to figure out where best to allocate one’s time and resources.

After all, you can’t manage new web projects and initiatives if you don’t understand what impact they will have on your website traffic and bottom line.  In the end, that’s what it’s all about.  Still, a while back, I read some articles about AMP and wasn’t quite sure what to make of it.  One thing’s certain, when Google decides to get into the mix, we best all pay attention.

I encourage business owners and web developers to explore the information about AMP and come to your own conclusions.  Sooner or later, we will all have to implement it on our sites.

My own experience with AMP so far

As a business systems architect, one of my other careers is an open source PHP web developer here in Jacksonville.  When it comes to the web, you can’t afford to be idle, you have to constantly be curious, learn and experiment.  So I came to the conclusion that it’s usually a good idea to be an early adapter of these things if for no other reason than to prepare to implement and understand its limitations, among other issues we may encounter.  It makes sense for a business systems architect to know the solutions and issues a company may face before the owner asks.  Who wants to look ill-informed?

Sure enough, what I’ve learned so far is that AMP isn’t yet fully mature — but accelerating mobile pages?!  That sounds like a great idea to me, especially when page load directly speeds affect your website’s SERPs!

So simple in WordPress, but limited

So, the first thing I did was notice that Automattic, the makers of WordPress already has a plug-in, so I tried it out.  It works great, you just activate it, but it doesn’t support AMP for pages or categories yet.  Another more effective plug-in I tried was Page Frog, it created AMP pages seamlessly.

To check your website, if you have a Google Webmaster account, it’s a little hard to find the AMP validation tool.  Here’s a quick link to just pasting in your website domain to validate it for AMP.

My conclusion about AMP

My conclusion is that you should phase AMP into your websites, there are still unknowns about how it interacts with certain themes that may interfere with certain Javascript and theming elements you might otherwise expect to be delivered to mobile that may be excluded or error out.  PROCEED WITH CAUTION with AMP for now.  Try the WP AMP plug-in if you have WordPress and for non-CMS pages, start working in the AMP markup, it’s really not a lot of extra code and it can reduce load on your site at no extra charge!


Pre-Compiled CSS: LESS & SASS — Just learn them both, they’re easy

04/21/2016 Aaron Belchamber No Comments

Bootstrap left LESS and went to SASS when you upgrade from version 3.0 to version 4.0.  If you just know LESS, it’s not a big deal, really, to learn SASS.  They’re both pretty similar and end up producing the same results:  cleaner and easier to scale and use CSS.

There are a lot of tutorials about LESS and SASS, you shouldn’t be too concerned.  If you’re not a command-line guy, there are utilities and software to save your .less, .sass and .scss files into .css in the same place you expect them to be.  Also, it’s not recommended using the server listener utility to pre-compile your CSS from these source files on the production server because it’s processes that, like Symfony’s Assetic where assets get compiled and packaged in dev, belong only in the dev environment.  So by the time you are ready to push your LESS and SASS live, it’s simply part of your code deployment to the live site, not a big deal.

Here are some excellent links and tutorials that helped me understand LESS, SASS and their main differences.  In the end, they’re just pseudo languages designed to create more consistent and clean CSS.

Video about LESS, pre-compiled CSS

Here are some useful links and downloads for learning more about LESS

http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

http://winless.org/ – this is the free software to create LESS in Windows

Koala: A useful editor for LESS, SASS and more

I suggest also trying Koala:  A free, multi-purpose CSS pre-compiler editor

Other useful LESS and SASS resources

http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/

http://sass-lang.com/documentation/Sass/Script/Functions.html

http://www.webdesignerdepot.com/2013/11/the-beginners-guide-to-sass/

http://callmenick.com/post/an-introduction-to-sass-scss

http://www.zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/

http://www.hongkiat.com/blog/sass-vs-less/

Using Compass and SASS together

http://www.zingdesign.com/the-sass-and-compass-tutorial-for-absolute-beginners/

Last comments about SASS and LESS

It’s sometimes overwhelming, just trying to keep up with the fast-paced changes and new emerging tools and libraries out there.  SASS and LESS are quite similar and produce the same results in the end.  I am favoring SASS because of how it is trending and also how the design is a little less cumbersome.

By “design” I’m referring to the language syntax and structure, it’s a little easier to create more with less, but not with LESS, SASS.

Okay, I was trying to be a little “cutesy” above, but it is true.  SASS is winning the CSS pre-compiler competition and competition is exactly what this is, which is a great thing for the web, web developers and all users of the Internet because competition like this is what will make the Internet better.  From here, more tools, methods and languages will likely emerge in the future, perhaps just replacing CSS with something more programmatic, flexible and efficient.  Keeping your design directives separate from your code is a good thing, but these design directives really need to be modernized.