Category: Education

Read Social Reading, Collaborative Annotation, and Remote Learning with Hypothesis (Hypothesis)
Last week Hypothesis saw the largest uptick in interest in our LMS integration since we released the app a little over a year ago. The vast majority of this interest came from individual instructors across the globe grappling with the challenge of moving their courses to remote delivery in the wake of the COVID-19 crisis.
Annotated Social Reading and Remote Learning with Hypothesis (Hypothesis)
Recipes for Annotation
We are also establishing a hub for teaching materials related to collaborative, digital annotation where we will share resources to help instructors get started with practices other teachers are already using. We would be grateful if veterans of Hypothesis, social reading, and online learning would share their lesson plans and activities with us so we can share with others and credit your work. Annotate this post with your ideas or email your contributions to education@hypothes.is.
Your Content Goes Here  ❧
Interesting… earlier today I was actually thinking about how it might be easier to help both students and teachers in their onboarding process. I had thought that a set up like Terry Green’s Open Patchbooks might be an interesting way to do this: see http://openlearnerpatchbook.org/ and https://facultypatchbook.pressbooks.com/
 
Replied to a tweet by Xinli Wang (Twitter)

Outline for a Hypothes.is Crash Course

I often find examples to be most immediately helpful. You might look at Literacy, Equity + Remarkable Notes = LEARN: Marginal Syllabus 2018-19 which has some solid multimedia resources around a group of educators annotating. It’s not only an interesting public example, but will introduce you to some helpful people in the space.

For a “textbook” example, I believe American Yawp may be one of the most annotated textbooks online.

I Annotate 2019 was an interesting conference and Hypothes.is has kindly aggregated videos of all(?) the talks. You can skim through some to find applications relevant to your interests. In addition to this example, the H blog is also a great resource for other examples and news.

More specific to your initial question, you’ve got a lot of options. You can open .pdfs on your local machine and annotate via Hypothesis, but if it’s for a bigger group, hosting it somewhere on the web that is easily accessible may be best. Hypothesis has also made some significant leaps for integrating their product into LMSes recently which also helps in seamlessly making accounts for new users.

Once it’s available to the group, you may want to decide whether you want the group to annotate in the public channel or if you want to annotate in a smaller private group. 

Most importantly, explore. Have fun. There are lots of off-label uses you’ll run across using the tool as you play around.

Thoughts on Wikity for WordPress

I spun up a new instance of Wikity today at http://wikity.chrisaldrich.net/ to test it out for potential use as a personal online wiki. My goal was also to test out how it may or may not work with IndieWeb-based WordPress pieces too.

Below are my initial thoughts and problems.

The /home/ page has a lot of errors and warnings. (Never a good sign.)

It took me a few minutes to figure out where the Wik-it! bookmarklet button was hiding. Ideally it would have been in the start card that described how the bookmarklet would work (in addition to its original spot).

The Wikity theme seems to have some issues when using for http vs. https.

  • Less seems to work out of the box with https
  • The main card for entering “Name of Concept or Data” didn’t work at all under https. It only showed the title and wouldn’t save. Switching to http seemed to fix it and show the editor bar.

I’ve tried copying over from Aaron Davis‘ Wikity instance, but the cardbox seems to fail on my end.

  • Nothing seemed to work at all when I had my site as https. In fact, it redirected to a URL that seemed like it wanted to run update.php for some bizarre reason.
  • On http I at least get a card saying that the process failed.
    • Not sure what may be causing this.
    • Doesn’t seem to matter how many cards it is.
    • Perhaps it’s the fact that Aaron’s site is https? I notice that his checkbox export functionality duplicates his entire URL including the https:// within the export box which seems to automatically prepend http://
    • Copying to my own wiki seems to vaguely work using http, but failed on https.

Multiple * in the markdown editor functionality within WordPress doesn’t seem to format the way I’d expect.

Sadly, the original Wikity.cc site is down, but the theme still includes a link to it front and center on my website.

The home screen quick new card has some wonky CSS that off centers it.

Toggling full screen editing mode in new cards from the home screen makes them too big and obscures the UI making things unusable.

The primary multi-card home display doesn’t work well with markup the way the individual posts do.

The custom theme seems to be hiding some of the IndieWeb pieces. It may also be hampering the issuance of webmention as I tried sending one to myself and it only showed up as a pingback. It didn’t feel worth the effort to give the system a full IndieWeb test drive beyond this.

