The new Confluence is awesome, but how about making it even better? Speakeasy democratises development by allowing you to quickly implement new features, even if you're not a Javascript whiz. In this talk, we'll provide you with paradigms for your Confluence Speakeasy extensions by showing you some useful ways of extracting information and remixing existing content on a page. You'll also get to see some of the useful, sometimes amusing, extensions that Atlassians have developed for our internal instances of Confluence. Nabeelah Ali, Confluence Developer

2. Remixing Confluence with
Speakeasy
Nabeelah Ali
Atlassian
2

3. Show of hands
Written a Confluence plugin?
3

4. Show of hands
Comfortable with Javascript?
4

5. Show of hands
Enjoy memes?
5

6. About me
Nabeelah Ali
Confluence developer
on 4.0 frontend features
6

7. Confluence 4
• new features
• diverse users
7

8. “ Be the change you seek.
”
Atlassian value
8

9. 9

10. In case you were wondering
• ragefaces is really an extension
BEFORE AFTER
10

11. I can haz plugin?
an atlassian-plugin.xml
<atlassian-plugin name="Ragefaces resource" key="example.plugin.ragefaces" plugins-
version="2">
<plugin-info>
<description>A plugin to turn your [/awyeah]s into images</description>
<vendor name="Meme Corporation" url="http://www.memecorp.us"/>
<version>1.0</version>
</plugin-info>
<web-resource name="Resources" key="resources">
<resource name="foo.js" type="download" location="resources/foo.js"/>
<context>atl.general</context>
</web-resource>
</atlassian-plugin>
11

12. Creating a Confluence plugin
12

13. Creating a Confluence plugin
13

14. Creating a Confluence plugin
run -> debug -> run
14

15. Creating a Confluence plugin
run -> debug -> run
15

16. Creating a Confluence plugin
run -> debug -> run
16

17. Creating a Confluence plugin
run -> debug -> run
17

18. What you will hear today
• Speakeasy 101
• Let’s Build an Extension
• Cautionary Advice
• Resources
18

19. Speakeasy

20. Speakeasy: the what
• cross-product plugin
• run client-side Javascript, CSS & HTML
20

21. demonstration of Speakeasy for the end user

22. creating an extension skeleton
22

23. [demonstration of using the wizard to create an extension]

24. for plugin developers
super fast
prototyping
24

25. for confluence admins
try out crazy stuff
on production data
25

26. for confluence admins
user-driven
development
26

27. for confluence admins
democratise
development
27

28. Speakeasy: got Confluence?
Atlassian Plugin SDK
--atlas-run-standalone --product confluence --version 4.0
28

29. demonstration of installing the speakeasy plugin

30. liking
30

31. 31

32. pimping
32

33. 33

34. styling
34

35. 35

36. Let’s build an extension!

37. demonstration of plugin to build

38. Let’s build this thing
1. Include the image
2. Restrict the context
3. Find/replace
4. Twitter request
5. Put it in a dialog
38

39. Include the image
var img =
require('speakeasy/resources').getImageUrl(module, 'bird.png');
39

40. restrict the context
40

41. Let’s do this all onready
$(document).ready(function() {
// we’ll put our code here
}
41

42. Restrict the context
if (!!AJS.Meta.get("page-id") &&
!AJS.Meta.get("editor-mode")) {
// do our stuff
}
42

43. grab the content
43

44. atlassian atlassian
Confluence pages
viewing a page/blog editing a page/blog dashboard
breadcrumbs breadcrumbs breadcrumbs
title title Welcome to Confluence Updates
content
content
Spaces
SAVE
atlassian atlassian
44

45. Find & replace
var content = AJS.$("#main-content");
var twitterfiedContent = content.html().replace(/(^|s)#(w+)/g, "
$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>
<img src='"+ img + "' class='twittericon' hashtag='$2'/>");
content.html(twitterfiedContent);
45

46. All our hashtags are linked
• Body Level One
• Body Level One
• Body Level Two
• Body Level Two
• Body Level One
• Body Level Two
46

47. Atlassian User Interface (AUI)
• a reusable set of UI components
47

48. Put it in a dialog
AJS.$(".twittericon").each(function (i) {
AJS.InlineDialog($(this), 1, function(content, trigger, showPopup)
{
// Let’s get some information to put in this inline dialog.
}, {onHover:true});
}
48

49. Twitter request
$.getJSON("http://search.twitter.com/search.json?callback=?", {
q: "#" + $(this).attr('hashtag'),
rpp: "5",
lang: "en"
}, function(data) {
$.each(data.results, function() {
// Put each result’s twitter handle, tweet text and user
//profile photo in nice divs and style.
});
});
49

50. Twitter request
$.getJSON("http://search.twitter.com/search.json?callback=?", {
q: "#" + $(this).attr('hashtag'),
rpp: "5",
lang: "en"
}, function(data) {
$.each(data.results, function() {
// Put each result’s twitter handle, tweet text and user
//profile photo in nice divs and style.
});
});
50

51. So now we have
AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {
var tweets = AJS.$("<div></div>").attr("id", "tweets");
$.getJSON("http://search.twitter.com/search.json?callback=?", {q: "#" + id, rpp: "5",
lang: "en"}, function(data) {
$.each(data.results, function() {
// Assemble results into a tweets div.
});
$(content).html(tweets);
showPopup();
});
}, {onHover:true});
51

52. So now we have
var img = require('speakeasy/resources').getImageUrl(module, 'bird.png');
$(document).ready(function () {
if ( !! AJS.Meta.get("page-id") && !AJS.Meta.get("editor-mode")) {
var content = AJS.$("#main-content");
var twitterfiedContent = content.html().replace(/(^|s)#(w+)/g, "$1#
<a href="http://search.twitter.com/search?q=%23$2">$2</a><img src='" + img + "' class='twittericon' data-val='$2'/>");
content.html(twitterfiedContent);
AJS.$(".twittericon").each(function (i) {
AJS.InlineDialog($(this), 1, function (content, trigger, showPopup) {
var tweets = AJS.$("<div></div>").addClass(“tweets”);
AJS.$.getJSON("http://search.twitter.com/search.json?callback=?", {
q: "#" + $(this).attr('hashtag'),
rpp: "5",
lang: "en"
}, function (data) {
AJS.$.each(data.results, function () {
tweets.append(formatTweet(this));
});
AJS.$(content).html(tweets);
showPopup();
});
}, {
onHover: true
});
});
}
});
52

53. THE TWEETINATOR
53

54. Cautionary advice

55. Breaking things
• Unsubscribe & restore URLs
yourinstance/plugins/servlet/speakeasy/unsubscribe
yourinstance/plugins/servlet/speakeasy/restore
55

56. Should you use it?
• Do you trust your users?
• Does your instance allow public signup?
56

57. Speakeasy Settings
57

58. Cross-site scripting
• inserting unescaped HTML into the page
• from user input
• from data you fetched
58

59. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
59

60. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result;
60

61. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result; // BAD - Don’t do this!
61

62. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result; // BAD - Don’t do this!
el.innerHTML = AJS.escapeHtml(result); // Do this instead.
62

63. XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
el.innerHTML = result; // BAD - Don’t do this!
el.innerHTML = AJS.escapeHtml(result); // Do this instead.
AJS.$(el).text(result); // Or this.
63

64. Interested in learning more?
Securing your Plugin - Penny Wyatt @ AtlasCamp 2010
Protip If you weren’t here last year or
just enjoy nostalgia, check out the
Atlascamp 2010 website for videos
of every session.
64

65. Where can you go from here?

66. Moar
• git support
• applinks proxy
• xml/rpc client
• check out the docs!
66

67. Product Compatibility
• Speakeasy documentation
• Extension repository
• Remember: not just Confluence!
67

68. Resources
Speakeasy Documentation
https://developer.atlassian.com/display/SPEAK/Speakeasy
Speakeasy Source on github
https://github.com/mrdon/speakeasy-plugin
Speakeasy JARs
https://maven.atlassian.com/content/repositories/atlassian-public/com/atlassian/labs/speakeasy-plugin/
68

69. TAKE-AWAYS
“ Got an hour to spare? That’s enough time to
”
prototype a new Confluence feature with Speakeasy.
#atlascamp
69

70. Thank you!