COMPUTERUN 2.0 Website
Tags: projects, binusuniversity, computerun, computerun2021
Published: 2022-01-05 07:56:17

---
title: COMPUTERUN 2.0 Website
published: true
date: 2021-10-27 10:39:52 UTC
tags: Projects,BINUSUniversity,COMPUTERUN,COMPUTERUN2021
canonical_url: https://reinhart1010.id/2021/10/27/computerun-2-0-website/
---

ah, here we go again… upgrading a old, messy codebase made by Reinhart and friends at HIMTI since last year…

![](https://reinhart1010.id/wp-content/uploads/2021/06/controld-circle-2.png)

**bleep! i’m pr0xy,** somewhat an intern && a humble `*pointer` of Reinhart;

y’know what, i wanna `#include` an array of words from **_[Why’s (Poignant) Guide to Ruby](http://poignant.guide)_** to motivate all of you **guys[]** working on **COMPUTERUN 2.0 && i++,** especially since this will be my last project before signing off as the Manager of the Web Development division of HIMTI BINUS University:

> I’ll be straight with you. **I want you to cry.** To weep. To whimper sweetly. **Code so beautiful that tears are shed.**
> 
> <cite><em>Why’s (Poignant) Guide to Ruby</em></cite>

&& i suddenly remembered that **[the folks at HIMSISFO are now struggling with Java instead of C(#)!](https://curriculum.binus.ac.id/course/ISYS6197/)** ah, that’s why many of you wear glasses and still don’t know what dangling pointers are… i see…

* * *

**alright…** amarga sampeyan kabeh luwih ngerti basa Java, sumangga kita `System.out.println()`no kabeh `ArrayList<Thing>` sing wis rampung ing divisi pangembangan `Website website = new Website("COMPUTERUN 2.0: EXECUTE");`!

## what have we done?

**um… what?!** we’ve done so many things; in fact, **it wouldn’t be “COMPUTERUN 2.0” if we didn’t actually upgrade the old junk codebase!** we kickstarted our improvements to the existing **COMPUTERUN 2020: INSIGHT** registration system by refactoring and creating another one at [https://registration.himti.or.id](https://registration.himti.or.id); then we believe in recursion && so we built a new parser which (ab)uses yaml, markdown, and laravel blade templates to quickly build static websites, and today i’m gonna…

hey **Shift** , is that you? i heard you wanna give some `News[]` related to COMPUTERUN; wanna `println()`?

## a **Shift** -y intermission

![](https://reinhart1010.id/wp-content/uploads/2021/10/shiftine-computerun.png)

Sure! And hey, you know who I am, right? I’m **Shift(ine)** and **MY NEW METALLIC HAIR IS AWESOME!!!** And oh, if you’re looking for **Caps** , she’s currently being worn by another blue shell to fly and help me send some emails. But she’s fine…

First, **let’s talk about emails** , shall we? Well, as some of you might know, **I’m (currently) the master of email delivery,** ’cause [I am](https://reinhart1010.id/2021/08/16/my-life-as-a-snake-i-mean-a-python3-emailer-robot/)! We currently share the same address, **noreply@himti.or.id** , to send emails from **COMPUTERUN 2.0** and some of our events at HIMTI BINUS University.

In order to prevent our emails for being flagged as spam, we’re limiting ourselves to send a maximum of **50 emails per hour**. And that’s why we have to switch, check and send emails **from 3 different databases!** One for general (registration.himti.or.id), one for **HIMTI ELECTION 2021** , and of course, another one for **COMPUTERUN 2.0**.

But now, since we’re done with the election, **we’ll be able to allocate more time on a single day to send more emails to COMPUTERUN participants,** which will take effect starting **today!** We’re increasing the number of delivery from 4 batches a day to **6 batches a day** – perfect for sending a total of **300 emails** for a single damn day.

Oh, here’s me pinging Reinhart all the time when there’s a new email being sent. Remember that I’m a **Service** , not a **daemon** like **pr0xy** [because Windows said so…](https://docs.microsoft.com/en-us/dotnet/core/extensions/workers)

![](https://reinhart1010.id/wp-content/uploads/2021/10/image-22.png)<figcaption>Imagine yourself being terrorized by me this way…</figcaption>

Next, there’s a really cool trick on our COMPUTERUN website: **You can finally Ctrl+K like it’s Slack and Notion!** Seriously, I don’t even know why did Reinhart implement this feature on COMPUTERUN but well, here it is.

![](https://reinhart1010.id/wp-content/uploads/2021/10/Screenshot-2021-10-25-174720-1024x544.jpg)

It’s also the default menu you’ll gonna see on mobile, so yeah, **_hasta la vista_, Bootstrap hamburger menu!** Soon, we’ll rolling out new accessibility updates to make sure that this menu works for screen readers and keyboard nerds like you, **pr0xy**!

* * *

I can’t believe I just spent 5 minutes just to `println()` all of this, but if you’re a coordinator of the following official BINUS University Student Organization websites:

- https://student-activity.binus.ac.id/ **basis**
- https://student-activity.binus.ac.id/ **binary**
- https://student-activity.binus.ac.id/ **himka**
- https://student-activity.binus.ac.id/ **himsisfo**
- https://student-activity.binus.ac.id/ **himti**

You can now give a shoutout to **COMPUTERUN 2.0** just by creating a **NEWS** or **ARTICLE** and put **“COMPUTERUN 2.0”** inside of the list of tags. Here’s what I mean:

![](https://reinhart1010.id/wp-content/uploads/2021/10/Screenshot-2021-10-25-183839-1024x596.jpg)

So your shiny love and articles can be shown directly to those who are visiting the **main COMPUTERUN website,** like this!

![](https://reinhart1010.id/wp-content/uploads/2021/10/Screenshot-2021-10-25-184235-1024x596.jpg)

Well, that’s all I wanna tell. So, goodbye and see you again!

* * *

yeah, thanks **Shift** for the amazing `println` and now let’s continue my discussion;

## speaking ’bout **bundles** ,

so, we’ve some quirks in our event registration system:

1. we separated registration forms for `(business-it case || web design) && workshop` bundle at [https://computerun.id/info/business-it-case-bundle](https://computerun.id/info/business-it-case-bundle) and [https://computerun.id/info/web-design-bundle](https://computerun.id/info/web-design-bundle); so if you would like to have that bundle discount, you’ll need to register through that special form (or [contact our committees](http://computerun.id/contact) if you’re confused about that);
2. everyone joining **sprint** , **business-it case** , && **web design** will be automatically added to our **opening ceremony** ;

this means that everyone who’s signing up for the bundles won’t be automatically registered into the respective events (especially when they haven’t done the payments), so please take a while while we’ll accepting ad adding you to the respective events; **just don’t forget to finish your payments and tell us if you’re done!**

## (ab)using **yaml** , **markdown** , && **laravel blade**?

> (Ab)using YAML and Markdown and Laravel Blade components to generate static pages powering the [@Computerun2021](https://twitter.com/Computerun2021?ref_src=twsrc%5Etfw) website. This ain't Jekyll.
> 
> — Reinhart Previano K. (@reinhart1010) [October 22, 2021](https://twitter.com/reinhart1010/status/1451382082442186754?ref_src=twsrc%5Etfw)

<script async loading="lazy" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

our old COMPUTERUN codebase is written using **php** && **laravel** , && we’re mainly using **blade** to define our layouts; but thanks to our recent efforts, we’re able to build this interactive **faq** section:

![](https://reinhart1010.id/wp-content/uploads/2021/10/image-23-1024x493.png)

just by spawning a few lines of **yaml** code:

```

`title: "FAQ"
children:
  - type: "faq"
    contents:
      - question: "Can I participate in SPRINT outside of Indonesia?"
        answer:
          - type: "markdown"
            text: "We would like to apologize that SPRINT is currently unavailable to international participants due to concerns with international shipment/delivery of our Finisher Pack."
      - question: "How do I get the STRAVA club link and the upload form?"
        answer:
          - type: "markdown"
            text: "Once your registration has been approved, please come back to this page (under the **Join Now** section) to see the STRAVA club link as well as the running record upload form."
      - question: "Should I pay the Shipment/Delivery Fee first or later?"
        answer:
          - type: "markdown"
            text: " **Yes,** please pay the delivery fee altogether with the registration fee to us."
          - type: "markdown"
            text: "If you are registering for two (2) persons, you'll need to pay the Shipment/Delivery Fee for both."
      - question: "I'm registering for two pax and we're living in the same place. Can I just pay the Shipment/Delivery Fee once for both of us?"
        answer:
          - type: "markdown"
            text: "First, please make sure that both of you agree to do so, since we will **not** be responsible for handling further deliveries once the Finisher Pack(s) have been successfully delivered to you."
          - type: "markdown"
            text: "Then, please let us know via our [LINE Official Account](http://lin.ee/57zX9DW6k) if you would like to do so, so our committees won't deny your application due to false positives for insufficient funds (i.e. you haven't paid the Delivery Fee for the other person)."
      - question: "Will I get refunds if I failed to reach the target?"
        answer:
          - type: "markdown"
            text: " **The registration fees are non-refundable and non-negotiable.** However, paid delivery fees can be refunded to you by contacting us through our [LINE Official Account](http://lin.ee/57zX9DW6k)."`
<small id="shcb-language-1"><span>Code language:</span> <span>YAML</span> <span>(</span><span>yaml</span><span>)</span></small>
```

**but wait!** we’re not just able to make it work in the faq section, **but also most of our webpages!** webpages explaining all of our events are now completely coded in yaml, our (COMPUTERUN) homepage is now also written in yaml; even our online guidebooks, [sponsorship proposal](https://computerun.id/sponsor-us), && [media partner proposal](https://computerun.id/media-partner-proposal) are entirely written in **yaml**!

this means that COMPUTERUN 2.0 committees wishing to update the page no longer need to understand a bunch of html; **just hack that yaml && markdown source files && done!**![🔥](https://s.w.org/images/core/emoji/13.1.0/72x72/1f525.png) ![🔥](https://s.w.org/images/core/emoji/13.1.0/72x72/1f525.png) ![🔥](https://s.w.org/images/core/emoji/13.1.0/72x72/1f525.png)

the modernization of the codebase is definitely making it more flexible and quicker to set up for changes; let’s say, when one of your events require an Instagram username; before, we had to modify our registration logic && add a new form to insert your Instagram username, but today we’ll just need to add that additional field directly on our database, and our backend codebase will automatically recognize and start to validate that, too!

## interested in **COMPUTERUN 2.0?**

if you’re interested, just head over to the official website at [https://computerun.id](https://computerun.id), or follow and contact us [through many ways](https://computerun.id/contact)!

**COMPUTERUN 2.0** is proudly presented not just by us (the folks at [https://reinhart1010.id](https://reinhart1010.id)), but also by **[HIMSISFO](https://student-activity.binus.ac.id/himsisfo) (Information Systems Student Association)** and **[HIMTI](https://himti.or.id) (Computer Science Student Association)**, two of the largest official Student Associations in **BINUS University**! && **true** , this is our second (or first, ’cause arrays starts at 0, unless you’re R or MATLAB) installation of COMPUTERUN, && this is our first (or 0th) installation to be held internationally!

The post [COMPUTERUN 2.0 Website](https://reinhart1010.id/2021/10/27/computerun-2-0-website/) appeared first on [Reinhart Previano Koentjoro](https://reinhart1010.id).