Normalize CSS instead of Reset

Posted on May 7, 2013 by nnish

Previously I wrote about Why Reset CSS and gave you a code snippet that helps you override browser defaults and set consistency across all. But I later figured out that it was an age old trick and web has changed a lot since then. Now we need more modern HTML5 alternative to the traditional reset.

Normalize.css is a better alternative to reset because it preserves useful browser defaults rather than erasing them. It has CSS that normalizes HTML5 elements, typography, lists, embedded content, forms and tables.

Have a look at this example on how search field is set consistent across browsers:

 <pre>
  input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
</pre>

In addition to normalizing it also corrects common bugs for desktop and mobile browsers which is out of scope for resets.

Simplest difference between the two is that – Reset removes all built-in browser styling and Normalize aims to make built-in browser styling consistent across browsers.

So who’s using it?

Twitter Bootstrap, HTML5 Boilerplate, CSS Tricks and many other frameworks use Normalize CSS.

Further Read

Normalize.css has pretty neat inline documentation and there are additional detail and explanation on their wiki page.

There is also a nice article by @necolas on About Normalize.css which will help you understand the details.

- NishAnil on twitter

‘LESS’– a better way to write CSS

Posted on April 22, 2013 by nnish

Are you a programmer like me who thinks design is a planet just outside your universe? Then you know CSS is fun, exciting and easy until your website grows fat with pages and complicated layouts. If you have ever tried fixing a layout in such a page – you know what I mean. Did I talk about fixing a layout? Oh yeah thanks to all the browsers.

Many at times while writing CSS I wished I could write it more programmatically than just styling them. For e.g. If CSS had allowed variable declarations, I could have simply held the values in variables, perform few operations and re-use them in properties. But that’s too much to ask for from a stylesheet language which should just do styling!

After doing couple of research I came across LESS – The dynamic stylesheet language. I spent a few hours re-styling some of my demos with LESS and I am must say I am thoroughly impressed with it.

Read more on my Infragistics blog ‘LESS’– A dynamic language that simplifies your CSS

Have a feedback? Let me know @nishanil

by Nishanth Anil

Why reset CSS?

Posted on April 18, 2013 by nnish

Have you noticed inconsistent rendering of HTML elements in different browsers and have got annoyed with it? This is because all the browsers have presentation defaults but none have the same default. For e.g. the way chrome renders an input type is totally different from the way IE does. But as a web developer you want your web pages to look same(at least close enough) across browsers. One way is to go fix for every browser in CSS files but another way is to simply reset your html tags to default and the paint them again!

Here’s the code for it:

  <pre>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}</pre>

Note: Remove the <pre> tag from the above code while pasting.

See Original Source here. And here’s an elaborate reason for CSS reset from Meyerweb.

- Nish

@NishAnil on twitter

JavaScript MV* Framework blog series, Getting Started with BackboneJS

Posted on April 2, 2013 by nnish

JavaScript has become one of the most popular programming languages on the web. At first, developers didn’t take it seriously, simply because it was not intended for server side programming. It was a common misconception among professional developers that this language was meant for “Amateurs” as it focused only on User Interface. JavaScript got the spotlight when the usage of Ajax came to light and professional programmers gave importance to the responsiveness of the page. But now the language has become more popular than ever as the User Experience has become the key part of web development. Accessing web is not limited to browsers alone – there are lot many devices with varying screen sizes accessing the same content. With the rise of HTML5 and CSS3 the web will become more adaptive and responsive than ever and JavaScript plays a major role in it. It has also gained popularity in the server side programming which is made possible by NodeJS framework.

Increase in usage of JavaScript in modern applications demand developers to write maintainable code, separate concerns and improve testability. JavaScript is a “class” less language and it was not designed to support Object Oriented Programming, however you can achieve similar results by workarounds. So if you are a developer from an Object Oriented Programming world, then you will find it hard until you get used to it. Though there are some DOM manipulation libraries like jQuery which simplifies client side scripting of HTML, they actually do not solve the problem of effectively handling separation of concerns. You will end up writing lot many jQuery selectors and callbacks to keep the data in sync between the HTML, JavaScript and the data fetched from the server and we’re still stuck with the Spaghetti code.

Fortunately there are a few libraries and frameworks that come to rescue.

What is MV*?

Though all the frameworks out there somewhat tries to be MVC but they do not necessarily follow the pattern strictly. The idea of all the patterns is to separate Model, View and Logic that hooks the two behind which is the controller. However BackboneJS embeds the controller logic in the view itself though it efficiently maintains the separation. On the other side we do have other libraries which implement Model-View-Presenter(MVP) and Model-View-ViewModel(MVVM)pattern. For this reason we will refer these frameworks as MV* implementation.

I kick started a new blog series on my Infragistics Blog which will introduce you to BackboneJS, KnockoutJS, AngularJS and EmberJS JavaScript Frameworks.

Have a look at the first part of this series – Hello Backbone.

Have a feedback? Find me on twitter @nishanil

-Nish

Future belongs to ?

Posted on April 2, 2013 by nnish

I happened to come across this wonderful image on the internet and it made me think for hours. Thought I must share this with you because it helped me and hope it helps you too!

Image Credits & original source: Forbes

In my opinion one inherent quality of a leader must be getting their hands dirty. When you set out to do that you will have a complete different perspective to your life. You will make things happen at every cost!

Be a leader, be a doer too!

-Nish

Getting Started With MVVM

Posted on November 2, 2012 by nnish

I had a fantastic time delivering the webinar on Getting Started with MVVM in WPF & Silverlight.

Here’s the detailed post on my Infragistics blog. You will find the links to download the samples and slides.

-Nish-

Blend for Visual Studio Workspace (XAML)

Posted on September 21, 2012 by nnish

In my previous post, I introduced you to Blend for Visual Studio and talked about Project templates and Item templates. Now that you are set with your templates its time to understand blend workspace better. This is going to be your playground for designing and creating some stunning animations. This post will concentrate on the workspace that Blend provides when your project is in XAML.

Blend Workspace:

There are two default workspaces in Blend

Deign Workspace
Animation Workspace

You can switch between the two by clicking on Window > Workspaces or by Ctrl+F11. These workspaces are customizable so you can change panel orientation, dock or float , or resize panels as per your need. You can also change the theme of the entire workspace by clicking Tools > Options > Workspace > Theme.

Panels:

Tools Panel

Tools panel contains the most handy tools for designing the UI elements. Some tools that are included are Selection, Direct Selection, Pan, Zoom, Eyedropper, Paint Bucket, etc.. You will notice that some of the section in tools panel have a small white triangle on the lower right corner. This is an indication that if you click and hold you will get additional option of related tools.

Assets Panel

Assets panel lists all the controls, styles, shapes, media, categories, and locations. Controls in assets also include Windows 8 specific controls like AppBar, GridView, FlipView etc. The search box in the assets panel is a handy feature. Alternatively you can access the Assets panel from the tools panel(the last button), it will contain your recently accessed assets.

Artboard:

Artboard is your work surface where you visually design a page of your application. On the top right corner you will find the view buttons. Use these to switch between Design, Code, and split views. On the bottom left corner you will find Artboard controls like Zoom, Show snap grid, Snap to gridlines and Turn off snapping to snaplines. Learn more about snapping here.

Objects and Timeline Panel:

Objects and Timeline panel helps you in viewing the hierarchical structure of objects in the artboard. You can modify them directly by dragging them from one position and dropping them to the desired position to form the intended structure. You can add animation to your application by simply creating a new Storyboard by clicking the + button. Storyboards are containers that hold animation timelines. Learn more about adding animations here.

Properties Panel:

If you are a Visual Studio developer then Properties panel is not a new thing to you! It is the place where you view and modify properties of an object that is selected on the artboard.

