Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barnabywalters/web-action-hero-toolbelt
Make the web actionable. Part sharing button customiser, part <action> shim
https://github.com/barnabywalters/web-action-hero-toolbelt
Last synced: 11 days ago
JSON representation
Make the web actionable. Part sharing button customiser, part <action> shim
- Host: GitHub
- URL: https://github.com/barnabywalters/web-action-hero-toolbelt
- Owner: barnabywalters
- Created: 2013-03-02T10:26:41.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-09-07T15:44:53.000Z (about 10 years ago)
- Last Synced: 2024-10-20T19:44:41.763Z (19 days ago)
- Language: JavaScript
- Size: 1.58 MB
- Stars: 32
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - barnabywalters/web-action-hero-toolbelt - Make the web actionable. Part sharing button customiser, part <action> shim (others)
README
# Web Action Hero Toolbelt
A cross-browser extension which does three things:
1. Replaces social sharing buttons with <indie-action> elements
2. Activates <indie-action> elements
3. Allows you to take actions on selections you’ve made ([demo video](http://www.youtube.com/watch?v=vvcaqSwMVBE))
Watch a [demo video](https://www.youtube.com/watch?v=9OAfvuKCsEk) or read the [transcript](http://waterpigs.co.uk/articles/web-action-toolbelt-guide/).
## Installation
The Toolbelt is cross-browser (courtesy of [Kango](http://kangoextensions.com)) and can be installed on Safari, Firefox, Chrome or Opera.
1. Clone the repo or download the ZIP
1. Navigate to /output
Then, depending on your browser:
* Chrome:
1. Navigate to chrome://extensions
1. If not already enabled, enable Dev Mode (top right)
1. Press the Load Unpacked Extension button, and select /output/chrome
1. Web Actions should pop up in the list, Click 'Options' to configure it.
* Safari:
1. Develop -> Show Extension Builder
1. Click + (bottom left)
1. Add Extension
1. Select /output/safari/webactions.safariextension
* Firefox:
1. Tools -> Addons
1. Extensions
1. Little cog in the top right -> Install Add-on From File
1. Select /output/webactions_0.9.xpi
1. Trust it
1. Restart it
1. Configure it
* Opera:
1. Open /output/webactions_0.9.oex
2. It will install and show you where the button is
## Set Up
Click the button in your toolbar to bring up the config UI. An explanation is within.
For more, watch the [demo video](https://www.youtube.com/watch?v=9OAfvuKCsEk) or read the [guide](http://waterpigs.co.uk/articles/web-action-toolbelt-guide/).
## Questions with answers
### Wait, what are <indie-action> elements?
An experimental bit of markup (proposed by Tantek Çelik [here](http://tantek.com/presentations/2012/06/osb12-web-actions/#slide15)) for implementing the Web Action pattern in a way back-compatible with existing markup patterns.
For example, say you’re a blogger and you want people to be able to share your content. You might decide to put some social sharing buttons at the bottom of your articles:
```html
My Awesome Blog Post
•••
Share this post: Tweet Button
```
But what if people aren’t using twitter? Surely I should add a load of others (facebook, google plus, linkedin, reddit, etc.) — and all of a sudden you’re a [button slut](http://www.flatfrogblog.com/2011/08/07/web-actions/):
```html
Tweet Button
+1 Button
Like Button
```
But if I take all of these buttons away in favour of some experimental technology no-one uses, there won’t really be any benefit. So, the `action` element is back-compatible with current markup. Just wrap all buttons which represent a particular verb in that `indie-action`:
```html
Tweet Button
+1 Button
Like Button
```
Non-supporting agents will show the buttons, supporting agents will replace them with a UI tailored to the user.
### Isn’t this just [web intents | web activities | x other technology]?
No. Web Actions are a user-centric reframing of dev-centric web intents, the <indie-action> element is a simple, experimental implementation designed so we can start using this pattern straight away. Only through real world usage will we discover the best solution to these problems.
Other similar technologies also require significant effort on the producer side (writing the UI, invoking via JavaScript) whereas web actions only require a single extra element per action, which can be wrapped around existing markup.
### Wasn’t the element originally ``?
Yep, but at IWCUK 2014 Jeremy Keith pointed out that it should be altered to fit better with the web components spec.
## Questions without answers (yet)
### Most people don’t understand URL APIs — why doesn’t this autodiscover services like web intents?
Because that’s complicated. It would require services to explicitly declare what verbs (which we haven’t agreed on yet) they can handle, and lots and lots of UI programming to be done.
This is *not* an end product, it is a prototype made so interested parties can get stuck in using this markup now and understanding these patterns now. We’ll handle making it super easy to use later, if it’s well-received.
### What verbs should I use?
There’s currently no common registry of verbs. We’re researching them and documenting them [here](http://indiewebcamp.com/webactions#Brainstorming). Hop on #indiewebcamp on freenode and ask about it.