The myth of simplicity

opl-15065k

During a recent trip, I found this faucet-control in one of the hotels we stayed at. It looked elegant. When I tried to use it is when the confusion started.

There were two outlets – a shower above this and another tap-like outlet below. Now, how do I turn the shower on? Am I supposed to pull the lever, or rotate it? Will it open the shower or the other outlet?

Wait… They just told me that hot water is available. How do I get hot water in this?

I just stood as far as possible from the control from where I could still stretch my hand and reach the lever, then started pulling the lever in all possible directions. It moved in whichever direction I pulled it 😀 Sigh.

Anyway, at least water started coming out of the tap. Great! Now it wasn’t hard to guess that it must be the button-like switch above the lever to change it to shower. Yaayyy! First part of the puzzle solved.

Now, we just need to figure out how to control the flow of water, and how to adjust hot/cold. After some more trial and error, I figured out that pulling the lever forward controls the flow, while rotating it sideways controls hot/cold — one side hot and the other cold.

Does it really have to be this hard?

It took me a couple of minutes and some amount of puzzle-solving mindset to figure this out. What would my mom do if she were to use this?

Is it such a complex problem yet to be solved? Haven’t faucets been in use for a few centuries now? Why did it suddenly become so hard?

If you look at the design, it’s clear the designer has tried to achieve the functionality with minimum number of controls (wrong understanding of “minimalist design”). It’s great that they could achieve it, but oops — they overlooked usability.

What went wrong?

If you’re a designer, you might already know what the terms affordance, perceived affordance and signifier mean. In any case…

Affordances – all possible interactions the control is designed for
Perceived affordances – what interactions people think the control provides (which can be ambiguous)
Signifiers – specific indicators to convey what actions are possible (make the perceived affordance clear)

Now, in our faucet above, the lever “affords” to be pulled as well as rotated (and both together). However, the perceived affordance could be to rotate the lever in most cases. But if you’ve seen some “modern” taps, where you need to raise the lever, you might think pulling it is possible too. Perceived affordance is ambiguous here!

Even if one figures out both the affordances, how could we convey which interaction controls what. And in the interaction to control temperature, which side is hot and which is cold? Signifiers is an answer.

But, it looks like Jaguar had to cut down costs, so decided to produce it without signifiers. Poor Jaguar! 😛

 

 

Macbook Review

Context: As some people know, I have always hated Apple as a company, though I love some of the things they have done for design. However, for all the hype about their design, I have found most of their interfaces confusing.

But all this was based on what I observed from other people using the system. Last week, I had to convince myself to work with Mac for at least a couple of weeks, to be able to collaborate with other designers.

I’m just sharing my experience from the last few days. This is all relative to my past experience with Windows and Ubuntu. Also note that I’m a heavy keyboard-user.

Pluses first – it’s anyway a small list 😉

  • Battery
  • Display sharpness
  • Build quality
  • Keyboard backlight
  • Sound (volume and clarity)
  • Ability to customize keyboard shortcuts for any app

What I found annoying

I’ve just grouped them by the app in which it happened.

Finder

  • Hitting Enter renames the file/folder instead of opening it
  • In grid view, pressing right arrow at last item in a row does not go to next row (gets stuck there)
  • Pressing down arrow does nothing if the next row ended before the current column
  • Cmd+Q does not work for Finder alone
  • No way to go back to the last-viewed folder (Alt+Left Arrow in Ubuntu)
  • In the app switcher (Cmd+Tab), Finder is always there, but selecting it does not do anything
  • Normally opening an image (double click) does not let me navigate to next/previous images in the folder (need to open by pressing space)
  • Moving a file/folder from one place to another is painful (there seems to be no shortcut)

Chrome

  • Keyboard shortcuts to switch to next/previous tab (Cmd+Option+Right/Left Arrow) is cumbersome
  • No way to make a website into a desktop app. So, when I use Slack native app, I cannot add links to Pocket

