5 ms·

Ask HN: What are your favorite web front-end ressources?

5 points by kvalium 9y ago

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? :)

bartvk 9y ago
> favorite web front-end ressources? A spell checker! ducks runs
- kvalium 9y ago
  English is not my mother tongue, don't be rude.
- mtmail 9y ago
  That was lame.
deleted 9y ago
[deleted]
mtmail 9y ago
I use http://devdocs.io/ http://devdocs.io/ and the old http://jqapi.com/ http://jqapi.com/ instead of books. https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/ and https://docs.microsoft.com/en-us/scripting/javascript/reference/javascript-reference 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/ https://webpack.js.org/ And react/angularjs as frameworks of course. http://javascriptweekly.com/ http://javascriptweekly.com/ has decent newsletters (bottom of the page). There's little overlap between the Javascript and nodejs one.
- kvalium 9y ago
  I remember using devdocs back in my days, still a great doc source :) hey, Webpack looks great! I'll definitly look at it, thanks!
- Bilters 9y ago
  I didn't know about dev docs, but it looks like a great resource! I've been using Kapeli's Dash for a bit now, but this seems to be a free alternative, thanks!
swah 9y ago
This free course was kinda great: http://learn.handlebarlabs.com/p/react-native-basics-build-a-currency-converter http://learn.handlebarlabs.com/p/react-native-basics-build-a... Its actually about React Native, but I still would like to link it :)
afarrell 9y ago
http://book.mixu.net/css/ http://book.mixu.net/css/ 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/ 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 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. [1] http://i.imgur.com/Q3cUg29.gif http://i.imgur.com/Q3cUg29.gif
- kvalium 9y ago
  This book looks great! Thanks
LarryMade2 9y ago
Don't do much news sites, most are pushing the shiny new tech of the month - which changes just about as often. 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/responsive/ 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
mozillas 9y ago
I've known this one for a while now; it shows up first when you search "front-end news" in Google https://frontendfront.com/ https://frontendfront.com/
- kvalium 9y ago
  Nice one, I've bookmarked it, thanks :)

5 points by kvalium 9y ago

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? :)

bartvk 9y ago

> favorite web front-end ressources? A spell checker! ducks runs

kvalium 9y ago
English is not my mother tongue, don't be rude.
mtmail 9y ago
That was lame.

deleted 9y ago

[deleted]

mtmail 9y ago

I use http://devdocs.io/ http://devdocs.io/ and the old http://jqapi.com/ http://jqapi.com/ instead of books. https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/ and https://docs.microsoft.com/en-us/scripting/javascript/reference/javascript-reference 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/ https://webpack.js.org/ And react/angularjs as frameworks of course. http://javascriptweekly.com/ http://javascriptweekly.com/ has decent newsletters (bottom of the page). There's little overlap between the Javascript and nodejs one.

kvalium 9y ago
I remember using devdocs back in my days, still a great doc source :) hey, Webpack looks great! I'll definitly look at it, thanks!
Bilters 9y ago
I didn't know about dev docs, but it looks like a great resource! I've been using Kapeli's Dash for a bit now, but this seems to be a free alternative, thanks!

swah 9y ago

This free course was kinda great: http://learn.handlebarlabs.com/p/react-native-basics-build-a-currency-converter http://learn.handlebarlabs.com/p/react-native-basics-build-a... Its actually about React Native, but I still would like to link it :)

afarrell 9y ago

http://book.mixu.net/css/ http://book.mixu.net/css/ 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/ 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 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. [1] http://i.imgur.com/Q3cUg29.gif http://i.imgur.com/Q3cUg29.gif

kvalium 9y ago
This book looks great! Thanks

LarryMade2 9y ago

Don't do much news sites, most are pushing the shiny new tech of the month - which changes just about as often. 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/responsive/ 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

mozillas 9y ago

I've known this one for a while now; it shows up first when you search "front-end news" in Google https://frontendfront.com/ https://frontendfront.com/

kvalium 9y ago
Nice one, I've bookmarked it, thanks :)