Nov 25

Meet the Team: Neil Roberts

By on November 25, 2015 10:06 am

Bermuda, Bahama, come on pretty mama.

It’s time to introduce our Bahamas native, Neil Roberts! Neil brings his expertise to work everyday, but there’s much more to him than API design, code architecture, and regular expressions.

Join us as we learn more about one of our talented software engineers.

Nov 23

Nodevember — A Community JS Conference

By on November 23, 2015 11:24 am

I recently attended Nodevember, a two-day JavaScript conference down in Nashville, TN. My love for JavaScript motivated me to take my attendance a step further and volunteer. As a meetup organizer, I know how much work it can be to put on a small event, and it was exciting to see what goes into hosting a large conference.

If you’ve never been to a developer conference or meetup–go. If you have been to one of those events and haven’t volunteered, I’d recommend offering your services. Organizers want and need your help and input as that’s how groups continue to work, grow, and better serve their communities.

I came down here with another developer and fellow volunteer, Jake. When we got into town we wanted to see what the kick-off party had to offer and I must say, it was fantastic meeting new people and seeing a few familiar faces as well. I briefly met the organizers of the conference and had a great conversation with one of the speakers. If you do decide to go to a conference in the future, be sure to participate as much as possible and take advantage of meeting new, awesome people!

Day 1

At 6:30 a.m. I was up and at ’em. Yes, this is earlier than I’m used to on a weekend, but coffee does wonders in the morning, ya know? When Jake and I got to the conference venue at the beautiful campus of Lipscomb University, we helped to hand out badges in the registration line and then it was off to the conference!

Opening remarks were conducted by Will Golden, the conference’s main organizer. It was a fantastic turn-out for a second-year conference, and excitement filled the air! Yehuda Katz gave the opening keynote about Ember and left with a very positive note. The main points were less about Ember and more generally about frameworks and making use of tools that empower more people. Frameworks are about taking the boring stuff, wrapping it up, and being able to do the non-boring stuff however you need.

After the opening keynote, I started my room monitor duties by assisting speakers and the rooms they were in, and then it was onto the other sessions.

There were four tracks each day with quite an impressive list of speakers! My day’s agenda looked something like this:

Both Elijah Manor and Damian Schenkelman handed out a significant amount of information in such a short session. Elijah had lots of actionable takeaways for writing cleaner code and improving one’s tooling process. Damian spoke with a great deal of authority and experience, as what he does entails scaling APIs to a much larger degree than most developers I know.

Nodevember 1

Next, I got a huge takeaway regarding ES6/ES2015. Ben IIegbodu and Nicholas Young gave great overviews of some of the more popular features of the latest iteration of the JavaScript language. And Rebecca Turner, one of NPM’s CLI maintainers, talked at length about the details and frustrations of building a package manager. This was incredibly enlightening and I have to say here, thank you Rebecca for the work you do enabling millions of developers to use such a vast library of software!

The last talk I attended on Day One was given by Chris Keathley, an interactive visualization developer and self-styled data scientist (though he would hardly cop to that title). He showed a great deal of understanding of working a story out of a data set. This knowledge and aptitude definitely shone through in his talk. It was especially a pleasure for me to see this since having some small newspaper background gave me a great appreciation for folks with his experience and talent.

Ed Finkler closed out the day with a very compelling and moving story about his own struggles with mental health issues and what we as developers can do to mitigate our own issues and those of our colleagues. Ed has started an incredible movement making mental health resources open source and freely available for any company to pick up and implement in their workplace.

Overall, Day One consisted of a large number of technical talks by experts in the field.

Day 2

After the first day, we were on a roll! I had no other volunteer responsibilities (except to help break down at the end), so I just got to enjoy more awesome talks. Once I downed a healthy portion of biscuits and gravy for breakfast, my agenda was as follows:

  • Soledad Penadés – Healthy Egotism
  • Stacey Mulcahy – Exploring the Physical World with Node
  • Guillermo Rauch – Instant Text
  • Aimee Knight – Getting Comfortable Being Uncomfortable
  • Max Beizer – From the Ash: PhoenixJS and WebSockets
  • Donovan Buck – These Bots are Made for Walkin’
  • Jason Orendorff – Alternate Futures
  • Douglas Crockford – The Seif Project

Delivering the opening keynote of Nodevember Day Two was Soledad Penadés, a developer with Mozilla. Soledad brought a great deal of experience and optimism to the dreary and under-discussed topic of developer burnout. One of the coolest takeaways from this talk was her relation of the body to cultivated farmland. She made the point that sometimes we need a rest, as a farmer would leave their field fallow for a season, to recover and better produce.

Following the opening keynote, I went to a talk by Microsoft developer, Stacey Mulcahy, who was talking at length about lowering the barrier to entry to physical computing with Node. After that, I heard Guillermo Rauch, who spoke about real-time collaborative communication. This idea is long-lived but not yet implemented in a way that he envisions in the web.

