

JavaScript Hacks for Hipsters - berzniz
http://www.slideshare.net/berzniz/javascript-40065817

======
JonnieCache
Hows this for hipster: these are all basic programming techniques that have
existed for decades and barely need to be pointed out. Or have I missed the
joke?

EDIT: this is "fake surprise" isn't it. I'm sorry HN. Everyone has to learn
this stuff somewhere. But the title was kindof asking for it.

To any newly minted developers out there, the best way to learn this stuff is
just to read other peoples code. Pick the library you enjoy using the most and
read every file until you understand what all the constructions and bits of
syntax are for. Then compare it to another library, etc etc. Develop a taste
for some and a distaste for others. There's no excuse not to learn
experimentally in js as it has a repl. Use the source luke!

~~~
whoisthemachine
You didn't realize you are the ultimate hipster, you knew about these tricks
before they were cool.

~~~
JonnieCache
I'm pretty sure they were probably cool and then uncool and then cool again
several times before I was born.

Just because people used to punch holes in cards doesn't mean they didn't have
l33t hax.

------
wildpeaks
The problem with #1 is that the minifier (e.g. [http://closure-
compiler.appspot.com/home](http://closure-compiler.appspot.com/home)) can't
optimize as much.

\---------

Example using _strings_ :

    
    
      var obj = {
        start: function(){
          'use strict';
          console.log('start');
        },
        stop: function(){
          'use strict';
          console.log('stop');
        }
      };
      
      exports.onDummy = function(success){
        'use strict';
        var method = (success ? 'start' : 'stop');
        obj[method]();
      };
    

results in:

    
    
      var a={start:function(){console.log("start")},stop:function(){console.log("stop")}};exports.a=function(b){a[b?"start":"stop"]()};
    
    

\---------

Same thing, using _if..else_ :

    
    
      var obj = {
        start: function(){
          'use strict';
          console.log('start');
        },
        stop: function(){
          'use strict';
          console.log('stop');
        }
      };
      
      exports.onDummy = function(success){
        'use strict';
        if (success){
          obj.start();
        } else {
          obj.stop();
        }
      };
    

results in the _much shorter_ :

    
    
      exports.a=function(a){a?console.log("start"):console.log("stop")};

------
usingpond
Many of these are:

1) Much less legible, and in some cases outright lazy 2) Extremely vulnerable
to Javascript's fast-and-loose type checking.

However it's good to be AWARE of them, since you tend to see them a lot in
team projects.

------
berzniz
While introducing new developers to work on the JS part of our codebase (node
& client side) - I noticed some puzzled looks here and there.

Not everyone understands why && and || are used outside of if statements. Not
everyone knows about joining strings using an array.

This summarises the things you'll have to know to read code in our codebase.

~~~
nmjohn
I would be concerned by someone not knowing || - it is used all the time by
almost every major project. Not knowing what that one did outside of an if
functions tells me 1.) Said person hasn't actually looked at any code other
than their own OR 2.) They saw it and didn't care enough to learn what it did.
Either way, strike against them.

The && though, I've never used in this context. And I'm not sure if I've seen
it out in the wild or not. I knew what it did right away so I imagine if I
have seen it before I wouldn't remember.

~~~
vlunkr
Or 3.) They are new developers. I learned to use that at some point and so did
you.

~~~
nmjohn
Well yes, absolutely, but the context was someone being hired for a job and
seeing the codebase. Someone that green is, at least in my opinion, not yet
qualified to be hired as a programmer.

------
callahad
Non-slideshow link: [http://berzniz.com/post/68001735765/javascript-hacks-for-
hip...](http://berzniz.com/post/68001735765/javascript-hacks-for-hipsters)

This may impugn my credibility as a professional developer, but I genuinely
can't tell if this article is sarcastic or sincere.

------
rezistik
Why `success ? 'method1' : 'method2'` instead of `success ? obj.method1() :
obj.method2() `? That seems more concise to me.

~~~
CaveTech
I find the other method more concise, as it's a more DRY syntax if you're
going to interact with the functions in more than one place.

------
phpnode
Most of this is just idiomatic JS, hardly "hacks".

------
Mithaldu
For some reason the entire thing reads to me as a guide to writing Javascript
like an experienced Perl developer. Either way, it's really cool to see people
advocating an idiomatic style for JS. :)

------
k__
I don't know what to make of it.

Some seem like good ideas and some like really bad ones...

------
fedlarm
One I've never thought of using before is the: isAwesome && alert("yay");

I have used the name || "no name" operator a lot and thought to myself that it
looked cool on first impression. But having something like: isAwesome() &&
alert("yay"); Already makes it harder to read I think. I'm curious to what
others think of this one? Maybe its just because it is new to me..

~~~
digibo
I find constructs like isAwesome() && alert("yay"); confusing as well, but in
our codebase it's pretty much standard to use a simple falsy check like
'callback && callback()' for optional callbacks, but we don't use it anywhere
else.

To be honest, I like and use some of those, especially when writing
experimental/disposable code, but otherwise I try to be gentle to less
experienced developers and my future self.

As of #5 - I used to do and love this when writing unit tests. At the end of
the work day, if I'm in the middle of implementing a feature, I'd commit and
then write the next unit test (inevitably) sitting in my head and leave it
failing. Really helps when it's Monday.

------
drinchev
IMHO, hipster JavaScript is called CoffeeScript.

    
    
        1) do obj[if success then 'start' else 'stop']
        2) ['milk', 'coffee', 'sugar'].join ', '
        3) doStuff = (options = {}) ->
        4) isThisAwesome?()
        5) ### ... ###
        6-8) ...
        9) template = "Hi, my name is #{firstName} and my twitter screen name is @#{screenName}"
    

[1]
[http://coffeescript.org/#try:do%20obj%5Bif%20success%20then%...](http://coffeescript.org/#try:do%20obj%5Bif%20success%20then%20'start'%20else%20'stop'%5D%0A%0A%5B'milk'%2C%20'coffee'%2C%20'sugar'%5D.join%20'%2C%20'%0A%0AdoStuff%20%3D%20\(options%20%3D%20%7B%7D\)%20-%3E%0A%0AisThisAwesome%3F\(\)%0A%0Atemplate%20%3D%20%22Hi%2C%20my%20name%20is%20%23%7BfirstName%7D%20and%20my%20twitter%20screen%20name%20is%20%40%23%7BscreenName%7D%22)

------
johannh
This was originally published a year ago in this blog post:

[http://berzniz.com/post/68001735765/javascript-hacks-for-
hip...](http://berzniz.com/post/68001735765/javascript-hacks-for-hipsters)

Makes for a nicer read than slideshare imo.

------
wuliwong
I have read a few places recently about techniques and strategies to get rid
of ifs and else's in code. It was all in the spirit of writing more concise
and compact code, not about the actual speed when executing the code. So
often, I see "concise" at odds with "readability." The '&&' slide is a good
example of this. For me, multi-line if/else statements are pretty easy to
read. I hate running into complicated, one line, if else statements, it feels
to me that it takes twice as long to parse and understand.

------
rbinv
You certainly lose some code readability with some of these.

------
ryandvm
Makes sense. Javascript is the PBR of programming languages.

~~~
kachnuv_ocasek
What's the PBR?

~~~
JonnieCache
[https://en.wikipedia.org/wiki/Pabst_Blue_Ribbon](https://en.wikipedia.org/wiki/Pabst_Blue_Ribbon)

As I understand it its basically a low quality beer supposedly drunk by US
hipsters in order to cultivate a kind of working class legitimacy. It's long
since become a meme in itself though.

------
Cthulhu_
Pff, I used most of those before they were mainstream.

------
speakeron
"Trade bloated if/else blocks for a quick function call"

Is there any programmer since the 1970s that needs to be told this?

~~~
thirdtruck
People who have only been programming since the 2010s, for instance.
Developers are not born with a refined code aesthetic. They have to learn it
at some point.

~~~
speakeron
What you're describing is a beginner programmer; that's not necessarily what a
hipster is and the title is a bit of a slur. The article should have been
titled "Programming Tips for New Programmers".

------
thomasmarcelis
Someone needs to clarify to me why people are excited about this. Isn't this
just horrible for readability?

I've just started reading Clean Code, and there is a lot of emphasis on
writhing readable code, because the philosophy is that code is only written
once but read many times.

------
nkg
I have witnessed many of these on some JS projects I've been working on! While
I took time to think on it and figure out what the "author" was aiming at, my
colleagues were more like "What does this mean? No way I'm touching that.
Let's rewrite that crap!"

------
blergh123
I'm actually not sure whether this is a joke or not, some of these practices
like #1, #4 and even #5 reek of amateurish programming practices - maybe this
is fine for your own pet projects, but if you're working with teams or on open
source then have fun!

------
mattxxx
Hey, I love neat Javascript tricks... but things like the "TODO" operator are
really bad style and will hurt larger teams.

Stick to standards, so ease-of-communication is simpler! The reality is that
collaboration is harder than programming!

~~~
nmjohn
I agree. If you want that functionality your text editor probably has it or a
plugin for it - which will be much more efficient.

In sublime for example, Ctrl+F2 marks a line, and F2 toggles between marked
lines. (Ctrl+F2 removes the mark as well).

------
nikon
Some of these are mildly useful, but not sure it deserves front page.

I like using .filter, .forEach and .map native methods on arrays. Also making
use of Underscore.js where possible.

------
otikik
Presentation Hack for Hipsters: Use bigger fonts than this guy.

------
Kiro
var aCoolFunction = undefined;

aCoolFunction && aCoolFunction();

What is the purpose of this?

~~~
nmjohn
Very few practical purposes. It was already described what it does - but the
thing is, why would you ever want that?

If a function is coming up undefined that I expect to be defined, that's an
issue - not one I want to fail silently - because that is no fun to debug.

If something I expect to be defined isn't, that should throw an error and stop
execution.

There are some edge cases where it may not matter and there is a legit reason
why a function may sometimes be undefined, but I've never written code like
that and can't think of anything that doesn't have a much better alternative.

------
giancarlostoro
I couldn't take it seriously so I laughed instead. I really need some coffee.

------
officialjunk
if internet explorer is important in your life, you can forget some of these.

~~~
brbcoding
Why is that? Which of these are browser specific?

