Browsing posts in: Geek Stuff

How to geek up your web server

A screenshot of my development server

I dislike default. Default is easy, and will always work. But accept it, default is boring.

Let’s see how to spice up your web server a little bit. If you want to see how our server is going to look like after we make the changes, click the demo link below.

Demo ~ Download Source

Basically what we are going to do is to add a Header file and a ReadMe file for our directory listing page. The header file is a text file that is rendered above the content list in a directory and ReadMe is displayed at the bottom. To add the Header and ReadMe, do the following:-

 

1. Open your httpd.conf file

The httpd.conf file is usually located in the /etc/apache2 directory. Open this file, or open your virtual hosts file (usually a file called 000-default) located inside /etc/apache2/sites-enabled/

2. You should see a lot of stuff like the following:-

DocumentRoot /home/Dev/Server
<Directory />
    Options FollowSymLinks
    AllowOverride All
</Directory>

<Directory /home/Dev/Server>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
</Directory>

3. Find your virtual host

(the folder where your website files are stored) and add the following two directives there.

    HeaderName /.ServerFiles/HEADER.html
    ReadmeName /.ServerFiles/NOTICE.html

.ServerFiles is a folder inside my webserver root. Notice the “.” (dot) in front of the folder name. As you know, files and folders starting with “.” are hidden in Linux.

So I just created a hidden folder inside my webserver root folder and added two files html files in it HEADER.html and NOTICE.html.

 

After adding the Header and ReadMe directives, my host defenition looks like this:-

<Directory /home/Dev/Server>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
    HeaderName /.ServerFiles/HEADER.html 
    ReadmeName /.ServerFiles/NOTICE.html
</Directory>

4. And add Header and ReadMe to style your server!

You can download and use the Header and ReadMe file I’m using here or see how the server will look like if you use my Header and ReadMe.

 

You can use pretty much any kind of HTML, CSS and Javascript in these files. You can even load jQuery there and do some of that pretty fancy effects there. However, try to keep it light.


Do You Love Me?

Hey, today is 31st December. So i guess this is my last post of the century, or watever. Here is a little treat for ya to geek with friends.

Just copy paste the below code into your browser’s url bar and hit enter.

javascript:function checkLove(love){if (love)alert("He he he, cool!");else{if(love != undefined) alert("Sorry, you must love me.");checkLove(confirm("Do you love me?"));}}checkLove();

So, wishing a crazy new yr for all f u.


Run multiple Firefox instances/versions at the same time

Here is a quick tip for ya. To run multiple instances of Firefox at the same time, do the following.

Firefox Profile Manager

Linux

1. Run this command in Command Terminal : firefox -p -no-remote

2. The Firefox profile manager will open and ask you to choose the profile you want to use. If you already have more than 1 profile, click on the “Create Profile” button to create a new profile and once the new profile is created, select it and click “Start Firefox”

3. That’s all.

 

Windows

1. Open run prompt by pressing Windows key + R

2. Run this command in run : firefox.exe -P -no-remote (NB: -P is in CAPS)

3. The Firefox profile manager will open and ask you to choose the profile you want to use. If you already have more than 1 profile, click on the “Create Profile” button to create a new profile and once the new profile is created, select it and click “Start Firefox”

4. That’s all.

 

You can also edit the Firefox short cut in your desktop, quick launch (Windows) or panel (Linux) and add the text -p -no-remote to it, so that each time you open Firefox it will ask you to choose the profile you want to load.

 

What is this good for?

1. You can sign into multiple Gmail accounts (or other accounts for that matter) at the same time (One in each Firefox instance)

2. You can run multiple versions of Firefox at the same time. Just create a separate profile for each version and choose the correct profile when opening Firefox.

 

Did it solve a different problem for you? Let others know through the comments below.



25 Incredibly Useful and Cool Firefox Addons for Geeks and Web Developers

Hey guys, a lot of people (well, not so much 🙂 ) have asked me what Firefox addons am I using. Here I’m compiling a list of my 25 favorite Firefox addons. I cannot even think of surviving a day without most of them.

1. AdBlock Plus adblock-plus-icon

This is the first addon I always install when I freshly installs Firefox. AdBlock blocks annoying advertisements from websites and emails. Some people says blocking advertisements in websites is un-ethical and thereby we are attacking the ability of website owners to earn revenue from their efforts. Well, it is another whole talk, so it’s up to you. (Anyway I love it)

