👓 Introducing Trashy.css | CSS Tricks

Read Introducing Trashy.css by Nathan Smith (CSS-Tricks)
It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka "boss man")
I can’t wait to try this out on some sites. I love that it’s got a browser bookmarklet that will let one test out other sites too.

🔖 ❤️ Protohedgehog tweet

Bookmarked a tweet by Jon TennantJon Tennant (Twitter)
This suggests some interesting bookmarklet functionality.

🔖 Taft Test – Web Dev Placeholder Image Generator

Bookmarked Taft Test - Web Dev Placeholder Image Generator (tafttest.com)
Does your site pass the Taft Test? Generate or swap images of Taft for web development.
I wish I had lots of bookmarklets that did quirky things like this. Interestingly this one has a relatively useful use-case in addition to its unintended comedic service.
Liked Here’s the latest version of my quick-reply bookmarklet. by gRegor MorrillgRegor Morrill (gregorlove.com)
Here’s the latest version of my quick-reply bookmarklet. It lets me reply to any URL now, not just tweet URLs. Copy and paste the below as a bookmark, changing http://example.com/endpoint/?url= to your desired endpoint. javascript:(function(){var endpoint='http://example.com/endpoint/?url=';if(document.location.hostname=='twitter.com'){var container;if(!(container=document.querySelector('.selected-stream-item'))){if(!(container=document.querySelector('.permalink-tweet-container'))){alert('Could not find tweet permalink. Are you sure a specific tweet is selected?');return false;}}var in_reply_to='https://twitter.com'+container.children[0].getAttribute('data-permalink-path');window.open(endpoint+encodeURIComponent(in_reply_to));}else{var in_reply_to=document.location.href;window.open(endpoint+encodeURIComponent(in_reply_to));}}())
Thanks gRegor! This seems to work like a charm with the Post Kinds Plugin endpoints.

Browser Bookmarklets and Mobile Sharing with Post Kinds Plugin for WordPress

The Post Kinds Plugin

I’ve been using David Shanske’s excellent WordPress plugin Post Kinds, which is conveniently bundled into the IndieWeb Plugin, for more than a year now. (Update: I’ve also written a fairly in-depth primer for it.)

Much like WordPress’s native post formats (standard, aside, image, quote, link, status, audio, etc.) which were introduced in v3.1, Post Kinds instead provides a better mapping of post types across a larger variety of social media types (article, bookmark, favorite, itinerary, jam, like, listen, note, photo, play, read, reply, repost, watch, and more). In addition to changing the visual layout and formatting of most posts, the plugin also importantly includes the correct microformat classes for each of these post types and this enables a lot of other fantastically important functionality for the open web.

Custom URLs for Post Kinds

One of the problems I had with using it initially was taking the extra time to cut and paste in the several pieces of additional data or fill in meta data to make a post. It was particularly painful in a mobile setting. I was thrilled when David mentioned that he’d built in some customized query parameters which could take URLs to import in much of the data as well as to set the correct post kind automatically. They came with the general format of

http://example.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url

where one could replace @url with the target URL of the site to be bookmarked, for example. Replacing bookmark with the appropriate post kind name would allow one to set the flag for each post to the proper post kind automatically, and naturally one should replace example.com with the base URL for their site.

Putting this customized URL into a browser will create a new post in one’s website admin UI and Post Kinds will automatically set the URL and scrape its meta data. One can then modify any additional data or add a comment and then publish quickly and easily.

As a concrete example, I would put the following URL in my browser of choice to “like” the Post Kinds Plugin page:
http://www.boffosocko.com/wp-admin/post-new.php?kind=like&kindurl=https://wordpress.org/plugins/indieweb-post-kinds/

Browser Bookmarklets

I am a huge fan of browser bookmarklets, so for a while I’ve been meaning to create some for the post kinds I use to better automate my post process. After dragging my feet for ages, particularly because my JavaScript skills are nearly non-existent, I’ve finally gotten around to adapting the common WordPress “Press This” bookmarklet to work with Post Kinds.

Below is the modified code that can be put into a bookmarklet to allow for easily bookmarking a particular post:

javascript:(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&kindurl="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);(c.match(/\/\/(www|m)\.youtube\.com\/watch/)||c.match(/\/\/vimeo\.com\/(.+\/)?([\d]+)$/)||c.match(/\/\/(www\.)?dailymotion\.com\/video\/.+$/)||c.match(/\/\/soundcloud\.com\/.+$/)||c.match(/\/\/twitter\.com\/[^\/]+\/status\/[\d]+$/)||c.match(/\/\/vine\.co\/v\/[^\/]+/))&&e("_embeds[]",c),i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");("canonical"===A||"icon"===A||"shortlink"===A)&&e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,"http:\/\/example.com\/wp-admin\/post-new.php?kind=bookmark");
Browser bookmarklets for Post Kinds

Other versions of the bookmarks can easily be made for all the other other Post Kinds by replacing the two red highlighted portions of the code sample appropriately for each one. Specifically one should exchange bookmark with the name of the kind desired (all of them should be in lowercase) and replace example.com with one’s own domain name.

For simplicity, I’m including a sample/template bookmarklet button below which can be dragged and dropped into most browser bars. Before using it, edit the JavaScript as described above and paste it into the URL box. I’m happy to help those who may have problems. I’ve included a screen capture of what all of them look like once they’re set up and configured with matching emoji added into the titles to assist in visual selection.

🔖 Bookmark

Perhaps I (or someone else enterprising) would contribute all this back into the plugin repository for Post Kinds so that these bookmarklets would be self-generated for plug and play usage within the admin interface for the plugin the way the bookmarklets are for the IndieWeb plugin’s PressThis bookmarklets, perhaps at /wp-admin/admin.php?page=kind_options.

A Post Kinds “Bookmarklet” for Mobile

For those who would like something similar to the above for use on mobile platforms (and particularly Android) I’ve written up some instructions below which allow one to use the Android app URL Forwarder to use the ubiquitous mobile “share” functionality from most pages and/or apps in a way similar to this bookmarklet functionality. (This is based in part on some work by Ryan Barrett and some work I’d written up for the Known CMS a while back.)

I’d suspect that there’s also a similar app for iOS, but I haven’t checked. If not available, URL Forwarder is open source on Github and could potentially be ported. There’s also a similar Android app called Bookmarklet Free which could be used instead of URL Forwarder.

Configuring URL Forwarder for Post Kinds

  1. Open URL Forwarder on your phone
  2. Click the “+” button to create a filter.
  3. Give the filter a name, “Bookmark” for the bookmark version. (See photo below.)
  4. Use the following entry for the “Filter URL” replacing example.com with your site’s domain name: http://EXAMPLE.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url
  5. Leave the “Replaceable text” as “@url”
  6. Finish by clicking on the checkmark in the top right corner.
  7. Repeat the above for the other desired post types but replacing “bookmark” with the lower case names of those other types.

Simple right?

Creating a post via mobile

With the configuration above set up, do the following:

  1. On the mobile page one wants to bookmark, like, favorite, etc., click the ubiquitous “share this” mobile icon (or share via a pull down menu, depending on your mobile browser or other app.)
  2. Choose to share through URL Forwarder
  3. Click on the “bookmark” option just created above (or other option as necessary for the desired post type).
  4. Change/modify any meta data within your website administrative interface or add any additional thoughts and publish. (This part is the same as one would experience using the desktop bookmarklet.)

Happy posting!

PressForward as an IndieWeb WordPress-based RSS Feed Reader & Pocket/Instapaper Replacement

As many know, for the past 6 months or so, I’ve been slowly improving some of the IndieWeb tools and workflow I use to own what I’m reading both online and in physical print as well as status updates indicating those things. [1][2][3]

Since just before IndieWebCamp LA, I’ve been working on better ways to own the articles I’ve been reading and syndicate/share them out to other social platforms. The concept initially started out as a simple linkblog idea and has continually been growing, particularly with influence from my attendance of the Dodging the Memory Hole 2016: Saving Online News conference at UCLA in October. Around that same time, it was announced that Pinterest was purchasing Instapaper and they were shutting down some of Instapaper’s development and functionality. I’ve been primarily using Pocket for several years now and have desperately wanted to bring that functionality into my own site. I had also been looking at the self-hostable Wallabag alternative which is under heavy active development, but since most of my site is built on WordPress, I really preferred having a solution that integrated better into that as a workflow.

