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.

When is it okay to use CSS to hide certain elements on a page with CSS instead of fixing the results programmatically?

03/26/2014 Aaron Belchamber No Comments

The WordPress community has a lot of experienced experts who have provided a lot of valuable guidance and advice on WordPress.org.  The Magento Community Edition, backed by the Magento community, are just as experienced and fervent supporters.  Open source projects are incredibly proactive.  However, there are times I have encountered solutions, especially if you want to omit something from a page or certain type of page, where the first answer is usually a way to isolate the element you don’t want to show up and make a CSS hack like “.class-of-element-to-hide{display:none}”.

Simple small things can just be CSS’d away

It’s not worth your time for the real small things.  Hiding the date or occasional author byline is one thing, but this seems to a be a growing solution, especially in Magento, to solve issues of hiding certain parts of pages or results.  For instance, you may not want the “Search” bar to show up on category landing pages in WordPress, or perhaps “Rate this product” isn’t appropriate for certain pages, but it is on others.  Basically, here’s the problem I have with the “hide it in CSS” approach.  The biggest problem I have is that you’re not doing it programmatically so the script runs and does the extra work to fetch this content only for you to hide it from view.  This does not sound like a solution, nor does it seem like an efficient approach for your website in general.  Why not take the extra time to build a separate template page for certain content in WordPress, Magento, Drupal, or Joomla?  These CMS platforms all support some way to isolate and customize content, some are very straight forward, and others, especially if you’re using a theme framework, may pose some extra challenges, but it is almost always possible.

If you have to go to the core to fix it, then look for any other solution first!

Yes, you never want to edit the core files of any of these systems, and you never should have to.  Some fixes can get very tricky, however, and other solutions just may not be out there without having to hack the core or resort to CSS hacks.  There are ways to extend and override classes, you have to check on the documentation.  Don’t go the easy way because it will probably haunt you later.  If nothing else, it’s a good exercise to get into these systems and learn how to properly interface with them so you can be a better web developer.  So unless it’s a few pages that you need to hide a few small elements, like a client doesn’t want the post dates to show on certain results, exhaust the programmatic direction first!  “display:none” is not a replacement for exercising good web development code.  You could encounter issues where someone else declared the class of the element you are hiding as “!important” then there’s no telling along the cascade which CSS properties will trump over the other.

Most the time, customizing programmatically is easier than you thought.

Often, it’s an easier fix than you would have thought, even in those theme frameworks.  WordPress has “add_filter()”, “remove_filter()”, which really speeds up customization in templates or custom pages.  “Genesis” from StudioPress offers 90% of the flexibility within its framework that will enable you to customize a lot of behaviors right from the admin without writing any code or attempting to reverse-engineer and isolate a bunch of nested elements through CSS.  Yes, that 10% you can’t easily do in StudioPress might pose some unique challenges, but trying to reduce the number of processes that deliver just complete wasted results to hidden elements is something we should all strive for.  It’s about writing code that is as efficient as possible and planning and thinking ahead — it’s a basic web development principle, at least to strive for perfect efficiency.  I am amazed at how heavy Magento is and how many solutions literally hide half a page worth of widgets and responsive elements, this all took time to query, fetch, process and deliver to the browser, only to end up hidden.

Last word on WordPress customization

So many things can be customized in WordPress pretty quickly by creating a new template page in your child theme folder.  There are other ways, too, ways that are simpler but much more dangerous in the long run in my opinion, but I’ve used all of the solutions.  One challenge was that a client wanted 5 of the most recent posts for each category to show up in the landing page of each category.  Great, except for one, yes, this one they only wanted one article to show in the category and they wanted to show the entire post beneath it.  It was scary easy how fast I found a solution, but no doubt it was NOT the ideal way.  I simply inserted a script with my “” shortcode and took over the global “WP_Query” object and redefined the query!  Yikes, one line and I could alter anything drastically.  There’s probably a reason why WordPress tries to keep the development code out of the content, but in this case, the solution worked like a charm.  Whether this was a valid solution or the WordPress community will now target me as a marked man, time will tell, but in the meantime, the customer is happy…..  In the end, isn’t that also the WordPress way?  Keep the customer happy and do things as  efficiently as possible with as little code as possible?!


Properly tabulating a report of various results from a survey with a MySQL query

03/26/2014 Aaron Belchamber No Comments

Let’s say you have a basic survey database table where it records a response in the “response” field that will contain different values depending on the survey questions.

Now, it’s pretty easy to gather the value of each response and tabulate the quantity of each response in a list like so:

“Yes”   50 responses
“Maybe” 5  responses
“No”    12 responses

Pitfalls and misunderstanding of “SUM” and “COUNT” in MySQL

However, I have encountered some confusion between the use of “SUM” and “COUNT” in MySQL queries.  “COUNT” just counts the number of instances that fit the query abstraction, it’s a way of selecting some data from the entire pool of data out there.  Think of a database as a container filled with…. a bunch of different marbles and coins.  Database queries are supposed to find just what you’re looking for in that container.  What kind of coins?  How many black marbles?  That’s a way of being presented a container full of things and only taking out what you fits what you’re looking for.

So, if you are trying to sum up a tabulation of counts, a “sum” of “counts” just won’t work, they will throw a “#1111 – Invalid use of group function” error message from MySQL.  Why?  Because the values in “response” aren’t numeric and the result from “COUNT” you are trying to accumulatively sum aren’t the result of multiple records (invalid use of group function.)

These are too examples of improper MySQL queries using “sum” and “count”.  After encountering the “group” error, some may think all they would need is to group the field they are trying to count:


SELECT response,SUM(COUNT(response)) FROM homepage_surveys WHERE survey_id=2

SELECT response,SUM(COUNT(response)) FROM homepage_surveys WHERE id=2 GROUP BY response

These queries all return the tabulations correctly:


SELECT response,COUNT(response) FROM homepage_surveys WHERE id=2 GROUP BY response

SELECT response,COUNT(*) FROM homepage_surveys WHERE id=2 GROUP BY response

By aliasing the result of “COUNT(*)” as “count”, this also orders the results and lists them in descending order:

 SELECT response,COUNT(*) as count FROM homepage_surveys GROUP BY response ORDER BY count DESC

Adjusting website behavior for accommodating responsive layouts so content will display instead of website header and main menu on smaller screens

03/23/2014 Aaron Belchamber No Comments

Here’s something I run into time and again.  The website looks great on different devices, you did a great job on that responsive layout.  But something silly happens and if you’re using a theme for your Drupal or WordPress site, they usually didn’t write code to accommodate this flaw in UI behavior.

When someone views your site on a smart phone like an Android or iPhone, when your nav bar and website header (logo and perhaps search box) takes up most of the top of the page.  So, when a user selects a new page, the new page loads, but the content is not seen at first — just all that top stuff at the top of your page.  Now, you can responsively perhaps save this precious display real estate by reworking in perhaps collapsible menus or be creative else where, or you can just make sure at a certain screen size you scroll the website to the top of the content you know the user is looking for.

This is a basic UI (user interface) principle — show the user what they are looking for with the least amount of user effort.  So, below is a simple behavior modification for your website in JQuery.  Just add this code in your footer, make sure you have the JQuery library loaded, rename the menu “li a” to your menu links, rename the “scrollTop” element from “.post-content:first” to the class where your posts start displaying content.  You may have to make other modifications to make it work in your CMS, but this should work with fairly few changes in WordPress, Drupal, Magento and/or Joomla:


// For responsive after button click to scroll to actual content instead of showing button menus up top
jQuery(window).load(function(){
var scrn_w=jQuery(window).width();

if (scrn_w<=800){

jQuery(‘html, body’).scrollTop(jQuery(“.post-content:first”).offset().top-25);

// Fix mobile devices not able to click main button
jQuery(‘li a’).click(function(){

jQuery(this).toggleClass(“menu_selected”);

jQuery(“.menu_selected”).unbind();

jQuery(‘.menu_selected’).click(function(){

go_url=jQuery(this).attr(“href”);
window.location=go_url;
});

});

}

});

An example of browser sniffing: Detect browser so your website can accommodate certain browser limitations or you want to isolate certain behavior and content to affect users only using particular browsers.

03/22/2014 Aaron Belchamber No Comments

