It’s just a simple web page

 

Right…

I’ve been taking some time to learn to build some simple web pages. Nothing amazing or fancy, just a basic web site, backed by a database.

The reason I think this could be done is pretty obvious. The logic goes like this:

1. I build, know, am familiar with embedded systems written in C,
2. C is a programming language, code,
3. Web pages are made with code,
4. Therefore, I can build web pages.

Not so fast…

I am guilty of the sin of knowledge. What I do is hard and complicated. It is very hard to explain to other people, who are not in my “crowd”. What other people do, well, that is easy. Nope, wrong, not even close. Software is hard, end of story, drop the mic and walk away.

Let’s look at what is involved in a modern web page.

The Back-end

You need a server. The computer that accepts HTTP requests from a web browser and sends back a file. The great thing about servers in 2017, 2018 you don’t need to buy one. They are for rent, every place and dirt cheap. Amazon, Google, Heroku, and Digital Ocean have dozens of how to articles that can get you started.

If you want to store data, again you have options and most are free. MySQL, PostgreSQL are full featured amazing databases, and open source. Most of the hosting providers above have a one click install. Easy. My database needs are small, so start simple with SQLite. It is an SQL database that is local, usable and the whole database is one file. We should be realistic. If my application outgrows SQLite, I’ll eat my hat.

To do dynamic web pages based on a database, you need some way to generate them on the server. Google and Amazon have specific, proprietary ways to build the pages. Meh, no need for huge scale, and I want to leverage what I know. Python is familiar. I like Django, the web framework for perfectionists with a deadline. A friend recommended Flask as well. Both are workable. The initial tutorials are very helpful, and the back-end work came together relatively easy.

The Front-end

First up is HTML. I have some books on the shelf, and their is the always handy “view source”. Not a problem, well not much.

CSS is a bit of a mystery.

Then I ran into this:

What? Wait, what? Being an engineer and having the “it should be pretty” problem, I went into an analysis paralysis death spiral.

Making Sense

What do we really need here?

HTML is what to display.

CSS is how the page is displayed. The formatting, colors, and alignments.

The JavaScript is the cool bit. It lets the page be interactive. When you click a button, and some stuff appears and disappears, that is JavaScript.

The confusing thing for us newbies to the JavaScript world, is we are walking into a war zone. There are multiple competing frameworks engaged in a popularity contest.

Top Javascript Frameworks to learn in 2017

5 Best JavaScript Frameworks

First of all, this is good. There are multiple tools, all getting better and better all the time. Good stuff, plus all of it is free.

It is also confusing, and maddening. Everyone has an opinion, and that opinion may change by next week.

In the interest of simplicity, I started with Bootstrap. It provides all the user interface elements anyone would want. Everything familiar is included.

That was good, but the interaction was a little, meh. Static I guess is the word. Plus, it was not cool enough. Add more buzzwords to make it better, right?

So now I am working with Vue.js and Bootstrap-Vue. All of the UI elements from Bootstrap are build to work inside of Vue. Very cool.

I am learning, and so far things are working. The Vue code makes the back-end Python dead simple. I like simple, simple does not have bugs and runs fast. Right now I can get one element to work and look right, then the framework populates the rest of the pages. It is actually pretty amazing. Don’t get intimidated by something like this, especially if it is outside what you work on day to day. You’ll be a beginner again, and that is a good thing.

Most of the hard work has been done for me. So I would like to say thank you and express my gratitude to all the open source developers who have made this so much easier. Thank you.