Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Casey
3,796 PointsHow does the TreeHouse site's library filtering system work?
Hi I really like how Tree house allow you to filter content inside of the library. I can see this looks like it's done by using the data attribute to link to pages with a list of items with the same topic. However I'm struggling to deconstruct how you've achieved this. Is a database involved? Javascript?
5 Answers
Ryan Duchene
Courses Plus Student 46,022 PointsI assume that you're talking about how the Treehouse library will only show you the course of a certain topic when you click on that topic's link in the sidebar. So, for instance, when you click on CSS in the sidebar, only CSS-related courses show in the main area.
This can actually work both ways, in terms of client-side and server-side. You could use JavaScript to hide all the courses except the ones the user wants while remaining on the same page; and if the user has JavaScript turned off, clicking on the link will load a new page with the correct courses on it. It works for everyone, but the people who use JavaScript have a better experience. Progressive enhancement at work.
I've done the client-side stuff in this CodePen. Feel free to reference it and copy it if you want. The server-side stuff is a little more complicated, due to the fact that the database will be involved (and thus input must be filtered), but it's nothing ridiculously hard, especially when you're using Rails.
Julian Price
11,760 PointsIt's database backend framework using either php or ruby with taxonmonies Catergoies
Adam Casey
3,796 PointsThanks Julian
Julian Price
11,760 PointsIt's database backend framework using either php or ruby with taxonmonies Catergoies
Joshua Vaage
5,068 PointsI believe the library is built with Ruby on Rails. The filtering is likely handled by routes set up in Rails. So, I don't think any filtering is working with Javascript. I'm sure there is a DB but no matter which type of Database (MySQL, PostgreSQL, SQLite, MongoDB, etc...) the answer to your questions is probably Rails related.
Rails Routing: http://guides.rubyonrails.org/routing.html
Rails learning in Treehouse: http://teamtreehouse.com/library/q:rails
Adam Casey
3,796 PointsCheers Joshua, I'm not really able to use Rails in this instance as I'm working within a 3rd party CMS system. But thanks for the clarification.
Joshua Vaage
5,068 PointsI see. I thought you were just curious as to how Treehouse had actually built this and I took a guess. :)
James Barnett
39,199 PointsJames Barnett
39,199 PointsThat pen is pretty slick, nicely done.
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsThanks!
The Sass could be a lot DRYer if some of the classes were replaced with mixins/functions, but I like it overall.
James Barnett
39,199 PointsJames Barnett
39,199 PointsRyan Duchene - The way I look at it, it's quality JavaScript and since the pen exists to showcase a JavaScript technique that's what is important.
The SCSS doesn't have to be great for that because a lot of it is only for the demo and won't be reused. Similarly, the SCSS doesn't need to be responsive for a demo showing a JS technique.
#My2CentsAdam Casey
3,796 PointsAdam Casey
3,796 PointsYes that is want I ment. I want to create something similar but can't use Ruby as I'm constricted by the CMS we use. So maybe a javascript solution would suit us best.