Update UI for boxes for new features

[JonHMChan]

Some suggestions include:

• Tags for each box
• Color-coding related boxes
• Obvious buttons for behavior including (1) highlighting related boxes, (2) more links, (3) sharing the box
• A link to an overview page (possibly replacing the home link on the name of the technology)
• An indicator for new or refreshed content

[gigerbytes]

Question, In relation to color coding and overall organization.

How do you think the color coding should be?
By language e.g.:
python = green, ruby = red… etc.

By function/field e.g:
security = orange, frameworks = green, language = blue… etc

Another suggestion would be to allow people to search/filter by language or field, and the color coding would inherit that. This should help a lot with organization.

Maybe this can act as the "bridge" #136

[JonHMChan]

My intuition is that it would go by function:

i.e. front-end, back-end, database, api, etc.

[gigerbytes]

hmm, ok, here is a quick organization i made of what's currently there: (decided to paste so no more file):
FRONTEND
html

css
less
sass
bootstrap

javascript
angular
jquery
d3
leaflet

twig

BACKEND
python
flask
bottle
django
tornado

node
express
flight
meteor

ruby
rails

go
elixir

php
yii
cakephp
codeigniter
symfony
lavarel
phpixie

java
groovy
clojure
coldfusion

scala
play

perl
.net
twitterbootstrapmvc
ligtswitch

DATABASES
sql
json
xml
mongo
redis
memcached
rethinkdb
neo4j

API
rest
api
foursquare
sendgrid
google
mashape
semantria
twilio
alchemyapi
lob

MOBILE
ios
android
windows-phone
winows?
parse

IDE
sublime text
vim

BRIDGE
shell
regex

security
http
https

domains
git
big-o

heroku
apache
nginx
vagrant

mvc
seo

[JonHMChan]

This is a good list. 7 colors - so far. It's also interesting, looking at this visually, that there are clear subgroups in here too. The subgroups seem content related, so I think the "next" related parameters make sense as they are.

I think in terms of implementing these larger groups, they should be integrated with tags (perhaps the first tag corresponding to the group it belongs to). What I want to avoid is creating a separate field in the JSON for the category as it is for the tags that we should add later.

[gigerbytes]

I kinda agree with the first tag thing, because it can add flexibility in the future when… say someone wants to search a certain tag, like 'javascript' all those that are tagged 'javascript' will be highlighted in a default color, whether its front end or backend or whatever.

The first field will determine the default category and color, can it be set as fixed? so that when someone searches, all the boxes with the tag will be highlighted and the searcher immediately knows where each technology belongs.

P.S. will create a pull request for the list, feel free to change if anything's amiss/misplaced.

[JonHMChan]

Right - tag-based search is exactly what I was thinking of. I'm basically thinking that there will be a field in the JSON objects called "tags" and it'll simply add each tag as a class to the box. We can do tag based search and apply CSS rules pretty easily from there.

[gigerbytes]

yeah, so we have something like:

tags: what this is about/characteristics of this tech
next: tech that's closely related to this/ what your should learn next

btw the file combined to #140

[JonHMChan]

Right. Also merged your previous PR at #140

[gigerbytes]

Thanks