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

Scale Down, People Up

Bf47d3b9da3655bf19e815aaa5446d4a?s=47 Jessica
September 06, 2017

Scale Down, People Up

This is a talk I gave at ColdFront in Copenhagen about making the web more approachable for people beyond developers.

Bf47d3b9da3655bf19e815aaa5446d4a?s=128

Jessica

September 06, 2017
Tweet

More Decks by Jessica

Other Decks in Technology

Transcript

  1. Scale Down, People Up Jessica Lord—ColdFront 2017

  2. Jessica Lord @jllord

  3. None
  4. omkring rigtig også ifølge

  5. Scale Down, People Up

  6. Scaling down software development to make it better for more

    humans.
  7. Human Scale

  8. Boston City Hall

  9. None
  10. Boston City Hall

  11. None
  12. None
  13. Jan Gehl

  14. None
  15. Building things for people.

  16. What is human scale software development?

  17. We have a lot of things built for developers.

  18. What’s the problem?

  19. We’re not building for people, we’re building for developers.

  20. Are developers people?

  21. Developers are a subset of people that does not include

    people who will be developers or people who tinker.
  22. The Development Environment

  23. Complexity, newness, rivalries, perfection…

  24. Require time and debugging no matter your tenure in development.

  25. Often require another person. And what about hosting?

  26. Building something and considering all possible people sounds hard.

  27. It is. It’s worth it.

  28. The more people we have contributing to software, the better

    it will be.
  29. Things to care about

  30. Git-it

  31. None
  32. None
  33. HTML files, JSON, npm scripts, CSS, ES5 JS, Electron &

    Node.js
  34. "build-chals": "node lib/build-challenges.js", "build-pages": "node lib/build-pages.js", "build-all": "npm run clean

    && npm run build-chals && npm run build-pages", "pack-mac": "electron-packager . Git-it --platform=darwin --arch=x64 --icon=assets/git-it.icn "pack-lin": "electron-packager . Git-it --platform=linux --arch=x64 --icon=assets/git-it.png "pack-win": "electron-packager . Git-it --platform=win32 --arch=ia32 --icon=assets/git-it.ico }, "repository": { "type": "git", "url": "https://github.com/jlord/git-it-electron.git" }, "author": "Jessica Lord", "license": "BSD-2-Clause", "bugs": { "url": "https://github.com/jlord/git-it-electron/issues" }, "homepage": "https://github.com/jlord/git-it-electron", "devDependencies": { "electron": "^1.4.3", "electron-packager": "^8.0.0", "rimraf": "^2.5.4", "standard": "^5.4.1" }, "dependencies": { "cheerio": "^0.19.0", "glob": "^5.0.5", "handlebars": "^3.0.3", "request": "^2.57.0"
  35. In terminal vs. in Electron

  36. Electron

  37. In the beginning there was atom-shell, hidden amongst Atom’s dependencies.

  38. “Make a scaffolding.”

  39. Electron apps can be anything and why do we want

    beginners to end up with files they didn’t put there and don’t understand?
  40. Electron API App

  41. File structure

  42. Docs

  43. Docs

  44. Docs

  45. Code snippets are the real code. Limited ES6. HTML Imports,

    no frameworks.
  46. Essential Electron

  47. Main section just 2-3 sentences. Jargon replaced with expanded phrasing.

    New concepts and are defined. Links for more information in each section. Graphic added when needed.
  48. None
  49. None
  50. “I'm not a coder/developer…I was able to make a small

    web page for myself on arts management.”
  51. Sheetsee.js

  52. Sheetsee is a really small library for visualizing data from

    spreadsheets.
  53. Sheetsee Maps: 2 methods Sheetsee Tables: 2 methods Sheetsee Core:

    8 helper methods
  54. var mapOptions = { data: data, mapDiv: 'map', geoJSONincludes: ['Name'],

    template: '<p>{{Name}}</p>', cluster: true, hexcolor: '#e91e63' } Sheetsee.loadMap(mapOptions) Sheetsee.createGeoJSON(data, mapOptions)
  55. var tableOptions = { data: data, pagination: 10, tableDiv: "#fullTable",

    filterDiv: "#fullTableFilter", templateID: "fullTable_template" } Sheetsee.makeTable(tableOptions) Sheetsee.initiateTableFilter(tableOptions)
  56. Sheetsee.getKeywordCount(data, keyword) Sheetsee.getKeyword(data, keyword) Sheetsee.getColumnTotal(data, column) Sheetsee.getColumnAverage(data, column) Sheetsee.getMin(data, column)

    Sheetsee.getMax(data, column) Sheetsee.getMatches(data, filter, column) Sheetsee.getOccurance(data, column)
  57. None
  58. None
  59. None
  60. “Can you edit the spreadsheet from the site?”

  61. Great things!

  62. Spreadsheets

  63. Spreadsheets are a database with no setup that almost everyone

    already knows how to use. Incredible!
  64. Hook it up, only interact with spreadsheet, no deploying, every

    visit gets the latest data. Sheetsee and spreadsheets:
  65. Use Google Forms as another layer to make collecting data

    even more approachable.
  66. Glitch

  67. In browser editor Shared editing Node.js server Free hosting Auto

    deployed Remixing
  68. “The way we think of it, everyone’s starting point in

    working with Glitch, or on any coding effort, should be from a working project, which you can then modify to your heart’s content.” Anil Dash
  69. “It seems more important than ever to encourage a diverse

    community of creators to experiment with their broadest set of ideas.” Anil Dash
  70. None
  71. Different ways to document

  72. Una’s talk. Here! Just before now!

  73. Mariko Kosaka @kosamari

  74. Lin Clark @linclark code-cartoons.com

  75. Amy Wibowo @sailorhg bubblesort.io

  76. When you scale down you’re not creating something of less

    value.
  77. When you scale down, for people, you create more potential.

  78. The web can be hackable, unpolished and less complicated.

  79. The web can be approachable, empowering and fun.

  80. Jenn Schiffer at Thunder Plains Rachel White at JSCONF EU

    Keep the Internet Weird Your Grandparents Probably Didn’t have Node Talks
  81. Tak! @jllord—speakerdeck.com/jlord