Nested Conditions for SCSS

We all know that CSS doesn’t handle any conditions.

It was wonderful when we found that there is capability to execute conditional statements in CSS provided by some css pre-processors such as LESS and SASS (Latest: SCSS which has very similar syntax to Less).

I had been working with both of them lately. Both are awesome.

To my surprise, there was no reference of using nested loops in any of them.

I happened to work around for loop in scss to create a css which makes awesome grids.
The idea was inspired from: http://css-tricks.com/dont-overthink-it-grids/

The for loop has been used in the following way:

$min_width: "(max-width: 700px)"; /* For Responsive - 100% width for all columns 
                                    below 700px resolution */
$n: 16;

@for $i from 1 through $n {
  @for $j from 1 through $i {
    $new_width: $j/$i*100%;
    .col-#{$j}-#{$i} {
      width: $new_width;
      @media #{$min_width} {
        width: 100%;
      }
    }
  }
}

It works totally fine and create a series of css classes in the following manner:

.col-1-1 {width:100%;}
.col-1-2 {width:50%;} 
.col-2-2 {width:100%;}
.col-1-3 {width:33.333%;}
.col-2-3 {width:66.666%;}
.col-3-3 {width:100%;}
.......... likewise ..........
@media (max-width: 700px) {
  .col-1-1 {width:100%;}
  .col-1-2 {width:100%;} 
  .col-2-2 {width:100%;}
  .col-1-3 {width:100%;}
  .col-2-3 {width:100%;}
  .col-3-3 {width:100%;}
  .......... likewise ..........
}

CSS Performance Tip #2 Browser Reflow & Repaint

This post has been inspired from:

Reflows & Repaints: CSS Performance making your JavaScript slow?

What is Repaint and Reflow?
A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree. A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.

Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.

How to avoid reflows or at least minimize their impact on performance?

• Change classes on the element you wish to style (as low in the dom tree as possible)
• Avoid setting multiple inline styles
• Apply animations to elements that are position fixed or absolute. They don’t affect other elements layout, so they will only cause a repaint rather than a full reflow. This is much less costly.
• Trade smoothness for speed. What they mean by this is that you may want to move an animation 1 pixel at a time, but if the animation and subsequent reflows use 100% of the CPU the animation will seem jumpy as the browser struggles to update the flow. Moving the animated element by 3 pixels at a time may seem slightly less smooth on very fast machines, but it won’t cause CPU thrashing on slower machines and mobile devices.
• Avoid tables for layout (or set table-layout fixed)
• Avoid JavaScript expressions in the CSS (IE only)

CSS Performance Tip #1

As we all know that most of the browsers read our css selectors from right to left.

For example:

