Skip to content

Instantly share code, notes, and snippets.

@dergachev

dergachev/README.md

Last active November 9, 2022 05:42
Show Gist options
  • Save dergachev/4532260 to your computer and use it in GitHub Desktop.
Save dergachev/4532260 to your computer and use it in GitHub Desktop.
Download ZIP
descriptive-url.bookmarklet.js
Raw
README.md
Raw
descriptive-url.bookmarklet.js
function descriptiveURL() {
var headingText = document.title.replace(/\|.*$/, ''); // removes anything after a pipe, eg '| drupal.org'
if (window.location.host == 'drupal.org') {
headingText = headingText.replace(/^#[0-9]+: /, '') // for drupal.org, remove leading '#12345: ' from title
}
// adapted from https://github.com/riverside/friendurl/blob/master/jquery.friendurl.js
headingText = headingText.toLowerCase() // change everything to lowercase
.replace(/^\s+|\s+$/g, "") // trim leading and trailing spaces
.replace(/[\s]+/g, "-") // change all spaces to a hyphen
.replace(/[^a-z0-9_./-]+/g, "") // remove all non-cyrillic, non-numeric characters except: hyphen, underscore, period, slash
.replace(/[-]+/g, "-") // replace multiple instances of the hyphen with a single instance
.replace(/^-+|-+$/g, "") // trim leading and trailing hyphens
.replace(/[-]+/g, '-');
// console.log(headingText);
window.location.hash = headingText;
}
descriptiveURL();
Raw
index.html
<html>
<title>Descriptive URL bookmarklet</title>
<head>
<style type="text/css">
.button-wrapper {
margin: 2em 0;
}
.inline-button,
.button {
/* base64 encoder: http://www.greywyvern.com/code/php/binary2base64 */
/* Source image: http://tiny.cc/public/images/default-favicon.ico */
background-image: url(data:image/vnd.microsoft.icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAA+/v8APn3+QCeTWQAcmh+APj5+gBVKksA9/X3APb29gD08vMA9/j5APT09gD7/PwA8/HyAPPz9QD6+/sA9fP1AGcwWQDy8vQAOB07APn6+gD49vcA2eryAPX19gCckqgA8/HzAPb19gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMTExMTExMTExMTExMAAAAGDQ0NDQ0NDQ0NDQ0GAAAAERkZGRkZGRkZGRkZEQAAAAMJCQkJCQkJCQkJCQMAAAADEg4SDhISEg4ODg4DAAAAAxAQEBAQEBAQEBAQAwAAAAMaGhoaGhoLFxcXGgMAAAADBwcHBwcHBwcHBwcDAAAAAxUVFRUVFRUVFRUVAwAAAAMCAgICAgICAgICAgMAAAAECgUKBQoKCgUWFhYEAAAABAUUBRQFBQUYGBgYBAAAAAQUDxQPFBQUGAgIFhgAAAAEDwEPAQ8PDxgIFhgAAAAABAEMAQwBAQEYFhgAAAAAABgYGBgYGBgYGBgAAAAAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACABwAAgA8AAIAfAAA=);
background-repeat: no-repeat;
background-color: #65a9d7;
background-position: 10px center;
padding: 10px 20px 10px 32px;
border-radius: 8px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.inline-button {
display: inline;
background-color: transparent;
padding-right: 3px;
padding-left: 28px;
font-size: 1em;
background-size: 13px 13px;
}
.inline-button a {
text-decoration: none;
color: #65a9d7;
}
body {
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
font-size: .9em;
color: #444;
}
p {
line-height: 1.5em;
margin: .5em 0 1em 0;
}
ul {
line-height: 2em;
list-style-type: none;
padding-left: 1em;
}
</style>
</head>
<body>
<section data-markdown>
# Descriptive URL bookmarklet
The _Descriptive URL_ bookmarklet is helpful if the URL you would like to paste is too short. It makes a descriptive URL for the current page.
To install the bookmarklet, drag this link to your bookmark toolbar:
<div class="button-wrapper"> <a class="button" href="javascript:(function(){var s = document.createElement('script');s.src='https://gist.github.com/raw/4532260/descriptive-url.bookmarklet.js';document.body.appendChild(s);})();">Descriptive URL</a> </div>
## How to use it
Go to a site with overly short URLs (see examples below), and click on the bookmarklet to append the page title to the end of the URL. Voila!
![Screenshot for descriptive-url.bookmarklet.js](http://dl-web.dropbox.com/u/8325927/screenshots/NJTPYR-2013.1.14-14.36.png)
## Where you might use it
Here are some more examples of websites where it's useful:
<ul>
<li><a href="http://www.youtube.com/watch?v=v-pyuaThp-c#doodling-in-math-class-connecting-dots-youtube">http://www.youtube.com/watch?v=v-pyuaThp-c#doodling-in-math-class-connecting-dots-youtube</a></li>
<li><a href="http://ihackernews.com/comments/5043231#hacker-news-mobile-devopssysadmin-cheatsheet">http://ihackernews.com/comments/5043231#hacker-news-mobile-devopssysadmin-cheatsheet</a></li>
<li><a href="https://github.com/dergachev/chrome-xpath-link/issues/2#create-a-bookmarklet">https://github.com/dergachev/chrome-xpath-link/issues/2#create-a-bookmarklet</a></li>
<li><a href="http://news.ycombinator.com/item?id=5043231#devopssysadmin-cheatsheet">http://news.ycombinator.com/item?id=5043231#devopssysadmin-cheatsheet</a></li>
<li><a href="http://drupal.org/node/1427148#meta-how-should-joke-modules-be-handled">http://drupal.org/node/1427148#meta-how-should-joke-modules-be-handled</a></li>
<li><a href="https://gist.github.com/4331769#rule-of-thirds-bookmarklet">https://gist.github.com/4331769#rule-of-thirds-bookmarklet</a></li>
<li><a href="http://bl.ocks.org/4360892#u.s.-airports">http://bl.ocks.org/4360892#u.s.-airports</a></li>
<li><a href="http://www.redmine.org/issues/12778#defect-12778-upgrade-to-rails-3.2.11-redmine">http://www.redmine.org/issues/12778#defect-12778-upgrade-to-rails-3.2.11-redmine</a></li>
<li><a href="https://twitter.com/dergachev/status/290914183220981760#twitter-dergachev-remembering-aaron-swarz-the-...">https://twitter.com/dergachev/status/290914183220981760#twitter-dergachev-remembering-aaron-swarz-the-...</a></li>
<li><a href="https://docs.google.com/spreadsheet/ccc?key=0AonYZs4MzlZbdERaRzgxaUcwYXVRZFpaR3ZrekREb2c&hl=en&authkey=CIretNoB#corruption-index">https://docs.google.com/spreadsheet/ccc?key=0AonYZs4MzlZbdERaRzgxaUcwYXVRZFpaR3ZrekREb2c&hl=en&authkey=CIretNoB#corruption-index</a></li>
<li><a href="https://issues.apache.org/jira/browse/SOLR-4305#solr-4305-xss-vulnerability-in-solr-/admin/analysis.jsp-asf-jira">https://issues.apache.org/jira/browse/SOLR-4305#solr-4305-xss-vulnerability-in-solr-/admin/analysis.jsp-asf-jira</a></li>
<li><a href="http://www.craigslist.org/about/best/inl/2434325556.html#best-of-craigslist-ugly-mean-cat-free">http://www.craigslist.org/about/best/inl/2434325556.html#best-of-craigslist-ugly-mean-cat-free</a></li>
<li><a href="http://www.flickr.com/photos/54771108@N07/6959604522/#circus-clown">http://www.flickr.com/photos/54771108@N07/6959604522/#circus-clown</a></li>
</ul>
## Get the source code
To get the source code, visit <a href="https://gist.github.com/4532260#descriptive-url.bookmarklet.js">https://gist.github.com/4532260#descriptive-url.bookmarklet.js</a>
<a href="https://gist.github.com/4532260"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
</section>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script>
// adapted from http://blog.harakys.com/blog/2012/02/21/embed-markdown-into-your-html/
// see also https://gist.github.com/1343518
[].forEach.call( document.querySelectorAll('[data-markdown]'), function fn(elem){
var html = (new Showdown.converter()).makeHtml(elem.innerHTML);
elem.innerHTML = html;
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37659053-1']);
_gaq.push(['_setDomainName', 'ocks.org']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment