197 comments

[ 2.7 ms ] story [ 247 ms ] thread
OP here: in case anyone has suggestions, this is also on GitHub: https://github.com/JonHMChan/bento/tree/gh-pages

Would love your feedback!

I would recommend adding HTML5 Doctor http://html5doctor.com/ as they do a very good job of explaining the specific use cases of the semantic elements in html5 which is something many people either overlook or they use incorrectly. I really like it!
Yeah I definitely agree. I got your pull request, so I'll merge it in soon!
You should have links to webplatform.org - this is a varied collection of docs and tutorials contributed by browser vendors and other key web players, via the W3C.
Awesome - is it good for any particular technology or topic?
JavaScript, HTML, CSS, SVG. Not proprietary technologies (Flash, etc.) and not really server-side JS (yet).
Very cool. Like the site. The one thing I noticed is that you put "Codeacademy" but they really spell it "Codecademy", with no leading "A" in academy.
I'm not sure if the order is supposed to matter that much, but I feel like the blocks should be ordered from easy to hard. Why is PHP at the end of the list? Why is JSON so close to the front?

But yea, I just think the ordering could be better, still a nice resource!

Why would a data format not be very early in the list if ordered by simplicity or ease of learning? JSON is both..
It should be ordered alphabetically, with the colour of the block showing the difficulty or learning order (simple/compulsory = green, hard/niche = red).
It seems to be in order of relevance -- that would explain PHP being at the end. :)
Haha oh man, that's just asking for trouble isn't it?
What a zinger. Unfortunately a basic understanding of PHP is still required for enough tasks that I would recommend learning it early on. It is also a very forgiving beginner language that naturally segways nicely from html/javascript.
Today's most trendy baristas have nothing but negative things to say about PHP.

Programmers that use PHP would rebut, but they are too busy paying for their drinks using money they make from actually shipping code.

This needs to be on a shirt. (Probably in very small font.)
I would use my money earned by shipping PHP code to buy that shirt, regardless of ridiculously small font size. Para. 1 on front, Para. 2 on back.
The title and the pitch on the actual site are kind of disingenuous. This is a collection of resources to learn web development. Its hardly a cheat sheet or "everything you need to know".

A cheat sheet would be a succinct set of syntax/concepts/examples required to get by.

Having said that, its a pretty website and its a worthy cause so please don't take my critique too critically.

Thanks for the feedback! Anything to add in terms of tech I'm missing or better links?
http://learnpythonthehardway.org/

As far as tech, you're covering a lot of different topics. My knee jerk reaction would be add more of the competitors (i.e. foundation since you have bootstrap) but there's value in maintaining a smaller list of technologies since this seems to be targeted at true beginners.

For beginners, what about rad tools like Microsoft lightswitch or alpha everywhere/five or appcubator which offer much lighter learning curves and faster development, although for limited types of projects?
Especially since most of the links are just to the original projects' homepages...
> The title and the pitch on the actual site are kind of disingenuous

[...]

> please don't take my critique too critically.

If you don't mean to critique harshly, then please choose a word other than "disingenuous". I see the word misused a lot to mean something like "misleading", but it actually means that the author intentionally, duplicitously was trying to mislead the user. It is an insult used to question the intentions of the person it is used toward.

Here are some synonyms from Google: insincere, dishonest, untruthful, false, deceitful, duplicitous, lying. Clearly those words are not generally used politely.

You do realize that when you look up the synonyms to misleading you get many of the same results, right?

I'm sorry that you feel the word disingenuous has too strong a negative connotation but I won't curb my speech because of your opinion. If I were to follow that line of thinking I'd have also used a word other than critique because many people foster the opinion that it too has a strictly negative connotation.

I'm not asking you to censor your speech. Your use of the word seemed to be at odds with the part of your comment that claimed that it was not a strong critique.

The problem with synonyms is that synonyms are not perfectly equivalent, so you can use them to support a lot of false equivalencies. On the other hand, it's difficult to capture subtle connotations of words in a discussion, and synonyms are kind of the best tool available for getting across that shorthand. It's still a rather inadequate tool. I would say that "disingenuous" being a synonym of "misleading" is itself misleading, because the word "misleading" is neutral to intent where disingenuous is not.

Regarding the word "critique" (especially that form of the word, as opposed to "criticism"), I would say that there's a broadly used academic usage of that word that contains no negative connotation.

Honestly, I have no problem with the word disingenuous. If you were saying that the site developer was intentionally misleading people, then I agree with your usage of the word. But the way that I read your entire comment led me to a different interpretation, and thus my comment.

I'm not asking you to censor your speech. Your use of the word seemed to be at odds with the part of your comment that claimed that it was not a strong critique.

The problem with synonyms is that synonyms are not perfectly equivalent, so you can use them to support a lot of false equivalencies. On the other hand, it's difficult to capture subtle connotations of words in a discussion, and synonyms are kind of the best tool available for getting across that shorthand. It's still a rather inadequate tool. I would say that "disingenuous" being a synonym of "misleading" is itself misleading, because the word "misleading" is neutral to intent where disingenuous is not.

Regarding the word "critique" (especially that form of the word, as opposed to "criticism"), I would say that there's a broadly used academic usage of that word that contains no negative connotation.

Honestly, I have no problem with the word disingenuous. If you were saying that the site developer was intentionally misleading people, then I agree with your usage of the word. But the way that I read your entire comment led me to a different interpretation, and thus my comment.

P.S.

I've noticed that a lot of people on HN use disingenuous in this way that is more or less a direct synonym of "misleading", but outside of HN, I encounter the word much less frequently, and generally it is used in an accusatory tone. Of course language can mutate within communities and subcultures, and that's fine, but using the word disingenuous without implying negative intent carries the risk of offending someone accidentally. I liken the difference between the two words to that of the words "lie" and "misspeak". If you meant to tell someone that they misspoke, but used the word "lied" instead, they would tend to get offended and/or defensive, even though you clearly were not trying to hurl an accusation of ill intent at them. There would be some uncomfortableness created by the miscommunication that was completely unintended and unnecessary. That's the reason that I spoke up about it. I see the potential for unnecessary miscommunication.

Disingenuous means "not of noble character", and more generally means things along the lines of "deliberately dishonest". "Disingenuous" does not mean "misleading, maybe by accident". It's an attack on someone's character.

So, if you wanted to say "misleading, maybe accidentally", you used the wrong word.

Maybe over time, people are evolving toward using the four-syllable word as a one-to-one replacement for the three-syllable word, as a way of disingenuously suggesting they're better educated than they are? If so, eventually, that'll be the most common usage, and thus what the word "means". I don't think we're there yet.

I came for the pedantry, but I'll stay for an opinion: For myself, I agree with the wording you used in the first comment, that calling that list "everything you need to know about web development" is such a high degree of bullshit that no one of noble character would do that. I believe it to be deliberately deceptive self-promotion.

Back on the pedantry, I find it hard to believe that you actually meant "foster" where you wrote that. I mean, who cares how many people foster the opinion that "critique" has a strictly negative connotation... isn't the real issue how many people hold that opinion?

I actually agree with you that it was deliberate to some extent which is why I used the wording "too strong a negative connotation". I think anytime you are accusing someone of being less than entirely honest, which is the definition of disingenuous[1], that it's going to carry at least a semblance of negativity. This is also why I added the caveat "too critically" to my original comment because although I felt the poster was aware of his word choice he was just writing what he thought was catchy marketing copy.

And no, I actually meant to use the word foster. While you're probably right that the larger issue is how many people hold the opinion, for me personally its about how many people vocally defend the opinion (i.e. promote). For instance, if you and Shawn didn't feel the need to defend your position on disingenuous it would be a non-issue because people would at worst understand what I meant by context. This method of understanding by context is the exact mechanism by which our wonderful language evolves over time so while those who hold an opinion of a definition will eventually go away those that foster an opinion on a definition can have a long lasting impact on our language.

[1] "not truly honest or sincere" - http://www.merriam-webster.com/dictionary/disingenuous

"slightly dishonest; not speaking the complete truth" - http://dictionary.cambridge.org/us/dictionary/british/dising...

"not candid or sincere, typically by pretending that one knows less about something than one really does." - http://oxforddictionaries.com/us/definition/american_english...

everything about web development... apart from the two of the biggest languages/platforms for web development.
And what are those two?
I was going to say PHP but then I saw it at the bottom. I am guessing they mean ASP/.net? I am not sure though, the list looks pretty complete to me.
"SQL" is not a database.
Well, to all too many people I've encountered (who consider phrase "Are you using SQL or Oracle?" a sane question), it is, as "SQL" means "Microsoft SQL Server".

But that's clearly not what was intended here...

I think the web would be a better place if you encouraged beginners to start with the HTTP block, rather than HTML.
I am happy I started with HTML. I composed a page, all full of blinks, and it blinked! And then on to CSS, where I found :hover, and I was hooked. Then javascript, python, and only after python and frameworks did I really need to understand HTTP. What I mean is that if I had started with HTTP, I would just have been perplexed, never hooked.
I found out about this cool site a few days before it was posted on HN.

