Front-end Developer Handbook

https://frontendmasters.gitbooks.io/front-end-handbook/content/index.html

by mgdo • 11 years ago

230 42 11 years ago

frontendmasters.gitbooks.io

draw_down• 11 years ago

This has a weird bug where if you scroll down the right-side pane, the content disappears and the whole pane becomes white. Safari 9.0.1

495312• 11 years ago

If you want to work on the front-end, learning fundamental JavaScript will be your best asset. It will help you in job interviews, help you understand other developer's code, and help you make good decisions in your own code. The front-end is full of amateurs, it's easy to stand out as a serious developer by truly understanding the language of the web.

Tloewald3• 11 years ago

Actually knowing Javascript, HTML, and CSS is pretty darn huge if you want to do front-end work. Solid front-end people are very much in demand.

afarrell• 11 years ago

Do you have any tips on how someone with a solid background in CS fundamentals, js, and backend dev can learn a mental model of HTML and CSS layout such that it doesn't feel like playing Wack-a-mole?

pjmlp4• 11 years ago

I do native front-end development currently. No JavaScript required.

There are enough native positions across all desktop and mobile platforms.

495312• 11 years ago

This is a book about front end development on the web.

swah• 11 years ago

I wonder if I should look into native development or I can live with JS + backend (Python/Go/SQL) development.

Reason: end of 3 year government project with embedded software (which I really enjoy but hate the tooling)

lemevi2• 11 years ago

I looked through this and I don't like this. Having been a front-end engineer in SF for nearly a decade the number one thing you need to know is computer science. The Steve Yegge hardcore engineering fundamentals that apply to computer science jobs anywhere also apply to the front end where engineers are building sophisticated client side applications.

There's little of that in this handbook. Once you know how to program and understand computer fundamentals, then you can build good software and you can take that anywhere, from native apps, to front-end to working on distributed backends.

If you just learn the things outlined there you're probably going to build, slow hard to maintain barely functional applications. You'll struggle at most technical interviews, and you wont progress.

As an engineer, computer science comes first.

Tloewald3• 11 years ago

I don't think the problem is the lack of comp sci fundamentals (although yes, there is that) it's that aside from part 1 -- a pretty pointless ramble about "the front-end practice" -- this thing is a crazy collection of links to other stuff without much in the way of curation.

The author recommends three well-regarded books on UI design (I haven't read any of them, but I struggle on) but doesn't seem to have applied them to this handbook. Don't dump an unedited pile of crap on the user -- have an opinion and tell the user what you think they need to know, leave the list of resources to the end.

The problem with this thing is that it's not a "handbook", it's a collection of "useful" links.

lemevi2• 11 years ago

I leave design to the designers. I think understanding how to use photoshop is a nice skill to have for working with designers, but I care more about a good engineering implementation for a mock than I do about the design ascetics of it. Front-end engineers aren't designers, they're engineers.

Stratoscope2• 11 years ago

I was reading HN on my phone, and this looked interesting, so I tapped the link. It took me to a brief page describing the three parts of the book, with a headline and one sentence about each part. At the bottom it said:

read online at:

• http://www.frontendhandbook.com

So I tapped the link. It opened a new tab with a brief page describing the three parts of the book, a headline and one sentence about each part. At the bottom it said:

read online at:

• http://www.frontendhandbook.com

So I tapped the link. It opened a new tab with a brief page describing the three parts of the book, a headline and one sentence about each part. At the bottom it said:

read online at:

• http://www.frontendhandbook.com

So I tapped the link.

Wait! Haven't I been here before?

There must be some other way to read the book.

Hmm... Some faint little gray icons at the top. Nothing there jumps out at me as a way to read the book. I keep wanting to go back to that compelling "read online at:" link.

But this time I skip past it. I go all the way to the bottom of the page where there is a faint gray angle bracket. What does it do?

I did it! I made it to the first chapter! Now I can read the Front-end Developer Handbook.

This is a true story. I really did tap the link that many times. I am not making any of this up.

m52go• 11 years ago

100% agreed. It's not well-designed on the front-end for mobile. That would make me skeptical about the book itself since it's supposed to be about...front-end design.

But I think one should be careful about the distinction between front-end design and development. This book seems to focus on development, and as someone who's taken a couple of courses from Frontend Masters, I trust it to be solid.

Stratoscope2• 11 years ago

Indeed. And I'm sure Cody will see that this is fixed.

I had a chance to work with Cody on the jQuery Cookbook, and he's a smart guy. So Cody, if you see this, my apologies for poking fun at your new book's mobile experience!

My chapter of the jQuery Cookbook had a much bigger blunder. In a "recipe" called Coding Bare-Metal Loops, I recommended a particular loop style as the ultimate in speed...

Use a for loop instead of .each(). To iterate over an array, it’s hard to beat this loop:

  for( var item, i = −1; item = array[++i] ) {
      // do stuff with item
  }

> But there is a catch: this loop works only if your array has no “false” elements, that is, elements whose value is undefined, null, false, 0, or "". Even with that restriction, this loop is useful in many common cases, such as iterating over a jQuery object.

Well... It didn't quite turn out that way. This loop style can kick you out of the optimizer because it tries to access the nonexistent element after the end of the array. That's perfectly legal in JavaScript, of course - any nonexistent element evaluates as undefined - but code optimizers do not like it when you do that.

So a conventional loop turned out to be much faster:

http://jsperf.com/mikes-loops/2

morenoh149• 11 years ago

I take issue with the case against generalist or 'Full-stack' engineers. Of course you'll find people better at things if they specialize. But learning core javascript very well along with things like HTTP, databases, css, html etc. I'd say you're a pretty solid engineer that can build full products.

Not a designer, you can work with a designer.

rjberry• 11 years ago

I agree with this. I also know plenty of full stack engineers who are superior in both domains to the so-called specialists.

jasonwocky• 11 years ago

Plus I think there's a big difference in respect a full-stack team / tech leader garners over someone who doesn't really understand the technical challenges of half the team.

ownagefool• 11 years ago

Yeah it confuses me when I meet backend developers who can't deploy their app for example.

If you can't:

a) Tell me what libs your app requires & how to install them in a resonable way b) The privledges required to run said app c) The security implications d) How to scale your app, particularly what I need to do to get it to behave over multiple servers e) be resonably sure your code is working f) Write some code to automate the deploy of this.

Then you're probably just not that amazing of a developer.

briantakita• 11 years ago

Haha...Generalist myth

https://frontendmasters.gitbooks.io/front-end-handbook/conte...

Well, if you chase the latest complicated framework, it will become more difficult to be a "generalist". As you become more aware of fundamental principles & patterns, you are empowered to do more.

dpweb• 11 years ago

...was once called a "web master". Was great, haven't heard that term in a long time, although as I recall it's "webmaster". I don't think "web master" was ever a term.

nefitty• 11 years ago

This post is like an unnecessary splash page or something. Here's the download page: https://www.gitbook.com/book/frontendmasters/front-end-handb...

nell• 11 years ago

I'm going to say something good about this handbook for a change of tone.

Imagine an area of work that you have no idea about. Let's say Aerospace. If someone put together a set of links and categorized the stuff you need to learn to be able to work in the field, it is immensely useful since the simple listing of the things you need to learn about itself is a learning. A 0 to 1 bit flip. Though this post is not a highly curated handbook, it educates you on what you should Google about. That is a huge win by itself.

noir_lord• 11 years ago

Agreed, I currently do a mix of front and backend development but there is a tonne of stuff in here I didn't know about comes back to "known unknowns and unknown unknowns".

This is one hell of a resource.

killa_kyle• 11 years ago

About a year and a half ago I started piecing together what I needed to know to get a job as a Front end dev. Spent tons of time spinning my wheels. Looking at this now that I have my first job, it would have helped a lot as far as knowing what I had to learn and how it all relates.

gcb0• 11 years ago

i cannot even get to the book on Firefox Android. maybe it only works with JavaScript? i just get one link "read it online" that takes me into a loop to the very same page.

it also does something weird, it prevents the browser address bar for scrolling out of view like it does normally when you scroll..

whatever this is, i truly hope what it teaches is not what the heck they're doing.

fierycatnet• 11 years ago

What am I missing here? I've looked at it and it's just a collection of links to various resources. It's not quite the "book" I was hoping for.

Too• 11 years ago

Discussion from last week: https://news.ycombinator.com/item?id=10402912

abustamam• 11 years ago

Not that I don't like this book, but how is it that it was allowed to be re-submitted in such a short time frame? A few months I can understand, but I literally still have this book open on one tab from the previous time I saw it on HN, because I'm slowly going through it.

raarts• 11 years ago

I think this is a great list but what would make it really useful is to have an explanation and opinion with each link.

pjmlp4• 11 years ago

That is a WEB only front-end Developer Handbook.

I understand front-end as any UX for application UI.

pete_b2• 11 years ago

Dense, opinionated and somewhat bewildering. Which in a way represents the world of "front-end" in 2015 very well.

pete_b2• 11 years ago

High level in many areas "full-stack" is not as mythical as is suggested, it just takes someone with the right aptitude, and a long time over a lot of roles to get there.

Whether it does such a person any favours in the employment market is another question as you can't build businesses on rare commodities.

seivan• 11 years ago

I thought the same. For me the harder parts is Dev-Ops and advanced SQL with anti-patterns.

Heroku and ActiveRecord with Redis helps mitigate that.

nahname• 11 years ago

There is a surprisingly wide area of coverage for something titled "Front-end Developer Handbook". I also like the way the content is presented (not the technology used).

The JS testing section is a good example. Pertinent summary of high level concepts before the fold. Additional content to read if you want to learn more.

https://frontendmasters.gitbooks.io/front-end-handbook/conte...

Edit:

By technology, I mean using a SPA for docs is silly. Not surprised the mobile experience is poor because of that.

callumlocke• 11 years ago

The first article is called "What is a front end developer?" and a good 20% of the page is devoted to explaining what headless browsers are. That's a confusing start.

Front-end Developer Handbook

Related Stories