Hi, today I want to talk about the new tool bar that Forumotion has released and share a few things about it, positives and negatives.
First off, the toolbar is great. I mean notifications are good, it means I don't have to write any scripts for that sort of thing, for this reason I'll be using it on Avacweb. You may notice already I've styled it to look the same as the old toolbar we had on Avacweb, and made some good style improvements to it. Which will bring me to my first point, styling the toolbar.
Space is wasted in our page supporting IE6, and IE7 with again silly CSS and CSS Expressions. This is essentially pointless, since a lot of their Javascript doesn't support these browsers.
If anyone needs any help acheiving any sort of style, then feel free to ask, it can be difficult.
Do you sometimes add quite a big Javascript to your site and wonder? I hope this won't affect my site loading. Well you may as well throw that all out the window... since Forumotion have added an absolute TON of javascript to your page for this toolbar. The amount of Javascript has actually severely put me off having this bar, there's only one positive to the Javascript which I'll get to later which has persuaded me to keep it.
Here's the Javascript that has been added to your forum:
https://illiweb.com/rs3/45/frm/jquery/cookie/jquery.cookie.js - Yes javascript just for managin cookies lol
https://illiweb.com/rs3/45/frm/jquery/toolbar/FAToolbar.js - The javascript for the functionality of the toolbar
https://illiweb.com/rs3/45/frm/json/json2.js - Javascript for managing browsers who don't support JSON. Despite JSON usage already being built into the available jQuery built into our heads, and can be as simple falling back to using [ic]eval()[/ic] a function (although frowned upon) has been around in every browser for a very long time. So the actual reason for this JS eludes me.
https://illiweb.com/rs3/45/frm/jquery/printf/printf.js - A jquery plug in for managing formatted strings. Why they couldn't have just done this server side with PHP's native formatted printing functions, I don't know.
https://illiweb.com/rs3/45/frm/jquery/printf/printf.js
https://illiweb.com/rs3/45/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js - A jquery plug in for simply cutting text off that is too long and showing a '...' (ellipsis).
https://illiweb.com/rs3/45/frm/jquery/notif/FA.js - More javascript for handling the notifications.
So if you thought you had a lot of Javascript before... well now you certainly do anyway, and yes this will affect your load times, drastically on phpbb2 and PunBB.
Many of these plug-ins could be left out altogether.
Your live notifications also come to you via Javascript being repeated time after time, a request to a separate (presumably) Forumotion server, which most of the time takes a very long time to respond, doesn't respond, or gives a 403 error. You may see the loading of a 'f12.dnspro.org' often at the bottom of your browser, and even in your error console.
I'd put down another negative as the toolbar is the fact there's an abundance of useless stuff on there too.
The bar isn't even included within the source of the page. Its added dynamically with Javascript? Why?
So why did I keep it? (Though after writing this I'm considering changing my mind again)
The notifications are something long awaited by many, and whilst their served to us by overused AJAX to a seemingly slow server, it will certainly surely prove useful.
For me the biggest positive is within the Javscript. The long overweight Javascript. In the head of your page, you'll find this:
[bspoiler]
This javascript has an abundance of useful information which can be used for all sorts of features.
Lets look at the first bit:
Need to check if the current user is logged in? [ic]if(_userdata.session_logged_in) { //they are logged in, do stuff for members only }[/ic]
Need to check or write the current user's name? [ic]$('#element').html('Hello ' + _userdata.username);[/ic] - The username will be "Anonymous" for guests.
Need to use the user id? [ic]$('#element').html('<a href="/u' + _userdata.user_id + '">Your profile</a>');[/ic] - The user_id is -1 for guests.
Need to run Javascript only for mods? [ic]if(_userdata.user_level > 0) { //mod or admin, do stuff }[/ic] - This user_level will be 0 for guests and members. 1 for admins and 2 for moderators.
The rest is pretty pointless, but those above will prove very handy. Its for this information, that I have chosen to use the Forumotion toolbar over my own.
The next bit is a language object. These are used for changing the toolbar into different languages (I imagine this is done automatically for you to your board language), this sort of set up is used so many piece of the same Javascript do not need to be written. A simple example would be this:
English: [ic]alert('Hello Mr LGforum');[/ic] - French: [ic]alert('Bonjour, Monsieur LGforum');[/ic] - two seperate codes for 2 different languages.
However if you did this: [ic]var greeting = 'Hello, Mr LGforum'; alert(greeting);[/ic] - 1 code and the user can change the greeting to whatever they want. (You've seen something sort of similar with AWC translation)
So you can use this to change the wording of the toolbar. For example you want to change the bit which says 'View my topics' to 'Visit your threads', you simply put this in an announcement or widget (or even the right place in the template for punbb boards) [ic]<script>_lang["All_Topics"] = 'Visit your threads';</script>[/ic]
You can even use this little trick to insert HTML into the bar, like images and all sorts. For example, you could change the 'Log Out' words into an image of choice just by changing [ic]_lang["Logout"][/ic] to the HTML of an image, or little icons in front of all the options.
The next chunk is the same thing, however these are formatted to include dynamic data. Should you need help or an explanation of how this formatting works take a read here: http://www.php.net/manual/en/function.sprintf.php
Editing these will allow you to change how the notifications look and work. After a while, i'll see if I can add avatars to the avacweb ones.
So that's about all you need to know regarding the toolbar right now until I've played around with it for a little longer. If I find any more interesting factors regarding I'll be sure to share them.
First off, the toolbar is great. I mean notifications are good, it means I don't have to write any scripts for that sort of thing, for this reason I'll be using it on Avacweb. You may notice already I've styled it to look the same as the old toolbar we had on Avacweb, and made some good style improvements to it. Which will bring me to my first point, styling the toolbar.
Styling the Toolbar
The styling for the toolbar is in an inline [ic]<style>[/ic] tag... below our CSS stylesheet link. So if you wish to style the toolbar with any detail you'll need to do it in an announcement or widget in [ic]<style>[/ic] tags of your own. You'll also need to conform to the stupid selectors used. Yup some even look like this: [ic]#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications[/ic] However, once you've put your own stamp of design onto the toolbar, you can get a decent looking feature.Space is wasted in our page supporting IE6, and IE7 with again silly CSS and CSS Expressions. This is essentially pointless, since a lot of their Javascript doesn't support these browsers.
If anyone needs any help acheiving any sort of style, then feel free to ask, it can be difficult.
Negatives of the toolbar
I mentioned the negatives regarding CSS above, the next thing to look at would be the Javascript side of things.Do you sometimes add quite a big Javascript to your site and wonder? I hope this won't affect my site loading. Well you may as well throw that all out the window... since Forumotion have added an absolute TON of javascript to your page for this toolbar. The amount of Javascript has actually severely put me off having this bar, there's only one positive to the Javascript which I'll get to later which has persuaded me to keep it.
Here's the Javascript that has been added to your forum:
https://illiweb.com/rs3/45/frm/jquery/cookie/jquery.cookie.js - Yes javascript just for managin cookies lol
https://illiweb.com/rs3/45/frm/jquery/toolbar/FAToolbar.js - The javascript for the functionality of the toolbar
https://illiweb.com/rs3/45/frm/json/json2.js - Javascript for managing browsers who don't support JSON. Despite JSON usage already being built into the available jQuery built into our heads, and can be as simple falling back to using [ic]eval()[/ic] a function (although frowned upon) has been around in every browser for a very long time. So the actual reason for this JS eludes me.
https://illiweb.com/rs3/45/frm/jquery/printf/printf.js - A jquery plug in for managing formatted strings. Why they couldn't have just done this server side with PHP's native formatted printing functions, I don't know.
https://illiweb.com/rs3/45/frm/jquery/printf/printf.js
https://illiweb.com/rs3/45/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js - A jquery plug in for simply cutting text off that is too long and showing a '...' (ellipsis).
https://illiweb.com/rs3/45/frm/jquery/notif/FA.js - More javascript for handling the notifications.
So if you thought you had a lot of Javascript before... well now you certainly do anyway, and yes this will affect your load times, drastically on phpbb2 and PunBB.
Many of these plug-ins could be left out altogether.
Your live notifications also come to you via Javascript being repeated time after time, a request to a separate (presumably) Forumotion server, which most of the time takes a very long time to respond, doesn't respond, or gives a 403 error. You may see the loading of a 'f12.dnspro.org' often at the bottom of your browser, and even in your error console.
I'd put down another negative as the toolbar is the fact there's an abundance of useless stuff on there too.
The bar isn't even included within the source of the page. Its added dynamically with Javascript? Why?
So why did I keep it? (Though after writing this I'm considering changing my mind again)
Positives of the toolbar
The positives are I suppose, its a good feature. I mean, a lot of people saw Avacwebs toolbar and wanted one of their own. Well now you can.The notifications are something long awaited by many, and whilst their served to us by overused AJAX to a seemingly slow server, it will certainly surely prove useful.
For me the biggest positive is within the Javscript. The long overweight Javascript. In the head of your page, you'll find this:
[bspoiler]
- Code:
[panda=js]var _userdata = new Object();
_userdata["session_logged_in"] = 1;
_userdata["username"] = "LGforum";
_userdata["user_id"] = 1;
_userdata["user_level"] = 1;
_userdata["user_lang"] = "en";
_userdata["activate_toolbar"] = 1;
_userdata["fix_toolbar"] = 0;
_userdata["notifications"] = 1;
var _lang = new Object();
_lang["Forumotion"] = "Forumotion";
_lang["Share"] = "Share";
_lang["Login"] = "Log in";
_lang["Register"] = "Register";
_lang["Welcome"] = "Welcome";
_lang["Notifications"] = "Notifications";
_lang["See_my_profile"] = "View my profile";
_lang["Edit_profile"] = "Edit my profile";
_lang["All_Topics"] = "All my Topics";
_lang["All_Messages"] = "All my Messages";
_lang["js_topics_followed"] = "My watched topics";
_lang["Admin_panel"] = "Administration Panel";
_lang["Logout"] = "Log out";
_lang["Notif_see_all"] = "See all the notifications";
_lang["Notif_priv_msg"] = "You have received a <a href=\"/privmsg?mode=read&p=%(msg_id)s\">private message</a> from <a href=\"/u%(id)d\">%(name)s</a>";
_lang["Notif_report"] = "<a href=\"/u%(id)d\">%(name)s</a> has created a <a href=\"/report\">message report</a>";
_lang["Notif_friend_req"] = "You have received a <a href=\"/profile?mode=editprofile&page_profil=friendsfoes\">friend request</a> from <a href=\"/u%(id)d\">%(name)s</a>";
_lang["Notif_group_req"] = "<a href=\"/u%(id)d\">%(name)s</a> has made a request to join the group <a href=\"/g%(group_id)d-%(group_url_name)s\">%(group_name)s</a>";
_lang["Notif_friend_con"] = "<a href=\"/u%(id)d\">%(name)s</a> has just connect to the forum";
_lang["Notif_wall_msg"] = "<a href=\"/u%(id)d\">%(name)s</a> has just written a message on <a href=\"/u%(self)dwall\">your wall</a>";
_lang["Notif_abuse"] = "<a href=\"/admin/index.forum?mode=active&part=misc&sub=support&tid=69e9f444f7d0b56848780f9f9580218e\">An abuse</a> was reported";
_lang["Notif_topic_watch"] = "<a href=\"/u%(id)d\">%(name)s</a> has written a message in <a href=\"/t%(topic_id)d-%(topic_name)s#%(post_id)d\">in a watched topic</a>";
_lang["Notif_topic_watch_p"] = "<a href=\"/u%(id)d\">%(name)s</a> has written a message in <a href=\"/t%(topic_id)dp%(start)d-%(topic_name)s#%(post_id)d\">in a watched topic</a>";
_lang["Notif_topic_watch_guest"] = "A guest has wrote a message in <a href=\"/t%(topic_id)d-%(topic_name)s#%(post_id)d\">a topic you watch</a>";
_lang["Notif_topic_watch_p_guest"] = "A guest has wrote a message in <a href=\"/t%(topic_id)dp%(start)d-%(topic_name)s#%(post_id)d\">a topic you watch</a>";
$(document).ready(Toolbar.init)
$(function() {$('.ellipsis').dotdotdot();});
This javascript has an abundance of useful information which can be used for all sorts of features.
Lets look at the first bit:
- Code:
_userdata["session_logged_in"] = 1;
_userdata["username"] = "LGforum";
_userdata["user_id"] = 1;
_userdata["user_level"] = 1;
_userdata["user_lang"] = "en";
_userdata["activate_toolbar"] = 1;
_userdata["fix_toolbar"] = 0;
_userdata["notifications"] = 1;
Need to check if the current user is logged in? [ic]if(_userdata.session_logged_in) { //they are logged in, do stuff for members only }[/ic]
Need to check or write the current user's name? [ic]$('#element').html('Hello ' + _userdata.username);[/ic] - The username will be "Anonymous" for guests.
Need to use the user id? [ic]$('#element').html('<a href="/u' + _userdata.user_id + '">Your profile</a>');[/ic] - The user_id is -1 for guests.
Need to run Javascript only for mods? [ic]if(_userdata.user_level > 0) { //mod or admin, do stuff }[/ic] - This user_level will be 0 for guests and members. 1 for admins and 2 for moderators.
The rest is pretty pointless, but those above will prove very handy. Its for this information, that I have chosen to use the Forumotion toolbar over my own.
The next bit is a language object. These are used for changing the toolbar into different languages (I imagine this is done automatically for you to your board language), this sort of set up is used so many piece of the same Javascript do not need to be written. A simple example would be this:
English: [ic]alert('Hello Mr LGforum');[/ic] - French: [ic]alert('Bonjour, Monsieur LGforum');[/ic] - two seperate codes for 2 different languages.
However if you did this: [ic]var greeting = 'Hello, Mr LGforum'; alert(greeting);[/ic] - 1 code and the user can change the greeting to whatever they want. (You've seen something sort of similar with AWC translation)
So you can use this to change the wording of the toolbar. For example you want to change the bit which says 'View my topics' to 'Visit your threads', you simply put this in an announcement or widget (or even the right place in the template for punbb boards) [ic]<script>_lang["All_Topics"] = 'Visit your threads';</script>[/ic]
You can even use this little trick to insert HTML into the bar, like images and all sorts. For example, you could change the 'Log Out' words into an image of choice just by changing [ic]_lang["Logout"][/ic] to the HTML of an image, or little icons in front of all the options.
The next chunk is the same thing, however these are formatted to include dynamic data. Should you need help or an explanation of how this formatting works take a read here: http://www.php.net/manual/en/function.sprintf.php
Editing these will allow you to change how the notifications look and work. After a while, i'll see if I can add avatars to the avacweb ones.
So that's about all you need to know regarding the toolbar right now until I've played around with it for a little longer. If I find any more interesting factors regarding I'll be sure to share them.