CSS specificity rules

If you’re reading this, you’re probably looking for how to know which CSS rules are applied. Rule of thumb:

W3C CSS2 specs : the most specific CSS rule is chosen by UA.

How to know the specificity of a CSS ? Refer to the table below
Excerpts from MDN

The specificity is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

Ascending order of specificity

Weight	Selectors	Examples
1	Universal selectors	*
2	Type selectors	div
3	Class selectors	· li.descriptor-link
4	Attributes selectors	li[attr]
5	Pseudo-classes	:nth-of-type
6	ID selectors	#id
7	Inline style	style=”color:green”

Notes:

• In case of specificity equality, the latest declaration found in the CSS is applied to the element.
• Proximity of elements in the document tree has no effect on the specificity.

How to setup a Load Balancer via Application Request Routing (ARR) extension on IIS

This is the walk through on how to set up an Load Balancer on IIS 7.5 using Application Request Routing extension.

Requirements

• IIS (how to install IIS)
• ARR module (download link)

Steps to create Load Balancer

1. Create a dummy web application to receive incoming requests.

Note: this web app is just a dummy web on port 80, which will acts as request router to our back-end web farm.

2. Configure the dummy web app
In the Create Web Site dialog, use port 80 and the host name as of your domain.

The website physical path can just contains a very simple web.config as following:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>
  </system.web>
</configuration>

3. Create the actual web application that serve your request:
In my example, I used port 8080.

Important notes: this port will be the server port while creating server farm.

4.Create the server farm
Next step is to create the server farms which will handle the request load balancing. You can choose any name for your server farm.

4. Adding servers to server farm
While adding servers to the farm, take note of the httpPort – this MUST be your web application port which you chose in step 3)

Once you add the server farm, IIS will ask you to add rules. If you have existing rules, it may popup this message. Just go ahead and click Yes to create the rules. We’ll configure it later.

5. Configure the Request Routing rules
Highlight your server farm, then choose Routing Rules

Select URL Rewrite under Advance Routing

6. Configure Inbound Rule Routing Request:
- Logical Grouping: Match All

- Conditions:

• {HTTP_POST} : Matches The Pattern : *localhost* (or your domain name in step 2)
  AND
  
• {SERVER_PORT}: Does Not Match The Pattern: *8080* (or your chosen port in step 3)

- Action Type: Route to Server Farm (choose the server farms where you added the web servers in step 4)

7. Configure your Load Balance algorithm
Similar to step 5, highlight your server farm and choose Load Balance

You will have a list of Load Balance Algorithm to choose from. Depends on your need, you can pick the corresponding algorithm

 

Use the list to select the algorithm to use to load balance your server. The available options are: (From MSDN):

• Weighted round robin – Distributes traffic based on the number of incoming requests and their normalized weight. Each server can receive the same distribution of requests or a custom distribution.
  
• Weighted total traffic – Distributes traffic based on the size of the requests and responses in bytes. Requests are routed so that the amount of data is load balanced. In an even distribution, the server with the least amount of data will receive the next request.
  
• Least current request – Distributes traffic based on the current number of HTTP requests between ARR and each of the application servers. Requests are routed to the server with the least number of current HTTP requests.
  
• Least response time – Distributes traffic based on the fastest response time from the servers, which enables the server to respond most quickly.
  
• Server variable hash – Distributes traffic based on a hashed value of a server variable.
  
• Query string hash – Distributes traffic based on the hashed value of the query string value. When more than one query string name is specified, the concatenated string of the corresponding query string value is used for the hash.
  
• Request hash – Distributes traffic based on the hashed value of the configured server variable or URL. For example, if the server variable is QUERY_STRING, the hashed value is based on the names in the request query string.

8. Test your server farms to confirm it works
If your configurations are right, you should start to see your web applications running. You can also explore more on configure distributed disk-cache, changing server affinity (how server associate with user sessions) and so on.

Conclusion

The key concept is to create a dummy web application, then use ARR and Load Balance to route request to your server farms (based on the Inbound Rules).

ARR is a very good features which make IIS more useable and become more ready for production sites. Try it yourself and have fun !

Useful services and resources for web developer & webmaster

Here is the list I came across inside a survey of MDN, which I think would be useful to know for every web developer and web master out there.

