J.me

Responsive layout testing

While working on a responsive website, testing it could be tricky. The usual way (and effective) is to resize the browser window and there’s many plugins on the browser that do just that. Another way is to use an available tools on the web, many of these are awesome, like The Responsinator and Screenqueri.es. Another one that is also my favorite is RWD Bookmarklet by Victor Coulon.

These were all cool and I frequently used it. However, these tools were made for testing on mobile and tablet display resolution, what if, you want to test a laptop or desktop resolution as well? In my case, I have 1280×800 laptop, so I never knew how the website will look on higher resolution screen. There’s also many display resolution on mobile now to consider, not just iOS resolution.

And so I created a simple tool to test responsive website, with a wide range of resolution to select, from mobile to tablet to desktop. Also HDPI display is common now, so I added a device pixel ratio selection that calculate the effective resolution. For example, Motorola RAZR have QHD display with pixel ratio of 1.5, so the effective resolution is actually 640×360, that is the resolution the phone display on it’s browser.

Feel free to use the tool here: responsive.jeffri.net

A little bit of disclaimer, I don’t store any data from your usage. There’s no trip to the server when you use it, at all. 🙂

Hope you find it useful! Cheers!

Pure CSS3 responsive navigation with :target

This is an experiment I tried when working on WPMUDEV mobile navigation a while back, basically to make the navigation work with CSS alone. Using :target pseudo-class, this is possible, but of course it won’t work very well on every navigation.

For the sake of this demonstration, I have made a responsive navigation that will scale between smartphone, tablet and desktop.

Sort by latest post for wp_list_categories

One of my developer friend asked me if we could sort by last post using wp_list_categories function for WordPress. By default, wp_list_categories accept arguments for order by ID, name, slug, count or term_group. Order by latest post is not possible by default, but with a little of tweak using filter hook, we can. 🙂

First, we’ll looking at the function wp_list_categories. This function made call to get_categories to get the list of categories, which made another call to get_terms. Categories in WordPress is basically terms with category taxonomy. Finally, looking on the get_terms function, we will find some delicious filter hook that suitable for our customization.

WordPress Snippets part 1

Well, this will be a short list of WordPress snippets that we could use. This snippets is collected from my daily work on WordPress and should be useful for daily basis.

WordPress mail snippets

WordPress has its own improved function for sending email, it is wp_mail. We should always use this function if we wanted to send email within WordPress. With this function, we don’t need to worry much about the mail header and stuff. More over, there is plenty of filter we can use to customize it.

Customize Custom Post Type Landing Page with Clean URL

WordPress has been long capable on using custom post type. Since WordPress 3.0, we are now easier to create a custom post type. I have blogged some tips about it.

However, many didn’t know that the custom post type already had it’s own landing page, though, you will need to pass the post type variable to the URL. This post will guide you to the step by step on customizing the post type landing page, as well as adding a new rewrite rule for a cleaner URL.

Simple jQuery and CSS3 Slideshow Tabs

A slideshow and tabs is pretty common nowadays in any modern website. There is a ton of way to do this and many free and paid tools available for this feature. This make it very easy to create and it will always amaze people who see it. Basically, we will need at least Javascript to do this, CSS to style the slideshow and tabs as we wanted, and then finally the special HTML markup which make it possible. There is also a slideshow which make use of Flash.

The solution I tried to made right now is a very simple and basic one. It make use of simple jQuery to catch the click event and switching tabs, as well as the slideshow, the CSS to style it as much as we wanted and a simple HTML markup in one unordered list.

The Basics to Write a Secure PHP Web Application

Securing your application is the most important things when building an application. This is the basic that every programmer should follow, it’s a must. However, sometime programmer might forgot the basic, and the more complex your application is, the harder it is to maintain and looking for security holes. While securing your application doesn’t mean that you will be totally safe from a hack, since there is many factor of why a web can be hacked, but reduce the possibility is always a good practice.

This article will give you walkthrough on the basics of creating a secured PHP application. I will give some step by step to filtering input, keep your code up to date and standard. I’ll also give you some good practice I always do.

Best practice to clearing default text with jQuery

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:


 

1
<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

Filter get_terms to return only terms with published post

So you are using custom taxonomy. You add terms to the taxonomy, and add the terms to your posts. Then, you use get_terms and list all your terms. Everything works fine, terms that doesn’t have any posts will not be returned if you set hide_empty argument to true. Now you move some of your posts to draft and you get a problem. Terms that doesn’t have any published posts still returned. This lead to 404 error when you click on the link of this term. It doesn’t look good now, we need to remove term that doesn’t have any published post.

So how to do that? The answer is by using WordPress filter. This piece of code below will solve the problem.

CSS Captcha 0.2 beta

Here I update the CSS Captcha, it is now on 0.2 beta! Thank you for the response of the previous version. While this can work nicely on major new browser, the compatibility with older browser is still minimum. Some mobile browser also haven’t implement some of CSS3 functionality, such as Opera Mini and Opera Mobile. So this is still experimental and shouldn’t be used yet on production website.

Please read the older version information here.

This update is merely a security update. The inline style is randomized now, which make it more difficult for bot to read. The order of the character is also randomized. Sure, it still doesn’t prevent the bot to read or make it impossible to read at all, but it should give more difficulty on creating such bot. 🙂

Still, no support for IE browser at all. 🙁

Change log 0.2b:
– Automatically randomize inline style
– Automatically randomize character order

Demonstration
Download

Enjoy! Any comment is appreciated.