Few other panels, you should know about:

Projects Panel – Lists all the information about your project. Similar to Visual Studio Solutions Explorer
Resources Panel – Lists all the resources that are used in the current project. You can drag the resource to the artboard to apply them to an object
Results Panel – Results panel consists of two tabs. Error Tab – Displays build and parse errors. Output Tab – Provides build information when you build, rebuild, clean or test a project.

Summary

Windows 8 has been reimagined from chipset to the user experience and hence it demands every store app developers to follow strict UI design principles. Blend is a great tool to start with. It helps you design stunning apps and also eases out in wiring up animations. So go ahead sweat the details and create a fast & fluid app.

-Nish-

@nishanil on twitter

Windows 8 Developers – Do you “Blend for Visual Studio”?

Posted on September 21, 2012 by nnish

Newest release of Blend now supports UX authoring for Windows 8 store apps both in XAML and HTML. The good news is that if you are a Windows 8 store apps developer then you can make use of Blend for Visual Studio 2012 which is included as part of the Visual Studio 2012 installation. More to it – you get this cake even if you download the Visual Studio Express 2012 for Windows 8 which is of-course free!

Windows 8 store apps much like Windows phone compels a developer to follow the Metro Design Principles. “Metro” as it was formally known as; “Windows 8-style UI” from now on!. With the UX guidelines in place for Windows 8 app development, it is also important to have an UX authoring tool like Blend to be part of the developer’s machine along with Visual Studio.

Blend clearly is a tool for building awesome User Interface Design. Blend lets designers focus on design while letting developers focus on logic of the UI. Blend until the last release was specifically targeted for designing front-end XAML based interfaces for WPF and Silverlight. But “Blend for Visual Studio” has clear targets – Designing Windows 8 Store Apps in XAML/HTML. It adds support to some awesome Win 8 features like App Bars, Grid view and View States. It also supports native C++ app development.

Beyond providing simple XAML/HTML designers and editing support, Blend gives you tools that help you configure UI elements, author complex animation sequences(XAML), create user controls from vector graphics(XAML), customize visual states(XAML) etc. In HTML it provides some cool way of editing Style Rules, CSS Properties, HTML attributes and Live DOM.

Getting Started with Blend:

Start a New Project and choose your design language first. If you are a web developer and starting a hands-on with Windows development then you can choose HTML and Javascript as your language. Like me if you are a XAML developer, then prefer XAML, you will feel at home.

Project Templates:

Blend provides you with templates to speed up your app development just like Visual Studio. Three important project templates available for both HTML and XAML are:

Blank App – As the name – just a blank project. I almost always use this template and then add Item templates based on my project needs.
Grid App – A project that displays groups of data in a grid format. If you are creating an app that displays group of items for e.g. a shopping app or a news app then start with this template. A grid app defaults to a home page that shows a list of groups – basically a set of items. When the user selects a particular group another page opens with group details which will have the list of items of the selected group.
Split App – A project that displays a master/detail list. For e.g. News app that contains headlines on top and when clicked displays the full content.
I almost always use Blank App as my project template and then add Item Templates based on my project need.

For HTML project there are two more templates you can make use of:

Fixed Layout App – Fixed Layout provides similar template to Blank App except that its viewport is fixed. If you are building apps that has just one interface for e.g. a simple game in Javascript, then make this choice.
Navigation App – Navigation App template contains Navigation Model which is recommended for Windows store apps. This template provides a home page by default. You can add more pages to it and make use of the navigation model to navigate between them.

Item Templates:

Project > Add New Item.

You can read more about Project templates and Item templates here.

Now that you have made your project choice, it is time to understand the Blend workspace. In my next blog post I will cover them.

-Nish-

WPF Datagrid – Update Source on fly with BindingList<T>

Posted on June 13, 2012 by nnish

