Redesign website without affecting SEO

At Recruiterbox, one of the things we wanted to do for a long time was to redesign the front website. The site was done in 2012, but within a year or so we realized the design didn’t give the feel of a new-age company (*cough* flat UI *cough*). However, we were busy building new features for the app, and couldn’t get enough time to work on the redesign.

Finally, last year, Girish made an attempt to do the redesign from scratch. All of us were happy with the new design. The work was almost complete, and was ready to be launched in a few days. However, One thing we were very well aware from the beginning was that SEO would take a hit from the revamp. (We had been scoring good on SEO. recruiterbox.com appears in the first page of results for most of the targeted keywords, especially in the US, which is our primary market). But, towards the completion, we realized that the risk would be too big – SEO has been the biggest channel for sign ups consistently.

So we parked the idea for a while, thinking of revisiting it later. And that revisiting didn’t happen until last month. By then we were sure we didn’t want to disrupt the SEO abruptly. So we came up with a plan to go about it one step at a time, keeping a close eye on analytics for every step we take. This post explains the process step-by-step,

First of all, this is what we wanted to achieve with the redesign:

  • Good typography
  • Responsive design
  • Flat UI
  • Brighter colors

Step 1: Fix typography

This must be pretty straight forward, at least we thought so. We were clear about the choice of font. Proxima Nova is what we have been using for the app, and we wanted to keep it consistent. Undoubtedly, it’s one of the most elegant fonts.

So we just had to get the font from Typekit, include it in the base template and change the font-family in CSS. Simple! But once the changes were deployed, we were shocked to see the Google Pagespeed score drop drastically. One would expect font services like Typekit to serve web fonts as optimally as possible. But it doesn’t seem to come anywhere close to being optimal.

We found a hack to work around this, but we put it in the task list, as we didn’t want to get stuck in rabbit holes slowing down the redesign.

Step 2: Upgrade to Bootstrap 3

We were still using Bootstrap v2.x, so our first step was to upgrade to 3.0, which is responsive by its nature. Thankfully Bootstrap has a nice guide for the upgrade. We hadn’t tweaked the older version too much, so this was simpler than we expected. And this suddenly made almost everything adapt nicely to mobile, except for few adjustments.

Another thing came for free with Bootstrap 3 – flat UI.

Step 3: Change color palette

Many people had told us that the website looked little dull, which was true. The solution clearly lies in the colors. We wanted to make the front site look little more vibrant, with more saturated and contrasting colors.

So we went page after page and changed the styles, also making sure most pages have a “hero unit”.

Results

recruiterbox-old-homepage

Recruiterbox homepage before the redesign

Recruiterbox homepage screenshot

The new homepage

As planned, we were monitoring Google Analytics for any noticeable changes in traffic. Other than the usual drop during the holiday season in US, there didn’t seem to be any negative change. In fact, conversion rate started increasing slowly. One interesting thing was that the mobile traffic increased gradually but there was no significant sign up rate in mobile. On the other hand, the sign up rate in desktop had increased considerably. Probably people go back to their desktop to signup after checking out the website in mobile? This was the only likely explanation we could come up with. Also it made sense, Recruiterbox being a B2B product.

Now, after a month since the redesign has been out, with few other UX optimizations (will write about it soon), the signup rate has increased by a whopping 70%!

This post on recruiterbox tech blog:
http://inside.recruiterbox.com/post/111162588766/improving-recruiterbox-com-for-humans-without

Why are Indians hypocrites?

Well, the heading might sound controversial. The content may be controversial too, but not as much as the topic, I believe :)

Hypocrisy meterRecently a friend of mine was saying that the problem with the Indian education system is that they teach you solutions without letting you experiment with the problems. I’m trying to add my points to it and apply the same for Indian culture. Without understanding the problem, one cannot appreciate the solution. Neither can one distinguish between actual solutions and crappy work-arounds.

Applying the same arguments to Indian culture and moral system seems perfectly valid to me. Long long ago, so long ago, some people (including the so called God) have written down the solutions to all human problems. And we are bound to follow it. If you question the validity of those ‘solutions’, or even if you try to understand the problems they are trying to solve, it’s a “sin” (remember the scene from 3 idiots where the student is sent out of class for questioning the norms?).

For those who could appreciate the student in the movie scene, questioning the culture seems so intolerable. If you do something just because you have been repeatedly told that’s the only way forward, at some point or the other your mind will question the validity of that approach. After some time, you will ‘regret’ for such thoughts and keep trying to follow what has been ‘taught’. But you will never be able to follow it completely because you never understood the essence of it. So what do you do? Either be in the comfort zone of hypocrisy, or be bold enough to follow only those for which you have logical reasoning. Unfortunately, most of my fellow citizens chose the first option, making life harder for those choosing the second one (including me) :(

லெஸ் நடைதாள் மொழி

CSS எனப்படும் விழுதொடர் நடைதாள் மொழி (Cascading Style Sheets) பற்றிப் பலரும் அறிந்திருக்க வாய்ப்பு உண்டு. இணையத்தின் ஆஸ்தானக் குறியீட்டு மொழியாக மீயுரைக் குறியீட்டு மொழி (HTML) விளங்குவதைப் போல, இணையத்தின் ஆஸ்தான ஒப்பனையாளர் நமது CSS தான். மிகவும் எளிமையான மொழிதான் என்றாலும், தனக்கென பல வறையரைகளைக் கொண்டது CSS. எடுத்துக்காட்டாக, இம்மொழியில் மாறிகள் (variables) இல்லை. இணையதளம் பெரிதாக வளரும்போது CSS நிரல்களைப் பராமரிப்பது கடினமாகிவிடலாம். இதுபோன்ற பல குறைபாடுகளைப் போக்கி, அதே நேரம் CSS-ன் எளிமையையும் பாதுகாத்து, இணைய வடிவமைப்பாளர்களின் பணியை எளிதாக்குகிறது  LESS என்னும் நடைதாள் மொழி.

இது CSS-ற்கு பல புதிய வசதிகளைச் சேர்க்கும் ஒரு மேம்பாடுதானே அன்றி, CSS-ற்கான மாற்றுமொழி அல்ல. அதாவது, இதுவரை நீங்கள் எழுதிவந்த CSS எதையும் மாற்றி எழுத வேண்டிய அவசியம் இல்லை. லெஸ் பயன்படுத்த ஒரே ஒரு ஜாவாஸ்க்ரிப்ட் கோப்புதான் தேவை. அதை இங்கே பெற்றுக் கொள்ளலாம்.

இப்போது, கீழ்க்காணும் இரண்டு வரிகளை உங்கள் வலைப்பக்கத்தின் <head>-ல் சேர்க்கவும்:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

இங்கு <link>-ன் rel பண்பு கவனிக்கத்தக்கது. CSS கோப்புகளை இணைப்பதுபோல் அல்வாமல், லெஸ் கோப்பினை இணைக்கும்போது, இறுதியில் /less சேர்க்கவேண்டியது அவசியம். மேலும், லெஸ் கோப்புகளுக்கு அடுத்ததாகவே less.js கோப்பை இணைக்க வேண்டும்.

இப்போது, less.js -ல் உள்ள நிரல் இணைக்கப்பட்ட லெஸ் கோப்புகளைப் CSS-ஆக மாற்றி உலாவியிடம் கொடுக்கும், உலாவி எப்போதும்போல CSS-ஐ கையாளும். மாறாக, வழங்கியிலேயே லெஸ்ஸை CSS-ஆக மாற்றியும் அனுப்பலாம். இது வலை உலாவியின் பழுவைக் குறைப்பதோடு, ஜாவாஸ்க்ரிப்ட் முடக்கப்பட்டிருக்கும் சூழலிலும் வேலை செய்யும். வழங்கியில் லெஸ் நிறுவ NPM (Node Package Manager) தேவை.

மாறிகள் (Variables)

வலைத்களங்களில் color palette எனப்படும் நிறத்தட்டுகள் பயன்படுத்தப்படுவது (ஒன்றுடன் மற்றொன்று இயைந்து அழகாய்த் தோன்றக்கூடிய நிறங்களைத் தேர்ந்தெடுத்து, அந்தக் குறிப்பிட்ட சில நிறங்களை மட்டுமே பயன்படுத்துவது) வழக்கம். இத்தகைய சூழல்களில் அந்த நிறங்களை மாறிகளைச் சேமித்துக் கொள்வது மிகவும் எளிமையா இருக்கும். இல்லையெனில் ஒவ்வொரு முறை நிறங்களைப் பயன்படுத்தும்போதும், அவற்றிற்கான அறுபதின்ம (hexadecimal) குறியீடுகளை நினைவில் வைத்துக் கொள்ளவோ காபி-பேஸ்ட் செய்யவோ வேண்டும்.

இதேபோல் வலைப்பக்கத்தின் வடிவமைப்பிலும் குறிப்பிட்ட நீள அகலங்களைப் பயன்படுத்துவது முறை (grids).

எடுத்துக்காட்டு

@blue:   #049cdb;
@green: #46a546;
@red:    #9d261d;

@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;

மிக்ஸின்கள் (Mixins)

ஒரு ruleset-ன் விதிகளை இன்னொரு ruleset-ல் பயன்படுத்த வழிசெய்கிறது மிக்ஸின்கள்.

எடுத்துக்காட்டு

.bordered {
  border-top: 1px solid black;
  border-botton: 1px solid gray;
}

.someClass {
  .bordered;
  /* Some other style */
}

மிக்ஸின்களைப் பிறமொழிகளில் உள்ள function-களைப் போலவும் பயன்படுத்தலாம். திரும்பத் திரும்பச் செய்யவேண்டிய ஒரே மாதிரியான வேலைகளை இதன்மூலம் எளிதாகச் செய்யலாம்.

எடுத்துக்காட்டு

.border-radius(@radus: 5px) {
  -webkit-border-radius: @radius;
   -khtml-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.someClass {
  .border-radius(6px);
  /* Some other style */
}

உள்ளடக்கபட்ட விதிகள் (Nested Rules)

ஒரு CSS-selector-ற்கான விதிகளை எழுதிய பிறகு, அதற்குள் இருக்கும் மற்ற selector-களுக்கான விதிகளைக் குறிப்பிட CSS-ல் கீழ்க்கண்டவாறு எழுதுவோம்.

#header {
  ...
}

#header .logo {
  ...
}

இதை லெஸ்ஸில் இன்னும் எளிதாக எழுதலாம்.

#header {
  ...
  .logo {
    ...
  }
}

செயல்பாடுகள் (Operations)

எண்களை மட்டுமல்லாமல் நிறங்களையும் நீள அகலங்களையும் (1px, 2cm போன்றவை) கூட்டல், கழித்தல், பெருக்கல், வகுத்தல் என அனைத்தும் செய்ய முடியும்.

எடுத்துக்காட்டு

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;

@base_color: #550;
@dark_color: @base_color + #333;

நிறச் செயல்பாடுகள்

நிறங்களை ஒன்றுடன் ஒன்று கூட்டுவதும் கழிப்பதும் மட்டுமில்லாமல், லெஸ் நிறங்களுக்கான கீழ்க்காணும் பயனுள்ள கட்டளைகளையும் நமக்குத் தருகிறது.

lighten(@color, 10%); // a color 10% *lighter* than @color
darken(@color, 10%); // a color 10% *darker* than @color
saturate(@color, 10%); // a color 10% *more* saturated than @color
desaturate(@color, 10%); // a color 10% *less* saturated than @color
fadein(@color, 10%); // a color 10% *less* transparent than @color
fadeout(@color, 10%); // a color 10% *more* transparent than @color
fade(@color, 50%); // @color with 50% transparency
spin(@color, 10); // a color with a 10 degree larger hue than @color
spin(@color, -10); // a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // a mix of @color1 and @color2

ஜாவாஸ்க்ரிப்ட் கட்டளைகள்

ஆம், CSS-க்குள் ஜாவாஸ்க்ரிப்ட் பயன்படுத்த முடியும்.

எடுத்துக்காட்டு

@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */

@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */

@height = `document.body.clientHeight`;

இன்னும் பல…

இன்னும் பல வசதிகளைத் தருகிறது லெஸ். இதைவிட்டு இன்னும் வெறும் CSS-ஐ பயன்படுத்திக்கொண்டிருந்தால் எவ்வளவு நேரம் வீணாகும் என்பதை யோசியுங்கள். LESS-ஐ கொண்டு உருவாக்கபட்ட படைப்புகளுள் குறிப்பிடத்தக்கது ட்விட்டர் உருவாக்கிய பூட்ஸ்ட்ராப். அதனைப் பயன்படுத்திப் பாருங்கள், லெஸ்ஸின் ஆற்றல் புரியும்.

முக்கியமாக, லெஸ் ஒரு கட்டற்ற மென்பொருள் – அப்பச்சே உரிமத்தோடு வழங்கப்படுகிறது.

வெளி இணைப்புகள்:

ஃபெடோரா – ஒரு மேற்பார்வை

இக்கட்டுரை ஃபெடோரா இணையதளத்தில் உள்ள இந்த ஆங்கில உரையின் மொழிபெயர்ப்பாகும்.

Fedora என்றால் என்ன?

ஃபெடோரா என்பது ஒரு லினக்ஸ் சார்ந்த இயங்குதளம் (உங்கள் கணினியை இயக்கத் தேவையான மென்பொருட்களின் தொகுப்புதான் இயங்குதளம்). மைக்ரோசாஃப்ட் விண்டோஸ்™, மேக் ஓஎஸ் X (Mac OS X™) போன்ற பிற இயங்குதளங்களுடன் சேர்த்தோ அல்லது அவற்றிற்கு மாற்றாகவோ ஃபெடோராவைப் பயன்படுத்தலாம். இதனைப் பயன்படுத்தவும் பிறரிடம் பகிர்ந்துகொள்ளவும் முற்றிலும் இலவசமாகவே கிடைக்கிறது.

ஃபெடோரா ப்ராஜெக்ட் என்பது கட்டற்ற மென்பொருள் ஆர்வலர்களும் அவற்றைப் பயன்படுத்துவோரும், அவற்றை உருவாக்குவோரும் இணைந்த ஓர் உலகளாவிய சமூகம். ஒரு சமூகமாய் வேலை செய்து, கட்டற்ற நிரல்களை உருவாக்குவதிலும் அவற்றைப் பரப்புவதிலும் முன்னோடியாய்த் திகழ்வதே எங்கள் குறிக்கோள். உலகின் மிக நம்பகமான திறமூல மென்பொருள் தொழில்நுட்பங்களை வழங்கும் நிறுவனமான ரெட் ஹேட் (Red Hat) ஃபெடோராவிற்கு நிதியுதவி வழங்கி வருகிறது. கூட்டாக இணைந்து உழைப்பதை ஊக்குவிக்கவும் புதுமையான கட்டற்ற மென்பொருட்கள் உருவாக வழிசெய்யவுமே ரெட் ஹேட் நிறுவனம் ஃபெடோராவிற்கு நிதியுவி செய்கிறது.

ஃபெடோராவை எது தனித்துவப்படுத்துகிறது?

கட்டற்ற மென்பொருட்களின் மதிப்பை நம்பும் நாங்கள், எல்லோரும் பயன்படுத்தவும் பகிர்ந்துகொள்ளவும் வல்ல தீர்வுகளைப் பாதுகாக்கவும் மேம்படுத்தவும் போராடி வருகிறோம். ஃபெடோரா இயங்குதளம் கட்டற்ற மென்பொருட்கள் கொண்டு உருவாக்கப்பட்டது மட்டுமல்ல, அதனை உங்களுக்கு வழங்குவதிலும் முழுக்க முழுக்க கட்டற்ற மென்பொருட்களே பயன்படுத்தப்படுகின்றன. லட்சக்கணக்கான மக்களுக்கு சேவை செய்து வரும் இந்த இணையதளம் கூட கட்டற்ற மென்பொருட்கள் கொண்டு உருவாக்கப்பட்டதுதான்.

மேலும், கூட்டு உழைப்பின் ஆற்றலை நாங்கள் நம்புகிறோம். எங்கள் வல்லுநர்கள் உலகெங்கிலும் உள்ள கட்டற்ற மென்பொருள் பணித்திட்டக் குழுக்களுடன் இணைந்து பணிபுரிகிறார்கள். இக்குழுக்கள் “அப்ஸ்ட்ரீம்” (upstream) என்று அழைக்கப்படுகின்றன. இவர்கள்தான் ஃபெடோராவில் காணப்படும் பெரும்பாலான மென்பொருட்களை உருவாக்குகின்றனர். எங்கள் பணியிலிருந்து எல்லோரும் பலன்பெறவும், ஏற்படும் மேம்பாடுகள் எல்லோருக்கும் மிக விரைவாய்க் கிடைக்கும் வண்ணம் அமையவும் நாங்கள் இவர்களோடு நெருங்கிப் பணியாற்றுகிறோம். இந்தக் குழுக்கள் செல்லும் அதே திசையில் நாங்களும் பணியாற்றுவதன் மூலம், கட்டற்ற மென்பொருட்கள் ஒன்றோடு ஒன்று இணைந்தும் நன்றாகச் செயல்படுவதையும், பயனருக்கு மிகச்சிறந்த அனுபவத்தைத் தருவதையும் உறுதி செய்கிறோம். மேலும் பயனர்களுக்கு மட்டுமின்றி அப்ஸ்ட்ரீம்-க்கும் உதவக்கூடிய மேம்பாடுகளையும் நாங்கள் விரைவாய் கொண்டுவர முடியும்.

கட்டற்ற இயங்குதளம் பற்றிய தங்கள் பார்வையை ஒவ்வொருவரும் தங்கள் விருப்பப்படி செயல்படுத்த அதிகாரம் அளிக்கவேண்டும் என்று நம்புகிறோம். ஃபெடோராவை யார் வேண்டுமானாலும் மாற்றியமைத்து புதிய பெயரில் கூட வெளியிடலாம். அதற்கான மென்பொருட்களை நாங்கள் ஃபெடோராவிலேயே வழங்குகிறோம். சொல்லப்போனால், ரெட்ஹேட் எண்டர்ப்ரைஸ் லினக்ஸ்(RHEL), ஒரு குழந்தைக்கு ஒரு மடிக்கணினித் திட்டத்தின் XO கணினி, க்ரியேட்டிவ் காமன்ஸ்-ன் Live Content DVDகள் எனப்பல வழிப்பொருட்கள் தோன்ற அடித்தளம் அமைத்துக் கொடுத்தது ஃபெடோரா.

ஃபெடோராவின் மைய விழுமங்கள் என்ன?

சுதந்திரம், நண்பர்கள், அம்சங்கள், முதன்மை என்னும் நான்கும் ஃபெடோராவின் மைய விழுமங்கள் ஆகும். அவை கீழே விளக்கபட்டுள்ளன.

சுதந்திரம்

கட்டற்ற மென்பொருட்களை முன்னேற்றும் குறிக்கோளை நிறைவேற்ற, நாங்கள் வினியோகிக்கும் மென்பொருட்களைப் பயன்படுத்திக்கொள்ள வேண்டும் என்பது எங்கள் நம்பிக்கை. ஃபெடோராவை முற்றிலும் கட்டற்றதாகவும் எல்லோரும் பகிர்ந்துகொள்ளத் தக்கதாகவும் ஆக்க, தனியுரிம மென்பொருட்களுக்கு இணையான கட்டற்ற மென்பொருள்களை வழங்குகிறோம். ஆகவே, நாங்கள் உருவாக்கியதை யார் வேண்டுமானாலும் தங்கள் சொந்தத் தேவைகளுக்கு எந்தவொரு சட்டச் சிக்கலும் இல்லாமல் பயன்படுத்தலாம்; கட்டற்ற மென்பொருட்களை மேலும் பரப்பலாம்.

நண்பர்கள்

உலகெங்கிலும் உள்ள மக்கள் ஓர் உறுதியான சமூகமாய் இணைந்து உழைக்கும்போது வெற்றி கிட்டும் என்பது எங்கள் நம்பிக்கை. எங்கள் விழுமங்களுக்கு மதிப்பளித்து உதவ விழையும் யார்க்கும் ஃபெடோராவில் இடமுண்டு. பிறருடன் வெளிப்படையாக இணைந்து பணியாற்றுவதோடு, எங்களுக்கு நிதியதவி செய்வோருடன் உள்ள திடமான கூட்டணியின் மூலமும் பல உயரங்களை நம்மால் எட்ட முடியும்.

அம்சங்கள்

புதிய அம்சங்களை உருவாக்குவதற்கான கடின உழைப்பு கட்டற்ற மென்பொருட்களை மேலும் ஆற்றல்மிக்கதாகவும், நெகிழ்தன்மை கொண்டதாகவும், பல லட்சம் மக்களுக்குப் பயனுள்ளதாகவும் ஆக்குகிறதென்று நம்புகிறோம். கட்டற்ற மென்பொருட்களை இன்னும் முன்னோக்கி எடுத்துச் செல்வதானால், அதற்காக எங்கள் நிலைப்பாடுகளை மாற்றிக்கொள்ள நாங்கள் தயங்குவதில்லை. பல மென்பொருள் சமூகங்களோடு நேரடியாக இணைந்து பணியாற்றி, அவர்கள் உருவாக்கியதை ஃபெடோராவின் மூலம் எல்லோர்க்கும் கிடைக்கச் செய்கிறோம். இப்படியாக, ஃபெடோராவைப் பயன்படுத்தவோர, அல்லாதோர் என அனைவரும் பலனடைகிறார்கள்.

முதல்

firstபுதுமையான எண்ணங்களின் ஆற்றலை நம்பும் நாங்கள், அவற்றை எங்களது ஒவ்வொரு வெளியீட்டிலும் வெளிப்படுத்தி வருகிறோம். எங்கள் வெளியீடுகள் வருடம் இருமுறை வருவதால், புதிய மென்பொருட்களைப் பயன்படுத்த நீண்ட காலம் காத்திருக்கத் தேவையில்லை. அதே சமயம், ஃபெடோராவிலிருந்து உருவாக்கப்பட்ட சில லினக்ஸ் இயங்குதளங்கள் நீண்டநாள் உறுதிப்பாட்டிற்கு உகந்தவை. ஆனால், எப்போதும் எதிர்காலத்தை நீங்கள் முதலில் பார்க்கும் வண்ணம், ஃபெடோராவொ நாங்கள் புதுப்பித்துக்கொண்டே இருப்போம்.

மேலும் அறிய வேண்டுமா?

ஃபெடோரா என்பது ஒரு சிறப்பான இயங்குதளம் மட்டுமல்ல; கட்டற்ற மென்பொருட்களை மேம்படுத்தப் பாடுபடும் மக்களின் ஓர் அற்புதமான சமூகமும் ஆகும். நீங்களும் உதவ விரும்பினால் அதற்கும் வழிகள் உள்ளன. மேலும் அறிந்துகொள்ள கீழ்க்காணும் சுட்டிகளைப் பாருங்கள், ஃபெடோரா இயங்குதளம் பற்றியும், ஃபெடோரா பணித்திட்டம் பற்றியும், அதனைச் சாத்தியமாக்கும் மனிதர்களைப் பற்றியும் தகவல்கள் நிறைந்தது.

ஈமேக்ஸ் உரைதிருத்தி – பாகம் 2

ஈமேக்ஸ் என்னும் சூப்பர்மேன் பற்றிய அறிமுகத்தையும் சில கட்டளைகளையும் கடந்த கட்டுரையில் பார்த்தோம். மேலும் கட்டளைகளைப் பயிலும் முன்பு, ஈமேக்ஸின் மேஜிக் ஷோ :)

ஒரு நிரலின் (program) தரத்தை அளவிடப் பயன்படுத்தப்படும் முதல் அளவுகோல் வாசிக்குந்தன்மை (readability). Indentation சரியாக இல்லாத நிரல் நிரலாக ஏற்றுக்கொள்ளப்பட மாட்டாது. அத்தகைய ஒரு நிரலை ஒரே நொடியில் அழகான நிரலாக மாற்றிக் காட்டும் ஈமேக்ஸ்.

  1. Indentation அறவே இல்லாத ஒரு நிரலை ஈமேக்ஸில் திறக்கவும்.
  2. C-x அழுத்தியபின் h அழுத்தவும்.
  3. C-M-\ அழுத்தவும்.

உங்கள் நிரல் எவ்வளவு நேர்த்தியாக சீரமைக்கபட்டுவிட்டது! ஆம் இதெல்லாம் ஈமேக்ஸ்கு ஜுஜூபி :D சரி வாருங்கள் மேலும் சில கட்டளைகள் பயில்வோம்.

பல கோப்புகளைக் கையாளுதல்

பல கோப்புகளை ஒரே நேரத்தில் கையாளுவது பல சமயங்களில் பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, ஒரு கோப்பிலிருந்து உரையை நகலெடுத்து இன்னொரு கோப்பில் இடலாம். வலை உலாவிகளில் பல tab-களைப் பயன்படுத்துவது போலத்தான். vi பயன்படுத்திப் பழகியோருக்கு இது புதுமையாக இருக்கலாம். :P

முதல் கோப்பைத் (sample1 என்று வைத்துக் கொள்வோம்) திறந்தபின் இன்னொரு கோப்பையும் (sample2 என்று வைத்துக் கொள்வோம்) அதேபோலத் (C-x C-f) திறக்கவும். இப்போது sample1 sample2-ன் வலப்பக்கத்தில் இருப்பதாய் எண்ணிக் கொள்ளுங்கள். அதாவது திறக்கப்படும் ஒவ்வொரு புதிய கோப்பும் தற்போதைய கோப்பின் இடப்பக்கத்தில் திறப்பதுபோல் வைத்துக்கொள்ளலாம். இப்போது sample1-ற்குச் செல்ல C-x அழுத்தி வலது அம்புக்குறியை அழுத்தவும். அதேபோல் மீண்டும் sample2-ற்குச் செல்ல C-x <இடது அம்புக்குறி>.

இப்படிப் புதிய கோப்புகளைத் திறந்துகொண்டே போனால் ஒரு கட்டத்தில் தேவையான கோப்பிற்குச் செல்வது தலைவலியாகிவிடும். கவலைப்பட வேண்டாம். நூறு கோப்புகளைத் திறந்தாலும் தேவையான கோப்பிற்குச் செல்ல எளிமையான வழி உள்ளது. C-x அழுத்தி b அழுத்தவும். இப்போது நிலைகாட்டி (cursor) சாளரத்தின் கீழ்ப்பகுதியில் வந்து நிற்கும் (இதை mini-buffer எள்று சொல்வதுண்டு). அங்கே தேவையன கோப்பின் பெயரை இட்டு Enter அழுத்தவும்.

திறக்கப்படிருக்கும் அனைத்துக் கோப்புகளின் பெயர்களையும் பட்டியலிட C-x C-b.

மீளமைத்தல் (undo)

உரைதிருத்தும் போது மீளமைத்தல் என்பது பலருக்கு முக்கியமான தேவை. இதற்கு C-x u பயன்படுத்தலாம். C-_ என்பதும் இதே வேலையைச் செய்யும்.

தேடுதலும் மாற்றுதலும் (Search and replace)

குறிப்பிட்ட சொல்லை அல்லது சொற்றொடரைத் தேட C-s அல்லதி C-r பயன்படுத்தலாம். C-s நிலைகாட்டி இருக்கும் இடத்தில் தொடங்கி முன் நோக்கித் தேடும், C-x பின் நோக்கித் தேடும்.

Regular expressions கொண்டும் தேடலாம். முன்நோக்கித் தேட C-M-s, பின்நோக்கித் தேட C-M-r.

அதேபோல் ஒரு சொற்றொடரைத் தேடி அதற்குப் பதிலாய் வேறொரு சொற்றொடரை இட, C-% அழுத்தவும். Minibuffer-ல் தேடவேண்டிய சொற்றொடரை இட்டு <Enter> அழுத்தவும். பின்னர் புதிய சொற்றொடரை இடவும். இதேபோல் regular expression கொண்டு replace செய்ய C-M-% பயன்படுத்தலாம்.

இப்போது எங்கெல்லாம் replace செய்ய வேண்டும் என்பதையும் குறிப்பிடலாம்.

குறியீடு பொருள்
! அனைத்து இடங்களிலும் மாற்ற
, தற்போது காட்டப்படும் இடத்தில் மட்டும் மாற்ற
y தற்போது காட்டப்படும் இடத்தில் மாற்றி அடுத்த இடத்திற்குச் செல்ல
n அடுத்த இடத்திற்குச் செல்ல
q எதையும் மாற்றாமல் விட