Fork me on GitHub

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 action, will be adding a few more interesting plugins I’ve been working on! 

Following are links to Github repos:

ddslick: https://github.com/prashantchaudhary/ddslick

hovercard: https://github.com/prashantchaudhary/hovercard

Also, I’d like to thank you all for loving these plugins! Please continue to share your love and support by forking them on Github.

-PC

1 note

Javascript Development Workflow of 2013 - by Paul Irish

Paul Irish speaking at OReilly’s Fluent 2012 (JavaScript and Beyond)

1 note

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!

0 notes

Introduction to Visual studio 2012 (Feature Highlights)

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 classes, methods, properties in the solution explorer itself
  • Easier to raft tabs on second monitor
    -the tab stays open if you minimize visual studio!
  • Improved search 
    -search solution for classes, methods etc., IDE search for settings, menu item etc.
  • JavaScript as first class citizen 
    -improved intellisense including jQuery Brace matching, Breakpoints, Go To Definition
  • HTML5 support 
    -use html tags like <header> <section> without squiggly. Older browsers use Polyfills via Modernizr
  • Improved CSS3 support 
    -CSS3 intellisense i.e. border-radius, animation etc. Color picker (Ctrl+Space)
  • Page Inspector
    -(like Firebug) Highlights .cshtml, or aspx pages as well on hover
0 notes

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 their Home Page. Yes! I was always the advocate of Google’s home page, how it only has one text box for search and no distraction at all. It only does what it does best. But with the recent developments like Omnibox (search using browsers address bar), browser extensions for Google search (like the one in Firefox, IE), you no more need to go Google.com.

P.S. If you still heading to Google’s homepage for your searches, you need to catch up! Download Google Chrome.

0 notes

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. 

1 note

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 profile image uses CSS3 border-radius to make it round, CSS3 animations and transitions (on IAmPrashant.com), and the title uses CSS3 font-face ‘PT Sans Narrow’.

1 note

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 any framework since implementation is going to be similar. To begin, lets put them in an order that makes sense and avoid confusion.

1. Model

Can also be called as Data Model to differentiate from View Model. It is essentially your Model (C# Class) on server.

 public class Person
 {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNumber { get; set; }
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string PostalCode { get; set; }
 } 

2. View Model

This is essentially a javascript object with only the data required by the view. This can have fields, methods etc. To declare your View-Model use the kendo.observable function and pass it a JavaScript object:

var person = kendo.observable({
    firstName: "Prashant",
    lastName: "Chaudhary",
    fullName: function(){
        return this.get("firstName") + " " + this.get("lastName");
    }
});

kendo.bind($('#demo'), person); 

3. View

The View is the UI (a set of HTML elements) which will be bound to the View-Model.

 <div id="demo">
     First Name: <input data-bind="value: firstName" /><br />
     Full Name: <label data-bind="text: fullName" ></label>     
 </div>

Example:

Advantages & Disadvantages:

Following are some of the advantages and disadvantages as stated by the MVVm creator John Gossman himself.

Advantages:

  • MVVM Facilitates easier parallel development of a UI and the building blocks that power it
  • Abstraction of the View, reducing the amount of business logic or glue code stuck in code-behind.
  • The ViewModel is easier to unit test than code-behind or event driven code.
  • The ViewModel (being more Model than View) can be tested without concerns of UI automation and interaction

Disadvantages:

  • The overhead in implementing MVVM is “overkill” for simple UI operations
  • Whilst data-bindings can be declarative and nice to work with, they can be harder to debug than imperative code where we simply set breakpoints
  • For larger applications, generalizing the View layer becomes more difficult
  • Data binding can create a lot of book keeping. If not managed well, can result in considerable memory consumption in an application

References and Further reading:
Understanding MVVM – A Guide For JavaScript Developers by Addy Osmani
Kendo MVVM Overview

1 note