Your SlideShare is downloading. ×
0
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
BayCHI 5/11/2010 Greasemonkey Intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BayCHI 5/11/2010 Greasemonkey Intro

982

Published on

Stone Knives, Bear Skins, and Greasemonkey: Tools for Tearing Down the Walls between Engineering and Design (given at BayCHI, 5 May 2010)

Stone Knives, Bear Skins, and Greasemonkey: Tools for Tearing Down the Walls between Engineering and Design (given at BayCHI, 5 May 2010)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
982
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide











































































  • Transcript

    • 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
    • 4. Disclaimerama! http://kentbrewster.com/baychi
    • 5. Disclaimerama! • About Me http://kentbrewster.com/baychi
    • 6. Disclaimerama! • About Me • About My Relationship with Netflix http://kentbrewster.com/baychi
    • 7. Disclaimerama! • About Me • About My Relationship with Netflix • About the Code http://kentbrewster.com/baychi
    • 8. About Me 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
    • 18. About the Code 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
    • 28. About Engineers 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
    • 31. How Designers See Engineers 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
    • 40. Tearing Down the Wall 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
    • 49. Strategy 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
    • 51. JavaScript Injection http://kentbrewster.com/baychi
    • 52. JavaScript Injection • from the console: javascript:alert('ding'); 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
    • 55. Toolbar Bookmarklets http://kentbrewster.com/baychi
    • 56. Toolbar Bookmarklets • limited in size (~2000 characters) 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
    • 61. Bookmarklet Examples <a href="javascript:alert('ding');">Annoy Me</a> <a href="javascript:(function(){var %20a=document.getElementsByTagName('A');for(i=0;i<a .length;i++){a[i].style.color='#f00';}})();">Turn My Links Red</a> <a href="javascript:(function(){var %20t=document.getElementsByTagName('TITLE') [0];t.textContent='HACKED! '+t.textContent;}) ();">Hack My Title</a> http://kentbrewster.com/baychi
    • 62. Greasemonkey Scripts 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
    • 67. Fixing Your Editor http://kentbrewster.com/baychi
    • 68. Fixing Your Editor • Enter about:config 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
    • 72. Load Your Script
    • 73. Load Your Script • Go back to 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.
    • 77. Edit Your Script http://kentbrewster.com/baychi
    • 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
    • 83. Intermission (In which much hacking occurs.) http://kentbrewster.com/baychi
    • 84. Sharing Your Scripts http://kentbrewster.com/baychi
    • 85. Sharing Your Scripts • In your editor, do Save As 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
    • 89. All Done? 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
    • 92. Recommended Reading 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

    ×