Live data from Hacker News

Web Development for Beginners – A Curriculum

github.com

51–60 of 111 posts

Re: Web Development for Beginners – A Curriculum

#51

On a related note: I've had to help train a bunch of Java/C++ devs about web dev over the years. I've also talked to a lot of new devs. One thing I noted is that there wasn't a good resource that tried to explain the key pieces of web dev concepts, terms, and technologies, and how they fit together. So, I ended up writing a "How Web Apps Work" blog series to try to fill that gap: https://blog.isquaredsoftware.com/ser…

I just read through your post on servers[1], as I'm currently in a similar boat (webdev working with C++ devs). I think the biggest hurdle for such developers are things like:

- statelessness of the server (REST)

- the lifecycle of a single request

- the lifecycle of a single (server-)app (microframweworks)

OOP devs unfamiliar with server development tend to pollute the app lifecycle with hidden state in some singletons that are swirling around globally. The requirement that servers should be able to parallelize request-processing is mostly an afterthought and hidden app state makes it impossible to parallelize anything.

A sequence diagram of a single request would help there a lot IMHO and a short explanation of how to keep the response times short, by doing long-running tasks in the background with message queues.

[1]: https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-...

Re: Web Development for Beginners – A Curriculum

#52
post #50

A bit of bikeshedding (and I'm not an educator, so take that with a grain of salt), and I guess different views on a good curriculum are to be expected, but a few things I noticed upon a skimming: - No basic HTML "hello, world" in the beginning to hook the reader and show that they can easily make web pages. It seems that they should wade through quite a few lessons, including JS ones, before composing the most basic…

Sticking GitHub and accessibility in the first lessons was a pretty odd choice

Re: Web Development for Beginners – A Curriculum

#53

about JavaScript, CSS, and HTML basics ...and this is where it goes off the rails; teaching JS before HTML is how we will continue to have the ridiculous proliferation of app-sites that shouldn't require a single line of JS instead needing the latest version of $browser (you have a choice of browser - pick one ...) to even show any content at all. Forms don't need any JS to work, yet the impression this gives to begi…

> The agenda is obvious to anyone who cares to look.

Alternatively: it's just teaching whatever is popular in the industry, for better or worse (similarly to how DevOps people would be taught Kubernetes, even if it can be horrible in certain cases and for smaller projects).

Many sites out there don't need JS. Server side rendering would suffice. And many other sites out there would be well served with minimal JS for enriching a few forms.

Yet, that's not the reality that we live in. The reality is that the majority of the developers out there will simply have to deal with lots of JavaScript, TypeScript and frameworks like Vue, React, Angular (i'm using the term "framework" here because they change the entire direction of the development of your front end, not that it matters at all).

So, that's what curriculums will focus on, since clearly people want to have good employment prospects. It doesn't seem like the linked one gets too caught up with the frameworks, though.

Re: Web Development for Beginners – A Curriculum

#54
post #50

