Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Declare Bankruptcy on Technical Debt!

851 views

Published on

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu

Declare Bankruptcy on Technical Debt!
with Kacey Coughlin

OVERVIEW

No one is paid just to deal with technical debt in an organization, and few people like doing it. Tech debt comes from a variety of places, and can pile up quickly if a developer is not careful. Tech debt often makes seemingly simple or small tasks take much longer, cost more money, and generally complicate projects and tech stacks needlessly. But if a dev knows what to watch out for, the entire team can spend less time addressing it.

Good documentation, thorough planning ahead of time, clear ownership, relentless testing, and open source solutions are all ways of reducing technical debt. If you want to get ahead of tech debt, these should be a part of your org’s daily routine.

OBJECTIVE

Help identify and reduce technical debt in your organization.

TARGET AUDIENCE

Engineers, IT professionals, developers with 2+ years industry experience.

ASSUMED AUDIENCE KNOWLEDGE

Best coding practices, version control, open source software, what a tech stack is, experience working on a development team.

FIVE THINGS AUDIENCE MEMBERS WILL LEARN

What is technical debt, and how to identify it
Where tech debt coms from
How to minimize tech debt
Best practices to not add tech debt
Best documentation practices

Published in: Internet
  • Be the first to comment

Declare Bankruptcy on Technical Debt!

  1. 1. Declare Bankruptcy on Technical Debt! How to win friends and influence people A talk by Kacey Coughlin
  2. 2. In this talk: • What is Technical Debt? • Where does it come from? • Why should you care? • How do we (try) to stop lessen it? • Documentation?
  3. 3. 1. A metaphor created to help explain issues with non-technical people
  4. 4. 2. Refers to the eventual consequences of any system/program.
  5. 5. 3. Cleanup work that arises from using a less optimal design in the short term, because a schedule or budget does not allow for long- term/better design; delaying the second release of a product in favor of expediting the first release.
  6. 6. When there is a change in the codebase, it often necessitates other coordinated changes elsewhere in the codebase, as well as documentation.
  7. 7. As a system or program is modified, its complexity increases, as well as its entropy. Unaddressed tech debt leads to software entropy.
  8. 8. Entropy is the measure of a system’s disorder. Software Entropy refers to a system’s increasing disorder or complexity. Spoiler alert: A system’s disorder cannot be reduced, only remain the same or increased.
  9. 9. "A little debt speeds up development, and can be beneficial as long as the debt is paid back promptly with a rewrite that reduces complexity and streamlines future enhancements.” - Ipek Ozkaya
  10. 10. When the WSJ’s website is offline for about an hour due to a technical issue – we are annoyed When planes are grounded across the country due to a network issue at United Airlines – we are baffled. When the NYSE is unable to trade for about 4 hours due to a computer glitch – we start to see a trend.
  11. 11. <form id=“contactForm1” class=“form contact”> <fieldset> <legend>Contact Me</legend> <label for=“contactName”>Name:</label> <input type=“text” id=“contactName” class=“contactInput” placeholder=“Joe” /> <label for=“contactEmail”>Email:</label> <input type=“text” id=“contactEmail” class=“contactInput” placeholder=joe@me.com /> <label for=“contactMessage”>Message:</label> <textarea id=“contactMessage” class=“contactMessage”></textarea> </fieldset> <input type=“button” id=“cancelBtn” class=“cancelBtn” value=“Cancel” /> <input type=“submit” id=“submitBtn” class=“submitBtn” value=“Submit” /> </form>
  12. 12. <form id=“contactForm1” class=“form contact newTheme”> <fieldset class=“newThemeFieldset”> <legend>Contact Me</legend> <label for=“contactName”>Name:</label> <input type=“text” id=“contactName” class=“contactInput newTheme” placeholder=“Joe” /> <label for=“contactEmail”>Email:</label> <input type=“text” id=“contactEmail” class=“contactInput newTheme” placeholder=joe@me.com /> <label for=“contactMessage”>Message:</label> <textarea id=“contactMessage” class=“contactMessage newTheme”></textarea> </fieldset> <input type=“button” id=“cancelBtn” class=“cancelBtn newThemeBtn” value=“Cancel” /> <input type=“submit” id=“submitBtn” class=“submitBtn newThemeBtn” value=“Submit” style=“background-color: blue; border: 1px solid #333;” /> </form>
  13. 13. <form id=“contactForm1” class=“form contact newTheme”> <fieldset class=“newThemeFieldset”> <legend>Contact Me</legend> <label for=“contactName”>Name:</label> <input type=“text” id=“contactName” class=“contactInput newTheme” placeholder=“Joe” required /> <label for=“contactEmail”>Email:</label> <input type=“text” id=“contactEmail” class=“contactInput newTheme” placeholder=joe@me.com required /> <label for=“contactMessage”>Message:</label> <textarea id=“contactMessage” class=“contactMessage newTheme”></textarea> </fieldset> <input type=“button” id=“cancelBtn” class=“cancelBtn newThemeBtn” value=“Cancel” /> <input type=“submit” id=“submitBtn” class=“submitBtn newThemeBtn” value=“Submit” style=“background- color: blue; border: 1px solid #333;” /> </form> <script> $(document).ready(function() { $("#submitBtn").click(function() { var name = $("#contactName").val(); var email = $("#contactEmail").val(); if (name == '' || email == '') { alert("Please Fill Required Fields"); } else { // send the form } }); }); </script>
  14. 14. {{form id=“contactForm1” class=“form contact newTheme”}} <fieldset class=“newThemeFieldset”> <legend>Contact Me</legend> {{label “name” “Name”}} {{input type=“text” id=“contactName” class=“contactInput newTheme” placeholder=“Joe” value=nameValue required }} {{label “contactEmail” “Email” }} {{input type=“text” id=“contactEmail” class=“contactInput newTheme” placeholder=“joe@me.com” value=emailValue required }} {{<label “contactMessage” “Message” }} {{textarea id=“contactMesage” class=“contactMessage newTheme” }} </fieldset> {{input type=“button” id=“cancelBtn” class=“cancelBtn newThemeBtn” value=“Cancel” action=clearForm }} {{input type=“submit” id=“submitBtn” class=“submitBtn newThemeBtn” value=“Submit” style=“background- color: blue; border: 1px solid #333;” action=submitForm }} </form> <script> $(document).ready(function() { $("#submitBtn").click(function() { var name = $("#contactName").val(); var email = $("#contactEmail").val(); if (name == '' || email == '') { alert("Please Fill Required Fields"); } else { // send the form } }); }); </script>
  15. 15. {{form id=“contactForm1” class=“form contact newTheme”}} <fieldset class=“newThemeFieldset”> <legend>Contact Me</legend> {{label “name” “Name”}} {{input type=“text” id=“contactName” class=“contactInput newTheme” placeholder=“Joe” value=nameValue required }} {{label “contactEmail” “Email” }} {{input type=“text” id=“contactEmail” class=“contactInput newTheme” placeholder=“joe@me.com” value=emailValue required }} {{<label “contactMessage” “Message” }} {{textarea id=“contactMesage” class=“contactMessage newTheme” }} </fieldset> {{input type=“button” id=“cancelBtn” class=“cancelBtn newThemeBtn” value=“Cancel” action=clearForm role=“button” }} {{input type=“submit” id=“submitBtn” class=“submitBtn newThemeBtn” value=“Submit” style=“background- color: blue; border: 1px solid #333;” action=submitForm role=“button” }} {{/form>}} <script> $(document).ready(function() { $("#submitBtn").click(function() { var name = $("#contactName").val(); var email = $("#contactEmail").val(); if (name == '' || email == '') { alert("Please Fill Required Fields"); } else { // send the form } }); }); </script>
  16. 16. <div class=“form-wrapper”> {{form id=“contactForm1” class=“form contact newTheme”}} <fieldset class=“newThemeFieldset nostyle”> <legend class=“hidden-element”>Contact Me</legend> <div class=“another-wrapper-for-no-reason”> <div class=“label-input-inline-wrapper”> {{label “name” “Name”}} {{input type=“text” id=“contactName” class=“contactInput newTheme input” placeholder=“Joe” value=nameValue required }} <div class=“error”><span class=“error-icon”></span><p>Error: This field is required!</p></div> </div><div class=“label-input-inline-wrapper”> {{label “contactEmail” “Email” }} {{input type=“text” id=“contactEmail” class=“contactInput newTheme input” placeholder=“joe@me.com” value=emailValue required }} <div class=“error”><span class=“error-icon”></span><p>Error: This field is required!</p></div> </div><div class=“label-message-inline-wrapper”> {{<label “contactMessage” “Message” }} {{textarea id=“contactMesage” class=“contactMessage newTheme textarea” }} </div> </div> </fieldset> <div class=“button-wrapper”> {{input type=“button” id=“cancelBtn” class=“cancelBtn newThemeBtn btn primary-btn large-btn cancel-icon” value=“Cancel” action=clearForm role=“button” }} {{input type=“submit” id=“submitBtn” class=“submitBtn newThemeBtn btn primary-btn large-btn submit-icon” value=“Submit” style=“background-color: blue; border: 1px solid #333;” action=submitForm role=“button” }} </div> <div class=“error”><span class=“error-icon”></span><p>Hey you didn’t fill some stuff out!</p></div> <div class=“success”><span class=“success-icon”></span><p>Success! Form sent!</p></div> {{/form}} </div> <script>
  17. 17. 1. Lack of knowledge
  18. 18. 2. Lack of process
  19. 19. 3. Lack of testing
  20. 20. 4. Lack of standards
  21. 21. 5. Delaying Code Refactoring
  22. 22. Is this code still necessary?
  23. 23. <div class=“form-wrapper”> {{form id=“contactForm1” class=“form contact newTheme”}} {{input class=“input” placeholder=“Joe” value=nameValue required }} <div class=“error”><span class=“error-icon”></span><p>Error: This field is required!</p></div> </div><div class=“label-input-inline-wrapper”> {{label “contactEmail” “Email” }} {{input type=“text” id=“contactEmail” class=“contactInput newTheme input” placeholder=“joe@me.com” value=emailValue required }} <div class=“error”><span class=“error-icon”></span><p>Error: This field is required!</p></div> </div><div class=“label-message-inline-wrapper”> {{<label “contactMessage” “Message” }} {{textarea id=“contactMesage” class=“contactMessage newTheme textarea” }} </div> </div> </fieldset> <div class=“button-wrapper”> {{input type=“button” id=“cancelBtn” class=“cancelBtn newThemeBtn btn primary-btn large-btn cancel-icon” value=“Cancel” action=clearForm role=“button” }} {{input type=“submit” id=“submitBtn” class=“submitBtn newThemeBtn btn primary-btn large-btn submit-icon” value=“Submit” style=“background-color: blue; border: 1px solid #333;” action=submitForm role=“button” }} </div> <div class=“error”><span class=“error-icon”></span><p>Hey you didn’t fill some stuff out!</p></div> <div class=“success”><span class=“success-icon”></span><p>Success! Form sent!</p></div> {{/form}} </div> <script> $(document).ready(function() { $("#submitBtn").click(function() { var name = $("#contactName").val(); var email = $("#contactEmail").val(); if (name == '' || email == '') { alert("Please Fill Required Fields");
  24. 24. {{form class=“contact”}} {{input class=“contactName” placeholder=“Name” value=nameValue required }} {{input class=“contactEmail” placeholder=“email@me.com” value=emailValue required }} {{textarea}} {{button class=“cancelBtn” value=“Cancel” action=clearForm}} {{input class=“submitBtn” value=“Submit” action=submitForm }} {{/form}} <script>
  25. 25. {{form class=“contact”}} {{input class=“contactName” placeholder=“Name” value=nameValue required }} {{input class=“contactEmail” placeholder=“email@me.com” value=emailValue required }} {{textarea}} {{button class=“cancelBtn” value=“Cancel” action=clearForm}} {{input class=“submitBtn” value=“Submit” action=submitForm }} {{/form}} <script> $(”form .submitBtn").click(function() { var name = $(”.contactName").val(); var email = $(“.contactEmail").val(); if (name == '' || email == '') { alert("Please Fill Required Fields"); } else { // send the form } }); functionsAndStuff.js
  26. 26. 1.) Planning, duh
  27. 27. 2.) Scope creep *actual creep
  28. 28. 3.) Define ownership
  29. 29. Knowing the code better == fixing bugs faster
  30. 30. Explain the fix, but let them do it
  31. 31. Kacey Coughlin Web Developer / Designer @kaceykaso

×