Ask HN: How to approach Front-End development if you hate it?

If you hate it, why do it? It's not like back end developers aren't in demand or won't be 5 years from now.

Here is what I do:

- Make sure you know what you want to make

For smaller pages (one page sites, not SPA):

- Use one of bootstrap/semanticui, include their dist files directly (dont get into the npm/gulp/bower yet)

- Use their kitchen sink to pick up components (both bootstap/semanticui have loads of examples)

- Include JS dependencies the old way (copy the min.js manually in your project), keep try to keep this number low

- Try to avoid using frontend frameworks for these (say vue/angular/react)

For slightly larger sites (SPAs/Multiple page sites)

- Choose one particular frontend framework and stick to it (the productivity gain does not come from using a tool, it comes from using a tool repeatedly)

- Get the closest looking template from somewhere in above chosen tech (i usually pick one from https://themeforest.net/ but there are many free resources, like AdminLTE etc)

- Make sure it already has the build/minify pipeline setup (most of them have it)

- Adapt it to your needs

In addition to what artpar, commented, I'd say take it slow and try to appreciate the browser as a dev environment. There are a lot of interesting APIs/technologies available today, e.g. Service Workers, grid layout, geolocation api, etc. You probably won't need to use them for work, but they are still interesting.

2nd) if you have to use a framework (say react), learn to appreciate what it does for you. Try to understand what it is accomplishing and don't be too afraid of jargon. It's a steep hill, so you'll need patience and perseverance, but it gets better, and there is some world class, creative, software engineering going on in js framework these days.

addendum:

I don't recommend you spend a lot of time checking this out now, but react boilerplate is an impressive example of a modern frontend js stack. Tons of frameworks, and very possibly too much too soon, but it's pretty well designed and documented, and has a nice supportive community.

https://www.reactboilerplate.com/

I also feel the same I really hate css and html But now we have react, so I only hate css, anyone have recommendations for good css resource?,

I need tutorial/resource/framework to layouting/griding component

I have tried things like material-ui but layouting the component is still hard, because it really depends on the css

If only flexbox in web is as easy as flexbox in react-native

If you are a back-end developer then Angular and Typescript are your friends.