story

A list of front end development resources (opens in new tab)

gist.github.com

382 pointsgphreak12y ago90 comments

90 comments

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)

williamcotton12y ago

It won't ever get a fresh start, so you might as well jump in now!

Hoffenheimer12y ago

You don't actually mention anything that's wrong with any of the libraries. Most of them seem well written. So why would the web need a fresh start?

andrewflnr12y ago

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.

geuis12y ago

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.

1 more reply

lowboy12y ago

You only need a small set of modules, depending on your needs. Instead of a monolithic ModernWebSiteLibrary, you piece together what you need.

In your two-col example, just pick any CSS framework or grid system (Bootstrap, Foundation, Skeleton, YUI Pure, etc...) and you're done.

bung12y ago

Regarding column layouts, great place to start is css box-sizing property

bpatrianakos12y ago

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.

andrewflnr12y ago

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.

As for JS itself, I'll just defer to Douglas Crockford and the infamous wat talk: https://www.destroyallsoftware.com/talks/wat .

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.

da_n12y ago

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.

1 more reply

amorphid12y ago

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.

benihana12y ago

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.

tripzilch12y ago

Great, more eggs for me!

nudetayne12y ago

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.

ben33612y ago

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)

eksith12y ago

This shows you've never built a banking site.

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.

nudetayne12y ago

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.

3 more replies

ldng12y ago

Well it is a nice list but, it's a list, again.

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)

What do HNers feel about that ?

porker12y ago

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.