Rounded thumb image with CSS 3

In modern Mobile apps, RIA or fancy websites like to display thumb images with a little rounded corners. We can do it on web with very little effort using a little CSS3 technique.

Rounded thumbnail

Just 3 simple 3 steps:

  1. Instead of using img, use a placeholder like a or span. Make it display:block.
  2. Place the image as background image of this placeholder.
  3. Set a border radius and a little shadow for the placeholder.

Sample CSS and HTML code:

<style type="text/css">
a.user-image {
background: transparent no-repeat top left;
display: block;
text-indent: -999em;
width: 50px;
height: 50px;
border-radius: 5px;
box-shadow: 0px 0px 3px #666;
}
</style>
<a class="user-image" href="http://www.facebook.com/ajaxray" style="background-image: url(http://graph.facebook.com/667896332/picture)" title="Visit Anis's profile">Anis Ahmad</a>
<!--
Post: http://ajaxray.com/blog/rounded-thumb-image-with-css-3
Demo: http://ajaxray.com/Examples/cropped-thumb.html
-->
view raw gistfile1.html hosted with ❤ by GitHub

See code on Gist.

You’re done! Check the live demo.

Kohana 3.x Log Viewer module

Kohana Logs are a good way of debugging and monitoring application flow. It has various types of log writers for storing and showing logs. But the most commonly used one is the File Writer. One painful thing with this file logs is, downloading, reading and clearing when testing on a remote server.  To reduce this pain, I wrote a module to explore the log files on server with a beautiful interface. It may help many of you who are developing with Kohana.

You can get it from github –  https://github.com/ajaxray/Kohana-Log-Viewer

Kohana Log Viewer screenshot

Continue reading →

The first Kohana book : Kohana 3.0 Beginner’s Guide

Kohana 3.0 Beginner’s Guide Cover page
Kohana 3.0 Beginner’s Guide

Codeigniter was my first PHP framework. Though it works nicely for wide range of app types, slowly I felt uncomfortable in some points. For example, lack of OOP practices, untestable structure etc. (Sorry to say, unit-testing in codeigniter was a horror!) Later, among PHP frameworks, I worked a lot with Zend Framework and a little with Symfony . One day Emran Hasan shared IBuildings article about HMVC which presented Kohana as example HMVC framework. That was the starting, in a few days Kohana took the position of primary PHP framework for me. I built website, Enterprise application, Service layer for SOA and few more apps with Kohana comfortably.

But when framework newbies asks me with which one he should start, need to think twice before suggesting Kohana. The main reason is, it’s documentation was not as rich as Codeigniter or Zend Framework. And there was no book. BTW, Kohana unofficial wiki is a BIG try to help in this issue. Besides, recently Packt has published the first book on Kohana “Kohana 3.0 Beginner’s Guide“. Jason D. Straughan wrote this book for Kohana version 3.x. Few days ago, Snehman Kohli from Packtpub has contacted me and requested for reviewing this book. As a fan of Kohana, I’ve happily accepted. So, here is my view on this book.

Continue reading →

jQuery and jQuery Mobile on JSCon 2011, Dhaka

PHPXperts group  is one of the most active PHP community in Asia. They have arranged the first JavaScript Conference of Bangladesh on September 17, 2011 at AIUB Auditorium. It was a cool event with 250+ participants.

Our (me and Mohammad Zakir Hossain Raju) session was about jQuery and jQuery Mobile. Here is the slide –

BTW, SlideShare has featured this slide on homepage.

Continue reading →

Let's do with Drupal – Simplified Admin Panel

As you (if you’v at least installed and explored Drupal) know, Drupal‘s Admin panel is not comfortable for clients. It’s mostly developer centric and not similar to other common content managing panels. But, sometimes clients may need to manage some type of content. Recently I’ve faced this situation and made a simple, generic admin panel that only offers managing selective contents. Now I am going to tell you the how I’v done it. If you follow the steps, it should take hardly 30 minutes.

Continue reading →

phpXperts Seminar 2010 – the most exciting event of this year!

Yesterday, we had an excellent day at phpXperts seminar. We did 6.5 hour looong event with total 18 sessions. The participants were around 350 PHP lovers and many more from live webcast. At the end of day, it was a WOW event at phpXperts 2010!

This time, my topic was about “Caching Basics in PHP”. Here is the slide –

Continue reading →

Setting up Database testing with Kohana UnitTest module

Kohana Unittest module has made testing in Kohana v3 easy and fun. Lysender wrote a cool, straight forward post about how to set it up and running. I’ll just talk here about how I have set up database testing with Kohana Unittest for my personal use. Not saying “How to set up”. Because it’s obviously not the best way to do this.

Kohana Unittest

The important thing I need to ensure for testing database is, It’s in a known state before running a test. And, changes on database made by one test will not impact on another test. So, I’ll have a separate database for testing. Which will be loaded with a predefined dataset before running each test and will be truncated after test is done. Also, I have to be careful about that, my models are executing quires on test database in testing environment. Here is how I’ve done it? –

Continue reading →

Extending Zend Form Element to create customized Phone number field

Generally, Phone numbers has different parts. Such as, country code, operator code and subscriber number etc. When taking Phone number as user input, we can worn users about phone number format by setting a hint/description and can validate using Regular Expression. But, for better usability, along with hints, some web applications provide separate (generally 3) text fields for different parts of phone number. Also, some of them keep a separator, ‘-‘ or ‘#’ between this fields.

Now, if we try provide this feature in Zend Form, that’s possible. We can create three individual Zend_Form_Element_Text objects and join there value together to make the phone number. But, in this case, validating them together is a hassle. Again, placing them inline in the form and putting separators needs some Decorator magic. What if we can make it simply another Zend Form Element which renders three text box (optionally with separator)? And consider their value jointly and validate them together using ordinary Zend Validators? Lets try.

What we are going to make?

Let’s visualize our Phone number field first and list what we want from it.

  • It’s Simple. It’s rendering, validation everything is like any other ordinary Zend From Elements.
  • It prints 3 text boxes for different parts of Phone number.
  • When we validate it or take it’s value, the input of these three boxes jointly will be considered as the value.
  • We can set a separator character to be printed between text boxes.
  • We can include/exclude this separators from value.

Continue reading →

jQuery LED Banner – fun with jQuery!

While coming home, I’ve seen a super store showing their items on a big LED type banner. Where item names were scrolling using some lights on/off. It’s an everyday scenery, nothing special.

But I’ve come to realize soon, in back of my head, I am thinking how it can be made for web. And, LED banner has landed on earth within few hours using the wings of jQuery. Here is the fun!

jQuery LED Banner

Continue reading →