Scale Down, People Up

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

Transcript

1. Scale Down, People Up Jessica Lord—ColdFront 2017
2. Jessica Lord @jllord
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
10. Boston City Hall
13. Jan Gehl
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
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.
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)
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
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