1. What function in PHP’s standard library is used for converting characters in a string to HTML entities?
2. What function does the opposite?
3. By default, what character encoding is used by each of these functions?

If you can answer these questions without looking at the documentation, you’re doing better than I am.  It’s symptomatic of the haphazard design of the standard library that answer to the first question is htmlentities(), whereas the second is html_entity_decode(), which “converts HTML entities in a string to their applicable characters.”

As if this naming inconsistency weren’t inconvenient enough, the answer to the third question raises real problems because each function has different default character encodings which change depending on which version of PHP you’re running.  htmlentities() defaults to using ISO-8859-1 encoding, but according to the documentation, “this default is very likely to change in future versions of PHP; the programmer is highly encouraged to specify a value.”

The situation with html_entity_decode() is even worse.  Prior to PHP 5.4, this function defaults to giving its output in ISO-8859-1 encoding but as of that version has changed the default to UTF-8.  Since I prefer to encode all text in UTF-8, “ ” and other entities will be converted to invalid characters that will show as a question mark or box if the encoding is not specified.  The following code will show how this will cause problems when changing PHP versions:

echo htmlentities(html_entity_decode(' '));

Under 5.3, this will output “ ”, while under 5.4 it will give “Â&nbsp”, showing how htmlentities() is still trying to interpret its input in ISO-8859-1, while html_entity_decode() is now defaulting to UTF-8.  You can simulate this result on an earlier version by setting the encoding for html_entity_decode() to UTF-8 and leaving the encoding for htmlentities() unspecified (ie. ISO-8859-1).

It seems that the only practical solution here is to define the character encoding explicitly, otherwise the behaviour of the HTML entity encoding/decoding functions could vary from installation to installation.  If you want to use UTF-8, even if you’re running a version <= 5.3 and don’t care about future compatibility, you’ll still have to specify the encoding every time.

I was born into a family of five; my parents, my two siblings and myself. My older sister is almost finished a nursing degree and my genius of a little brother moved to NSW to study medicine. So I’ll be the only one of my siblings not saving lives haha.

Through high school (despite some health issues) I was very much a part of the nerdy group - spending most of my time on the internet, playing around with various computer programs and playing video games with friends. I learned very quickly how to prank my friends using their computers and get around a few of the restrictions the teachers put in place. Simply put, computers have always been my passion (and at times my frustration).

Last year I was living in Brisbane studying animation at Qantm College, but due to the recent state of the animation industry in Australia and my reluctance to move overseas, I decided not to continue. I returned to Toowoomba and began working a temp job whilst looking for a new direction. It was then that I found PX Webdesign and I’ve been working here and loving it, ever since.

Due to the massive influence it has had on my upbringing, I have always considered myself to be a “child of the internet”. The internet has been able to answer any question I had to ask and has provided my with access to information and entertainment that I have craved over the years. At one time or another I’ve been mildly addicted to a few memes and many websites. The most recent being my ongoing addiction to YouTube and Facebook. (having them both on my iPhone really isn’t helping). I’m honestly not sure how I would survive without the internet and I’m loving the chance to be a part of PX and as one of my friends phrased it, “make some internet”.

Web design has proven to be a great industry for me and one I’m very happy to have been able to get into. The combination of technical aspects (coding languages) and design elements continues to interest and intrigue me. My browser of choice is Firefox. My favourite operating system is Windows 7 and my favourite thing about web design is the potential of HTML5 and CSS3.

The team at PX Webdesign have been very friendly and supportive, welcoming me into their ranks. I look forward to my ongoing work with PX and my ability to work with and learn from a great team of developers and designers.

The great thing about these font providers are they ensure web designers are using quality fonts with full browser compatibility. Implementation is damn easy and they’re really useful if you want to change the appearance of body copy to a more specialized font.

Most designers would ask why bother self-hosting any fonts when you have huge repositories of beautiful typefaces available for a small subscription or in some cases free.

This being the case, I thought I’d experiment developing and hosting my own custom eCommerce icon font set.

A bit of a background on Shopper Std

As the font’s website describes, Shopper Std is a hosted font substitute for eCommerce icons. The beauty of hosting the icons as a font rather than storing them as images means we can style each icon like text.