Enter PressForward

I’ve been looking closely at PressForward for the past week and change as a self-contained replacement for third party services like Pocket and Instapaper. I’ve been looking around for this type of self-hosted functionality for a while.

PressForward was originally intended for journalists and news organizations to aggregate new content, add it to their newsroom workflow, and then use it to publish new content. From what I can see it’s also got a nice following in academia as a tool for aggregating content for researchers focused on a particular area.

It only took a minute or two of looking at PressForward to realize that it had another off-label use case: as a spectacular replacement for read-later type apps!

In an IndieWeb fashion, this fantastic WordPress plugin allows me to easily own private bookmarks of things I’d like to read (PressForward calles these “Nominations” in keeping with its original use case). I can then later read them on my own website (with Mercury f.k.a Readability functionality built in), add commentary, and publish them as a read post. [Note: To my knowledge the creators of PressForward are unaware of the IndieWeb concept or philosophies.]

After some playing around for a bit and contemplating several variations, configurations, and options, I thought I’d share some thoughts about it for others considering using it in such an off-label manner. Hopefully these may also spur the developers to open up their initial concept to a broader audience as it seems very well designed and logically laid out.

Examples

The developers obviously know the value of dogfooding as at least two of them are using it in a Pocket-like fashion (as they many not have other direct use-cases).

Pros

PressForward includes a beautiful, full built-in RSS Feed Reader!

This feature alone is enough to recommend using it even without any other feature. I’ve tried Orbit Reader and WhisperFollow (among others) which are both interesting in their own rights but are somewhat limited and have relatively clunky interfaces. The best part of WhisperFollow’s premise is that it has webactions built in, but I suspect these could easily be added onto PressForward.

In fact, not just hours before I’d discovered PressFoward, I’d made this comment on the WordPress Reader Refresh post announcing the refresh of WordPress.com’s own (separate) reader:

Some nice visual changes in this iteration. Makes it one of the most visually pretty feed readers out there now while still maintaining a relatively light weight.

I still wish there were more functionality pieces built into it like the indie-reader Woodwind.xyz or even Feedly. While WordPress in some sense is more creator oriented than consumption oriented, I still think that not having a more closely integrated reader built into it is still a drawback to the overall WordPress platform.

Additionally,

  • It’s IndieWeb and POSSE friendly
  • It does automatic link forwarding in a flexible/responsible manner with canonical URLs
  • Allows for proper attributions for the original author and content source/news outlet
  • Keeps lots of metadata for analyzing reading behavior
  • Taggable and categorizable
  • Allows for comments/commenting
  • Could be used for creating a linkblog on steroids
  • Archives the original article on the day it was read.
  • Is searchable
  • Could be used for collaboration and curation
  • Has Mercury (formerly known as Readability) integrated for a cleaner reading interface
  • Has a pre-configured browser bookmarklet
  • Is open source and incredibly well documented
  • One can count clicks to ones’ own site as the referer while still pushing the reader to the original
  • Along with other plugins like JetPack’s Publicize or Social Networks Auto-Poster, one can automatically share their reads to Twitter, Facebook, or other social media silos. In this case, you own the link, but the original publisher also gets the traffic.

Cons

No clear path for nominating articles on mobile.

This can be a dealbreaker for some, so I’ve outlined a pretty quick and simple solution below.

No direct statistics

Statistics for gauging ones’ reading aren’t built in directly (yet?), but some scripts are available. [4][5][6]

No larger data aggregation

Services like Pocket are able to aggregate the data of thousands of users to recommend and reveal articles I might also like. Sadly this self-hosted concept makes it difficult (or impossible) do have this type of functionality. However, I usually have far too much good stuff to read anyway, so maybe this isn’t such a loss.

Suggested Improvements

