DailyJS

DailyJS

The JavaScript blog.


Tagmac
Featured

mac graphics ES6 ascii

ASCII to Vector Images

Posted on .

ASCII to vector

Charles Parnot, developer of a lab notebook application for Mac OS, recently gave a talk at NSConference about turning ASCII art into vector drawings. He's written a post about it with some awesome diagrams, entitled Replacing Photoshop With NSString:

Each shape is defined by a series of sequential characters, and a new shape is started as soon as you skip a character in the above list. So the first shape could be defined by the series ‘123456’, then the next shape with ‘89ABCDEF’, the next with ‘HIJKLMNOP’, etc. The simplest method +imageWithASCIIRepresentation:color:shouldAntialias: will draw and fill each shape with the passed color (there is also a block-based method for more options).

Earle Castledine has developed a JavaScript version called Cocoscii that can generate DOM images. The API is based around template strings:

const closeImg = cocoscii(`  
  · · · · 1 1 1 · · · ·
  · · 1 · · · · · 1 · ·
  · 1 · · · · · · · 1 ·
  1 · · 2 · · · 3 · · 1
  1 · · · # · # · · · 1
  1 · · · · # · · · · 1
  1 · · · # · # · · · 1
  1 · · 3 · · · 2 · · 1
  · 1 · · · · · · · 1 ·
  · · 1 · · · · · 1 · ·
  · · · 1 1 1 1 1 · · ·
  `, (idx, style) => {
    if (idx === 0) {
      style.fill = "#000";
    } else {
      style.stroke = "#fff";
    }
  });

The readme describes how drawing with ASCII works:

The basics are, you fill a grid with the ordered markers ... Any other characters are ignored.

If the numbers are sequential, they become a path. If you skip a number, then a new path starts. If a number is repeated twice, it becomes a line. If a number is repeated more than twice, it becomes a circle that fits inside the bounding box of all the points.

This sounds like a potentially hacker-friendly way of generating icons and simple game animations. I imagine it would be pretty easy to use it with effects like gradients and drop shadow.

Maybe there's even some way of extending the principle to something like Monodraw?

Update: There's also a Node implementation now as well! (npm: node-cocoscii)

Featured

mac node modules http native proxy

Node Roundup: Tint, Redbird

Posted on .

Tint

Tint2

Desktop apps built with node-webkit or similar technologies are on the rise. The idea is seemingly simple: package the Node runtime along with a small program that runs your Node web app as if it's a native application.

Tint is an alternative. It uses a modified version of Node that bridges to native components, so you can actually write JavaScript that creates native Mac windows, buttons, web views, dialogs, and more.

It's created by a company called True Interactions, and is MIT licensed. If you're an Objective-C developer you might like to check out Main_mac.mm, because this is where the authors have successfully integrated Objective-C++ with Node's event loop.

I built it from source and created a quick test application this afternoon to see what the API feels like:

require('Application');

var Window = require('Window');  
var Button = require('Button');

var mainWindow = new Window();  
var button = new Button();

mainWindow.title = 'DailyJS';

button.title = 'Hello';  
button.addEventListener('mousedown', function() {  
  button.title = '^_^';
});

button.addEventListener('mouseup', function() {  
  button.title = 'Hello';
});

mainWindow.appendChild(button);

mainWindow.addLayoutConstraint({  
  priority: 'required',
  relationship: '=',
  firstItem: button,
  firstAttribute: 'top',
  secondItem: mainWindow,
  secondAttribute: 'bottom',
  multiplier: 0.0,
  constant: 0.0
});

setInterval(function() {  
  button.title = Math.random();
}, 1000);

I ran the script with ./build/Release/tint example.js and got a window with a button. I wrote this script by looking at the tests to see how the API works.

I think this is a cool project and I'd really like to make a real Mac application with it, but I'm not sure how to actually distribute an application bundle that people can easily install. I'll keep playing with it and write a longer tutorial if I discover anything.

Redbird

Redbird (GitHub: OptimalBits / redbird, License: BSD, npm: redbird) by OptimalBits is a reverse proxy for dealing with dynamic virtual hosts, load balancing, proxying web sockets and SSL encryption.

var proxy = require('redbird')({port: 80});

// Route to any global ip
proxy.register('optimalbits.com', 'http://167.23.42.67:8000');

// Route to any local ip, for example from docker containers.
proxy.register('example.com', 'http://172.17.42.1:8001');  

The documentation includes a full SSL example, and the authors are planning support for load balancing and IP filtering.

Featured

mac node modules

Zephyros and node-zephyros

Posted on .

Intuitive, friendly, fast: none of these things describe window management on a Mac. Particularly if you use more than one screen with a laptop and occasionally unplug the second screen. What a mess! Anyway, those of us in such situations have adopted a variety of tools for forcing windows to behave. I currently use Spectacle, which is free and open source!

What about a programmatic API? Daniele Polencic sent in node-zephyros (GitHub: danielepolencic / node-zephyros, License: MIT), which is a Node module that talks to Zephyros:

The OS X window manager for hackers. At its core, Zephyros just runs quietly in your menu bar, and listens for your script. You typically write a script that binds global hot keys to do stuff, like moving or resizing windows.

You can bind keys to JavaScript callbacks, and even call the Zephyros API:

var Zephyros = require('zephyros');

var z = new Zephyros();

z.bind('t', ['Cmd', 'Shift']).clipboardContents().then(function(clipboard) {  
  console.log('clipboard:', clipboard);
});

Daniele's project originated from a talk at LNUG about Zephyros:

Originally the library was a nice excuse to get my hands dirty with Michael Fogus' book, Functional JavaScript. It features lazy chains, promises and mixins, and the tests are written in Mocha.

If you're wondering how the tests work, then take a look at mockServer.js. The module communicates with Zephyros using sockets, so it can be tested by creating a mock server that generates the expected responses.

Now you should be able to get those windows under control.

Featured

JSON mac node modules windows uuid

Node Roundup: 0.10.7, JSON Editor, puid, node-mac

Posted on .

You can send in your Node projects for review through our contact form.

Node 0.10.7

Node 0.10.7 was released last week. This version includes fixes for the buffer and crypto modules, and timers. The buffer/crypto fix relates to encoding issues that could crash Node: #5482.

JSON Editor Online

JSON Editor Online

JSON Editor Online (GitHub: josdejong / jsoneditor, License: Apache 2.0, npm: jsoneditor, bower: jsoneditor) by Jos de Jong is a web-based JSON editor. It uses Node for building the project, but it's actually 100% web-based. It uses the Ace editor, and includes features for searching and sorting JSON.

It's installable with Bower, so you could technically use it as a component and embed it into another project.

english-time

Azer Koçulu sent in a bunch of new modules again, and one I picked out this time was english-time (GitHub: azer / english-time, License: BSD, npm: english-time). He's using it with some of the CLI tools he's written, so rather than specifying a date in an ISO format users can express durations in English.

The module currently supports milliseconds, seconds, minutes, hours, days, weeks, and shortened expressions based on combinations of these. For example, 3 weeks, 5d 6h would work.

puid

puid (GitHub: pid / puid, License: MIT, npm: puid) by Sascha Droste can generate unique IDs suitable for use in a distributed system. The IDs are based on time, machine, and process, and can be 24, 14, or 12 characters long.

Each ID is comprised of an encoded timestamp, machine ID, process ID, and a counter. The counter is based on nanoseconds, and the machine ID is based on the network interface ID or the machine's hostname.

node-mac

node-windows provides integration for Windows-specific services, like creating daemons and writing to eventlog. The creator of node-windows, Corey Butler, has also released node-mac (GitHub: coreybutler / node-mac, License: MIT, npm: node-mac). This supports Mac-friendly daemonisation and logging.

Services can be created using an event-based API:

var Service = require('node-mac').Service;

// Create a new service object
var svc = new Service({  
  name: 'Hello World',
  description: 'The nodejs.org example web server.',
  script: '/path/to/helloworld.js')
});

// Listen for the "install" event, which indicates the
// process is available as a service.
svc.on('install', function() {  
  svc.start();
});

svc.install();  

It also supports service removal, and event logging.

Featured

mac backbone.js couchdb

Kanso Repository, Recipes with Backbone, Appify UI

Posted on .

Kanso Package Repository

Kanso (GitHub: kanso ) has been changed to work more like a generic build system for
CouchApps. It's more framework agnostic, and includes a package repository, which is
available at kan.so/packages. From Caolan
McMahon in the New Kanso release and change of direction
thread
:

Essentially, all you need to add to your project is a kanso.json file describing how it should be built. Once your app is in this format, it's possible to merge it with other design docs written in the same way. Using this basic principle, we've developed a library of JavaScript modules, build-steps, and more, all of which can be easily shared between projects.

If you're working with CouchDB and want a relatively easy way to run
JavaScript apps, then it's worth giving Kanso a try. The community on
the Kanso Google Group is still
relatively small and helpful.

Recipes with Backbone

Recipes with Backbone (price: \$24) is an ebook by Nick Gauthier and Chris Strom that covers an introduction
to Backbone.js, namespacing, view templates, collection views, actions,
animations, non-REST models, routes, and more. The full table of
contents is here: Recipes with
Backbone
and excerpts are
available for Collection View
(PDF)
and Changes Feed (PDF).

I haven't yet bought a copy for review, but the sample content looks
promising. If you buy it, please let everyone know what you think in the
comments!

Appify UI

Appify UI by Thomas Aylott helps package web apps as Mac OS X bundles. The thing that makes
it slightly special is Node apps can be bundled just as easily as
anything else. There's a Node demo app, and instructions on how to make
them in the project's documentation.