bento-io / collection Goto Github PK

Gives people the opportunity to search through the content here for the thing they're looking for. This should also include metadata about each box. For example, putting in "database" should return results like "sql," "mongo," and "neo4j."

I think that it's now time to give more context around some of the major technologies that are here, especially when it comes to those that will be part of the essential curriculum (#137). This should be a fully separate page treated just like any other link, but it has a longer description (250 words or less) and an overview with the full list of links and more features.

In the end, it should push Bento to become a more comprehensive site with some original content that can be linked and shared to.

The number of boxes that are on Bento is starting to get unwieldy. I've gotten numerous comments that the large list of technologies is overwhelming to a beginner. As a measure, I think that it makes sense to figure out which are the absolutely essential needs for a full-stack developer in the beginning stages (someone you would be willing to hire perhaps as an intern) and put the rest under a fold.

I think the first three rows are a pretty good start. It should cover:

• Web fundamentals (understanding what IP addresses are, http, etc.)
• Front-end basics (HTML, CSS, JavaScript)
• One strong backend language and framework (I prefer Python on Flask)
• A database / query language (I think SQL is best)
• Basic version control (Git)
• Basics on hosting and domains (needs to be filled, but Heroku is a good one)

please add some resources on j2ee and operating system

Grunt should be in the "foundational" category, backbone, ember, and coffeescript should be in "frontend".

Got this error when pull requested:

The page build failed with the following error:

CNAME already taken: www.bentobox.io

For information on troubleshooting Jekyll see:

https://help.github.com/articles/using-jekyll-with-pages#troubleshooting

If you have any questions please contact us at https://github.com/contact.

Hide all boxes that don't fit the filter criteria. The interface should display as if the other boxes don't even exist, to provide minimal distraction to the user.

Don't force names like HTML, CSS, JavaScript, jQuery, and Python to lowercase. Use the correct capitalization of each name.

Remember that we are programmers who work in mostly case-sensitive languages, so even if you like to force names to lowercase for stylistic reasons, it looks too much like a syntax error.

Things like front-end, back-end, database, etc.

I love the bento concept, but I can't get facebook auth to work (chrome mac)

I'm trying to figure out how to run it locally to try out some changes, and am finding it not very obvious. Instructions could save contributors some time.

Steps to Reproduce :

1. Open the link : https://www.bento.io/ and observe that following message is displayed :

Application Error

An error occurred in the application and your page could not be served. Please try again in a few moments.If you are the application owner, check your logs for details.

I suggest changing the hover-over color of the links. The blocks that contain darker background colors don't contrast well with the blue hyperlinks. However, we all would be hard pressed to find a suitable color that contrasts against all backgrounds. That's why I thought of using something like this: http://jsfiddle.net/9Ljrf/1/ (a quick, messy mockup)
I haven't yet thought of what to do when you hover over, though.

I thought it would be a good idea to include Learn street:
https://www.learnstreet.com/lessons/languages/

http://www.elasticsearch.org/webinars/getting-started-with-elasticsearch/?watch=1

When the user clicks outside of the "more" frame (see node, for example) the frame should go away.

Even though the content.json is correct and the generated html too:

<a target="_blank" class="title ng-binding" name="flight" href="http:/flightjs.github.io">flight</a>

The browser thinks the url is "http://www.bentobox.io/flightjs.github.io"

broken in

• Chromium 30
• Firefox 23

works in

• Safari 6.0.5

Do you know of any good resources to learn about APIs from bottom-up?

-CC

http://code.tutsplus.com/tutorials/nodejs-for-beginners--net-26314

As someone who has gone from not knowing what the letters in HTML stand for to a salaried developer in ~2 years using nothing but online resources, I can state without hesitation that my biggest advancement was learning about virtualization and the idea of environments about 6 months ago. Up until that point, it was all MAMP, and I never saw the purpose of using anything else.

I'm biased towards vagrant, because it's what I use everyday. But offering up any virtualization tool(s) would save the savvy beginner a lot of future headaches, and give them a truly marketable skill.

Virtualization is the first topic I cover with junior devs, and is essential if we're talking about "building" things. If you can mock your environment (or better yet, environments), setting up and maintaining servers---the foundation of actually shipping to the web---is a piece of cake.

When I open http://www.bentobox.io/, I only receive header with close link just refreshing the page and with About me section. Javascript console says following:

Uncaught SyntaxError: Unexpected identifier content.js:627
ReferenceError: CONTENT is not defined
at new masterCtrl (http://www.bentobox.io/javascripts/main.js:85:17)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:28:464)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:29:80)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:53:80
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:44:136
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:6:494)
at i (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:44:1)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:40:86)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:40:103)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:39:153 angular.min.js:63
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. ping?client_id=521121077928184&domain=www.bentobox.io&origin=1&redirect_uri…26relation%3Dparent&response_type=token%2Csigned_request%2Ccode&sdk=joey:1

Regards,
Mario

Hello,
i was wondering if you could create a box that showed the best sites to learn pseudo code?

Thanks,
Hannah Mathews

http://dlang.org/

http://qznc.github.io/d-tut/

Anyone think this should be a new box?

Clicking on sign-in with fb gives an alert saying that the dev hasn't set up the app properly.

