GSoC Pencils Down

Google Summer of Code 2015 has come to an end. And yes I am satisfactory to a certain level that I have produced something tangible and all of you are able to access it which is deployed in Openshift. And here is the link: http://askbotfedoratest-anuradhaw.rhcloud.com. The github repository which contains the code is here: https://github.com/anuradha1992/askbotfedoratest. We are planning to merge the code with the repo at https://github.com/fedoradesign/askbot-test so that others can also use it and build upon it.

GSoC Updates for the past week

For the past week I have been testing the website whether it functions properly and identified some bugs and managed to fix them. One of the major issues I had was with the sidr menu which was supposed to pop up in the mobile view. It was giving the following error and was not appearing.

Uncaught TypeError: $(...).sidr is not a function

I identified that the problem was that I was using a newer jquery version which is 1.11.2 and the existing Askbot using jquery version 1.7.2. I found out that sidr also works with version 1.7.2 of jquery and used it instead. And below are the screenshots of the sidr menu which is working now.

Sidr menu when accessing the website as an anonymous user

Sidr menu when accessing the website as a logged in user

I have also met up with cross browser compatibility issues and small issues with the styling and I have handled them one by one. One of the significant issues with regard to cross browser compatibility was that the CSS property box-sizing: border box was not working with versions of Firefox. There is a simple trick to make it work which is including the property -moz-boz-sizing: padding-box. Other wise the width of the elements will be calculated excluding the padding which is applied on those elements.

And my mentor Suchakra also reported some bugs regarding the styles which you will be able to view here: https://github.com/anuradha1992/askbotfedoratest/issues. These issues are also solved during the past few days and you will now be able to see a cross browser compatible, stable version of the web site by going to the project link mentioned at the top of this blog post. And you are also free to report any bugs and issues related to the functionality of the website so that I will attend to those issues.

Progress with the entire project AskFedora UX/UI and functionality overhaul

The github repo which contains the code can be accessed here https://github.com/anuradha1992/askbotfedoratest and we are planning to merge the code with https://github.com/fedoradesign/askbot-test and make it releasable. I have tested the website for responsiveness and cross browser compatibility through https://www.browserstack.com and it has worked okay. However I have discovered some bugs with the already existing Askbot instance by which the current AskFedora website is powered. The following are those bugs which my mentors and I agreed to look into after the GSoC pencils down by contacting the original designers of Askbot. 

• When going to post an answer anonymously in the Q/A page, the option [hide preview] is not working hence the preview does not disappear when [hide preview] link is clicked.
• When accessed the Q/A page as a logged in user and entered some text in the wmd-container of the Add answer section, the Add answer link which is not supposed to be there appear when the Q/A page is loaded again. An image of the above mentioned bug is denoted below.

• And one of the critical bugs is that in the User profile page under Followed questions section, the pagination which is there to navigate back and forth in the list of followed questions does not work.
• The question search Javascript functionality is not working in all the static pages excluding Tags, People and Badges pages and also in pages Sign in, Sign up, User network, Edit profile and Manage user login.
• Also there is an inconsistency in the between the Tags and People pages because of its search functionality. In the Tags page, the search dynamically updates the pages after each key stroke that we type in the search bar but in the People page we need to type in the name of the person whom we want to search and enter it to view the results. 

These are the drawbacks which are left to be solved and they are with regard to the Askbot functionality. Before making a stable release it is better to attend to these issues beforehand.

And finally the following are screenshots of the mobile and desktop views of the main page of AskFedora as it is at the pencils down of GSoC.

Main page mobile view

Main page desktop view

Words about GSoC and The Fedora Project

Although it is Google SUMMER of code, being in a tropical country it's always like summer in Sri Lanka. Hence we do not get any special holidays for summer and I have gone through this competition while attending the university and doing various university assignments as well. With the limited time I have had I am happy that I was successful in managing the time to get this project up to this state and feel contended about it. The journey up to now has not been easy because I had to learn a bunch of new technologies and have met up with a number of issues during coding and integration. With the help of my mentors Sarup Banskota and Suchakra Suchakra I was able to manage these issues and I want to mention Ahmed Fathy Hussein (IRC nick: TheMonster) and Patrick Uiterwijk (IRC nick: Puiterwijk) as well for helping me out in tackling some of such issues. And also not to forget Kushal Das (IRC nick: kushal) and Kevin Fenzi (IRC nick: nirik) for providing guidance for the GSoC students over the past few months. Thank you everyone for your support!

Even though GSoC has come to a pencils down, my contributions to The Fedora Project will not halt. And here onwards I will start contributing to The Fedora Project as a member of the Fedora design team and I look forward to the day that AskFedora gets released with its brand new look. :)

Read More

GSoC Updates

During past week I have proceeded more with integration and I have worked on the Ask page, Edit question page, Tags, People, Badges and User profile and related pages. As said in the last blog post I needed to work more on the mobile view of the footer and after many experiments I thought the following look of the footer will serve right in the mobile view. However any criticism about the styling of the footer is welcome as always :)

Footer mobile view

And also as there are many links in the user profile page for overview, inbox, network, karma, followed questions, activity, votes, subscriptions and moderation when it narrows down to the mobile view the links overlapped on each other. Hence I had to figure out a way to prevent this and structure the links in a possible nice manner so that they will not overlap. I changes the arrangement of those links at 2 breakpoints one at 600px and the other at 1200px so that they have 3 different arrangements. The following screenshots shoes the 3 arrangements.

Mobile view

Intermediate view

Desktop view

I also styled the pagination so that the page numbers are enclosed in a circle shaped div as depicted in the image below.

Pagination

And earlier when my mockups were reviewed by the people who were present at FUDCon, they have mentioned that making the badges just like the tags with a pointed front does not make the badges distinguishable from the tags. Hence when integrating I removed that pointed part from the styling of the badges and now the badges look like the following.

Badges page mobile view

Badges page desktop view

Furthermore I have worked more on the Sign in page, Edit question page, Tags, People pages and all the static pages including Help, Faq etc. I have also worked on the User profile page and related sub pages including the Subscription, Moderation, karma and followed questions. Some of the integrations with regard to those pages are included below.

Sign in page mobile view

Sign in page desktop view

Edit question page mobile view

Edit question page desktop view

Identified bugs

During integration I have come up with the following bugs which needs to be fixed.

• The sidr side menu which is supposed to appear when the hamburger icon is clicked does not appear after Askbot's javascript files are imported via the collectstatic command.
• In the main page as soon as the user adds new interesting tags and ignored tags, the tags appear just fine with the delete option just after each tag. Yet when the page is loaded again the delete section of the already added interesting and ignored tags does not appear the way they should. This problem is shown through the screen shots included below.

This is what appears when tags are newly added through the text boxes.

 Yet when the page is loaded again this is what they look like.

•  In some of the pages the main header which consists of the search bar overlaps with the header above it. This also happens after typing in the collectstatic command where more stylesheets and javascripts files are fetched with that command which overrides the existing files.
• In some of the pages the javascript search functionality with regard to the search bar seems not to be working.

Moreover my mentor Suchakra will be reporting bugs in the github tracker about the integration I have done so far so that it will also help me out in tracking the bugs. I hope to get these bugs resolved as soon as possible and continue with the integration.

Read More

Progress with integration

Okay this week I have done some integration with the following pages. I have included some screen shots of the pages also.

Main page desktop view

Footer

 Q/A Page mobile view

Q/A Page desktop view

Sign in page

Sign up page

I have also done bit of integration in the User page but need to further work on the right aside of the user menu to include the sliding accordion. And as you can see in the above screenshots I have modified the footer of the page so that it is similar to the footer used in the getfedora.org website.

Problems I have encountered while integration

1) I have included the sliding menu which appears in the desktop view in my testing instance setup at Openshift. The sliding menu make use of sidr jquery library to get the accelerating effect of the sliding menu and it works correctly when I run the testing instance without getting the default javascript from the orginal Askbot to my application by typing in the collectstatic command. But after I type in the collectstatic command the sliding menu does not appear when I click on the hamburger icon on the header.

2) Some of the javascript seems not be working in few of the pages. I have seen the errors that have risen up through the console and it may be due to something I have done when overriding the templates. 

I am going to look into those troubles within the next work and proceed with the integration. By considering the options given by my mentor Suchakra I am going to implement the links of ALL, UNANSWERED and FOLLOWED links in the header containing the no. of questions. And I am going to implement them as options which would clearly indicate which one is currently selected. I am going to experiment with that also during the next week.

Read More

Got the issue resolved and back to work after exams :)

Remember that I have met up with the following problem while I was doing integration?

