SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)

    This Week in JavaScript - 02 December 2013

    Your weekly update of interesting happenings in the world of JavaScript - feel free to discuss, and help to bring some new ideas to light.

    There's some real goodies this week, so enjoy ...

    Coding tips

    Perpetuating Terrible JavaScript Practises - Christian Heilmann on a rant
    Javascript Hacks for Hipsters - Javascript is so much fun, except when it’s not.
    Writing Better jQuery Code - Better code means faster apps and jank free websites

    News & Views

    The release of Scala.js - Write your Web application entirely in Scala. Who wouldn't want to do that?
    How replacing Java with JavaScript is paying off for PayPal
    How Node.js Got Big - How the wunderkind framework grew up
    Contrasting Backbone and Angular

    Learn something

    Fun with JavaScript Native Array Functions
    10 Ecmascript-6 tricks you can perform right now
    When JavaScript Feature Detection Fails - Brothercake has your back!
    Frequently Misunderstood JavaScript Concepts - Thanks @ralph.m ;

    Cool stuff

    OriDomi - The web is flat, but now you can fold it up
    Breakout - in 30 lines of JS (no external libraries)
    DevTools Snippets - A collection of helpful snippets to use inside of browser devtools
    List.js - Tiny, invisible and simple, yet powerful and incredibly fast vanilla Javascript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.



    So, what you think about these recent happenings in JavaScript?

    Have you got a hipster tip to share? Did you write something cool in 30 lines of JavaScript? Tempted to check out Scala.js?
    Let us know and the debate can begin.

    Also, feel free to PM us if you have anything interesting for the next issue. Happy reading! - Paul & Pullo
    Last edited by Pullo; Dec 2, 2013 at 12:07. Reason: Typo

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    If you don't mind shameless self promotion, I got a hipster tip to share: http://tech.pro/tutorial/1744/javasc...st-credit-card

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Not at all.
    Quite an entertaining take on closures

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Nice work on these Pullo, I liked Oridomi and Breakout in 30 lines

    The only things worth using the js hacks for hipsters is Timing, Debugging and "||=" and there's nothing at all hacky about them. Everything else is just bad practice.
    Backbone and Angular are apples and oranges.

    http://lab.aerotwist.com/canvas/poly-maker/ is pretty cool.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Nice work on these Pullo, I liked Oridomi and Breakout in 30 lines
    Thanks man!
    There have been a spate of these "xxx in 30 lines of JS" recently.
    The best one I saw was an interactive spreadsheet, which worked fine until someone copied a Rick Astley video into one of the cells

    Quote Originally Posted by markbrown4 View Post
    The only things worth using the js hacks for hipsters is Timing, Debugging and "||=" and there's nothing at all hacky about them.
    Did you get the point of doing this?

    Code JavaScript:
    var x = Math.random(2);
    if (x > 0.5) {
      debugger; // Conditional breakpoint
    }
    x--;

    It's clear what it does, but I struggled to think of why it might be useful.

    Quote Originally Posted by markbrown4 View Post
    Backbone and Angular are apples and oranges.
    I don't have much call to use either, sadly.
    Do you have any experience with working with either of these frameworks?

    Quote Originally Posted by markbrown4 View Post
    Absolutely

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Pullo View Post
    Did you get the point of doing this?
    Code JavaScript:
    var x = Math.random(2);
    if (x > 0.5) {
      debugger; // Conditional breakpoint
    }
    x--;
    It's clear what it does, but I struggled to think of why it might be useful.
    Doesn't it just launch the browsers debugging in Firebug/Chrome etc.
    I still use console.log and alerts, but launching the debugger so you can access variables might be even better.
    Quote Originally Posted by Pullo View Post
    Do you have any experience with working with either of these frameworks?
    Yeah, I've used Backbone quite a bit and I like it. I have a man crush on @jashkenas.
    I've only toyed with Angular and Ember but they are more opinated and magical.. where Backbone is the minimum toolset for rich client-side apps that leaves you in control of execution. Angular and ember do allow you to do more with less code but they require you to follow their conventions and don't give you much freedom though.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi Mark,

    Quote Originally Posted by markbrown4 View Post
    Doesn't it just launch the browsers debugging in Firebug/Chrome etc.
    I still use console.log and alerts, but launching the debugger so you can access variables might be even better.
    Sorry, what I meant was what use case would require a conditional launching of the debugger?
    In the code I posted, the debugger is only launched if a randomly generated number falls below a certain limit.
    When would one do that?

    BTW, another good tip for debugging that I picked up lately was using: console.table().
    https://plus.google.com/+AddyOsmani/posts/PmTC5wwJVEc
    Last edited by Pullo; Dec 5, 2013 at 09:43. Reason: Typo

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure it suppose to make sense. In his mind I think it reads like "you can also randomly and conditionally call debugger". I'd rather question why is he writing Math.random(2) when the random function takes no arguments?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by myty View Post
    I'm not sure it suppose to make sense. In his mind I think it reads like "you can also randomly and conditionally call debugger". I'd rather question why is he writing Math.random(2) when the random function takes no arguments?
    I propose that it may be due to him being used to some other language, resulting in JavaScript coding techniques that are less than saliatory.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm not sure if he's serious about the XXX stuff. XXX and SFW in the same phrase? Also "xxx usually never appears"? I wonder!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by myty View Post
    I'd rather question why is he writing Math.random(2) when the random function takes no arguments?
    Good point

    Quote Originally Posted by myty View Post
    XXX and SFW in the same phrase?
    I was wondering about why he wrote SFW. Makes sense now (because of XXX). Thanks.

    I also quite liked the ultra light templates approach.
    I might start using that.

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm... I'm not convinced.

    The ultra light template approach seems like what I would do when I would first encounter the problem and I was trying to come up with a solution... given that I was living someplace with no internet access, no books, no nothing. And once "in the field", I bet the ultra light template approach would most certainly bite me in the back: rigid, repetitive, no reusability.

    For starters, every serious developer's mantra is "keep your initialize data in an object". So
    Code:
    var firstName = 'Tal';
    var screenName = 'ketacode'
    should be
    Code:
    {
      'firstName': 'Tal';
      'screenName': 'ketacode'
    }
    At which point mustache, 4.7kb minified, dynamic views, sectioned templates, to name just a few, it's starting to make a whole lot of sense.

  13. #13
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Not at all.
    Quite an entertaining take on closures
    I'm trying to come up with a series about closures. This is story#2: http://tech.pro/tutorial/1756/javasc...ure-stories-ii

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by myty View Post
    I'm trying to come up with a series about closures. This is story#2: http://tech.pro/tutorial/1756/javasc...ure-stories-ii
    Good one!

    A small typo:

    Code:
    function cautiosCitizen() {
    should be

    Code:
    function cautiousCitizen() {
    Quote Originally Posted by mty
    As always, you get extra points if you can tell, without console or alert, which are the closure variables and what's the sum left on the card.
    This is a bit of a guess, but is 2000 left on the card?
    I didn't use the console (and definitely not alert), but I would understand it as follows:

    Code:
    var theftStoryPartOne = cautiosCitizen();
    theftStoryPartOne is assigned the return value of cautiosCitizen(), which is a pointer to the function thievingPunk()

    Code:
    var theftStoryPartTwo = theftStoryPartOne();
    theftStoryPartTwo is assigned the return value of executing the function being pointed to by theftStoryPartOne, which is itself a pointer to the function thievingPunkFriend().

    Code:
    theftStoryPartTwo();
    This executes the function it is pointing to and debits the card 1000 bitcoins.

    Is that correct?

  15. #15
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for the correction. Updated.

    Here's the execution order:

    1. theftStoryPartOne is assigned: cautiousCitizen executes: card = 3000
    2. theftStoryPartTwo is assigned: theftStoryPartOne executes: thievingPunk executes: withdraw(1500): card = 1500
    closure variables: blocked, card, withdraw
    3. theftStoryPartTwo executes: thievingPunkFriendExecutes: withdraw(1000): card = 500
    closure variables: blocked, card, withdraw

    500 is what's left. Bitcoins, as you said!

    I'm going to add screencasts in a third follow-up, to explain both more complicated scripts.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ah ok, cool.
    I was kind of on the right track, but forgot the withdraw(1500);.

    Screencasts would be cool.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •