epoch1970
Posts: 1655
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

How to create a modern web page (app?)

Mon Feb 05, 2018 3:45 pm

I remember using NCSA Mosaic and compiling the CERN HTTP server...

I would like to build a few web pages to allow configuration and control of some apps on a Pi.
I can install lighttpd, write an HTML page and a few cgi scripts with emacs. Maybe add a touch of javascript on top.
That would take me a few hours from start to finish.
It'll work, and it will look like crap, too.

I'm interested in something modern that would look good.
I'd prefer not to have to install and configure a web server per se.
System-level access required (like a cgi)
Self-hosted, open-source, free and simple (no mandatory "database", "jQuery"...)
I'm thinking of Go, perhaps Node.js (no PHP, I suppose perl is cold by now)

Anything you can recommend?
Thanks in advance.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

scotty101
Posts: 2856
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 4:21 pm

Two things I've tried in the past.
https://expressjs.com/ - A web framework for node.js
https://pythonhosted.org/Flask-Bootstrap/ The combination of python/flask as the server side and bootstrap as a modern web front end library.
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

epoch1970
Posts: 1655
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 5:17 pm

scotty101 wrote:
Mon Feb 05, 2018 4:21 pm
Two things I've tried in the past.
https://expressjs.com/ - A web framework for node.js
https://pythonhosted.org/Flask-Bootstrap/ The combination of python/flask as the server side and bootstrap as a modern web front end library.
Very interesting. Thank you!
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Heater
Posts: 9248
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 5:56 pm

epoch1970,
It'll work, and it will look like crap, too.
I feel the pain. Been there. Done that.
I'm interested in something modern that would look good.
Making a modern web page that looks good requires an in depth understanding of HTML and CSS. Personally I think it's all a big mess and I'd rather not waste my life thinking about it. To that end I use bootstrap to style things: https://getbootstrap.com/docs/4.0/examples/

Even simply including bootstrap in a page starts to make it look better than the browser defaults.

You can use bootstrap themes to get a style you like. I like the "cyborg" theme. https://bootswatch.com/cyborg/ there are many others.
I'd prefer not to have to install and configure a web server per se.
Well... if you want a web page you need something to answer to HTTP requests from the web browser.

Recently that "something" for me has been node.js.

A handful of lines of code in node.js makes a web server.

The magic part of node.js is that it is very good at juggling requests for web pages whilst at the same time talking to GPIO on you Pi or attached sensors or... well, pretty much anything else you want your program to do.

Don't listen to the Python guys. That is such a harder route.

Where all this becomes an "app" is when you have Javascript in your web page that interacts with your server. In this case using the same language in your server code as your web page code makes the mental effort a lot less.

I suggest looking at the express.js library with node.js to make creating a web server trivally easy.
https://expressjs.com/

Like you I don't want complex libraries and "frameworks" in my web pages or my server. They are all the rage now a days. And the "framework of the month" changes every week! Might be useful if you really need what they provide. Otherwise it's just complexity for nothing.

epoch1970
Posts: 1655
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 8:57 pm

Heater wrote:
Mon Feb 05, 2018 5:56 pm
Making a modern web page that looks good requires an in depth understanding of HTML and CSS. Personally I think it's all a big mess and I'd rather not waste my life thinking about it. To that end I use bootstrap to style things: https://getbootstrap.com/docs/4.0/examples/
Thanks! So that's 2 votes for Bootstrap, and 2 votes for node.js/express.

I went to getbootstrap.com. To summarize a long rant I deleted about meaningless divs and classes, "Sass variables", "mixins" and "JavaScript plugins built on jQuery": I feel it's going to be hard...
Why did XML fail to replace HTML/CSS? Ah yeah. XSLT, that was "too hard." My turn, I guess.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Heater
Posts: 9248
Joined: Tue Jul 17, 2012 3:02 pm

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 9:47 pm

epoch1970,

Yeah.

Never mind all that nonsense.

My most basic HTML pages using bootstrap look like this:

Code: Select all

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
Nothing in there but including the bootstrap css. Which I normally serve from my own server rather than rely on maxcdn.bootstrapcdn.com.

If you check the bootstrap documentation you see that any javascript is optional:
https://getbootstrap.com/docs/4.0/getti ... roduction/

I will fight like hell to avoid using jQuery.
Why did XML fail to replace HTML/CSS?
No idea. XML is horrible. HTML/CSS is much the same.

What bugs me is that a web page is a potentially a single text file containing a dozen different syntaxes: HTML, CSS, Javascript, SVG, God knows what else. With various escape sequences to get a parser out of one into the other.

And the standards groups that define each of those syntaxes don't seem to talk to each other, so there are all kinds of inconsistencies between them.

If you stand back a couple of yards and look at it you realize that everything that is represented in HTML and CSS could just as easily be represented in Javascript Object Notation (JSON). You are likely to need JS anyway so all that HTML and CSS syntax is redundant!

Meanwhile, creating that on the server can mean the same text is mixed up with PHP and SQL syntaxes. Not to mention various template systems.

No wonder the web is a mess of bugs and a playground for exploits.

OK, rant over.

If we are careful we can avoid all the terrors of the web environment.

epoch1970
Posts: 1655
Joined: Thu May 05, 2016 9:33 am
Location: Paris, France

Re: How to create a modern web page (app?)

Mon Feb 05, 2018 10:24 pm

Heater wrote:
Mon Feb 05, 2018 9:47 pm
My most basic HTML pages using bootstrap look like this
Yes, I will keep it simple. A modest use of Bootstrap will be good enough and good for my blood pressure ;)
XML is horrible.
Oh, no. XML is what you want it to be. I will admit writing XSL transforms is sort of a mind-bender.
But the gurus at Bootstrap could have taken care of that by now, and their doc could say things like that:

Code: Select all

<!-- This will be rendered as a super-stylish automagic accordion thing -->
<accordion width="100%" rhythm="fast" version="1234" render-for="IE-4-win">
...
</accordion>

I had a serious brush with DocBook in the past. There were ~400 elements to learn in the dictionary. But at least they made sense.

I guess that's enough on that subject ;) Thanks again to you both.
"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème." Les Shadoks, J. Rouxel

Return to “General programming discussion”

Who is online

Users browsing this forum: RPi_Mike and 1 guest