Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
BayCHI 5/11/2010 Greasemonkey Intro
1. You Will Need:
• Firefox: firefox.com
• Firebug: getfirebug.com
• Greasemonkey: greasespot.net
• Resources here:
kentbrewster.com/baychi
2. Stone Knives, Bear Skins, and
Greasemonkey:
Tools for Tearing Down the Walls
between Engineering and Design
Kent Brewster
http://kentbrewster.com
@kentbrew, most places
http://kentbrewster.com/baychi
3. But first, it's time to
play America's favorite
game show....
http://kentbrewster.com/baychi
9. About Me
• No formal education in computer science.
http://kentbrewster.com/baychi
10. About Me
• No formal education in computer science.
• No degree of any sort, actually.
http://kentbrewster.com/baychi
11. About Me
• No formal education in computer science.
• No degree of any sort, actually.
• Got my start programming in BASIC on a
TRS-80 in 1977.
http://kentbrewster.com/baychi
12. About Me
• No formal education in computer science.
• No degree of any sort, actually.
• Got my start programming in BASIC on a
TRS-80 in 1977.
• Prototyped the Yahoo! front page in 2008.
http://kentbrewster.com/baychi
13. About Me
• No formal education in computer science.
• No degree of any sort, actually.
• Got my start programming in BASIC on a
TRS-80 in 1977.
• Prototyped the Yahoo! front page in 2008.
• Living proof that just about anybody can do
this stuff.
http://kentbrewster.com/baychi
14. About Me and Netflix
http://kentbrewster.com/baychi
15. About Me and Netflix
• None of what I'm about to show is official
content or opinion, nor will I address
questions about Netflix. That said....
http://kentbrewster.com/baychi
16. About Me and Netflix
• None of what I'm about to show is official
content or opinion, nor will I address
questions about Netflix. That said....
• Yeah, it's awesome. If you want to know
more, visit netflix.com/jobs
http://kentbrewster.com/baychi
17. About Me and Netflix
• None of what I'm about to show is official
content or opinion, nor will I address
questions about Netflix. That said....
• Yeah, it's awesome. If you want to know
more, visit netflix.com/jobs
• Do watch that 128-slide corporate culture
presentation. They are dead serious about
every single page.
http://kentbrewster.com/baychi
19. About the Code
• Not great JavaScript examples.
http://kentbrewster.com/baychi
20. About the Code
• Not great JavaScript examples.
• Not great Greasemonkey examples, either.
http://kentbrewster.com/baychi
21. About the Code
• Not great JavaScript examples.
• Not great Greasemonkey examples, either.
• They don't have to be great.
http://kentbrewster.com/baychi
22. About the Code
• Not great JavaScript examples.
• Not great Greasemonkey examples, either.
• They don't have to be great.
• All they have to do is run once, for the
right person.
http://kentbrewster.com/baychi
23. What We Already
Know About
Prototyping
http://kentbrewster.com/baychi
24. What We Already
Know About
Prototyping
• Working prototypes work best.
http://kentbrewster.com/baychi
25. What We Already
Know About
Prototyping
• Working prototypes work best.
• It's very hard to get the experience right.
http://kentbrewster.com/baychi
26. What We Already
Know About
Prototyping
• Working prototypes work best.
• It's very hard to get the experience right.
• It's expensive. Really, really expensive.
http://kentbrewster.com/baychi
27. What We Already
Know About
Prototyping
• Working prototypes work best.
• It's very hard to get the experience right.
• It's expensive. Really, really expensive.
• You throw it away when you're done.
http://kentbrewster.com/baychi
29. About Engineers
• They already know why what you're asking
for is impossible, and are already frustrated
that you're not listening to them when they
explain why. (Yes, they already know
everything. That's why they are engineers.)
http://kentbrewster.com/baychi
30. About Engineers
• They already know why what you're asking
for is impossible, and are already frustrated
that you're not listening to them when they
explain why. (Yes, they already know
everything. That's why they are engineers.)
• If they build prototypes for too long, it will
make them crazy. They will burn out and
go someplace their work lasts longer and is
seen by more people.
http://kentbrewster.com/baychi
32. How Designers
See Engineers
• Flinchy.
http://kentbrewster.com/baychi
33. How Designers
See Engineers
• Flinchy.
• Hypersensitive to deadlines.
http://kentbrewster.com/baychi
34. How Designers
See Engineers
• Flinchy.
• Hypersensitive to deadlines.
• Full of reasons why it cannot be done.
http://kentbrewster.com/baychi
35. How Designers
See Engineers
• Flinchy.
• Hypersensitive to deadlines.
• Full of reasons why it cannot be done.
• Full of reasons why it should not be done.
http://kentbrewster.com/baychi
36. How Engineers
See Designers
http://kentbrewster.com/baychi
37. How Engineers
See Designers
• Flighty.
http://kentbrewster.com/baychi
38. How Engineers
See Designers
• Flighty.
• Unable to understand the concept that
time continues to progress at the rate of
one second per second, no matter what.
http://kentbrewster.com/baychi
39. How Engineers
See Designers
• Flighty.
• Unable to understand the concept that
time continues to progress at the rate of
one second per second, no matter what.
• Full of reasons why it has to be done even
though it cannot (and should not, dammit!)
be done.
http://kentbrewster.com/baychi
41. Tearing Down the Wall
• Involve your engineers early.
http://kentbrewster.com/baychi
42. Tearing Down the Wall
• Involve your engineers early.
• Ask for help before the important choices
have already been made.
http://kentbrewster.com/baychi
43. Tearing Down the Wall
• Involve your engineers early.
• Ask for help before the important choices
have already been made.
• Please don't ask for the logo to spin and be
on fire.
http://kentbrewster.com/baychi
44. Tearing Down the Wall
• Involve your engineers early.
• Ask for help before the important choices
have already been made.
• Please don't ask for the logo to spin and be
on fire.
• Other non-starters: IE6 support for
rounded corners, drop shadows, and PNG
transparency. Don't even go there.
http://kentbrewster.com/baychi
45. Plan B: Do It Yourself
http://kentbrewster.com/baychi
46. Plan B: Do It Yourself
• If what you are looking for is an
incremental change, try building it.
http://kentbrewster.com/baychi
47. Plan B: Do It Yourself
• If what you are looking for is an
incremental change, try building it.
• It will work well enough to show to your
boss, or to a user test group.
http://kentbrewster.com/baychi
48. Plan B: Do It Yourself
• If what you are looking for is an
incremental change, try building it.
• It will work well enough to show to your
boss, or to a user test group.
• When you show it to an engineer, she will
be impressed with your commitment and
initiative, and much more likely to want to
help out when the project gets real.
http://kentbrewster.com/baychi
50. Strategy
• Bring up the page in your browser.
• After it renders, make changes to the
structure, presentation, and behavior.
• Do this by injecting JavaScript into the
browser.
• For best results, do this automatically
when the page loads.
http://kentbrewster.com/baychi
53. JavaScript Injection
• from the console:
javascript:alert('ding');
• with a toolbar bookmarklet
http://kentbrewster.com/baychi
54. JavaScript Injection
• from the console:
javascript:alert('ding');
• with a toolbar bookmarklet
• with a scripting tool, such as Greasemonkey
http://kentbrewster.com/baychi
57. Toolbar Bookmarklets
• limited in size (~2000 characters)
• tricky to set up for installation
http://kentbrewster.com/baychi
58. Toolbar Bookmarklets
• limited in size (~2000 characters)
• tricky to set up for installation
• hard to debug
http://kentbrewster.com/baychi
59. Toolbar Bookmarklets
• limited in size (~2000 characters)
• tricky to set up for installation
• hard to debug
• very powerful: can include foreign scripts
http://kentbrewster.com/baychi
60. Toolbar Bookmarklets
• limited in size (~2000 characters)
• tricky to set up for installation
• hard to debug
• very powerful: can include foreign scripts
• have to be installed, managed, and manually
clicked with every page load
http://kentbrewster.com/baychi
63. Greasemonkey Scripts
• Do exactly what toolbar bookmarklets do:
modify the page after it's loaded.
http://kentbrewster.com/baychi
64. Greasemonkey Scripts
• Do exactly what toolbar bookmarklets do:
modify the page after it's loaded.
• Can be much more complex; have local
storage and a robust API.
http://kentbrewster.com/baychi
65. Greasemonkey Scripts
• Do exactly what toolbar bookmarklets do:
modify the page after it's loaded.
• Can be much more complex; have local
storage and a robust API.
• Have a much better development
environment, right there in Firefox.
http://kentbrewster.com/baychi
66. Greasemonkey Scripts
• Do exactly what toolbar bookmarklets do:
modify the page after it's loaded.
• Can be much more complex; have local
storage and a robust API.
• Have a much better development
environment, right there in Firefox.
• Work automatically, with every page load.
http://kentbrewster.com/baychi
69. Fixing Your Editor
• Enter about:config
• Reassure Firefox that you know what
you're doing.
http://kentbrewster.com/baychi
70. Fixing Your Editor
• Enter about:config
• Reassure Firefox that you know what
you're doing.
• Enter greasemonkey in Filter.
http://kentbrewster.com/baychi
71. Fixing Your Editor
• Enter about:config
• Reassure Firefox that you know what
you're doing.
• Enter greasemonkey in Filter.
• Click greasemonkey.editor and pick
your favored editor. I'll be using TextMate
tonight.
http://kentbrewster.com/baychi
74. Load Your Script
• Go back to kentbrewster.com/baychi
• Make sure Greasemonkey is running. (You
should see a smiling brown monkey, not a
constipated-looking gray monkey).
75. Load Your Script
• Go back to kentbrewster.com/baychi
• Make sure Greasemonkey is running. (You
should see a smiling brown monkey, not a
constipated-looking gray monkey).
• Click the view raw link at the bottom of
the page after the script listing, and then
Install in the Greasemonkey add box.
76. Load Your Script
• Go back to kentbrewster.com/baychi
• Make sure Greasemonkey is running. (You
should see a smiling brown monkey, not a
constipated-looking gray monkey).
• Click the view raw link at the bottom of
the page after the script listing, and then
Install in the Greasemonkey add box.
• Go to twitter.com and see if you notice
anything different.
78. Edit Your Script
• Right-click the monkey at the bottom of
your page.
http://kentbrewster.com/baychi
79. Edit Your Script
• Right-click the monkey at the bottom of
your page.
• Choose Manage User Scripts
http://kentbrewster.com/baychi
80. Edit Your Script
• Right-click the monkey at the bottom of
your page.
• Choose Manage User Scripts
• Monkeying with Twitter should be
highlighted; if it isn't, click it.
http://kentbrewster.com/baychi
81. Edit Your Script
• Right-click the monkey at the bottom of
your page.
• Choose Manage User Scripts
• Monkeying with Twitter should be
highlighted; if it isn't, click it.
• Click the Edit button at the bottom left.
Your editor should launch.
http://kentbrewster.com/baychi
82. Edit Your Script
• Right-click the monkey at the bottom of
your page.
• Choose Manage User Scripts
• Monkeying with Twitter should be
highlighted; if it isn't, click it.
• Click the Edit button at the bottom left.
Your editor should launch.
• Make changes, save, and reload the page.
http://kentbrewster.com/baychi
86. Sharing Your Scripts
• In your editor, do Save As
• Name your script yourfile.user.js
http://kentbrewster.com/baychi
87. Sharing Your Scripts
• In your editor, do Save As
• Name your script yourfile.user.js
• Save it to your desktop.
http://kentbrewster.com/baychi
88. Sharing Your Scripts
• In your editor, do Save As
• Name your script yourfile.user.js
• Save it to your desktop.
• To install somewhere else, make sure
Greasemonkey is enabled and drag it into
the browser.
http://kentbrewster.com/baychi
90. All Done?
• Don't forget to disable Greasemonkey. Do
this by clicking the little brown monkey-
face and making it turn gray.
http://kentbrewster.com/baychi
91. All Done?
• Don't forget to disable Greasemonkey. Do
this by clicking the little brown monkey-
face and making it turn gray.
• Or, maybe you want to leave him running.
Find more monkey-powered awesomeness
at userscripts.org
http://kentbrewster.com/baychi
93. Recommended Reading
• Mark Pilgrim's Dive Into Greasemonkey
(outdated, but still useful):
diveintogreasemonkey.org
http://kentbrewster.com/baychi
94. Recommended Reading
• Mark Pilgrim's Dive Into Greasemonkey
(outdated, but still useful):
diveintogreasemonkey.org
• The Greasemonkey wiki:
wiki.greasespot.net
http://kentbrewster.com/baychi
95. Questions?
Kent Brewster
http://kentbrewster.com
@kentbrew on the remaining social networks that
haven't kicked me off yet.
http://developer.netflix.com
http://kentbrewster.com/baychi