coding, web design, web development

Pace of Change

Has any other career field seen as much change as web development — especially the kind of open-source front-end web development the cool kids are doing?

Many of the in-demand tools, such as Angular, didn’t even exist a few years ago. (And it’s still changing — in the time it took to type that sentence, Angular was made obsolete by Angular 2.)

So what does this mean for front-end web developers like me?

It means an absolute ****-ton of new stuff to learn.

In this video, at 8’49”, one of the Digital Ocean folks, Joel Califa, presents an abridged list of some of these things: https://youtu.be/N470hsHKXNc?t=8m49s

As he mentions, the list really is much longer — what about Ionic, Cordova, JasmineJade, SASS (not the old syntax, but the new one)/LESS, TypeScript, etc., etc., etc.?

It also means a kind of identity crisis. I’ve considered myself to be one of the rare, hybrid, “purple unicorn” web designer-developer types he described in the first part of the video.  In 2009, I went to Midlands Tech to study both coding (Java, SQLJavaScript, HTML, CSS) and the Adobe Creative Suite Tools (PhotoShop, DreamWeaver, Flash, etc.). . . . Yep, Flash.

. . . . However, since then I have worked for two years in a LAMP shop and then another two in an enterprise .NET shop.  I’ve coded and deployed a native Android app, and have configured my own Linux VPSs from scratch.  My interests lately have been in exploring full-stack web development using Mongo, Angular 2 (and React), Express, and Node – the so-called “MEAN” and “MERN” stacks. . . .

. . . . So am I still a “front-end” web developer?  My web certificate was in “web design”, but am I really a “designer” anymore?

Thankfully, he does give some solid steps for prioritizing a learning path and saving some sanity (apologies for the potty mouth).

There comes a point, too, where one has to not worry about titles and labels. . . .  (Years ago, I tried to explain/sell myself as someone with the “T-shaped” skill set mentioned in the video, and no recruiter or hiring manager had any idea what I was talking about.)

. . . .But, rather, just get to the business of building elegant, useful digital things that live on the Internet. . . .

coding, graphics, mobile, ui, Uncategorized, web design, web development

Winning Hackcess to Justice (NC)

It was a pleasure to meet Raleigh attorney Caroline DiMaio this weekend and to advance her vision of an app to help inform migrant workers of their legal rights.

Our creation placed first out of five entries at the Raleigh edition of Hackcess to Justice, a hackathon presented by the ABA Journal and the N.C. Bar Association.  The competition was held at Campbell Law School and sponsored by Citrix ShareFile, Lawyers Mutual, and Poyner Spruill, LLP.

(It’s kind of a small world: I learned of this hackathon from Matthew Wilcut, a legal-aid attorney (and developer!) I met at a Startup Weekend competition in Greensboro a few years ago.)

Press Coverage

“App to aid migrant workers wins 3rd Hackcess to Justice hackathon” (ABA Journal)

“Code of law: ‘Hackathon’ gives birth to ideas for bridging the justice gap” (N.C. Lawyers’ Weekly) (Subscription Required)

Official Contest Site

Learn more about the competition, including the esteemed panel of judges, the judging criteria, and other entries at the official site:

Hackess to Justice (NC) on Devpost

(As a developer with a long history in and around the legal profession, I was impressed by each of the other entries – I could see any of them in production!)

Interactive Prototype

This was developed using rapid prototyping techniques and the Bootstrap JavaScript/CSS framework.  It will take you through one “happy path” of a user learning about workplace-safety rights and engaging contact with legal aid:

coding, web development

Closures in JavaScript, a Quick Primer

“To page authors coming from a traditional OO (object oriented) or procedural programming background, closures are often an odd concept to grasp, whereas to those with a functional programming background, they’re a familiar and cozy concept.”

Bibeault and Katz at 428-29.
Chapter on Closures in JavaScript Ninja Book

Definitions of “Closures”

Q.: Just what is a “closure”? Is it a function? A scope? An object?

A.: Yes.

“A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.”

Closures have also been called

“the scope created when a function is declared that allows the function to access and manipulate variables that are external to that function. Put another way, closures allow a function to access all the variables, as well as other functions, that are in scope when the function itself is declared.”

Resig and Bibeault at 90.

Put yet another way, a “closure is a Function instance coupled with the local variables from its environment that are necessary for its execution.”

Bibeault and Katz at 429.

“A function declaration and its environment form a closure allowing the function, when later invoked, to access those local variables that become part of the closure.”

Bibeault and Katz at 431.

In most languages,
“when a function is declared, it has the ability to reference any variables that are in its scope at the point of declaration. . . . With closures, these variables are carried along with the function even after the point of declaration has gone out of scope, closing the declaration.”

Bibeault and Katz at 429.

“In other words, the function defined in the closure ‘remembers’ the environment in which it was created.” MDN. This is one of the “good parts” of JavaScript: With nested functions, “inner functions get access to the parameters and variables of the functions they are defined within (with the exception of this and arguments). Crockford at 37.

Syntax

A popular closure answer on Stack Overflow shows the following example syntax:

function foo(x) {
    var tmp = 3;
    function bar(y) {
        alert(x + y + (++tmp)); // will alert 16
    }
    bar(10);
 }
foo(2);

“This will always alert 16, because bar can access the x which was defined as an argument to foo, and it can also access tmp from foo.

That is a closure. . . . Simply accessing variables outside of your immediate lexical scope creates a closure.”