Adding the ability to do webactions directly from the “Nominated” screen would be fantastic, particularly for the RSS reader portion.

Default to an unread view of the current “All Content” page. I find that I have to filter the view every time I visit the page to make it usable. I suspect this would be a better default for most newsrooms too.

It would be nice to have a pre-configured archive template page in a simple linkblog format that filters posts that were nominated/drafted/published via the Plugin. This will prevent users from needing to create one that’s compatible with their current theme. Something with a date read, Title linked to the original, Author, and Source attribution could be useful for many users.

A PressForward Nomination “Bookmarklet” for Mobile

One of the big issues I came up against immediately with PressForward is ease of use on mobile. A lot of the content I read is on mobile, so being able to bookmark (nominate) articles via mobile or apps like Nuzzel or Twitter is very important. I suspect this may also be the case for many of their current user base.

Earlier this year I came across a great little Android mobile app called URL Forwarder which can be used to share things with the ubiquitous mobile sharing icons. Essentially one can use it to share the URL of the mobile page one is on to a mobile Nomination form within PressForward.

I’d suspect that there’s also a similar app for iOS, but I haven’t checked. If not available, URL Forwarder is open source on Github and could potentially be ported. There’s also a similar Android app called Bookmarklet Free which could be used instead of URL Forwarder.

PressForward’s built in bookmarklet kindly has a pre-configured URL for creating nominations, so it’s a simple case of configuring it. These details follow below for those interested.

Configuring URL Forwarder for PressForward

  1. Open URL Forwarder
  2. Click the “+” icon to create a filter.
  3. Give the filter a name, “Nominate This” is a reasonable suggestion. (See photo below.)
  4. Use the following entry for the “Filter URL” replacing example.com with your site’s domain name: http://example.com/wp-content/plugins/pressforward/includes/nomthis/nominate-this.php?u=@url
  5. Leave the “Replaceable text” as “@url”
  6. Finish by clicking on the checkmark in the top right corner.

Simple right?

Nominating a post via mobile

With the configuration above set up, do the following:

  1. On the mobile page one wants to nominate, click the ubiquitous “share this” mobile icon (or share via a pull down menu, depending on your mobile browser or other app.)
  2. Choose to share through URL Forwarder
  3. Click on the “Nominate” option just created above.
  4. Change/modify any data within your website administrative interface and either nominate or post as a draft. (This part is the same as one would experience using the desktop bookmarklet.)

What’s next?

Given the data intensity of both the feed reader and what portends to be years of article data, I’m left with the question of hosting it within my primary site or putting it on a subdomain?

I desperately want to keep it on the main site, but perhaps hosting it on a subdomain, similar to how both Aram Zucker-Scharff and James Digioia do it may be better advised?

I’ve also run across an issue with the automatic redirect which needs some troubleshooting as well. Hopefully this will be cleared up quickly and we’ll be off to the races.

References

[1]
C. Aldrich, “A New Reading Post-type for Bookmarking and Reading Workflow,” BoffoSocko | Musings of a Modern Day Cyberneticist, 22-Aug-2016. [Online]. Available: http://boffosocko.com/2016/08/22/a-new-reading-post-type-for-bookmarking-and-reading-workflow/. [Accessed: 31-Dec-2016]
[2]
C. Aldrich, “Owning my Online Reading Status Updates,” BoffoSocko | Musings of a Modern Day Cyberneticist, 20-Nov-2016. [Online]. Available: http://boffosocko.com/2016/11/20/owning-my-online-reading-status-updates/. [Accessed: 31-Dec-2016]
[3]
C. Aldrich, “Notes, Highlights, and Marginalia from E-books to Online,” BoffoSocko | Musings of a Modern Day Cyberneticist, 24-Oct-2016. [Online]. Available: http://boffosocko.com/2016/10/24/notes-highlights-and-marginalia/. [Accessed: 31-Dec-2016]
[4]
A. Zucker-Scharff, “Personal Statistics from 3 Months of Internet Reading,” Medium, 05-Sep-2015. [Online]. Available: https://medium.com/@aramzs/3-month-internet-reading-stats-f41fa15d63f0#.dez80up7y. [Accessed: 31-Dec-2016]
[5]
A. Zucker-Scharff, “Test functions based on PF stats for collecting data,” Gist. [Online]. Available: https://gist.github.com/AramZS/d10fe64dc33fc9ffc2d8. [Accessed: 31-Dec-2016]
[6]
A. Zucker-Scharff, “PressForward/pf_stats,” GitHub. [Online]. Available: https://github.com/PressForward/pf_stats. [Accessed: 31-Dec-2016]

