arei.net ⇒ uncategorized
Introducing ZephJS

We are pleased to announce the release of ZephJS!

ZephJS is an extremely easy to use, simple to understand, ultra-light framework for defining and using Web Components. ZephJS is perfect for people writing component libraries, teams building applications or sites that just require a few custom components, or projects building whole applications that do not want the gigantic weight of a modern JavaScript browser framework. ZephJS simplifies the process of defining custom Web Components into a highly readable declarative structure that uses standard JavaScript, standard HTML markup, and standard CSS styling. And ZephJS weighs in at less than 20k minified!

Here’s an example of using ZephJS to build a customized button:

my-button.js
import {ZephComponents} from "./zeph.min.js";
import {html,css,attribute,property,bind,onCreate,onEvent} from "./zeph.min.js";

ZephComponents.define("my-button",()=>{
    html("./my-button.html");
    css("./my-button.css");

    attribute("icon","");
    attribute("icon-placement","left");
    attribute("disabled",undefined);

    property("clickCount",0);

    bind("@icon","button > img","@src");
    bind("@disabled","button");

    onCreate((element)=>{
        console.log("Element '"+element.getAttribute("name")+"' created!",element);
    });

    onEvent("click",(event,element)=>{
        if (element.hasAttribute("disabled")) {
            event.stopPropagation();
            event.preventDefault();
            return;
        }

        element.clickCount += 1;

        console.log("Button '"+element.getAttribute("name")+"' clicked "+element.clickCount+" times.");
    });
});

ZephJS uses modern, standard JavaScript to make writing Web Components super easy to do. There is no mucking about with Shadow DOM or figuring out how to add encapsualted styles; Zeph handles all of that for you. Want to add an attribute to your Web Component? Zeph has you covered with its attribute() declaration. Want that attribute to update a component in your Web Component’s internal content? Zeph has you covered with support for Attribute/Property/Content binding. Want to handle a click event on a button nested in your Web Component’s internal content? Zeph makes it easy to do so. Zeph provides all the tools you need to define and use modern Web Components.

How ZephJS Works

At the heart of ZephJS is the ZephComponents.define() method to which you provide the name of your component and the definition of that component. The definition is a standard JavaScript function within which you call a number of declarative definition methods to describe the content, style, and interactions of your Web Component.

The definition methods you call builds what ZephJS calls a “context” that describes the Web Component. It uses this context to create a unique class which is used with the Custom Elements API to register the Web Component for usage in your HTML. When the registered component is created (via tag usage or document.createElement()) the constructed class constructor is called and ZephJS populates the component as described in the context.

Definition Methods

There are currently seventeen different definition methods for you to describe your Web Component with ranging from providing HTML and CSS to handling events. Here are the some of the most useful…

html() is used to add the internal content of your Web Component, that is all the HTML that makes up the inner workings of your component.

css() is used to associate a set of internal CSS style rules to your content. These rules can target the internal content (provided by html() above) or the created element itself (with the :host and :host() psuedo-selectors.)

attribute() adds an attribute to your custom element and associates an initial value with that attribute.

property() adds a property to your custom element and associates an initial value with that property.

bind() and bindAt() are used to watch for attribute/property/content changes in your element and then propagate the changed value to some other attribute/property/content of a different element. (See “Bindings” below.)

onInit() / onCreate() / onAdd() / onRemove() / onAdopt() all allow you to provide a callback function to execute when certain ZephJS Lifecycle events occur. For example, onAdd(myAddHandler) would execute when the element is added to some Document or DocumentFragement.

onAttribute() is used to execute a callback if a given attribute on the element is changed.

onProperty() is likewise used to execute a callback if a given property of the element is changed.

onEvent() and onEventAt() are used to execute some callback handler when a given event (like a mouse click or a keystroke) occurs.

There are a few other definition methods, but these are the key ones. If you want to know more, check out the ZephJS Quick Start guide or the ZephJS API documentation

Inline vs Separated Content

With both the html() and css() definition methods you may either provide the content inline as a string, or you may provide a URL or relative filename. If the latter, ZephJS will go out and load the URL or relative filename and use that as the content for the call.

ZephJS highly recomends you use the relative filename approach. This allows you to separate your code, content, and style information cleanly.