UndefinedError at /badges/  'django.contrib.auth.models.AnonymousUser object' has no attribute 'is_read_only'.
You will also be able to see the error by going in to the site: http://askbotfedoratest-anuradhaw.rhcloud.com/questions/

This error did not appear when I have logged into the website, yet it appeared each time when I tried to access the website as an anonymous user. With the help of puiterwijk from the #fedora-admin IRC, I got to know that it was a problem regarding the templates which I have overridden. So, the problem was in the widgets/user_navigation.html template. I have moved the following part to the bottom of that template because according to the new design the user account information of a logged in user should be displayed to the right of the header.

<span class="user-info">

{{ macros.inbox_link(request.user) }}

{{ macros.moderation_items_link(request.user, moderation_items) }}

{%- if settings.KARMA_MODE != 'hidden' or settings.BADGES_MODE != 'hidden' -%}

({{ macros.user_long_score_and_badge_summary(user) }})

{%- endif -%}

</span>

<a href="{{ request.user.get_absolute_url() }}">{{ request.user.username|escape }}</a>

This has caused the error in the website because the above mentioned code was earlier inside the {%- if request.user.is_authenticated() -%} clause. So, now you can understand the problem right? According to what I have done without noticing that the above code has come out of that if condition, the application looks for user information even when the user has not logged into the website which produced the error. So, when overriding templates it needs to be extra careful not to do such kind of mistakes which harm the application's functionality.

And according to the feedback I have received from the people present at FUDCon, it has been found that the hamburger menu needs to be removed because the old users will not directly spot that the links of 'ALL', 'FOLLOWED' and 'UNANSWERED' will be there when hovered over the hamburger icon. Most of them have not been able to understand why there is an hamburger icon on the secondary header. Hence the following mockup shows my idea on how it is going to be. I have first decided to include those 3 links in the body area so that they can get easily spotted without having to take second step. Yet secondly I have thought that those 3 links are common to most of the pages and hence they should be in an area common to most the pages which is the secondary header. And to blend with the blue colored image used in the secondary header, I have used a light blue color for the links. So, the following mockups where I have modified the desktop and mobile view of the Badges page will reflect my idea on that.

And also according to the feedback it has also been suggested to use a footer similar to the one in getfedora.org. Hence the modified design of the footer is also depicted in the mockups below. And as always feedback on these are welcome.

Badges page desktop view

Badges page mobile view

So, it has been a very busy week for me due to my mid semester exams and it is time to resume the work. As the GSoC pen down date is also near I hope to work hard on integration get some tangible product soon.

Read More

Feedback from FUDCon and progress with integration

Here are the findings of my mentors Suchakra and Sarup from the feedback they have received from the people at FUDCon. And here in my blog post I will post what I think about the things they have suggested and my ideas about incorporating them with the styles. Readers of this post are welcome to make any suggestions and ideas on what I have included here in the post so I can further get an idea about what it going to be good and what is going to be bad.

http://askfedoratest-anuradhaw.rhcloud.com/main
-----------------------------------------------------------------

1. Footer is off, the gradient does not go well with the site. A long form footer like other getfedora.org sites can be good.

I also think that the footer in the getfedora.org site will go well with AskFedora. And I was wondering where to put the links for privacy policy, get feedback and the paragraph ("Ask Fedora is community maintained and Red Hat or Fedora Project is not responsible for content. Content on this site is licensed under a CC-BY-SA 3.0 license."). Having a footer like in getfedora.org will enable us to have them also in the footer.

2. Possibly Reduce border radius of cards, make card shadow a bit lighter

For the border in question cards, how about not having a border? I just removed the border from the browser and thought it then blends well with the background. Then the background color of the questions cards need not be changes as they need some contrast from the background.

3. Tags look very prominent - make them light. Hover color on yellow tag does not seem ok.

I tried with using a color like #9E9E9E which is more lighter. Will something like that go well with it? I also had this strange feeling that the hover color is not quite okay with the yellow tags. Will something brighter like #FFA500 work on it like what it has in StackOverFlow?  

4. Fedora logo is not the standard one. Colors are off. 

Well isn't the Fedora logo the same as what they have in getfedora.org?

Hamburger menu: Probably remove it, new users were not able to identify what it was and why it was needed there. The unanswered, All and followed links could be put somewhere else - check stackoverflow for example.

