Tip:
Highlight text to annotate it
X
[ MUSIC ]
POWERS: Welcome to This Week on developerWorks.
I'm your host, Calvin Powers.
This week on developerWorks, we teach you a little bit more about how to do more with CSS,
but first let's look at some of the other new content on developerWorks this week.
[ MUSIC ]
NARRATOR: Paul Duvall from Stelligent has published a hot to guide
for using the open source tool CanaryBoard
to create a DevOps dashboard for your IT organization.
The dashboard reveals the state of the entire software system under development --
from check-in to production -- at a glance.
This article shows you how to install and configure your dashboard
and how to use Ruby scripts to programmatically update the dashboard.
[ MUSIC ]
Start learning how to effectively manage privileged user security threats
with a new quick-read guide about the capabilities
of IBM Security Privileged Identity Manager.
This article explains the basics
of how IBM Security Privileged Identity Manager centralizes the management of privileged
and shared accounts and helps you track and audit the activities of privileged users
so you can provide effective security and authentication governance.
Supal Chowdhury and Rohit Sahai have published a tutorial on how
to use the IBM Worklight's optimization framework.
They show a step by step use case for developing a mobile application using the optimization
framework that lets the application developer share code
across multiple mobile application environments
without sacrificing function or the user experience.
They also show the return on investment benefits that come from this approach
to mobile application development.
[ MUSIC ]
POWERS: Don't forget that you can get links to all of those articles at the show's home page
at ibm.com/developerworks/this week.
My guest this week on developerWorks is Mr. Uche Ogbuji.
He's a partner at Zepheira, and you might know him from his work
on the open source project Akara.
Uche has recently published an article on developerWorks
about the CSS preprocessor called LESS.
Uche, welcome to This Week on developerWorks.
Give us the big picture about what LESS is and why it's useful.
OGBUJI: Anyone who's ever used CSS will know that it's not really designed for developers;
it's designed more for people who are formatting documents.
And as such, it's a little bit difficult when we're trying to do some of the manipulations
that we're used to, with conditional information,
with repeated information, et cetera.
So, LESS is a project that came along but it came after a couple of others,
SASS being the first well-known one.
And it's basically the idea of a preprocessor, where you have a bit more capability
in the language but then that now gets compiled into CSS declarations.
So now, again, if you're used to CSS, there are so many sections where you have
to repeat yourself (DRY) , where you have to sort of try
to reorganize things with different parameters.
The developer looks at that and says, look, this is violating everything I've done.
Don't repeat yourself.
It's violating, you know, magic variables or magic constants, et cetera.
So, LESS basically allows you to do things that are comfortable to you as a developer,
such as parameter-izing things and declaring variables.
POWERS: I know that one of the criticisms of CSS preprocessors is that they're often deployed
in a way that requires browser side compilation.
But in your article, you talk about how to get around that.
Can you briefly describe that approach to us?
OGBUJI: It is a valid criticism, because basically when you're doing it,
most people can first of all get LESS or SASS or a processor like that,
they do what the examples show, which is that you put it right in your web page
as the LESS code and then you put a little JavaScript shim which allows it compile that
but by default is going to compile it on the user's browser,
which slows down the site's loading.
So, obviously you want all the performance you can squeeze out
and so in my article I describe how to compile it server side, at the deployment stage
where you actually run the JavaScript compiler against a preprocessor which runs then.
Now, LESS actually is by default just using node.js and in the article I show how to do it
with Rhino, another command-line JavaScript option.
The reason why I did that is that node.js is a marvelous project but it's for a lot more
than just simple JavaScript commands on the server.
You're kind of getting into a lot when you just grab node.js and set it all up.
So I wanted to keep it simple with Rhino, a bit more of a constrained project,
very cross platform, and has been cross platform throughout its history.
So, I show how to in effect download to your server Rhino, the JavaScript compiler,
execute the JAR, you point it at the LESS code; it generates the CSS file
which you can then deploy to be served to the web browser,
which can then interpret it with no delay or problem.
POWERS: Your article also touches on how to use LESS to create mobile responsive designs.
Can you give us a little bit of an overview of that section as well?
OGBUJI: One of the first things I ran into as more of a developer than a designer when dealing
with the fact that the web has become more and more mobile is that it's very difficult
to combine the fact that CSS is already so idiosyncratic with so many cross-browser
and platform differences and you throw mobile into it
and it just...the complexity basically grows exponentially.
And I know that there are designers out there who are really good at sort of snapping
out what they need in terms of constraining the sites for different layouts,
but for someone like me where that's not their first interest,
where they are a developer first it was really difficult.
And I noticed that a lot of what happens that you have these patterns within the idea
of responsive design you're basically doing media queries.
You're asking the device, what's going on, what is the length, what's the width?
And if you think about how that can change dynamically, with the user, you know,
flips it portrait versus landscape, using their phone or tablet or other device like that.
So these media queries are always interrogating the device to find
out what is the user's eye seeing so that the site can adjust accordingly.
And it gets back, you know, parameters.
It gets back, here's the width, here's the...you know, the scaling
and here's everything else like that..
And then you apply those parameters within the CSS in order to sort of say, okay, well,
if they've now flipped it this way, let's change this box over here, or let's shrink this image
over here, to make sure that they get the best web browsing experience.
So, basically what LESS can do is with that idea of those parameters which come back
and which need to be manipulated into now use programming mechanisms to do
that manipulation rather than having to sort of, you know,
rewrite the CSS every different time for every different form factor.
And often, in my case, making a lot of errors and creating a lot of problems along the way.
So in the article I describe how LESS can be used basically to support that parameterization
which is effective for mobile responsive design.
POWERS: Thanks, Uche.
I also want to note that your article has a fantastic resources section at the end
which has links to lots of online resources for developers to get started with LESS.
That's all the time we have for this episode.
We'll see you next week on developerWorks.
[ MUSIC ]