new website design

[prasunanand]

Changed _config.yml to store the name of tutorials Changed index.md to display tutorials Added tags in the series files Changed the layout files Added Lato font and font-awesome for git icons Added custom stylesheets. Bootstrap is no more required

[wilzbach]

Hi thank you so much for your work. It looks fantastic. My response now might seem a bit picky, but if we really want to release a new design, it should be amazing ;-) That is why we should fix the points I mentioned in "remarks". I saw that you have some problems with Jekyll - I am more than happy to help you getting those points done, so that we can merge. Just let me know which points you are unable to tackle (or "very hard") ;-)

Remarks

1. Why do you need the static index in _config.yml - somehow you worked againsted jekyll
2. Liquid allows us to extend the main template -> why did you copy everything for container.html ?
3. You excluded series.html and series_overview.html - so how do we handle more series? Maybe we should make the categories on right menu (expect the active one) collapsed by default?
4. You removed extra_css and extra_js - any reasons?
5. I strongly dislike your ugly hack with the "tags"? Why a doubly nested array? Jekyll allows one to generate the ToC automatically and btw they are not "tags"
6. You removed the "improve this page" link - this is very important!
7. series_item.html (apart from these tags) you have a lot of comments there
8. Did you realize that your auto formatting reduced the explanation to a single line? (in series_item.html)
9. Lol you hard-coded the container to be the start page. Please move the body code over to index.md
10. The TOC menu on the right takes way too much space :(
11. Somehow highlightjs can't recognize the language anymore
12. Why did you replace the tabs with whitespaces? Especially the example file consists of tabs (so people try to split on \t and hence they should copy the correct file)
13. The markdown in the info boxes is no longer evaluated - this is because your auto-formatting condensed it to a single line.

BTW Bootstrap is still used by a lot of stuff, so we can't remove it.

Furthermore I have some suggestions for the design, most of them take less than a minute to change.

design stuff

1. I told you that the footer is not needed at the moment
2. on smaller devices your extendable menu button overlaps with TOC menut
3. "60 minutes read" sounds a bit strange, maybe a time icon in front and just "60 minutes"?
4. the Twitter + Google Plus icons should be centered
5. add space between the greater-than and "> Display the icon explanation"
6. the "star" & "fork" buttons look squeezed
7. Please use the BioJS DNA - you can find it here

My "ideas" for the future:

Ideas

1. the TOC menu on the left would be super useful if it is updated with ones' scrolling
2. Do you think it makes sense to combine the menu and the TOC? In any sense I think that the static menu on the right should have more "navigational" capabilities, e.g. like Polymer

[prasunanand]

Right now, I have just improved the design. No changes in the TOC Plz have a look. Regarding "Polymer", I can develop a similar UI but it needs design skills and I am very bad at it.

[wilzbach]

I just copied my points, removed some of them and restructured the rest. I will merge this as soon as we have fixed the TOC issue ;-)

easy to fix

1. Liquid allows us to extend the main template -> why did you copy everything to container.html ?
2. The markdown in the info boxes is no longer evaluated - this is because your auto-formatting condensed it to a single line.
3. You removed extra_css and extra_js - any reasons?
4. Did you realize that your auto formatting reduced the explanation to a single line? (in series_item.html)
5. You hard-coded the container to be the start page. Please move the body code over to index.md
6. Somehow highlightjs can't recognize the language anymore -> you fixed that, but PLEASE don't use a sans-serif font. Remove line 314 in style.css
7. You removed the "improve this page" link - this is very important! -> nice. Do you think it makes sense to add it to the header too (right next to the github icon)?

more difficult

1. The TOC menu on the right takes way too much space :(
2. You excluded series.html and series_overview.html - so how do we handle more series? Maybe we should make the categories on right menu (expect the active one) collapsed by default?

What greenify will fix:

1. I strongly dislike your ugly hack with the "tags"? Why a doubly nested array? Jekyll allows one to generate the ToC automatically and btw they are not "tags"

Reverting series will fix

1. Why do you need the static index in _config.yml - somehow you worked againsted jekyll
2. Why did you replace the tabs with whitespaces? Especially the example file consists of tabs (so people try to split on \t and hence they should copy the correct file)

design stuff

1. In my humbled opinion the footer is not needed at the moment
2. on smaller devices your extendable menu button overlaps with TOC menu
3. "60 minutes read" sounds a bit strange, maybe a time glyphicon in front and just "60 minutes"?
4. add space between the greater-than and "> Display the icon explanation" -> you fixed that my increasing the font-size, but now it is not vertically centered anymore - here is an idea: padding-top: 2px (line 377) and add vertical-align:middle to both the glyph and the text

---

My "ideas" for the future:

Ideas

1. the TOC menu on the left would be super useful if it is updated with ones' scrolling (the current scrollspy doesn't work for me)
2. Do you think it makes sense to combine the menu and the TOC? In any sense I think that the static menu on the right should have more "navigational" capabilities, e.g. like Polymer

[prasunanand]

@greenify .Thanks, You have helped a lot. Now I get what it feels to work in a team.I have fixed most of the issues. Problems with these: 1.Should make the categories on right menu (expect the active one) collapsed by default. ==>Should I implement it now because right now the left navbar will look bad with just two listings. 2.I am not getting "example file consists of tabs (so people try to split on \t and hence they should copy the correct file". 3.I removed the footer from the start page , but in the tutorials page, removing the footer makes "Improve this page" and "Privacy Policy" look ugly.

[wilzbach]

If you don't know how to revert the series folder, run this:

git reset --soft HEAD~3  # run this with extreme care
git checkout series _config.yml  # revert stuff
git commit -m "new website design" # choose a nice msg
git push -f

More info about git reset --soft

Now I get what it feels to work in a team

I hope I didn't frustrate you too much with my critics, but this is quite a huge (positive) change.

1.Should make the categories on right menu (expect the active one) collapsed by default. ==>Should I implement it now because right now the left navbar will look bad with just two listings.

Let's focus on getting this merged (see above) ;-)

2.I am not getting "example file consists of tabs (so people try to split on \t and hence they should copy the correct file".

Your editor automatically replaced all \t with whitespaces and in same examples it matters whether there is whitespace or tabs. This is one of the reasons why I suggested to revert your changes in the series folder.

3.I removed the footer from the start page , but in the tutorials page, removing the footer makes "Improve this page" and "Privacy Policy" look ugly.

Okay you convinced me to keep the footer, but we should resize its height.

[gyachdav]

Where can we see this redesign?

Sent from my iPhone

On Feb 11, 2015, at 7:15 PM, Seb notifications@github.com wrote:

If you don't know how to revert the series folder, run this:

git reset --soft HEAD~3 # run this with extreme care git checkout series _config.yml # revert stuff git commit -m "new website design" # choose a nice msg git push -f More info about git reset --soft

Now I get what it feels to work in a team

I hope I didn't frustrate you too much with my critics, but this is quite a huge (positive) change.

1.Should make the categories on right menu (expect the active one) collapsed by default. ==>Should I implement it now because right now the left navbar will look bad with just two listings.

Let's focus on getting this merged (see above) ;-)

2.I am not getting "example file consists of tabs (so people try to split on \t and hence they should copy the correct file".

Your editor automatically replaced all \t with whitespaces and in same examples it matters whether there is whitespace or tabs. This is one of the reasons why I suggested to revert your changes in the series folder.

3.I removed the footer from the start page , but in the tutorials page, removing the footer makes "Improve this page" and "Privacy Policy" look ugly.

Okay you convinced me to keep the footer, but we should resize its height.

— Reply to this email directly or view it on GitHub.

[wilzbach]

Just do a git clone and run jekyll locally ;-)

(You might need to use bundle)

git clone https://github.com/prasunanand/edu
bundle install --path vendor/bundle
bundle exec jekyll serve

[prasunanand]

scrollspy can be implemented. Plz give the headings a "contentNavigate" class.

[saketkc]

@prasunanand Thanks for your hard work!

1. Can you squash your commits to a single commit?

git rebase -i HEAD~4

Then change pick to 'squash` for the bottom 3 lines in your editor. It would be preferable to summarize your work in a single line followed by a paragraph.

1. Can you remove those static files that are probably never going to be used? There are numerous .ttf files, but we aren't using all those fonts, right?
2. Do you think we should only put the minified versions of certain css files such as font-awesome.css since it is highly unlikely that someone would fiddle with them.
3. Do we also need to keep the *.less files? Again, they would not be fiddled around with?

For 3,4 see external/bootstrap.min.css for example.

[wilzbach]

1. Can you squash your commits to a single commit?

I am already doing that (including 1-3) - will push the merge soon.

[saketkc]

@greenify Do you think all those files should go in? Some of them are not being used anywhere, right?

[wilzbach]

Nope I totally agree with you, there is no need to host the source of font-awesome - that is what I meant with "including 1-3".

[saketkc]

Cool!

[wilzbach]

I merged this with https://github.com/biojs/edu/commit/97d09455a4038d5206506542a5c45a5128d57beb

and this is now online at http://edu.biojs.net

I did a couple of changes, most noteworthy I wrote very quickly two custom plugins (1 for the series menu, 1 for the TOC). The TOC is based on toc-generator and doesn't work for all pages at the moment, because some don't use h2 tags. I guess the quickest fix would be to either hide the menu if its empty or add h2 to the pages without a TOC.