Doing this set up as a theme and leveraging posts seems like a very odd choice. From my reading, Mike Caulfield was relatively new to WordPress development when he made this. Even if he was an intermediate developer, he should be proud of his effort, including his attention to some minute bits of UI that others wouldn’t have considered. To make this a more ubiquitous solution, it may have been a better choice to create it as a plugin, do a custom post type for wiki cards and create a separate section of the database for them instead of trying to leverage posts. This way it could have been installed on any pre-existing WordPress install and the user could choose their own favorite theme and still have a wiki built into it. In this incarnation it’s really only meant to be installed on a fresh stand-alone site.

I only used the Classic Editor and didn’t even open up the Gutenberg box of worms in any of my tests.

Summary

The Wikity theme hasn’t been maintained in four years and it looks like it’s going to take quite a bit of work (or a complete refactoring) to make it operate the way I’d want it to. Given the general conceptualization it may make much more sense to try to find a better maintained solution for a wiki.

The overarching idea of what he was trying to accomplish, particularly within the education space and the OER space, was awesome. I would love nothing more than to have wiki-like functionality built into my personal WordPress website, particularly if I could have different presentations for the two sides but still maintain public/private versions of pieces and still have site-wide tagging and search. Having the ability to port data from site to site is a particularly awesome idea.

Is anyone actively still using it? I’d love to hear others’ thoughts about problems/issues they’ve seen. Is it still working for you as expected? Is it worth upgrading the broken bits? Is it worth refactoring into a standalone plugin?

No doubt many have already seen that Springer has released about 500 books for free during the COVID-19 pandemic. According to Springer, these textbooks will be available free of charge until at least the end of July.

A bit of Googling will reveal people who’ve already written some code to quickly download them all in bulk as well. I’m happy with doing things manually as there’s only a handful of the 8GB of textbooks I’m interested in.

Browsing through, I’ll note a few that look interesting and which foodies like my friend Jeremy Cherfas may enjoy. (Though I suspect he’s likely read them already, but just in case…)

I’m not as well-versed in the history of educational technology as those like Audrey Watters, but after reading the opening of chapter 10 of The Art of Memory by Frances Yates, I’m prepared to call Pierre de La Ramée (aka Petrus or Peter Ramus) as the godfather of EdTech for his literal iconoclastic removal of the artificial memory from rhetoric and replacing it with his ‘dialectical order’.

To be clear, “Godfather of EdTech” is a perjorative.

Webmention for TiddlyWiki to enable website to website notifications and communication

What is a Webmention?

Webmention is a relatively recent web standard (or W3C recommendation) that allows notifications when one website mentions a URL on another website. Think of it like @mentions on social platforms, but instead of just working within a particular website from one account to another, they work across websites. Your website can now @mention my website!

For those who are interested in delving deeper into the idea and its implications, I’ve written a primer in the past : Webmentions: Enabling Better Communication on the Internet.

The goal is for other websites to be able to reference content in my TiddlyWiki website, and if those websites support sending the notifications as either webmentions (or the older pingbacks), I’ll get a notification that my content was referenced elsewhere on the web. This is just the beginning of allowing two way communication between websites.

My exploration today is how to quickly get these up and running on a public TiddlyWiki instance. The public part is important because webmentions won’t work for non-public URLs which includes private TiddlyWikis. If you’re wondering how to self-host a TiddlyWiki on your own domain, I’ve recently written up a tutorial for doing just that. At the end of this article, I’ll make a few notes about how one might use webmentions, particularly in a TiddlyWiki ecosystem.

I’ll start out by saying that writing a full JavaScript implementation of the Webmention spec is beyond my capabilities presently, but it could be something that TiddlyWiki core might implement in the future. (Maybe something like Lazymention which is written in node.js might be leveraged?)

Here I’m going to focus on using a third party service to do all of the heavy lifting and code our behalf. It’s relatively common, especially in the static website space, for websites to rely on third party or publisher services to either send or receive Webmentions on their behalf. Given my current knowledge of TiddlyWiki and how its internals work and my knowledge of Webmention services, I thought it would be quickest and easiest to look at using the Webmention.io service to handle receiving these @mentions from other sites on my behalf.

While this article may seem long, I’m hoping it’s detailed enough for those who are code averse to follow the recipe and do this themselves. If you can create a Tiddler, cut and paste some text, and follow the tutorial you won’t need to know anything about code. I did the entire thing myself in about five minutes from start to finish.

Receiving Webmention notifications for your TiddlyWiki

