Derpibooru Community Collab is back! Join our annual collaborative mega-picture featuring your characters. Learn more here.

Viewing last 25 versions of post by Princess Celestia in topic Site Development Notification and Feedback Thread

Princess Celestia
The End wasn't The End - Found a new home after the great exodus of 2012

Administrator
Devops
I think it's a good time as any to revive this thread to share some of my current plans with you (both of which are in various stages of completion). I've been doing on and off development of two major user-facing projects in the past few months, namely **The Redesign** and switching the site from Textile to **Markdown**.


 
*
*The Redesign*

*
 
This word is sometimes gravely dreaded by users of any site, after all, things are changing from what you are used to and love, and becoming new and alien, possibly even worse for some? Now, many of you will probably have the same question right about now:

_

 
*
But Celestia, the site is already so good, why change anything?_
*  
Yes, the current design works and it does its job really well. However, back when it was first made, we haven't really put much thought into things like accessibility, colorblind people, how the site looks on phones beyond the very basics, and so on.


 
The way our current theme system is designed, in order to create a new theme with a couple of minor color changes, we'd need to copy over _*the whole CSS_* of the site into a new .css file, and then serve that. Such an approach leads to very long compile times during deploys and holds us back from implementing more color variations. The way to fix it is to switch to "[CSS3 variables":](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), which would not only make it easy for us to make more color variations, but would also make it much easier for authors of user styles to make variations of the site theme which we have not thought of.


 
However, even such a seemingly minor backend change requires us to essentially rewrite the whole CSS and change the architecture of it. Since we'll be doing that, I decided to also take this opportunity to fix other issues with current design.


 
A major one is accessibility. Some color contrasts on the site are very hard to read to vision-impaired people, as well as some colorblind people. We intend to increase the contrasts of colors a little bit to ensure important things can be distinguished between each other to such people, or those who use particularly bad monitors with poor contrast/gamma settings.


 
Another major point is the mobile/phone design of the site. Yes, we have one (if you are on desktop, you can even see it by making your browser window as narrow as it can go). No, it's not very good. I myself use mobile extensively, and often run into pages where certain things decide to leave the boundaries of the screen. Other times I fat-finger a button and have to go back a page and try again just because not much thought was put into mobile convenience. And I won't even mention that staff tools have no mobile design whatsoever and are really a complete disaster, meaning to do a staff action on the go in case of emergency puts me at risk of fatfingering something and possibly doing nasty things.


 
*
*All of these things are intended to be fixed by the redesign. The plan so far is something like:*
*  
-> Desktop layout remains very similar to how it is now
 
-> -> Certain things may still change on Desktop layout, but the general usage pattern should remain the same
 
-> Mobile layout gets a complete overhaul
 
-> Colors on both layouts will change for accessibility
 
-> More themes will be introduced, with much more extensive customization options
 
-> -> Such as "dark/light/black" variants of each color scheme
 
-> -> "black" variant would make the background black, hopefully saving battery on OLED devices

 
-> In general, our CSS will use more modern technologies and modern approach, reducing our reliance on Javascript, and giving us a chance to build a more robust style using 2021 standards, instead of 2015.
 
Before anything changes, there will be 1-2 months of public beta testing of the new design so we can gather feedback and make all appropriate changes.



 
 
*
*Markdown*

*
 
Now let's talk about the second project in the works right now. Conversion of the site from Textile to Markdown. For those of you who don't know, both of them are text processing engines. Textile is currently being used on the site so you can make text in your posts **bold**, _*italic_*, and such. There's nothing really wrong with it, but it's quite slow and outdated, and by modern standards it's quite clunky and awkward to use.


 
So we decided to switch to Markdown. Markdown is currently the most popular text processing technology, and it is used in many shapes and forms all over the internet. To name a few examples of websites/services using it, I'd name "[Discord":](https://discord.com), "[GitHub":](https://github.com), "[Telegram":](https://telegram.org), and "[Slack":](https://slack.com).


 
In fact, you probably have already used Markdown in the past, even if you never realized it was Markdown. Ever needed to type [==\*\*text here\*\*==] to make text bold? Or perhaps you've noticed that typing [==\*text here\*==] makes it italic instead of bold? Well, that was Markdown.


 
To go into technicalities, the "flavor" of Markdown which we intend to use is "[GFM":](https://github.github.com/gfm/) (Github-Flavored Markdown), a subset of "[Commonmark":](https://commonmark.org/) specification. Some of the features will be omitted for security and usability reasons (you won't be able to use raw HTML in your posts), and we'll add some of our own features (such as [||spoiler]spoilering[/spoiler]||, ~%subscript~%, >>123, to name a few).


 
All of the current posts will be converted from Textile to Markdown once the feature is fully implemented. We'll slowly run a conversion in the background, and if you try to edit a comment/post/anything that was made using Textile, it'll be converted on-demand for you, so you can edit the Markdown version of it instead. Nothing _*should_* break, but something probably inevitably will, with my luck.



 
 
*
*So, that's good and all, but are there any ETAs?*

*
 
For the redesign, the ETA is "when it's done". It will probably take me a couple of more months of work until I get it all polished up and ready for deployment. If I had to give a percentage of its current completion, I'd say it's about 40% done.


 
For Markdown conversion, the ETA is 1 month, maximum. It likely won't take me too long to get it implemented, and I'll keep everyone updated here and on Discord.



 
 
*
*Is there anywhere where I can view the current code of both changes?*

*
 
Yes, there is!


 
You can check out the current state and code for the redesign "[here":](https://github.com/philomena-dev/philomena/tree/redesign
)  
And if you wish to view the code for the Markdown conversion, you can do so "[here":](https://github.com/philomena-dev/philomena/tree/markdown


)
 
 
*
*Wish to know more and possibly get more insight into development, or maybe even talk to me in a more casual way?*

*
 
You can head over to our "[Discord server":](https://derpibooru.org/pages/discord) and check the #philomena-dev and #site-and-tag-discussion channels, as this is where I typically share anything related to these changes.



 
 
I hope this was informative to some of you. If you have any questions or feedback about the direction of the changes, please don't hesitate to reply to this post.
No reason given
Edited by Princess Celestia
Princess Celestia
The End wasn't The End - Found a new home after the great exodus of 2012

Administrator
Devops
I think it's a good time as any to revive this thread to share some of my current plans with you (both of which are in various stages of completion). I've been doing on and off development of two major user-facing projects in the past few months, namely *The Redesign* and switching the site from Textile to *Markdown*.

*The Redesign*

This word is sometimes gravely dreaded by users of any site, after all, things are changing from what you are used to and love, and becoming new and alien, possibly even worse for some? Now, many of you will probably have the same question right about now:

_But Celestia, the site is already so good, why change anything?_
Yes, the current design works and it does its job really well. However, back when it was first made, we haven't really put much thought into things like accessibility, colorblind people, how the site looks on phones beyond the very basics, and so on.

The way our current theme system is designed, in order to create a new theme with a couple of minor color changes, we'd need to copy over _the whole CSS_ of the site into a new .css file, and then serve that. Such an approach leads to very long compile times during deploys and holds us back from implementing more color variations. The way to fix it is to switch to "CSS3 variables":https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties, which would not only make it easy for us to make more color variations, but would also make it much easier for authors of user styles to make variations of the site theme which we have not thought of.

However, even such a seemingly minor backend change requires us to essentially rewrite the whole CSS and change the architecture of it. Since we'll be doing that, I decided to also take this opportunity to fix other issues with current design.

A major one is accessibility. Some color contrasts on the site are very hard to read to vision-impaired people, as well as some colorblind people. We intend to increase the contrasts of colors a little bit to ensure important things can be distinguished between each other to such people, or those who use particularly bad monitors with poor contrast/gamma settings.

Another major point is the mobile/phone design of the site. Yes, we have one (if you are on desktop, you can even see it by making your browser window as narrow as it can go). No, it's not very good. I myself use mobile extensively, and often run into pages where certain things decide to leave the boundaries of the screen. Other times I fat-finger a button and have to go back a page and try again just because not much thought was put into mobile convenience. And I won't even mention that staff tools have no mobile design whatsoever and are really a complete disaster, meaning to do a staff action on the go in case of emergency puts me at risk of fatfingering something and possibly doing nasty things.

*All of these things are intended to be fixed by the redesign. The plan so far is something like:*
-> Desktop layout remains very similar to how it is now
-> -> Certain things may still change on Desktop layout, but the general usage pattern should remain the same
-> Mobile layout gets a complete overhaul
-> Colors on both layouts will change for accessibility
-> More themes will be introduced, with much more extensive customization options
-> -> Such as "dark/light/black" variants of each color scheme
-> -> "black" variant would make the background black, hopefully saving battery on OLED devices

Before anything changes, there will be 1-2 months of public beta testing of the new design so we can gather feedback and make all appropriate changes.


*Markdown*

Now let's talk about the second project in the works right now. Conversion of the site from Textile to Markdown. For those of you who don't know, both of them are text processing engines. Textile is currently being used on the site so you can make text in your posts *bold*, _italic_, and such. There's nothing really wrong with it, but it's quite slow and outdated, and by modern standards it's quite clunky and awkward to use.

So we decided to switch to Markdown. Markdown is currently the most popular text processing technology, and it is used in many shapes and forms all over the internet. To name a few examples of websites/services using it, I'd name "Discord":https://discord.com, "GitHub":https://github.com, "Telegram":https://telegram.org, and "Slack":https://slack.com.

In fact, you probably have already used Markdown in the past, even if you never realized it was Markdown. Ever needed to type [==**text here**==] to make text bold? Or perhaps you've noticed that typing [==*text here*==] makes it italic instead of bold? Well, that was Markdown.

To go into technicalities, the "flavor" of Markdown which we intend to use is "GFM":https://github.github.com/gfm/ (Github-Flavored Markdown), a subset of "Commonmark":https://commonmark.org/ specification. Some of the features will be omitted for security and usability reasons (you won't be able to use raw HTML in your posts), and we'll add some of our own features (such as [spoiler]spoilering[/spoiler], ~subscript~, >>123, to name a few).

All of the current posts will be converted from Textile to Markdown once the feature is fully implemented. We'll slowly run a conversion in the background, and if you try to edit a comment/post/anything that was made using Textile, it'll be converted on-demand for you, so you can edit the Markdown version of it instead. Nothing _should_ break, but something probably inevitably will, with my luck.


*So, that's good and all, but are there any ETAs?*

For the redesign, the ETA is "when it's done". It will probably take me a couple of more months of work until I get it all polished up and ready for deployment. If I had to give a percentage of its current completion, I'd say it's about 40% done.

For Markdown conversion, the ETA is 1 month, maximum. It likely won't take me too long to get it implemented, and I'll keep everyone updated here and on Discord.


*Is there anywhere where I can view the current code of both changes?*

Yes, there is!

You can check out the current state and code for the redesign "here":https://github.com/philomena-dev/philomena/tree/redesign
And if you wish to view the code for the Markdown conversion, you can do so "here":https://github.com/philomena-dev/philomena/tree/markdown


*Wish to know more and possibly get more insight into development, or maybe even talk to me in a more casual way?*

You can head over to our "Discord server":https://derpibooru.org/pages/discord and check the #philomena-dev and #site-and-tag-discussion channels, as this is where I typically share anything related to these changes.


I hope this was informative to some of you. If you have any questions or feedback about the direction of the changes, please don't hesitate to reply to this post.
No reason given
Edited by Princess Celestia