2. Web Developer ToolbarWeb-Developer-icon

An incredible MUST HAVE for all web developers. This addon is like a Swiss knife and has a lot of functions. Believe me, if you have never used it before, you will thank me once you install it and feel it. It enables you to manage cookies, images, java, javascript.. No no, I cannot even list them. Try yourself.

3. Firebugfirebug-icon

Another incredible one. This one is a little difficult to get used to. But once you get used to it, you will bow to it. Incredible tool for debugging your layout, analyzing and optimizing your sites performance etc etc.

4. Zoterozotero-icon

Like firebug, you may not like this addon on first bite, but if you are inclined to learning new stuff and taking notes, you will never again part with this addon. Very easy to save web pages, links and stuff. Every student who uses the internet for academic purposes in any way MUST have this. Once I downgraded my Firefox to an older version, just because Zotero was not working in the newer version of Firefox. (Now it is updated and works with the latest releases till date)

5. TryAgain addon

(Not compatible with Firefox 3.6)

This is a simple but very useful addon. If a page fails to load, this addon will keep trying until the page is loaded. Very very useful if you have a slow or not-so-good internet connection. This one was my fav with AdBlock, but this addon is not compatible with Firefox 3.6. I’m just hoping the author will update the addon soon.

6. Firesomethingaddon

Firesomething is not very useful, like the addons we discussed above. But I keep it for mere geek pleasure. This addon will let you change the name of your Mozilla Firefox to something else you like. It also has a set of preset random names. Right now, as of we speaking, the title of my Firefox reads – Mozilla SulpherMonkey. Isn’t that hilarious? (watever, I love it). You can also change the Firefox logo in the About box.

7. YSlowyslow-icon

Another pretty useful addon for web developers. Useful for analyzing your website’s performance based on several criteria. The best part is, it is developed by Yahoo!

8. User Agent SwitcherUser-Agent-Switcher-icon

A cool geeky addon. This addon can be used to fake your browser’s user agent. S’pose if a website is allowing access to only Internet Explorer users, then this addon can help you. I have narrated another cool use of this addon in my previous post.

9. FEBEFEBE-icon

FEBE Stands for Firefox Environment Backup Extension. With this addon, you can all your addons, preferences, saved passwords and a lot more. Also you can restore your backups at a later time. I recommend this addon very much. I owe so much to this addon for saving me a lot of time, work and data. (You can also export all your installed addons as a single installable addon)

10. Fissionfission-icon

fission

Fission is another geeky addon. Using this addon, you can combine your address bar and loading/progress bar, as in windows 7 and vista. Very geeky.

11. ColorfulTabscolorfultabs-icon

colorfultabs

Another super-geeky addon. This addon will give different colors to different tabs. Will look really attractive if you work with a lot of tabs open. (After installing this addon, I even thought the default tab color is boring)

12. MeasureITaddon

measureit

A useful and handy tool for web and layout designers. This addon will enable you to measure the the dimensions of objects in a webpage.

13. CookieSwapcookieswap-icon

This tab will enable you to have and easily manage multiple profile in Firefox. Has other uses too. Suppose you have 50 tabs open in your browser and you have logged in you your GMail account. payPal account, blog and a few other sites. Suppose if you want to go out for a quick bite or something. It won’t be wise to leave the browser open and leave the computer if you are logged into many important site. And if you close all the tabs of just log out of those sites, it will be a chore to log back into each one of them when you come back. In that case use this addon and just switch to a different profile when you go out and you will be automatically logged out of all the sites. When you come back, just switch back to the previous profile, and you are logged in.

14. FoxTabfoxtab-icon

FoxTab is a cool addon that will let you flip through your Firefox tabs in 3D. The addon is highly customizable and stylish, and sure geeky.

15. View Source Chartview-source-chart-icon

This addon lets us view the source of web pages in an easy to understand manner. Different regions – head, body, divs etc are given in different, easily distinguishable colors. Handy. (No, it doesn’t highlight syntax)

16. xclearaddon

xclear

xclear comes in handly when you want to quickly clear your address bar or search box. Give it a try, you will like it.

17. ColorZillacolorzilla-icon

ColorZilla is very useful for web designers. It comes with a color picker (eye dropper), with which you can find the hexadecimal color code of any element in a page.

18. Total validatortotal-validator-icon

