How to edit iGEM Wiki: Part I (without coding experience) — 1. Foundation

Published in

iGEM Copenhagen

8 min readJul 8, 2018

An introductory guide to help everyone contribute to team wiki regardless of coding skills, written by a coder

Why I made this guide 🤔

The wiki is one of the key deliverables of iGEM Competition. Every team has to put the work that they do over the summer on their wiki, and their work will then be archived, hopefully forever, on the iGEM website. ✨

Editing iGEM wiki is not that easy though. There is no interactive editing tool (follow the link more info: WYSIWYG) on the platform. As a result, you have to know HTML scripting to put your contents on the wiki. 👨🏻‍💻

Some of our team members want to learn HTML, but at the same time, we have to navigate ourselves through the lab work and figure out what human practices are. Then the question is how we can find time to learn a new (computer) language!? 😩

If I am only the person on the team that can code HTML, I can see myself as a bottleneck for getting our team’s contents on the wiki, especially right before the daunting wiki freeze. Perhaps, many other teams are in the same boat as ours. 🛶

Join us in literally the same boat in Copenhagen 🇩🇰! — Photo by Nick Karvounis on Unsplash

Hence, I would like to make this guide for our team members and other iGEMers to show that editing the wiki without HTML experience is possible. 😎

Prerequisites ✅

This guide assumes no prior experience in HTML. If you know a little bit of it, that’s awesome.

If you want to learn more about HTML, that’s wonderful! 🤩 It’s not that scary, and there are plenty of free guides online. I highly recommend the fantastic interactive tutorials on freeCodeCamp. (Their Medium publication is popular in the software development world, check it out here.)

I expect you to know and use Google Docs, which seems to be a standard tool for collaborative working on documents.

Please have your iGEM account and the URL of your team’s wiki ready. If you don’t know these, try asking your teammates.

Please follow this guide on your laptop or computer, as mobile screens would be too small to see the screenshots.

I will use Google Chrome as a primary web browser in the tutorial as it seems to be the most common web browser and I plan to have this tutorial to be accessible to as many people as possible. If something goes wrong in your preferred web browser, you may try Google Chrome to see if it helps.

We will use the original iGEM wiki template in this tutorial and on our wiki. If your team use your own template, some of your flashy features might not work as expected. Please consult your brilliant developers for these mishaps.

Otherwise, if you have any questions specific to this tutorial, I am more than happy to answer your questions. Just drop them in the comment section below, email us at igemku2018 [at] gmail.com, or contact us on any social media (links at the end of this article).

Roadmap 🗺

Part I: Developing the wiki without coding experience

1. Foundation — The fundamental starting point of the whole series. Later on, we will develop upon the material presented here.

2. Adding a photo — It sounds easy, but it isn’t that straightforward.

3. Adding a new page — The provided template doesn’t have the page you want. No problem.

4. Things to consider — Plenty of quirks that you have to think about when you publish a wiki page.

5. Advanced no-HTML —How we can decorate our wiki further without coding.

6. many more to come…

Part II: With coding, you can do more stuff and make your life easy

1. Polishing the HTML — We write code not only for computers but also for other people to read our code. The code generated from the converter is a little messy. We need to make our code human-friendly.

2. Local development — You don’t want to demolish your team’s wiki, right? Why not test freshly scripted code on your machine first?

3. Editing the wiki without opening the website — Click. Click. Click. I lose count of how many time I have to click to edit a single wiki page. Let’s write a single line of command to do all the clicks for us!

4. Advanced HTML — Do you want to take your wiki to the next level? Read this.

5. many more to come…

Are you ready? Let’s start!

Part I — 1. Foundation

These 10 steps will gently pave the way for you to become a wiki contributor. This tutorial is a lot easier than lab work or finding out what can be considered Human Practices. Trust me. 🤓

1. Get ready ☕️

This tutorial will take about 10 – 30 minutes. (The last step might take a couple of hours or a whole night though. 😂) Make sure your laptop is charging or has enough battery. Avoid distractions. Get yourself a cup of coffee, if needed. (I don’t drink coffee by the way. 🙅‍♂️) Prepare your mind by reading the following brief.