Additionally, ZephJS provides a bundler tool that will read your component(s) and all of the associated html() and css() file references and bundle them into a single usable JavaScript file for production systems or distribution. This means keeping your code clean and separated can be done without impacting your external performance.

Bindings

Due to the ZephJS design goal to “Never try to outwit the browser”, ZephJS does not provide inline binding template strings the way most of the big JavaScript frameworks do. However, ZephJS does provide bindings rooted to the element or an element within the web components internal content. To do so you provide the source element you want to watch, what you want to watch on that source element (attribute, property, or content), the target element to propagate the change to, and what on the target element to propagate to (attribute, property, or content).

Here are a few examples:

bind("@value","div > input.username","@value");

This would bind the Attribute “value” on the custom element to propagate any changes to the attribute “value” on the element “div > input.username” within the internal content.

You could even shorten this by dropping the last argument; ZephJS will use the source name (“@value”) for the target name, if not provided.

bind("@value","div > input.username");

Here’s another example:

bindAt("button",".clickCount","div > span.counter","$");

This would bind the property “clickCount” on the “button” element to propagate any changes to the content (specified here as “$”) of the “div > span.counter” element.

Bindings use a special notation to determine if you are refering to an Attribute, a Property, or the content of an element, but once you understand the rules of the notation it is pretty easy to read:

  • An Attribute is prefixed by the “@” character as in “@value”.
  • A Property is prefixed by the “.” character as in “.value”.
  • The content of an element is specified by the entire string “$”.

Bindings are a really simple, but highly useful way to move information around in your Web Component without having to worry about all the boilerplate details to do so. It is yet another example of how ZephJS tries to simplify the heavy lifting for you.

Events

When you are defining a Web Component you are defining the details about an element that will be created later. As such, adding events around those elements is normally non-trivial. ZephJS, however, makes it super easy with the onEvent() and onEventAt() definition methods.

First, you tell ZephJS what element you want to watch for events: the onEvent() method watches the custom element itself, while the onEventAt() method takes a CSS Query Selector string as its first argument and matches it against any element within its internal content.

Next, of course, you give the name of the event you want to watch for, such as “click” or “keyup” or “dragstart”. Any event that would occur on an element can be used.

Finally, you provide a callback function to execute when the event occurs. This callback function receives the event object, but it also receives the custom element itself and the internal content, allowing you to interact with all the pieces of the web component.

Getting Started

So that is the basics of ZephJS the extremely easy to use, simple to understand, ultra-light framework for defining and using Web Components. We have covered all the key features of ZephJS, but there is, of course, lots more. Fortunately ZephJS has provided a ton of documentation to read and learn about all the in’s and out’s of building Web Components.

We recommend you get started here, with our Quick Start Guide:

But if you are more interested in a specific area…

Naturally though, there is no better way to learn ZephJS then to roll up the proverbial sleves and try it out…

You can start by checking out the ZephJS repository. From there you can learn all about the details of ZephJS including how to install it and get started using it.

Reaching Out

We are super excited about ZephJS and really want to hear from you. Feel free to drop us a line, file a bug, submit a PR, whatever. We would love to hear what you are doing with ZephJS and all the multitude of ways you find it cool.

JSConf 2013 Beach Ultimate Frisbee Game

Want to getaway from the conference and get some exercise? Do you know or want to learn what a huck is? Do you want to physically do a layout instead of building one in CSS?

Come play some Beach Ultimate Frisbee!

Join like-minded individuals on Thursday, May 30th from 5:00pm until dark as we toss the disc about and hopefully, if we get enough interest, have a sweet game of Beach Ultimate. I’ll bring the cones and discs, you just need to bring a White and a Dark shirt (Grey does not count as either).

We’ll be playing out on the beach at roughly the location marked on this map, but I really have no idea what the beach conditions or obstacles might be. Even the layout of the resort is a bit of a mystery, so just head out past the pools to the beach and look for the floaty white disc being thrown.

This will be entirely friendly and uncompetitive, just trying to have some fun. If you do not know how to play Ultimate Frisbee, feel free to join in and I will teach you the basics about an amazing sport I love to play. Just let me know if you want some pointers.

If you have any questions, please send an email to jsconfulti /at/ arei /dot/ net or hit me up on twitter (@areinet).

