Chrome Developer Tools Tips and Tricks

In the last ALT.NET meetup @Shay Friedman talked about “Chrome Developer Tools Tips & Tricks”. All the audience, myself included were amazed from the features that Shay has shown that neither of us knew.

The Tips & Tricks:

1. Functions navigation in JavaScript source file:

You’re all familiar with this window:

Some of you might know that if you hit Ctrl + P you can open a JS source file from your workspace. However did you know that if you hit Ctrl + Shift + P you can navigate to a function which is included in the opened file!

No more endless scrolling!

2. Style search

This window is also pretty common.

We scroll down in order to figure out which Style messes our element’s css. However did you notice that you can Search (!!!) for a style property or value???

3. Color picker

This is a color property.

Usually in order to change a color you will double-click the area and manually write the new color. However if you click on the colored box itself you will get a color picker dialog!

And if you move the cursor over the page you could even pick a color!!!

4. Disable Cache and reload cache

You remember that time tried your best to hit F5 to refresh the page but had no luck? And then you realized that your cache wasn’t disabled. First and foremost disable it. However if for some reason you still think that your changes are not loaded to the browser you can right click the refresh icon (while the developer tools is open) and try the Hard Reload or the Empty cache and Hard reload it. That should do it.

5. Filtering the network files

If you click on the filter icon in the network tab you could filter all the request’s files by a wanted file type. Hold Ctrl and you can multi select the file types

6. Black box script in Call Stack

When you debug your app and hit a break point you’ll sometimes want to check the call stack window to see previous calls.

Since I use angular this call stack has a lot of angular’s calls which I couldn’t care less about them. However, if I right-click on the angular script file I can select it as a Blackbox script.

And now I won’t see its calls in the call stack window J

If you don’t know some of those features you don’t need to feel embarrassed. Google uses tons of UX best practices in all its products in order to reveal all the available features, but not in Chrome. Here I think they actually tried to hide some of those features. J

If you have more tricks and tips then feel free to comment

Improving Angular.js performance using One Time Binding

In the previous post I explained how the $digest loop works and how to increase performance using the ng-model-options directive. In this post we’ll take a look at ‘one time binding’ feature.

As I mentioned before the $digest loop goes through all the registered watches every time in order to check whether they need to be updated. However not all our scope variables and models should have binding or be updated after they have been initialized, for example: a logo path, a title, names, some constant options that we used ng-repeat for them and so on. All those variables should be initialized and not to be updated until a full page refresh.

One time binding is a feature that was introduced along with ng-model-options in Angular 1.3. In order to set that a scope variable should not be updated all you have to do is add :: before the variable name:

<input type="text" ng-model="name" value="text" />
    {{::name}}
    {{name}}

Adding it before the scope variable tells Angular not to register a watch on the variable and so decreases the amount of watches for the $digest loop to check which leads to increase in the app’s performance.

Enjoy

Improving Angular.js performance using ng-model-options

Every app has a search ability. Some apps wait for the user to hit “Enter” and then send the search string to the server, others (especially when using Angular) bind every user’s key stroke to a request to the server. In my opinion the second option has better user experience since the user starts to receive results while he is typing and most likely will get what he is searching for before he finished typing the whole search string and he is no more required to press another button after he finished typing.

However if you have a large Database and your search request take more than several milliseconds then there is no use to send a request to the server after every keystroke – the user will not get the relevant results. So how do you control when to send the request to the server?

Ng-model-options

Ng-model-options is a directive that was introduced in Angular 1.3. It has some really nice features:

updateOn:

With the updateOn parameter, we can define which events our input should be bound to. For example, if we want our model to be updated only after the user removed the focus of our input element, we can simply do so by applying the ngModelOptions with the following configuration:

<input type="search"
       ng-model="searchQuery"
       ng-model-options="{ updateOn: 'blur' }"/>

Debounce:

debounce defines an integer value which represents a model update delay in milliseconds. Which means, if we take the example mentioned above, that we want to update our model 300 milliseconds after the user stopped typing, we can do so by defining a debounce value of 300 like this:

<input type="search"
       ng-model="searchQuery"
       ng-model-options="{ debounce: 300 }" />

Advanced options: we can configure how the update delay should be done for different events. Controlling the debounce delay for specific events can be done by defining an object instead of a integer value, where keys represent the event name and values the debounce delay. A delay of 0 triggers an immediate model update.

The following code generates a model update delay of 300 milliseconds when the user types into our input, but an immediate update when removing the focus:

<input type="search"
       ng-model="searchQuery"
       ng-model-options="{ updateOn: 'default blur',
                           debounce: { 'default': 300,
                                       'blur': 0 } }">

How does it work?

The ng-model-options controls how the ngModel is updated.

By default Angular automatically registers a watch for every scope variable for updating the binding, the update itself happens due to the $digest loop that is triggered at every key stroke. The $digest loop checks if the model has a new value and if so it updates every model instances in the app without making us add event listeners or manually update the DOM.

As you can see this means that the $digest loop has to go through all the registered watches on the scope at every key stroke and depending on the watches callbacks that can be very expensive. So the debounce triggers the $digest loop after the defined milliseconds allowing the user to type a meaningful search phrase and reduce the amount of the $digest loops.

In the next post we’ll see how ‘one time binding’ also increases our app’s performance.

Ng-Hint – Intellisense for Angular.js

Angular is great. I love it and in my opinion is the best thing that happened to the web development community in the last several years. However as much as I love Angular there is nothing more annoying than searching all other your code while trying to figure out why the #@$% it doesn’t work! And then finally you see it - you forgot a module or misspelled ‘ng-repeat’. If only Angular would have some sort of intellisense what would warn me when I make those mistakes.

Angular-Hint

