View
4.591
Download
2
Category
Tags:
Preview:
Citation preview
ScrippetsWhat they are and how they work
Code Snippets
HTML
CSS …
SQL
Pieces of re-usable code
<body> <div id="page-wrap"> <!-- general HTML here --> </div></body>
#page-wrap { width: 800px; margin: 0 auto;}
Centered Webpage
Snippets AppCode manager for Mac OS X
Snippets AppSupported features
✓ Syntax highlighting ✓ Smart groups✓ Folders✓ Labels✓ Quick search✓ Menu bar integration
• Collect• Edit• Manage• Copy• Paste
• Search• Sync• Export• Import• Share
What do we want to do with snippets?
✓ Collect✓ Edit✓ Manage✓ Copy✓ Paste
✓ Search✓ Sync• Export• Import✗ Share
✓ Fully Implemented • Partially implemented ✗ Not implemented
Snippets AppWe’re almost there
✓ Source code✓ PDF✓ RTF✓ HTML*
✓ HTML+CSS*
Export
✓ * — in development
✓ Source code✓ PDF✓ RTF✓ HTML*
✓ HTML+CSS*
✗ XML✗ ZIP✗ FTP✗ Web✗ etc.
Export
✓ * — in development
?
✓ Pasteboard✓ Selection✓ File system✓ iDisk
Import
✓ Pasteboard✓ Selection✓ File system✓ iDisk
✗ XML✗ ZIP✗ FTP✗ Web✗ etc.
Import
?
Share
Pastebin.com
Pastie
Gist
Droplr
Paste2
Pastebin.ca
GnoPaste
Lodge It
TinyPaste
Snipt.org
Snipplr
DZone Snippets
Snipt.net
YFS* …
✓ * — your favorite service
So many services all over the place:
Conclusion
It’s almost impossible to cover all use cases by
standalone features…
How to implement advanced Export,
Import and Sharing?
Here’s the challenge we’re facing
Problem
Fact
Export, Import and Sharing have something in common
Export, Import and Sharing have something in common
These are custom operations on snippets
Fact
SolutionOffered by the Snippets App
Provide a platform to run custom operations on selected snippets!
Example
1 Select snippets
How to share via Snipplr
Example
1 Select snippets 2 Enter API Key
827364827301
How to share via Snipplr
User-speci!c string provided by the Snipplr service to allow authorized API-requests
Example
1 Select snippets 2 Enter API Key
827364827301
3 Upload snippets
Script
How to share via Snipplr
Example
1 Select snippets 4 Display links
snipplr.com/?id=1snipplr.com/?id=2snipplr.com/?id=3snipplr.com/?id=4
2 Enter API Key
827364827301
3 Upload snippets
Script
How to share via Snipplr
Example
Custom operations
1 Select snippets 2 Enter API Key
827364827301
3 Upload snippets
Script
4 Display links
How to share via Snipplr
snipplr.com/?id=1snipplr.com/?id=2snipplr.com/?id=3snipplr.com/?id=4
Example
Custom operations
HTML+JavaScript
+CSS
Ruby(Perl, Bash,
Python)
HTML+JavaScript
+CSS
1 Select snippets 2 Enter API Key
827364827301
3 Upload snippets
Script
4 Display links
How to share via Snipplr
snipplr.com/?id=1snipplr.com/?id=2snipplr.com/?id=3snipplr.com/?id=4
Example
4 Display links2 Enter API Key 3 Upload snippets
input.htmlStep 1:
Authorization
uploader.rbStep 2:
Uploading
output.htmlStep 3:Result
Custom Steps
1 Select snippets
How to share via Snipplr
input.htmlStep 1:
Authorization
uploader.rbStep 2:
Uploading
output.htmlStep 3:Result
Scrippet
Snippets AppProvides a mechanism to run any number of steps as…
ScrippetCollection of scripts and resources
<html lang="en"><head>! <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<input></input></body></html>
require 'net/http'require 'uri'
snipplr_url = Net::HTTP.post_form(url, parameters).body.match(/href="([^\"]+)"/)[1]snipplr_url = snipplr_url.gsub…
<html lang="en"><head>! <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<div></div></body></html>
input.html uploader.rb output.html
+ +
Scripts + Resources = Scrippet
ScrippetCan be developed to automate
almost any task you want
✓ Export✓ Import✓ Share✓ Backup
✓ Tweet✓ Transform✓ Evaluate✓ Run
info.plist
ScrippetIncludes property list describing
all steps to perform
<Scrippet><Name>Share via Snipplr.com</Name><Icon>snipplr.png</Icon><Steps>
<Step><Name>Security Options</Name><Source>input.html</Source>
</Step><Step>
<Name>Uploading…</Name><Source>uploader.rb</Source>
</Step><Step>
<Name>Result</Name><Source>output.html</Source>
</Step></Steps>
</Scrippet>
input.html uploader.rb output.html
scrippet.js default.css snipplr.png
SAa
</> </>
ScrippetIs a folder with .scrippet extension
Snipplr.scrippet/ Contents
info.plist/ Resources
/ input.html/ uploader.rb/ output.html/ scrippet.js/ default.css/ snipplr.png
root of the package
property list
UI for the 1st step script for the 2nd step UI for the 3rd step scrippet APIs CSS styles
icon image
ScrippetsAre recognized by Mac OS X as Bundles
Snipplr
Snipt.org …
Pastie
Can be installed and executed by the Snippets App
Pastie
Scrippets
You can develop them
Scrippets
Developers
Easy to share over the internet
Scrippets
Developers Internet
Everyone can use them
Scrippets
Happy usersDevelopers Internet
What’s Next
Happy usersDevelopers Internet
Easy & powerful APIs will be
published soon
Public scrippet database is in development*
Pastie, Snipplr, Snipt.org scrippets are available now;
more in development
✓ * — all scrippets will be tested for security before publishing
Summary✓ Snippets application is a cool code
manager for Mac OS X
✓ Now we have universal solution for extending its functionality
✓ Scrippets let you create powerful custom scenarios
✓ Everybody can develop and use them
www.snippetsapp.com
@snippetsapp
Recommended