Okay then the Hamburger menu needs to be removed. I was thinking about having the links All, Followed and Unanswered in the body area just about the question cards so that it will be easier to be located. I could not think of any place else to put them in according to the current design. Do you have any place better?

http://askfedoratest-anuradhaw.rhcloud.com/qa
-----------------------------------------------------------------

1. Page looks too packed. Horizontal line spacing is very less. Proper margins and padding required

I will look into this matter while I am integrating the styles with the testing instance in Openshift. And experiment on increasing the horizontal line spacing as well as the margins and the padding.

2. Font sizes/typeface (bold, normal, light) are disproportionate in some places.

This can also be dealt while integrating. I will make the sizes, font-weights consistent throughout the page.

http://askfedoratest-anuradhaw.rhcloud.com/user 
-----------------------------------------------------------------

1. Tags != badges. They need separate designs - probably not pointed on one side as tags. Font size disproportioanate in profile overview section, also proper spacing

Yeah the badges design needs to be changed. I thought of removing the pointed section in the badges and just have them as simple rectangles with rounded edges.

2. Subscriptions and Moderations overflow from the bar on smaller screens (12 inch etc). On smaller screens these links vanish


I have made them vanish when it comes to smaller screen sizes because I thought they are not much required and also it will make the page unnecessarily cluttered. Do you still think these links of Subscriptions and Moderation are essential when it narrows down to small screen sizes?

http://askfedoratest-anuradhaw.rhcloud.com/login
-----------------------------------------------------------------

1. Some screen space is wasted for no reason. We could spread things out a bit

Actually not only on the login page, I thought that the screen space is wasted on both sides when it comes to other pages as well. So, in the integration work I have worked on I have spread things out to both sides so that much of the screen space is utilized. A screen shot of the integration I have done is also shown below. 
 .
2. Icons for services have to be uniform throughout the website.


I will be looking into this matter when doing the integration so that it would have uniform icons for services throughout the web site.

http://askfedoratest-anuradhaw.rhcloud.com/badges 
-----------------------------------------------------------------

1. Line spacing, badges design change. 

The design of the badges will be changed so that they will not having the pointed part to the left and the line spacing will also be increased.

http://askfedoratest-anuradhaw.rhcloud.com/post_question 
-----------------------------------------------------------------

1. Spacing, margin between elements


Spacing between the elements like the text boxes will be increased so that it will have a better and uncluttered look. 

2. What is box below title?


I thought that having the text area just under the title text box will be quite obvious for the user to think that it is the place where they need to type in the details of the question. I got that idea from the StackOverFlow website but if it is quite confusing, we can add some wording on the top of the box saying "Type in the details" or something like that.

3. Text overflows from sidebar. With proper margin/padding and widths this may go away.

Yeah in the Post Question page the wording in the sidebar overflows in the right aside. Thanks for pointing that out I will look into that matter.

Progress with the integration

I have done some integration work with the Main and Badges pages of AskFedora and here are some screen shots of the work I have already done.

The Main Page

The Badges Page

The pages above are currently quite a mess because I have not done with the integration completely.

Yet I have met up with the following problem in the browsers in which I have not logged into the website.

UndefinedError at /badges/  'django.contrib.auth.models.AnonymousUser object' has no attribute 'is_read_only'.
You will also be able to see the error by going in to the site: http://askbotfedoratest-anuradhaw.rhcloud.com/questions/

I do not get this error in the browser in which I have logged in to the site. I haven't changed anything regard to implementation but have only changed the styles and templates. So, I wonder why this error is coming up. I hope to find out the error during this week and proceed with some more integration work with the website :)

Read More

GSoC weekly update: How to override templates and styles in AskBot

Okay this has been giving me a lot of trouble from the beginning and I am really glad that I could sort this out :) Thank you very much Ahmed Fathy Hussein (IRC nick: TheMonster) who helped me to resolve this. And as I could also not find any clear documentation regarding overriding templates and styles in AskBot I will try to explain this here.

So, first of all the testing repository for AskFedora can be cloned from here: https://github.com/fedoradesign/askbot-test to set up our own staging instance in Openshift. I have explained how to set up an Openshift staging instance in one of my earlier posts. AskBot comes as a dependency with this staging instance and it get installed under app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages in Openshift. 

The problem I had was how to override the default styles and templates given by AskBot. All the html templates of AskBot are placed inside the 'templates' directory and the CSS, JavaScript, image files etc. are placed inside the 'media' directory. What I tried earlier was trying to change the original AskBot files by ssh into my Openshift repository. But it was very difficult as each time when I needed to do a change I had to ssh into my instance and get the files changed by opening them with the nano editor from the terminal. So, never try that there got to be another solution ;)

So, the solution is this. What we need to do is create a new skin folder inside the repository which is uploaded to Openshift and edit the settings.py file in our repository to type in the following line of code to point to the new skins directory.

ASKBOT_EXTRA_SKINS_DIR = os.path.join(PROJECT_ROOT, '../static') #path to your private skin collection

The directory structure of the new skin folder (Mine is named 'askfedoratheme') should be like this:

-askfedoratheme
        -media
             -style
                  -style.css
             -js
             -images
        -templates
             -main_page.html

Only the templates and files that needs be overriden should be placed inside the new skin folder and the rest of the files will be taken from the default skins and templates provided by AskBot. Of cource the AskBot directory structure should be maintained when creating our own skin. And remember that the new skin folder should be placed inside wsgi/static folder. I have earlier placed it inside askbot_devel folder which did not work. And after that I pushed the repository to Openshift but guess what it did not work as expected :P It was giving a server error. How do we know what the error is? The best way to find a runtime error in Openshift is ssh into the instance and go to the project root of the respective repo and type in 

python manage.py runserver

After running that command the following popped up:

Add ASKBOT_EXTRA_SKINS_DIR to STATICFILES_DIR entry in your settings.py file.
NOTE: it might be necessary to move the line with ASKBOT_EXTRA_SKINS_DIR just above STATICFILES_DIR.

Then as asked I added the ASKBOT_EXTRA_SKINS_DIR under the STATICFILES_DIRS in the following manner:

ASKBOT_EXTRA_SKINS_DIR = os.path.join(PROJECT_ROOT, 'askfedoratheme')
STATICFILES_DIRS = ( 
    ('default/media', os.path.join(ASKBOT_ROOT, 'media')),
    ASKBOT_EXTRA_SKINS_DIR,
)

And after making the changes again push the repo into Openshift. And it will still not work as expected. From the website if you have not created a user account yet, you need to create a user account from the website and that will be your admin account. When you log in from the admin account there will be a link called settings displayed on the top from where you could change the default settings of the website. It is the link to the admin panel. And from there under under 'Select skin' option you will be able to see your new skins folder which in my case is 'askfedoratheme'. And select that directory from the list.

The first time I tried doing that it gave me an error saying:

Site matching query does not exist.

It can be solved by following what is in the link here: http://stackoverflow.com/questions/16068518/django-site-matching-query-does-not-exist

And after doing so again select the new skins directory under Select skin option in the admin panel and then all the styles and templates that you have included in your new skins folder will override the default templates and styles given by AskBot. :) Hope this will solve any kind of issues people ad regarding how to do override the default templates and styles in AskBot.

References

• http://askbot.org/doc/customizing-skin-in-askbot.html#what-are-skins-made-of
• https://github.com/ASKBOT/askbot-devel 

 

 

Read More

Yay passed the mid evaluations!

Yeah I have passed the mid evaluations thanks to the guidance provided by my mentors all along the way! :) The path up to know has not been a bed of roses as I started not knowing anything about responsive web design and now I think I know the basics. So, with that happiness of success in my mind, here is the update for the last week.

Basically I have coded the User page, Badges page and Login page of AskFedora and I am half way through coding the Ask Question page. The links for the above pages are given below respectively:

• http://askfedoratest-anuradhaw.rhcloud.com/user
• http://askfedoratest-anuradhaw.rhcloud.com/login
• http://askfedoratest-anuradhaw.rhcloud.com/badges
• http://askfedoratest-anuradhaw.rhcloud.com/post_question

Some of the interesting features of the above pages are that the User page has two accordians on the right aside where the users can click to see the top tags and top badges of a person. This is will also reduce the size of the User page that the users need to scroll down to see the tags and badges and it will only show you the top tags and badges rather than all the tags and badges which will result in an uncluttered interface. And also the number of up votes and down votes section is also taken to the part which contain user profile information reducing the page height. And also I have tried to make an AskUbuntu style Badges page and an Ask question page by incorporating the arrangement of components in the corresponding pages of AskUbuntu.

I also have fixed some of the drawbacks that the mentors have pointed out in our last skype call, which are:

• Making the up votes and down votes arrows smaller along with the text showing the number of votes.
• Making the other buttons other than the ASK button more button like.
• Making the hr used in Q/A page lesser in color.
• Increasing the height of the footer.
• Making the text areas for posting and previewing an answer, consistent with the search bar.

And also I feel that the User page needs some more polishing to be done and I will be working on it in the next few days and also on the Ask Question page. Basically the next big leap that I need to jump is how to integrate the styles into the testing instance of AskFedora which is set up in Openshift. I have done some research on that and tried many things which people have spoken on forums, blogs etc. but nothing seemed to work correctly for askbot. My mentors are willing to help me on that and let's see how I am going to resolve this within the next couple of weeks :)

Read More

GSoC updates on week before the mid evaluations

Well, this week is kind of a very tiresome week for me because I needed to spend lot of time trying to grasp the correct process which I need to follow in integrating the styles I have coded, to the testing instance of AskFedora. So, here goes my update on the project.

Basically I have set up the testing repository for AskFedora in Openshift. The source for testing can be cloned from the git repository here. 

Basically the first step you need to follow is having Openshift client (rhc) installed in your PC. We can install rhc by typing in the following command in the terminal:

$ sudo gem install rhc

Then the following command run the setup that will create a config file and and ssh keypair:

$ rhc setup

And then you need to add the ssh key and start the ssh agent by:

$ ssh-all ~/.ssh/id_ras

$ ssh-agent

When setting up the testing instance in Openshift you need to go to www.openshift.com and create a new DJango based application using the source given in the above mentioned git repository. And then you need to ssh into your repository on Openshift typing the command:

rhc ssh your_application_name

on your terminal if you are using Linux or on command line if you are using Windows. Then you will be directed to Openshift and from there it's like working on another remote machine from your own computer. I have explored the file structure and directories on Openshift and yeah it is just like you own another computer on which you can work. (of course on a terminal though with no graphical user interfaces :P)

And then you need to go to app-root/repo/asgi/askbot_devel directory from the terminal and there you need to type in the following commands:

python manage.py syncdb

python manage.py migrate

python manage.py collectstatic

Well it's quite trouble when we need to type in the above commands each time we deploy a new instance. And there is a way in not having to do so each time. This is how I was able to do that:

Inside the .openshift -> action_hooks directory I created a deploy script with the following entries:

#!/bin/bash

echo "Executing 'python ${OPENSHIFT_REPO_DIR}wsgi/askbot_devel/manage.py syncdb --noinput'"
python "$OPENSHIFT_REPO_DIR"wsgi/askbot_devel/manage.py syncdb --noinput

echo "Executing 'python ${OPENSHIFT_REPO_DIR}wsgi/askbot_devel/manage.py migrate --noinput'"
python "$OPENSHIFT_REPO_DIR"wsgi/askbot_devel/manage.py migrate --noinput

echo "Executing 'python ${OPENSHIFT_REPO_DIR}wsgi/askbot_devel/manage.py collectstatic --noinput'"
python "$OPENSHIFT_REPO_DIR"wsgi/askbot_devel/manage.py collectstatic --noinput

so that on every deploy, it executes this deploy script and get the work done without me having to ssh and type the commands.

Now the application will run on Openshift just fine.

My first naive approach towards integration :P

Okay the first way I followed in integrating my styles with the test instance is quite naive I should say. What I did was I ssh into Openshift repository and explored the directory structure and found out that when installing dependencies askbot latest version is fetched and installed in the directory app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages. Then studied the structure of askbot as well and located where the template html files and the styles are in. The html templates of askbot are inside the directory called "templates" and all the css, less, javascript and image files are inside the "media" directory of askbot.

All the templates for pages in askbot extends the "base.html" file and then the "two_column_body.html" file. Basically these pages include many other html files such as header.html, secondary_header.html etc. Because of this structure it is very easy to identify the places where we need to access in order to do a change. Hence maintaining such an instance is quite easy because of the modularity of code. And also I found out that the most of the styles of askbot is included in the "style.css" file which is inside media/style directory. It also has an associated "style.less" file. 

At first I tried to integrate my styles directly to the askbot repository located at app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages which became a quite hectic process as I needed to work on Openshift using the nano editor through the terminal. And bit later I got to know that I was following the wrong method in integrating my styles with askbot and whatever the changes that I should be doing must be done in my local repo and it should be committed and pushed to Openshift to get the expected outcome. Well that was good lesson I learnt. Basically that is why frameworks are there right? Frameworks help up to do things the easier way. So, what I need to do is finding how templates and styles of askbot can be overridden in my testing instance so that I can simply work on my local repository and commit those changes to Openshift. :)