Total validator is a one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like. It is very easy to use too. The only problem is that it needs an internet connection to function.

19. TabRenamizerTabRenamizer-icon

This is an incredibly useful addon. It can be used to change the title and favicon of tabs opened in your Firefox window. You can rename all tabs with a shortcut. Comes in totally handy if you want to quickly hide what sites you have opened.

20. Locationbar 2locationbar-icon

Locationbar 2 will can segment the url in your address bar for easier navigation to other parts of the same site. I have described a use of this addon in another post – 7 Points to Stay safe in the Social Web.

21. Leet Keyaddon

1337

A cool geeky addon with which you can easily type in 1337, ROT13, Hexadecimal, Morse, Binary etc (and more) and type and encrypt text using DES and AES. This one is incredibly geeky and can be used to surprise your friends by quickly type in reverse or in 1337 (h4x0r) when you are chatting.

22. ReminderFoxReminderFox-icon

Easily manage your schedule and set remainders and alarms in your browser. This one is also a featured Firefox addon.

23. ScreenGrabScreenGrab-icon

ScreenGrab enables you to quickly takes screenshots of web pages. The best feature is that we can even decide whether to take the screenshot of only the visible portion or whether the whole page.

24. <
a href=”https://addons.mozilla.org/en-US/firefox/addon/4664″>TwitterBarTwitterBar-icon

Post tweets directly from your browser. Minimal user interface and clean.

25. FireFTPfireftp-icon

A full featured FTP explorer right inside your browser. Comes in handy for web devs.

Now tell me what you think and what your favorite addons are. Also, give some love by using the social bookmark icons below.


Browse in iPhone without an iPhone (Android too)

Hey guys, ever wanted to see how Gmail looks in iPhone? Well, look below.

I don’t own an iPhone, and definitely the window size in the above screenshot is wider than an iPhone. Here is what I did.

Step 1: Installed the Firefox addon called User Agent Switcher.

Step 2: Switched my user agent to the ‘iPhone user agent’

Step 3: Opened GMail as normal.

(Sorry if you were expecting more. but that’s all)

Is there anything useful in this?

Yes. Besides just curiosity, this technique of switching user-agents are sometimes useful too.

How is it useful?

A lot of websites are optimized for mobile use. So if you visit them using a mobile user-agent, you will be presented with a low-weight version of the site. This is very useful when you are using a slow connection (not to mention if your computer is connected to the net using your phone’s GPRS)

How much will I save?

Hmm, that depends. Just before writing this post, I accessed Gmail normally (without changing the user-agent). I measured the page load size – it was more than 2 Mb (WTF)

But when I accessed it with iPhone and Android user-agents, the page loaded in around 150 Kb.

Here see some more of the screenshots I captured with iPhone user-agent.

Twitter

twitter-in-iphone

Google Home Page

Google-in-iphone

Facebook

facebook-in-iphone


Google is serious – HTTPS by default for GMail

Once again Google has proved that they are the number one webmail. Almost all the webmail services – GMail, YahooMail,Windows Live Mail…. – are using HTTPS for logging the users in. i.e., if you are using firefox, you will see a bluish glow in the left end of the address bar when you are accessing the sign in page of gmail (and other webmails too). And if you take a closer look, you will see the addtess of the page starts with HTTPS, rather than just HTTP.

Having HTTPS in the sign in page makes it very difficult for hackers to steal your password. But once you are loggged in successfully, the HTTPS access is switched to normal HTTP . And everything you do now with your email account -sending mails, reading mails, viewsing contact book.. – is over the normal HTTP connection. So a hacker or even a high schooler with no programming knowledge can easily see everything you are doing. So, your sensitive information is compromised.

And the solution?

In Gmail’s settings, there was this option to set full time HTTPS access to your mail account. But it was optional. Now Google has made the HTTPS mode enable by default for all mail accounts. (Still you can disable it under the settings if it is itching).

I strongly recommend everyone using the ‘always use HTTPS’ setting.

I will be writing some posts covering HTTPS and internet security soon. Come back soon. Bye now.


Bing says no PORN to Indians (How to search porn in Bing)

Two days ago, Microsoft unraveled their new search engine, Bing. I tried it. It is super cool. If you hover mouse beside a result, a short summary of the target page is displayed in a sweet non obtrusive manner (ajax). The search homepage has a new background image every day. So it always looks new and fresh.

Besides web search, Bing also offers image search, map search etc.

I was checking the image search. (It is cool). I just wanted to see if Bing has got any nude pics of Jennifer Lopez, which was scarse (and I doubt their genuineness) in Google Image search.

Jennifer Lopez nude Bing

No porn for Indians, come back after puberty!!

krack. I was stunned by the reply from Bing.

It asked me to change the keyword to get results. What the heck else should I use as keyword other than JenniferLopez nude, if I wanna see Jennifer Lopez nude??

I looked everywhere in the preferences to trun off content filter. Oops.. Then I visited Bing’s US variant. (You can access the US page either using the country changer link in the top of the page or using this URL www.bing.com/?cc=us, or use any country code there, in, uk, de etc).

So the point is Microsoft doesn’t want Indians to see porn. Hail Saint Bill Gates, our saviour.


The most funny police warrant!! For sending email and using Linux

I usually do not post about news events. But this one here made it irresistible for me to keep from blogging on it.

I got this news from the EFF Blog. A Boston University student’s computer, cell phone and other properties were seized by the police as a part of an investigation to find who send an email to the college mailing list saying that another student is a gay.

hacker1

Though there is no indication of any crime he has committed, the police has issued a very stupid and funny warrant. Some of the supposedly suspicious activities listed include: the student being seen with “unknown laptop computers,” which he says he was given by Boston College for field testing or he was “fixing” them for other students; the student uses multiple names to log on to his computer; and the student uses two different operating systems, including one that is not the “regular BC operating system”(I think BC stands for Boston College. And BC operating system is some customized version of Windows) but instead has “a blackscreen with white font (I cannot stop laughing… they should have sepcified the font  size too..) which he uses prompt commands on.”

During their search, the police seized (among other things) the student’s computers, storage drives, cell phone, iPod Touch, flash drives, digital camera, and Ubuntu Linux CD ( Oh, I never knew u can send email from iPod Touch or Ubundu CD). None of these items have been returned to him.

To strengthen their arguments, the police also says the (computer science major) student is considered a computer genius by other students (Oh my god, they are hunting down geniuses,.. I must be careful 😀 😀 😀 ).

The student who was employed by college IT department was suspended from job. EFF has filed an emergency motion to quash and for the return of seized property on behalf of a Boston College computer science student Riccardo Calixte.

[poll id=”2″]

cya. bye.

Reference: Computer science student challenges tech seizure – CNET News


Round corners with CSS3. Super Cool.

I was not very fond of CSS, until recently.  I just used html elements to style my pages. But then once I happened to use some simple CSS elements, coz I had basic CSS in my college syllabus. Ever since I’m a great fan and admirer of this simple, kewl technique.. CSS.

CSS Round Corner Menu

I have been fascinated by round cornered elements in web pages. I tried to learn the ‘secret art of round corners!!’. Most of my searches returned tutorials for rounding corners using images, Including this one. It uses 4 corner images and is pretty simple to implement.

A few days ago, I was browsing through some script from DynamicDrive CSS Library, I found an unfamiliar css element: -moz-border-radius. I did a lil research and eventually I got to CSS3. Checkout www.css3.info. CSS3 is still in draft and all browsers have not started to support it. Yet some like Firefox, Safari etc has already started to adopt CSS3.

border-radius (reference) is an element which is included in the forthcoming CSS3. It can be used in the following forms.

If you use border-radius: 4em; , then all the four corners will be rounded by 4em. Or you can use border-radius: 5px 5px 0px 10px;, so you can use individual radii for all the four corners. Or the single attribute can be broken down as follows.

border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;

The Gecko Layout Engine which is the basis of Mozilla Firefox uses some equivalent attributes instead of border-radius. The border-radius equivalent in Gecko is -moz-border-radius (reference). It can also take 4 arguments as in -moz-border-radius:15px 0px 15px 0px;. If only 1 attribute is specified as in -moz-border-radius:15px;, the same will be applied for all 4 corners. -moz-border-radius can also be written as 4 different elements as follows.

-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-topleft:15px;

Here is a few examples I made which uses the -moz-border-radius element for rounding corners. See the code of the page and see how simple it is. But remember -moz-border-radius works only in Gecko based browsers, which includes Firefox, NetScape, Camino, SeaMonkey K-Meleon etc (Google’s picture-organization software Picasa is based on Gecko).

That was Kewl, ain’t it? cya, babye.


Pages:12