Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Confusion with the code in a blog post.

I am following a blog post on how to write a CSS preprocessor. I am getting confused with the code, because when I look at the first code block and second code block for writing the preprocessor, I can't tell if the first code block gets changed, or the second code block just goes under the first.

First code block

#!/usr/bin/env node
var fs = require('fs');

var source = process.argv.splice(2)[0];
var target = source.substring(0, source.lastIndexOf('.')) + '.css';

fs.readFile(source, 'utf-8', function(err, data) {
    if (err) throw err;

    fs.writeFile(target, data, function(err) {
        if (err) throw err;

        console.log('Wrote ' + target + '!');
    });
});

Second code block

#!/usr/bin/env node
var fs = require('fs');

var source = process.argv.splice(2)[0];
var target = source.substring(0, source.lastIndexOf('.')) + '.css';

fs.readFile(source, 'utf-8', function(err, data) {
    if (err) throw err;

    var analyze = function(input) {
        return input.map(function(line) {
            var rPart = line.trimLeft();

            return {l: line.replace(rPart, ''), r: rPart};
        });
    };

    var transform = function(lines) {
        var bracketFound = false;

        return lines.map(function(line) {
            if (line.l) {
                return line.l + line.r + ';';
            }
            else if (line.r) {
                bracketFound = true;

                return line.r + ' {';
            }
            else if (bracketFound) {
                bracketFound = false;

                return '}';
            }
        });
    };

    var output = transform(analyze(data.split('\n'))).join('\n');

    fs.writeFile(target, output, function(err) {
        if (err) throw err;

        console.log('Wrote ' + target + '!');
    });
});

Can anybody clear this up for me?

2 Answers

Seth Kroger
Seth Kroger
56,416 Points
Seth Kroger
Seth Kroger
56,416 Points

The first gets changed to the second because the line

#!/usr/bin/env node

is a special line that states the script is to be ran with node and has to be the first line of the file. That way, if you set the executable permission on the script you can call it by just typing '''./app.js''' (or '''app.js''' if it's in your PATH)

https://en.wikipedia.org/wiki/Shebang_%28Unix%29

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The first looks to be a earlier version of the script, where it's just outputting the contents of the source file directly into the destination file, and logging a console message. It's not actually modifying the content at all.

The second one seems to be checking each line and splitting it into the left and right parts, depending on whether there was any leading whitespace, then adding brackets around the indented lines as required.