Civic hacking: build your cred while doing good
Transcript of Civic hacking: build your cred while doing good
![Page 1: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/1.jpg)
Civic hacking:Build your cred while doing good
@fureigh
![Page 2: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/2.jpg)
Hi, I’m Fureigh!
@fureigh
![Page 3: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/3.jpg)
18F is a digital consultancy for the U.S. government, inside the U.S. government.
WHAT?
@fureigh
![Page 4: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/4.jpg)
Just start.MVP.Learn and iterate.
Delivery is the strategy.
![Page 5: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/5.jpg)
180+ people45% DC55% everywhere else
![Page 6: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/6.jpg)
Making an impact while building your open source portfolio
@fureigh
![Page 7: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/7.jpg)
Why contribute to open source?
@fureigh
![Page 8: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/8.jpg)
● Share your work and express yourself.
● Develop new skills.
● Build community, learn from others.
● Build your portfolio.
● Some of us just like to be helpful.
@fureigh
![Page 9: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/9.jpg)
And why civic tech?
@fureigh
![Page 10: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/10.jpg)
IMPACT
@fureigh
![Page 11: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/11.jpg)
@fureigh
![Page 12: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/12.jpg)
@fureigh
![Page 13: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/13.jpg)
@fureigh
![Page 14: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/14.jpg)
@fureigh
![Page 15: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/15.jpg)
community-minded
@fureigh
![Page 16: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/16.jpg)
You are uniquely qualified.
@fureigh
![Page 17: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/17.jpg)
Okay, but also...
@fureigh
![Page 18: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/18.jpg)
@fureigh
![Page 19: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/19.jpg)
@fureigh
![Page 20: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/20.jpg)
Open source is your friend
@fureigh
![Page 21: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/21.jpg)
There’s aworld out there
@fureigh
![Page 22: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/22.jpg)
This is 18F!
![Page 23: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/23.jpg)
We are 18F!
![Page 24: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/24.jpg)
We are 18F!
![Page 25: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/25.jpg)
And many cities and states.
@fureigh
![Page 26: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/26.jpg)
There’s alsoCode for America.
@fureigh
![Page 27: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/27.jpg)
ex: Adopt-a-Hydrant
@fureigh
![Page 28: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/28.jpg)
So how do you find these people?
@fureigh
![Page 29: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/29.jpg)
@fureigh
![Page 30: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/30.jpg)
Meetups (find one or start one)
@fureigh
![Page 31: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/31.jpg)
![Page 32: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/32.jpg)
![Page 33: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/33.jpg)
![Page 34: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/34.jpg)
Civic Tech Issue Findercodeforamerica.org/geeks/civicissues
@fureigh
![Page 35: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/35.jpg)
@fureigh
![Page 36: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/36.jpg)
@fureigh
![Page 37: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/37.jpg)
@fureigh
![Page 38: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/38.jpg)
@fureigh
![Page 39: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/39.jpg)
I can haz issue?
@fureigh
![Page 40: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/40.jpg)
![Page 41: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/41.jpg)
@fureigh
![Page 42: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/42.jpg)
Code contributions are not the only contributions.
@fureigh
![Page 43: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/43.jpg)
![Page 44: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/44.jpg)
![Page 45: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/45.jpg)
Back to finding issues.
@fureigh
![Page 46: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/46.jpg)
![Page 47: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/47.jpg)
Cloud.govAnalytics.USA.govCollege ScorecardEvery Kid in a ParkIdentity Managementbeta.FEC.gov + FEC’s first API
Some 18F projects
![Page 48: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/48.jpg)
So many technical options!
![Page 49: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/49.jpg)
The U.S. Web Design Standards
PART ZERO
![Page 50: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/50.jpg)
We're designing for 320 million peopleThe population of the United States
![Page 51: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/51.jpg)
This is Joanne.
![Page 52: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/52.jpg)
![Page 53: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/53.jpg)
![Page 54: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/54.jpg)
1/ But wait — there’s more
PART ONE
![Page 55: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/55.jpg)
1 2 3
$86 billion
is spent a year on federal IT projects
94%
of federal IT projects are over budget and behind schedule
Just to show how this scales...Why this matters
40%
of them never see the light of day — they’re scrapped or abandoned
![Page 56: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/56.jpg)
2/ Why it’s like this
PART TWO
![Page 57: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/57.jpg)
Buying IT is not the same as buying pencils and tanks.
Our work happens in silos.
Bureaucracy over human needs.
Forced to comply with outdated regulations.
![Page 58: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/58.jpg)
It became clear that if we wanted to help Joanne, we had to help the people making these digital services.
![Page 59: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/59.jpg)
1 2 3
The question in front of us became:
Is it possible to create a shared set of tools to provide consistent, effective, and easy-to-use government websites?
Could we build easy-to-use tools that serve the public’s need?
We think this is possible.
![Page 60: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/60.jpg)
Here are the principles that guided us:
Flexible: Create a design system for wide use across agencies and brands
Accessible: They must work for everybody, regardless of abilities
Reusable: Save time and money – there’s no need to reinvent the wheel
Open source: Increase knowledge, shared understanding, and practices across projects
![Page 61: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/61.jpg)
A consistent look and feel with common design elements will feel familiar, trustworthy, and secure.
![Page 62: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/62.jpg)
![Page 63: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/63.jpg)
![Page 64: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/64.jpg)
![Page 65: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/65.jpg)
We built the Standards to be lightweight
● Just HTML, CSS, and JavaScript● Sass preprocessor language
○ Sass add-ons (thoughtbot’s Bourbon and Neat)● Component-based design
![Page 66: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/66.jpg)
3/ Accessibility
PART THREE
![Page 67: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/67.jpg)
Accessible out of the box
● Start with HTML5 with ARIA
● Testing Section 508 features
● Developed with WCAG 2.0 AA in mind
![Page 68: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/68.jpg)
4/ In the wild
PART FOUR
![Page 69: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/69.jpg)
![Page 70: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/70.jpg)
![Page 71: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/71.jpg)
![Page 72: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/72.jpg)
![Page 73: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/73.jpg)
![Page 74: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/74.jpg)
![Page 75: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/75.jpg)
![Page 76: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/76.jpg)
“I like the clean format. I like that it shows me all the things I need to fill out all at once. I can read it fine. Sometimes I need my reading glasses because of the colors, but this is good because it's got sharp contrast.”
![Page 77: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/77.jpg)
Good civic design is about accessIt means that people can get the right help, sooner, with less stress.
![Page 78: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/78.jpg)
![Page 79: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/79.jpg)
5/ Open source from day one
PART FIVE
![Page 80: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/80.jpg)
We <3 our contributors
![Page 81: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/81.jpg)
![Page 82: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/82.jpg)
What if I want to work on something else?
@fureigh
![Page 83: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/83.jpg)
Start your own band.
@fureigh
![Page 84: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/84.jpg)
@fureigh
![Page 85: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/85.jpg)
18F.gsa.govjoin.18F.gov
@fureigh
![Page 86: Civic hacking: build your cred while doing good](https://reader031.fdocuments.in/reader031/viewer/2022032108/58a43f241a28ab41618b5895/html5/thumbnails/86.jpg)
codeforamerica.org/geeks/civicissues
github.com/18F/web-design-standards/issues
github.com/18F
@fureigh