Learning Bootstrap Quickly

Bootstrap

The main idea of this article is to outlines the content of bootstrap that is required to be learnt to initiate the journey of learning of Bootstrap. It will help in quickly learning the concepts of bootstrap and you can further explore the advance concepts on bootstrap, but this article will provide the very basic concept to start with. I will add another article to cover the additional topic related to bootstrap.

Grids

Arranging the content on the page, it provide the structure for arranging content. Grids can be classified in following categories:

Simple Grids

• Row:
• Span1 to span12: define columns

Fixed Grids

Columns are assigned fixed pixel value. If screen size changes the column value will not change rather it will add horizontal scroll bar.

If you want the all the div inside the base div have same size. We have to fix the size of all the div, so that when we make the browser screen small the horizontal scroll bar should appear rather than adjusting the div on the screen

•         Container:

                                   

Fluid Grids

Columns grids are not assigned pixel value rather than they are assigned percentage value. This will not show the horizontal scroll bar if the screen size changes. It even adjusts the content in the div to adjust the screen size.

•      Row-fluid:
  -fluid”>

-fluid

”/>

                                   

Responsive web designing

It helps to interact according to the environment the website is being displayed. Responsive web design adjusts the website according to the device size, eg, mobile, tab, desktop etc.

You just need to add the bootstrap responsive web design scripts along with the bootstrap core script on the website.

If a web page contains the fixed grid and the bootstrap responsive script is added to that webpage, the web page will be converted in too responsive and the properties of fixed grid will be over written, i.e no scroll bar will appear if the web page is accessed in smaller screen.

Note: Above mentioned scripts are part of bootstrap download.

Responsive web design helpful classes

Responsive web design includes some the classes that are helpful to hide or unhide the content of the element based on the device the web site is being opened.

•        Visible-phone: content should only display on phone.
•        Visible-tablet: content should only display on tablet.
•        Visible-desktop: content should only display on desktop.
•        Hidden-phone: content should not be displayed on phone.
•        Hidden-tablet: content should not be displayed on tablet.
•        Hidden-desktop: content should not be displayed on desktop.

Bootstrap classes to learn

Arrangement: Bootstrap provide default style and text that make page look pleasant and will attract more customer. Below are some of the default set of classes that are present in bootstrap

Text classes

·       Lead class: emphasize text

·       Muted: muted text

·       Text-success: Success message

·       Text-error: Error message

·       Text-warning: Warning message

·       Text-info: Information message

Elements

·       Abbr: CPU

·       Address:

·       Blockquote:

to put text someone has quoted. Use pull-right class to display text on right side of screen.

·       List:

o   Unordered List:

o   Ordered List:

o   Definition List:

Heading</>

Description of heading goes here

·       Code:

Table

            Added feature for table you have many table related classes that will help to enhance the table             structure in web page. Below are some of the classes:

·       Table

·       Table-hover

·       Table-stripped

Etc.

Learning Angular 2 Quickly and Right Way.

Hello Everyone,

I have been recently assigned to a project where I have to work Angular 2. I have no exposer to UI development before. I am writing this blog so that it will help those people who have no idea on UI development and are confused where to start from.

I have shared my journey to learning Angular 2 from scratch. There is nothing right or wrong in directly learning Angular 2, but following these below mentioned sequence will help those guys who are totally new presentation technologies and want to learn it in a better way:

  Step 1: Learn JavaScript first. Below is the helpful resource to learn JavaScript: (Time 8 hours)

• https://app.pluralsight.com/courses/advanced-javascript

OR

• If you don’t have access to plural site, then start with below free books for above plural site JavaScript videos:

o   https://github.com/getify/You-Dont-Know-JS

Note: I have mentioned Advance JavaScript, but this video talks in details and it will be easy for any new UI developer to grab the concept.

Step 2: Learn Typescript. Below is the helpful resource to learn Typescript: (Time 5 hours)

• https://app.pluralsight.com/library/courses/typescript-in-depth

OR

• If you don’t have access to plural site, then start with typescript tutorial:
• https://www.typescriptlang.org/docs/tutorial.html

Step 3: Learn Angular 2. Below is the helpful resource to learn Angular 2: (Time 5 hours)

•           https://app.pluralsight.com/library/courses/angular-2-getting-started

OR

•          If you don’t have access to plural site, then start with Angular 2 tutorial:
•       https://angular.io/docs/ts/latest/quickstart.html

Recommendation for when to use Interface or Abstract base class.

Interface:

Interface is a contract with the class that class will provide the implementation of all the methods or property declared in an Interface.

·         Interface will only contain declaration of the methods or property.

·         Class can implement multiple interfaces.

·         If a class wants to inherit from another class then that class should precede interface implementation.

Example:

Class A : BClass, NewInterface

{

}

Abstract Base Class:

Abstract class is a contact with the inheriting class that inheriting class will provide the implementation of all the abstract methods and properties in defined in the abstract class.

·         A class can inherit only one class.

·         Abstract class can contain both abstract method and implemented methods.

·         If a class inheriting from abstract class does not provide the implementation of all the abstract methods in abstract class, then that class has be marked with abstract keyword.

When to use Abstract base class and when to use Interface

·         If you module or component will undergo versioning in future then it is better to use abstract base class. If a new version of a component is introduced then by updating the base class all the inheriting class will automatically get updated. If you have used interface and a new version is introduced then a new interface need to be created.

·         Use abstract base class for commonly related classes. Interface is used to provide common functionality for unrelated classes.

·         Interface is best suited for small set of functionality, whereas for large modules abstract base class is useful.

·         Abstract base class provides partially implementation functionality for your classes, whereas interfaces provide no implementations for its members, it is implementing class responsibility to provide complete implementation of all the members of an interface.

Best way for MVC Model Binding

While understanding MVC model binding, I came across below mention 6 steps which helped me understanding modeling technique.

Tip #1: Prefer Binding Over Request.Form

Tip #2: Custom model binders
Tip #3: Custom Model Binding via Inheritance
Tip #4: Using Data Annotations for Validation
Tip #5 : Recognize Binding and Validation As Two Phases
Tip #6: Binders Are About The Environment

Please refer below blog for more details:
http://odetocode.com/blogs/scott/archive/2009/04/27/6-tips-for-asp-net-mvc-model-binding.aspx

Power of OfType and Cast in Linq

Let’s understand the OfType and Cast with the help of example.

ArrayList states = new ArrayList(4);

states.Add("Karnataka");

states.Add("AP");

states.Add("MP");

states.Add(4);

// Apply OfType() to the ArrayList.

IEnumerable<string> query1 = states.OfType<string>();

foreach (string state in query1)

{

        Console.WriteLine(state);

}

 ---------------------------------------------------------------------

// Apply Cast() to the ArrayList.

IEnumerable<string> query1 = states.Cast<string>();

foreach (string state in query1)

{

        Console.WriteLine(state);

}

OfType

When Converting ArrayList to IEnumerialble using OfType(), it will convert all the elements of type string and ignore the other type. The output of above OfType conversion will be as follows:

Karnataka

AP

MP

Oftype will skip the value 4 as it is not string type and we wanted to convert the ArrayList to IEnumeruable of string type.  If we tried to convert the ArrayList to IEnumeriable, then the output would be:

4

Cast

Will try to cast all the elements of type x(string in above example), if some elements are not of type x then it will throw InvalidCastException. Second for loop stated above in the example will not work as when Cast will try to convert element “4” to string it will throw InvalidCastException.

Understanding Association, Aggregation and Composition

Let’s understand association, aggregation and composition used in OOPs concepts.

Association

Association describes *is a relationship between two classes. Association *Uses another object to perform some action on its behalf. For Example:

Manager class *Uses ReportManager class to perform some action on its behalf.

       public class Manager

       {

              public Manager()

              {
                     var report = new ReportManager();
                     report.Initalize();
              }
       }

It is a directional association between Manager and ReportManager.

Aggregation and Composition

Explanation of aggregation and composition cannot be understood separately, explanation of these concepts should go hand in hand.

Aggregation is a special type of an association. Aggregation explains *has a relationship between the two classes. In this object of one class is contained in the other class. If second instance is part of the first instance of a class then it is mentioned as Aggregation between the two classed. For example:

public class Employee

       {
              private Insurance employeeInsurance = new Insurance();

       }

Employee class contains Insurance class to get the employee insurance.

 Insurance class aggregate Employee class or in other words Employee contains Insurance.

One thing to note here is that both employee and Insurance class are independent of each other. There can be an employee in an organisation that does not have insurance.

Take another example where Heart does not exist without Body. The life time of heart depends on Body. If Body is destroyed Heart will also get destroyed. Here we say that Body is composed of Heart. This explains the concept of Composition.

Please provide your feedback for this topic.

Implicit Vs Explicit Interface implementation in C#

If you want to understand the difference between implicit and explicit interface and confused which interface to use when, then you are at right place.

Implicit Interface

Implicit interface allows to access methods and properties of an interface as they are part of implementing class.

Explicit Interface

Explicit interface allows to access methods and properties of an interface only when you are treating an Interface.

Let’s understand the above explanation with the help of example:    

Example:

Manager is a class that implements IEmployee and IDepartment interface. Both IEmployee and IDepartment has a method Display(). IEmployee’s method Display() is implemented implicitly and IDepartment’s method is implemented explicitly.

public interface IEmployee

       {
              void Display();
       }

public interface IDepartment

       {
              void Display();
       }

public class Manager : IEmpoyee, IDepartment

       {

              public void Display()

              {

                     Console.WriteLine("IEmployee.Display().");

              }

void IDepartment.Display()

              {

                     Console.WriteLine("IDepartment.Display().");

              }

              public void GetReport()

              {

                     Console.WriteLine("Generate report.");

              }

       }

class Program

       {

              static void Main(string[] args)

              {

                     Manager manager = new Manager();

                     manager.Display();

              }

       }

Difference between implicit and Explicit interface implementation

·         No need to specify interface name with method in implicit interface, where as it is required to specify interface name with method implementation in explicit interface.

o    public void Display() vs void IDepartment.Display()

·         Access modifier is required with method name and it must be public, even protected will not work; whereas in Explicit, no access modifier is required.

·         Implicit implementation allows making method as virtual and abstract; same is not true with explicit interface implementation.

When to use implicit and Explicit interface implementation

·         Do not use explicit members as a security boundary. They can be called by any client who cast an instance to the interface.

·         Do use explicit members to hide implementation details:

o   In explicit interface implementation, IDepartment.Display() method will not appear in class Intellisense list, Below digram shows implecit Display method of IEmployee interface.

o   In above example if you want to invoke Display method of IDepartment interface, use below code:

 

·         Do use explicit members to approximate private interface implementations.

·         Do expose an alternative way to access any explicitly implemented members that subclasses are allowed to override. Use the same method name unless a conflict would arise.