Author: techworkshop

Detect unused CSS selectors and remove them from the website

During the development, we forget to remove selectors, which have been changed during the different phases of the website, Which makes stylesheet file so large. Due to which, stylesheets load slower, which makes the website load slower. So, this is necessary to remove unused css rules from stylesheets to make a website load faster.

There are so many online tools, Firefox Extension as well as commercial products to do that.

Firefox Development Tool: Dust-Me Selectors
It scans your HTML pages and find the unused CSS selectors. It takes all CSS selectors from all stylesheets attached to the page you are viewing and then scan that page to find the unused selectors. It stores data separately for each website you viewed.

Disadvantage: It just gives you the unused selectors, but not providing the updated stylesheet.

Dead Weight: Ruby Gem
It is a CSS coverage tool and only works for rails website. You need to provide a set of stylesheets and URLs, from which it provides a list of selectors which can be “safely” deleted. You can manually remove them from the stylesheet using that list.

You can watch the screen-cast on Dead Weight Introduction at http://railscasts.com/episodes/180-finding-unused-css

Unused-CSS.com: Online Tool
It asks for an online URL to check. From the URL, It scans all CSS files and show the results separately for each stylesheet with graphs. Currently it scans only homepage, but if you need whole website results, you need to provide your e-mail address and it will send the results to you in email.

Helium CSS: Javascript Tool
It is a javascript-based tool and runs from the browser. It is a used for discovering unused selectors across many pages on a web site. It accepts only list of URLs, parses each URL provided and build a list of stylesheets. Using this list of stylesheets and URLs, it generates a list of unused selectors not used in any of the URL provided.

TopStyle 5: Windows Application
It is an HTML Editor, which includes a tool named Style Sweeper. Style sweeper can remove white spaces and blank lines, sort according to Class, Element, ID and also combines multiple selectors. It will also combine repeated property as well as selectors if they are same. But it’s a commercial product costs $80 (USD).

LiquidCity CSS Cleaner: PHP Script
It uses regular expressions to check any HTML page specified by you, generates the report with unused selectors for that HTML page only. From that report, you can manually remove them from the stylesheet.

There are so many other tools available. We will introduce them very soon.

Some websites are not loading: DNS misconfiguration

Google Public DNS is a free, global Domain Name System (DNS) resolution service, that you can use as an alternative to your current DNS provider. It’s speed up your browsing experience and also providing more secure data during browsing.

I have a weird problem few days back. After changing my ISP, some websites are stopped working by giving mis-configuration error in the DNS (Domain Name System) . So, I have started digging on that. I found so many users with Same problem. Some providing solution to change the MTU size of the router. I don’t even know, what is an MTU and how to change it?

After a few days, I found an answer from random forum, that change the DNS of the adaptor to Google Public DNS. So, I searched in google for it and found it.

Google Public DNS is a free, global Domain Name System (DNS) resolution service, that you can use as an alternative to your current DNS provider.  It’s speed up your browsing experience and also providing more secure data during browsing.

The Google Public DNS IPv4 addresses are as follows:

  • 8.8.8.8
  • 8.8.4.4

The Google Public DNS IPv6 addresses are as follows:

  • 2001:4860:4860::8888
  • 2001:4860:4860::8844

You can use either number as your primary or secondary DNS server. You can specify both numbers, but do not specify one number as both primary and secondary.

You can configure Google Public DNS addresses for either IPv4 or IPv6 connections, or both.
To change your DNS settings, please refer the following link, https://developers.google.com/speed/public-dns/docs/using

Note: Before start using Google Public DNS, please write down your current setting IP addresses of DNS for backup. In case you need to revert the settings.

Access other computers or allow another user to access your computer securely over the Internet

Chrome Remote Desktop by Google Chrome allows users to remotely access another computer through Chrome browser or a Chromebook.  Computers can be made available on an short-term basis for scenarios such as ad hoc remote support, or on a more long-term basis for remote access to your applications and files.  All connections are fully secured.

All you need is google account to access it. Chrome remote desktop is available free in Chrome Web Store. Download it to your chrome browser and install it. On open, it’ll grant access of your google account. That’s it.

It is the best service for remote desktop till now. It’s not a dependent service of Chrome Browser, after grating access of your google account, all you need is to provide passkey for your computer. After that you can close chrome browser. You can access your computer from anywhere now using your same google account and Chrome Remote Desktop installed in Chrome Browser. Only thing you need to keep in mind is computer should always be in awaken mode.

It is fully cross-platform. It means, it provides remote assistance to Windows, Mac and Linux users, or access your Windows (XP and above) and Mac (OS X 10.6 and above) desktops at any time, all from the Chrome browser on virtually any device which have Chrome Browser with Chrome Remote Desktop installed.

For information about privacy, please see the Google Privacy Policy and the Chrome Privacy Policy.

For help or troubleshooting of Chrome Remote Desktop please click here:
http://www.google.com/support/forum/p/Chrome/thread?tid=52730a7194bef976&hl=en