As a quick overview, we’re going to cut and paste a few lines of code into a special tiddler of our TiddlyWiki based website. This will allow us to do two things:

  1. Log into Webmention.io to create an account
  2. Allow other sites that send webmentions to us to find an endpoint on our TiddlyWiki website that accepts them on our behalf.

We’ll then rely on the Webmention.io dashboard to show us our notifications or received webmentions.

Logging into Webmention.io

Webmention.io requires you to log in with your domain name/URL and relies on you being able to authenticate yourself using it. Since I’m not aware of an IndieAuth or equivalent mechanism for using TiddlyWiki to log into Webmention.io, the quickest method to accomplish this is to rely on RelMeAuth using IndieAuth.com to log into Webmention.io using either a Twitter or GitHub account. From a non-technical perspective, we’ll be using either our Twitter or GitHub account and it’s OAuth2 security to log into the service.

First we want to put a link to our public TiddlyWiki website into the website field on either Twitter or GitHub using the profile settings of one of those services. Here’s what mine looks like on GitHub:

Screenshot of my GitHub accounts details featuring a link to my website

Next we want to place a corresponding link to the relevant service into the <head> of our TiddlyWiki site using one (it’s okay to use both) of the the following lines of code:

<link rel="me" href="https://twitter.com/username" />
<link rel="me" href="https://github.com/username" />

where you will replace the username in these links with the respective usernames of your accounts. (I’ll note that you don’t need to do this for both accounts, you can use either Twitter or GitHub.)

To place these lines into the appropriate location on your TiddlyWiki, you’ll want to create a tiddler with a name like $:/plugins/indieweb/core/rawMarkup and the tag $:/tags/RawMarkup.

Then cut and paste one or both of these links as appropriate into this tiddler and save it (and your TiddlyWiki).

You should now be able to go to webmention.io and enter the URL for your TiddlyWiki into the web sign in box and click “sign in”. The service will parse your website’s page, find the link to either Twitter or GitHub and present you with the appropriate sign in button for one or both of those services. Click on the button for your chosen service. IndieAuth.com will then take you to that service to log into it, or, if you’re already logged in, it will take you back to webmention.io to your new account.

Creating your Webmention endpoint

Within webmention.io you can now go to the “settings” page which will give you two more links which are your webmention and pingback endpoints. They will look something like this:

<link rel="webmention" href="https://webmention.io/example.com/webmention" />
<link rel="pingback" href="https://webmention.io/example.com/xmlrpc" />

where example.com will be replaced with the URL for your website.

Now you should cut and paste these two <link>s into the same tiddler you created above: $:/plugins/indieweb/core/rawMarkup. Now save the Tiddler and your TiddlyWiki. (Be sure to leave the previous links in case you need to log back into webmention.io in the future.)

You’re done!

That hopefully wasn’t too hard.

But what does this do? When another website links to your website and sends you a notification, the code on your page will delegate the receipt of the webmention to webmention.io which will verify that the sending site has your URL on a publicly viewable page (this helps to cut down on spam problems that pingbacks used to have). It will then store the notification for you.

If you need a reminder to check them occasionally, maybe you could add a Tiddler with the link to your dashboard to appear on your wiki when you open it next.

Perhaps in a future tutorial I’ll delve into the specifics of actually showing these mentions directly within your TiddlyWiki on the Tiddlers to which they relate.

Optional Webmention badge

Some may notice that I’ve put a small Webmention badge into the footer of my TiddlyWiki site to visually indicate to human readers that the site accepts webmentions. You can optionally do this for fun if you’d like.

Sending Webmentions with TiddlyWiki

Sending Webmentions seems to be an issue as the fragment-based URLs that TiddlyWiki uses as permalinks using JavaScript seem to cause an issue with many receivers. They apparently have problems resolving and parsing pages due to js;dr related issues. I would send webmentions manually, but most receivers I’m aware of have this js;dr problem. I’m not sure if there is an easy way around this issue.

Hyperchats, Wikis, and Open Educational Resources

What’s interesting about supporting Webmention, particularly from a TiddlyWiki perspective, is that if my TiddlyWiki is notified of mentions of it from outside sources, I can quickly cut and paste those responses directly into my Wiki pages in a pseudo-comment section similar to the comments section on this post which could serve as a model. If those mentions of a particular Tiddler are from other TiddlyWikis, I could also choose to drag-and-drop (or import) them into my TiddlyWiki!

