Alright,
I think it is safe to say within the past two years that HTML5, CSS3, and responsive design has taken control of the web community. Let me build on this.
I saw that you said HTML5 would be utilized in some form or another, if necessary. I believe that HTML5 will still work, even for older browsers. The problem is getting the new HTML5 elements to work, such as article, footer, header, section, etc.. All browsers can utilize HTML5, but not all browsers can render the new elements correctly; something that is easily covered and taken care of by the HTML5 Shiv. Plus, you're utilizing XHTML, this technology is no longer being worked on. Heck, the W3C even dropped the XHTML2 specification, and come on, who wants to deal with that ridiculous Doctype declaration anymore?
I also believe it is safe to assume that a good portion of the internet is starting to "browse the web" on a mobile device... Not just specifically mobile phones, but tablets and touch-oriented devices... Smaller devices with smaller screens. The number of web users that use mobile devices for browsing are only going to grow over the next 2-3 years. With all that being said; I think it is safe to say... You need to ditch the tables and go with a table-less structure. Tables are meant for tabular data, and forum content isn't necessarily considered tabular data, unless each forum relates to the website as a consistent element in the brand. Plus, doing responsive/mobile-first designs for tables is not only a nightmare, but a bad practice. Which leads me to the next piece...
Mobile functionality; I see you mention this in the confirmed features for the MyBB 2.0 release... You need to stay away from "mobile-specific" designs and especially mobile websites (example: m.mybbforumname.com). In my opinion, it would be best if there was one default design that was responsive and progresses as the screen gets larger (mobile-first approach).
Now onto CSS3. Let's face it, Microsoft is soon to release Windows 8.1, which will come with the update of Internet Explorer 11. I highly doubt that Windows 8 users will not be updating to 8.1... So they will automatically be updated to Internet Explorer 11. Windows 8 already comes pre-loaded with Internet Explorer 10 and most, of Internet Explorer users are already using 9 or 10. I believe that Internet Explorer 9 has covered a good chunk of the CSS3/HTML5 features, well, at least enough. Therefore I believe it would be safe to say that building, utilizing CSS3 will be just fine.
With all of these added together you have a forum software that is better than the rest including Invision Power Board (talk about a mess), vBulletin (old), and phpBB (outdated and limited). There is something about MyBB I have always liked, and that is simplicity, you guys simply make a forum software based on clean and quick code, and a very easy user-interface... But why not change the face of forum software? Why continue to use the same layout and structure, over and over again to keep up with the competition? Lead the competition! You already lead the competition in my books, as well as thousands upon thousands of others.
Although my suggestions may appear "demanding", they are not. They are simply suggestions and just ideas pouring out of my head. I want to see this community and software thrive so here are my suggestions and feedback. I hope you consider my thoughts and hope they steer you in the right, more progressive, direction.
Thank you all for your time and amazing software/community,
Aaron
Quote:You need to ditch the tables and go with a table-less structure.
We've already said that will be happening.
Quote:Mobile functionality; I see you mention this in the confirmed features for the MyBB 2.0 release... You need to stay away from "mobile-specific" designs and especially mobile websites (example: m.mybbforumname.com). In my opinion, it would be best if there was one default design that was responsive and progresses as the screen gets larger (mobile-first approach).
Justin will decide closer to the time what we'll be doing in regards to mobile functionality. We definitely won't be developing a separate mobile site - it just doesn't make sense.
Quote:Now onto CSS3. Let's face it, Microsoft is soon to release Windows 8.1, which will come with the update of Internet Explorer 11. I highly doubt that Windows 8 users will not be updating to 8.1... So they will automatically be updated to Internet Explorer 11. Windows 8 already comes pre-loaded with Internet Explorer 10 and most, of Internet Explorer users are already using 9 or 10. I believe that Internet Explorer 9 has covered a good chunk of the CSS3/HTML5 features, well, at least enough. Therefore I believe it would be safe to say that building, utilizing CSS3 will be just fine.
MyBB 1.8 uses CSS3 features. I believe we've kept these to a separate stylesheet (css3.css).
Quote:We've already said that will be happening. Smile
Well that's just dandy! I should of looked deeper.
Quote:Justin will decide closer to the time what we'll be doing in regards to mobile functionality. We definitely won't be developing a separate mobile site - it just doesn't make sense.
Great, I was simply trying to put out a fire before a flame even appeared.
Quote:MyBB 1.8 uses CSS3 features. I believe we've kept these to a separate stylesheet (css3.css).
That's great! I don't necessarily believe you would need a separate CSS file for your CSS3 declarations, seeing as an incompatible browser would blatantly just ignore the declaration as if it didn't exist. It's ultimately just another request to the server. But, on the other hand, I am sure you have your reasons.
Thanks for the quick reply! If anyone else wants to share their thoughts, they are more than welcomed!
First and foremost, I'm quite tired as I am writing this so I hope the tone of this message stays under control. And now that I have that off my chest...
I think HTML5, CSS3 and responsive design alone are not enough. The entire way how elements are placed and constructed needs a change. All of the templating engine needs rethought and role of JavaScript needs a total turnaround. Frontend needs very different kind of attention than MyBB team has given to it thus far.
What bothers me most with the current templating is the sheer amount of totally unnecessary templates. Just have a look at all the postbit templates and you can see tons of stuff that just makes your life harder because without spending tons of time with the software you simply have no hope of knowing which piece of templating is used where.
Templates need to be bigger chunks. No more one button templates. If there is repetition then those parts of the template can be reconsidered, but avoiding slices into as many templates MyBB has today should be a priority.
What gives MyBB development a lot of pain is it's HTML. With version 1.8 Prototype.js is removed and development time is spent with jQuery, recoding everything again as it was before. However there seem to be no changes to the HTML, and that current HTML is hard to work with. It is like a hay stack and a lot of elements have unique ID, which is like a needle with a straw. Sure, you can quickly find any particular predefined needle because it has a straw, but finding the needles without the straw is a complex or even unreliable task.
A lot of development time with jQuery goes to waste simply because the current HTML is so hard to work with.
One way to solve the issue of both JavaScript and CSS accessibility of HTML is BEM (block element modified). It is quite easy to work with and it solves two problems at once: how to do new CSS without breaking existing styles and how to easily gain access to each related element via JavaScript.
An additional modern helper would be AngularJS, which gets it's first mention on these forums if I'm not mistaken. I've been working with it for roughly two months now and it can truly make things easier. It does have some learning curve though, but the results it can give are awesome: both model and view stay up-to-date in real time, and since that is a core feature there is really no much requirements to set it up. I can warmly recommend it. Atleast to me it feels like the next big thing in JavaScript since jQuery.
(2013-10-07, 08:19 PM)Merri Wrote: [ -> ]What bothers me most with the current templating is the sheer amount of totally unnecessary templates. Just have a look at all the postbit templates and you can see tons of stuff that just makes your life harder because without spending tons of time with the software you simply have no hope of knowing which piece of templating is used where.
Templates need to be bigger chunks. No more one button templates. If there is repetition then those parts of the template can be reconsidered, but avoiding slices into as many templates MyBB has today should be a priority.
There are a lot of templates because we need to give variables a certain value (HTML data in this case). Let's pick the edit button in every post. We need to give it a value, therefore we need to have the value stored somewhere (a template in this case). The alternative is having it hard-coded, which doesn't make any sense.
MyBB 2.0 is something completely new, therefor the HTML structure will be rewritten, too.
(2013-10-07, 09:42 PM)Pirata Nervo Wrote: [ -> ]The alternative is having it hard-coded, which doesn't make any sense.
That isn't the only alternative. As I see it the edit button is separated into a template so that you can conditionally trigger server-side whether the "variable" is written to output HTML or not. It makes it a server side logic where there are less options for template, like render a totally different toolbar area if edit button is missing (just as an example).
How I would see templating done is to always render all the HTML identically with all the elements present and then let a mix of CSS and JavaScript decide what is visible or not (supporting users without JavaScript can be done, but adds complexity). A "backendist" person probably sees this a potential issue, but there really isn't any, because all the important validation needs to happen server side anyway.
A huge plus for this kind of implementation is that things such as full page cache are very easy to do and that would make things super fast as there would be no need to do nearly full render each time a page is requested. And you wouldn't need tons of minitemplates for every single little thing that you want to handle as a "variable".
That is, in my opinion, a very very very bad solution. To do that, we need to: (not only) convert our PHP code to JavaScript; make sure all MyBB settings are put into a JS variable, as well as a lot of other variables used throughout the MyBB code.
That is not practical...
Just to give you an example. The "edited message" example.
// Figure out if we need to show an "edited by" message
$post['editedmsg'] = '';
if($post['edituid'] != 0 && $post['edittime'] != 0 && $post['editusername'] != "" && ($mybb->settings['showeditedby'] != 0 && $usergroup['cancp'] == 0 || $mybb->settings['showeditedbyadmin'] != 0 && $usergroup['cancp'] == 1))
{
$post['editdate'] = my_date($mybb->settings['dateformat'], $post['edittime']);
$post['edittime'] = my_date($mybb->settings['timeformat'], $post['edittime']);
$post['editnote'] = $lang->sprintf($lang->postbit_edited, $post['editdate'], $post['edittime']);
$post['editedprofilelink'] = build_profile_link($post['editusername'], $post['edituid']);
eval("\$post['editedmsg'] = \"".$templates->get("postbit_editedby")."\";");
}
To put that as JS, we need to make sure we can access properties of the post as well as properties of the user and its usergroup and we need to write a function to build the profile link of the user as well as a function to build the date/time and we also need to make sure JS can access MyBB settings. How is this better than the existing implementation?
While I am not a fan personally of it, there is the possibility, post 1.8, of PHP being supported in the templates which would let you reduce the number of templates and allow easy control of the template output/contents in a simpler fashion. Similar to WP.
This is not an official statement or view on the future of MyBB, purely my opinion.
Current editedby template:
<span class="smalltext">({$post['editnote']} {$post['editedprofilelink']}.)</span>
And where it is being used:
<tr>
<td class="tcat">
<div class="float_left smalltext">
{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
</div>
{$post['posturl']}
</td>
</tr>
A simplified replacement of those two using HTML5 and BEM CSS with help of AngularJS could be like:
<aside class="mybb-post-time" data-modified-uid="{$post['modified_uid']}" data-modified-username="{$post['modified_username']}">
<time class="mybb-post-time__posted" datetime="{$post['datetime']}" data-post-created>
{lang('datetime_long', $post['created'])}
</time>
<time class="mybb-post-time__edited" datetime="{$post['modified']}" data-post-modified data-ng-show="postCreated < postModified">
{lang('datetime_long', $post['modified'])}
</time>
</aside>
While it still lacks "Edited by Username" language string in the modified time element it does have a lot of power over the current implementation. First of all I have the power to language strings in template. No more wondering while making a template where the language string comes from! Also gives an option to choose which language string to use instead of being forced to that dev thought was the one you want to use. Localization is easy to do wrong by reusing the same string in various contexts.
Second thing relates to AngularJS. The attributes data-post-created and data-post-modified need their own directives in JavaScript so that those directives can rip datetime attribute from the HTML tag and introduce postCreated and postModified variables to their scope. After this Angular's "magical" data-ng-show runs with whatever condition is written in the attribute (about any JavaScript is valid in there) and then either adds
style="display: none;" if the result is false or removes it if is declared.
This all is quite simple and efficient once you get your brain around it. It is also powerful JavaScript and the code required to get this particular example running is quite short.
User related information could be provided by RESTified session management. This means extra XHR call to server on each page load, but since it will be a single purpose API it will be very fast. Then if user has a preference not to show editedby:
<div class="mybb-thread-container-of-some-sort" data-ng-class="settings.hide_editedby ? 'mybb--hide-editedby' : ''">
...posts are listed here...
</div>
CSS:
.mybb--hide-editedby .mybb-post-time__edited {
display: none;
}
Now even if Angular would allow element to display then CSS would advice against it. Very, very simple. Although the above is overly simplified, you may need to inject multiple classes in which case it'll be more efficient to write a custom directive or controller to do it.
As things are now you've also broken your own template logic: build_profile_link generates HTML without a template. I wanted to add nofollow attribute to those links thus I've modified functions.php as there is no way around it.