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
105 - 
161
25 comments
victorhck@mastodon.social
Great work!!
the spanish web section is the only one that also translates the names Pepper and Carrot.
I think that should keep the name in English (just my opinion)
Even in Mexican spanish page keeps the untranslated names...
davidrevoy
@victorhck Thank you
2 ★Yes, I let each translators choose their 'art direction' for translating the names or not.
The current maintainer is https://framagit.org/rgarciag , if you want you can open an issue on https://framagit.org/peppercarrot/webcomics/-/issues and discuss this with him (quote his nickname with a @ in front in your text, so he receives a notification).
daughterofrao@weirder.earth
LOVE the new side by side feature... Makes reading it in different languages for learning them much easier! (Did that a bit already but this makes it so simple, no more typing stuff into translators)
davidrevoy
@daughterofrao Thank you! This feature was already super useful for the proofreading of the future episode (a webcomic misc for Monday), I'll certainly publish soon a blog post about it only, it needs a bit of spotlight on it. 😊
★ramywhite@mastodon.social
I loved it, it is really funny and enjoyable. One thing for the Arabic translation, it is good but we used to read comics from right to left, so the order of panels are reversed in Arabic
davidrevoy
@ramywhite Thank you! The translation system supports flipping the artworks for the RTL.
2 ★But nowadays, in many countries, the trend is not to flip the artworks but let the original artwork layout as imagined by the artist and just translate the speechbubbles. Tons of Manga in France are yearly published in RTL here with French in speech balloon. And European comics in Japan for example are also keeping their LTR panels layout, while getting speech-bubble translated.
LonM@vivaldi.net
this redesign looks great, good job
★yon@sakurajima.moe
It’s very nice! That’s a lot of work:)
I really like that you avoided FFFFFF/000000 in the background. It tends to be so very stark and there’s no way to add highlights and shadows at the same time then.
★dmainardi@mastodon.uno
Great job!!!
★bbbhltz
hottttt
★tawalker@mastodon.social
Great work 👏🏻👏🏻👏🏻 I have often thought how Pepper & Carrot reminds me of manga (Pepper makes me think of Studio Ghibli characters like Nausicaä). I read the newest P&C strip, and I caught myself trying to read it top-to-down, *but right-to-left*, manga-style. I hope you can take this as a compliment 🙏🏻
★davidrevoy
@tawalker Yes, I grew up with Nausicaä of Studio Ghibli, it's a huge influence! Thank you!
lufthans@mastodon.social
looks great, loads fast, got me to reread a bunch :)
★bartavi@mastodon.nl
I just discovered this one: https://www.peppercarrot.com/nl/webcomic-misc/2012-05-05_Heritage-en-couleur.html
Very nice!
davidrevoy
@bartavi Thank you!
Szescstopni@circumstances.run
@bartavi Wonderful!
★jcarnu@mastodon.xyz
Excellent , thanks for sharing @bartavi !
★titi@bcn.fedi.cat
Oh, c’est cool ! Ça passe comment ce truc du “side by side” ? C’est un plugin du CMS ?
davidrevoy
@titi Merci! Il n'y a pas de CMS ni de framework dérrière peppercarrot.com; c'est tout fait depuis la base en PHP, du coup c'est un code maison qui affiche simplement la version anglaise à côté de la version traduite (avec du CSS, 'flex' qui gère le côte à côte).
2 ★Zekovski@pouet.chapril.org
On dirait que lorsqu'on sélectionne la langue, le site anglais est indiqué comme traduit à zéro pour cent.
Beau boulot en tous cas. Le site est super beau. 👏
Merci à toi pour tout ce que tu fais.
lewatoto@socel.net
Great job, just a small question about the translation on Weblate, what does this red square mean? I copied the text and it seems to be just a blank space, but the period at the end of the original text confused me.
🖼️ 409f9e3e94a5b8ce.png ★davidrevoy
@lewatoto hey, thank you for helping with the translation 💜 I think, it's just an indicator of a whitespace , yes. I left one at the end in english , but sometime its different for others language and this structure offer these language the choice to manage the whitespace.
★lewatoto@socel.net
ok, I'll try it, thanks for the answer!!!
lewatoto@socel.net
I am happy to inform you that the site has been successfully translated into Latin American Spanish, insomnia was my ally this time 😀
🖼️ 2499da5f9d860a4c.pngdavidrevoy
@lewatoto 🎉 https://www.peppercarrot.com/ls/ Merci merci! What a big work! I merged it this morning (sorry for the late reply, I had a trip for the new year and one without my laptop to manage the repository)
2 ★Post a reply
The comments are synchronised every 12h with the replies to this post on Mastodon:How to use this? (click here to unfold)
Open a new Mastodon account on the server of your choice. Then, Copy/Paste the adress above in your Mastodon 'Search' field. The post will appear and you'll be able to fully interact with it. You'll have full control of your posts: edit, remove, etc. After that, your message will appear here.
Just please note that it may take up to 12 hours for your changes to be reflected here.