Read More

Cross Browser CSS coding

Okay now have coded the majority of the Main and Q/A pages of AskFedora which you can view here on Openshift: http://askfedoratest-anuradhaw.rhcloud.com. And one of the problems that I faced is that the things that show well in Google Chrome does show well in Firefox as well as in Internet Explorer web browsers. According to the articles that I have referred it is quite a difficult task to achieve the same beautiful and intuitive design across all the browsers. So, cross browser compatibility would require some more trouble :)

Here is what I got to know from my small research about cross browser compatibility. There are some small tips on CSS that you should follow if you are get a cross browser compatible web site. 

Understand the CSS box model

The CSS box model works same across all the browsers (but except for some  versions of Internet Explorer) which is a good thing. Basically box model talks about the layout. It has 4 parts which are:

• Margin
• Border
• Padding
• Content

 

The above is an image which describes the CSS box model. When we consider a particular block-level element it has the 4 properties of margin, border, padding and content. The width that we specify by the width property of CSS is the width of the content area and unless we specify a fixed a height, the height of the element automatically gets adjusted according to the content. And also we can specify padding, the width of the border and the width of the margin around the element. The padding and the margin areas are transparent. 

An example of setting all the above properties in a div element is stated below:

div{

    width: 200px;

    padding: 5px;

    border: 3px red;

    margin: 2px;

} 

In most of the browsers the total width of the element is calculated as:

total width = width + left padding + right padding + left border + right border + left margin + right margin

and the total height is calculated as:

total height = height + top padding + bottom padding + top border + bottom border + top margin + right margin

The issue with cross browser compatibility when it comes to the CSS box model is that in Internet Explorer 8 and its earlier versions, it includes padding and width of the border also in the width property. 

How to overcome this problem?

Well this has a simple fix which is including <!DOCTYPE html> to the top of the page. :)

Some important tips to remember when dealing with the CSS box model

• If the width of the block element is set to 100%, it should not contain any borders, padding or margin because if so it will overflow its parent.
• Layout problems can occur due to collapsing of vertically-adjacent margins of two separate elements.
• You need to have an understanding about the difference between fixed, relative and absolute positioning of elements. 

• Fixed positioning
• Fixed positioning position the element relative to the browser window and the position of the element does not change when even when scrolling.

                              #element-id{

                                    position: fixed;

                                    top: 10px;

                                    left: 5px;

                              }

                              

                              Here the top and left positions are calculated relative to the browser window.

• Relative postioning
•  An element with relative positioning is positioned relative to its normal position. 

                           #element-id{

                                    position: relative;

                                    left: -10px;

                            }

    

                            In the above code the element is moved to the left by 10px from its normal position.

• Absolute positioning
• Absolute positioning position an element with respect to its first parent element which has a position other than static. If there is no such parent element then the containing block will be <html>

                              #element-id{

                                    position: absolute;

                                    left: 10px;

                                    top: 5px;

                              } 

Understand the difference between Block and Inline

Every HTML elements has default display property which is either block or inline. Block-level elements are the elements that start on a new line and expand to take up the full width of its parent element. Hence we do not need to set its width to 100%.

Examples of Block-level elements are: <div>, <p>, <form> etc.

The inline elements do not start on a new line and only take up the necessary width and they will just ignore the width and height settings. It's the Inline elements that can be aligned with the vertical-align property and not the block elements. The Inline elements usually has a small space below them to accommodate letters like letter 'g'. And if the Inline element is floated it will become a block element. 

Examples of Inline elements are: <span>, <a>, <img>

Understand the difference between Floating and Clearing

We can specify float by using either float: left or float: right. By doing so the element will float left or right until it hits the margin of the parent container or else another floated element. In order to get the other elements to float around the floated element, they should be either inline or floated in the same direction. 

          #element-id-1{

                float: left;

          }

An element which is cleared will not flow around a floated element and it will usually start from a new line below the floated element. 

            

         #element-id-2{

                clear: both;

         }

And when making a web site cross browser compatible it is always good to start from Internet Explorer because most of the things that works in Internet Explorer will work in other new browsers also. As I proceed I will further include more details about cross browser compatibility across different browsers.  

Read More