Pats self on the back

D'oh! You missed out on incrementing your integer in a database!
Your integer has been incremented by one for this comment.
Really?? Where?
a mutual friend posted it on facebook!
oh awesome! I put it out there yesterday to see what might catch on :)
IMO clicking rails should show sass also. It shows less which can also be used with rails, but if I'm not mistaken sass is still the default. I'm sending you a pull request now. I didn't remove less, I figured you could consider that yourself, just added sass to rails.
A good list so far.

The lack of XML though, in addition to JSON's claim of being the ubiquitous data transfer format, seems a bit hyperbolic.

Since a portion of beginners are interested in employment, I wonder how much of this sheet needs to be 'filled in' to become employable at a minimum, junior position?

I've found that the threshold between beginner -> employable is really fuzzy and that's a bit frustrating.

Can you build stuff that is useful and useable? That's the line. Not how many boxes you can check off.
"Well, I wrote a python script for this thing once..."

These are still subjective qualifiers though. Useful for who? Useable by which audience? I can easily do both given no other constraints (especially ignoring time). Useful and usable, but never used because chances are someone's done it better and there's no reason to reinvent the wheel.

Other answers I've received have piled additional frameworks or languages on top of what I already know, or suggest specific projects that encompass a wide range of requirements.

Does the color coding indicate anything?
Hm, looks nice! The coloring of the columns doesn't seem to be meaningful in any way I can come up with. I think it would make more sense if things were grouped into categories (e.g. databases, web frameworks, frontend languages, backend languages, style/presentation). If you use color I would make it meaningful (e.g. represent order of learning things with color something?).
Yeah there's been a ton of suggestions for what the colors should mean but I'm leaning towards something like what you're suggesting!
The problem for me when I was beginning was not necessarily learning each technology, but rather the glue between each. That is what I tend to find confusing and is much harder to find resources for that clearly and exclusively demonstrate how to bridge the different technologies. Would love if you could add those type of items. For ex. I know Node, some Mongo, and am a avid user of Heroku. Recently I was trying to set up a system using all three and struggled quite a bit.
Yeah - I know what you mean. When I first learned python, I had to figure out on my own how to piece it together with mongo heroku and tornado. I'll look into it!
yes, seconded! the most difficult part is not the languages themselves but how to glue everything together...

Does anyone on hackernews have a resource like that? Its been such a pain trying to glue together a site.

Seconding categories, though I'm not sure they should be columns. Maybe sections like "Styling" with a one sentence explanation of what they are, and then the boxes below that.
There is useful coloring - "Beginners, start by clicking the html box and the next lessons you should learn will get highlighted."
I still don't quite get what that means. If you click Python, why is Ruby highlighted, but not Django?
The colors are off. Particularly the yellow. It is hard to read. The blue is nice, could be a shade darker. The last square position is empty. Why not put one there with links to your blog or whatever? Its prime real estate, because the reader will flow into it. Having a blank space there takes away from the design.
This. The boxes are bright, so you would want black text. In general, white text goes with muted backgrounds, black text on bright backgrounds. This hurt my eyes =\.

Also, the page starts with black text on white background and transitions to white on colored. I'd stick with one for consistency, in this case, black.

Here is what I mean, I just changed the box text color to black: http://i.imgur.com/ENnoGnv.png

That...looks good! I changed the text to be a dark gray. Should be updating soon :)
I would also use a better font. Droid sans would work nicely (its on google web fonts).
Where is knockout.js, SignalR, ASP.NET MVC, Azure?

Call it "hipsterbentobox.io".

PS: I am on BitBucket, I know it's not as hip as GitHub - sorry.

Also disappointed about the lack of ASP . MVC.net - but so it goes, I would hope it wasn't being intentionally ignored out of some personal bias. Either way, the site is still a pretty nice resource even if it fails to recognize some stacks.
This is not the first time I've noticed this omittance on HN posts.

Even though ASP.NET is one of the biggest web development frameworks on the planet, used by many, many companies, a lot of these so called web developers pretend like it doesn't even exist. Have they even used C# I wonder?

The Microsoft grudge runs deep in Silicon Valley.