Hiring Cleared JavaScript Developer, Ellicott City, MD

Generally I avoid recruiting people on behalf of my company, but they have recently asked me to hire a person to work directly for me and to hopefully even replace me in the future.  And, quite frankly, I’m tired of interviewing people brought to me by the company recruiter who have no understanding of what is really involved in writing code.  So, I wrote this way more interesting sounding job description and now I’m looking to find someone to fill it.  Are you that person? Know someone whom is that person? Let me know with a quick email sent to vstijob/at/arei/dot/net.

Are you an up and coming hot shot Web Developer who somehow ended up working on government contracts?  Are you horrified by the state of technology that the government contract you are working on has saddled you with using? Do you wish that your project would stop supporting browsers that are 11 years old and move into the future? Do you want to move beyond writing JSPs, Web Services, and XML? Are you ready to give into the dark gibbering madness that comes with embracing technologies like JavaScript, CSS3, JSON, and NodeJS? Are you ready to awesome-ify your career?

VSTI, A SAS Company, is looking to hire a Junior to Mid-Level Web Developer/Engineer and we want it to be you. Well, we want it to be you if…

  • You have a good basic understanding of JavaScript and are ready to learn a lot more.  And by ‘basic understanding’ we mean that you know what a closure is and how to write one in JavaScript, but you really want to understand why this makes JavaScript so powerful and all the really cool things you can do now that you know what a closure is.  We’re not looking for a JavaScript expert, but someone who wants to become a JavaScript expert.
  • You know more about HTML/CSS than just how to write tags and believe that 90% of HTML should be written using only DIV tags and some amazing CSS. In fact, you should be able to tell the difference between block and inline elements at a glance.
  • You find the possibility to use cutting edge technologies like NodeJS and ElasticSearch to be darkly enticing. In fact, just the act of us mentioning that you could work with those technologies makes you giggle like a mad scientist.  After the giggling has died down you decide to go read the documentation just for fun.
  • You have a serious passion for technology and want to learn more, a lot more.  Ideally, you wish you could learn everything through some sort of cybernetic implant process, but you realize that you still haven’t invented that yet and the only way to learn is to read and to get first-hand experience.

Here’s the obligatory job posting details…

  • You must be willing to work in Ellicott City, MD on a daily basis.  No telework is possible.
  • You must have an up to date TS/SCI Full Scope Polygraph clearance.
  • You must have a solid understanding of JavaScript, CSS, and HTML.
  • You must be willing to be figuratively thrown into the fire.
  • You must be passionate about learning new stuff.
  • You must desire to become an expert in Web Technologies.
  • You might also have an understanding of any of the following… Java, Groovy, Ant, Grails, more than one JavaScript frameworks (like jQuery or Prototype), Agile/Scrum/Kanban, CSS Resets, SVN, Hudson, CSS3, Rally, Apache Tomcat, or Git.
  • If you have a Github account, a blog, or an active twitter account that will help your cause greatly.
  • You might also be competent with some art software like Adobe Fireworks or GIMP, but it’s not a requirement.

In return for all of this VSTI, A SAS Company, will provide you with the following…

  • A very competitive salary.
  • Amazing benefits that you not likely to get elsewhere.
  • Small company feel, Large company resources.
  • An amazing chance to learn and grow your skills.
  • Patriotic pride in what you do (since this is a government contract after all).
  • The opportunity to be part of a team where your opinion is valued and taken into consideration.
  • The possibility of free beer if you like that sort of thing.

So, if any of this sounds cool to you then you should apply for a job.  We’re interviewing now and we’re looking to hire very quickly.

node-untappd v0.2.0

Just a quick note to say that last night I released to Github and NPM v0.2.0 of node-untappd, the Node.js connector to the Untappd API.  This new version supports the latest v4 of the Untappd API including OAUTH authentication.

Lots more details at Github: https://github.com/arei/node-untappd

Introducing functionary.js

I am pleased to release another open source project, functionary.js.

functionary.js is a simple JS polyfill and enhancement for adding additional behavior to functions.  Fundamentally, it allows developers to modify and combine functions into new functions to develop novel patterns.  It is very similar to sugar.js, prototype.js, and the jQuery Deffered object and behavior.  It is sort of like Promise/A but not really like it at all.

Functionary is a prototypical modification to the Function object.  This may cause some users considerable consternation as there is some belief that JavaScript should not be used in such a manner.  I, however, believe that JavaScript was actually designed to do this very thing and should do it albeit with great care.  That said, functionary.js never will overwrite a function of the same name on the Function Prototype.  So if Function.prototype.defer is already created by another Library (like Prototype JS) functionary.js will not overwrite it, but use it instead.

functionary.js works in both browsers and node.js implementations.  However, functionary.js does modify the global Function prototype and should be used with care and full understanding.

It breaks down into two distinct classes: Threading enhancements and combination enhancements.

For purposes of the following discussion, the following things are true:

var f = function() {};
var g = function() {};
var h = f.something(g);

In the above example, f is the bound function of something and g is the passed in function.  Understanding this will help the discussion below be more clear.

Threading Enhancements

While javascript is inherently single-threaded, it is possible to create threaded like behavior using the single thread model and eventing.  This is not a replacement for true multi-threading, but an okay approximation and the fundamental underpinning of javascript and node.js.  functionary.js provides a set of function modifiers for working within the confines of this “threading” environment to produce cleaner and expanded function behaviors with regards to threading and event behaviors.

The following functions fall into this group: defer, delay, collapse, and wait. defer and delay will be familiar to many JS developers, but collapse and wait are the really interesting additions.

collapse basically will collapse multiple executions of a function (call it f) into a single execution. So regardless of the number of times you call f() the actual execution will only happen once… the executions are collapsed into a single execution.  collapse can be used in one of two forms: Managed or Timed.  In Managed mode, the execution of a function is not actually performed until manual execution of the f.now() is called.  Thus repeated calls to f() are short circuited until f.now() is called.  In Timed mode, the execution of a function is automatically performed x milliseconds after the first call to f() and then everything is reset.  This ensures that execution happens based on some period of time.

wait is used to defer execution of one or more functions which are passed as parameters to wait.  Once all those functions have been executed, regardless of results, the bound function of wait is executed.  In the following example f.wait(g,h,i) wait allows a developer to defer execution of function f() until g, h, and i have all executed.

Combination Enhancements

The other aspect of functionary.js is to provide some simple ways to combine functions with other functions in a clean and concise manner.  Sure, it is possible in unmodified javascript to combine functions, but functionary gives you a more clear way to do this.

At the core of this group of functions is bundle which takes the bound function and combines it with the passed in function(s) to produce one single function.  Think of it as taking function f and function g and bundling them together into function h.  Calls to function h then execute f and g in that order.  While in some cases it’s easy enough to just call f and g directly, in others being able to pass a single function like h can be incredibly useful.  Consider this:

var f = function() {};
var g = function() {};
var h = f.bundle(g);
h.defer();

The last line of this code ensure that f and g run together, but after being deferred.

Other functions include chain, before, and after.  These functions are all, in essences, some form of bundle above, although with different orders of execution.

functionary.js provides two new functional wrappers, completed and failedcompleted ensures that the passed in function will only execute if the bound function returned without an exception.  failed is the converse and will ensure that the passed in function will only execute if the bound function DID return an exception.  These two functions offer a unique approach to try/catch paradigms.  Coupled with bundle, a try/catch/finally model is easily possible as shown:

var compl = function() {};
var fail = function() {};
var fin = function() {};
var f = function() {};
var h = f.completed(compl).failed(fail).bundle(fin);

Finally, functionary.js offers a wrap function akin to sugar.js and prototype.js where once can wrap the passed function around the bound function.

Documentation

Please see the documentation on github for all the details of using these functions.  Also, play with the code, it probably won’t bite.

Installation and Details

You can get functionary from github.  I encourage you to check it out, fork it, and submit changes.  The ultimately goal is to make functionary the go to polyfill/add on to JS for functions.

 Thoughts, Comments, Suggestions?

If you have thoughts, comments or suggestions, please put them on github or contact me on twitter at @areinet

Tweet and Like

Today I removed comments from the site. I replaced them with tweet and like (facebook) buttons. Although I still maintain my stance that Facebook is dumb. Twitter on the otherhand, is the awesome.

So, if you see something you like here, tweet about it. Or Like it if you swing that way.