A bit of bikeshedding (and I'm not an educator, so take that with a grain of salt), and I guess different views on a good curriculum are to be expected, but a few things I noticed upon a skimming: - No basic HTML "hello, world" in the beginning to hook the reader and show that they can easily make web pages. It seems that they should wade through quite a few lessons, including JS ones, before composing the most basic…

I agree with all of these and I‘ve been teaching web development to total beginners.

The MDN guides give you a much better template. They focus more on the fundamentals, starting with HTML.

The first thing I do after a short intro and overview is writing a Hello World HTML page with them while saying something about each line.

When they open the page in their browser you can see something in their eyes, which is magical. They just made their first web page!

Also I focus much more on HTML and CSS than on JS. There’s so much to learn just with that, while JS should be used when needed, little snippets for interactivity.

Re: Web Development for Beginners – A Curriculum

#55

about JavaScript, CSS, and HTML basics ...and this is where it goes off the rails; teaching JS before HTML is how we will continue to have the ridiculous proliferation of app-sites that shouldn't require a single line of JS instead needing the latest version of $browser (you have a choice of browser - pick one ...) to even show any content at all. Forms don't need any JS to work, yet the impression this gives to begi…

> The agenda is obvious to anyone who cares to look. Alternatively: it's just teaching whatever is popular in the industry, for better or worse (similarly to how DevOps people would be taught Kubernetes, even if it can be horrible in certain cases and for smaller projects). Many sites out there don't need JS. Server side rendering would suffice. And many other sites out there would be well served with minimal JS for…

But to master JS tools you want rock solid fundamentals and know about default behavior, writing clean HTML and CSS. I even teach more about networking and HTTP than JS. They actually want to know: what happens when I type an url into the browser?

Re: Web Development for Beginners – A Curriculum

#56
post #43

Earlier quoted context omitted.

You may also want to consider a Droplet for his next website. He will learn about the plumbing. That way, when ever he is filled with self-doubt and needs reaffirmation, he would be able to put things together from the ground up and regain confidence.

What is a Droplet? Edit: seriously. Non native speaker here, I have never heard the term. Googling shows: https://www.digitalocean.com/products/droplets So a VM from this vendor is meant? Why?

VPS hosting at Digital Ocean, available for USD 5 per month

Re: Web Development for Beginners – A Curriculum

#57
post #50

A bit of bikeshedding (and I'm not an educator, so take that with a grain of salt), and I guess different views on a good curriculum are to be expected, but a few things I noticed upon a skimming: - No basic HTML "hello, world" in the beginning to hook the reader and show that they can easily make web pages. It seems that they should wade through quite a few lessons, including JS ones, before composing the most basic…

Sticking GitHub and accessibility in the first lessons was a pretty odd choice

It strikes me as probably being a corporate directive rather than what the author might really want

Re: Web Development for Beginners – A Curriculum

#58
post #47

I'm an experienced backend developer but always struggled with learning modern web development. I understand all the core well (html, CSS, JavaScript, etc.), but struggle with choosing the right high level abstraction/framework/technology for ideas I want to implement. E.g. should I make it a single page app or not? Should I be using ES6 imports? Which build tool? Would I want React or Vue or something simpler here?…

If you’re a backend dev, with solid HTML/CSS and HTTP/REST fundamentals then I recommend you default to using htmx plus server side templates for HTML rendering and interactivity, plus a well documented, simple CSS framework that gives you out of the box components like bootstrap/bulma/semantic.

React/web components etc. is when you need advanced/bespoke UI widgets. If you can afford KISS then they only introduce complexity and cost.

Re: Web Development for Beginners – A Curriculum

#59
post #47

I'm an experienced backend developer but always struggled with learning modern web development. I understand all the core well (html, CSS, JavaScript, etc.), but struggle with choosing the right high level abstraction/framework/technology for ideas I want to implement. E.g. should I make it a single page app or not? Should I be using ES6 imports? Which build tool? Would I want React or Vue or something simpler here?…

Fullstack dev here with more experience in front-end.

I struggle too. I'll tried a lot of different things (ex : puppeteer vs cypress, react vs angular2), and I end up having my own preference.

I'll try to answer some of your questions :

- Should I use SPA ? Slower initial page loading time, but faster to load more pages. Good if typical user stay long on website and navigate multiple pages.

- Es6 import ? Use them when you can, better IDE support than require.

- Build tool ? Start with webpack, oldest tool, with more chance to find answer to your questions on stackoverflow. Although I have little experience on the others (Rollup, etc), so maybe there is one that is simpler to start with.

- React or Vue ? Idk, haven't used view, both are popular and similar, take one you prefer the syntax ?

- Something simpler ? Well, there is too much choice... Vanilla js, another cool library, low code or no code like wordpress...

- SSR ? Less API to build. Faster initial page loading. Roughly. There is quite a lot of library out there with SSR, and it is elvolving quite fast. The future is probably a mix of server and client side rendering.

- npm vs yarn ? I recently played with npm workspaces, and yarn had a feature I needed, otherwise I think sticking to npm is fine. Historically yarn became popular because it introduced .lock file before npm. Npm has since catch up.

- Css compiler ? Minifying, or compiling sass ? You can start without it. Also starter like "create react app" already do these optimizations for you.

- Typescript ? Use it ! Only exception would be your code is too simple to take advantage of typing.

Re: Web Development for Beginners – A Curriculum

#60
post #43

Earlier quoted context omitted.

What is a Droplet? Edit: seriously. Non native speaker here, I have never heard the term. Googling shows: https://www.digitalocean.com/products/droplets So a VM from this vendor is meant? Why?

VPS hosting at Digital Ocean, available for USD 5 per month

[deleted]
Post reply on HN