[elipsey]

I'm kind of trying to go the other way. I am amazed at how productive great front-end/js-first developers are with even just a browser console --- but I am totally flumoxed by this environment, and have trouble sinking my fingernails into the first ledge on that learning curve.

Is there a "terminal developer's guide to front end"?

[wildrhythms]

Learn HTML.

Then learn CSS.

Then learn Javascript, and realize that Javascript can be used to write HTML and CSS at runtime. The console is just Javascript in interactive mode.

[unsupp0rted]

I use the browser's dev console to try out short JS snippets or for simple on-page scraping. (for longer JS as a scratchpad I use https://runjs.app).

The browser's dev console gives you access to the current page's DOM, plus anything you can do in JS.

So stuff like `document.querySelectorAll(".foo")` works. Also `fetch()` works within the page's context.

Apart from that, what are some other useful things one can do in the dev console?

[elipsey]

Thanks, maybe some effortful study of the fundamental properties and manipulation of the DOM would be helpful to me.

>> other useful things one can do in the dev console?

There just seems to be a suprising amount of built in stuff in the browser that does more than rendering text/layout.

I participated in some interesting work at a hackathon a while ago that used a web audio component to signal back and forth between various laptops and phones. It was mostly getting hacked together in the browser dev console.

(I'll come back with some code if I can find it...)

EDIT: OK, here it is: https://github.com/cantino/ultrastound

[acemarke]

Yes. I wrote a blog series called "How Web Apps Work" that covers fundamental terms and concepts for web dev in general (HTTP, client dev workflow, HTML/DOM/CSS, JS, and data transfer), with some of that more focused on client-side concepts:

https://blog.isquaredsoftware.com/series/how-web-apps-work

I've also got a set of slides on "JavaScript for Java Devs", which is a thorough cheat-sheet style overview of JS syntax, concepts, and ecosystem:

https://blog.isquaredsoftware.com/2019/05/presentation-js-fo...

and I helped put together a curated list of learning resources for JavaScript, TypeScript, React, and Redux over on the Reactiflux Discord site:

https://www.reactiflux.com/learning

[elipsey]

Thank you.

[reducesuffering]

I'm a React / DevOps newbie and https://fullstackopen.com/en/about has been exceptional. Just need a little prerequisite HTML/JS knowledge, but even without I think a backend developer could grasp it with a little extra time.

[elipsey]

Thanks, perfect.

[BrandoElFollito]

I am an amateur "full-stack" developer for some 10 years (with some 20 more years of various dev before that). I administer systems through a command line :)

I found that the easiest way to learn front end was to take a framework (I use Quasar which is very complete) and learn on that. If you have some knowledge of development you will progress quickly. Before that you may want to read and try the introductory docs for Vue.js

This will give you a solid hammer to address all nails, even the points that are not really nails.

The advantage is that it will work fine, and you can then try to optimize (or de-nail) your projects.

[LAC-Tech]

Are most frontend developers even able to leverage the browser console?

If you have transpiled react - which needs its own debugger - I'm not sure what interesting things you could do from there.

I don't think it's part of the culture anymore, unless you're doing vanilla JS or jquery. Happy to hear counter example, but I've had to show even node.js backend devs that the node interpreter actually exists.

[qudat]

Source maps allow you to use the debugger just fine.