ul > li > a { color:#ff0000; }

Browser will first interpret anchor (a) tag and then will filter it in list (li) tag and later in unsorted list (ul) tag to apply color to (a) tag.

There are four kinds of key selectors: ID, class, tag, and universal.

ID (Ex: #main-title)     >>  Most Efficient
Class (Ex: .major)         >>  Second Most
Tag (Ex: a)                   >>  Third
Universal (Ex: *)          >>  Very Inefficient

In the example below, when we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:

#main-list > li {   }    /*  is actually slower than it might seem  */ 

Usually, since ID’s are so efficient, we would think the browser could just find that ID quickly and then find the li children quickly. But in reality, the relatively slow li tag runs first in this case.

What is Usability

Hi Folks,

Usability is not easy to define. The meaning of ‘usability’ is sometimes reduced to “easy to use,” but this over-simplifies the problem and provides little guidance for the user interface designer. There are a few basic characteristics of usability which helps guide the user-centered design tasks to the goal of usable products.

There are many other important quality attributes. Before going deeper into Usability – we would be digging into another attribute – utility, which refers to the design’s functionality.

Usability and utility are equally important and together determine whether something is useful: It matters little that something is easy if it’s not what you want. It’s also no good if the system can hypothetically do what you want, but you can’t make it happen because the user interface is too difficult. To study a design’s utility, you can use the same user research methods that improve usability.

Now coming back to Usability, we can define it by elaborating the 5 Es – efficient, effective, engaging, error tolerant and easy to learn. These 5 Es describe the multifaceted characteristics of usability. Interfaces are evaluated against the combination of these characteristics which best describe the user’s requirements for success and satisfaction.

• Effective

  Effectiveness is the completeness and accuracy with which users achieve specified goals. It is determined by looking at whether the user’s goals were met successfully and whether all work is correct.

  It can sometimes be difficult to separate effectiveness from efficiency, but they are not the same. Efficiency is concerned primarily with how quickly a task can be completed, while effectiveness considers how well the work is done. Not all tasks require efficiency to be the first principle. For example, in interfaces to financial systems (such as banking machines), effective use of the system — withdrawing the correct amount of money, selecting the right account, making a transfer correctly – are more important than marginal gains in speed. This assumes, of course, that the designer has not created an annoying or over-controlling interface in the name of effectiveness.

• Efficiency
  Efficiency can be described as the speed (with accuracy) in which users can complete the tasks for which they use the product. ISO 9241 defines efficiency as the total resources expended in a task. Efficiency metrics include the number of clicks or keystrokes required or the total ‘time on task’

  It is important to be sure to define the task from the user’s point of view, rather than as a single, granular interaction. For example, a knowledge base which doled out small snippets of information might be very efficient if each retrieval was considered one task, but inefficient when the entire task of learning enough to answer a user’s question is considered.

• Engaging

  An interface is engaging if it is pleasant and satisfying to use. The visual design is the most obvious element of this characteristic. The style of the visual presentation, the number, functions and types of graphic images or colors (especially on web sites), and the use of any multimedia elements are all part of a user’s immediate reaction. But more subtle aspects of the interface also affect how engaging it is. The design and readability of the text can change a user’s relationship to the interface as can the way information is chunked for presentation. Equally important is the style of the interaction which might range from a game-like simulation to a simple menu-command system.

• Error Tolerant

  The ultimate goal is a system which has no errors. But, product developers are human, and computer systems far from perfect, so errors may occur. An error tolerant program is designed to prevent errors caused by the user’s interaction, and to help the user in recovering from any errors that do occur.

  Note that a highly usable interface might treat error messages as part of the interface, including not only a clear description of the problem, but also direct links to choices for a path to correct the problem. Errors might also occur because the designer did not predict the full range of ways that a user might interact with the program. For example, if a required element is missing simply presenting a way to fill in that data can make an error message look more like a wizard. If a choice is not made, it can be presented without any punitive language. (However, it is important to note that it is possible for an interface to become intrusive, or too actively predictive.)

• Easy to Learn

  One of the biggest objections to “usability” comes from people who fear that it will be used to create products with a low barrier to entry, but which are not powerful enough for long, sustained use.

  But learning goes on for the life of the use of a product. Users may require access to new functionality, expand their scope of work, explore new options or change their own workflow or process. These changes might be instigated by external changes in the environment, or might be the result of exploration within the interface.

How to change the color of placeholder attribute text of input element?

The CSS3 Placeholder Pseudo-element

 

One of the features of HTML5 that was very quickly adapted by the developers around the globe and almost all the browsers developed since then, was “placeholder” attribute in input element. People stopped using javascript snippet in their code with onclick and onblur events.

Basically, placeholder attribute is used for displaying placeholder (informative) text in input fields, which fades away as soon as something is typed in the input box.

The placeholder-text is always faded (has opacity less than 1 = light in color) as compared to the original value text of input box. So, I was looking for a way to change the text-styling for the placeholder-text.

The latest ::input-placeholder CSS pseudo-element gives us a standards-compliant way to style placeholder text, regardless of an input field’s default styles. However most of the browsers have started to implement it but still it is preferred to use prefixed notations for each browser.

Example :

input {
	padding: 0px 15px;
	width: 300px;
	height: 30px;
	border: 1px solid #555;
	box-shadow: inset 1px 1px 1px 1px #000;
	border-radius: 5px;
	background: #666;
	font-size: 14px;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
}
input::-webkit-input-placeholder {
	color: rgba(255,0,255,1); /* white color with alpha = 1 (alpha = opacity varies on a scale of 0 to 1 with decimal values in between) */
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: underline;  /* blink property doesn't work in chrome right now */
}
input::-moz-placeholder {
	color: rgba(255,0,255,1);
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 25px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(255,0,255,1);    /* alpha property doesn't properly work Firefox */
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}
input:-ms-input-placeholder { 
	color: rgba(255,0,255,1);
	text-transform: capitalize;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 0px 10px;
	text-align: left;
	text-decoration: blink;
}

Recent Intuting Statrtups of Silicon Valley

The editors at Best Accounting Degrees decided to research the topic of:

Recent best start-ups in Silicon Valley.

The happiest people don’t have everything they want.

The happiest people don’t have everything they want.

 

The happiest people don’t have everything they want. They make the most out of what they already have.

 

The happiest people don’t have everything they want.
They make the most out of what they already have.
Misery starts when a person looks at the 10% missing and overlooks the 90% blessing.
We all have our own share of blessings. Some get them fast. Some wait for a long time.
What’s important is that it comes at a time we most need it.
GOD knows best and He will give the best in His own perfect time.

How to fix the Twitter Bootstrap Modal box height and width with central position?

 

Recently, while working on a web-portal which has lots of modal boxes to keep the constant flow of information, I encountered an issue of keeping the position of modal boxes in the center of the page while changing the height and width of the modal box specifically as per the modal-box ID.

The solution for this fix was achieved by tweaking in the CSS specifically on the basis of ID’s.

Height fix

If you want to accommodate long form of elements in the modal box and do not want the scroll-bar to appear, set your css as following:

#newModalID .modal-body {
max-height: 800px;
}

Remember that the max-height has to be given only for the modal-body and not the whole modal box. Another thing to be noticed is that, it doesn’t set the height to 800px but it just gives the flexibility to the .modal-body element to stretch up to 800px so as to accommodate anything without scroll-bar.

Width fix

Now, while setting the width you can deal directly with the whole modal-box not just the .modal-body element. Set the width as per your choice for any specific modal-box. Then, you can change the margin accordingly to accommodate the new width.

#newModalID {
	width: 900px; /* SET THE WIDTH OF THE MODAL */
	margin: -250px 0 0 -450px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
}

