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!

Transcript

1. Fighting Boolean Traps
   

   View Slide

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

   View Slide

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

   View Slide

4. I HAVE A BAD FEELING ABOUT THIS…
   

   View Slide

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

   View Slide

6. var powerSlider = new Slider();
   

   View Slide

7. View Slide

8. var anotherSlider = new Slider(false);
   

   View Slide

9. IT’S A TRAP!
   

   View Slide

10. IT’S A BOOLEAN TRAP!
    

    View Slide

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

    View Slide

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

    View Slide

13. Code is written once, read many times.
    

    View Slide

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

    View Slide

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

    View Slide

16. contacts.find(str);
    

    View Slide

17. View Slide

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

    View Slide

19. IT’S A MODIFIER TRAP!
    

    View Slide

20. the more the merrier
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. GarlicNaN != NaN
    Future JavaScript?
    

    View Slide

29. Best Practices
    

    View Slide

30. #1: Private by Default
    Public = Irreversible
    

    View Slide

31. View Slide

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

    View Slide

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

    View Slide

34. View Slide

35. #2: Mandatory API Review
    

    View Slide

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

    View Slide

37. #3: Build and Use TOOLS
    

    View Slide

38. Summary
    

    View Slide

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

    View Slide

40. [Yoda]
    

    View Slide

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

    View Slide