Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Wird geladen in …3
×
1 von 60

“Coding For Humans” by Paola Ducolin, Staff Engineer @ Dashlane

0

Teilen

Herunterladen, um offline zu lesen

We live in a product development world that changes rapidly. User needs are uncertain, stakeholders' goals consequently change, product managers and designers want to AB test different solutions to attract and retain more customers, and if this was not enough, technology stacks change too. This talk gives a few tips that are helping me and my team at Dashlane iterate more efficiently over our software, writing readable and well documented code, with refactoring as goal instead of as a nightmare.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

“Coding For Humans” by Paola Ducolin, Staff Engineer @ Dashlane

  1. 1. CODING FOR HUMANS Paola Ducolin |WiMLDS Paris | 14 Mai 2020
  2. 2. ABOUT MYSELF • 🙋 Paola Ducolin 🇮🇹 • 💻 Staff Engineer @ Dashlane • 👩💻 Ladies of Code Paris co-organizer • 🏳🌈 Paris QueerJS organizer • 👵 10+ years in software development • 🤦 8+ years with legacy code 2
  3. 3. ABOUT QUEERJS 3
  4. 4. 4
  5. 5. 17:00 CEST, MAY 16TH @ TWITCH.TV/QUEERJS 5
  6. 6. CODING FOR HUMANS 6
  7. 7. DESIGNING FOR HUMANS 7
  8. 8. 8
  9. 9. 9 65kg
  10. 10. 10
  11. 11. 11
  12. 12. WHAT ABOUT CODE? Coding for humans | @PolaDuco WiMLDS Paris | 14 mai 2020 12
  13. 13. Coding for humans | @PolaDuco WiMLDS Paris | 14 mai 2020 13 bit.ly/QueerInTechPhotos
  14. 14. LEGACY CODE IMPACT ON MY FEELINGS 14
  15. 15. Coding life Reading Writing Source: Robert C. Martin 15
  16. 16. 16
  17. 17. All code becomes legacy code 17 eventually
  18. 18. 18
  19. 19. 1. WRITING READABLE CODE 2. WRITING HUMAN DOCUMENTATION 19
  20. 20. Coding life Reading Writing Source: Robert C. Martin 20
  21. 21. HUMAN CODE 21 Use semantically meaning names
  22. 22. EXAMPLES - NAMING 22 https://bit.ly/coding-for-humans class Rectangle { constructor(w, h) { this.w = w; this.h = h; } calcA() { return this.w * this.h; } }
  23. 23. EXAMPLES - NAMING 23 https://bit.ly/coding-for-humans class Rectangle { constructor(width, height) { this.width = width; this.height = height; } calculateArea() { return this.width * this.height; } }
  24. 24. EXAMPLES – NAMING 2 24 https://bit.ly/coding-for-humans const LETTERS = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"; const CHARS = LETTERS + "1234567890!@#$%^&*()_-+=[]{}|/?><.,;:";
  25. 25. EXAMPLES – NAMING 2 25 https://bit.ly/coding-for-humans const LETTERS = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"; const LETTERS_DIGITS_SYMBOLS = LETTERS + "1234567890!@#$%^&*()_-+=[]{}|/?><.,;:";
  26. 26. HUMAN CODE 26 Use semantically meaning names Prevent reading inner code
  27. 27. EXAMPLES – INNER CODE 27 https://bit.ly/coding-for-humans var rectangle = new Rectangle(3, 5); rectangle.increaseSize(0.3); class Rectangle { constructor(width, height) { this.width = width; this.height = height; } increaseSize(percentage) { this.width *= percentage; this.height *= percentage; } }
  28. 28. EXAMPLES – INNER CODE 28 https://bit.ly/coding-for-humans var rectangle = new Rectangle(3, 5); rectangle.scaleWidthAndHeightByFactor(0.3); class Rectangle { constructor(width, height) { this.width = width; this.height = height; } scaleWidthAndHeightByFactor(percentage) { this.width *= percentage; this.height *= percentage; } }
  29. 29. EXAMPLES – INNER CODE 29 // This is a comment
  30. 30. HUMAN CODE 30 Use semantically meaning names Prevent reading inner code Do one thing Minimize function length
  31. 31. EXAMPLES – MINIMIZE LENGTH 31 https://bit.ly/coding-for-humans function Adjust(rectangle) { rectangle.Size = Size.S; rectangle.HasError = false; rectangle.IsSquare = false; if (rectangle.Width >= 10000) rectangle.Size = Size.L; if (rectangle.Height <= 100) rectangle.HasError = true; if (rectangle.Width === rectangle.Height) rectangle.IsSquare = true; if (rectangle.Width >= 20000) rectangle.Size = Size.XL; if (rectangle.Height <= 200) rectangle.Size = Size.M; if (rectangle.Width <= 300) rectangle.HasError = true; }
  32. 32. EXAMPLES – MINIMIZE LENGTH 32 https://bit.ly/coding-for-humans import fc from "fast-check"; function test() { fc.assert( fc.property(fc.integer(0, 30000), fc.integer(0, 30000), (width, height) => { let rectangle = { TotalPurchases: totalPurchases, RecentOrders: recentOrders, LovesJavaScript: lovesJavaScript, KnowsCobol: knowsCobol, }; let rectangle_expected = JSON.parse(JSON.stringify(rectangle)); Adjust(rectangle_expected); Adjust_new(rectangle); expect(rectangle.Size).toBe(rectangle_expe cted.Size); expect(rectangle.HasError).toBe(rectangle_ expected.HasError); expect(rectangle.IsSquare).toBe(rectangle_ expected.IsSquare); }) ); }
  33. 33. EXAMPLES – MINIMIZE LENGTH 33 https://bit.ly/coding-for-humans function Adjust(rectangle) { rectangle.Size = Size.S; rectangle.HasError = false; rectangle.IsSquare = false; if (rectangle.Width >= 10000) rectangle.Size = Size.L; if (rectangle.Height <= 100) rectangle.HasError = true; if (rectangle.Width === rectangle.Height) rectangle.IsSquare = true; if (rectangle.Width >= 20000) rectangle.Size = Size.XL; if (rectangle.Height <= 200) rectangle.Size = Size.M; if (rectangle.Width <= 300) rectangle.HasError = true; }
  34. 34. EXAMPLES – MINIMIZE LENGTH 34 https://bit.ly/coding-for-humans function AdjustSize(rectangle) { if (rectangle.Height <= 200) rectangle.Size = Size.M; else if (rectangle.Width >= 20000) rectangle.Size = Size.XL; else if (rectangle.Width >= 10000) rectangle.Size = Size.L; else rectangle.Size = Size.S; }
  35. 35. EXAMPLES – MINIMIZE LENGTH 35 https://bit.ly/coding-for-humans function Adjust(rectangle) { rectangle.Size = Size.S; rectangle.HasError = false; rectangle.IsSquare = false; if (rectangle.Width >= 10000) rectangle.Size = Size.L; if (rectangle.Height <= 100) rectangle.HasError = true; if (rectangle.Width === rectangle.Height) rectangle.IsSquare = true; if (rectangle.Width >= 20000) rectangle.Size = Size.XL; if (rectangle.Height <= 200) rectangle.Size = Size.M; if (rectangle.Width <= 300) rectangle.HasError = true; }
  36. 36. EXAMPLES – MINIMIZE LENGTH 36 https://bit.ly/coding-for-humans function AdjustHasError(rectangle) { if (rectangle.Height <= 100 || rectangle.Width <= 300) rectangle.HasError = true; else rectangle.HasError = false; }
  37. 37. EXAMPLES – MINIMIZE LENGTH 37 https://bit.ly/coding-for-humans function AdjustIsSquare(rectangle) { if (rectangle.Width === rectangle.Height) rectangle.IsSquare = true; else rectangle.IsSquare = false; }
  38. 38. EXAMPLES – MINIMIZE LENGTH 38 https://bit.ly/coding-for-humans function Adjust_new(rectangle) { AdjustSize(rectangle); AdjustHasError(rectangle); AdjustIsSquare(rectangle); }
  39. 39. HUMAN CODE 39 Use semantically meaning names Prevent reading inner code Do one thing Minimize function length Top-down narrative
  40. 40. EXAMPLES – TOP DOWN NARRATIVE 40 https://bit.ly/coding-for-humans class Rectangle { // helper functions BEGIN #scaleWidthByFactor(scalingFactor) { this.width *= scalingFactor; } #scaleHeightByFactor(scalingFactor) { this.height *= scalingFactor; } // helper functions END // frequently used functions BEGIN ScaleWidthAndHeightByFactor(scalingFactor) { this.#scaleWidthByFactor(scalingFactor); this.#scaleHeightByFactor(scalingFactor); } // frequently used functions END }
  41. 41. EXAMPLES – TOP DOWN NARRATIVE 41 https://bit.ly/coding-for-humans class Rectangle { // scaling functions BEGIN ScaleWidthAndHeightByFactor(scalingFactor) { this.#scaleWidthByFactor(scalingFactor); this.#scaleHeightByFactor(scalingFactor); } #scaleWidthByFactor(scalingFactor) { this.width *= scalingFactor; } #scaleHeightByFactor(scalingFactor) { this.height *= scalingFactor; } // scaling functions END }
  42. 42. HUMAN CODE 42 Use semantically meaning names Prevent reading inner code Do one thing Minimize function length Top-down narrative Review with the team Use refactoring tools
  43. 43. 43
  44. 44. USE EMPATHY WHILE READING CODE 44 https://bit.ly/romeu-moura
  45. 45. 1. WRITING READABLE CODE 2. WRITING HUMAN DOCUMENTATION 45
  46. 46. bit.ly/carolstran-human-docs HUMANISING YOUR DOCUMENTATION - CAROLYN STRANSKY 46
  47. 47. HUMAN DOCUMENTATION • Use inclusive and clear language 47
  48. 48. bit.ly/alex-js ENSURE INCLUSIVE AND CLEAR LANGUAGE 48
  49. 49. bit.ly/write-good ENSURE INCLUSIVE AND CLEAR LANGUAGE 49 Wow! Congratulations to Greg Gutfeld, a one time Trump Hater who has come all the way home. His Ratings easily beat no talent Stephen Colbert, nice guy Jimmy Fallon, and wacko “last placer” Jimmy Kimmel. Greg built his show from scratch, and did a great job in doing so. Well run States should not be bailing out poorly run States, using CoronaVirus as the excuse! The elimination of Sanctuary Cities, Payroll Taxes, and perhaps Capital Gains Taxes, must be put on the table. Also lawsuit indemnification & business deductions for restaurants & ent. Most of the money raised by the RINO losers of the so-called “Lincoln Project”, goes into their own pockets. With what I’ve done on Judges, Taxes, Regulations, Healthcare, the Military, Vets (Choice!) & protecting our great 2A, they should love Trump. Problem is, I BEAT THEM ALL! ============= he way home. His Ratings easily beat no talent Stephen Colbert, nice guy Jimmy F ^^^^^^ "easily" can weaken meaning on line 1 at column 104 ------------- hould not be bailing out poorly run States, using CoronaVirus as the excuse! The ^^^^^^ "poorly" can weaken meaning on line 3 at column 42 ------------- apital GainsTaxes, must be put on the table.Also lawsuit indemnification & bus ^^^^^^ "be put" may be passive voice on line 3 at column 184
  50. 50. ENSURE INCLUSIVE AND CLEAR LANGUAGE 50 bit.ly/hemingwayapp
  51. 51. HUMAN DOCUMENTATION • Use inclusive and clear language • Ensure visibility 51
  52. 52. Roads for Success Navigating Docs – Kyle Gillbit.ly/roads-docs THINK TWICE ABOUT NAVIGATION 52
  53. 53. THINK TWICE ABOUT NAVIGATION 53
  54. 54. 54 bit.ly/dashlane-ds
  55. 55. 55 bit.ly/dashlane-ds
  56. 56. THINK TWICE ABOUT NAVIGATION 56 bit.ly/dashlane-ds
  57. 57. HUMAN DOCUMENTATION • Use inclusive and clear language • Ensure visibility • Update it 57
  58. 58. UPDATE IT 58 bit.ly/dashlane-ds
  59. 59. UPDATE IT 59 https://bit.ly/template-pr
  60. 60. 60 THANK YOU

×