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

1. Declare Bankruptcy on
Technical Debt!
How to win friends and influence people
A talk by Kacey Coughlin

3. 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?

5. 1. A metaphor created to help explain issues with
non-technical people

6. 2. Refers to the eventual consequences of any
system/program.

7. 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.

8. When there is a change in the codebase, it often
necessitates other coordinated changes elsewhere in the
codebase, as well as documentation.

9. As a system or program is modified, its complexity
increases, as well as its entropy.
Unaddressed tech debt leads to software entropy.

10. 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.

11. "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

14. 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.

15. <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>

16. <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>

17. <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>

18. {{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>

19. {{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>

20. <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>

21. 1. Lack of knowledge

22. 2. Lack of process

23. 3. Lack of testing

24. 4. Lack of standards

25. 5. Delaying Code Refactoring

29. Is this code still necessary?

32. <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");

33. {{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>

34. {{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

39. 1.) Planning, duh

40. 2.) Scope creep
*actual creep

41. 3.) Define ownership

42. Knowing the code better == fixing bugs faster

43. Explain the fix, but let them do it

46. Kacey Coughlin
Web Developer / Designer
@kaceykaso