Ask HN: What are your favorite web front-end ressources?
New web front-end dev after some time as a back-end dev, I'm looking for ressources such as books or news sites. Do you know some? :)
Advice - don't try to learn it all at once, lots of technologies (CSS is truly brain damaging to logical back-end folk, take it easy)... also best to keep your HTML as simple as possible and style and script out from there.
for a book, I suggest Stylin' with CSS: A Designer's Guide by Charles Wyke-Smith Very good terse visual intro to CSS, will give you a good insight on what CSS is capable of, which is quite a lot.
Look for the basics on responsive layouts, those grids and templates are usually set up for non-developers and add a lot of cruft you can do without. - this looks good - https://developers.google.com/web/fundamentals/design-and-ui...
Javascript - if you don't want a lot of effects, you can do most effects with only a little javascript without resorting to JQuery (google to help you there) same with DOM work and AJAX - Google what you need and if you get some stackoverflow suggestions read though all the examples, sometimes the less popular ones are more sane.
Especially if you are looking to do public facing front-end work, read up whatever security tips for your backend (filtering/escaping input, preventing cross-site scripting, and database exploits, etc.).
Keep plugging along, you'll get there - Good luck
The hardest thing about going from backend dev to frontend dev is understanding CSS and HTML layout. Without a clear mental model, the experience of trying to position things on a web page feels like really frustrating[1]. I cannot recommend more highly that you do the following:
- Read through http://book.mixu.net/css/ and take notes like you are in university. When you come to a point that seems ambiguous, copy-paste some of the example html/css into a file, modify it, and view it in the browser to check your understanding.
- Turn these notes into flashcards in a Spaced Repetition program like https://ankiweb.net/about. Try to write questions that ask why something turns out some way. Don't be surprised if many of the questions end up feeling like rote memorization. There is a reason why med students do a lot of rote memorization: they are trying to build a mental model of a very complex system.
After that if you have time and don't already have a project to work on, you might want to
- Build a bunch of things in just HTML/CSS. When you have a question about how to position something, try to predict what the answer is. If you can't, then look up resources and add another notecard to represent what you learned.
https://developer.mozilla.org/en-US/ and https://docs.microsoft.com/en-us/scripting/javascript/refere... are up-to-date. Don't go to the old w3w-schools.org regardless how good their SEO ranking on Google is.
For packaging the industry is slowly moving from grunt and gulp to webpack. https://webpack.js.org/ And react/angularjs as frameworks of course.
http://javascriptweekly.com/ has decent newsletters (bottom of the page). There's little overlap between the Javascript and nodejs one.
hey, Webpack looks great! I'll definitly look at it, thanks!
Its actually about React Native, but I still would like to link it :)