To AMP, or Not To AMP, That is the Question: Whether ’tis Nobler in the Mind to Bookmarklet

“Hi. My name is Chris and I’m a web browser bookmarklet junkie.”

Accelerated Mobile Pages

I’ve been following most of the (Google) Accelerated Mobile Pages (AMP) discussion (most would say debate) through episodes of This Week in Google where Leo Laporte plays an interesting foil to Jeff Jarvis over the issue. The other day I came across a bookmark from Jeremy Keith entitled Need to Catch Up on the AMP Debate? which is a good catch up by CSS-Tricks. It got me thinking about creating a bookmarklet to strip out the canonical URL for AMP pages (the spec requires them to exist in markup) to make them easier to bookmark and share across social media. In addition to social sites wrapping their URLs with short URLs (which often die or disappear as the result of linkrot) or needing to physically exit platforms (I’m looking at you Facebook with your three extra life-sucking clicks meant to protect your walled garden) to properly bookmark canonical URLs for later consumption, I’ve run across several Google prepended URLs which I’d rather not share in lieu of the real ones.

Apparently I wasn’t the first to think of such a thing, nor am I the second. Last night I came across a bit of research and genius by Kevin Marks who referenced a bookmarklet by Alan Storm back in January for switching to an AMP’d version of a web page (in an effort to cut down on the large JavaScript and advertising payloads that come along with most modern web pages). Naturally there was also a bookmarklet to switch back to the canonical (and non-Google) URL included for those who want to share an original.

Clean and Simple URLs

Kevin then took it a step further and included a JavaScript bookmarklet that shortens URLs down to their pure essence.

As an example, his canonical bookmarklet will take something ugly like
http://mashable.com/2017/03/26/dog-chasing-hockey-puck-joy/?utm_cid=mash-com-Tw-main-link#xvCRlgf_vsqY
and strip it down to its most basic
http://mashable.com/2017/03/26/dog-chasing-hockey-puck-joy
so that if you want to share it, it will remove all of the tracking cruft that comes along for the ride.

Even worse offenders like
https://www.nytimes.com/2017/03/24/opinion/sunday/chinas-communists-embrace-religion.html?action=click&pgtype=Homepage&clickSource=story-heading&module=opinion-c-col-left-region&region=opinion-c-col-left-region&WT.nav=opinion-c-col-left-region&_r=0
suddenly become cleaner and clearer
https://www.nytimes.com/2017/03/24/opinion/sunday/chinas-communists-embrace-religion.html

These examples almost remind me of the days of forwarding chain letter emails where friends couldn’t be bothered to cut out the 10 pages of all the blockquoted portions of forwards or the annoying

>  > >>  >>
>  > >>  >>
>  > >>  >>

nonesense before they sent it to you… The only person who gets a pass on this anymore is Grandpa, and even he’s skating on thin ice.

Remember, friends don’t let friends share ridiculous URLs…

So in that spirit, here are the three bookmarklets that you can easily drag and drop into the bookmark bar on your browser:

🔲 To AMP

🔳 Not to AMP

✁ Base URL

The code for the three follow respectively for those who prefer to view the code prior to use, or who wish to fashion their own bookmarklets:

As a bonus tip, Kevin Marks’ post briefly describes how one can use their Chrome browser on mobile to utilize these synced bookmarklets more readily.

Alternatives

Of course, if you want the AMP version of pages just for their clean appearance, then perhaps you may appreciate the Mercury Reader for Chrome. There isn’t a bookmarklet for it (yet?), but it’ll do roughly the same job, but without the mobile view sizing on desktop. And then while looking that link up, I also notice Mercury also has a one line of code AMP solution too, though I recommend you brush up on what AMP is, what it does, and do you really want it before adding it.

Syndicated copies to:

Sage vs Underscores

Sage vs Underscores | WordPress Starter Themes (Roots)
Sage makes you a better developer. Modern build tooling, live reloading, modern PHP & requirements, DRY templates with template inheritance and more.

Modern front-end workflow

If Underscores is a “1,000 hour head start”, Sage is a 10,000 hour head start.

Write stylesheets with Sass, automatically check your JavaScript for errors, optimize images, enable synchronized browser testing, and more with our gulp setup.

Syndicated copies to:

IndieWebify.Me and the Knowledge Gap | DataHive Consulting

IndieWebify.Me and the Knowledge Gap by Lynne Baer (DataHive Consulting)

Last week, a friend asked me what I thought of IndieWebify.Me, a movement intended to allow people to publish on the web without relying on the tools and storage of the giant corporations that currently control the majority of the social web. I’m the kind of person who gladly supports her local independent bookstores and farmers’ markets and food purveyors, links to IndieBound.org instead of Amazon to buy books, and admires the ideals of Open Source Software. So, I’m biased towards an independent and open experience. Continue reading “IndieWebify.Me and the Knowledge Gap | DataHive Consulting”

Syndicated copies to: