Daily Javascript

PSD.js (GitHub: meltingice/psd.js, License: MIT, npm: psd)

PSD.js is a general purpose PSD parser written in Coffeescript. I was inspired by PSD.rb which allows you to work with a Photoshop document in a manageable tree structure and find out data such as:

• Document structure
• Document size
• Layer/folder size + positioning
• Layer/folder names
• Layer/folder visibility and opacity
• Font data (via psd-enginedata)
  • Text area contents
  • Font names, sizes, and colors
• Color mode and bit-depth
• Vector mask data
• Flattened image data
• Layer comps

Although there are still some pieces missing that are present in PSD.rb, the eventual goal is to have all the features PSD.rb offers. So let’s look at an example for converting .psd as a .png.

import PSD from 'psd';

const psd = PSD.fromFile('my/awesome/file.psd');

psd.parse();

// Log the tree structure of the .psd
console.log(psd.tree().export());

// You can use promises syntax for opening and parsing
PSD.open('my/awesome/file')
    .then(psd => psd.image.saveAsPng('./output.png'))
    .then(() => console.log('Finished!'));

There is a very extensive API for traversing the document. If you would know the path to a group or layer within the tree, there is a way you can search by that path. That would look something like this:

psd.tree().childrenAtPath('Version A/Matte');
psd.tree().childrenAtPath(['Version A', 'Matte']);

Once you have the layer you are interested in you can access the data like so:

// Get the first layer
const node = psd.tree().descendants()[0];

// Read the name
node.get('name');
// Read the width
node.get('width');

Here is an example of the output tree().export() would give you:

{
    children: [
        {
            type: 'group',
            visible: false,
            opacity: 1,
            blendingMode: 'normal',
            name: 'VersionD',
            left: 0,
            right: 900,
            top: 0,
            bottom: 600,
            height: 600,
            width: 900,
            children: [
                {
                    type: 'layer',
                    visible: true,
                    opacity: 1,
                    blendingMode: 'normal',
                    name: 'Makeachangeandsave.',
                    left: 275,
                    right: 636,
                    top: 435,
                    bottom: 466,
                    height: 31,
                    width: 361,
                    mask: {

                    },
                    text: {
                        value: 'Makeachangeandsave.',
                        font: {
                            name: 'HelveticaNeue-Light',
                            sizes: [
                                33
                            ],
                            colors: [
                                [
                                    85,
                                    96,
                                    110,
                                    255
                                ]
                            ],
                            alignment: [
                                'center'
                            ]
                        },
                        left: 0,
                        top: 0,
                        right: 0,
                        bottom: 0,
                        transform: {
                            xx: 1,
                            xy: 0,
                            yx: 0,
                            yy: 1,
                            tx: 456,
                            ty: 459
                        }
                    },
                    image: {

                    }
                }
            ]
        }
    ],
    document: {
        width: 900,
        height: 600,
        resources: {
            layerComps: [
                {
                    id: 692243163,
                    name: 'VersionA',
                    capturedInfo: 1
                },
                {
                    id: 725235304,
                    name: 'VersionB',
                    capturedInfo: 1
                },
                {
                    id: 730932877,
                    name: 'VersionC',
                    capturedInfo: 1
                }
            ],
            guides: [

            ],
            slices: [

            ]
        }
    }
}

First of all my excuse for not posting the past 2 days. I had a few days off from my day job because I went to a concert of Bullet For My Valentine(for those of you that might me interested). This also caused me to mis this new release of Node.js so here is a small roundup of the notable changes.

buffer (#3767)

The noAssert option for many buffer functions will now silently drop invalid write values rather than crashing This makes the behavior match what the docs suggest.

child_process (#3577)

child.send() now properly returns a boolean like the docs suggest.

http_parser (#3569)

update http-parser to 2.6.0 from 2.5.0 (James M Snell) . Now supports the following HTTP methods: LINK, UNLINK, BIND, REBIND, UNBIND. Also added ACL and IPv6 Zone ID support.

npm (#3685)

upgrade npm to 3.3.12 from v3.3.6. See the release notes for v3.3.7, v3.3.8, v3.3.9, v3.3.10, v3.3.11, and v3.3.12 for more details.

REPL (#3630)

The REPL no longer crashes if the persistent history file cannot be opened.

tls (#3755)

The default sessionIdContext now uses SHA1 in FIPS mode rather than MD5.

v8(#3779)

Added some more useful post-mortem data.

Documentation (#3662)

All of the API docs have been re-ordered so as to read in alphabetical order.

The known issues that are still in there are:

• Surrogate pair in REPL can freeze terminal. #690
• Calling dns.setServers() while a DNS query is in progress can cause the process to crash on a failed assertion. #894
• url.resolve may transfer the auth portion of the url when resolving between two full hosts, see #1435.
• Unicode characters in filesystem paths are not handled consistently across platforms or Node.js APIs. See #2088, #3401 and #3519.

Domcom (GitHub: taijiweb/domcom, License: MIT, npm: domcom)

Yesterday I got an email with the request to take a look at the Domcom. Domcom is a frontend framework which uses declarative components to proxy the DOM in order to implement better performance than VirtualDOM. It comes with “lazy” reactive functions to manage data. A few of the features included in this framework are:

• Declarative compostable components with reactive function

• Only render the invalidated components and refresh the really changed DOM nodes with automatic update status checking

• Decouple with model and controller

• Simple but powerful route

• Support for promise

And a whole lot more but I would refer you to the Github project for that.

Here is a code example provided by the developer to give a taste of Domcom:

In javascript:

    const {list, text, p, flow, see} = dc
    ​
    demoSum = function() {
      let a, b, comp, p1, t1, t2;

      a = see(1);
      b = see(2);

      comp = list((t1 = text({
        value: a,
        onchange() { return a(this.value * 1); }

      })), (t2 = text({
        value: b,
        onchange() { return b(this.value * 1); }

      })), p1 = p(flow.add(a, b)));

      dc.updateWhen([t1, t2], 'change', p1);

      return comp.mount();
    };
    ​
    demoSum();

Since the developer likes coffee-script is here the same example in coffee-script.

{list, text, p, flow, see} = dc

demoSum = ->

    a = see 1; b = see 2

    comp = list \
        (t1 = text value: a, onchange: -> a @value*1),
        (t2 = text value: b, onchange: -> b @value*1),
        p1 = p flow.add a, b

    dc.updateWhen [t1, t2], 'change', p1

    comp.mount()

demoSum()

React Treebeard (GitHub: alexcurtis/react-treebeard, License: MIT, npm: react-treebeard)

Ever come a cross a task where you needed to quickly make a bunch of data explorable or where you needed to visualize a massive object? Now there is React Treebeard which gives you a tree with collapsed leafs.

So let’s say we have a batch of data like this:

const myData = {
    name: 'root',
    toggled: true,
    children: [
        {
            name: 'parent',
            children: [
                {
                    name: 'child',
                    terminal: true
                }
            ]
        },
        {
            name: 'loading parent',
            loading: true
        },
        {
            name: 'parent',
            children: [
                {
                    name: 'nested parent',
                    children: [
                        {
                            name: 'nested child',
                            terminal: true
                        }
                    ]
                }
            ]
        }
    ]
};

Then our component would look something like this:

function TreeExample(props){
    return (
        <Treebeard
            data={props.data}
            onToggle={onToggle}
        />
    );
}

const onToggle = () => {
    // Implement custom behavior
};

const shell = document.querySelector('#shell');
ReactDOM.render(<TreeExample data={ myData }/>, shell);

With the decorators it’s very easy for you to use your own Node Header, Toggle and Loading components. This would look something like this:

let decorators = {
    Loading: (props) => {
        return (
            <div style={props.style}>
                loading...
            </div>
        );
    },
    Toggle: (props) => {
        return (
            <div style={props.style}>
                <svg height={props.height} width={props.width}>
                    // Vector Toggle Here
                </svg>
            </div>
        );
    },
    Header: (props) => {
        return (
            <div style={props.style}>
                {props.node.name}
            </div>
        );
    }
};

<Treebeard data={...} decorators={decorators}/>

If you wanna see what this all looks like while running in the browser, check out the demo page provided by the developer.

Notie.js (GitHub: jaredreich/notie.js, License: MIT)

Notie.js is a simple notification plugin. It does not have any dependencies, which makes it very light and easy to work with. Throughout time I’ve seen multiple libraries and UI frameworks implement something similar, but what I like about this little library is that when you have a very small project, it can save you some time on implementing feedback to the user.

Sadly it’s not available via npm or bower, but I think that is kind of the point this library is trying to make. Everything nowadays is bundled and transpiled, which I like very much, but it is nice to see that some people still take this approach.

So let’s include it in our markup like this:

<body>
  ...
  <script src="/path/to/notie.js"></script>
</body>

Now when you want to send a notification or confirm something with your user you can use it like this:

notie.alert(style, 'message', time_in_seconds);

notie.confirm('Title text', 'Yes button text', 'No/cancel button text', function(){
    // User choose Yes.
});

The style in this example would be the “theme” of the alert. By default these would be:

1. OK ( Green )
2. Warning ( Yellowish )
3. Error ( Red )
4. Notice ( Blue )