The project
Banal magazine is a Greek online magazine conceptualized and edited by a friend. Dimitris, Haris and I sat down with her, discussed the magazine’s needs, its desired aesthetic and the bigger picture moving forward. We took care of the design, development and all tech-related solutions.
We designed a number of different UIs we thought would fit the aesthetic of the magazine. The designs and prototypes were done in Figma and a couple of iterations later we achieved the final result. For the frontend we went with Vue.js (Nuxt) as we wanted blazing fast delivery and SEO. The API is developed in Laravel and MySQL and everything is run on Docker containers.
A poor design concept that did not make it. 😔
The challenges
The editor needed an admin panel in order to execute operational tasks such as adding and editing articles. We integrated a WYSIWYG (What You See Is What You Get) editor vue-package into our codebase. That took A LOT of development out of our hands but there was a catch. All images were added to the article content as a long base64 string. That means that every request upon that article would take ages to load. The more images the article had the slower the respective page became. No bueno.
We developed a job in Laravel running on every article creation in order to intercept the article content, get the base64 string and create an image file for it. To add to that, we create 3 different size images and we return one of them each time depending on the user’s device. Desktop and laptop users get the full size image while mobile users get the smaller resized one. That makes the website load faster on slower networks and consume less data.
The editor has a designer create each individual issue. Since Banal magazine is exclusively online, the editor wanted to keep that traditional feeling of riffling through pages. It took a hefty amount of research to find the right package to integrated to our JS code and some time in order to design our process so it can be as automated and easy for the editor as possible.
The editor can submit the issue in pdf format and a Laravel job will pick it up, parse through it and create an image file for each on of the pages. The URL to those image files are returned alongside the rest of the issue data, fed into the third-party JS package which in turns creates a realistic issue the user can digitally riffle through.
Some other fun little implementations include client-side caching for blazing fast renders, SEO best practices, quick share buttons and a Mailchimp integration.
