Hey there! This is Sasi Mitra, the Wiki Developer talking directly to you. Let’s keep this one page a bit informal, shall we?

This is my second time working on an iGEM Wiki. I had the opportunity to contribute as a Student Volunteer last year for IISER Tirupati’s iGEM team. And I must say, seeing the project through from start to end brought a fresh perspective to the whole experience, and it put into perspective how much I grew as a coder in the year.

When I took on the role of Wiki Developer, my first step was to dive into the wikis from previous years to understand what I needed to create. A few things caught my eye, and I knew I had to ensure they were part of the wiki I was crafting:

1. User-Friendly Navigation: The wiki essentially serves as a comprehensive project report, documenting all the hard work our team has poured into various technical subjects. Given the inherently dense and technical nature of the content, it's like a collective textbook that our team has authored. So, I made it a priority to guarantee that navigating through this repository of knowledge was as smooth as flipping through the pages of a well-organized textbook.
2. Aesthetically Pleasing Design: Considering that readers would likely spend some quality time delving into the wiki's content, it was crucial to ensure that the website's design was not just eye-catching at first glance but also remained visually appealing during extended reading sessions. After all, we want our readers to enjoy the journey through our treasure trove of information.

This whole wiki was written in HTML, CSS, and Javascript for the static pages, with a Python Flask framework in the backend. The source code for the same can be found on the GitLab here.:

We could not make this wiki without various Open Source tools, software, and libraries. Aside from the basic tools like HTML, CSS and Javascript, few we would like to give a special mention to are:

1. Visual Studio Code: A powerful Text Editor with integrations to make coding easy in many programming languages
2. Firefox and Chromium: Featured and Powerful Browsers and Browser Frameworks. Almost everyone accesses the internet using a flavor of one of these two browser frameworks.
3. W3 CSS Framework: A modern, responsive, mobile-first CSS framework that provides equality for all browsers and all device sizes while being extremely easy to learn from their easy to read documentation and plenty of examples.
4. Bootstrap CSS Framework: A free and open-source CSS framework for responsive, mobile-first front-end web development, the most popular CSS framework being used on the web.
5. Python Flask: A micro web framework written in Python. It allowed us to easily replicate the conditions on the iGEM server, where the website was hosted.
6. UIverse: A massive collection of the code necessary for beautiful UI Elements, all available open source.
7. Markdown: A Lightweight markup language that allows one to make simple documents. It is simple and accessible to non-technical audiences while giving all the necessary complex features of a Word Processor or LaTeX while being easy for a developer to convert to HTML code.
8. Codepen: A social development environment where a lot of users share their creations while also providing the necessary tools to build and test your own creations.
9. Previous iGEM wikis: They’re all available under the Creative Commons license. If you find a cool wiki, it’s fairly easy to see how they built it.

One tool, not open-source, that was invaluable for our working process was Notion. The whole team documented our work on the platform, and all the written text was available as Markdown and HTML for me to upload to the final website, making things very easy to work on and saving a lot of time in the final crunch before the wiki freeze.

I believe anyone interested in web development should look at these softwares for how easy they make the web development process.

Beyond these, I would also like to mention IISER Pune’s 2021 iGEM WiKi. The first draft of our wiki was essentially a replica of theirs, and a large chunk of our current codebase carries similarities to theirs. We would also like to mention Leiden University’s 2020 iGEM Team. Somehow they got KaTeX working, which we used to render LaTeX on our wiki. I don’t know how they got it working, but I just copied their code, and we could show off the amazing work done by our Drylab team in the best way possible on the Model page. They also developed a pretty comprehensive guide on how to be inclusive to color-blind in your design, which played a large role in our choice of website design.

IISER Pune 2021 WiKi: https://2021.igem.org/Team:IISER-Pune-India/Inclusivity

Leiden University 2020 WiKi: https://2020.igem.org/Team:Leiden/Inclusion

While one might imagine coding to be a massive part of making a wiki like this, and it is. However, I would like to bring attention to my team members, who designed many beautiful mockups and images to fit into the website, where my coding skills, or time, fell short. This wiki would not be possible without the creativity of my teammates, who put in the effort to make every part of the wiki the best it could be.

Lastly, I would like to thank our seniors from the 2022 iGEM IISER Tirupati team, who allowed me to work on their wiki last year. I learned a lot working with their Wiki lead, Mr. Selva Bharathi, and a lot of the code we developed for the 2022 wiki was reused for this wiki as well.

Now, for a few memes to highlight our rapidly spiraling mental instability as we worked on this wiki on a deadline.

Despite what the commit history may look like, I certainly had fun making this wiki. I hope you had fun going through it.

-

Sasi Mitra, Signing Off.