Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fighting Boolean Traps

Fighting Boolean Traps

Presented at WaffleJS meetup. Jan 10, 2018. San Francisco.

Ever encounter some code that looks like new Slider(true /*horizontal*/)? Perhaps you are confused by the semantics exhibited by setState(true, false)? Did you get a headache when trying to unpack double negatives as in filter.caseInsensitive = false? These are typical API blunders often denoted as Boolean Traps. Learn how to recognize such a mistake and also more importantly, how to prevent it from happening!

Ariya Hidayat

January 10, 2018
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. Fighting Boolean Traps

    View full-size slide

  2. Readable, consistent,
    crystal clear
    Thank you, Captain Obvious!

    View full-size slide

  3. https://twitter.com/AriyaHidayat/status/455892955765551105

    View full-size slide

  4. I HAVE A BAD FEELING ABOUT THIS…

    View full-size slide

  5. A long time ago
    in a galaxy far far away…

    View full-size slide

  6. var powerSlider = new Slider();

    View full-size slide

  7. var anotherSlider = new Slider(false);

    View full-size slide

  8. IT’S A TRAP!

    View full-size slide

  9. IT’S A BOOLEAN TRAP!

    View full-size slide

  10. s2 = new Slider(false);
    s1 = new Slider(true);

    View full-size slide

  11. s2 = new Slider(false /*horiz*/);
    s1 = new Slider(true /*vertical*/);

    View full-size slide

  12. Code is written once, read many times.

    View full-size slide

  13. s1 = new Slider({
    orientation: "vertical"
    });
    s2 = new Slider({
    orientation: "horizontal"
    });

    View full-size slide

  14. s2 = new VerticalSlider();
    s1 = new HorizontalSlider();

    View full-size slide

  15. contacts.find(str);

    View full-size slide

  16. // Check the cache first
    contacts.find(str, true);
    // Fresh search only
    contacts.find(str, false);

    View full-size slide

  17. IT’S A MODIFIER TRAP!

    View full-size slide

  18. the more the merrier

    View full-size slide

  19. Ping-pong, Anyone?
    // Expand + animate
    treeItem.setState(true, true);
    // Expand + don't animate
    treeItem.setState(true, false);
    // Collapse + animate
    treeItem.setState(false, true);

    View full-size slide

  20. DOM Event
    event.initKeyEvent("keypress", true, true,
    null, null, false, false, false, false, 9, 0);

    View full-size slide

  21. Double Negatives
    X.disabled = false;
    Y.setHidden(true);
    filter.caseInsensitive = true;
    X.enabled = true;
    Y.setVisible(false);
    filter.caseSensitive = false;

    View full-size slide

  22. picker.yearFrom = 1980;
    picker.yearTo = 2020;
    picker.minimumYear = 1980;
    picker.maximumYear = 2020;

    View full-size slide

  23. this.callMe = "Adam";
    flight.from = SFO;
    flight.to = JFK;
    this.name = "Adam";
    flight.departure = SFO;
    flight.destination = JFK;

    View full-size slide

  24. var x = Math.sqrt(-2)
    isNaN(x) true
    x === NaN false
    isNaN('hola') true
    x == NaN false

    View full-size slide

  25. https://twitter.com/AriyaHidayat/status/393034774245171200

    View full-size slide

  26. GarlicNaN != NaN
    Future JavaScript?

    View full-size slide

  27. Best Practices

    View full-size slide

  28. #1: Private by Default
    Public = Irreversible

    View full-size slide

  29. SHStripMneumonic
    “Why is the function
    SHStripMneumonic misspelled?”
    Raymond Chen, Microsoft
    http://blogs.msdn.com/b/oldnewthing/archive/2008/05/19/8518565.aspx

    View full-size slide

  30. -- yours truly
    “You’d fail your first
    two attempts anyway.”

    View full-size slide

  31. #2: Mandatory API Review

    View full-size slide

  32. “Write 3 examples
    which use the API.”

    View full-size slide

  33. #3: Build and Use TOOLS

    View full-size slide

  34. Boolean traps
    (and other API mistakes)
    lead to FEAR

    View full-size slide

  35. Thank You
    Some artworks are from https://unsplash.com/ and http://openclipart.org.
    speakerdeck.com/ariya
    @ariyahidayat

    View full-size slide