Coding Memories
Data • Coding • Front End
Jul 31
Hi, there!
I was walking down memory lane the other day (in my head, I was actually working at a coffee shop) and as I was finishing cleaning up some project documentation, I remembered something.
Back in one of my previous lives, when I used to work for the iGEM foundation and was responsible for maintaining websites, I had to teach myself how to code.
While I wouldn’t call myself an engineer, i do consider myself a very technical designer and I’m used to designing and implementing websites. Once I started creating them I got hooked. The more I did it, the more I wanted to do it. I started with html and css and ended up learning javascript and jquery.
Redoing my portfolio website has awakened that coding itch again, and while I keep polishing my front-end skills, I wanted to go back and check a little project I did a few years ago. Ready to look into some old javascript?
Let’s review this through a STAR lens meaning → situation, task, actions and results.
Pro tip: this is a super useful structure whenever you are talking about your projects - ask a PM friend for help to refine your story
Caffeinated and ready to code!
1) Situation
In 2020 a lot of things had to suddenly become remote – you know why, there is no need to repeat it. For iGEM it was the same, the event that was supposed to take place in the Hynes Convention Center and bring together more than 300 student teams from all over the world had to pivot quickly to a fully remote experience.
The team hurried to reorganize in-person presentations, workshops and panels into an online agenda. This situation however opened a new opportunity. Since our audience would be tuning in from all over the world, now we had more hours of the day to connect over synbio.
Great! Now our attendees had a richer agenda to choose from. The problem now was making that schedule easy to browse and navigate for all our participants, regardless of time zone.
Good luck to me, I thought.
Screenshot of the tool
2) Tasks
As the sole designer I was in charge of the visuals and websites, so it landed on my plate to solve this little problem. I set aside a few days to specifically work on it.
I started with research. I knew that ideally we needed a quick solution we could have directly on our platform.
Back then I looked at different tools just to make sure I wasn’t reinventing the wheel. There were several paid options we could connect to, but we needed something low cost and tailored to our specific needs. Something flexible that we could update on the day of without any issues. It was time to code.
I already had styled the CSS and implemented our sites on MediaWiki and done some JS updates to set up some forms teams had to submit. How hard could this be?
Here is the main function of the code!
3) Actions
Rereading my code, I'm glad I left comments. I went all out — kind of like this code would be used for years to come and I was going to sell later on. I even considered the cases when a session could end up starting at the end of the month on one side of the world and ending on the next one across the ocean. I think I had a lot of fun doing this...
So how did I do it?
There were 3 main things I divided my work
into:
Displaying info
Our audience was as diverse as you can get. It not only spanned from diverse backgrounds and cultures but also in age, from high school students to decorated principal investigators — I needed to make things as easy as possible for everyone to reduce friction and make the transition from in-person to digital nicer.
I consulted with my team and we came up with 3 display formats that varied on information levels:
-
Minimal = overview was just session
titles and an icon for session track organized
by day and hour
-
Medium = a table, so you can quickly
parse everything by scrolling down, just key
info
- Detailed = a full list display, included a longer description and all the information we had available for that session
Filtering sessions
Next step was letting them navigate the info depending on their interests. In this specific example they could browse the community sessions based on the type (livestream, workshop, interactive, panel, discussion, etc) and the 'track' they belonged to — basically the subject matter (governance, career, education, etc).
If I had more time to clean up the code, I would remove inexistent combinations from the filtering system — for example, there weren't any interactive + governance events — and make sure I display a "no sessions available" message for days that were empty. I would also request our presenters to limit the length of their session titles. Some of them broke the UI but I didn't realize it until it was too late.
Switching between timezones
This is where the fun was. The code sorted and organized all sessions by date and time into the different formats so they were loaded by default. If the user changed the time zone, it would trigger again and reload all the sessions after adjusting the time.
It was hard to wrap my head around adding 60 minutes for an hour, so I transformed everything into a format where one hour equals 100. With that logic, I constructed the main function called change_time_zone()
It took in: month, day, time – when the event happens originally + duration – how long the event lasts and change – the time zone difference in Coordinated Universal Time (UTC) that the user had selected from the dropdown (I even added a note for our key timezones: EST, CET, and CST).
With that info, it adjusted the start time and end time by converting the duration (90 minutes turned into 130 in my conversion system).
When minutes went past 60, it corrected that. If the event crossed into the next day it bumped the day forward. If it crossed back a day, it bumped it back.
There are other secondary functions referenced from this one — for example, one that has the amount of days in each month to quickly check, and a few others that fix the formatting from military time back to 12-hour format.
This was the pop-up info when you clicked on an overview item.
4) Results
The tool went live! And you can explore it yourself! See it here! Scroll down to the bottom of the page.
While we didn’t have the scope to measure usage of the tool or do rounds of improvement — working at a non-profit small team during an "unprecedented time" made it very difficult — we received almost no questions in relation to navigating the schedule.
I can confidently say this was very successful in helping our global audience navigate a suddenly remote conference.
It was also very useful internally. The tool was easily updatable for our team. Being in event logistics, you know things can change minutes before a session starts. So we developed a centralized system to update the info.
We had an Excel sheet that the logistics team could keep up to date as a single source of truth. I added a few formulas to merge the text and format it into a single array that I could copy quickly. It was as smooth as butter.
Conding review done!
I'm happy writing this. This was a very nice project — it was one of my last ones before leaving iGEM to pursue my Master’s degree. I'm very fond of my time at the foundation, I learned so much and got to improve my skills and see outcomes directly. I smile thinking how I would hear from comments how much the community loved both the brand and the websites.
While 2020 was challenging (and the years after have also not been a walk in the park), I try to look at the positive side and focus on that silver lining: every challenge is an opportunity to try something new. It also doesn’t have to be a life-changing new thing — it can be a piece of code that brings you a smile years down the line, even if it served its purpose for only a few months and now lives in your memory shelf.
It feels good to remember you did things with heart, even if only for yourself.
That’s Enough About Me!
What do you think? What should I focus on next?
How would you have solved the timezone problem? Should we start a mini competition to solve this puzzle?
Let me know—shoot me an email! 😊
📩
sifuentesanita@gmail.com