We will write our content on Google Docs, then use a free add-on to convert our content into HTML code. We can copy the HTML code and paste it into the wiki directly. That’s it!

2. Have your content ready on Google Docs 📝

In this first tutorial, we will try some easy components first: text, link, heading, table, and list.

The converter we will use can recognise some formatted components in your Google Docs, and can automatically convert these components into proper HTML tags.

You may see my sample Docs here: http://bit.ly/wiki-tutorial-docs

Text

The converter can recognise

the text itself
formatting: bold, italic, underline, superscript, subscript
link

The converter cannot recognise

size
font
colour
alignment (left, centre, right, justify)

We can edit these unrecognised features by modifying the HTML code later on.

Heading

It’s recommended to use headings. Headings provide structure to your document and your HTML file.

Simply follow three steps here:

Select the text to be assigned a heading
Click the formatting selection box
Select an appropriate heading level

Table

The converter can recognise the table structure, that is, the numbers of rows and columns. It cannot recognise formatting, including border and background colours.

List

It is advisable to use the ordered numbered list and the unordered bulleted list, instead of typing the numbers or dots manually.

3. Install ‘GD2md-html’ 🛠

Simply follow this screencast and give the permission to the add-on. You need to do this step once.

There are 5 simple steps:

Click ‘Add-ons’ on the menu bar
Click ‘Get add-ons …’
Search for ‘gd2md’
Click ‘+ FREE’ button
Follow the instruction for permission

4. Convert your content into HTML 🔀

Click ‘Add-ons’
Hover on ‘GD2md-html’ and Click ‘Convert’
Click ‘HTML’
Ignore the comment in the beginning (between <! — — — and — — — >, inclusive)
Copy the following HTML code

It’s time to transfer the HTML code to the wiki.

5. Login 🔑

Find ‘login’ link on the menu bar of iGEM website.

6. Go to the page 🚶‍♂️

Now, we are ready to edit the page we want.

Find the page. In the example above, I selected the ‘Team Members’ page.
Go to ‘wiki tools’ in the menu bar and Click ‘Edit’

7. Paste the code 📥

Replace the content between <html> and </html> with the auto-converted HTML code we have

8. See preview 👀

Click ‘Show preview’ to see whether you get what you expect

9. Publish 🖋

If everything (or most of the things) looks fine, there is only one last thing you have to do. Write a summary of your change. Make it sensible. You’ll thank yourself later, when you or your teammates what to find something from the past or trace what goes wrong.

Finished? The ‘Save page’ button is ready to serve you. Go ahead!

Take the responsibility!

Don’t worry if you make any mistakes, all old versions of the page are preserved. You can undo your changes.

This is the page created from the example Docs earlier: http://bit.ly/wiki-tutorial-page. It looks pretty awesome, right?

10. Celebrate 🍻

Well done! 🎉 You’ve successfully published your wiki. It’s time to celebrate. Why not show the work to your friends or me? Everyone wants to see it. 😊

Fancy some beers with your teammates? (I don’t drink beer either.)

I can think of many alternative methods to make editing wiki easy for everyone. The method presented here seems to be the most intuitive one. Hence, it should help everyone to familiarise themselves with the wiki system first before moving onwards to more complicated, yet competent methods, which I will write about later. If you have any simple alternatives, I’d be happy to hear them.

Next articles will show you how to add photos, add new pages, and other things to consider when you upload your wiki.

If you find my article useful, please spread the word and share the link to this tutorial. You’ll help many more fellow iGEMers. Let’s make iGEM awesome together! 🎊

To receive updates from iGEM Copenhagen Team, you may subscribe to our publication iGEM Copenhagen on Medium, our Facebook page, Twitter, and Instagram.

As of June 2018, we have received support from Department of Plant and Environmental Sciences, University of Copenhagen, SnapGene, and IDT.

If you’re interested in supporting us, please contact us at igemku2018 [at] gmail.com, or simply share our contents. We greatly appreciate all kinds of support in the making of our PharMARSy.