Thursday, 23 June 2016

15 Tips for Most Productive Entrepreneurs

Have you ever wondered how the world's top entrepreneurs get so much done in their days? After all, they have the same 24 hour days and 7 day weeks, yet they consistently get so much more done in that time.
Here are 15 time habits of the best entrepreneurs.

1. Tap into the real power of "Now!"

Do it now.
Decide it now.
Delegate it now.
Enjoy it now.
Finish it now.
Start it now.
The best time masters have a habit of getting it done now, whatever it may be.

2. Relentlessly focus on one thing at a time.

Multitasking is just not a pathway to business success. Sure, you need to be flexible and able to shift your attention from one thing to another, but the best time masters have cultivated their ability to block out distractions and temptations and focus on one thing at a time, and follow this most important thing until it is complete and producing for their businesses.

3. Learn to be both decisive and to purposefully delay decisions.

Some decisions should be put off until a later day; they just don't need to be made now. Other decisions (and generally the larger pool) should be made on the spot. One of the most powerful habits you can cultivate is that of making solid decisions once you have the information you need at hand. Putting it off usually just increases the time that decision takes and the cognitive load it places upon you, without giving you a better decision. So ask yourself, "Will having more time really increase the quality of my decision?" If the answer is yes, delay it. If the answer is no, make your call and get on with its implementation.

4. Do your most-feared thing first.

In the words of Mark Twain, "Eat that frog." Just get it over with and you'll free up a tremendous amount of energy with which to get on to the rest of your day. This may be a phone call you've been dreading to make, or an email you were scared to write, or a team member you need to sit down and talk with. Get it over with as early in the day as possible.

5. Learn to say no to things that don't advance the company and create little value.

This is perhaps the single greatest secret top entrepreneurs leverage to create more value--they grow their ability to say no to everything in their working life that doesn't move them toward their important business goals. Less-successful entrepreneurs choose the comfort of saying yes to low-value people and activities rather than do the uncomfortable thing and fanatically guard their time so they can advance their companies.

6. Do one extra ...

Make one extra call ...
Send out one extra letter ...
Visit one extra prospect ...
Reach out to one more potential strategic partner ...
When you add up all these one-extras, they just might make the difference.

7. Learn when to cut your losses--too many people hang on too long.

If you know a person, a strategy, a product, or a partnership just isn't going to get you what you need, make the hard decision early and free up your resources to find a solution that will.

8. Persevere--too many people give up too early.

If you believe that a person, strategy, product, or partnership will yield the results you want, and if you have questioned the assumptions that would have to prove true for that person, strategy, product, or partnership to succeed, then stay the course.

9. Narrow your focus.

As the best entrepreneurs grow their companies, they narrow the things they do for their companies to those few that create magnitudes more value. More is not better; better is better. Develop the habit of narrowing your focus to those tasks and activities that create the most value for your company and progressively hand over everything else to your systems, team, and internal controls.

10. Learn to let go (delegate, defer, dump, forgive).

11. Feed your winners; starve your losers.

This applies to every area of your company. Cut your lowest half of marketing activities and invest that freed-up time, talent, and money to reinvest in scaling the top 10 percent of your marketing activities. Cut your lowest producing product lines, and invest the freed-up resources in scaling your winning products and service lines. And stop wasting your coaching time trying to make a bottom producer better; instead, invest that time in making your winning team members even more productive.

12. Start your day by identifying your "big rocks." 

What one or two tasks, if you completed them (or a part of them) today, would have the biggest impact on advancing your company? These are your big rocks for the day and these deserve one to three hours of your best time today.

13. Develop your integrity muscles by making and keeping commitments.

Be on time. Finish what you said you would do. And do all of this without excuses and even when you don't feel like it because the best time masters know that your integrity is a muscle, the more you exercise it the stronger it becomes.

14. Maximize your learning from your life.

After a project, event, or meeting, ask yourself, "What went well? What would I do different next time? What are the most important lessons for me to take from this experience?"

15. Wherever you are, be there!

