
Ask HN: Where to learn best practices for front end development? - sedeki
I know this question comes up from time to time but not with the particular angle of best practices.<p>I know the backend part of the system, but if I want to go about and implement HTML&#x2F;CSS&#x2F;JS from a Photoshop image, then I&#x27;m totally lost.<p>Any good resources? It seems to me that all good frontend devs just learn by experience&#x2F;empirically -- there&#x27;s little &quot;formal training&quot; (in some sense).
======
PaulHoule
What makes it hard is that the "frontend development" space is always rapidly
changing.

For instance you can still make sites that are based on static HTML and CSS
and that have no Javascript or you can put a few little bits of Javascript in,
or you can use a large number of techniques and frameworks to build something
that is more like a mobile app than a web page, be it AngularJS or GWT,
Enscripten, etc.

First there were the libraries like prototype and JQuery that would smooth
over browser incompatibilities, but then the browsers got more compatible. For
a long time there was a consensus that a macro language and calculations in
CSS would make things worse. Then Blueprint came out and people were excited
about that. Then people got sick of all web pages looking the same, and then
people realized that the grid was the bad part of Blueprint, it was the other
stuff that was good, but then you need a macro languages like LESS, and...

Thus you really have to set some goals for which technologies you want to
master, because if you want to master them all you are going to be doing
nothing but front-end development for a few years and then you will
continuously be scrambling to keep up.

------
anonymousguy
When writing HTML locally save the files with the extension ".xhtml". This
forces XML conventions upon the document so that when you open it in the
browser it will immediately fail on the first syntax violation. This will help
you learn to write better HTML.

When writing HTML be as descriptive as possible in your use of tag names. If
you only use "div" and "span" for everything you are failing your users and
destroying accessibility. Go read this
[http://www.w3.org/TR/WCAG20/](http://www.w3.org/TR/WCAG20/) and the various
supporting documents. You cannot claim to have mastered HTML if you have
failed to understand accessibility.

CSS just takes practice. With the browsers being less divergent now and easier
to code for its harder to learn a deep deep level of mastery. Back in the days
of IE6 you had to become quite the badass to make CSS work cross-browser
without a bunch of stupid hacks.

For JavaScript there are some key things to focus upon:

* The scope model (learn closures and nesting functions)

* events and callbacks

* xmlHttpRequest (AJAX)

* the DOM

* the Node.js methods

Don't dick around wasting time learning frameworks and JQuery. Just learn
through the vanilla code and learn to solve problems as directly as possible.
It will pay off in the long run. Pass your code through the
[http://jslint.com/](http://jslint.com/) tool. JSLint is OCD crazy opinionated
and extremely strict, but it is that on purpose. It is designed to teach
defensive coding practices so that you can right code correctly the first time
which has a significantly lower probably of failure and is easier to maintain.

~~~
PaulHoule
The XHTML is very bad advice:

[http://www.webdevout.net/articles/beware-of-
xhtml](http://www.webdevout.net/articles/beware-of-xhtml)