I’ve discovered a spectacular tool for owning my own bookmarks and replacing Pocket and InstaPaper!

I’ve discovered a spectacular tool for owning my own bookmarks and replacing Pocket and InstaPaper!

  • It’s IndieWeb and POSSE friendly
  • Does link forwarding in a flexible/responsible manner
  • Allows for proper attributions
  • Keeps tons of metadata for analyzing reading behavior
  • Taggable
  • Allows for comments/commenting
  • Could be used easily as a linkblog
  • Archives the original article
  • Is searchable
  • Could be used for collaboration and curation
  • Has Readability integrated
  • Has a pre-configured browser bookmarklet
  • Is open source and well documented

Who could want more?! I want to experiment a bit with it, play with multiple configurations, and then document parts before rolling out–particularly as it wasn’t necessarily intended for this use case, but I’ll have some more details shortly.

Owning my Online Reading Status Updates

As of October 30, 2016, I’ve slowly but surely begun posting what I’m actively reading online to my blog.

I’ve refined the process a bit in the last couple of weeks, and am becoming relatively happy with the overall output. For those interested, below is the general process/workflow I’m using:

  1. As I read a website, I use a browser extension (there’s also a bookmarklet available) linked to my Reading.am account to indicate that I’m currently reading a particular article.
  2. I have an IFTTT.com applet that scrapes the RSS feed of my Reading account for new entries (in near real-time) and this creates a new WordPress draft post on my blog. I did have to change my IFTTT.com settings not to use their custom URL shortener to make things easier and to prevent future potential link-rot.
  3. Shortly after I’m done reading, I receive a notification of the creation of the draft post to remind me to (optionally) post my comments/thoughts to the draft post. If necessary, I make any additional modifications or add tags to the post.
  4. I publish the post; and
  5. Optionally, I send POSSE copies to other silos like Facebook, Twitter, or Google+ to engage with other parts of my network.

Status updates of this type also have a pre-included O-embed with a synopsis of the content if the bookmarked site supports it, otherwise, a blockquoted synopsis stripped from the site’s meta-data is included.

Other near-term improvements may include custom coding something via the available Reading.am hooks to directly integrate with the WordPress Post Kinds plugin to use the URL post pattern http://www.yoursite.com/wp-admin/post-new.php?kind=read&kindurl=@url to shorten the workflow even further. Post Kinds automatically handles the wrapping of the post data in the appropriate microformats automatically. I also want to add a tidbit so that when I make my post I ping the Internet archive with the URL of the article I read so that it will be archived for future potential reference (hat tip to Jeremy Kieth for giving me the idea at IndieWebCamp LA a few weeks ago.)

I had originally played around with using the Post Kinds bookmarklet method directly, but this got in the way of the immediacy of reading the particular article for me. Using a PESOS method allows me to read and process the article a bit first before writing commentary or other details. I may also integrate a Hypothes.is based workflow into this process in which I use the hypothes.is browser etension to highlight and annotate the article and then use the Hypothes.is Aggregator Plugin to embed those thoughts into the post via shortcodes. The following post serves as a rough example of this, though the CSS for it could stand a bit of work: Chris Aldrich is reading WordPress Without Shame.

I was a bit surprised that Reading.am didn’t already natively support a WordPress pathway though it has a custom set up for Tumblr as well as a half a dozen other silos. Perhaps they’ll support WordPress in the future?

These new read post types can be found at the following URL: http://boffosocko.com/kind/read/?type=status?type=link.

Instagram Single Photo Bookmarklet

Ever wanted a simple and quick way to extract the primary details from an Instagram photo to put it on your own website?

The following javascript-based bookmarklet is courtesy of Tantek Çelik as an Indieweb tool he built at IndieWebCamp NYC2:

If you view a single photo permalink page, the following bookmarklet will extract the permalink (trimmed), photo jpg URL, and photo caption and copy them into a text note, suitable for posting as a photo that’s auto-linked:

javascript:n=document.images.length-1;s=document.images[n].src;s=s.split('?');s=s[0];u=document.location.toString().substring(0,39);prompt('Choose "Copy ⌘C" to copy photo post:',s+' '+u+'\n'+document.images[n].alt.toString().replace(RegExp(/\.\n(\.\n)+/),'\n'))

Any questions, let me know! –Tantek

If you want an easy drag-and-drop version, just drag the button below into your browser’s bookmark bar.

✁ Instagram

Editor’s note: Though we’ll try to keep the code in this bookmarklet updated, the most recent version can be found on the Indieweb wiki thought the link above.

Speed Reading on Web and Mobile

“Hi, my name is Chris, and I’m a Read-aholic.”

I

‘ll be the first to admit that I’m a reading junkie, but unfortunately there isn’t (yet) a 12 step program to help me.  I love reading lots of different types of things across an array of platforms (books, newspapers, magazines, computer, web, phone, tablet, apps) and topics (fiction/non-fiction and especially history, biography, economics, popular science, etc.).  My biggest problem and one others surely face is time.

There are so many things I want to read, and far too little time to do it in.  Over the past several years, I’ve spent an almost unreasonable amount of time thinking about what I consume and (possibly more importantly) how to intelligently consume more of it. I’ve spent so much time delving into it that I’ve befriended a professor and fellow renaissance man (literally and figuratively) who gave me a personal thank you in his opening to a best-selling book entitled “The Thinking Life: How to Thrive in an Age of Distraction.”

Information Consumption

At least twice a year I look at my reading consumption and work on how to improve it, all the while trying to maintain a level of quality and usefulness in what I’m consuming and why I’m consuming it.

  • I continually subscribe to new and interesting sources.
  • I close off subscriptions to old sources that I find uninteresting, repetitive (goodbye echo chamber), and those that are (or become) generally useless.
  • I carefully monitor the huge volumes of junk email that end up in my inbox and trim down on the useless material that I never seem to read, so that I’ll have more time to focus on what is important.
  • I’ve taken up listening to audiobooks to better utilize my time in the car while commuting.
  • I’ve generally quit reading large swaths of social media for their general inability to uncover truly interesting sources.
  • I’ve used some portions of social media to find other interesting people collating and curating areas I find interesting, but which I don’t have the time to read through everything myself.  Why waste my time reading hundreds of articles, when I can rely on a small handful of people to read them and filter out the best of the best for myself? Twitter lists in particular are an awesome thing.
  • I’ve given up on things like “listicles” or stories from internet click farm sources like BuzzFeed which can have some truly excellent linkbait-type headlines, but I always felt like I’ve completely wasted my time clicking through to them.

A New Solution

About six months ago in the mountain of tech journalism I love reading, I ran across a site launch notice about a tech start-up called Spritz which promised a radically different solution for the other side of the coin relating to my reading problem: speeding the entire process up!  Unfortunately, despite a few intriguing samples at the time (and some great details on the problem and their solution), they weren’t actually delivering a product.

Well, all that seems to have changed in the past few weeks. I’ve waited somewhat patiently and occasionally checked back on their progress, but following a recent mention on Charlie Rose, and some serious digging around on the broader internet, I’ve found some worthwhile tools that have sprouted out of their efforts.  Most importantly, Spritz itself now has a bookmarklet that seems to deliver on their promise of improving my reading speeds for online content. With the bookmarklet installed, one can go to almost any web article, click on the bookmarklet and then sit back and just read at almost any desired speed.  Their technology uses a modified version of the 1970’s technology known as Rapid Serial Visual Presentation (RSVP) to speed up your reading ability, but does so in a way that is easier to effectuate with web and mobile technologies.  Essentially they present words serially in the same position on your screen with an optimized center mass so that one’s eyes stay still while reading instead of doing the typical saccaddic eye movements which occur with typical reading – and slow the process down.

 

A photo of how Spritz works for speed reading on the web.
Spritz for speed reading the web.

 

As a biomedical engineer, I feel compelled to note the interesting physiologic phenomenon that if one sits in a rotatable chair and spins with one’s eyes closed and their fingers lightly placed on their eyelids, one will feel the eye’s saccades even though one isn’t actually seeing anything.

Spritz also allows one to create an account and log in so that the service will remember your previously set reading speed. Their website does such a great job of explaining their concept, I’ll leave it to the reader to take a peek; but you may want to visit their bookmarklet page directly, as their own website didn’t seem to have a link to it initially.

As a sample of how Spritz works on the web, OysterBooks is hosting a Spritz-able version of Stephen R. Covey’s book 7 Habits of Highly Effective People.

Naturally, Spritz’s solution is not a catch-all for everything I’d like to read, but it covers an interesting subcategory that will make things useful and easier.  Though trying to speed read journal articles, textbooks, and other technical literature isn’t the best idea in the world, Spritz will help me plow through more fiction and more leisurely types of magazine and online articles that are of general interest. I generally enjoy and appreciate these types of journalism and work, but just can’t always justify taking the time away from more academic pursuits to delve into them. Some will still require some further thought after-the-fact to really get their full value out of them, but at least I can cover the additional ground without wasting all the additional time to do so. I find I can easily double or triple my usual reading speed without any real loss of comprehension.

In the last week or so since installing a my several new speed reading bookmarklets, I’ve begun using them almost religiously in my daily reading regimen.

I’ll also note in passing that some studies suggest that this type of reading modality has helped those who face difficulties with dyslexia.

A picture of the Spritz RSVP reading interface featuring the word Boffosocko.
How to read Boffosocko faster than you though you could…

 

Speed Reading Competition

Naturally, since this is a great idea, there’s a bit of competition in the speed reading arena.

There are a small handful of web and app technologies which are built upon the RSVP concept:

  • Clayton Morris has also developed an iOS application called ReadQuick, which is based on the same concept as Spritz, but is only available via app and not on web.
  • Rich Jones has developed a program called OpenSpritz.  His version is opensource and has an Android port for mobile.
  • There’s also another similar bookmarklet called Squirt which also incorporates some nice UI tweaks and some of the technology from Readability as well.
  • For those wishing to Spritz .pdf or .txt documents, one can upload them using Readsy which uses Spritz’s open API to allow these types of functionalities.
  • There are also a variety of similar free apps in the Google Play store which follow the RSVP technology model.
  • Those on the Amazon (or Kindle Fire/Android Platform) will appreciate the Balto App which utilizes RSVP and is not only one of the more fully functional apps in the space, but it also has the ability to unpack Kindle formatted books (i.e. deal with Amazon’s DRM) to allow speed reading Kindle books. While there is a free version, the $1.99 paid version is more than well worth the price for the additional perks.

On and off for the past couple of years, I’ve also used a web service and app called Readfa.st which is a somewhat useful, but generally painful way to improve one’s speed reading. It also has a handy bookmarklet, but just wasn’t as useful as I had always hoped it might be. It’s interesting, but not as interesting or as useful as Spritz (and other RSVP technology) in my opinion since it feels more fatiguing to read in this manner

 

Bookmarklet Junkie Addendum

In addition to the handful of speed reading bookmarklets I’ve mentioned above, I’ve got over 50 bookmarklets in a folder on my web browser toolbar. I easily use about a dozen on a daily basis. Bookmarklets make my internet world much prettier, nicer, and cleaner with a range of simple clever code.  Many are for URL shortening, sharing content to a variety of social networks quickly, but a large number of the ones I use are for reading-related tasks which I feel compelled to include here: web clippers for Evernote and OneNote, Evernote’s Clearly, Readability, Instapaper, Pocket, Mendeley (for reading journal articles), and GoodReads.

Do you have a favorite speed reading application (or bookmarklet)?