Came here to ask the same question. We built www.staffsquared.com with .Net, I think it's on par with anything I've seen created with "trendy" languages.
It looks good, HTML source is pretty clean as well.
Did you look inside #habla_beta_container_do_not_rely_on_div_classes_or_names ?
Seems like that's markup generated by a third party tool their site uses for chat.
and some pretty sweet markup it is indeed.
I've noticed this as well. It's unfortunate, I think, that I still run into a lot of people who carry unfounded negative opinions on c# web development simply because of their personal bias against Microsoft. But c'est la vie, this is a common problem in the realm of programming, champion <your language here> disregard <set of all other languages>.
I can assure you all my prejudice towards c# web development comes from experience.
Excellent. I can assure you that I wasn't including you in the set of people whose prejudice doesn't come from experience.
Great post, thanks for the effort. But I definitely second BigChief on this, please include ASP.Net MVC and for completeness ASP.Net Web Forms.

Thanks

How popular is ASP as a stack? I'm looking at

http://langpop.corger.nl/

http://www.tiobe.com/index.php/content/paperinfo/tpci/index....

http://langpop.com/

https://sites.google.com/site/pydatalog/pypl/PyPL-PopularitY...

And ASP doesn't make the list, presumably because it is a framework rather than a language per se -- both C# and Visual Basic make the list, but that's not really a good indicator. I don't really know anything about the Microsoft stack, and I don't know anybody who does.

To clarify: I'm not denying ASP is popular, I'm just asking if you know of a good metric to gauge its relative popularity. Apparently Github wouldn't be a good indicator either?

Correct, ASP wouldn't make (it onto) those lists in the same way I don't see Rails / Django on those lists, just their parent languages, python and ruby. On the site referenced in this HN submission (bentobox) frameworks and not just their parent languages are represented.

To answer the question posed, I wouldn't know where to begin to provide a good metric for gauging it's (ASP / MVC.net) or any other frameworks / languages popularity.

Rails and Django are both on there.
I think you misunderstand me. Rails nor Django are on any of the lists contained in the comment to which I replied to. I explicitly acknowledged their existence in the site that this thread is about.

edit: The point of mentioning that frameworks weren't included in any of those lists was in response to the parent reply questioning the popularity of the (ASP) framework as he /she didn't see it in any of those lists of language popularity that they cited.

All four of those technologies have been created within the past four years. With that in mind, using 'hipster' as a denigration seems... ill-advised.

(I agree that they should be added.)

descriptions about why I would want to learn each one would be helpful.
I've always been looking for something like this to send to friends wanting to learn to code. A couple of recommended

This step by step guide to learning Github: http://www.thinkful.com/learn/a-guide-to-using-github-pages/

My first [hilarious] exposure to Ruby http://mislav.uniqpath.com/poignant-guide/book/chapter-1.htm...

Eloquent Javascript [built in console with examples]: https://eloquentjavascript.net/contents.html

If anyone's interested in some front-end web development sources: http://www.quora.com/What-are-the-best-sources-to-learn-web-... [You won't need to make an account with this url] [1st answer has the skills you'll need to learn with documentation and 2nd has a great collection of resources for newbies]

the github guide is a good one. that should definitely be added to the list.
Great stuff :)

Shameless plug for more of the same: http://pineapple.io/tags/all

This is great! I thought Bentoboox was good but I feel like it s too narrowly focused on learned each exclusive technology. I love how you have guides and other resources that bridge the gap!
It is definitely meant to be narrow. I think that a lot of beginners are overwhelmed by how many resources there are for each piece (hence the <=3 links for each one).

I would love to put something in here for integration between each technology, though I'm struggling to figure out how...

Definitely agree with you about keeping clutter to a min due to overwhelming. This may be stretch but maybe just another pane appearing on the right third of the screen when you click a box labeled 'Connecting It All' and just providing links to other resources the demonstrate how to connect the technologies highlighted.
How about a pane for "How to build a static HTML/CSS website" that hides all panes but prerequisites? Then maybe one on how to build a dynamic site (raw, no framework). Then to build an [x-framework] site. Then, the penultimate pane, "How to build a scalable web application with automated infrastructure (prereq: chef or puppet or whatev), advanced monitoring (prereq: Nagios, or whatever that CustomInk/Etsy toolset is called), test-driven development (prereq: Lang-appropriate testing libs), and continuous integration (prereq: Jenkins)"
Oh I'll have to look into this.
I would rather hide blocks instead of graying them out.
Green Yellow Red coloring never fails.
I like this, you should include Udacity for the Python section. They teach everything from Basic Python to web development to software testing and even debugging. Can't find better resource for Python than https://www.udacity.com
I was JUST about to do this. I love Udactiy's python course - since they take you through everything and even teach you to build a search engine on the way!
Seems to be missing a key section: XML as in XMLHTTP requests.

For Web Services and APIs, XML is great, and much better than SOAP or JSON.