Week 02 Day 4: Clean Code & Style

<style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Lato:wght@400;700&display=swap'); :root { --red: #bf616a; --orange: #cb6343; --gold: #c3a364; --green: #719155; --blue: #556591; --purple: #85577c; /* Font families */ --header-font: 'Montserrat', sans-serif; --body-font: 'Lato', sans-serif; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--header-font) !important; font-weight: 600 !important; } .reveal p, .reveal ul, .reveal ol, .reveal li { font-family: var(--body-font) !important; } /* Existing color styles */ h1 { color: var(--orange) !important; } /* orange for main headers */ h2 { color: var(--orange) !important; } /* orange for sub headers */ h3 { color: var(--blue) !important; } /* blue for tertiary headers */ .current { color: var(--green); background: rgba(113, 145, 85, 0.1); padding: 10px; border-radius: 5px; font-family: var(--body-font); } /* green for current/success */ .future { color: var(--purple); background: rgba(133, 87, 124, 0.1); padding: 10px; border-radius: 5px; font-family: var(--body-font); } /* gold for future/warning */ .flex-container { display: flex; justify-content: space-between; text-align: left; font-family: var(--body-font); } .flex-item { flex: 1; padding: 0 20px; } .flex-item:not(:first-child) { border-left: 1px solid #ccc; } /* Keep code in monospace */ .reveal pre, .reveal code { font-family: monospace !important; } </style>   # Mid-day Menti 📊  ![MentiMeter](https://hackmd.io/_uploads/rkArSivK1e.png) Note: What's your biggest pet peeve in other people's code? 😱 if(x>0)doSomething(); // where are my braces?! 🤪 private String mYvArIaBlE_naMe; // what is this naming? 🫣 String msg = "This line just keeps going and going and going and never seems to end because someone forgot about line limits"; 😫 void x(int a){a*=2;} // what does this even do? 🫨 public void spaces( ){ } // so much space! 😖 if(true){while(true){System.out.println("help");}} // indent please! 😵‍💫 int x=5;y=x+3;z=y*2; // one line party! 🥴 try{doRisky();}catch(Exception e){} // empty catch = sad 🫠 if(x==5){return;}else{return;} // unnecessary complexity 🤯 private int THIS_IS_NOT_A_CONSTANT = 42; // capitals are for constants! These examples: 1. Let students vent about code style issues they've encountered 2. Naturally lead into discussing why these issues matter 3. Foreshadow the full set of style rules they'll learn 4. Create engagement through relatable frustrations 5. Use emojis to keep it fun and memorable ---  # Clean Code ### Why Style Matters 🧹 Note: Welcome to our discussion about clean code and why style really matters in programming! ---  ## <span style="color: #cb6343;">Code is Read More Than Written</span> <div class="fragment fade-up">- You spend 10x more time reading code than writing it</div> <div class="fragment fade-up">- Future you will thank present you</div> <div class="fragment fade-up">- Other developers need to understand your code</div> <div class="fragment fade-up">- Even AI tools work better with clean code!</div> Note: - Emphasize that they'll read their own code later - Point out that most professional code is team-based ---  ## What Makes Code "Clean"? 🤔 <div class="fragment fade-right">- Consistent formatting</div> <div class="fragment fade-right">- Meaningful names</div> <div class="fragment fade-right">- Clear organization</div> <div class="fragment fade-right">- Good documentation</div> <div class="fragment fade-right">- Follows standards</div> Note: Just like good writing follows grammar rules ---  ## Meet Checkstyle! ✨ <div class="fragment"> Your new best friend for: - Catching style issues early - Learning Java best practices - Maintaining consistency - Building good habits </div> Note: - Jam02 helps them set up Checkstyle - Point out that many companies use similar tools ---  ## Understanding Severity Levels <div style="display: flex; justify-content: space-between; text-align: left;"> <div class="fragment fade-right" style="flex: 1;"> <h3>🔴 ERROR</h3> <p style="font-size: 0.9em;"><strong>Must fix!</strong></p> <ul style="font-size: 0.8em; margin-top: -10px;"> <li>Wrong file name</li> <li>Missing braces</li> <li>Invalid package names</li> </ul> </div> <div class="fragment fade-right" style="flex: 1; border-left: 1px solid #ccc; padding-left: 20px;"> <h3>🟡 WARNING</h3> <p style="font-size: 0.9em;"><strong>Should fix</strong></p> <ul style="font-size: 0.8em; margin-top: -10px;"> <li>Variable naming</li> <li>Indentation</li> <li>Brace placement</li> </ul> </div> <div class="fragment fade-right" style="flex: 1; border-left: 1px solid #ccc; padding-left: 20px;"> <h3>🔵 INFO</h3> <p style="font-size: 0.9em;"><strong>Good to fix</strong></p> <ul style="font-size: 0.8em; margin-top: -10px;"> <li>Line length</li> <li>Whitespace</li> <li>Tabs vs spaces</li> </ul> </div> </div> Note: Think of these like traffic lights - red means stop and fix it now! ---  ## Important Note About Errors 🎯 <h3 class="fragment fade-up">The Setting You Changed in Jam02:</h3> <div class="fragment fade-up" style="font-size: 0.9em; margin: -5px 0 10px 0;"> "Treat Checkstyle errors as warnings" → All issues appear yellow in IntelliJ </div> <h3 class="fragment fade-up" style="margin-top: 10px;">Why Yellow Instead of Red?</h3> <ul class="fragment fade-up" style="font-size: 0.9em; margin-top: -5px;"> <li>Learn style without getting blocked by compilation</li> <li>Focus on code first, then improve style</li> <li>🚨 But remember: They're still errors even if they look yellow!</li> </ul> Note: - In Jam02, you configured "Treat Checkstyle errors as warnings" - This is temporary to help you learn the tools - Use this week to practice and get comfortable - Yellow appearance doesn't change severity level ---  ## Let's Spot Some Issues! 🔍 Here's some code we found in the wild: ```java [1-6|2-2|4|5] class data{ private String s;int n; public void Calc(String INPUT,int X){ if(INPUT.length()>0)s=INPUT; if(X>0)n=X; }} ``` Note: - Ask students what style issues they see - Point out naming, spacing, braces - This builds on their Checkstyle experience ---  ## Now That's Better! ✨ Here's the same code, following our style rules: ```java [1-13|2-3|6-8|9-11] class Data { private String description; private int count; public void calculate(String input, int value) { if (input.length() > 0) { description = input; } if (value > 0) { count = value; } } } ``` Note: - Walk through each improvement - Connect back to severity levels - Show how readability improved dramatically --- ## IntelliJ Helps! 🛠️ - Auto-format (⌘⌥L / Ctrl+Alt+L) - Fixes indentation - Fixes whitespace - Fixes brace placement - Severity indicators - 🔴 Red: Errors - 🟡 Yellow: Warnings - 🔵 Gray: Info Note: Let your IDE help you write clean code! ---  ## This Week's Challenge 💪 <div class="fragment current"> This Week (All Bonus!): - Fix any Checkstyle issues you find - Start building good habits - Practice with IntelliJ's tools </div> <div class="fragment future"> Next Week: - 🔴 ERRORs will be required - 🟡 WARNINGs & 🔵 INFOs stay bonus - Eventually all will become a part of your grade </div> Note: - Emphasize that this week is for learning - Show how to use IntelliJ's formatting tools - Demonstrate checking Checkstyle results --- ## Why These Standards? 🤔 <div class="fragment fade-up"> <h3>Google's Style Guide</h3> - Used across all Google's Java projects - Required for Android development - Over 2 billion lines of code! </div> <div class="fragment fade-up"> <h3>Why Google Cares</h3> - 25,000+ developers - 40,000+ code changes per day - Clean code = Faster development </div> Note: - Our Checkstyle is based on Google's style guide - Android's source code follows these rules - Most major tech companies have similar standards --- ## Key Takeaways 🎯 1. Style matters as much as functionality 2. Focus on fixing ERRORs first 3. Use IntelliJ's tools 4. Build good habits early 5. Clean code = Professional code ---  # Questions? 🤔 Note: - Ask if anyone has tried Checkstyle yet - See if there are any confusing error messages - Check if IDE setup worked for everyone --- ## Resources - Course Checkstyle Configuration - IntelliJ Shortcuts Guide - Clean Code by Robert Martin - Google Java Style Guide ---  # Course Schedule ## 📅 <div style="display: flex; justify-content: center; align-items: center; min-height: 350px;"> <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQKLFtWY5ICMBgFPkwhYFfY4f0xofHDTn_8G866v_AvbrllWZZLoDtzI-FZgMyHn8en9fs6MeOwW2WJ/pubhtml?single=true&gid=505611070&widget=false&chrome=false&headers=false&range=A1:G10&center=true" width="620" height="350" frameborder="0"></iframe> </div> Note: Review upcoming deadlines and next week's topics