| // functions take parameters in any order and set defaults | |
| const greetPerson = ({first = 'Saw', last = 'Gerrera'}) => `Hello ${first}! Sorry, I meant Dr. ${last}`; | |
| // objects or properties can be built however | |
| const person = { | |
| first: 'Cassian', | |
| last: 'Andor', | |
| birthday: '04/04', | |
| age: '23', | |
| position: 'Pilot' |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>JS + CSS Clock</title> | |
| </head> | |
| <body> | |
| <div class="clock"> | |
| <div class="clock-face"> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>JS + CSS Clock</title> | |
| </head> | |
| <body> | |
| <div class="clock"> | |
| <div class="clock-face"> |
| const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; | |
| const list = document.querySelector('.suggestions'); | |
| const input = document.querySelector('.search'); | |
| const populateList = data => { | |
| const html = data.reduce((acc, item) => { | |
| acc = `${acc} | |
| <li> | |
| <span class="name">${item.city}, ${item.state}</span> |
| // ## Array Cardio Day 2 | |
| const people = [ | |
| { name: 'Wes', year: 1988 }, | |
| { name: 'Kait', year: 1986 }, | |
| { name: 'Irv', year: 1970 }, | |
| { name: 'Lux', year: 2015 } | |
| ]; | |
| const comments = [ |
| const inputs = Array.from(document.querySelectorAll('input')); | |
| inputs.forEach(input => input.addEventListener('click', handleClick)); | |
| function clickBetween(first, last) { | |
| const direction = first < last ? 1 : -1; | |
| let index = first; | |
| while (index !== last) { | |
| index += direction; | |
| inputs[index].checked = true; |
| const customers = [{ | |
| name: 'Billy', | |
| age: 32, | |
| averageOrderValue: '$34.38' | |
| }, { | |
| name: 'Mike', | |
| age: 23, | |
| averageOrderValue: '$300.38' | |
| }, { | |
| name: 'Zac', |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>unpkg-demos :: global-react</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="https://unpkg.com/react@16.0.0-beta.2/umd/react.production.min.js" | |
| integrity="sha384-lJJbYsDe7wDuOttI/MIHfj68o3fVZOhJDxEn0cTPbDq5mkzjF1p+AFEp3r/HpUnt" |
| { | |
| "editor.fontSize": 16, | |
| "editor.tabSize": 2, | |
| "editor.renderWhitespace": "boundary", | |
| "editor.minimap.enabled": false, | |
| "editor.cursorStyle": "block", | |
| "editor.snippetSuggestions": "top", | |
| "editor.renderIndentGuides": true, | |
| "editor.cursorBlinking": "smooth", | |
| "editor.insertSpaces": true, |
from the book "A Philosophy of Software Design"
High complexity code causes change amplification, high cognitive load, and more unknown unknowns, when working with a codebase. These are costly and plunge engineers into a kind of sadistic coding hell.
Complexity is caused by dependencies and obscurity. Code is obscure when information required to work with the code is not provided.
Complexity is most often incremental, it sneaks up on the best of us.