Below is a sample of a code snippet I’ve used in different forms to achieve a better website experience for more visitors.  When I have time, I try to unlock more and improve more, after using Google Analytics to see what segment of visitors deserve more attention.  You need to  prioritize, but when so many visitors are on iPhones and iPads, you really need to test your website on Safari on those devices.  Often, Chrome and Safari seem to agree a lot when it comes to displaying web pages, but sometimes you need to fix those few differences — often the most important things like navigation buttons or your header logo will look displaced, or worse, not even show up.

You may find you need to just clear a div after others have floats, you may find you need to delve deeper and isolate IE 9 or Chrome for certain issues, both with CSS, content, OR behavioral code (like JavaScript or JQuery.)

Here is an example of a simple “browser sniffer” script in JavaScript.  Of course, you would replace the “alert” commands and put your real action based on the conditions, but it should be enough to get you started.


<script type="text/javascript">

var browserInfo = navigator.userAgent.toLowerCase();

if (browserInfo.indexOf(‘safari’) != -1) {

if (browserInfo.indexOf(‘chrome’) > -1) {       alert(“Chrome″);     } else {       alert(“Safari″);     }

}

</script>

 

Since web browsers are different, shouldn’t you expect your website will look different on different browsers?

Yes.  Safari will often show your beloved gradients you put on your website upside down.  Don’t worry, it’s not you.  It’s happened to plenty of people and there are plenty of explanations like “Safari doesn’t understand gradient angles in CSS.”  But Internet Explorer 10, FireFox and Chrome does?  Yes, it will happen to you, I’m sure you’ve discovered that it is IMPOSSIBLE that your website will display exactly the same in every browser in the world on every different computer system.

Some reasons are really good and the flexible and proactive (sometimes reactive) browser market has also empowered web users to allow them to have access to tools to improve their web experience.  The reasoning goes, just like you can’t make sure your website visitors don’t wear glasses, you should be happy those who need to wear glasses are wearing them so they can actually read and appreciate your website.  The same goes for browsers and their openness to user customization.  Many people with poor eyesight will zoom your text out.  What about those who can’t see?  There are accessibility tools to help the blind use the web and these are all good things.

So, it’s challenging to keep up with all the new browsers and CSS3, HTML5, ICANN standards, and it will continue to become more complex.  Things will accelerate, so be happy that we’re all using the web and have tools available that will allow us to improve not only visitors to our website and their experience, but our own experiences on the web.  It’s a good thing Google, Bing and Yahoo are always trying to improve their search results for us, it’s evolution of something that still has so much more potential to unleash.  Also, it’s not easy, so some people won’t have the stomach or the attention to detail, this is a growing niche market as a web developer.  Don’t under value the need to fill a niche in a world where everyone’s jumping in!

 


Need multiple contact forms on your WordPress website?

03/16/2014 Aaron Belchamber No Comments

FS-Contact-Form-Screenshot-1

There are plenty of contact form plug-ins for WordPress.  I’ve used a few that I thought would be good but turned out to be barely functional, clunky, and/or buggy.  There are a couple of very reliable and simple to customize contact forms, however.  I have deployed numerous sites that need to handle multiple types of contact forms and have been impressed with the reliability of one in particular called “FS Contact Forms”.  The “FS” is short for “Fast and Secure”.  It has a very simple interface and with a single short code you can deploy your contact form.  It has built in validation, Captcha, integration with third party scripts, and best of all, it seems to always work as expected — another feature many WordPress plug-ins seem to lack.  The instructions for creating multiple contact forms in pages, posts, and even widgets are extremely easy to follow.

It is recommended to rely on the WordPress community regarding the reviews and the number of downloads a plug-in receives, this is usually a pretty good indicator of its reliability.  You will see these results when you search for new plug-ins.  I sometimes wish that you can sort and filter plug-in results better — I’m sure there’s a plug-in for that, too! So if you are looking for a reliable solution and you have a need to deploy one or more custom forms that can also accommodate file uploads, this is the best WordPress plug-in that I have come across.  The interface also allows you to integrate seamlessly into Constant Contact, though I have not explored this option, they probably have something in common — what that is is no concern of mine I’m just reviewing a product based on the merits of its performance.

As it stands, I haven’t come across a better plug-in with as many features that has been deployed so reliably as “Fast and Secure”, so if you are looking for a simple solution to deploy your custom forms, just search “FS Contact” in your WordPress admin “Add New Plug-ins” page, or visit their website at:  http://www.fastsecurecontactform.com/