When you scroll down the page, the "try learning tracks" banner persists at the top:

But then when you click on the Feedback nav item, the dropdown menu appears behind the banner.

Hi JonHMChan and all contributors of this resource. I really like it.
And i have one questions. You show at one level PHP, Ruby, Javascript, etc. and Facebook with Foursquare which aren't programming language. Maybe it's better to change it location, put it on another logical level or create for this purpose some category? What do you think about it?

I noticed that at https://www.bento.io/home when looking at my profile, when I tried changing my user name from my actual name to "lennys", which I normally use as a username, it threw a "IndexError
IndexError: list index out of range" error. I played with it a little and found that if I added an empty space after my "lennys" username, it would accept the change. So it looks like trying to use one word as your profile name causes an error.

Why clicking on "sql" highlights "json"? These two technologies are not really connected. Json would be more relevant for "nosql"

Why clicking on "sql" does not highlight "postgresql"

Why when clicking on "html", "php" is highlighted, but none of the other server side technologies like "python", "ruby", ".net"...?

Learning each of the technologies in isolation are necessary but not sufficient. One can learn how to write HTML, CSS, and JavaScript, integrate them pretty seamlessly, but when it comes to actually putting the site on a hosting solution, registering a domain, setting up records, etc. there's still a lot missing. This knowledge is not necessarily packed neatly into a "box" as is provided here. So, I'm proposing that there are "bridge" boxes that serve as a category of their own to cover topics like this. There are a few that I think fit pretty nicely into this (i.e. http, security, seo). I think they need to put in a tier above the rest.

Here's a list of some bridge boxes that I'd like to see:

• Fundamentals learning the basics of the Internet, IP addresses, URLs, etc. (http://www.20thingsilearned.com/)
• Domains what a domain is, subdomains, different kinds of records, providers, etc.
• Hosting 101 on hosting on popular platforms (AWS, Heroku, DO, etc.) use of FTP, SSL, etc.

It is also worthwhile to reconsider some existing boxes that may already fit this description:

• http
• https
• security
• big-o
• data structures
• apis

I think that some further context could be given for the boxes when they are highlighted. I definitely want to keep the short descriptions, and to keep them succinct as possible, but I think that these could benefit from some elaboration. One issue may be mobile optimization with the tooltips going around or near the boxes (perhaps underneath the box)?

I think one of the things that would be really interesting is to provide a shortest-path guide from any node to another. This could provide people that are trying to figure out what to learn or how best to learn a specific technology on how to get there. We could also provide a visual way of showing trees as "alternate" paths.

egghead.io has a few but would love to find more resources on it.

There is no place to login/register.

Hi there! Looks like the Tryelixir.org website is a miniblog about parts of the brain and shouldn't be included under the Elixir tutorials.

Big-O, data structures, algorithms, etc.

Hi John,

On chrome if you click a resource header (like css xml etc) and go back to bento , colors become unstable like this :

D3 for codecademy is not finished. Try adding http://thinkingonthinking.com/Getting-Started-With-D3/

I love the goal of this site.

I wonder whether it should be displayed in a tree format. Similar to how many Talent Trees are displayed in RPGs, people should be able to start at a root (HTML), level that skill up (by moving through multiple links of varying difficulty), and then choose to move to a next-order technology (CSS). Then repeat the process.

While still on the HTML level, you might see a couple of suggested technologies to move on to (CSS, JS). The user can choose one of these (CSS), and the tree structure would change. HTML would gray out, CSS would highlight, CSS links would appear. Suggested technologies beyond CSS would appear. JS would remain grayed out as an alternate branch off HTML. Unless, as in this case, that technology would also make sense after the chosen progression. That is, since JS might come after either HTML or CSS, the JS branch off HTML would disappear and JS branch off CSS would appear.

I think semi-masking later technologies will help present info in a bite-sized manner and prevent people from feeling overwhelmed.

Just some thoughts!

I really love your list, great job!
I think it would be nice to also have some links that teach a little about SEO. sorry that I have none to suggest.

Though I realize it's the "it" PHP framework of the moment, if you're going to include Laravel, it probably makes sense to include Symfony, as Laravel is built entirely on top of Symfony components.

In fact, if the beginner in question aims to be employable, I'd include Zend, Joomla!, Drupal, and WordPress (I know it's terrible) before Laravel. Laravel is fun, and a nice breath of fresh air for experienced PHP devs, but certainly not the most practical PHP framework to start with.

Desperately need to put in Google APIs on here. Wondering if anyone can contribute!

Calendar, +, YouTube, etc

Can there be a way to keep track of completed concept boxes on the homepage?

I select Android and I am not shown that I need to learn Java? Wait there is no Java box at all? :)

Hi

How can I access the locked content in Tracks?

"If in doubt, you should learn the resources in order from right to left, row by row."

Did you mean to write:

"If in doubt, you should learn the resources in order from left to right, row by row."
?

Great site, thanks.
Max

The original bento.io website had a simple design that made good use of the space available.
It would be good if we could dismiss the "learning tracks" banner and/or the search banner at the bottom in order to give as much space as possible to the content (the coloured boxes).

steps:

1. load home page fully
2. click the 'show more links' in a box
3. press back

Experienced in opera and chromium

the following happens

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