### Install and Install pre-commit Hook Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Install pre-commit and register it as a git hook to automatically format code before committing. This ensures code style consistency. ```bash pip install pre-commit pre-commit install ``` -------------------------------- ### C++ Include Guards: Using #pragma once Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Example showing the use of the '#pragma once' directive for include guards in C++ header files, as opposed to traditional include guards. ```cpp #pragma once // code // instead of #ifndef MENU_H #define MENU_H // code #endif ``` -------------------------------- ### C++ Code Style: Capitalization Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Example illustrating C++ style capitalization for variables and functions. Follows standard C++ conventions. ```cpp // Example int myVariable; void myFunction() { // code } ``` -------------------------------- ### C++ Code Style: Blank Lines for Code Blocks Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Example demonstrating the use of blank lines before and after code blocks in C++ for better organization. ```cpp // Example void functionA() { // code } void functionB() { // code } ``` -------------------------------- ### C++ Code Style: Curly Braces Placement Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Example demonstrating the placement of curly braces in C++ code. Opening braces should be on the same line as the statement. ```cpp // Example if (condition) { // code } else { // code } ``` -------------------------------- ### Ineffective Comment Example Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Example of a comment that does not provide additional information beyond what the code itself conveys. Comments should explain the 'why'. ```cpp // increment some values i++; j++; ``` -------------------------------- ### C++ Code Style: Operator Spacing Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Example showing the use of spaces around operators in C++ code for improved readability. ```cpp // Example int sum = a + b; if (x == y) { // code } ``` -------------------------------- ### Format Code Manually with clang-format Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Manually apply code formatting to align with the project's coding standards using the 'format' target. ```bash pio run -t format ``` -------------------------------- ### Vue App Initialization Source: https://github.com/rancilio-pid/clevercoffee/blob/master/frontend/html/parameters.html Initializes the Vue application after the appCreated event is fired or immediately if the app is already created. ```javascript (window.appCreated ? Promise.resolve() : new Promise(resolve => window.addEventListener('appCreated', resolve))) .then(() => vueApp.mount('#content')); ``` -------------------------------- ### Hardware Warning Collapse Event Listeners Source: https://github.com/rancilio-pid/clevercoffee/blob/master/frontend/html/parameters.html Adds event listeners to manage the 'show' and 'hide' states of the hardware warning details collapse element, updating button text and icon accordingly. ```javascript document.addEventListener('DOMContentLoaded', function() { const collapseElement = document.getElementById('hardwareWarningDetails'); if (collapseElement) { collapseElement.addEventListener('show.bs.collapse', function () { const button = document.querySelector('\\[data-bs-target="#hardwareWarningDetails"\\]'); if (button) { button.querySelector('.collapse-toggle-text').textContent = 'Hide Details'; button.querySelector('.fa-chevron-down').classList.replace('fa-chevron-down', 'fa-chevron-up'); } }); collapseElement.addEventListener('hide.bs.collapse', function () { const button = document.querySelector('\\[data-bs-target="#hardwareWarningDetails"\\]'); if (button) { button.querySelector('.collapse-toggle-text').textContent = 'Show Details'; button.querySelector('.fa-chevron-up').classList.replace('fa-chevron-up', 'fa-chevron-down'); } }); } }); ``` -------------------------------- ### Check Code Formatting with clang-format Source: https://github.com/rancilio-pid/clevercoffee/blob/master/CONTRIBUTING.md Manually check if the code adheres to the project's formatting standards using the 'check-format' target. This is also used in the CI pipeline. ```bash pio run -t check-format ``` -------------------------------- ### Conditional JavaScript Module Import Source: https://github.com/rancilio-pid/clevercoffee/blob/master/frontend/html/index.html Conditionally imports the '/js/temp.js' module. The import occurs immediately if the application is already created, otherwise, it waits for the 'appCreated' event. ```javascript if (window.appCreated == true) { import('/js/temp.js?v=1') } else { window.addEventListener('appCreated', () => { import('/js/temp.js?v=1') }) } ``` -------------------------------- ### Custom CSS for Large Form Switches Source: https://github.com/rancilio-pid/clevercoffee/blob/master/frontend/html/index.html Applies custom styling to create larger form switches with specific focus and checked states. This CSS is intended for use with Bootstrap's form switch components. ```css /* Custom CSS for larger form switches */ .form-switch-lg .form-check-input { width: 3rem; height: 1.5rem; } .form-switch-lg .form-check-input:focus { border-color: rgba(13, 110, 253, 0.25); outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } /* Green color for checked switches */ .form-switch-lg .form-check-input:checked { background-color: #198754; border-color: #198754; } .form-switch-lg .form-check-input:checked:focus { border-color: rgba(25, 135, 84, 0.25); box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } ``` -------------------------------- ### Delay App JS Loading Source: https://github.com/rancilio-pid/clevercoffee/blob/master/frontend/html_fragments/header.html This JavaScript snippet delays the loading of the application's JavaScript until the HTML document is fully loaded. This is done to reduce concurrent requests during page load. It hides a fallback warning element once the DOM is ready. ```javascript document.addEventListener("DOMContentLoaded", function(event) { const fb = document.getElementById("fallback-warning"); if (fb) fb.style.display = "none"; }) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.