Aimee Knight’s session was about overcoming fears as a junior developer, from both the junior’s perspective as well as that of the team! This was a fantastic talk that I think every junior dev, everywhere, should watch. Some good takeaways include: “practice makes permanent” and “one thing at a time”.

Next I saw Max Beizer, of Heroku, give a neat overview of the Phoenix Framework and its native WebSockets implementation. Don’t do a live demo that people in the audience can access unless you have input sanitization! This looks pretty cool though—very simple to get a chat application up and running with Elixer and Phoenix!

The last two talks I saw before the closing keynote were amazing and even better in tandem. First we had Donovan Buck talking about Johnny Five Animation and giving probably the coolest demo of the conference, where he made a hexapod robot walk by waving his hand in various ways over a Leap Motion controller. Super exciting, super creepy. Then Jason Orendorff from Mozilla spoke of Alternate Futures, or how to build a simple AI. We went through building a tic-tac-toe game by walking over the Galactic Time Squid, Jason’s name for the shape of the future.

The conference ended with Douglas Crockford talking about his ambitious new project he’s calling the Seif Project (pronounced “safe”). It’s a ground-up rebuild of the web where he hopes to make use of JSON for data transfer and the Qt library for user interface, built with security in mind. Before passwords, computers were secured with men with guns. This model was never designed to scale. We’ll see what the future brings!

If anyone is interested, you can watch many of the Nodevember Conference talks, as most are already available. Great job, organizers and video folks! All together, this conference held a great deal of technical promise as well as the type of community for which I got into this industry. We are an inclusive, committed, empathetic, excited, talented, and wonderful bunch of people. If you have a chance, definitely check out Nodevember 2016. I’ll see you there!

Nov 16

Exploring dgrid with dgrid Laboratory

By on November 16, 2015 11:37 am

For the dgrid 0.4 release we added a new demo and helper utility, the dgrid Laboratory. This is more than just a demo, as it allows you to quickly explore and build different dgrid configurations, returning boilerplate code for efficiently including dgrid within your application. Although not every possible configuration is supported with this tool (sub-rows, column sets, and compound columns), it is very useful for visually generating complex base configurations for use in your applications. The dgrid Laboratory itself was built using dgrid as well!

dgrid Laboratory

Using the dgrid Laboratory

The left panel of the dgrid Laboratory allows you to select and modify the grid’s configuration. The right panel provides a preview of the grid as well as generated code. These right panel tabs are updated in real time as you make modifications to the dgrid options in the left panel.

Columns Tab

The Columns tab in the left panel can be used to define the columns for your grid. To create a new column simply:

  1. Type in a name in the textbox
  2. Click the ‘+’ next to the textbox

The options for editing, deleting, and reordering columns should be fairly intuitive. To edit an existing column, click the gear icon next to the column name in the list below the textbox. Depending on the mixins selected, you will find different editing options. You can delete columns by clicking the ‘x’ next to the column name in the list below the textbox. You can also reorder the columns by dragging the drag handle that exists to the left of each column name.

Grid Features

As its name implies, this tab provides a list of various grid features that you may apply to your grid. Some features may not work together (e.g. Pagination and OnDemandGrid), so features may be automatically deselected to prevent failures or redundancy in the demo grid.

The following grid features are currently available within the dgrid Laboratory:

  • Grid – The core grid component
  • OnDemandGrid – Provides lazy-loading and virtual scrolling of data
  • Keyboard – Facilitates keyboard handling
  • Selection – Adds row selection
  • CellSelection – Adds cell selection
  • Tree – Enables expansion of rows to display children via expansion controls in a specific column
  • Pagination – Implements classic discrete paging controls
  • DijitRegistry – Adds each dgrid instance to the Dijit registry
  • DnD – Adds row reordering functionality via drag and drop

Similar to each row in the Columns tab, most grid features have a gear icon to edit the configuration for that feature.

Column Features

The Column Features tab provides a list of various column features that you can apply to your grid. Column features are still just mixins and extensions like grid features, but focus on adding capabilities to one or more columns. Adding a column feature will expand the level of configuration possible for each column in the Columns tab.

The following column features are currently available:

  • Editor – Makes cells editable
  • ColumnHider – Adds the ability to hide/show entire columns
  • ColumnReorder – Adds the ability to reorder columns via drag and drop
  • ColumnResizer – Adds the ability to resize columns
  • Selector – Allows for dedicating entire columns to render controls for providing alternate row selection methods to a grid

If you haven’t already used dgrid, this is a great way to explore these features and familiarize yourself with its capabilities.

Preview/Code Tabs

The Preview tab displays a grid with example data based on the configuration settings in the left panel. There is also a Code tab with the generated code to produce the grid seen in the Preview tab. Both tabs update automatically as you make changes to the configuration.

