Today I checked out Fabric.js. The basics are surprisingly quick to learn!
jschain: grunt, unindented (#8)
A lot of node programmers like to code on the left margin. This is made possible by JavaScript’s dynamic nature. Prototypes can be built up and exports.
In Grunt the examples and virtually all code are wrapped up in one big function. Gulp doesn’t require this, and I’m under the impression many prefer this. However Grunt has a huge standard library.
I like code that doesn’t leave the left margin for long because it’s easier for me to see chunks of code. It also allows me to interleave code, which sometimes makes a lot of sense.
Using OOP, Grunt can be made to have this style. I took the Gruntfile for jquery and made it stay to the left margin while working the same way.
I won’t be sending a pull request, but I may do this on one of my own projects.
jschain: component, react, and koa (#7)
I’ve started playing with Component again after finding some neat devs/projects/companies that use it. I also checked out ES6 generators in the development version of node and Koa which uses generators. Pretty neat stuff!
I created an example app that uses both Koa and Component but doesn’t do anything server-side. A possible future project is to make my example app use a server-side JSON API to do something.
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.
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.
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.
jschain: todo with tags, using react (#3)
I wrote a little todo list with tags, based on the TODO example on the React home page, in React. It’s on jsfiddle.
jschain: ng-template-markdown (#2)
This is a partial implementation of Markdown to show how it might be rendered in angular without asking its template engine to insert HTML.
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.
wow
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, typeman perlruninto 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 fromperl -p -e choptoperl -pechop. This makes it short enough that typing it in often shouldn’t be a problem.chop– the perl subroutinechoptakes the current input and chops the last character off it. It’s handy for chopping the newline. For examplepwd | perl -pechopwill print the current directory to standard output. It can then be piped to the command to save the current directory to the clipboard (pbcopyon 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.
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)