Let's broaden our definition of success to include joy, growth, and peace of mind. Then we can confidently say that the most successful entrepreneurs are intensely present wherever they are. If they are in a meeting, they are focused on maximizing the output of that meeting. If they are working on a project, they are giving that project their best attention. If they are at home with their family, they are fully present with their kids and spouse. This last habit takes a good bit of practice, because your mind will wander. When it does, notice it, and bring your attention back to where you are and what matters most in that moment.
For more ideas on growing your business, including a free tool kit with 21 in-depth video trainings to help you scale your business and get your life back,

Tuesday, 7 June 2016

better naming methods in CSS

How to name CSS classes

Naming things is the hardest thing in computer science, but, in CSS, you're naming things all day long...

Based on my favorite articles on the topic, and recent work experience, here are my 2 cents about how to properly name CSS classes.

0. Before to think about class name, give a good name to HTML elements

If it’s an input, use the input element.
It will be far easier for the reader to scan the HTML document.
Example :
<div class='submit'/> <!-- Wooot ? -->
<input class='submit'/> <!-- Ah, ok -->

1. Put the class name at the lowest possible level

It impact how classes will be named. Always use the class name directly on the HTML element you want to style, even if seems to cost an extra effort. Check the article of Chris Coyer below if it is not clear why.
Example :
<main class='mainly'>
  <p>Lorem ipsum</p> <!-- I'd like to style this paragraph-->