If I want to go a step further, I could transclude those imported Tiddlers into the Tiddler that they’re in reference to. Perhaps I might do this under a heading of “@mentions” or perhaps “Comments” and suddenly I’ve got a way of displaying two-way conversations on my own TiddlyWiki site.

As is mentioned in Kicks Condor’s post about Hyperchat Modality, one could potentially use custom theming information (cleverly named “whostyles” in that post) from imported Tiddlers (or themes from other platforms) to identify the web identities of the sites they’re received from. I’ll also mention Kicks’ post about Hypertexting which is related and forms an interesting melange of websites, blogs, wikis, and hypertext of all kinds to form a more interesting web medium.

For the broader information collecting and building or academic communities (and here I can’t help thinking about the Open Educational Resources space that uses Creative Commons licensing to build their teaching resources), one could use these webmentions as a means of notifying sites that their content has been used, changed, or updated (typically those using Creative Commons will credit their source using a link). Then the receiver of the notification could optionally add to or change their version or even just collect the changes. This becomes particularly useful when the Tiddlers can be easily dragged and dropped between TiddyWikis!

As an explicit example, imagine a professor who wanted to build a textbook anthology, but who could do so by dragging and dropping a variety of Tiddlers from one site to another to create a quick textbook or reader for their students. This idea is particularly exciting to me when combined with the idea behind TW5-powered ebooks!

What could you imagine doing with webmention notifications on your TiddlyWiki site?

Read Open Online Office Hours by Sean Michael Morris (Sean Michael Morris)
In the interests of supporting faculty, teaching staff, and students at every level, Jesse and I will be offering weekly open office hours. We welcome anyone to attend and to bring their questions and challenges to the table.

Self-hosting TiddlyWiki with GitHub Pages

TiddlyWiki is most often used as a private wiki for personal note taking and creating private journals.

Because it is a single text file usually named index.html written in HTML, CSS and some JavaScript, I thought it would make an ideal candidate for a simple-to-use personal website that can be hosted on one’s own domain. As a researcher who appreciates the IndieWeb and Domain of One’s Own philosophies and uses my personal website as a commonplace book for both work and personal reasons, how could I resist?

TiddlyWiki

TiddlyWiki is easy to use, highly flexible, modifiable, and can be easily copied, backed up, and shared. There’s an active community of users and developers for the platform which dates back to 2004. There are a variety of examples and documentation online and plugins are literally as simple as dragging and dropping some files from one source directly into your own Wiki. For those interested in the OER movement, individual Tiddlers (TiddlyWiki’s name for cards or discrete entries within the wiki) can be easily dragged and dropped from other TiddlyWikis to copy them!

There are some useful instructions for hosting it almost everywhere–except on one’s own domain name.

The few easy options I’ve found for hosting a TiddlyWiki publicly online as a website were rely on someone else’s service as a subdomain. As much as I like the idea of TiddlySpot I really wanted to use my own domain name (not to mention that it’s non-obvious how to host a newer TiddlyWiki version 5 (TW5) instance there). I’d also seen TiddlySpace shut down a few years ago and didn’t want to deal with that potentiality—though I will admit that exporting would be as simple as downloading and moving a single file!

So after a month or so at tinkering around at several complicated solutions that always seemed beyond my grasp, I went back to IndieWeb basics. What is their recommendation for the easiest way to get a website up and running? The fact that an empty TiddlyWiki file is named index.html gave me my answer: set up a GitHub Pages-based website and simply connect it to my domain!

However, as simple as this pathway may seem to some, I thought I’d briefly document the process I took so others can do the same for themselves.

