iGEM Wiki Web Workshop 1

Jonas Johansson
Jul 10 · 11 min read

What is a wiki? 🙋

A website or database developed collaboratively by a community of users, allowing any user to add and edit content.

Getting started

Editing the page!

{{Stockholm}}<html>

What happens in <html> stays in </html>

</html>
<hr>
<div class="column full_size">
<marquee>I was cool in the 90s!!</marquee>

I did it my way…

Sublime editor with line numbers, syntax highlighting and intending
<h1>Hello iGEM world!</h1>

I got 99 problems but creating a page ain’t one

Now sissy that walk!

p { color: red; } // this will make all paragraphs red!
.column { width: 400px; }

Prototyping the wiki

Introducing Markdown

Screenshot of our Notion page for the wiki

Debugging 🐛

Bonus 🎉 Password protect your wiki 🔐

<style>
div#content.hidden {
display: none;
}
</style>
<script>
var content = document.querySelector('#content');
content.classList.add('hidden');
var pw = '1234';
var access = prompt('Enter password');
if (access == pw) {
content.classList.remove('hidden');
} else {
window.alert('Wrong password 😥');
}
</script>

Summary

Resources

Wiki

Learning

Software

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade