Seeing this mess again tells me that there's something fundamentally wrong with the web or at least with the standardized technologies that are supposed to solve the problem of frontend development (namely HTML, CSS and JS).
I think the web really needs a fresh start before I would even consider becoming a web developer (I'm a CS student atm)
It's not so much the libraries themselves as the very need for all of them. I'm a fairly new front-end developer (for anything complicated, that is), and the browser as a platform can't help but feel like what it is, some good ideas with a lot of hacks and inconsistent philosophies accreted over time. It's a pain in the butt, even something like a two-column layout without tables. And that's just to get it working in one browser. Then you try your page in Firefox, and maybe it breaks in some obscure way. That's when you start breaking out the libraries, like bootstrap.
Right now, web is the best place for my app to be (assuming I can figure out offline support), but I tear my hair out every time I run into one of these issues. Just the other day I had some bizarre issue where offsetBottom and offsetTop + height were returning contradictory values, or something like that. And that was with jquery helping me. The web platform is cool for what it enables, but stinks for what it makes you do to get there.
What you are saying is that you are a fairly new frontend developer. Of course that list is daunting. I've been doing this stuff for years and there are projects on that list that I haven't even heard of, and one of my projects (Helium) is on the list!
The reason there are so many solutions to problems is that there are lots and lots of problems. The common stuff we all need is put into one library (eg jQuery). Some types if applications need frameworks so we get Backbone, Angular, or Ember. There's a thousand other types of micro issues that are common enough to need small, reusable solutions.
Combine all of that with hundreds of thousands of inherently creative and inventive people and we end up with multiple solutions to the same problems. Eventually we coalesce around a few of the best tools and move on to new problems.
Just pick what you need to get a job done and don't worry about trying to learn everything.
What I need to get the job done? I can't even find a library to do 2-way CSS style binding. I would have thought that was obvious, but it looks like I'll have to do it myself. To get the experience I want I might need to do a bunch of other stuff myself too.
I understand the forces that produce multiple solutions to problems. Maybe OP was wrong about that being evidence of a deeper problem. But a lot of the problems are deficiencies in the underlying platform. That's the real problem IMO.
I think you're looking at this all wrong. Front end development is not a problem that needs solving. It's already been solved. We have html markup for content, CSS for design, and JavaScript for interactivity. Problem solved. Now within front end development there are a number of other problems that need to be solved and that's why we have these different front end resources. So we can use the tools that solved the problem of getting content on the screen to achieve certain more specific goals. Some of these resources solve the same problem in different ways and some are for niche problems. Either way the fact that these exist shows that front end technologies have done their job well. They're versatile enough to handle a wide range of uses.
Front end tools aren't perfect but that's why they've been iterated upon. And what language doesn't have shortcomings? It's amazing that people have created these tools that are flexible enough to be used in seemingly infinite ways without being too narrowly focused or being all things to all people.
But I think I'm getting ahead of myself. Where's the mess you're talking about? This is a common thing to say among non web devs but I never can get any specifics. If you approach front end development the way you would back end or desktop development you're going to have problems. It's a totally different way of thinking.
JavaScript and CSS stink in a lot of ways. CSS is pretty messy if you want to do something slightly weird or complicated, which is a large part of why we have frameworks for grids instead of just being able to write one. It seems you have to do this weird "margin: 0 auto" trick to center things sometimes. Last I heard, the only way to get something vertically centered is to make it a table cell and use "vertical-align: center" or something like that. A lot of the interesting CSS properties are inconsistently supported and/or have vendor prefixes; can you use border-radius yet and expect it to work in the big three browsers? If you want a page that fits in the window with a fixed footer, you have to use JS hacks to make it work (actually I don't think I ever got it right). Just the other day a friend of mine had to do some weird hack where he detected the width of the window and set CSS accordingly to make things work right on mobile devices. Honestly, browser inconsistency is half the problem.
If you want more, the HTML and SVG DOMs are not properly integrated. It turns out to be nearly impossible to have a functioning textarea inside SVG, or indeed any form of wrapped text. God knows I tried with Chrome and Firefox, and apparently it just gets worse with IE. I'm sure I'll encounter more irritants as I go on, or maybe someone else can chime in with something specific they encountered this week. Probably the reason you don't hear more specifics is that most of the irritations fade into the background as you work around them, leaving only a vague dissatisfaction.
Now granted, this is all much better than nothing. I know the web has enabled all kinds of cool things, which is the only reason anyone bothers to develop it. But I think it's absurd to call front-end dev a "solved problem", at least in any sense meant to silence pointing out potential improvements.
I always feel like browser inconsistencies are a bit like print, every print shop seems to have different requirements about colours, gutter, trim, quiet areas etc so even in the real world consistency is not guaranteed. I find if you use something like SASS with Compass/Bourbon you don't need to think about vendor prefixes.
I don't know if the way web development is done needs a reboot, but I can say as someone learning web development that there is a steep learning curve to all the different pieces! The fact that jQuery needs to exist because different browsers all have their own rules and JavaScript was designed in a rush is the most relevant example to me. It's nice to write a program that's not written for the web without having to worry about a bajillion different devices and UIs in mind!
I guess the reality is that technology evolves at a quick pace. If you want to develop anything user facing, there will alwahs be some hot new thing to keep up with. In the 80s it was the desktop GUI, we got the web in the 90s, the 00s gave us smartphones, and in the 10s we'll start using ?? ? Holodecks?! My only point is there will always be something to keep up with it when developing a UI.
That's like saying you don't want to eat the eggs in your fridge because there are too many ways to cook them, and you're certain, despite the fact that you don't have any experience cooking them, that cooking eggs needs to be rethought.
It's not as big of a mess as the list would make it seem. None of the resources provided are required, and however useful they may seem, I've never found them to speed up development time. I do all of my HTML, CSS, and JavaScript from scratch for every site I build. It's a max of one day on only the most complex projects.
Uh... you're not building very complex projects then :) Before you get defensive, consider something like Amazon.com as an easy extreme example. Or a banking website or non-trivial html5 based onlline game as less extreme ones. None of those are getting built in a day, and probably not without the use of libraries (though for something like amazon the libraries may be mostly proprietary/internal)
All financial institutions will greatly benefit by sending less to the browser, not more. CAPTCHAs as we know are not foolproof, and should be limited. Instead, things like session/ip based hashing of field names, generating anti-csrf tokens and the like are trivial for the backend.
The vast majority of complexity in most projects is needlessly self-inflicted. DRY is dead, less-is-more is dead.
Let's Include All The Things is how Amazon became as pathetic as it is for a major commercial website.
I think you're getting defensive :). By saying I'm not building complex projects without any knowledge of what I create, you're trying to circumvent your own self-invented inadequacy without actually putting the pressure on yourself. Whether this was done subconsciously or not, I can't say.
I suppose it depends how you interpret the term web developer, since that's what simfoo was discussing. Myself, building browser-based games isn't web development, it's game development, which I feel is an entirely separate domain. Building a website, you really shouldn't need more than a day to put together the HTML, CSS, and JavaScript. The front-end of the majority of most websites is very similar. Normally, this would indicate regular code reuse or warrant a framework, but as indicated in my original post, I haven't found any framework that actually significantly speeds up my development time.
It would be helpful if you could provide some examples of your work. "Complex" means something different to everybody, so your claim is hard to place in context.
"Less than a day" for "complex" web sites using nothing but raw JavaScript and hand rolled HTML & CSS does sound unusual, both in terms of the result as well as the workflow. Given the verbosity of JS DOM manipulation, I can't really envision a particularly good reason to go down that route for anything but the most performance pegged web applications.
Maybe if you're building a plumbing website for a client, most people here I would imagine build apps and complex works of art though, which definitely take longer than a day to put together.
By that I mean you either find compilation list like that or full stack framework but what a would personally find more useful would sets of cohesive tools, end-to-end.
Sure there are boilerplates out there but what I frustrating is that you hardly find "full stack" one. For instance what about a boilerplate for django + django-rest-framework + backbone.js + marionette + i18n tools for backend and frontend + manage.py-grunt.js integration + optimisation tools for css and images + ....
Yes, there are endless possibilities, the more the reason to find more of those out there don't you think ? Maybe it's me but I feel like there is either something missing, too much choice or both. I18N being often the most neglected (granted, it's harder)
I agree. Even if I didn't agree with all the choices, to see what works well together (and have explanations of why these were chosen by the author, not an arrogant "this is my list, use it") would be great.
The idea was to have a list of somewhat high quality resources out there. It's not a complete stack you can install and use out of the box (like debian). You still have to do the work and choose what's right for your project.
If you think something is missing, please send a pull request.
I think you are absolutely right, we are now ready to build a "debian for web development". We have lot's of high quality little packages we can unite under one well tested system.
I did not think about it like that but, it could be possible to start building something along the lines. Like several "distributions" because not everybody has the same needs obviously.
Web development newbie here: I seriously used to think that such a thing would already exist, a thing like Visual Studio that included all the guts out of the box, and including back end in addition to the front end.
Meteor (and similar) may be the closest to this right now. With Meteor, your frontend and backend code and potentially your database can all use JavaScript and be in the same codebase, deployment in at least simpler scenarios is very easy, and modules exist to integrate other libraries with the framework.
Thanks. I had discovered Meteor only recently (being a web development newbie).
What other libraries would you recommend to have everything required for making a basic web application. The end-result should include a responsive front-end, user authentication and security, reports, charts and visualizations, forms, blog, payments, and finally an ability to integrate pre-existing Java code in the back end. Apologies if something I am saying is not making sense.
Thanks. Just looked over their websites. The learning curve is still a bit too high. I discovered Caspio [1] that seems to be the most like what I am imagining. Microsoft's Lightswitch also looked promising but again did not seem to have all needed parts.
If you are coming from the microsoft world you will have lots of surprises until you realize that the open source world (the unix philosophy) is completely different. You have lots of small tools which are designed to work together and be replaceable, not a huge monolithic product curated by a single entity.
In that case, I just need help putting together lots of these small tools without needing countless hours to select which tools and reading their manuals to put them together. I think this is an opportunity as far as such a compilation will be useable by a relatively large number of people (which I think should be the case).
That is interesting. How do you envision that for the moment ? As a "Web distribution" with it's own management system that integrate with existing backend and frontend tools ? Or more like a collection of integrated stacks ?
I think a collection of integrated stack would be very interesting. Much like we have small recovery linux distribution, server distribution and desktop-oriented distribution. Like, distrib of webservice, of webservice + frontend framework + end-to-end stack java (thinking GWT or Zk here), ...
I'm sorry you don't like it. But I assure you there are hidden gems on my site that you won't find in the gist (even though it's an absolutely fantastic list - great work dypsilon).
I don't know what planet you live on. That's like saying stack overflow is in charge of making sure every excellent question/post is seen, or reddit, or hacker news...
My job is to develop features that facilitate people finding exactly what they're looking for, and ideally things they aren't looking for and don't even know exist. That's a difficult challenge though, while still retaining engagement features like comments to discuss resources, proper categorization of favorites, etc. I started a wiki to help with this but it's only maybe 25% complete. There are plenty of other ways on the site to help with that though.
> I don't know what planet you live on. That's like saying stack overflow is in charge of making sure every excellent question/post is seen, or reddit, or hacker news...
Well, they do. Reddit and HN has their ranking system, Stack Overflow has single-handedly made Google useful for fixing tech problems. Not really sure what planet you're living on if you don't think curation is important. Your site is too small for there to be a critical mass of votes to make it useful, and it will never get big enough for it to be useful if people don't have a compelling reason to visit.
What project details would you like to see for each item on the list?
It's tough because :
1. There is a lack in uniformity: you have CSS solutions, jQuery extensions, node.js packages, articles, books, videos and so on.
2. Every bit of information you include makes the list bloated. I think it's enough to have the category, a link, and maybe a short description. If I need a template engine for a project, I will click on every link and look through them anyway.
Please make a suggestion how you would like this list to look.
Lists are useful because sometimes you don't know what to google, especially if you hadn't really noticed a problem enough to think that someone else might have already solved it for you.
If I have a specific task the workflow for me looks like that: 1. Search through Google, Github, Unheap, npm, bower, jster and so on. 2. Compile a list of useful packages and tutorials for every one of them. 3. Select the best package for the task.
So I created this list to not have to go through step #1 and #2 every time.
The benefit here is that most of these are at least somewhat usable in a project. Many of the resources that one finds online are not great. I found several things that I wish I had used on past projects.
I've been building a list of front-end development best practices at http://www.betterfrontend.com - it definitely needs to be updated though. I haven't had a change to work on it for almost a year. Would love to get something going with a few devs if they're interested.
Nice collection. Enough stuff to wander through and be certain I'll find something of interest, or discover something I was previously unaware of altogether.
That would pretty much have to contain every programming tool ever written. On the backend you can do whatever you want as long as it can accept TCP connections.
The trouble with managing a list like this is that it's not exactly easy to update/correct? It's always owned by one person, and errors (like Foundation 3 being mentioned) aren't easy to correct - or to expand and add new items to.
Great resource, but wouldn't a collaborative wiki be easier - or are such lists maintained for the original author's reputation not to become a fount of collective knowledge?
I started one at http://pineapple.io - the wiki isnt nearly even close to complete, but the site itself has a lot of highly-moderated content (pruned regularly, all my users check for broken links, make comments on resources, etc)
From the author of http://roots.cx, much love and thanks for including us! We're working super hard on pushing roots further than we've seen any other static site compiler go, so if you are into static sites we'd love to talk : )
I think the web really needs a fresh start before I would even consider becoming a web developer (I'm a CS student atm)