The list is definitely not complete and there will be more and more useful services. Stay tuned !

References:

• Docs on GitHub
• MDN
• MSDN
• ReadTheDocs
• Stack Overflow
• w3schools
• WebPlatform.org

Collaboration:

• GitHub
• Basecamp
• JIRA
• Trello

Code hosting

• GitHub 
• Bitbucket

Library monitoring

• Requires.io

Continous Integration

• Travis CI
• Bamboo
• Circle CI
• CodeShip

Report test coverage

• Code Climate
• Coveralls

Web hosting

• Amazon/EC2
• BlueHost
• DigitalOcean
• DreamHost
• Google/AppEngine
• Heroku
• HostGator
• Linode
• Microsoft/Azure
• Rackspace M

Site monitoring

• AppDynamics
• New Relic
• Pingdom
• Scout

Cross-browser test

• BrowserStack
• SauceLabs

Accessibility scan

• WAVE/WebAIM

Traffic monitoring

• Flurry
• Google Analytics
• Piwik
• MixPanel
• KISSMetrics
• Adobe Analytics

Performance monitoring

• Google Analytics
• WebPageTest.org

Content Optimization

• Google Analytics (+Content Experiment)
• Optimizely

How to remove XAMPP from Linux

How to remove XAMPP from Ubuntu (Linux) is simple. Follow the following steps:

1. XAMPP gets itself installed in “opt/lampp” directory by default.
2. Stop the XAMPP server by typing sudo /opt/lampp/lampp stop in the Terminal (you can open the terminal by pressing Ctrl+Alt+t).
3. Now type sudo rm -rf /opt/lampp4. Check your opt directory. The folder “lampp” would have been removed.
5. You have successfully removed XAMPP from your Ubuntu.

Source: http://coranguweb.wordpress.com/2013/10/31/how-to-uninstall-xampp-from-ubuntu/

Spinner and how to preload background images

If you want to use background image for your web but it took too long to load, what can you do ?

You probably want to show a preloader (or spinner) while your background image is being loaded, right ?

If so, here are the steps (demo: http://codepen.io/anon/pen/FHCJw)

1. To display the spinner / preloaded: 

HTML:

<!DOCTYPE html>
 
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
</head>
<body>
 <div id="preloader_wrap">
  <div id="spinner_wrap">
   <div class="spinner">
    <div class="rect1"></div> 
    <div class="rect2"></div> 
    <div class="rect3"></div> 
    <div class="rect4"></div> 
    <div class="rect5"></div>
   </div>
  </div>
 </div>
 <div id="content">Your content here</div>
</body>
</html>

CSS:

#preloader_wrap {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #fff;
 z-index: 999;
}
 
#spinner_wrap {
 width: 200px;
 height: 200px;
 position: absolute;
 left: 50%;
 top: 50%;
 background-repeat: no-repeat;
 background-position: center;
 margin: -100px 0 0 -100px;
}
 
.spinner {
 margin: 100px auto;
 width: 50px;
 height: 30px;
 text-align: center;
 font-size: 10px;
}
 
 .spinner > div {
  background-color: #2980b9 /*dark blue*/;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
 }
 
 .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
 }
 
 .spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
 }
 
 .spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
 }
 
 .spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
 }
 
@-webkit-keyframes stretchdelay {
 0%, 40%, 100% {
  -webkit-transform: scaleY(0.4);
 }
 
 20% {
  -webkit-transform: scaleY(1.0);
 }
}
 
@keyframes stretchdelay {
 0%, 40%, 100% {
  transform: scaleY(0.4);
  -webkit-transform: scaleY(0.4);
 }
 
 20% {
  transform: scaleY(1.0);
  -webkit-transform: scaleY(1.0);
 }
}

 2. To hide the spinner when your image is loaded:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript">
  var jpgFile = 'http://farm4.staticflickr.com/3812/11264786296_891530550e_o.jpg'; //or your own picture
 
  $("<img/>").attr('src', jpgFile).load(function() {
    $("#preloader_wrap").hide(); 
   $("body").css("background", "url('" + jpgFile + "') no-repeat center center fixed"); 
   $("#content").show();
  });
 </script>

That's it ! You'll have a nice preloader and a nice background