Developers, designers, Social Media & Marketings gurus... we all have many things in common. One of them: we browse the web and we find articles, tutorials and resources that we want to keep, because we might need them in the future.
We favourite tweets, we bookmark stuff, we subscribe to RSS feeds. But, it's that enough? We had Google Read, but it's dead now. Feedly seemed to be an option, but now they want to charge 5$ a month to be able to search through our articles (no way!). We have Pocket, but it's not a dedicated tool, and it's difficult to organize stuff in a way that we can quickly use it. And they might want to also charge us in the future, or they could just simply disappear.
Bottom line, depending on tools we don't fully control and that are not fully intended for our purpose is kind of dangerous. So, based on this, I decided to stop worrying about it and create my own tool. I need something I can rely on forever, a place I know I can turn to when I want to find the stuff I have found. And, also, I would like to share it with others.
I decided to use Wordpress to create a tool where I can keep all the stuff I need, in a controlled environment. In this Gist, I will put the crazy ideas I've had to come up with the perfect tool. Hopefully, by making it public, I could get some ideas from others, too. I'd also like to get feedback and, why not, even help!
WordPress is not just one of the best and more powerful blogging systems. It's also a highly customizable, full-fledged, taxonomy-based CMS. It comes with two taxonomies out of the box: posts and pages. But you can create your own. Here is a nice TutsPlus tutorial to give you an idea. According to Wordpress documentation: "Taxonomy is one of those words that most people never hear or use. Basically, a taxonomy is a way to group things together." Simple, right?
So if you are a developer, you could create taxonomies to classify the links you find interesting and that you want to keep for later use. For example: "Plugins", "Libraries", "Frameworks", "Snippets", and so on. Taxonomies are hierarchical, so you can fine tune the grouping of the contents you have. Here is an example of what I have created for my own blog:
The Resources taxonomy is the place I will store my development related resources. Then I have 4 sub-taxonomies to further refine the kind of resource I am dealing with:
- Resource Type: What is it? A Plugin? A Snippet? Some Tutorial? This taxonomy helps me filter different kinds of Resources, grouping them by type.
- Resource Category: Okay, it is a development resource. But I can have plugins for Web, for Mobile Apps, Desktop Apps, server-side language Apps... So this taxonomy helps me creating a scope, so when I am trying to find something I need related to some technology, I will have more chances to get ahold of it if it's correctly classified, right?
- License Type: Am I looking for premium plugins or themes? Do I need some Open Source component? Depending on the project I am working on, license types have to be chosen carefully. This taxonomy will keep those I can't use out of the search results.
- Tags: If all the previous grouping is not enough to categorize something, tags come to the rescue. They will add fine-tuned details to make it impossible not to find what I need.
All the sub-taxonomies I have listed here can be added to another parent taxonomy, if it makes sense. For instance, I could create a Photos taxonomy and add the "License Type" and "Tags" sub-taxonomies to it. Think of them as categories, just a way to label stuff, with reusable types of labels.
Adding custom Taxonomies is pretty straightforward. It involves some coding, but if you know your way around PHP, just by following the next tutorials you should be all set:
- Reusable Custom Meta Boxes Part 1: Intro and Basic Fields (it has 4 parts)
- Innovative Uses of WordPress Post Types and Taxonomies
- A Guide to WordPress Custom Post Types: Creation, Display and Meta Boxes
What do these tutorials cover? Everything you need to know about taxonomies, basically. Which is not much, becuase it's not complicated and you just need to understand what they are to be able to follow along with the tutorials without getting lost. Of course, deep Wordpress knowledge will help you go further, both coding and imagining the posibilities.
If you look at this screenshot you'll see that the page to create a new "Resource" entry is completely different from the "New Post/Page" form:
What you see is a form with meta boxes with custom fields, that together define a resource. I could have the default "content" field (the big text editor you normally see when creating content in Wordpress). But that'd be a pain. I would have to format the content every time I add some resource. And they would have to look more or less the same, so when I display them they keep the same look & feel. Because you will want to display the content, not just keeping it for yourself, right? ;-)
With custom fields, I just get the bits and pieces I need for a resource, and then my template will show them exactly in the same way (allowing customizations depending on type, category, tag, whatever). Also, adding something will be fast and stragihtforward. Just filling the fields, and clicking save. That's it.
And this is the basic idea. Now let's ellaborate it and make it more "complicated" (and more fun!)
Favoriting a tweet is a light-speed action, right? (well, actually a bit slower, unless your finger can move faster than 299.792.458 meters/second -if that's the case, I'd like to work with you!). Sharing a link on Facebook, Google+ or any other social network is also achieved quite quickly. Specially, if you use bookmarklets. Maybe you know where I am going, right? Wordpress has a "Press this" bookmarklet, built in. It allows you to quickly post some content into your blog. Actually, what it does is creating a new post and putting a link to the content on it. Wow... impressed already, huh? Don't be. We can do better.
Let's go back to the screenshot:
There are two things there that change the way I will add stuff to my site. The first one is my own "Press This" page, which I have called "Press This Reloaded". The idea is to take the default "Press This" bookmarklet, modify it to point to this page instead, and just fill one field: "URL". This is the form:
When I click on "Get it!", it will actually go and get it from me. The contents, I mean. Using Oscar Otero's Embed Library, I retrieve the metadata from any page, and then fill the fields accordingly. Maybe not all of them in all cases, but it surely makes it faster. I use Wordpress' built-in AJAX hooks and actions to achieve this.
I even get a list of the images found in the content, to set a "featured image", or that picture that I think represents best the content I am adding. I can also ignore the pictures found by the script and put one of my own. This is the image selector:
Now, I said there were two things to consider in the first screenshot in this section. One was the "Press This Reloaded" thingy, but there was one more thing:
If you notice the URL field in my "Add Resource" form, there is also a "Get!" link. Okay, it's kinda ugly for now, I will make it look prettier later on! But the thing is, I can have automatic metadata fetching for all my taxonomies! I can go even further and keep a database of sources (websites, authors), automatically asigning tags, types and categories based on previous choices for those sources.
So the combination bookrmarklet + enhanced "Press this", plus the "Get it!" button in every content entry form will make my life easier by allowing me to keep & store contents much faster.
Maybe what I have done so far is cool to store resources I want when I am using my laptop or desktop computer. But... what if I am commuting, or waiting for my girl sitting bench, or walking the streets like a zombie staring at my mobile's screen and avoiding eye contacting other so-called human beings? What then? I can also have a bookmarklet on my mobile browser, but loading the whole Worpress interface, logging in, etc, it's just too much. It's not agile. So... I think a custom mobile app is called for. A native mobile app, yes. I've done an App for this! It's in a very early stage but it already connects to my Wordpress instance and does some stuff. This is how it looks like so far:
This is the idea:
- The interface is created with HTML5 + Javascript + CSS
- I put that into PhoneGap, along with Boris Smus' WebIntent plugin.
- I configure my App to make it "available" when I click on "Share via". So, whenever I find something interesting while I browse the web or go through my Twitter timeline, I can send it (share via) my App. This is known as Intent (at least for Android devs), and the plugin mentioned before helps me with that. Basically it catches the event and calls a Javascript callback, that receives the content that has been shared with my App. This shared content might be an URL (shared by a browser) or some text including URL's (for example, when sharing a tweet). So my App has to detect the type of incoming content and do something about it. In the case of an URL, I could process it the same way I do with my "Press It Reloaded" code. That means, fetching metadata for the URL automatically. If the incoming data is text, I could just store is a note, a post draft, or... find the links within the text and process all of them! It's up to you, but I am doing both (yes, I am that guy).
- I also configure my App in a way the device "knows" it is able to open certain types of content (based on mime types). So it is possible to open a link from Twitter directly with my App.
- Once I have the metadata for the contents, following the given premises, conditions and procedures, I send that to the blog. How? Read the next section...
- I keep in mind that I might not have Internet connection when I click on share. So I don't try to upload data straight away. I put it on a queue, and then I process it if my device is connected. I can set up the App so it just does that when I am connected to a wifi network.
As you can see, sky is the limit!
Come back soon for the next parts:
- Creating and Connecting to Web Services with WordPress. Expose an API to connect your App!
- Create automatic posts with "collections" of resources!
- Set up a "Project Boilerplate", adding resources on your database to a new Project plan!
- Store metadata is not stealing contents. Good manners, best practices and respecting other people's work (and copyright)
Is this something that you are still developing or planning to develop?
I was looking to use Wordpress as a repository for Open Educational Resources and this looks like the kind of functionality that could make that a reality.