Where do I start with writing a web page nowadays?

I used to write websites as a hobby, back in the days of HTML and ASPX. Back then CSS was this fancy new thing and Javascript everyone assumed was something to do with Java.

Nowadays I build data pipelines and stuff like that with

#kafka Follow

etc, and the closest I get to HTML is a pseudo </rant> tag in Slack.

Now I have a demo that I want to build that needs to include a web page. The web page is to display some data that it'll get from submitting a call to a REST API based on user input. It needs to be simple but ideally have the scope to not look entirely butt-ugly.

Where should I start as a simple place to build such a thing?

Do I just learn some vanilla Javascript and take it from there? Is there a useful framework that will make my life easier?

I'm struggling with Google because there's a bunch of "tutorials" that are just skinned promos for company's own products, or it's stuff that's from a few years back. And maybe that's fine, but I want to at least understand what the current state of technology is in this space.

So, hit me with your best suggestions :) I'm looking for

• Stack recommendations that are easy to access and I don't have to sink a lot of time into understanding. Accessibility > perfection.
• Tutorial recommendations that start from zero knowledge.
• Development environment - is vi all you need?
• Something that can run entirely locally and from Docker

Comments

[TheElementAce]

Try WebFlow. webflow.com/

All of the HTML and CSS is abstracted away behind a visual editor. They also allow access to external data through API calls.

As far as tutorials, the creator took the time to record over 70 videos, each ranging from 3 to 7 minutes in length. There's literally no excuse not to understand the software. I've been through it all myself and I can vouch for his teaching style: concise, complete, and even hilarious at times.

I'd use it more if I could afford the monthly fee (around $25/mnth). It's the perfect middle ground between coding and designing.

Give it a shot!

[Robin Moffatt]

Thanks for this. It sounds like a hosted solution though? I need something that I can also run entirely locally and from Docker, cos I'll be using it in demos etc.

[Ryan Gails]

Webflow looks awesome!

[Ben Lovy]

WebFlow looks cool, but if you're looking for a more JS-like solution, I recommend Vue. You don't need a whole lot to get started, the HTML/JS/OOP you already know and a single afternoon with the docs should get you up and running. It basically just worked how I expected, and let me forget about the JQuery-style DOM manipulation hell. Especially for a relatively straightforward case, it should just get out of your way and let you write up your webpage. You'll get a nice responsive page for your REST results out of the box by default. It's got an app generation CLI tool that will spit out a working configuration ready to go that isn't too bogged down with cruft.

I used emacs, I'm assuimg vi will suffice. Docker-friendly.

Another option is Svelte, which hits your simplicity requirements but is much younger/less supported. With both, though, you're just writing JS like you expect to.

[Robin Moffatt]

Excellent, I'll check this out. Thanks.

JQuery-style DOM manipulation hell.

Funnily enough, that was probably my last interaction with JS, several years ago. I'll be glad not to repeat the experience :)

[Ben Lovy]

It's come a long way! Hope it helps.

[Trystan Sarrade]

Well, simple HTML/CSS/JS will do the job. No need fancy frameworks such as Vuejs, React and so on.

If you want good visuals, you can go for Bootstrap, it's one of the most popular CSS framework. But I personally prefer Materializecss that is more simple to use from my point of view.

For the Rest API call, you can do this with basic javascript. But you should look for Jquery, it's a small utility script that you plug to your webpages (<script src="jquery.css"></script>). It just provide simplified functions that replace some complicated javascript ones. For example if you want to select a DOM element by it's ID :

//With javascript only
document.getElementByID('myelementid');

//With jquery
$('#myelementid')

You can then use the JQUERY Ajax utility to POST, GET or UPDATE http requests over your REST API back-end server

$.ajax.post({url:"http://myserver/mymethod/"})
.done((successData=>){
  //Success case code//
})
.fail((failure=>){
  //Fail case code//
})

You success case code can then update DOM elements to display your data.

You have the entire W3C school website for clear documentation and examples : w3schools.com/
The Mozilla documentation pages if you want better documentation coverage, but less clear examples : developer.mozilla.org/fr/

Materialize and Jquery also have clear and useful documentation.

[Robin Moffatt]

Thank you, that’s really helpful 👍🏻

[Joseph Rea]

I would say github.com/facebook/create-react-app is the best place to start for a more modern approach.

It is a huge pain to get all of the things set up correctly in order to make even the most basic app in react. That takes the pain out of it, and enforces some industry standard practices. While doing everything in the react-specific way, which does have some learning curve, the amount of documentation and the generally transferable architecture and way of thinking is well worth it.

Since it is industry standard, you get full access to the js ecosystem too, so a lot of the "app" would be stitching things together that other people build and maintain, which is great.

For the "stack", I would just use apollographql.com/docs/tutorial/in...

I would read though reactjs.org/tutorial/tutorial.html, since you're using react. It's a bit dated (using hooks in react is pretty dope), but will get you 100% of the way there, also the apollo docs will give you basically all the express (nodes http server) info you need.

For development, I use code.visualstudio.com/. I used to have an ultra customized vim setup. vscode is better in every way I can think of. And it has vi bindings.

[Robin Moffatt]

This is great, thanks!