Remember that you have to set the left margin – half of width (here: 900/2 = 450) and as a negative integer.

To fix the vertical position, you have to simply modify the margins to get the desired effect. Often when you change the height of a modal you may want to push the modal up to prevent the modal going off the bottom of the page on smaller resolutions, so you can simply increase the negative top margin value:

#newModalID {
	margin: -120px 0 0 -450px; /* PLAY WITH THE VALUES TO SEE GET THE DESIRED EFFECT */
}

Truncating / Triming the string with Ellipsis (…)

 

p {
white-space: nowrap;
width: 100%;
overflow: hidden;              /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
}

 

Here according to the css defined above the string given in paragraph tags will be truncated or trimmed using ellipsis (the symbol of 3 dots). All the 4 properties are essential to define. Explaining the role of all 4 properties :

• white-space: nowrap; >>> Brings the text in one single line.
• width: 100%; >>> Sets the width of the paragraph tag. Here in this case the width of parent tag of para tag will be considered.
• overflow: hidden; >>> The text going out of width (range / limit) of the para tag is set hidden.
• text-overflow: ellipsis; >>> Gives 3 dots where the text was truncated. The ellipsis would be 100% visible in any given case, doesn’t matter how much text is trimmed.

 My name is Anthony Gonsalves. I work in a coal mine.

If the width of parent element of p tag has width of 100px, the result string would be : My name is …

Set goals in your Life

 

The most important thing about GOALS is having one !

 

Each day of life is a new opportunity, you need to grab it.

In my early days of childhood, I read somewhere that the time is money. Despite of reading and listening about the importance of time infinite number of times I could never realize how precious it is.
While appearing for my campus placement interviews, recruiters used to ask certain set of questions:
What are your plans?
What are your goals?
Where do you see yourself after 5 years down the line?

I never had any goal. I never had any plan. I was not driving my life. I was not utilizing my time. I had no direction. I was just passing time. Life was driving me.
I was satisfied and happy with whatever I scored, with whatever I achieve and whatever I get.

But now my desires have surpassed my feelings of self-satisfaction and I’m engrossed in the process of making my life worth living.
I have now realized the importance of goals, aims and desires.