Window Management

  • Switching between windows of same app vs different apps is different (Cmd+` vs Cmd+Tab)
  • Maximising a window is painful (have to hold two keys and then click on the “+” button)
  • Quitting an app and closing it are different
  • Windows don’t open in full size by default
  • Making a window full-screen moves it to a new workspace. #disorienting

Other

  • Initial setup is more painful than Ubuntu
    • Need to set up Apple ID to use App Store
    • Too many questions at every set up
    • Home folder was not added to sidebar by default
    • Setting profile pic is almost impossible 🙁
  • No Home, End, Page-up, Page-down keys
  • Inkscape does not work out of the box (needs X11)

Color palette for charts

When we redesigned the Reports section at Recruiterbox, one of the things we wanted to do was to make them look “nice”, especially the charts. Until now, we’ve been mostly using the default colors provided by Google’s charting library, which looks so BAD! Ok, “bad” is subjective, it at least doesn’t go well with our color palette.

But how do you come up with so many colors that look nice on charts, while being consistent with your color palette?

FUNDA

When I started researching, the first thing I learned was that there are three different types of charts and there are corresponding ways of choosing color palettes:

  • Sequential
  • Diverging
  • Qualitative/Categorical

Sequential and diverging palettes are used to represent values that vary continuously, from low to high or high to low. E.g. population density (sequential), altitude (diverging). However, these are mostly relevant when the values are represented on a map, and cannot be conveyed by something like the size of a bar in a bar chart.

Categorical palettes are the ones that are used to separate items into distinct groups. This is the kind of data we primarily represent in our reports. As such groups have no inherent order, categorical palettes typically contain colors of different hues.

So, these are the two criteria I derived for designing a categorical palette:

  1. The colors should be distinct enough from each other
  2. The color should feel like they belong to the same family (some of them should not stand out among others)

ITERATIONS

Alright, moving from the funda part, the next challenge was to come up with enough number of colors required for charts that satisfy the above criteria. I’m happy that I came across this article from a company called Viget, about how they solved exactly the same problem.

Following the same process, we came up with our new palette after multiple iterations between me and Sneha (our visual designer). And it was fun to watch people going crazy looking at the iterations.

color-palettes-raghu-comment-slack

Selection_731

For people who are curious about the iterations, here you go:
https://www.dropbox.com/sh/zmz7zy1781zfbe1/AABwJL0wUmHQOKtNzBMsoiega?dl=0

END RESULT

So after all these tweakings, this is the new color palette we have come up with. I’m super happy about the result. We’re yet to put it out on charts with real data and see how it works though.

color-palette-all

What is UX?

Just dumping my thoughts from a recent discussion…

You have something that you want your users to do. It could be signing up for your product, giving you their contact number, getting more productive using your product, or clicking on a particular button inside your app. How do you make them do this?

I’d like to quote a favorite statesman of mine in the domain of public policy design:

If you want people to do good, you need to make it easy to do good, and extremely hard to do bad things.

The idea is that most people tend to do what is convenient for them at the moment, without objectively weighing the pros and cons. So if you make it convenient for them to do good, most of them will do it. You can deal with the outliers by imposing penalties.

Now coming back to the original question, UX design is through which you make the users do what is desired. Applying the public-policy funda to UX design, a good user experience is something which makes it easy for your users to do what is desired.

All the aspects of good UX design – being intuitive, less number of clicks, etc – can be derived from this.

Can a smart app have consistent UI too?

While designing user experience at Recruiterbox, there have been many instances where people say “Hey.. isn’t that inconsistent?” My typical immediate thought would like “Dude! I’m trying to make the system smart here.”

I would immediately ask myself the question “Can’t a smart system be consistent?” One part of me would argue that it cannot be, that absolute consistency is nothing but dumbness. The other part would believe there should be a way of achieving smartness without compromising consistency.

One recent example, where I myself had the same question after I almost completed the design is what we call “action-based system”.

Before this design, when you visit a candidate’s profile, there are always two prominent buttons at the top: 1) to move the candidate forward to the next stage of your hiring process, 2) to reject the candidate. No matter what the status of the candidate is, a user knows where exactly to find these actions. Absolutely “consistent”.

Recruiterbox Candidate Profile Header

Consistent but not-so-smart UI in Recruiterbox

On the flip side, let’s say the candidate has just passed Screening and been moved to Telephone Interview stage, but the interview is not scheduled yet. Now, the most probable action a user would do is to schedule the interview. It might look dumb to show “Move to Office Meeting” as the prominent action when even the previous round of interview is not scheduled.

Alright, so how do we resolve this dilemma?

I think it will help if we first answer what we mean by smartness. In my view, a smart system is something that understands different scenarios and prompts me with an appropriate action, rather than letting me figure out what I should do next.

By now, I think it’s reasonably clear that smartness and consistency ARE conflicting aspects. But, they are both useful to the users. So, the answer must be some kind of combination of these two.

I guess taking a look at some other apps will help us get a better clarity. One example I find perfect for this is Android’s App drawer, which I think has achieved a good balance between smartness and consistency.

Image source: bestandroidapps.com

Image source: bestandroidapps.com

Normally, the apps are arranged in alphabetical order, so you roughly know where to find the app you’re looking for. But, recently Android added a new row to the top of this grid, which shows your most frequently used apps. It’s not simply the most frequently used; it is the most frequently used for that time of the day. If I usually listen to music in the morning, it would show my music player in the top row around that time. Maybe I play a game before going to bed. Then the game starts showing up in the top row, again only for that time of the day.

While this is “smart”, it doesn’t affect how I normally find an app – I could either scroll and find it as it’s alphabetically ordered, or I could start typing the name of the app in the search bar at the top. The smartness is restricted to the top row.

In other words, there is a robust base of consistent interface, which is complemented by a layer of smartness.

However, one thing we shouldn’t miss is that what’s considered inconsistent today will become smart tomorrow. For instance, mobile phones used to have consistent buttons few years back. When touch screens were introduced, having different buttons on different screens was probably disorienting, but not anymore.

With the advancements in AI, I’m sure we’ll get used to exponentially increasing levels of smartness in the coming years. We’ll wait and see. Also with different ways of interacting with a system — directly talking to it (voice) and using different gestures — probably the concept of a visible UI will be irrelevant. Until then, let’s build apps with a strong base of consistent UI and a complementary layer of smartness 🙂

What does Fitts’s law mean for web apps?

According to Fitts’s law, the time required to move a pointing device to a target is a function of the distance to the target and its size. In simpler words, the closer and larger a target, the faster it is to click on that target.

When I first heard about it, I was really fascinated by the idea, though it sounds rather obvious in hindsight. I wondered what exactly it means for web apps. (If you are new to Fitts’s law, try this interactive demo).

Prime Pixels Not Applicable To Web Apps

One of the inferences of Fitts’s law is that the easiest areas to click on a screen are the corners and edges of the screen, as you can simply throw your cursor in that direction without overshooting.

Corners and edges are prime screen real estate. (Diagrams: smashingmagazine)

Corners and edges are prime screen real estate. (Diagrams: Smashing Magazine)

But, unfortunately this cannot be applied to web apps, as the edges of the web browser are not always the same as the screen’s edges (unless the app is in full-screen mode).

Still, Closer Is Better

Still, there are other things in the UX that could be improved using Fitts’s law. For instance, modals (lightboxes, overlays or whatever) have been a common way of getting user inputs in web apps, probably borrowed from desktop apps. Though they are helpful when the action needs complete focus without distracted by other elements on the page, it’s an overkill for most lightweight actions.

Inline-editing

For example, until a few months back, if you tried to rename a Google Doc while editing it, it would open a new modal box.

In older Google Docs, you have to move your mouse so fart to complete the rename action.

In older Google Docs, you have to move your mouse so far to complete the rename action.

As you can see, this is not optimal, as you have to move your mouse from where you clicked on the name to the OK button in the modal (not many people use Keyboard shortcuts, even simple ones like hitting Enter to submit a form).

Thankfully Google has changed this behavior recently and now you can do the renaming right there, in place. This obviously feels much more lightweight and takes less effort from the user — no mouse movement and no extra click to save the changes.

In-place renaming in Google Docs

Dropdowns/popovers

Another way of avoiding modals — and hence the long mouse movements — is to use simpler UI elements that appear right next to the element that triggered the action.

In Pocket, when you try to delete an article, the confirmation dialog is shown as a lightweight popover that appears right below the delete icon.

Pocket app uses a popover to confirm the delete action, which is much easier to target.

Pocket app uses a popover to confirm the delete action, which is much easier to target.

To understand the benefit, you can compare this against the “Edit tags” UI of the same app. When you click on the tag icon, a modal box appears in the middle of the screen, with just an input box and a submit button. For such a simple form, a modal is an overkill.

Pocket app uses a modal for editing tags, which makes your mouse cursor travel longer than required.

Pocket app uses a modal for editing tags, which makes your mouse cursor travel longer than required.

You could use a popover very similar to Pocket‘s delete confirmation to show this form. Recruiterbox uses a popover-like UI for simple forms, where modal would be an overkill.

Recruiterbox popover form

Final thoughts

I’m seeing more and more places where modals are being replaced with lightweight and closer UIs. However, the legacy probably left by jQueryUI’s Dialogs and carried on by other libraries like Bootstrap is still haunting us in many places.

Even at Recruiterbox, we have been using modals extensively. Only recently did we decide to avoid modals except for a few actions that require richer forms. Hoping to see more things move in this direction.

References

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/improving-recruiterboxcom-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புதுமையான எண்ணங்களின் ஆற்றலை நம்பும் நாங்கள், அவற்றை எங்களது ஒவ்வொரு வெளியீட்டிலும் வெளிப்படுத்தி வருகிறோம். எங்கள் வெளியீடுகள் வருடம் இருமுறை வருவதால், புதிய மென்பொருட்களைப் பயன்படுத்த நீண்ட காலம் காத்திருக்கத் தேவையில்லை. அதே சமயம், ஃபெடோராவிலிருந்து உருவாக்கப்பட்ட சில லினக்ஸ் இயங்குதளங்கள் நீண்டநாள் உறுதிப்பாட்டிற்கு உகந்தவை. ஆனால், எப்போதும் எதிர்காலத்தை நீங்கள் முதலில் பார்க்கும் வண்ணம், ஃபெடோராவொ நாங்கள் புதுப்பித்துக்கொண்டே இருப்போம்.

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

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