kompas.id

The subscription-based digital news service of Indonesia's leading and most influential newspaper, Kompas, which was also the main reference for decision makers such as politicians and corporate leaders. The site should not be confused with its siblings: kompas.com and kompas.tv

Phase 1 - 2016: The kick-off of the site development using open source software as the content management system and e-commerce engine. I contributed in building a WordPress theme for the site. To support the theme, I built several plugins which can be activated and deactivated anytime without compromising the core codes in the theme.

Phase 2 - 2019: As codes piled up due to constant changes in design and client requests which made them hard to maintain. I decided to refactor the PHP codes to separate logics and templates, the CSS codes to make it leaner, and the Javascript codes to pave way for modern Javascript framework.

I decided to build the theme not in Wordpress' standard way, e.g. the loop. I wanted to build it much like Laravel by separating logics and templates, PHP namespaces, and Composer packages. Timber made this possible by separating PHP files and templates. The developers focused on supplying data and logic in the PHP files and focused on the display with the Twig template engine.

The highly customisable Tailwind CSS became the CSS framework for rapid CSS classes creation. We no longer worried about the time-consuming deciding class names and multiple classes which basically did the same. This lead to our CSS file only 43kB in size after purging the unused classes, way down from the previous minified size of about 300kB.

Vue.js was my choice of Javascript framework to replace jQuery. jQuery was good but it was hard to create and maintain complex elements. With Vue, the developers able to break down user-interface elements into smaller, reusable single file components. Each component had its own template, script, and style which was possible to be scoped.

Phase 3 - 2020: Another challenge came and forced us to rethink how to make pages easily customisable for each user needs and business model and, if possible, to improve every page's speed and performance. There was no doubt for me to pick Nuxt.js after the good experience it gave when building search.kompas.id. The site was decoupled from WordPress and built entirely in Javascript.