Tag Archives: tutorial

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

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-ஐ கொண்டு உருவாக்கபட்ட படைப்புகளுள் குறிப்பிடத்தக்கது ட்விட்டர் உருவாக்கிய பூட்ஸ்ட்ராப். அதனைப் பயன்படுத்திப் பாருங்கள், லெஸ்ஸின் ஆற்றல் புரியும்.

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

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

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

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

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

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

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

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

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

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

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

திறக்கப்படிருக்கும் அனைத்துக் கோப்புகளின் பெயர்களையும் பட்டியலிட Cx Cb.

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

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

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

குறிப்பிட்ட சொல்லை அல்லது சொற்றொடரைத் தேட Cs அல்லதி Cr பயன்படுத்தலாம். Cs நிலைகாட்டி இருக்கும் இடத்தில் தொடங்கி முன் நோக்கித் தேடும், Cx பின் நோக்கித் தேடும்.

Regular expressions கொண்டும் தேடலாம். முன்நோக்கித் தேட CMs, பின்நோக்கித் தேட CMr.

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

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

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

ஈமேக்ஸ் உரைதிருத்தி – ஓர் அறிமுகம்

ஈமேக்ஸ் (emacs) – இதை என்னவென்று அறிமுகம் செய்வது? வெறும் உரைதிருத்தி (text editor) என்று கூறிவிட முடியாது; அதையும் தாண்டிப் பலவற்றைச் செய்யவல்லது. கிட்டத்தட்ட ஓர் இயங்குதளத்திற்கு இணையான மென்பொருள். ஆம், எழுத்துக் கோப்புகள் (text documents) தொடங்கி, JPEG, PNG போன்ற படக்கோப்புகள், PDF ஆவணங்கள் எனப் பல வகையான கோப்புகளைக் கையாள வல்லது.

கோப்புகளைப் பார்ப்பதும் திருத்துவதும் வெறும் சிறு பகுதிதான். இதைக்கொண்டு மின்னஞ்சல் அனுப்பலாம், கிட் (git) போன்ற திருத்தக் கட்டுப்பாட்டு மென்பொருட்களைக் (revision control systems) கையாளலாம், முனையத்தைப் (terminal) பயன்படுத்தலாம். மேலும் நாள்காட்டி, கணிப்பான்(calculator), விளையாட்டுகள் எனப் பல வசதிகளை உள்ளடக்கியது. அதனைக் கிட்டத்தட்ட ஓர் இயங்குதளத்திற்கு இணையாதென நான் கூறியதன் காரணம் இப்போது புரியும் என்று நினைக்கிறேன் 🙂

இதற்கு இன்னொரு சிறப்பம்சமும் உண்டு. கட்டற்ற மென்பொருள் கோட்பாட்டின் தந்தையென அழைக்கப்படும் ரிச்சர்ட் ஸ்டால்மன் அவர்களால் உருவாக்கப்பட்டு, GPL உரிமத்துடன் (இதுவும் அவர் வடிவமைத்ததே) வெளியடப்பட்ட முதல் மென்பொருள் ஈமேக்ஸ்.

இத்தகைய சிறப்பான ஒரு மென்பொருளைக் கற்றுக்கொள்ள இன்னும் ஏன் தாமதிக்க வேண்டும்? வாருங்கள் ஈமேக்ஸ் உலகத்திற்குள் புகுவோம்.

நிறுவுதல்

பல குனு/லினக்ஸ் இயங்குதளங்களில் தொகுபதிவகத்திலேயே (repository) ஈமேக்ஸ் கிடைக்கும். அந்தந்த இயங்குதளத்தின் பொதி மேலாண்மை மென்பொருள் வாயிலாகவே நிறுவிக்கொள்ள முடியும். உபுண்டு இயங்குதளத்தில் நிறுவ, முனையத்தில் கீழ்க்காணும் கட்டளையை இடவும்:

sudo apt-get install emacs23

ஈமேக்ஸ் கட்டளைகள்

ஈமேக்ஸ் கட்டளைகளைப் பார்க்கும் முன்பு, இரு குறியீடுகளை அறிந்து கொள்வது பயனுள்ளதாய் இருக்கும்.

குறியீடு பொருள்
C-x Ctrl விசையுடன் சேர்த்து x விசையை அழுத்தவும்
M-x Meta (Alt) விசையுடன் சேர்த்து x விசையை அழுத்தவும்

கோப்பைத் திறத்தல்

Cx அழுத்தி Cf அழுத்தியதும் நிலைகாட்டி (cursor) சாளரத்தின் கீழ்ப்பகுதியில் வந்து நிற்கும். அங்கே திறக்கவேண்டிய கோப்பிற்கான பெயரை இடவும்.

Screenshot of opening a file in emacs

Screenshot of opening a file in emacs

கோப்பை சேமித்தல்

கோப்பில் மாற்றங்கள் செய்தபின் அதனை சேமிக்க, Cx Cs (C-x அழுத்தியபின் C-s அழுத்தவும்).

கோப்பை மூடுதல்

சேமித்த கோப்பை மூட Cx k (Cx அழுத்தியபின் k அழுத்தவும்) Enter

ஈமேக்ஸை விட்டு வெளியேற Cx Cc

உரை திருத்துதல்

உரையின் ஒரு பகுதியை select செய்ய, எப்போதும் போல Shift-ஐ அழுத்திக்கொண்டு அம்புக்குறிகளைப் (arrow keys) பயன்படுத்தலாம். அல்லது, அப்பகுதியின் தொடக்கத்தில் நிலைகாட்டியை வைத்து C-<space> அழுத்திவிட்டு, பின்னர் அம்புக்குறிகளைக் கொண்டு தேர்வு செய்யலாம்.

தேர்வு செய்த பகுதியை நகலெடுக்க Mw

தேர்வு செய்த பகுதியை அழிக்க Cw. மற்ற உரைதிருத்திகளில் இருப்பது போல் அல்லாமல், வெட்டுவதும் அழிப்பதும் (cut & delete) ஈமேக்ஸைப் பொறுத்தவரையில் ஒன்றே. அதாவது delete செய்யப்படும் எந்த ஓர் உரையும் clipboard-ல் இருக்கும். எனினும், Backspace அல்லது Delete விசைகளைக் கொண்டு ஒவ்வோர் எழுத்தாக அழிக்கப்படும் உரை க்ளிப்போர்டிற்குச் செல்லாது.

ஏற்கனவே வெட்டப்பட்ட அல்லது நகலெடுக்கப்பட்ட உரையை paste செய்ய Cy (y = yank)

உலாவுதல் (navigation)

பொதுவாகப் பயன்படுத்தப்படும் அம்புக்குறிகள், Home, Endஆகிய விசைகள் அல்லாமல் ஈமேக்ஸிற்கென்றே உரித்தான சில விசைகள் உள்ளன. அவற்றுள் சில:

ஓரெழுத்துப் பின்னால் செல்ல C-b

ஓரெழுத்து முன்னால் செல்ல C-f

முந்தைய வரிக்குச் செல்ல C-p

அடுத்த வரிக்குச் செல்ல C-n

வரியின் தொடக்கத்திற்குச் செல்ல C-a

வரியின் இறுதிக்குச் செல்ல C-e

இவை முதலில் சற்றுக் கடினமாகத் தோன்றினாலும், பழகிக்கொண்டால் விரைவாகத் தட்டச்சு செய்ய முடியும் (விசைப்பலகையில் அம்புக்குறிகள் இருக்கும் ஓரமாகக் கையை நகர்த்த வேண்டியதில்லை).

குறிப்பு: இதுபோன்ற கணினி தொடர்பான தமிழ்க் கட்டுரைகளுக்கு கணியம் மின்னிதழ் (e-magazine) ஒரு நல்ல ஊடகம்.