Archive for the ‘HTML and CSS’ Category

HTML 5 and CSS 3 are the future of markup and style language on the internet, however currently HTML 4 and CSS 2 are dominating. HTML and CSS provide critical abilities to the web, however many issues with them exist which is why they have and will continue to go through many revisions.

HTML 5 is gaining popularity as a replacement for Flash, however this assumption is premature and many Flash capabilities will not be able to be replaced by HTML 5.

jQuery: AJAX File Uploads made easy

jQuery is an incredible Javascript library. It allows programmers, as well as other web developers with less programming experience, to develop high-end Javascript and AJAX features on their websites. Many situations require or benefit from software written from scratch, but other situations do not. For most Javascript functionality, writing your code from scratch isn’t worth it or necessary, and that’s where jQuery comes in. jQuery isn’t necessarily easy. The more customization you want, the more specific your requirements, the longer it will take you to get it right. But even if you have the time and experience, jQuery doesn’t do everything for you.

Many people are curious about how to perform a full AJAX file upload using jQuery. Some users have noted that HTML 5 supports AJAX file uploads, however most websites aren’t written in fully support HTML 5. Other users have also shown exactly how to do this using methods such as hidden iframes, and a Javascript XMLHttpRequest() object.
(more…)

jQuery: Tips for Beginners

jQuery is an incredible Javascript framework, but it can also be a bear to learn, and a bear to write even for an experienced user.

Writing Javascript and AJAX code from scratch can be extremely time consuming, and it’s important to keep inn mind that Javascript only accounts for 1/5th of your web application, maybe less, and wasting too much time on your Javascript should be avoided. In addition to Javascript, you’ve got CSS and HTML to write, as well as your server side language and DB language (ie. PHP and MySQL). That’s 5 language to manage, 5 languages to incorporate, and that’s without even considering mobile apps.

On top of that, you’ve got 4 major browsers to test your code in (IE, Firefox, Chrome, Safari), and it all becomes a bit of a blur when you’ve been working on a project for some time. (more…)

jQuery .load() complete callback function doesn’t work properly

jQuery’s .load() method supports an optional callback function called when the request is complete. However, you might find that the complete callback function doesn’t work properly.

The jQuery .load() documentation shows 2 optional arguments to the .load() method.

The first optional argument is “data”, which is described as “A plain object or string that is sent to the server with the request.”

The second optional argument is “complete”, which is described as “A callback function that is executed when the request completes.”.

The examples on that page present some confusion, by showing this example:


$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});

The problem with that example is that the “complete” callback function is shown as the 2nd argument, not the 3rd. (more…)

jQuery: XML Errors in Firefox when using load() and other functions

If you are using jQuery, and you’ve noticed some errors appearing in Firefox, it might be a very simple fix.

The errors resemble the following:

  • “not well-formed” (maybe referring to a specific piece of returned HTML)
  • “mismatched tag. expected </input>” (or “expected </option>”, “expected </td>”, “expected </br>” etc)

Chances are you are using jQuery’s load() or get() or ajax() functions and sending a response back to jQuery via PHP or another server-side langauge. (more…)

jQuery: show hidden layer not working using show() or fadeIn() functions

Q: Using jQuery, I cannot get a hidden layer to show or hide using the $(“#layerID”).show() or #(“#layerID”).fadeIn() functions.

A: Although there could be several reasons for this, one common problem is that you have set your DIV’s style attribute to specifically hide the layer using “visibility:hidden;” and “display:none;”. In many Javascript implementations, in order to change that value, both of these attributes must be set explicitly in the “style” attribute. For example:

  • <div id=”layerID” style=”visibility:hidden;display:none;”>text</div>

Traditionally, you would use javascript to modify the style attribute in order to show the layer.

However jQuery is slightly different. If you explicitly set the style attribute to “visibility:hidden;display:none;” then jQuery will not be able to show the layer. The solution is to remove the visibility attribute from your style tag, so only the “display:none;” attribute is left. For example:

  • <div id=”layerID” style=”display:none;”>text</div>

An alternative would be to use jQuery to hide the layer upon page load. For example, here is your DIV: (more…)

SEO Tip: Rich Snippets (Microdata and Microformats)

Google has been pushing a new way of organization information on the web. In an attempt to parse out more detailed information from the wide variety of stuff on the internet, they have been encouraging the use of “Rich Snippets” – and are specifically recommending microdata formats for data.

Why do rich snippets matter to Google? (more…)

Google Sitelinks: Customize the subpages which appear in the Google search results

For websites that come up in a Google search, you might notice that sometimes Google displays links directly to a few subpages of the site. This is usually about 2-6 subpages.

It’s kind of a mystery as to how Google chooses which subpages to display, and many people wonder “How can I choose which subpages Google displays?”

That’s not an easy answer, but we’ll give you a few hints: (more…)

PHP Frameworks: What not to use

Types of PHP Frameworks

Frameworks existing for many purposes and are written in many languages. PHP frameworks come in many shapes and sizes, so it’s important to match your requirements and your development capabilities with the framework.

If you are very picky, you’ll need a framework that easy to customize. If you don’t have any development resources, you’ll need to choose a framework that provides all the functionality you will need.

Frameworks can be “large” or “small”, “light” or “heavy” and everywhere in between. For example, Joomla and Drupal are “large” and “heavy”. They contain lots and lots of code, lots and lots of built-in logic, and accordingly have lots and lots of problems. On the other hand, frameworks such as CodeIgniter are “small” and “lightweight”. CodeIgniter is minimalistic, and some would consider it more of a code organization tool. WordPress isn’t strictly a framework, but works great as a framework and isn’t as “small” or “lightweight” as CodeIgniter, but it isn’t “heavy” either. (more…)

Glossary: Deprecated (aka. Decapitated)

“Deprecated” is a term used in programming to describe when a function or other feature should no longer be used.

Because of the fact that the term “deprecated” is fairly industry-specific to programming, we choose instead to call it “decapitated”. We think this is a more accurate description.

“Deprecated ” is often used in PHP because of he numerous iterations PHP has gone through. PHP describes many functions as deprecated because they were used in PHP 4 but were dumped in PHP 5. PHP also has many significant upgrades between version – subversions that have many more differences than average. PHP 5.3 is a great example of this, but there are many more significant sub-versions. (more…)

The Rule

Simplify.