When World Collides : the new and improved Pepper&Carrot website

As I'm writing this, I'm still trying to catch my breath after diving head-first into the rabbit hole that was my project "When Worlds Collide". It's been a month and a half of intense work, but I'm thrilled to finally share the results with you:

Tadaaaa 🎉 www.peppercarrot.com 🎉

The Why

You see, in mid November I wanted to end the year with a big cleaning and maintenance of the website. But, as I often do, I got a bit carried away and decided to merge MiniFantasyTheater, Pepper&Carrot, and comics one-shots into a single, unified platform. It was a daunting task, but today I'm proud of what I've accomplished.

The How

The base engine of the website is still the one I wrote back in 2021, which has proven to be robust and economic. It's handled the huge waves of visitors with ease, and I'm confident it will continue to do so. To give you an idea, it is able to manage 15K daily visitors in average and spikes to 300K in days of release on a hosting that cost less than 300€/year. However, if I left the engine almost untouched, I've made significant changes to the presentation of the elements, making it easier for you to access and enjoy the content.

New Features and Content

MiniFantasyTheater Comic Strips: Finally hosted and translated in French.

Webcomic "Misc": Old webcomics remastered, now compatible with the translation system, transcript, etc... (A third one is coming soon)

Side by Side: My favorite new feature, which allows you to compare the active language with English.

Translation Progress Indicator: Keep track of the translation progress in the language selection panel

Related links: A feature located at the end of the Pepper&Carrot episodes, it is mainly used to link to the related blog-post (making of, tutorials, and production reports). It also links to the Pepper&Carrot fan-comics like the "Pepper&Carrot Mini" episodes of Nartances that are answers to some episodes and also it links to the movies by the Morevna team on Peertube.

Restored "Philosophy" Page: Restored from the old website, and refreshed for the future and with an open letter at the end to give update on why I'll keep "[...]to change the comic industry!" on the homepage, even a decade later.

New Cover Illustrations: Each galleries (and homepage too) now have their own "cover".

Support Page: A full new page with more description about all options why I have so many patronage platforms.

Fan-art to the top, and Cosplay! The blog post about cosplay were buried deep into the history, so it was time to make a dedicated gallery to them, and also plug Fan Art to the top of the website.

Life Drawings On social media, I often share my watercolors while I'm on a trip. Now, I ported all of them in the Artworks > Misc category

visible with link only On Pepper&Carrot we have a secret area (a reference to the manga City Hunter) where contributors help me to proofread episodes. This part was rewritten from scratch, it now allows me to just switch a comic in published=0 (visible with link only) into 1 (public).

Opengraph everywhere That's an improvement for when you share a page on social media: the generated thumbnail preview will now show a preview of the page you share, including all galleries, artworks, etc.

Still in Progress

Translation: I've added so many new English text in the code! The goal was to describe everything, and be user-friendly.

But all this new text is also temporarely problematic: when the website displays another language, untranslated text appears in English. So, unless someone translate the changes quickly, many visitors will experience half broken website's translation. Almost all language that had 100% translation are now back to around 70%... Sorry about that.

Any help to complete the translation on our Weblate: https://weblate.framasoft.org/projects/peppercarrot/website/ is welcome (and we have a documentation here).

Technical Details

For the one familiar with this type of graph on repositories.

• Fully Open Source: GPL V3+, hosted on Framagit: https://framagit.org/peppercarrot/website-2021
• The final MR: 62 commits ( +74852 and −26006 changes)
• Mainly PHP: PHP and CSS/HTML5 on top, I'm keeping it simple.
• No JS: The website can run without Javascript.
• No web framework: Lightweight and built from scratch.
• Accessible: Transcript available under each comic, also tested with 400% zoom.
• Responsive: From smartphone to tablet, to smart TV... try it!
• Cached: Average page loading under 0.003 sec server-side to serve more clients for the same hardware/resources.
• HTTPS by Default: Because security matters.
• Designed to be Easy on Eyes: Not a dark theme, not a bright theme, I tried to blend the two and avoid using pure white for backgrounds.

When World Collides branch, before merging!

That's it for now. I hope you enjoy the new website, and I look forward to hearing your feedback!

The website → www.peppercarrot.com