Note that the above example features an inner function and an outer function – when you see nested functions, it should trigger thoughts of closures.

Implications for Development

“While scores of page authors get along writing on-page scripts without understanding the benefits of closures, the use of closures can not only help us reduce the amount and complexity of the script necessary to add advanced features to our pages, they allow us to do things that would simply not be possible, or would be too complex to be feasible, without them.”

Resig and Bibeault at 89.

In other words they have an “ability to drastically simplify complex operations.” Id.

For example, “the ability for callback functions to reference the local variables in effect when they were declared is an essential tool for writing effective JavaScript.” Bibeault and Katz at 429.

Emulation of “Private” Methods through the Module Pattern

In JavaScript, methods cannot be declared “private,” meaning that they can only be called by other methods in the same class. However, this can be emulated in JavaScript, especially by using the module pattern. See MDN and Ben Cherry, “Module Pattern in Depth”. Also see Angus Kroll, “Function Delarations v. Function Expressions”.

Cautionary Notes

It is possible to inadvertently create closures in JavaScript as they can be created without explicit syntax (unlike in other languages). Bibeault and Katz at 430. This can cause issues.

Memory Leaks

“It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.” MDN. For example, “circular references can lead to memory leaks. A classic example of this is the creation of DOM elements that refer back to closure variables, preventing those variables from being reclaimed.” Bibeault and Katz at 430; also see IBM.

Creating Closures within Loops

Also, see MDN for an example of possible problems when closures are created within loops.

coding, process, web development

Adzerk Rebuilt Its Ad Server with Node.js

It’s always fun to visit the Triangle and see what the cool kids are working on…

Why Node?
Adzerk

I went to Adzerk in Durham yesterday to see how their team re-built its ad server with node.js, the exciting new server-side JavaScript technology.

So what does an ad server do? It serves ads. (You’re welcome.) For example, say you visit stackoverflow.com — Adzerk’s ad server will determine which ads you see on the sidebar. Someone visiting the site from Austin, Texas on a Sunday afternoon using Chrome would see a different ad than someone in Australia.

Obviously, speed is a priority, and Adzerk’s ad server has been processing 10,000 – 16,000 requests per second. There is no time for database calls, so they use a ginormous JSON blob.

No database
There is no database

So Node.js is ideally suited for this kind of thing — responding to a ton of requests very quickly. Nate Kohari of Adzerk explained that it would be less useful for web apps that required a lot of intense processing of each request.

While I love seeing how other folks build these kinds of cutting-edge web apps, I told my CIO that hanging out with the node.js folks made me feel like I had rented a programmer costume from the Halloween store or something.

 

coding, mobile, process, ui

RGreenway: Raleigh’s Greenway App

Picture this – you’ve wasted spent another weekend coding with precious few hours of daylight left to claim any outdoor recreation before the weekly grind. You’ve got cabin fever & need to get out for a nice walk/hike in the Great Outdoors. You need to find a public park, locate a parking spot, get a trail map, and check the weather forecast.

If you’re in Raleigh, there is indeed an app for that.

It’s called RGreenway, and its developer, Eric Majewicz, was kind enough to demo it for TriDroid last week.

Eric Majewicz demos the RGreenway app.
Eric Majewicz demos the RGreenway app (for Android).

Eric went over a lot of the challenges in building this app, from working with various APIs (e.g., MapQuest and iSpeech) to wrangling the geographic data for the trail maps (provided by the City of Raleigh, North Carolina, as part of an open data initiative).

RGreenway Screen Cap (Android)
RGreenway Screen Cap (Android)

His presentation was especially interesting, though, for its description of “soft” considerations beyond heads-down coding, such as building a team with a diverse skill set and gathering requirements from key stakeholders (a/k/a “users”). Taking this kind of care produced high-quality UI and UX — the ultimate measure of an app people will actually use and enjoy.

coding, web development

Hello, World!

Is there a better first statement than “Hello, World!”?

It carries the same powerful message as “Greetings, Planet! I’m here. Deal with it!” in a compact, pithy package.

Many programming students wrote “Hello World” as their first output.  (The original such use is widely attributed to Brian Kernighan of Bell Labs.)

Ways to Say It

The syntax required to produce “Hello World!” gives you a flavor of the language.

In Java one would type the following:

class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

In JavaScript, one would code the following:

document.write('Hello, World!');

A PHP programmer’s first line is typically something like this:

echo "Hello, world!";

This syntax hints that it’s a lot easier to get up and running in JavaScript or PHP than in Java (The further implications of that suggest a subject for another day).

It’s fairly easy to get started with WordPress — the platform does the actual coding for you.

Ways to Say It, Part 2

But what is in between the quotes?  Doesn’t that say something about the programmer’s (human) language?

Shouldn’t there be a comma in “Hello World”?  In English, commas are used to set off words of direct address, and you’re directly addressing the World.  Speaking of which, “World” should be capitalized – you’re not addressing any world, you’re addressing THE World — by name!  And an exclamation point, for that matter — First impressions count – don’t you want to be seen as enthusiastic about your very first output!

So, “Hello to you, World — hello!”

Sources

http://en.wikipedia.org/wiki/Hello_world_program
http://www.helloworldexample.net/
http://docs.oracle.com/javase/tutorial/getStarted/application/index.html
http://www4.ncsu.edu/~wdlloyd/grammarreview-commas.htm
http://stackoverflow.com/questions/602237/where-does-hello-world-come-from