code tab

Using the Output in Your Application

Now let’s take a look at how to use the output from the Code tab within your application. First, we recommend a simple directory structure for your project as follows:


Next, let’s inspect grid.html:

<!DOCTYPE html>
        <link rel="stylesheet" href="dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="dgrid/css/dgrid.css">
        <link rel="stylesheet" href="dgrid/css/skins/claro.css">

    <body class="claro">
        <div id="grid"></div>

        <script src="dojo/dojo.js" data-dojo-config="async: true"></script>

            // paste the generated dgrid code here

Simply paste the output from the Code tab into the script tag at the bottom of grid.html and you will see the same grid as in the preview tab of the dgrid Laboratory. A great next step to exploring is making your own modifications to grid.html and seeing how you can use the generated base configuration with your own real application data.


dgrid is a powerful grid component and the dgrid Laboratory is a great way to both learn about dgrid as well as set up base configurations for your own apps. If you’re interested in how the dgrid Laboratory was constructed, developer-oriented documentation is available in its README. For more information on dgrid, visit or read the documentation.

If you’re not sure where to start with dgrid, SitePen can help! You can start by attending our Dojo 201 workshop. If you need assistance building your own custom grids or dgrid extensions, contact us for a free 30-minute consultation to discuss how we can help.

Nov 6

SitePen Podcast Episode 004

By on November 6, 2015 2:58 pm

In this Episode, Paul Shannon tells us all about Template Strings. Neil talks Virtual DOM. Nick give us the lowdown on Chrome extensions and Torrey finally fixed his microphone!

Show Notes

Oh ya, and we also talked about the importance of having a deployment plan before starting development.

Death of Object.observe()

By on November 6, 2015 9:47 am


Adam Klien, software engineer at Google, announced on ESDiscuss that they were withdrawing the proposal to implement Object.observe and plan to remove it from V8 by the end of the year.

While I was never sold on the approach of this API, I assumed long ago it was the API that would be used for data binding to plain old JavaScript objects. I am also surprised because I was discussing the state of Web Components with a member of TC39 just a few weeks ago. While I listed all the parts of Web Components that are in V8/Blink but not elsewhere, including Object.observe, they assured me the other browsers would eventually implement the rest of Web Components. I also missed that Polymer 1.0 abandoned Object.observe.

Meet the Team: Audrey Hayes

By on November 6, 2015 8:19 am

The first thing you need to know about Audrey is that she’s the new girl and she’s turning out to be just as cool as another infamous New Girl we know! I say this because during her first week at SitePen, she fearlessly entered the Apple Bobbing contest and stuck her head in a bucket of water — in front of a bunch of people she barely knew — on video! I was impressed. Would you do it?

Say Hello to Audrey, the newest addition to SitePen’s UI Design team!

Nov 3

FullStack Conference Recap

By on November 3, 2015 8:10 am

I had the opportunity to speak and attend FullStack 2015 organised by Skills Matter and hosted at their CodeNode location in central London. It was a great experience and it’s clear that JavaScript is everywhere and permeating every aspect of technology today! It was no surprise that ES6/ES2015 and TypeScript were popping up in every conversation. Even at a full-stack conference, the front-end seemed to get a lot of focus, most likely because everyone is challenged with improving the web experience.

Oct 27

October jQuery Foundation board meeting

By on October 27, 2015 7:56 am

In mid-October, I attended my first jQuery Foundation boarding meeting. In case you missed the news, we announced in early September that the Dojo Foundation and jQuery Foundation are merging. The primary goal of this open source foundation union is to encourage greater collaboration between open source web projects, and also provide a home for other open source JavaScript and web projects. Our board of eleven members got together in New York City and met for about eight hours to cover a number of topics. It was great to meet a number of people from the board in person for the first time. It was also great to reaffirm how much we have in common, and to learn more about how we can help!

Oct 23

Twitter Flight Recap

By on October 23, 2015 3:19 pm


I was recently invited to attend the Twitter Flight conference in San Francisco! While this conference is clearly focused around Twitter products, this year included mobile and data tracks which covered the Fabric mobile SDK and the GNIP enterprise API platform. Overall they did an amazing job creating the conference, giving me a great opportunity to meet new people and attend some engaging talks.

Some of the conference sessions were focused on general software engineering and developer workflow, which were particularly interesting to me. Many of the speakers at the conference have significant experience building platforms to scale, so their perspective on building for slow and unreliable networks, building and testing production code in non-production environments, and building faster content-driven websites was particularly insightful.

Oct 20

SitePen Podcast – Episode 003

By on October 20, 2015 10:29 am

You’ll notice in this episode that I’m still working through audio issues so I apologize for the sound quality and will have this worked out before the next episode. However, Nick and Neil sound great!

Show Notes

JavaScript Workshops