main.mainly p { /* DON'T DO THIS */

/* Instead, assign a class name to p : <p class='paragraphly' /> */
.paragraphly {
Source : Chris Coyer

2. Use content to find a name

.c-header-logo {
  /* Just by reading the name, I guess this selector targets the logo of the header. */
Source :

3. Don’t use content, if the picture speaks louder

Let’s say the header logo actually looks like this :
Then don’t call it header-logo.
.guillotine {
  /* Oh, I see what we are trying to style */

4. Try -like suffix for better reuse.

Example :
h3, .h3-like {
/* some styling */
<p class='h3-title'>
  <!--I am NOT an h3 title, but since designer asked me to look the same,
      I can't complain about my classname-->
Source : KNACSS v4

5. Don’t use camelCase

It makes things harder to read.
Example :
.navToOneModuleICreated {
/* versus */
.nav-to-one-module-i-created {
Source : Harry Roberts

6. Try BEM

It’s one of the most commonly used convention by now. - It looks really weird as first glance, don’t be afraid - The entry cost is extremely low - You can try it now on any part of existing project - long term benefits are huge
(double dash) means variation of the element. (double underscore) means children of the element.
<button class='btn btn--warning'> <!-- .btn--warning one of the variation of .btn-->
  <div class="btn__text"></div> <!-- .btn__text one of the child of .btn-->
.btn--warning {
/* Yay ! By convention, I know that code here relate to the variation "warning" of a button, without event looking at the HMTL code. What a relief !*/
.btn__text {
/* For same reason, I know that this style will target text in a button */

7. Try more uglier

BEM opens new possibilities, even if their conventions looks icky at first glance.
But very unusual also means that the eye can quickly grab what is actually happening and where, and for BEM, believe me, it works.
Now you can try more icky convention, as long as you stick to it the whole project.
.DIMENSIONS_OF_mycomponent {
  /* Ickier is almost impossible. But now it is more clear what it is about.*/
  /* I used it for SASS placeholder.*/
  /* Don't abuse of this rule, though.*/

8. Use fully descriptive words

Apart from big classics like nav, txt, url… you should avoid any abbreviation.
Source :

9. Try to use only one letter as a meaningful prefix

If it’s a visual component, start with c- If it’s an object (like layout), start with o- I just love this trick from Harry Roberts.
<button class='o-layout'>
  <div class='o-layout-item o-grid c-button'></div>
  <!-- When scanning HTML, the eye can quickly differentiate who does what-->
Source : Harry Roberts

10. Try [] when too much classes of a kind

This little trick allows you to scan HTML quicker. Notice the classes .[ and .] do not exists in your CSS files, it is only here to help others to read your HTML.
<button class='[ o-layout ]'>
  <div class='[ o-layout-item o-layout-item--first ] c-button'></div>
  <!-- When scanning HTML, the eye can quickly differentiate who does what-->

11. Use a js- prefix if it is only used by javascript

If Javascript needs to target an element, don’t make it rely on CSS style. Give a dedicated prefix, like js-.
<button class='js-click-me'>
  <!-- When scanning HTML, I understand that this button has no CSS selector to design it.
       But, javascript will use it, probably to catch some event.-->

12. Try to separate parent from children

If a class has to many responsibilities, split it into 2 separated properties.
<button class='a'>
  <!-- This class below will contain a mix of properties
       some concerned by a-b relationship
       some concerned by b-c relationship
       CSS file is going to be hard to read-->
  <div class='child-of-a-and-parent-of-c'>
    <div class='c'>
<button class='a'>
  <!-- Split into 2 classes-->
  <div class='child-of-a parent-of-c'>
    <div class='c'>

13. Unsemantic classes should explicitly describe their properties

Most of them contain only one property, there are no value in hiding what that is.

.horizontal-alignment { /* Don't do this. Horizontal alignment can be achieved in many way, when scanning this selector in HTML file, we have no clue about HOW it is achieved. */
  text-align: center;
/* Prefer this one. Using BEM, and a one-character prefix, see above */
.u-text-align--center {
  text-align: center;

14. Explicit hacks (I)

If you’re not happy with your CSS selector, say it to everybody.
It will happen anyway, even to the best CSSuper(wo)men, so don’t be ashamed of it.
In your team, find a word that will be used for such cases, document it, and stick to it all along the lifetime of your project.
For us, Atom IDE automatically highlight the word “HACK” so I used it.

.my-component {
  margin-left: -7px; /* HACK here : magic number, here to compensate gutter */

15. Explicit hacks (II)

Another valuable option is to put every weird code into a dedicated file, namedshame.css
Again, Harry Roberts come to the rescue.
Source : Harry Roberts

16. Try to avoid more than two words for a given name

The name must be self-descriptive in one or two words, or code will be hard to maintain.
.button {
  /* OK */
.dropdown-button {
  /* still OK */
.dropdown-button-part-one {
  /* Hmm, still ok, but will be unredable when adding children, for ex : */
.dropdown-button-part-one__button-admin {
  /* Yikes !!! */

17. Use data-state attribute to specify state of your component

State manipulation happens very often. It happens so frequently that give the state a dedicated attribute saves times and effort over the long term.
<button class='c-button c-button--warning is-active'>
  <!-- Don't do this-->
<button class='c-button c-button--warning' data-state='is-active'>
  <!-- That's better.
  I removed a class declaration,
  it enforces the one-state-rule,
  and for those who use SASS, it makes code cleaner.-->
Source : Unfortunately, I can’t remember who wrote about this, but his advice was very helpful.

18. Use has- or is- prefix for the state

State manipulation happens very often. (bis) So adhere to a strict naming convention for the state will be very helpful
.activated {
  /* Don't do this.  I'm not quite sure what you are talking about ?*/
.is-activated {
  /* Yes, you're styling a state. */

19. Use a dash as a prefix when combining multiple state

You should do everything you can to avoid state combination. But, when it is not possible, you can use this very helpful trick from Ben Smithett.
<button class="btn -color-red -size-large -shape-round"></button>
Source : Ben Smithett

20. Try single quote instead of double quote when declaring selector in HTML

It reduces noise a lot when reading the document.
<button class="c-button">
  <!-- BAD EXAMPLE : it uses " instead of '. Not a big deal on this tiny example, but when you deal with hundreds of selector in a HTML file, single quote is a better idea.-->
<button class='c-button'>
  <!-- Good !-->
Source : I learned it when I worked with the Predicsis team

21. Don’t follow rules

I tried to give you some guidelines based on my own experience, and articles that helped me the most.
I doesn’t mean everything will work for you, so my best advice is :
1) Try to improve your naming, 2) keep it consistent for a given project, 3) but avoid over-engineering.
If you don’t feel comfortable, just skip it.
Enjoy !

Alternative content