Devchatt - Frank and Die Neue Javascript
Devchatt is quickly becoming old news, but I wanted to go ahead and post these two presentations because I need a reliable place for refreshers. Frank by Travis Dunn and Die Neue Javascript by Noah Burney were two of my favorite presentations.
Side note: My other favorites were about incremental development by James Long (jlongster.com) and an introduction to Haskell by James Sanders, but I won’t be posting about those for a few reasons. They were both excellent, but Long’s would be long post I don’t have time for and Sanders only got 1/3 or so of his presentation finished (hoping to hear the rest sometime).
Frank
As Travis eloquently put it, Frank is not a framework. It is simply a tool for rapid static builds, written in Ruby. It uses Tilt, so it comes with support for Haml & Sass, LESS, Builder, ERB, Liquid, Mustache, and CoffeeScript. It has a built-in local webserver and an excellent lorem ipsum interface. You can generate a certain number of words, paragraphs, images, emails, names, and more on the fly to get your static build out quickly.
I played with frank a little bit and used it for a big online form I’m building. Normally, even with Coda’s excellent autocomplete, this would take me at least 2.5-3 hours just to write the html for a form this size. Frank cut that time in half and made it really easy to get together and compile the form into valid HTML and CSS in no time. Another bonus: clear and concise error message made it easy to debug any problems on the way. Also, the ducks are fun.
Cons: I don’t like SASS, but it’s optional. Besides that, there seems to be a problem with the haml compiler generating completely valid transitional xhtml, but that was easy to fix and not Frank’s fault. All in all, Frank is no ugly duckling.
Get Frank: http://github.com/blahed/frank
Die Neue Javascript
Ah, Noah. Noah’s a 19-year-old genius who’s been doing javascript since he was 15 and teaches himself Korean while building letterforms in his spare time. I loved his presentation on ‘the new javascript’.
He started off with one of the most important javascript conventions: don’t infect the global namespace! He stressed the importance of the var keyword and explained that when you don’t use it, you’re make your variable part of the global window object.
He then listed some little tricks to clean up javascript. For instance:
- Use commas to var a bunch of things at once. var one, two, three;
- Objects are basically associative arrays in javascript and can be referred to as such. alert(‘Hello’); window.alert(‘Hello’); window[‘alert’](‘Hello’);
- You can define functions with var = function(){};
- Use javascript’s ternary operator to make conditionals shorter and when you just want to return a value.
- Next, you can add to and modify native objects. For instance,
Number.prototype.times = function( fn ){
for( var n = 0; n < this; n++ )
fn( n );
};
( 5 ).times( function( x ){
say(
x + 1 + ' Hello' + ( x > 0 ? 's' : '' )
);
});
- Use call and apply for adding arguments to functions you call. The first being the context. Normally, this would just be null to have the window as the context. However, “you can use Native object methods on other objects by using call, and passing the object in as the context.”
var list = [ 1, 2, 3 ];
Array.prototype.push.call( list, 4, 5, 6 );
Function.apply is similar to call, but takes an array for the function arguments, which can be very handy.
- Inside of every function, lives the ‘arguments’ variable, meaning any arguments passed to the function that were not named in the function declaration.
function echo2(){
say( arguments[0] + arguments[1] );
}
echo2( 'POW!', 'BOOM!' );
- Javascript Progress Bar. As we know, Javascript is single-thread, meaning it chugs through the code one line at a time. In order to implement a progress bar in Javascript, the magic line is in the setTimeout. Doing a setTimeout(f, 0) will ensure that f, any function, will get executed last as it just pops f to the bottom of the call stack. Check it out:
var counter = 0,
total = 0;
loadup( plug, chug, plug, function(){ alert("WEEEEE!"); }, chug, plug );
function loadup(){
var fns = Array.prototype.slice.call( arguments );
if( typeof fns[0] === 'function' )
total = fns.length;
else
fns.shift();
fns.shift().call();
fns.unshift( 'Not first' );
if( fns.length > 1 )
setTimeout( function(){
loadup.apply( null, fns );
}, 0 );
say( ++counter + '/' + total );
}
function plug(){
for( var n = 0; n < 3000; n++ )
$('').appendTo('body').remove();
}
function chug(){
for( var n = 0; n < 5000; n++ )
for( var o = 0; o < 8000; o++ )
n % o;
}
- To conclude, he ended with an example from John Resig’s Secrets of the Javascript Ninja where computationally expensive functions can be optimized by storing computed values instead of recalculating every time. Like so:
// Ripped from John Resig's Secrets of the JavaScript ninja
Function.prototype.memoized = function( key ){
this._values = this._values || {};
return this._values[key] !== undefined ?
this._values[key] :
this._values[key] = this.apply(this,arguments);
};
Function.prototype.memoize = function(){
var fn = this;
return function(){
return fn.memoized.apply( fn, arguments );
};
};
var isPrime = function( num ) {
var prime = num != 1;
for ( var i = 2; i < num; i++ ) {
if ( num % i == 0 ) {
prime = false;
break;
}
}
return prime;
};
var isPrimeM = isPrime.memoize();
Check out his presentation and play with his code: http://presentation.royowl.com/#slide-0.
See his homepage.
Easter Fun
In the terminal: type emacs, enter, esc, X, then type ‘snake’ or ‘tetris’, enter. Two games you never knew you had!
The Wonderful World of HTML5
I’ll make this short and sweet — here’s all the slides and such from my DevChatt presentation on HTML5. Hell, let’s go totally mental and post EVERY link in the slides to go with it.
All the source code is available under the MIT License. Slides are licensed CC-BY-ND.
The Important Stuff All the “Reference” links Select HTML5 Resources
DEVCHATT (and a post about current)
Asking all devchatt presenters to post about their presentations here! Or, send me a short summary of what you talked about so I can post it here if you don’t have a tumblr account. shearbox@gmail.com. I enjoyed all of the presentations I went to. I’ll be posting about all the ones I went to, so I apologize to the ones I missed.
I’ll go chronologically and being with the first presentation I went to (current built with node.js by Rob Righter).
(wow that was three ‘I went to’s)
I’m sure I will butcher his presentation, but let’s do it anyway.
Basically, node.js is an evented server built with javascript (which makes sense for keeping track of events), meaning instead of the usual back-and-forth communication between client and server, you send a request, if the server doesn’t have anything yet, it will tell the client to wait, keep the connection open, and send back the requested data when it is updated. The server can handle many concurrent connections and the client is the one who keeps track of its own progress. If it has no progress, it gets everything, if there are updates, it gets those after passing the server a data address of sorts in its request.
Current is a great example of this. All it does is pull the favicons from sites that people at Medium headquarters visit and you’ll see a flow of tiny images running across the screen as pages are visited in real-time. Pretty sweet, and I’m sure you can see how this could be useful in web applications. Apps that look the same for everyone, but are updated in real time and something every user can interact with. This makes me think of google wave, but they’ve got their own crap.
Please comment to add something or feel free to correct me.
See it on Rob’s github (as well as the comet AJAX long polling project that makes current possible).
See his slides (easy read). (These will be gone someday)
((more parentheses))
Comments coming
This blog is meant to be a community blog. I really should have comments on here, but didn’t realize when I chose tumblr that they don’t support that natively (which I think is dumb). I’ll be hacking in some disqus so we can all here from the masses (and those loving trolls).
devchatt cometh, pre-devchatt goith, i write something..ith
I can think of no better way to start off the this blog than to talk about devchatt presentations. First, if you don’t already know, DevChatt is a free developers conference in Chattanooga, TN. pre-devchatt was today and was a taste of things to come. We had Chris Mills from Opera come and talk to us about HTML5 and CSS3. His project list and titles are vast, but he is involved in web education, opera evangelism, and other stuff. Plus he plays in a metal band, has a cool English accent and the best goatie short of this guy…
To the point, his presentation was fairly basic. He touched on many of the generally supported features of the two specs. Much of it you may already know, but I’ll show you some of the cool stuff.
1. Less code and easy accessibility for common structures. Notice the lack of divs:
2. Machine readable timestamps -
<time datetime="2010-06-27"> 27 June 2010 </time> <time datetime="2010-06-27"> Chris's 32nd birthday </time> <time datetime="2010-06-27T020:00Z"> 8PM on my birthday </time> <time datetime="2010-06-27T020:00+09:00"> 8PM on my birthday—in Tokyo </time>
3. New Input Types( range, date, url, email ) plus validation
<input type=date>
<input type=email required>
4. <canvas>, <video>, and <audio>. I group these together because I suspect everybody has heard about these. Yes, they rock. I get down on my knees and thank the Lord Almighty we don’t have to use flash anymore. That is, if they can ever work out which codec to use.
The fun fighting part where people get bloody noses and then nothing happens: Basically, there are two main video codecs being argued over for video playback in HTML5. Mozilla and Opera want Ogg Theora (an open source codec), Microsoft and Apple want H.264 (patented) having both had a hand in creating it. Google has come into the ring (as they always do), with a solution proving yet again that they might take over Venus after this world. They acquired one called On2.
Now if they open it up for free use to everyone, they might just get their codec in the HTML5 spec. If not, we’ll keep fighting until Microsoft and Apple give in to open source, every company except Microsoft and Apple pays $60 million to use H.264 in their browsers, or, like I said, Google expands their enterprise to Venus, enslaves the aliens on that planet, finds a way to jump over this argument, and then provides all of us with a universal <video> element built by white apparitions from another planet who hypnotise Microsoft into dropping IE6 for good. YAYYAYAHAHAAYAY!
I got carried away….
5. Related to that last part, IE doesn’t support crap. IE9 is showing some improvement but Paul Irish ran his test on the most recent beta release and got 50% as a grade for support. That’s about 3 or 4 times better than IE8, but still….it fails by academic standards. Segway: we can use excanvas for simulating a canvas element in IE and raphael js with svg for vector graphics, but hopefully these workarounds won’t be needed much longer (at least not before Google gets back from Venus! We bitches are goin down!)
6. Let’s move on to CSS3.
a. text-shadow: #444 2px 2px 2px;
-multiple shadows assignable
b. box-shadow
c. opacity: 0-1 (use filter: alpha(opacity=1-100) in IE)
d. rgba (a for alpha (opacity)) - color: rgba(255, 255, 255, 0.5);
e. haven’t used, but i hear designers like this: hsl colors. Rather than using rgb, you can use hsl format to specify how much light you want in your color.
f. border-radius (this is the one im most excited about being in IE9, that one did make it)
g. multiple background images (yup, not just one)
7. Transitions(duration-set animation abilities) and transforms (rotating, scaling, moving things around, skewing)- there’s a lot here. We’ve got 2D animations. Webkit is experimenting with 3D. We’ve got a guy building video games on a canvas with CSS animations. super mario, super mario kart, wolfenstein.
Play super mario in 14kb javascript
8. Typography - This is very much needed in the world of web development. siFr is slow and buggy and there’s really no good way on the web to do custom web fonts, especially if they’re dynamic. This is the solution: @font-face.
Fonts usually come in ttf, otf, or eot format. This all works right now in IE. You just need the right syntax for your download declarations, then whenever you want to use a custom font in your css, it’s the same as before: font-family: ‘My Font’. Check out Paul Irish’s post on bulletproof, cross-browser syntax for @font-face.
The only disadvantage to @font-face is licensing. Some fonts are free, others require a license to use. When you use @font-face, you make your font available to the public for download from wherever you download it. That doesn’t make the font creators very happy sometimes, so just make sure you have the proper permission before using @font-face.
9. Attribute Selectors - Hey! You got a little regex in my css. yum.
a[href^="mailto:"] - select all mailto anchorsa[href$=".co.uk"] - select all anchors ending with .co.uk (british links)a[title*="chris"] - select all anchors that have chris in the titlea[title*="chris"]:before {- before and content tags. Stick some content before all the anchors that have chris in the title.
content: url('images/heart.jpg');
} tr:nth-child(even) - select all even tr’s
10. Lastly, isn’t there a way to check if a browser supports a specific HTML5 or CSS3 feature? YES! Faruk Artes and Paul Irish created Modernizr. Check it out at www.modernizr.com.
Thanks to Chris Mills, Medium, and all of the sponsors of DevChatt. Expect many posts next weekend when all the mischief and craziness happens. DevChatt is March 26-27. See devchatt.org for more info.
Chris Mills’ blog on Opera: http://my.opera.com/chrismills/blog/
His slides for his presentation can be downloaded in a pdf here: http://my.opera.com/ODIN/blog/university-talk-resources-march-2010-html5-css3-slides
All the cool stuff Opera is doing for us developers can be found at dev.opera.com.
On a side note, thank you to wyattdanger (Stephen Bush) for the first outside contribution to this blog. Check out the videos on python. Much appreciated.
This is part of a great series of Python screencasts. This particular video discusses some basic python list functions (filter, map, and reduce).
about
Let me explain what this is. I intend this blog to be a community blog about technology. Anyone with a tumblr account can post here (see ‘submit it’ below). I realize ‘technology’ is rather general, but I think through the vicious process of natural selection, the theme will eventually become more specific.
I’ll be posting coding tutorials, quotes from Noah ‘the sex’ Burney, and philosophical tidbits basking in the glory of front ends and back ends (you heard right). If you ever have a question, feel free to ask it (see below).
In addition, I am concerned about the pretentious, self-admiring nature of blogs (hence the community aspect) so I will aspire to allow this concern to influence what I write and what I approve to be posted. For instance, I will not be posting about my dog’s strangely sideways and aerodynamic genitals….again…..maybe.
So let’s do some brain bumping and maybe we’ll learn something.