Is a great library that scans your code and writes warnings to your browser console.

It has several modules:

• angular-hint-controllers - Warns about use of global controllers and hints about best practices for controller naming

• angular-hint-directives - Hints about misspelled attributes and tags, directives and more:

  <ul ng-repaet="point in points">
     <li>{{point}}</li>
  </ul>
  

The console will show this hint:

• angular-hint-dom - Warns about use of DOM APIs in controllers. Angular best practice is to avoid using DOM API from the controller so that this code will trigger a warning:

angular.module('sample').controller(function(){
//Accessing the DOM API `document.getElementById()` triggers an AngularHintDOM warning
    var list = document.getElementById('list');
    var newListItem = document.createElement('div');
    newListItem.innerHTML = 'Item 1';
    list.appendChild(newListItem);
});

angular-hint-events - Identifies undefined variables in event expressions. For example if you have a ng-click targeting some function that doesn’t exists in your controller : 

<a ng-click="increments">Count!</a>
$scope.increment = function(){
   ++$scope.count
};

 The docs say that this code should trigger a hint, unfortunately it didn’t work for me  – they have an open issue for that.

• angular-hint-interpolation - Notifies of undefined parts of interpolations chains and suggests available variables
  
• angular-hint-modules - Identifies missing module namespaces, undeclared modules, multiple uses of ng-app and more:

 var myApp = angular.module('myApp', []);

I’ve also included :

<script src="src/angular-messages.js"></script>

which has a module in it. So the console has a warning:

The first warning is a known issue and should be ignored.

This is a great library however is still has some open issues and the worst part is that if you reference the script hint.js it will crash your app . They have several open issues addressing this problem. I truly hope that they would fix it soon since it is a great library. Meanwhile you could add the script before you commit your work just to see if there are no warnings and you have applied all the best practices.

Hint: Keep your eye on Angular-Hint!

The World's Greatest Workplace

Do you wake up in the morning with a big smile on your face? Is it because it is another day at your job? I guess not. However we all hope that someday we'll work in such a place.

This TED talk is about an amazing Malaysian company that its goal is to become "The World' Greatest Workplace".

The founder of the Mindvalley company describes why his employees jump out of their bed every morning so they can go to work.

 There are FIVE principles that the company does in order to become the "World's greatest workplace":

1.       Happiness – they built an advanced and a beautiful workspace for the employees while giving them the freedom to use it (reading a book on a hammock). They allow their employees to decide when to come to work; it doesn’t matter if you work at night or on a holiday as long as the work gets done. They also arrange parties and festivals for the company and try their best in turning their employees into friends acknowledging that friends work better than random people.

They have turned their weekly company meeting into "weekly awesomeness report" which looks more like the "Daily Show" than a company meeting.

2.       A Noble Mission - The Company has a grand mission to touch 500 million lives using their company's products and knowledge. All the employees share this goal.

3.       Quests – They use a lot of gamification principles in order to make their work day as a game.

a.       Badges for achievements as desktop icons that everybody can see like "The Flash Badge" for the employee who finished his tasks the fastest and etc.

b.      Every team submits their high score in the end of the week and they try to improve it on the next one.

c.       They have an inside website where all the employees can vote for other employees and tell them how great they are, they also can send an icon or a badge to another employee in order to thank them for something – imagine coming to work and getting a note telling you how awesome you are.

d.      "S.P.L.A.S.H" – an inside group of employees that nobody in the company knows who is a member of it. They have a secret budget to do funny things every two weeks like a "Starbucks day" when every employee gets a cup of coffee when he gets onto the office or a mustache day when all the men gets a fake mustache and they have to wear it for the entire day. The little things are what make the people happy.

4.       Personal Growth - 45/5 rule: Every employee works no longer than 45 hours a week while 5 hours from it are dedicated for personal growth. The company wants the people to invest in themselves and become greater. Another special thing is that every employee shares his top life goals that he wishes to achieve. The managers and the other employees try to help each other in achieving them. You can truly know your employees by helping them achieve their lifetime goals – that what makes a true connection.

5.       Tribal Dynamics - Become a tribe. Just watch it. It's awesome.

If you are a founder or a manager of company make the employee's happiness as your goal.  Don’t focus mainly on your revenue or the productivity of the company, is not the main issue, when you make people excited so hard that they want to jump out of the bed every morning to go to work then the people will find creative ways to improve productivity, get the work done and increase the revenue.

By the way if you are a team leader and your company is not the world's greatest workplace yet then you should imply those topics on your team where the team members happiness  is your responsibility (a festival in Paradise Islands is not needed, a nice day outside the office will do).  Maybe it won't make your company the "world's greatest workplace" but it will make your team the "world's greatest team".

"Work, play – makes no difference to me. It's all just living."

Tomorrow is work

Enjoy

Help Pages for ASP.NET Web API

Let's say that you have a web application with some web services. A user or an application that wants to use your services must know your api. In order to expose your api you can write some manual documentation or you could use ASP.NET Help Pages which is a really nice feature that allows you to automatically generate a help page that displays your whole REST api.

Enjoy.

TED: Find mentors and read books

This is a great lecture about making your dreams come true. 

We all want a good life. We all want to be great. However greatness doesn't just come to us. We have to pay for it. We have to invest in ourselves - become greater and constantly achieve new goals.

We can do it by our self the hard way but there are people who've already succeeded, people who can teach you and guide you - they should be you mentors. Find them! They could be your shortcut.

Some of the greatest mentors in the world are dead and others are unreachable (perhaps Bill Gates will answer my emails some day), that doesn't mean that you cannot learn from them. Read their books, their blogs and listen to their podcasts and interviews. If you want to be great you must learn from the great.

I want a good life. I'm not there yet, it will be hard, but I'm willing to pay for it.

.