web developer, student, and athlete

It has been a long time since my original post on ClassyNote. Despite my silence, the project is still very much alive, albeit on the back burner for the moment; In working on the node.js backend for ClassyNote, I became very excited about what’s happening in the Server Side Javascript community and stumbled across some really interesting ideas but, I digress, that is another blog post (coming soon).

What I really wanted to write about is a ClassyNote UI prototype that I have built using my Nested Sortables jQuery plugin and some contentEditable goodness. This is my take on what an online note editor for students could look like

• Strict hierarchy
• Easy to edit and rearrange
• Efficient keyboard shortcuts
• Unobtrusive minimalist design

One thing that isn’t immediately apparent with the current iteration is that new notecards can be added by clicking the blank space between existing cards. I’m thinking about adding an expanding animation in the future to make it slightly more apparent.

The demo is online over here.

.

Working on a recent project, I needed a jQuery plugin that would me to visually rearrange a hierarchy of HTML elements. Although I did find a couple possible solutions in the jQuery plugin directory, all the existing solutions made the nesting algorithm extremely jumpy and temperamental. I did, however, stumble across a plugin written for the deprecated jQuery Interface library called Nested Sortables. This plugin had the exact behavior I was looking for — nested sortables with a threshold that kept the nesting very smooth. Unfortunately, the outdated library which this code relied on made it an inelegant solutoin. Over a weekend, I decided to port the module over to jQuery UI, a process which eventually led me to rewrite everything except for the nesting algorithm itself. Although I took out many of the old plugin’s features in the process (namely, RTL support), the final product is very stable and lightweight. In hopes that someone else might find the code useful, check out the project’s github repo for the latest source, download the source directly or mess around with the demo.

The options you must pass to this plugin are:
indent: (default: 30) – The horizontal distance (in px) between levels of child nestables, usually the “margin-left” or “padding-left” of the lists which contain the child elements.

The options you may pass to this plugin are:
nestable: (default: ‘li’) – A selector which identifies the draggable and nestable elements within the list
container: (default: ‘ul’) – Each “nestable” element must have a container inside it for accepting children. This selector identifies that sub-list
start: A function to run on when dragging begins
stop: A function to run when the dragging ends
drag: A function to run at each movement of the mouse
handle: – A selector identifying a drag handle
opacity: (default: 1) – The opacity of the dragged element’s helper
placeholderClass: (default: ‘placeholder’) – The class of the placeholder – the temporary element created to show the final position of the helper as you drag it across the list.
maxDepth: (default: null) – The maximum depth at which items can be nested.

The HTML must be set up like this for the plugin to work:

I have spent the last few days learning Ruby on Rails. Armed with the famous “Agile Development with Rails” and a long weekend, I had no difficulty getting a feel for the language and framework; however I knew I would not truly understand Rails until I created a sample application with it. Finding an unusual lack of projects to work on, I decided to build (completely unbeknownst to them) a prototype of a management tool for a National Honor Society chapter.

Currently, I would assume most NHS programs are entirely paper/email based which I speculate would create an enormous amount of work for those in charge. The tool I allows a chapter to handle meeting attendance, news distribution, volunteer hours, and an events calender (with RSVP) in a simple and clean online interface. Although my school is unlikely to deploy this software, I’d love to help out anyone who’s interested.

Rails itself is amazing. Coming from a background of unwieldy and verbose PHP applications, its clean syntax is a breath of fresh air. Concise, small, and elegant, the Ruby language makes programming so much fun; I can see why ROR has become such a popular framework so quickly.

They say that all new technology begins as a science and ends as an art. On the surface, web design seems to be a poster child for this cliché: what was once a rarity requiring a large amount of technical knowledge is now a key component of any business or organization. If you’re not on the web, you do not exist to the modern consumer. Like any revolution, the rush to the internet has fostered an enormous market for software and services which aid small organizations who could not otherwise afford a web site. I am sure there are thousands of organizations who are perfectly happy making their own web sites with these tools but my experience in the world of web design tells a different story.

Despite their enticing claims, all the tools currently on the market fit into one of two buckets:

• Easy to use but rigid (WordPress, Weebly, Tango CMS, TYPOlite, Wix, Joomla)
• Complex and technical yet flexible (Drupal, CMS Made Simple, MODx, Expression Engine)

Every software package is either designed for the non-technical user or the developer. In reality, however, a website is almost always the result of collaboration between three major groups of people and any tool will alienate at least one of them:

• The client
• The web developer
• The designer
  Read more

Although my high school has a couple of excellent media classes (namely the news paper journalism and TV station) it lacks a good distribution medium. The news paper is still handed out once a month by hand and all of the video news segments are put up on local access cable TV. It is fun to recieve a paper newspaper, and seeing yourself on real cable TV is pretty cool but neither is terribly practical. The newsprint costs money and creates litter. Almost nobody thinks to check the local cable access channel every week to see if anything new is up. Besides, this is the 21st century!

With this in mind, I began playing around with the open source content management system Drupal and my imagination was running wild! I envisioned a web portal for all students to share news, have discussions, and even coordinate events! With the excitement that grips all web developers when they delve into web 2.0 projects, I single handedly designed and coded a prototype website and rallied support among the teachers who would be affected by this project. Needless to say the design went through many iterations but the final result is pretty slick.

You can play around with a demo here, but I warn you, its a little slow.