Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Beauty of Bad Code

The Beauty of Bad Code

Given at Web Rebels in Oslo, Norway, 1-2 June 2017

Raquel Vélez

June 02, 2017
Tweet

More Decks by Raquel Vélez

Other Decks in Programming

Transcript

  1. @rockbot #webrebels 110 /* here's the potential situation: let's say

    111 I'm a hacker and I make a 112 package that does Something Evil™ then I 113 add you as a collaborator `npm 114 adduser isaacs evil-pkg` and then I publish 115 the package and then I remove 116 myself from the package so it looks like YOU 117 are the one who made the 118 package well, that's nasty so we blocked that 119 from showing because 120 hypothetically your friends would be like, 121 hey! this evil-pkg from isaacs 122 looks awesome, let me use it! and then I get 123 all their bank account numbers 124 and get super duper rich and become a VC and 125 create LinkedIn for Cats */
  2. @rockbot #webrebels 1 const tap = require('tap') 2 const urlOf

    = require('./lib/url') 3 4 require('./lib/sharedNemo').then(nemo => { 5 tap.test('User with feature flag gets to the 6 new org creation page', t => { 7 return nemo.driver.get(urlOf('/express')) 8 .then(() => nemo.view.page.h1WaitVisible() 9 ) 10 .then(() => nemo.view.page.h1TextEquals( 11 'express')) 12 }) 13 14 tap.test('quit', () => nemo.driver.quit()) 15 }) npm-website/integration/package-redirect.js
  3. @rockbot #webrebels 1 const tap = require('tap') 2 const urlOf

    = require('./lib/url') 3 4 require('./lib/sharedNemo').then(nemo => { 5 tap.test('User with feature flag gets to the 6 new org creation page', t => { 7 return nemo.driver.get(urlOf('/express')) 8 .then(() => nemo.view.page.h1WaitVisible() 9 ) 10 .then(() => nemo.view.page.h1TextEquals( 11 'express')) 12 }) 13 14 tap.test('quit', () => nemo.driver.quit()) 15 }) npm-website/integration/package-redirect.js
  4. @rockbot #webrebels 1 const tap = require('tap') 2 const urlOf

    = require('./lib/url') 3 4 require('./lib/sharedNemo').then(nemo => { 5 tap.test('User with feature flag gets to the 6 new org creation page', t => { 7 return nemo.driver.get(urlOf('/express')) 8 .then(() => nemo.view.page.h1WaitVisible() 9 ) 10 .then(() => nemo.view.page.h1TextEquals( 11 'express')) 12 }) 13 14 tap.test('quit', () => nemo.driver.quit()) 15 }) npm-website/integration/package-redirect.js
  5. @rockbot #webrebels 1 const tap = require('tap') 2 const urlOf

    = require('./lib/url') 3 4 require('./lib/sharedNemo').then(nemo => { 5 tap.test('User with feature flag gets to the 6 new org creation page', t => { 7 return nemo.driver.get(urlOf('/express')) 8 .then(() => nemo.view.page.h1WaitVisible() 9 ) 10 .then(() => nemo.view.page.h1TextEquals( 11 'express')) 12 }) 13 14 tap.test('quit', () => nemo.driver.quit()) 15 }) npm-website/integration/package-redirect.js
  6. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17 18 request(url, function (err, resp, content) { 19 ... 25 return next(err, marked.parse(content)); 26 }); 27 } 28 }
  7. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17 18 request(url, function (err, resp, content) { 19 ... 25 return next(err, marked.parse(content)); 26 }); 27 } 28 }
  8. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17
  9. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17 system-set
  10. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17 user-set system-set
  11. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17 https://raw.githubusercontent.com/npm/newww/master/policies.md user-set system-set
  12. @rockbot #webrebels 10 function getPage (type) { 11 12 return

    function (name, next) { 13 14 var url = fmt('https://raw. 15 githubusercontent.com/npm/' + 16 type + '/master/%s.md', name); 17 https://raw.githubusercontent.com/npm/newww/master/policies.md https://raw.githubusercontent.com/npm/newww/master/../../ corporate_secrets/all_the_passwords.md user-set system-set
  13. @rockbot #webrebels 9 browse.packagesByKeyword = function(request, 10 reply) { ...

    20 21 Package(request.loggedInUser) 22 .list(options) 23 .then(function(result) { 24 context.items = chunk(result.results, 3); 25 paginate(request, options, result, 26 context); 27 return reply.view('browse/keyword', 28 context); 29 }); 30 }; 31
  14. @rockbot #webrebels 9 browse.packagesByKeyword = function(request, 10 reply) { ...

    20 21 Package(request.loggedInUser) 22 .list(options) 23 .then(function(result) { 24 context.items = chunk(result.results, 3); 25 paginate(request, options, result, 26 context); 27 return reply.view('browse/keyword', 28 context); 29 }).catch(err => reply(err)); 30 }; 31
  15. @rockbot #webrebels 65 const checkCache = getAccess( 66 this.authCacheUrl, 67

    name, 68 pkg, 69 creds.method 70 ).then(reply => { 71 if (reply.status !== 'not-found' || creds.method !== 'PUT') { 72 return reply 73 } 74 return createPackage(this.userAclUrl, this.billingApiUrl, name, 75 pkg, { 76 access: creds.body ? creds.body.access : null, 77 team: creds.team ? creds.body.team : null 78 }).then(() => { 79 // retry the cache! 80 return getAccess( 81 this.authCacheUrl, 82 name, 83 pkg, 84 creds.method 85 ) 86 })
  16. @rockbot #webrebels 65 const checkCache = getAccess( 66 this.authCacheUrl, 67

    name, 68 pkg, 69 creds.method 70 ).then(reply => { 71 if (reply.status !== 'not-found' || creds.method !== 'PUT') { 72 return reply 73 } 74 return createPackage(this.userAclUrl, this.billingApiUrl, name, 75 pkg, { 76 access: creds.body ? creds.body.access : null, 77 team: creds.team ? creds.body.team : null 78 }).then(() => { 79 // retry the cache! 80 return getAccess( 81 this.authCacheUrl, 82 name, 83 pkg, 84 creds.method 85 ) 86 })
  17. @rockbot #webrebels 65 const checkCache = getAccess( 66 this.authCacheUrl, 67

    name, 68 pkg, 69 creds.method 70 ).then(reply => { 71 if (reply.status !== 'not-found' || creds.method !== 'PUT') { 72 return reply 73 } 74 return createPackage(this.userAclUrl, this.billingApiUrl, name, 75 pkg, { 76 access: creds.body ? creds.body.access : null, 77 team: creds.team ? creds.body.team : null 78 }).then(() => { 79 // retry the cache! 80 return getAccess( 81 this.authCacheUrl, 82 name, 83 pkg, 84 creds.method 85 ) 86 })
  18. @rockbot #webrebels 173 function transform (type, arg, data, skip, 174

    limit) { ... 187 // normally has an arg. sort, and then 188 manually paginate. 189 if (!arg && transformKeyArg[type]) { 190 data = data.sort(function (a, b) { 191 return a.value === b.value ? ( 192 a.name === b.name ? 0 : a.name < b.name 193 ? -1 : 1 194 ) : a.value > b.value ? -1 : 1 195 }).slice(skip, skip + limit) 196 } 197 198 return data 199 }
  19. @rockbot #webrebels 173 function transform (type, arg, data, skip, 174

    limit) { ... 187 // normally has an arg. sort, and then 188 manually paginate. 189 if (!arg && transformKeyArg[type]) { 190 data = data.sort(function (a, b) { 191 return a.value === b.value ? ( 192 a.name === b.name ? 0 : a.name < b.name 193 ? -1 : 1 194 ) : a.value > b.value ? -1 : 1 195 }).slice(skip, skip + limit) 196 } 197 198 return data 199 }
  20. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 }
  21. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 } tabs!
  22. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 } tabs! 4 spaces!
  23. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 } tabs! 4 spaces! weird new-lined curly braces!
  24. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 } tabs! 4 spaces! semicolons! weird new-lined curly braces!
  25. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 } tabs! 4 spaces! hanging semicolons! semicolons! weird new-lined curly braces!
  26. @rockbot #webrebels 1 var 2 BORING_EMOJI = require('emoji-list'), 3 FS

    = require('fs'), 4 MARKOV = require('markoff'), 5 MARK = new MARKOV(), 6 SLACK = require('@slack/client'), 7 SLACK_EVENTS = SLACK.CLIENT_EVENTS.RTM, 8 RTM_EVENTS = SLACK.RTM_EVENTS, 9 LOG = console.log 10 ; 11 12 function ISLOUD(MSG) 13 { 14 return MSG !== MSG.toLowerCase() && MSG === 15 MSG.toUpperCase(); 16 } tabs! 4 spaces! hanging semicolons! semicolons! weird new-lined curly braces! STOP
  27. @rockbot #webrebels the beauty and horror of code is you

    get to see how other people think — CJ Silverio (@ceejbot) CTO of npm, Inc
  28. @rockbot #webrebels 999 // ----------------------------------------------------------- 1000 // apply a given

    rotation to all the fingers in the hand 1001 // ----------------------------------------------------------- 1002 function applyRotToAllFingers(fingers, origin_palm, rotAngles) 1003 { 1005 for (var f = 0; f < fingers.length; ++f) 1006 { 1007 var thisFinger = fingers[f]; 1008 1010 for (var p = 0; p < thisFinger.points3D.length; ++p) 1011 { 1013 var vip = RotVectorAboutOrigin(thisFinger.points3D[p], 1014 origin_palm, rotAngles, true); 1015 thisFinger.visPoints[p] = new Vector(vip[0], vip[1], vip[2]); 1016 } 1017 1020 var pt0 = thisFinger.visPoints[1].v; 1021 var pt1 = thisFinger.visPoints[2].v; 1022 vip = [pt1[0] - pt0[0], pt1[1] - pt0[1], pt1[2] - pt0[2]]; 1023 thisFinger.visPoints[1] = new Vector(pt0[0] + vip[0] / 3, pt0[1] 1024 + vip[1] / 3, pt0[2] + vip[2] / 3);
  29. @rockbot #webrebels 999 // ----------------------------------------------------------- 1000 // apply a given

    rotation to all the fingers in the hand 1001 // ----------------------------------------------------------- 1002 function applyRotToAllFingers(fingers, origin_palm, rotAngles) 1003 { 1005 for (var f = 0; f < fingers.length; ++f) 1006 { 1007 var thisFinger = fingers[f]; 1008 1010 for (var p = 0; p < thisFinger.points3D.length; ++p) 1011 { 1013 var vip = RotVectorAboutOrigin(thisFinger.points3D[p], 1014 origin_palm, rotAngles, true); 1015 thisFinger.visPoints[p] = new Vector(vip[0], vip[1], vip[2]); 1016 } 1017 1020 var pt0 = thisFinger.visPoints[1].v; 1021 var pt1 = thisFinger.visPoints[2].v; 1022 vip = [pt1[0] - pt0[0], pt1[1] - pt0[1], pt1[2] - pt0[2]]; 1023 thisFinger.visPoints[1] = new Vector(pt0[0] + vip[0] / 3, pt0[1] 1024 + vip[1] / 3, pt0[2] + vip[2] / 3); lol python-y
  30. @rockbot #webrebels 999 // ----------------------------------------------------------- 1000 // apply a given

    rotation to all the fingers in the hand 1001 // ----------------------------------------------------------- 1002 function applyRotToAllFingers(fingers, origin_palm, rotAngles) 1003 { 1005 for (var f = 0; f < fingers.length; ++f) 1006 { 1007 var thisFinger = fingers[f]; 1008 1010 for (var p = 0; p < thisFinger.points3D.length; ++p) 1011 { 1013 var vip = RotVectorAboutOrigin(thisFinger.points3D[p], 1014 origin_palm, rotAngles, true); 1015 thisFinger.visPoints[p] = new Vector(vip[0], vip[1], vip[2]); 1016 } 1017 1020 var pt0 = thisFinger.visPoints[1].v; 1021 var pt1 = thisFinger.visPoints[2].v; 1022 vip = [pt1[0] - pt0[0], pt1[1] - pt0[1], pt1[2] - pt0[2]]; 1023 thisFinger.visPoints[1] = new Vector(pt0[0] + vip[0] / 3, pt0[1] 1024 + vip[1] / 3, pt0[2] + vip[2] / 3); so C++ lol python-y
  31. @rockbot #webrebels 999 // ----------------------------------------------------------- 1000 // apply a given

    rotation to all the fingers in the hand 1001 // ----------------------------------------------------------- 1002 function applyRotToAllFingers(fingers, origin_palm, rotAngles) 1003 { 1005 for (var f = 0; f < fingers.length; ++f) 1006 { 1007 var thisFinger = fingers[f]; 1008 1010 for (var p = 0; p < thisFinger.points3D.length; ++p) 1011 { 1013 var vip = RotVectorAboutOrigin(thisFinger.points3D[p], 1014 origin_palm, rotAngles, true); 1015 thisFinger.visPoints[p] = new Vector(vip[0], vip[1], vip[2]); 1016 } 1017 1020 var pt0 = thisFinger.visPoints[1].v; 1021 var pt1 = thisFinger.visPoints[2].v; 1022 vip = [pt1[0] - pt0[0], pt1[1] - pt0[1], pt1[2] - pt0[2]]; 1023 thisFinger.visPoints[1] = new Vector(pt0[0] + vip[0] / 3, pt0[1] 1024 + vip[1] / 3, pt0[2] + vip[2] / 3); so C++ too-clever variable name lol python-y
  32. @rockbot #webrebels 999 // ----------------------------------------------------------- 1000 // apply a given

    rotation to all the fingers in the hand 1001 // ----------------------------------------------------------- 1002 function applyRotToAllFingers(fingers, origin_palm, rotAngles) 1003 { 1005 for (var f = 0; f < fingers.length; ++f) 1006 { 1007 var thisFinger = fingers[f]; 1008 1010 for (var p = 0; p < thisFinger.points3D.length; ++p) 1011 { 1013 var vip = RotVectorAboutOrigin(thisFinger.points3D[p], 1014 origin_palm, rotAngles, true); 1015 thisFinger.visPoints[p] = new Vector(vip[0], vip[1], vip[2]); 1016 } 1017 1020 var pt0 = thisFinger.visPoints[1].v; 1021 var pt1 = thisFinger.visPoints[2].v; 1022 vip = [pt1[0] - pt0[0], pt1[1] - pt0[1], pt1[2] - pt0[2]]; 1023 thisFinger.visPoints[1] = new Vector(pt0[0] + vip[0] / 3, pt0[1] 1024 + vip[1] / 3, pt0[2] + vip[2] / 3); context-specific so C++ too-clever variable name lol python-y
  33. @rockbot #webrebels Your code is not a reflection of you.

    It isn’t a reflection of your beliefs, your upbringing, or your ability to be a good person.
  34. @rockbot #webrebels Your code is, however, a reflection of your

    thinking process at the time that you wrote it.
  35. @rockbot #webrebels Given our innate ability to change our minds,

    consider other viewpoints, and play with new ideas, why do we hold our code so dear?
  36. @rockbot #webrebels Your code can change. Your code will change.

    Your code must change, if it’s ever going to get better.
  37. @rockbot #webrebels The sooner you accept this, the happier you

    will be and the better programmer you will become.