Share what you are working on and using!

Development
39

To allow another way for people to engage with my writing, I have decided to make highlights and annotations native on my blog through Hypothesis! Check out an example of it in action here.

If you want to use it in your blog, all it requires are some lines of code to your Custom JavaScript (feel free to mess with the custom branding to fit your blog):

// src: https://hypothes.is/embed.js

window.hypothesisConfig = function () {
  return {
    "openSidebar": false, 
    "theme": "clean",
    branding: {
      appBackgroundColor: 'white',
      ctaBackgroundColor: 'rgba(3, 11, 16, 1)',
      ctaTextColor: '#eee',
      selectionFontFamily: 'helvetica, arial, sans serif'
    }
  };
};
5 Likes
40

I just read your post on this. I had never heard of Hypothesis, but this is awesome! Infinitely better than a confusing “like”. Thank you so much for sharing this!

41

I’ve noticed you did remove it again. Did you run into issues?

42

Hi @mikka, no issues so far - it should still be up. Did you run into issues seeing annotations or making them?

The way I have it on my blog is that it remains hidden until you highlight a part of the text - then it prompts you to annotate. There are also yellow highlighted parts of the text which are annotations. Clicking either brings up the Hypothesis sidebar to start writing or viewing annotations on that post. I wanted a clean look rather than a sidebar interfering with the reading experience.

Hope that clarifies things

43

You’re welcome @blake! Hope that it works well for your blog. Let me know if you run into any issues using it. Be sure to share your blog so we can start annotating!

44

I found the culprit, it’s my experimental browser under Dex on the S6 that breaks on some JavaScript. It’s fixed now, and I’ve joined the experiment.

1 Like
45

Ah excellent! I just added an annotation on the post.

46

Just want to continue on the embedding Hypothesis annotations on your Write.as blog project:

I was able to create a Glitch app that updates a post with new annotations every time one is made on my Write.as blog. The post is formatted like this. Feel free to remix the app here and ask questions if needed.

1 Like
47

While Remark.as isn’t ready yet and Submit.as is pricy, I’ve searched for a free (and anonymous) chatroom system that I could incorporate into my blog (in order to facilitate communication). I found Minnit, which seems to be quite simple to use. I gave it a shot and included a chat page in my blog to test it.

Let’s see what happens.

1 Like
48

Thanks for sharing @Cat! I would have never considered embedding a chatroom system. This just adds another layer of interesting possibilities. Could you share how you embedded it? I am assuming part of it is some code put into the Custom JavaScript?

49

Hi, @cjeller1592, I’m glad you’re interested! Here you are:

Code 
if (window.location.pathname.includes('/chat')) {
  const div = document.querySelector('.e-content');

  div.innerHTML = `<strong>AVISO:</strong> este é um chat incorporado que NÃO FAZ PARTE do Write.as. Ao continuar, seu IP poderá ser registrado por terceiros. Se privacidade é um problema para você, utilize uma VPN ou abstenha-se continuar. Você foi avisado.

    <a href="#" id="load-chat" style="display:block;width:100%; text-align:center">Carregar chat</a> 
  `;

  document.querySelector('#load-chat').onclick = () => {
    div.innerHTML = `<iframe src='https://minnit.chat/oidiotablog?embed&nickname=' style='border:none;width:90%;height:500px;' allowTransparency='true'></iframe><br>`;
  };
}

The important part is the onclick event, which replaces the post’s content (which is a div that contains the e-content class) with the iframe that contains the embedded chat. You could skip all the “click this link to load the chat” thing and just use the code inside the event, thus simplifying it:

Code 
if (window.location.pathname.includes('/chat')) {
  const div = document.querySelector('.e-content');
  div.innerHTML = `<iframe src='https://minnit.chat/oidiotablog?embed&nickname=' style='border:none;width:90%;height:500px;' allowTransparency='true'></iframe><br>`;
}

I then added a post with a chat slug, which is verified in the if (window.location.pathname.includes('/chat')). The included message with the link button is for people who are concerned about their IP addresses being tracked by third parties. Since Minnit registers the IP address of every user in the chat, the embedded chat isn’t loaded until the person clicks the link to load it.

Also, I didn’t put a lot of effort into searching for an embeddable chat system. The first one that I found was Minnit. I’m open to better suggestions, though.

2 Likes
50

This is great, thanks @Cat! I actually like the added detail of the “onclick” event. Having the ability to opt-in first rather than having it happen automatically is always a plus.

There are two other open source embeddable chat systems I have seen used on Write.as - First is Utterances, a commenting system based on Github issues. Anyone who makes a comment needs a Github account (which is a deal breaker for some). Then there is Commento which has a “name your own price” model.

Another alternative is allowing your posts to be annotated on with Hypothesis, a free web annotation platform. It works by allowing someone to highlight parts of your post and make annotations through them. You do need an account to do this but it is free and allows you to annotate the rest of the web. I have it implemented on my blog and another Write.as user, @mikka has it on his. See it in action on one of Mikka’s posts here.

Hope that helps!

1 Like
51

Interesting! I guess I’ll try embeddeding Commento into my blog posts as well and see what happens. Thanks for your suggestions!

52

No problem @Cat! I am glad to see your experimentation with Write.as, especially with all the channels of interaction on your blog. Do let us know how it goes!

1 Like
53

I don’t know if it fits in here, but Ive just implemented a maze game in my blog (out of pure boredom :joy:). I’ve also programmed some bots to solve the generated mazes, each one using a different algorithm. Everything in pure JS.

I’ve also noticed, while doing this, that there’s a limited amount of JavaScript we can add to our blogs (about 1300 lines of code – depends on how much code you put on a single line). Had to use a js minifier to reduce my code so it could be uploaded to my blog.

2 Likes
54

I don’t think we’ve had anyone run into the limit for Custom JS, so knowing it is 1300 lines is good to know! And the maze game is awesome! I had no idea about the Manhattan Distance and maze algorithms. Is it possible to share the repository?

Makes me think if there are other interesting possibilities with the Custom JS, especially with interactive fiction and other choice-based writing.

55

Trying to take the idea of an embedded form that updates a Write.as post and put it into action with an open course called Blogging Futures. The structure of the course is an open blogchain, meaning that people write posts on their own site and contribute to the ongoing thread. In order to make this possible, I used an embedded form so that people could add their post to the conversation.

Check it out and join in if you’d like. It is a conversation about the future of writing on the web and it’s been picking up. Would love to have you all contribute a post or two.

56

Just sharing a trick that I discovered, to disable the Stats link from the drop-down menu when logged in.

/* Hide Stats link */
  nav#manage ul a[href="/me/c/<UserName>/stats"] {
  pointer-events: none;
  color: #fff;
  background: #fff;
}
1 Like
57

That’s great @dino! I experimented with your code and found that below works equally well, even removing the white space left in the menu:

nav#manage ul a[href="/me/c/<UserName>/stats"] {
  display:none;
}

This actually builds off something I did with my blog (and looks like you did too from reading yours) - removing the view count on posts for your blog when logged in. The CSS looks like this:

.views {
    display: none;
}

Combined together, this is a great way to actively remove the compulsion to check views and blog stats so that you can focus on what matters in the first place - writing.

Many thanks again for sharing this!

1 Like
58

@cjeller1592 that’s even better! Now it looks as though the link was never there in the first place, perfect.