Laying out each letter was really simple. Using High Logic’s FontCreator, I imported each monochromatic bitmap symbol from my Photoshop document and individually resized them to fit the provided guides and grid system. The program allows you to render your typefaces on the fly meaning you save directly as a TrueType Font and reopen it later to make edits. At a tiny 9kb, designing custom fonts in this program is quick, easy and is perfect for amateur typographers like myself at only $79.

I designed the font to use many of the common icons you’ll see in online shops including a trolley, auction gavel and credit cards.

The beauty of the font is we can resize letters to any size, recolour them, add a shadow and even a gradient without touching Photoshop. Also feel free to use the icons as many times as you like on a page; drawing from a typeface reduces browser requests which means your website will fly.

Will @font-face work in all browsers?

Most designers unfamiliar with self-hosted fonts think there isn’t widespread support in browsers. All browsers except Internet Explorer render TrueType Fonts (.TTF) but all including IE can show Embedded OpenType (.EOT) fonts. I simply converted the TrueType format to Embedded OpenType and now we have IE support. Here’s the CSS I used to link the font to my website.

@font-face  {
font-family: 'Shopper';
src: url('font/Shopper-Std.eot');
}

@font-face {
font-family: 'Shopper';
src: url('font/Shopper-Std.ttf') format('opentype');
}

The first call targets all browsers including Internet Explorer. The second @font-face declaration overrides the original call, but it only targets modern browsers (Firefox, Safari, Chrome and Opera) by using the OpenType format attribute.

Conclusion

Self-hosted custom webfonts can be useful for adding minor styling to your website but I’d personally shy away from using it for major headings and body text.

For more information on the font itself or to implement it on your website, visit http://www.shopperfont.com/.

I am the eldest of two boys and six sisters - this family may seems huge but it was lots of fun growing up with that many sisters. I had a significant number of test ‘Guinea pigs’ for my pranks and eye-wetting jokes - hope none of them ever read this!

If I have the chance to revisit my old home I would be more than willing to but my childhood wasn’t always fun. My native country is a little one on the west coast of Africa called Liberia which has been affected by civil war for over eighteen years. At the age of eight I fled with my family to a neighbouring country called Guinea where we lived for ten years. These ten years I consider the hardest in my life so far and in early 2000 civil war also broke out in Guinea which forced me to look for refuge in Ghana.

It was in Ghana that my interest in computing and electronics actually surfaced – but it was by no accident. I was in one of the world’s biggest refugee’s camps, Buduburam and communicating by phone or e-mail was not cheap. I needed a way to have free access to computers so I started researching online for tutorials, reading blogs or anything that has to do with granting someone free computer access. Over time I was able to build my skills and after saving some funds, I enrolled at a computer institution called IPMC, Intercom Programming and Manufacturing Company. Embedded system development was my major at IPMC but after two semesters and hanging with other students, I came to like web and application development as well.

On November 17, 2006 I moved to beautiful Australia. The ease of communication, better living condition and friendly locals have moved me to call this place my home. I now have the privilege to complete my education and presently am doing that through the University of Southern Queensland studying computer science with a major in applied computer science and network security. After trying very hard to get a job in the industry but to no avail, I worked as a labourer for four years.

In August this year, 2011, I was offered an entry position at PX Webdesign as a web developer.
Working at PX Webdesign is one of the best things that have ever happened to me. My co-workers are all awesome and the working environment is state of the art. Most importantly, PX gave me the opportunity to do what I love doing and I thank everyone at PX Webdesign for making me feel as part of the team and welcoming me with open hands.

I’ve been reading a lot of tutorials on CSS animations in particular but haven’t come across many practical applications of these properties. Sure, it can be wacky to make a GIF fly around the screen in pure CSS but these new effects need to be able to enhance the user experience.

Here’s how to create a quick animated bar graph using CSS keyframing. For the sake of demonstrations, I’ve made a simple Yes or No poll.

The Result

View Demo »

The HTML

<body>
<h1>Do you believe in horoscopes?</h1>
<h3>Yes</h3>
<div id="yes"><p class="percent">35%</p></div>
<h3>No</h3>
<div id="no"><p class="percent">65%</p></div>
</body>

All very self explanatory. The percentage classes are going to render the animation.

First Part of the CSS Animation

.percent {
height: 20px;
text-indent: 5px;
text-decoration: none;
color: #fff;
-webkit-animation-name: results;
-moz-animation-name: results;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}

Here’s where we setup the results bars. The first animation property animation-name lets us declare which animation should be played. This is similar to calling a function in Javascript. The other animation properties allow us to configure the animation speed, number of iterations (1 to infinity) and physical properties. Notice each property is prefixed with -webkit or -moz for webkit supported browsers and Firefox. I’ve intentionally left out the straight animation call as there doesn’t seem to be any support for it at this stage.

Second Part of the CSS Animation

#yes {
width: 200px;
}

#yes .percent {
background-color: green;
}

#no {
width: 500px;
}

#no .percent {
background-color: red;
}

As I mentioned, this is a quick demonstration so I’ve hard-set the widths of each poll and made the Yes bar green and the No bar red. If you were to seriously implement it, the polls would be sent as a variable and the widths would be worked out and output as inline CSS or possibly Javascript.

Third Part of the CSS Animation

@-webkit-keyframes results {
0% {
width: 0;
opacity: 0.5;
background-color: red;
}
90% {
width: 105%;
}
100% {
width: 100%;
opacity: 1;
}
}

@-moz-keyframes results {
0% {
width: 0;
opacity: 0.5;
background-color: red;
}
90% {
width: 105%;
}
100% {
width: 100%;
opacity: 1;
}
}

After countless tests, it appears these 2 CSS functions need to be declared separately. As you can see I’ve setup the results function we setup earlier and declared properties based on a percentage. These are processed as percentages of the overall animation – similar to frame-by-frame animation. 0% is the first frame in the animation, 90% is almost at the end and 100% is the end of the animation.

The best part is you’re unlimited in how many frames you can declare! Using the principles of squash and stretch animation, I’ve set a keyframe at the 90% mark which increases the width of the bar a touch more than where it sits at 100%. This gives the animation some snap back.

Click here to view a demonstration »

On its own, CodeIgniter only allows for one group of components (models, views, controllers, etc.) Modular Extensions – HMVC is a set of modifications to CI which introduces modules, which are “groups of independent components… arranged in one application sub-directory that can be dropped into other CodeIgniter applications.” This kind of modular separation is desirable for a number of reasons. The best reason for using modular programming is probably the separation of concerns that it provides. First, by breaking down your features into modules, you can more easily know the location in your source tree of the code for any particular feature. Most important, however, is the separation between core and module code – you don’t need to worry that changing something in one module will affect core code or any other modules.

The concept is particularly useful to us at Clear Pixel, where most of the development work we do is on our proprietary CMS “Breeze.” Because this system is deployed to a number of sites, each of which requires a different combination of modules, we need a way to distribute to each site only the modules each require along with the core code shared between them. The ability to separate the components required for a certain feature makes it easy to package the minimum code required for a particular installation. Applications can provide install and remove features for modules to allow for users to customise. Even if your application doesn’t require this kind of per-installation customisation, modules still allow you to easily add or remove features without having to worry about complex flow-on effects. Because Modular Extensions implements a hierarchical module system, several modules which need to share code between themselves, but not with other modules, can be created as sub-modules of a parent module containing that shared code. Note also that you can also use “Modules::run(’module/controller/method’, $param, $…)” to return the output of a module controller method, which is useful for displaying the output of several modules on the one page.

The process of setting up CI with Modular Extensions is simple. At the time of writing, the latest version of CodeIgniter is 2.0.3 (download). Extract the files to a directory which can be served by your web server and verify that everything is working by navigating to its URL – you should see the default CI “welcome” page. The latest version of Modular Extensions – HMVC can be found in the project’s BitBucket repository (download). Since the instructions on the project’s site are quite straightforward, I won’t reproduce them here.

For the sake of convenience, you can download this copy of CI 2.0.3 with Modular Extensions already installed.

Download CI 2.0.3 with Module Extensions (2.2MB ZIP)

Reset stylesheets can be more than a bunch of hacks setup to fix a website layout. They can also provide a set of easily accessible classes for editing content as well as enhance the user experience without cluttering up your primary stylesheet.

Recently, we’ve been drastically cleaning up our reset CSS to add functionality and makeover elements so I thought I’d share a few ideas.

Antialiasing

* {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

Font smoothing works in Firefox, Opera, Safari and any other webkit-supported browsers. You’re given 3 options for rendering text - none, subpixel-antialiased and antialiased. Most browsers render the text subpixel-antialiased but I find antialiased makes it a bit clearer. Tiny text smaller than 6px or so will look crisper if you change font-smoothing to none.

Text Selection

Typographic refinement never goes astray in web design. Surprise visitors when they select a paragraph of text with styled text selection.

::selection {
background: #000;
color: #fff;
}

::-moz-selection {
background: #000;
color: #fff;
}

The ::selection property enables the styling for Safari and Chrome whereas ::-moz-selection targets Firefox. The downside is your IE buds still won’t see this cool effect but no doubt they’re used to missing out.

Transitions

Add a transition time to all links and hoverable items to give the site an elegant, modern look.

a, img {
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
transition: all 0.15s ease;
}

This amazing snippet of markup can be used to brighten any element without the use of JavaScript. You have heaps of transitional options as well as control of the duration. Apply this effect to your site’s main menu and users will have to right-click to make sure it wasn’t built in Flash.

Commenting

It’s surprising how many web designers leave reset stylesheets completely uncommented. Your CSS will look more well-kept if you bring over the comment tags from your main stylesheet.

Positioning

One thing I’ve learnt on the job is to use quick-reference positional classes to save time when writing markup. Here are a few examples.

.left {
float: left;
}

.right {
float: right;
}

.clear {
clear: both;
}

.center {
text-align: center;
}

Now you can quickly apply a float, a clear or align text by simply adding a class to a HTML element. I wouldn’t go overboard with this as you don’t want to clutter up your now well-structured reset stylesheet.

By adding default classes and modern browser styling, you’ll turn your dull reset CSS will into a simple style guide.

After plenty of searching I managed to come across the certain factors that need to be in place for this to happen and hopefully this might just one day help someone else out.

• Client using IE6
• Form needs enctype=”multipart/form-data”
• Textarea value needs character that MS Word creates that is three dots

Then upon submitting your first post value will dissappear. Here is a link to a PHP Bug thread covering the issue - and it’s not PHP specific, its purely IE6. Below is the sample code that will reproduce the error:

<form method="post" action="whatever" enctype="multipart/form-data">
<input type="text" name="field1" value="1">
<input type="text" name="field2" value="2…">
<input type="checkbox" name="field3" value="3">
<input type="submit">
</form>

All I have done to stop it in the meantime is added a ‘fake’ hidden post value at the start so it gets destroyed instead of a value that is actually required.

We have started re-writing it now on the CodeIgniter framework along with giving it the extra dimension of multiple user accounts so you can signup to register a new account as this will be a hosted web application service. Some of the features include the following:

• Client contact management (phone numbers, email addresses etc.)
• Project management
• Project job management
• Task/todo list management

Whilst we don’t have an exact release date, we would hope with in the next 3 months will be the likely release date. If you do want to know more, be certain to visit the site and send us your email address to be updated when more information is available.

One of the common approaches these days is to use a image verification system (usually called Captcha) but this can become very  annoying for an end user especially when it is difficult to read. Plus, these forms are usually enquiry/contact forms which are very critical to help generate sales for the client so making them unattractive and difficult to a end user can reduce the number of enquiries sent.

Our Solution

One of the common traits of the scripts out there that are auto spamming all of these forms is that they are done through very simple methods and don’t support features that most broswers do such as Javascript - we can use this to our advantage.

In your form create a hidden input and make its value empty such as the sample code below:

<input type="hidden" name="js_check" id="js_check" value="" />

Now create a javascript file that is loaded on the form page and insert the following code:

Raw Javascript

document.getElementById('js_check').value = 'pass';

or jQuery (in document.ready)

$('input[@name=js_check]').val('pass');

Then all you need to do is where the form is posted to is check that $_POST[’js_check’] is equal to ‘pass’. If it isn’t then send the user back to the form and inform them that they need javascript required to complete the form.

I would usually jump up and down here and say “oh that’s not right to depend on javascript” but honestly speaking the stats show that now 95% of people have it enabled and as long as you redirect them back informing them that they need it enabled they will know why the form was not sent.

For the amount of spam this stops for the minimal implementation time and small amount of users that maybe affected I think it is well worth adding to your forms instead of a Image Verification method.