December 2012
1 post
2 tags
Fork hovercard and ddslick plugins on Github!
After being on my ToDo list for months now, it was finally time to host the hovercard and ddslick on Github! Lot of people were asking for this and many reached me with multiple updates to the plugins, my apologies to all for responding to their requests so late. A lot has been happening in last few months including me moving back to India! But I’m all settled and ready for some more...
September 2012
1 post
1 tag
Javascript Development Workflow of 2013 - by Paul...
Paul Irish speaking at OReilly’s Fluent 2012 (JavaScript and Beyond)
August 2012
1 post
Ridiculously Valuable Apple vs Others! -...
Source: http://visual.ly/apple-ridiculously-valuable
July 2012
1 post
2 tags
The Anatomy Of An Effective Web Design -...
Source: http://visual.ly/anatomy-effective-web-design
June 2012
5 posts
1 tag
Bitly's Creative UI to add their bitmarklet!
I recently visited bitly.com tools page, and noticed interesting interface suggesting me to save its Bitmarklet. So if you visit their page you’ll notice this ”+ bitmark” button with a tip to drag it:
Once you start dragging, the UI now suggest you the next actions:
Now go try yourself!
1 tag
Introduction to Visual studio 2012 (Feature...
I recently talked about the new features and improvements in Visual Studio 2012, at my workplace. I’ll probably write a post on the same soon, but meanwhile here’s a quick PowerPoint slides I created for my talk.
Some quick take away(s)!
New look
Preview files in Solution Explorer -single click to preview, double click to pin
Extended Solution Navigation -view all your...
1 tag
Yahoo can potentially beat Google's homepage!
Google is useful but you aren’t always looking for useful, are you! Sometimes you want to entertain yourself, amuse yourself, there are times when you need a break but not sure what you want to read, there comes Yahoo!
Mind you I’m a big BIG fan of Google but its just recently I realized one field where Yahoo can get an edge over Google. Its not their mail, or the search engine, its...
2 tags
Your Script Just Killed My Site - Steve Souders
Steve Souders at OReilly’s Fluent 2012 (JavaScript and Beyond) talk about how loading third party scripts (like Twitter!) synchronously can kill your site.
3 tags
Rolled out a new HTML5 header across my websites!
I’m in middle of rolling out a fresh & clean header across all my websites (i.e. personal website, design blog, plugin pages). Here’s how it looks:
Personal Website: IAmPrashant.com
UI & Design Blog and Plugin Pages: DesignWithPC.com
All that this new header displays is a profile pic, a title, and a short description. The idea was to be clean, minimal, and HTML5-ish! The...
May 2012
2 posts
2 tags
Using MVVM - Model View View Model in Javascript
MVVM is an architectural pattern largely based on MVC and MVP by Microsoft, which is targeted at modern UI development by separating from the business logic and behaviour in an application. MVVM has been implemented in JavaScript in the form of structural frameworks like KnockoutJS, KendoUI MVVM and KnockbackJS.
For this post I’m going to use MVVM framework provided by Kendo but you may use...
2 tags
ddSlick - new plugin for Custom Drop Down with...
A friend of mine recently needed help in including images and description in HTML drop down list. Since it wasn’t possible with regular HTML <select> options, so I wrote some javascript to help him set up his custom drop down list, which I later converted into a jquery plugin of its own, named ddSlick!
ddSlick is a free jquery plugin to create a custom drop down list with images and...
April 2012
4 posts
4 tags
How to set up your first basic Kendo UI Grid
Now when we know how to setup a basic Kendo datasource object, our next step is to generate a Kendo UI Grid using a Kendo datasource. Grids are useful when displaying tabular data with features like sorting, paging, and grouping. Following is an example of setting up your first basic Kendo UI grid.
1. Create a placeholder for the grid
Create an empty div and assign it an id. We’ll turn...
4 tags
Setting up your first basic Kendo Datasource...
The Kendo UI DataSource component is an abstraction for using local (arrays of JavaScript objects) or remote (JSON) data.
Supports CRUD (Create, Read, Update, Destroy) data operations
Supports Sorting, Paging, Filtering, Grouping, and Aggregates.
1. Creating a Datasource object
A DataSource can be created in-line with each UI widget configuration settings, or a shared DataSource can be...
4 tags
Speed up your HTML rendering with Kendo UI...
Templates offer way of generating html chunks (especially repeatable) by binding to a data array or a datasource. There are multiple templating engines available on web (including jquery templates beta), however this document demonstrates the one provided by Kendo.
To begin with you’ll obviously need to reference both jquery.min.js and kendo.web.min.js
1. Syntax:
JavaScript blocks are...
2 tags
Indian e-commerce website designs inspired by...
In year 2011 India saw a huge uprising in e-commerce with a 30% growth rate, and reaching $10 billion market size. India is undoubtedly on its way to become one of the biggest e-commerce market but its still sad to see no design innovation in the industry. Most of the famous Indian online retailers still follow the same design trend set by Amazon.com years ago.
Take a look at some leading Indian...
March 2012
5 posts
1 tag
Usability: What one think you look for when buying...
The ‘Sell By’ date. And you’ll be highly impressed with Kroger taking a note of this and making it easily readable from a distance! Readability/Usability Win!
1 tag
Restaurant style menu with CSS. No Images.
This is also called ‘Dot Readers’ - the rows of dots that connect columns in table. We can easily get something like this using just CSS. Here’s a snapshot of what we are trying to achieve:
The approach:
Each <li> consists of <label>,<span>, and <div>
<label> floating left with white background for the name,
<span> floating right also...
1 tag
Display full screen image across any monitor...
This is easily possible with the CSS3 property “background-size: cover”. Let’s look at an example on how to use this. We’ll use the following image for our example:
When using this image as background for the body:
CSS: body { background:url(“http://dl.dropbox.com/u/40036711/Images/BeerSpill.jpg”) fixed no-repeat centercenter transparent; ...
2 tags
UX challenge: How to deal with very long and wide...
One way to handle a wide range of columns is to merge the related columns into one. This can come handy when you don’t necessarily require to have your data listed in excel (tabular) format. In a recent project I merged all address related columns into one, and avoided any cluttering. This way I was at ease to add in even more functionality with each row than possible with the original grid...
1 tag
A little fun with CSS!
Was monkeying around with CSS3 transform and transition properties this morning, ended up with this!
December 2011
1 post
1 tag
Focus on selling a pizza than getting my email
Saturday afternoon, I was hungry and wanted to order pizza. I usually order Dominos but today I wanted to try Donatos. So I go to their website on my phone, looked for a link to order online, clicked it, and landed up on their login/registration screen. And of course I walked away!
Moral of the story:
It is far more important for any merchandise to make a sale first than worrying about the...
November 2011
1 post
3 tags
Hovercard plugin release 2.0! Now with built in...
So far the initial release for Hovercard plugin has received a decent traction with increased traffic and page ranks. And now its time for another release (version 2.0) with fixes and updates based on user’s suggestions and feedbacks.
What’s new with version 2.0:
Built in Twitter card: (with follow button)
Built in Facebook card: (with like button)
When hovered over the text,...
October 2011
3 posts
2 tags
JSONP error handling with jquery.ajax
I struggled for hours yesterday to figure out why my jquery.ajax error callback wasn’t firing when using jsonp data type. Well, there is no error handling for JSONP request! This is a known limitation with jQuery, and the website doesn’t have enough documentation around it.
What happens:
After digging deep, I found this piece of information:
When data is retrieved from remote...
3 tags
Get Twitter profile data with jQuery ajax, super...
Update:The following technique is also available as a Hovercard plugin.
We’ll use Twitter REST API in json format to look up any twitter user by its username. We’ll create a twitter card for President Barack Obama (@barackobama) as an example:
Resource url: http://api.twitter.com/1/users/lookup.json?screen_name=barackobama We’ll make an ajax request to this url.
Ajax...
1 tag
Easiest way to use CSS Web fonts: Google fonts +...
We all know the CSS’s @font-face property to specify online fonts to display text on your web pages. Sadly it is little complicated for first time users and somewhat expensive (if using TypeKit). But there’s a free and easy solution for that:
Google Web Fonts: Hundreds of free, open-source fonts optimized for web.
Google Font Previewer (Chrome Extension):
Lets you choose a font...
September 2011
3 posts
2 tags
Use jQuery plugin with WordPress in 5 easy steps
Below are 5 steps to make any jquery plugin work with wordpress. I’ll use the hovercard plugin as an example, but these steps should be helpful with any plugin.
STEP 1:
Create a folder with the plugin name (i.e. Hovercard) in /wp-content/plugins directory.
STEP 2:
Copy all your jQuery plugin files like script, stylesheets, images etc. in this folder. In our case we only need...
1 tag
Styling your input text fields with CSS3 gradients
This is a quick post on how you can use CSS3 properties like gradients, border radius, and shadows to add awesomeness to your input fields!
CSS:
input[type="text"]{
padding: 5px;
border: 1px solid #DDDDDD;
/*Applying CSS3 gradient*/
background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 20px);
background: -webkit-gradient(linear, left...
2 tags
A bookmarklet to clean a web page from unwanted...
Long time ago I wrote and shared this tiny script for personal use, which helped me to gracefully turn off any inappropriate images and graphics on the currently open website. And I think it’s worth sharing again with everybody on this design blog.
You can drag and drop this link — CleanIt! — to your browser’s bookmarks toolbar and that’s it.
Demo: click here
August 2011
4 posts
3 tags
Plugin available for simple and sexy hovercard!
IMPORTANT UPDATE: Please visit the new hovercard plugin page. This plugin has a new home and all the documentation, demos, and updates are available there. No future updates will be made here. Thank you - PC.
After finishing up last post on simple yet sexy hovercard with minimum css I decided to wrap up its functionality into a plugin itself. So if you don’t want to do the extra work of...
4 tags
Simple yet sexy hovercard with minimum CSS
Update: This hovercard is now available as a plugin too!
So you’ve seen and loved Twitter’s and Facebook’s hovercard, now its time to make one for your website! A hovercard is a way to show related information in card format when you hover over some username, text or a link.
Lets build:
So you have a user and his bio that you want to display using hovercard. To add a...
1 tag
UI trick! How do deal with list of check boxes.
Last week I had this interesting UI problem at work where a user should be able to check or select multiple items from a list. The list only had 6-7 items but it will grow over the period of time.
So I experimented with usual alignments (horizontal & vertical):
Vertical was eating a lot of space and making the form longer. Though horizontal alignment didn’t look that bad at first, but...
2 tags
July 2011
8 posts
2 tags
The simplest tool tip using jQuery and CSS. No...
This is one of the very basic need with web development and again there are tons of plugins out there to server the purpose. But this trick is simple enough and you won’t need to consume any plugin.
Click here for live demo (on jsFiddle)
How:
Wrap all your keywords on the website with a span of class “.tip”, and write your tip-content to some attribute like...
1 tag
Create a Triangle with pure & minimal CSS. No...
CSS:
.triangle-up
{
border:solid 20px transparent;
border-bottom:solid 20px #000;
width:0;
height:0;
}
HTML:
<span class="triangle-up"></span>
Actual Result: (Try inspect element on the following triangle!)
I tried to put together a little image to show how its done:
1 tag
Submit a form with Enter, using jQuery keypress
What I have:
Some input, textarea, or any other elements,
A button or a link to submit or take action.
What I want: To submit the form, or programmatically click a link on hitting Enter within the input elements.
How I do: I give my fieldset a class of submittable and my button a class of buttonSubmit. Now using jquery I can bind keypress event to all desired elements.
//Submit on...
1 tag
3 tags
Edit in place with jQuery and CSS. No plugin...
While working on 15Tasks I needed to be able to edit in place. I wrote this little tool that I would like to share.
Watch a working demo here. Here’s what I’m doing behind the scenes:
HTML:
<p id="text" class="editable">
<small>Add some information here:</small>
</p>
jQuery:
Highliting editable area on hover
$(".editable").live({
...
2 tags
Setting cross browser border-radius with jQuery
After being tired of writing and repeating web prefixes(-moz-, -webkit-,…) for CSS3 properties like border-radius, box-shadow etc. I decided to write a global jQuery function to set cross border radius.
jQuery.fn.setBorderRadius = function(top, right, bottom, left) {
//set up defaults if only one or two variables are passed in
right = right || top;
bottom = bottom...
1 tag
Fixing jquery highlight effect (Fadein but doesn't...
Problem:
When using jquery ui’s ‘highlight’ effect (i.e. flashing yellow), you may have sometimes encountered the issue that it does fadeIn/flashes but doesn’t fadeOut to its original state.
Solution:
This is probably happening because you may have some background set to the element you are trying to highlight. Trying removing the background from the element before...
2 tags
Abort or cancel previous ajax, and considering...
This quick trick comes very handy when your event make multiple ajax requests but you only need to act on the very last. E.g. On keyup events for Autocomplete, or checking username availability etc.
var jAJAX;
$("#someID").keyup(function () {
if (jAJAX) jAJAX.abort();
jAJAX = $.ajax({
//Do whatever...
});
});
June 2011
1 post
2 tags
Vertical Align with jQuery
So you know how to text-align anything in center horizontally but how the heck do you align something vertically? You would expect css vertical-align property will do the trick, but it unfortunately doesn’t! Here’s a jQuery function to vertically align any element.
$.fn.vAlign = function () {
return this.each(function (i) {
var ah = $(this).height();
var ph =...
