Posted on

jschain: react and setting CSS (#6)

Update: I got it to animate all of the divs. My mistake was that I had the divs changing their position in the DOM, in addition to changing the CSS properties. Some of the divs didn’t change position in the DOM because their index was the same both alphabetically and by population, and these were animated.

I played with React some more, this time loading it from a CDN with the jsx compiler. I set the CSS properties on the divs and tried animating them using CSS3 transitions. Some are animated while some move to their new position instantaneously.

Posted on

jschain: React and browserify (#5)

I made a little sign-up form example with React.

I built it in RequireBin. The main react model in isn’t working in RequireBin and I’m working to get it fixed. In the meantime I’ve published benatkin-react to npm which makes the minimal changes needed to get it to work (none to the code, just to the packaging).

The sign-up form I made has validation which highlights invalid fields with red after an attempt has been made to enter it in correctly.

Posted on

jschain: requirebin and vue (#4)

I did a little project with requirebin and vue. If you haven’t heard of requirebin, it’s a lot like jsfiddle or jsbin except it only has one file, which is JavaScript. I love the simplicity of it.

The recommended way to include CSS and HTML in requirebin is to use the insert-css and domify packages on npm. The multiline strings containing html and JavaScript can be hard to read in JavaScript so a solution is to use a DSL. I quickly wrote my own for CSS rulesets, and this time I just used JavaScript’s multiline syntax for the HTML.

I’d love to see some better tools for generating CSS and HTML with plain old JavaScript.

Posted on

jschain: parafocus (#1)

This month my goal is to post a small JavaScript project every day of the month. Today’s project is an angular.js app for jumping between paragraphs using the keyboard. Besides navigating between paragraphs it can show paragraphs before or after the current paragraph without leaving the page. This could help if the reader needs to recall a detail from the last paragraph in order to fully understand the current paragraph.

I used these resources to help me get it done:

  • How to listen for key presses with AngularJS – showed me that I wanted was keydown events on the body tag using ng-keydown
  • 5apps – a lot like GitHub pages with Jekyll turned off, except I don’t need to create another branch. Unlike Heroku, free apps don’t go to sleep.
Posted on

perl -pechop and perl -pechomp

I recently came up with a couple of pipeable perl one-liners. perl -pechop is a shortened form of perl -p -e chop. Here are the parts of it, explained:

  • perl – the perl executable, here for completeness. to learn about the options, type man perlrun into your terminal.
  • -p – perl assumes a loop around the program where it reads each line from the standard input and prints the output. since it’s a single character option that doesn’t take a parameter, it can be grouped with other options.
  • -e – evaluates (runs) the string that’s passed to it. the way perl’s option parser works, when an option takes data, it uses the rest of the command line parameter. so it can be shortened from perl -p -e chop to perl -pechop. This makes it short enough that typing it in often shouldn’t be a problem.
  • chop – the perl subroutine chop takes the current input and chops the last character off it. It’s handy for chopping the newline. For example pwd | perl -pechop will print the current directory to standard output. It can then be piped to the command to save the current directory to the clipboard (pbcopy on mac os x.

Another perl subroutine, chomp, removes the last character of a line but only if it’s the newline character. It’s useful when you don’t know if there’s a newline. The corresponding perl one-liner is perl -pechomp.

Posted on

life is the variety of spice (life is about the variety of spice)

spice is the variety of life (spices, and things analogous to it, are what makes life interesting)

variety is the life of spice (spice may not be able to observe itself, but during the life of cumin various things happen to it)

variety is the spice of life (original)

Posted on

Unifying jsonpointer and unix file paths

Update 2013-11-10: I added some edge cases to show the completeness of this format.

Kris Zyp’s jsonpointer is a tool for addressing part of a JSON object, that’s designed to be both powerful and familiar. It supports any value for a key that JSON supports, yet it looks like a path from a URL or a filesystem.

A jsonpointer is the path from the root node of a JSON document to either itself or an interior node. A jsonpointer starts with a “/”. A “/” is also the simplest jsonpointer. After that, it contains one or more keys or indexes (in JavaScript an index is a key, but the JSON spec makes a distinction between keys and indexes), separated by “/” characters. To include a “/” character in a key (JSON supports this), use “~1”. To include a “~” character in a key, use “~0”.

What it lacks are relative paths and home paths (“~”). Since jsonpointer requires that it start with a “/”, this frees me to prepend anything but “/” to the start of the expression. Here are the things I can prepend:

  1. A dot (.), which makes it a relative path, like “./foo”.
  2. Two dots (..), which makes it a relative path from the parent node, like “../foo”.
  3. More than two dots (…), which will go up extra levels. “…/foo” would be analogous to “../../foo” in UNIX file paths. “../../foo” in my augmented json pointer would go to “baz” to quux in this json object: {“foo”: “not here”, “a”: {“b”: {“c”: “baz”}, “..”: {“foo”: “quux”}}} That is, instead of jumping up three levels, it would jump up two levels and interpret the second “..” as a key in a json object. Two dots go up one level, three dots go up two levels, four dots go up three levels, and so on.
  4. A tilde (~) makes it a path from the home directory.

Some examples of edge cases:

  1. the absolute path [“.”, “hello”] to access foo in {“.”: {“hello”: “foo”}} will be /./hello
  2. the relative path [“.”, hello”] to access foo in {“quux”: {“.”: {“hello”: “foo”}}} where the current path is /quux will be “././hello”.
  3. the relative path [“..”, “baz”] to access “foo” in {“quux”: {“..”: “hello”}, “baz”: “foo”} when where the current path is “/quux” where there is a “..” in the current node will be “../baz”. To access “hello” using a relative path from “/quux”, use “./..”.