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.