First I’ll presume you’ve got a domain name and a host that will allow you to change the CNAME for where your domain name is pointed. (If you don’t, check out https://indieweb.org/personal-domain for details.)

In short, you’re going to upload a single file to your GitHub account and then point your domain name at it.

The idea of GitHub may scare a lot of people, but you won’t need to use git, know any git commands, or even know how git works since I’ll describe steps that entirely use the graphical user interface and don’t come anywhere near using the command line or any complicated GitHub applications. It’ll be as easy as dragging and dropping.

Let’s start!

Step-by-Step Tutorial

Get TiddlyWiki

  • Go to https://tiddlywiki.com/ and click on the “Download Empty” button on their homepage. This will allow you to save a file called index.html to a convenient place on your computer.
  • This one file is the entirety of your future website! Guard it well.

GitHub

  • If you don’t already have one, create an account at https://github.com/
    • You’ll use this account and their free GitHub Pages service to host your website for free as long as the project folder (also known as a repository) you are hosting is public.
  • At GitHub create a new repository.
    • Name it username.github.io, where username is your username (or organization name if you’re doing it for your organization) on GitHub.
    • Give your repository an optional descriptive name. I named mine “A TiddlyWiki commonplace book”
    • Choose the “Public” option, otherwise no one will be able to visit your new website.
    • Click “Create Repository”
  • Upload your TiddlyWiki to your new repository
    • In the Quick Set Up box click on the link for “uploading an existing file”.
    • On the subsequent page you can either drag and drop the empty TiddlyWiki index.html file you saved on your computer or you can click “choose your files” to find and upload the file.
    • If you like, you can optionally add any additional README, License, or gitignore files as necessary. If you don’t know what these are you can safely skip them or revisit doing this later.
    • Under “Commit changes” give your upload a short title; the suggested “Add files via upload” is fine. You can add an optional extended description if you like.
    • Click on the “Commit Changes” button.
      • P.S.: If you haven’t done so before you’ve just made your first Git commit. Congratulations!!
    • Your https://github.com/username/username.github.io repository folder should now be ready and have your index.html file in it.

Setting up your domain

Setting up your website

  • It may take a while for the DNS system to propagate the changes from your host, but you should be able to visit your website and see your empty TiddlyWiki online. Congrations! You’ve got a new website.
  • You’ll notice in the TiddlyWiki documentation that the first rule of TiddlyWiki is to always save or back up your wiki!
    • (The second rule, in true Fight Club fashion, is–let’s say it together–to always save or back up your wiki!)
    • Since our wiki is on GitHub, we’ll want to use the Save to a Git Service instructions. Once set up, the changes to our TiddlyWiki should automatically self-save (this can be changed within your wiki’s Control Panel too) or they can be saved manually using the TiddlyWiki checkmark save functionality.
    • I’ll note that you can presently use your GitHub password in these settings, but this isn’t quite as secure as generating a custom token (or password), and sometime in late 2020, GitHub won’t allow you to use your basic account password this way, so you may as well set up the personal access token now.
  • Setting up Personal Access Tokens
    • You will need a Personal Access Token (essentially a password that will be specific to your TiddlyWiki account) in order to save your TiddlyWiki file.
    • On GitHub, click on your user icon, select “Settings”, then “Developer Settings”
    • Next click on the “Personal Access Tokens” tab and then click “Generate new token”
    • Give your token a descriptive name like “TiddlyWiki”
    • Under scopes, select “repo” (and all of its sub-scopes)
    • Click the “Generate Token” button at the bottom of the page.
    • Once created, immediately copy this string somewhere safe since navigating away from the page will not allow you to recover it. (If you do, you’ll need to regenerate a new token.)
    • Finally copy the text of your token into the Tiddler noted above in place of your password. There’s no explicit save button, just ‘X’ out of the settings control panel and click your TiddlyWiki’s main save button.
    • Your token value should be stored in browser local storage.
    • Now you can edit any Tiddler and save it.
      • After edits to your wiki, you’ll see that the checkmark icon on the page is red (depending on your theme), indicating changes to save. You can click on it to force a save.
      • I’ve found it convenient to wait for the TiddlyWiki to schedule the save on its own, however, make sure you’ve saved any changes you want before closing your browser tab.
      • Sometimes saves aren’t always successful and you’ll see error warnings, but usually they’ll clear themselves up on subsequent auto saves.
      • If necessary, you can visit your GitHub repository for your wiki and it will indicate the interval of time since the last save.

We’re done!

  • Everything after this you may be able to either handle yourself by poking around your new wiki or you can find lots of help in the two Google Groups listed above or by searching around online, in fora, or even step-by-step videos on YouTube.
  • If you’ve done this as part of the IndieWeb or A Domain of One’s Own, be sure to log yourself into the IndieWeb wiki and add yourself to the examples on their TiddlyWiki page where you might also find some other useful ideas.
  • If you like, you can delve deeper into GitHub and use one of their apps or command line functionality to regularly back up your website to your desktop, or you can make branches of your site on your local computer and then push those changes up to the cloud.
  • If you find problems or encounter issues, feel free to drop me a line or catch me or others in the IndieWeb chat.
Reposted a tweet by Stephen Downes (@oldaily) Stephen Downes (@oldaily) (Twitter)
Thanks for the shout out (and the Webmention) Stephen!