Table of Contents

Resources

hypothes.is adds a panel to any website to allow collaboration (annotate, comment, highlight, share, reply).

Annotation, Comments

hypothes.is

Adds a panel to any website to allow collaboration (annotate, comment, highlight, share, reply).

  • Usage (config script tag is optional):

    <script type="application/json" class="js-hypothesis-config">
  {
    "showHighlights": false
  }
</script>

<script src="https://hypothes.is/embed.js" async></script>

For additional information please have a look at the Guidance for Web Publishers. It features an overview on

  • Canonical links 
    <head>
...
<link rel="canonical" href="http://arstechnica.com/information-technology/2013/05/native-level-performance-on-the-web-a-brief-examination-of-asm-js/" />
...
</head>
  • Alternate links 
    <link rel="alternate" type="application/pdf" href="http://peerj.com/articles/1.pdf">
  • Structured Metadata

Files

Jumpshare

Share your work in seconds. Visually.

  • Drag and drop files to share : Drag files to the Jumpshare system tray icon and a link will be copied to your clipboard, ready to be shared.
  • Capture and annotate screenshots : Take pixel perfect screenshots with annotation and markup to share ideas, bugs and concepts.
  • Record screencasts in video or GIF : Use screen recordings to explain and guide your customers, team members, or clients quickly.
  • Access everything from one place : Everything you upload can be accessed and shared instantly from the Jumpshare system tray app.

Images

Gravatar

  • Usage: <img src="https://www.gravatar.com/avatar/HASH?s=200&d=identicon" />
  • HASH:
    • echo md5( strtolower( trim( "MyEmailAddress@example.com " ) ) );
  • parameter (s= or size=):
    • 1px up to 2048px
  • parameter (d= or default=):
    • 404: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response
    • mm: (mystery-man) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
    • identicon: a geometric pattern based on an email hash
    • monsterid: a generated 'monster' with different colors, faces, etc
    • wavatar: generated faces with differing features and backgrounds
    • retro: awesome generated, 8-bit arcade-style pixelated faces
    • blank: a transparent PNG image (border added to HTML below for demonstration purposes)

Style

Bootstrap

  • Source: https://getbootstrap.com/
  • CDN: https://www.bootstrapcdn.com/

Bootswatch

Themes build on Bootstrap

  • Source: https://bootswatch.com/
  • CDN: https://www.bootstrapcdn.com/bootswatch/

Yahoo Pure CSS

A set of small, responsive CSS modules that you can use in every web project.

  • Source: https://purecss.io/
  • CDN:
    • <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
    • <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
  • CDN (alt.):
    • https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css
    • https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/grids-responsive-min.css
    • //cdn.rawgit.com/yahoo/pure-release/v1.0.0/pure-min.css
    • //cdn.rawgit.com/yahoo/pure-release/v1.0.0/grids-responsive-min.css
    • ...

jQuery

  • Source:
  • CDN: <script src="//code.jquery.com/jquery-latest.js"></script>

Featherlight (jQuery)

  • Source: https://noelboss.github.io/featherlight/

  • CDN:

    <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.css" type="text/css" rel="stylesheet" />

    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

  • Usage: To get started, simply add the data-featherlight attribute with a selector, an image or an ajax-url.

  • Important: jquery.js needs to be loaded first.

  • Gallery-Extension: https://noelboss.github.io/featherlight/gallery.html

  • CDN:

    <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />

    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>

  • Usage:

    $(document).ready(function(){
$('.gallery').featherlightGallery();
});

Google Fonts

  • https://fonts.googleapis.com/css?family=Inconsolata|Lato

Fonts Awesome

  • Source: Fonts Awesome
  • Usage (local):
    • Get css and fonts: http://fontawesome.io/get-started/#modal-download
    • Add css to page head: <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    • Add css and font files to webspace. Fonts must be located relatively to css file in folder ../fonts/.
  • Usage (CDN):
    • Add remote css to page head:: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    • Tip: You don't have to copy the font files to your webspace. The css loads them from the CDN as well.