Discover Your Strengths

I was watching this course “Cultivate Your Personal Strengths Using Gallup Tools” on pluralsight and on the first few minutes on the course Alice Meredith mentioned a great quote from this book “Now, Discover Your Strengths: How To Develop Your Talents And Those Of The People You Manage

Most organizations are built on two flawed assumptions about people:

(1) Each person can learn to be competent in almost anything.

(2) Each person’s greatest room for growth is in his or her areas of greatest weakness. …

Most organizations take their employees’ strengths for granted and focus on minimizing their weaknesses. They become expert in those areas where their employees struggle, delicately rename these ‘skill gaps’ or ‘areas of opportunity,’ then pack them off to training classes so the weaknesses can be fixed.

I believe that these few lines deserve a whole book to describe, analysis them and give examples.

 

Properties – the basics

Properties in C# is a special type of methods called accessors, they are accessed as if they are public member fields but with read, write and compute the value.

Is is declared like a field but with a get and set blocks inside, get is to read the property value and must return the same property type, set is to write to the property, using an implicit parameter called value.

Typically properties read and write from/to fields,

 

but we can also declare properties without depending on a field “automatic properties – introduced in C# 3.0”, when an automatic property is use, the compiler generates a private field for this property.

 

From MSDN:

A property is a member that provides a flexible mechanism to read, write, or compute the value of a private field. Properties can be used as if they are public data members, but they are actually special methods called accessors. This enables data to be accessed easily and still helps promote the safety and flexibility of methods.

Read Only Properties:

We can make a property read-only by not adding a set accessor to the property body:

We may also mark the set accessor as private, while this will prevent class consumers from changing the property value but this doesn’t mean that this property is a read only, it just means that the property set accessor is not accessible out side this class.

… And also note, that if we started to add a body for the get accessor, we will have to add a body for the set accessor as well, which may not make sense with read only purpose properties.

We can also make the property private field a readonly, which will make sure that the field will never change after initializing.

http://stackoverflow.com/a/3917805/20126

 

Starting from C# 6.0 we can declare a read only property as an expression-bodied property

Which can contain more logic:

 

Initializing properties:

To initialize a property we can do this using the container class constructor or give the property’s private field value on deceleration.

Starting from C# 6.0 we can initialize the property inline like this:

and it can be used on read only properties as well

 

Finally, It is highly recommended to read “Why Properties Matter“!

 

examples used

Different ways to hide an HTML Element

There are different ways to hide an HTML element from the client, just hiding not removing.

We need to hide p.hide element, so the user can’t see it.

Display:

Display css property, display is the most important and most used css property to control HTML elements layout.

display:none; can be used to hide an HTML element from the view and it will appear as if it was not there on the page, means the HTML element will be hidden without blocking any space.

Example: Text 1 | Text 2 | Text 3

If we apply display:none; on Text 2, it will be: Text 1 |  | Text 3

So to hide p.hide element using display property:

Visibility:

Visibility property is the CSS property to manage HTML visibility, unlike display which has different values to control the element layout, visibility is used jut for show and hide elements

visibility: hidden can be used to hide an element from the client, but it will keep the element space visible like this: Text 1 |        | Text 3

When to use which? based on requirements and the case you have, you just need to test it on all browsers, and there will be an unrecognizable performance differences between different ways

http://stackoverflow.com/a/11757103/20126

Opacity:

Opacity property is controlling the transparency of the html element, so we can use it to make the element fully transparent and this will hide the element from the client view.

Just make sure to test it on all browsers because on older IE browsers it had some special ways to implement. (hope that no one still using old IE browsers, because the wont see many things any way 🙂 )

And the same as Visibility property, it will hide the element but will keep blocking its space, so the client will see an empty space instead of the element.

Background color and color

While it is rarely used, but we can change the background-color element css property and all child elements to be the same as the background color of the page or the same as container background.

Will need to change the text color as well to make sure that text is not visible as well.

And on some elements we may need to remove borders, that’s why this way is not common to use.

Font size:

We can hide text elements by setting font-size property to 0

Position:

Using the position property and top left we can make the control appear outside the client view.

Clip-Path (Clip):

Last way I want to mention on this post is using clip-path css property

 

 

References:

http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content

https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

http://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page

http://stackoverflow.com/questions/775060/how-to-hide-the-content-of-the-div-in-css

Simplest menu using CSS

Many web designers I met had problems while  creating menus, specially which contains nested sub menus.

In some cases it is a real pain, but in most of cases it is simple, and the problem come when the designer start to implement the simple menu the hard wrong way, it will take ages from him to implement a simple menu while it just need few lines of css code.

Also he may think it can’t be done without javascript and jquery.

Try to think simple while writing your next menu and may be you will need my code as a starting point for a more complex menu.

What I am listing here is a very simple menu, putting in mind that this menu may contain infinite number of submenus.

Lets start with html:

 

 

This html use UL and LI to draw the menu html, you can use divs instead of UL and LI, this will not cause a problem.

The only hint I can point about the previous html code is that the sub menus html are inside the parent menu html.

Such as ‘Sub 1 >>’ is inside the parent ‘Main 1’, this will make our job easier.

Next CSS:

 ul li ul li
{
clear: both;
}

li
{
list-style-type: none;
float: left;
margin: 0 10px;
cursor: pointer;
width:100px;
}

li ul
{
display: none;
padding: 0;
}

li:hover > ul
{
display: block;
}

The most important lines for us are starting from line 15, everything before this is just for making things looks better and formatted better.

As you see it is just 4 lines of code to make the menu functional, the trick exists in line 21, which will show the UL which exists under any LI and the user hovered on it, and the ‘>’ means that we will show just the first level of UL not all nested UL.

Feel free to add more nested submenus and see how simple it is.

Demo

it’s weekend, facebook shoooooooo

I am not using facebook that much, I just open it for few moments everyday to check my friends news, But rarely I put a status or upload a picture there.

The question I have is: why employees get angry when their companies decide to block facebook during working hours?

By the way I don’t respect a company which do this, this is the last last step after many discussions with their employees.

 

After monitoring facebook, and my friends activities during all week days, I can say that: the number of posts on facebook get 95% down in weekends, get 50% down after working hours, and really the peak time for facebook is during the working hours. “all numbers are estimated and just based on my own experience

In my point of view, the employer pay us salaries to get from us work, for example he pays us 100$ per week to work 40 hours per week, 8 hours per day, so our salary = 40 hours work including a rest hour per day.

So if you take all this time daily on facebook or chatting, do you think you deserve this salary? “if the answer yes: sorry this post came to you by mistake discard it 😉

 

Other notes:

I know many workers I worked with, facebook is a permanent browser tab, never close it.

I know others, just open facebook on weekends “may be something bad also for their families 😀

Avoid sending Ajax request parameters in query string style

While reviewing some code, I found someone calling jQuery Ajax like this:

$.ajax({
       type: “POST”,
       url: “/AddPost”,
       data:  “postText=”+ PostText ,
       dataType: “json”,
       success: function (status) {

       }
}); //$.ajax({

And as you see in the previous code, it is sending the data using this line: data: “postText=”+ PostText ,

This is like a query string style, this will work well but image the user inserted a special char in PostText, such as ?? you will get on the server un expected value “”jQuery15107041011152323335_1309357585354″”

So never use this style while dealing with Ajax calls, you need to post it in JSON style like this:

$.ajax({
        type: “POST”,
        url: “/AddPost”,
        data: { postText: PostText },
        dataType: “json”,
        success: function (status) {

        }
}); //$.ajax({

This will work whatever char the user will insert.

Javascript based Data Grids

sigma_grid-ajax_editable_data_grid_22641

 

I found in this blog post some good javascript based grids http://www.queness.com/post/7300/7-robust-and-feature-packed-javascript-grid-plugins

 

Here are their links:

1- http://flexigrid.info/

2- http://www.webismymind.be/editablegrid/

3- http://www.trirand.com/blog/

4- http://tablesorter.com/docs/

5- http://www.datatables.net/

6- https://github.com/mleibman/SlickGrid/wiki

7- http://blog.jqueryui.com/2011/02/unleash-the-grid/

List of Colors in System.Drawing.Color

Few lines of code to print all System.Drawing.Color colors on a web page.

loop on System.Drawing.Color using KnownColor

 

Demo