I was under an assumption that ObservableCollection<T> works perfect with WPF DataGrid until my friend wannabeegeek came up with a strange problem. The problem was making ObservableCollection<T> update the ItemSource on fly while editing them. What’s the big deal right? Wrong.

If you are using MVVM you do not want to wire up the event on DataGrid for an updated source. You will very much think that as long as you bind the collection to the ViewModel’s property and the mode is set to TwoWay – the source is updated automatically when items are edited in the DataGrid.

Your ViewModel will fire the property changed when the collection itself changes – that is if you replace the property itself. So if you want to know the change in items of the collection you need to subscribe to the CollectionChanged event of the ObservableCollection<T> property in your ViewModel.

MSDN says:

Occurs when an item is added, removed, changed, moved, or the entire list is refreshed.

But there is a problem with ObservableCollection.CollectionChanged event – it does not fire when your data item’s property changes. It fires only if the entire item is replaced. That is if you have a collection of an Entity “Expense” that has properties “Name” and “Amount” and if you simply change the Amount value in the grid it does not work! You need to replace the entire “Expense” object for you to see the collection change firing up.

After googling and reading msdn forums I gave up on ObservableCollection<T> and picked up BindingList<T> to do the job. Here is a demo that explains all the stuff:

.. and the screen shot:

I have a DataGrid that is simply bound to an “BindingList<Expense>”. Right below that I have a Total that is bound to the “TotalExpense” property. Now here is what I wanted to do – Whenever user edits the amount in the Grid the Total should be calculated as he/she tabs out.

.. and the ViewModel with the solution:

public class DataGridDisplayViewModel : ViewModelBase
    {
        private BindingList<Expense> _expenses;
        private double _totalExpense;
 
        public double TotalExpense
        {
            get { return _totalExpense = _expenses.Sum(x => x.Amount); }
            set { _totalExpense = value; }
        }
        
        public BindingList<Expense> Expenses
        {
            get { return _expenses; }
            set
            {
                _expenses = value;
                if (_expenses != null)
                {
                    _expenses.ListChanged += (o, e) => RaisePropertyChanged(() => this.TotalExpense);
                }
                RaisePropertyChanged(() => this.Expenses);
            }
        }
 
      
        public DataGridDisplayViewModel()
        {
            Expenses = new BindingList<Expense>
                            {
                                new Expense() {Name = "Gas", Amount = 1000},
                                new Expense() {Name = "Electricity", Amount = 1000},
                                new Expense() {Name = "Internet", Amount = 100},
                                new Expense() {Name = "Water", Amount = 100},
                                new Expense() {Name = "Misc", Amount = 1000}
                            };
        }
    }

The TotalExpense getter simply calculates the sum. And the ListChanged event of Expenses property simply notifies the change in TotalExpense.

.. and in the View:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <DataGrid ItemsSource="{Binding ExpensesOb, Mode=TwoWay}" AutoGenerateColumns="True" Grid.Row="0"/>
    <TextBlock Grid.Row="1">
        <Run Text="Total: "/>
        <Run Text="{Binding TotalExpenseOb}"/>
    </TextBlock>
</Grid>

That’s it!

Download the full code here. The code contains a tiny MVVM framework(inside core folder). – Read the disclaimer of the blog before you play with my code.

If you know to achieve this exact behavior with ObservableCollection do make a comment to this post and let me know!

/*Nish*/

Nishanth Anil

ON WEB DEVELOPMENT & BEYOND

Normalize CSS instead of Reset

So who’s using it?

Further Read

‘LESS’– a better way to write CSS

Why reset CSS?

JavaScript MV* Framework blog series, Getting Started with BackboneJS

What is MV*?

Future belongs to ?

Getting Started With MVVM

Blend for Visual Studio Workspace (XAML)

Blend Workspace:

Panels:

Summary

Windows 8 Developers – Do you “Blend for Visual Studio”?

Getting Started with Blend:

Project Templates:

Item Templates:

WPF Datagrid – Update Source on fly with BindingList<T>

Follow “Nishanth Anil”