A presentation at Serverless Days London in in London, UK by Sarah Drasner
Which is clean? A B for (var i = 1; i <= 100; i++”) { var f = i % 3 ===$$ 0, b = i % 5 ===$$ 0; console.log(f ? b ? “FizzBuzz” : “Fizz” : b ? “Buzz” : i) } console.log( Array.apply(null, { length: 100 }).map((val, index) =>& { index++” if (index % 15 ===$$ 0) { return “FizzBuzz” } if (index % 3 ===$$ 0) { return “Fizz” } if (index % 5 ===$$ 0) { return “Buzz” } return index }).join(‘\n’) ); @sarah_edo
Which is clean? A function fibonacci(n) { return n < 1 ? 0 : n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2); } B const fibonacci = (n) =>& { return (n <= 1) ? n : fibonacci(n - 1) + fibonacci(n - 2); } @sarah_edo
What does this do? function() { var check = false; (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine| fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob| in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)| vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp| 50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)| as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/| capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o| ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|)|g1 u|g560|gene|gf-5| g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| ||a|g|p|s| t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro| jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw| lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do| t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-| on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil| pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600| raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)| sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18| 50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1| si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)| w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true }); return check; } @sarah_edo
“ YO U D O N’T NEED C O MMENTS IF YOU WRITE CLEAN CODE ”
@sarah_edo
Code can describe how, but it cannot explain why.
THE ART OF C O MMENTS
SARAH DRASNER @SARAH_EDO
THE GOOD
W H AT I S T H E W H Y @sarah_edo
W H AT I S T H E W H Y /*” */$ We had to write this function because the browser interprets that everything is a box @sarah_edo
@sarah_edo
C L A R I F Y W H AT ’ S N O T T Y P I C A L LY L E G I B L E B Y H U M A N S // is Firefox, versions 2-3 /a/[-1]==(‘a’; // targets Chrome ≤ 28, Safari ≤ 7, Opera ≥ 14 .selector { [;property: value;]; } @sarah_edo
WHO’S SMART? WE ARE! WHO WRITES CLEAN CODE? WE DO! @sarah_edo
C O MMENTS CAN BE LIKE CHAPTERS OF A BOOK // GEOMETRY geometry.addAttribute(“customColor”, new THREE.BufferAttribute(colors, 3)); geometry.addAttribute( “displacement”, new THREE.BufferAttribute(displacement, 3) ); // SHADER MATERIALS uniforms = { amplitude: { value: 0.0 } }; const shaderMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById(“vertexshader”).textContent, fragmentShader: document.getElementById(“fragmentshader”).textContent }); @sarah_edo
A G U I D E TO KE E P T H E LO G I C STRAIGHT WHILE WRITING THE CODE // // // // get the request from the server give us an error if it failed do x thing with that request format the data like so @sarah_edo
A G U I D E TO KE E P T H E LO G I C STRAIGHT WHILE WRITING THE CODE // // // // get the request from the server give us an error if it failed do x thing with that request format the data like so @sarah_edo
T H I S I S O K T O R E FA C T O R // this isn’t my best work, // but we had to get it in by the deadline @sarah_edo
COMMENTING AS A TEAC HING TO O L //the data comes from the other hook export function logolettering(data) { useMounted(function () { //this is the width that we stored in data from the previous hook if (data.data.width > 1200) { // we can use refs if they are called in the useMounted hook const logoname = this.$refs.logoname; Splitting({ target: logoname, by: “chars” }); … } }) } What hooks mean for Vue @sarah_edo
@sarah_edo
I S TA C K O V E R F L O W E D THE BEJEEZUS OUT OF THIS /** Webpack ! amirite? this is mostly copied from the answer below: https://stackoverflow.com/questions/26203725/how-to-allow-forwebpack-dev-server-to-allow-entry-points-from-react-router */, @sarah_edo
I S TA C K O V E R F L O W E D THE BEJEEZUS OUT OF THIS /** Webpack ! amirite? this is mostly copied from the answer below: https://stackoverflow.com/questions/26203725/how-to-allow-forwebpack-dev-server-to-allow-entry-points-from-react-router */, @sarah_edo
C O MMENTS CAN BE HELPFUL IT’S TIME TO RETIRE “RTFM” https://bit.ly/2LmTmke April Wensel, Compassionate Coding @sarah_edo
@sarah_edo
THE BAD
T H E Y J U S T S AY W H AT IT’S ALREADY DOING // if foo equals bar … if (foo ===$$ bar) { } // end if @sarah_edo
IT WASN’T WELL M A I N TA I N E D The comment is in your code. It’s your job to work on it, even if it means deleting it. @sarah_edo
IT WASN’T WELL M A I N TA I N E D /*” */$ we need to use the FLIP technique to be more performant in every browser @sarah_edo
HOARDERS, BU T FOR CODE created() { window.addEventListener(‘scroll’, () =>& { this.bottom = this.bottomVisible() }) //this.removeExtraItem() this.addItemsFromCart() }, @sarah_edo
Y O U C O U L D H AV E U S E D A BETTER NAME function makeText(p, g) { g.computeBoundingBox(); g.userData = {}; let let let let aX = g.userData.size.w * -p.a.x; aY = g.userData.size.h * -p.a.y; aZ = g.userData.size.d * -p.a.z; matrix = new THREE.Matrix4().makeTranslation(aX, aY, aZ); g.applyMatrix(matrix); return g; } @sarah_edo
Y O U C O U L D H AV E U S E D A BETTER NAME function generateTextGeometry(params, geometry) { geometry.computeBoundingBox(); geometry.userData = {}; let let let let anchorX = geometry.userData.size.width * -params.anchor.x; anchorY = geometry.userData.size.height * -params.anchor.y; anchorZ = geometry.userData.size.depth * -params.anchor.z; matrix = new THREE.Matrix4().makeTranslation(anchorX, anchorY, anchorZ); geometry.applyMatrix(matrix); return geometry; } @sarah_edo
@sarah_edo
THE C O MMENTS ARE AN EXC U SE FOR NOT WRITING THE C O D E BE T TER TO BEG IN WITH @sarah_edo
@sarah_edo
Do your best! 💪 What would a younger you need? @sarah_edo
30% WRITING CODE 70% READING CODE Kyle Simpson, @getify @sarah_edo
Learned from @stacykvernmo @sarah_edo
@sarah_edo
// When I wrote this, // only God and I understood what I was doing // Now, God only knows @sarah_edo
/** I dedicate all this code, all my work, to my wife, Darlene, who will have to support me and our three children and the dog once it gets released into the public. */, @sarah_edo
// drunk, fix later @sarah_edo
// <1st dev>Images are deleted by GDIPlus // ——————————————-// <2nd dev>: Well I’m not sure about that @sarah_edo
// somedev1- 6/7/02 Adding temporary tracking of login screen // somedev2- 5/22/07 Temporary my ass @sarah_edo
@sarah_edo
Thank you! @sarah_edo @sarah_edo
Here’s what was said about this presentation on social media.
for free. You
can too.