Attempting to Learn Flask, Part 3

Attempting to Learn Flask, Part 3

I should close the loop on this series. Part 1 and Part 2, if you’re interested.

The conclusion is, I haven’t mastered it, but I’ve definitely figured out the basics. I thought I’d need to learn more from CS350 for some time before getting here. Instead I found myself going back to just two of the videos in Charles Severance’s “Using Databases with Python” several times and jogging memory with code I’d worked with during that course. I’m forgetful so it was great to have his videos on hand. I also spent a lot of time googling, reading, and YouTubing tutorials.

Basically, I had to draw from everywhere at this point, and the range was really, really wide.

The happy news is, I can now:

  • Use Python to do magic on the back end
  • Use Flask to deliver magic to the front end
  • Use SQLite3 and/or PostgreSQL to handle data (Create, Read, Update, Delete)
  • Doll up my web app a little bit with Bootstrap

I’ve made a couple of apps already:

One uses Python to concatenate randomly selected strings from various lists to form grammatically correct English sentences and then displays a new one in the middle of a webpage at regular intervals.

The other draws from the IMDB database, banishes all USA and Western European films, randomly picks 10 from the rest of the world, and displays them along with their trailers from YouTube. This one was not so trivial for me. There was a lot of junk data in the IMDB database to clean up, and I had to work out how to scrape YouTube to embed the trailers on my site.

So, as of early 2017, I can verify that my proposed path of least resistance for learning how to build a web app from scratch is a pretty decent strategy.

I can’t say if it’ll continue this way. Already there are certain things that are falling into doubt. For instance, CS350 leverages AngularJS a little bit to do Flask stuff, and in the course of reading all the other sources I found out that there is a lot of uncertainty surrounding the future of AngularJS right now. That particular case is not terribly important. Just a small example. We can use other JS frameworks anyway.

What’s next for me? I’m going to build up that film site of mine. Add users to it, work on some formulae running in the back end. Get more familiar with PostgreSQL. Get a better handle on how to mash Flask up with Bootstrap. And then maybe learn Cordova next year to build mobile apps.

Coding is great fun, especially since I use it to engage real world problems. For example, the winner-takes-all effect. Films from USA and Western Europe, and especially from Hollywood, saturate almost every single one of our media environments. My film site bans all USA and Western European films in order to allow the diversity of the rest of the world’s film heritage to come to the fore. Turns out, it’s wonderful. Using it, I discovered amazing, beautiful films from Azerbaijan, Indonesia, Malaysia, Turkey, and elsewhere. I think there was even one from Antigua and Barbados. It’s not ready for the public yet, but I hope to put it up somewhere just for show-and-tell soon.

Another big reason that drove my learning was the oppressive pecuniary pressures in the art world. I wonder if I’m ready for an entry level/junior position yet. I have no idea. Time to try looking around for a job now as well, I guess. At the very least, I’ll get a better idea of what the world wants.

Advertisements
Jinja2: A Medium Between Python and Front End

Jinja2: A Medium Between Python and Front End

I first looked at Flask and Django because people said that if I want to use Python on a webpage I’d need a web framework. Turns out, the simpler thing to learn is not a web framework but a template engine.

What is a template engine? Who the hell knows? Do you think I knew as a beginner? Why do all these tutorials call it that? Tutorials for beginners, no less. And if you want to even learn one, Jinja2 in my case, you can barely find a tutorial that focuses on it. Most Jinja2 tutorials involve a great deal of Flask.

So here’s the thing, Jinja2 is the medium that weaves between Python and a webpage on the front end. It allows us to show results from a Python function in the back end on a web page. It can’t do everything but, sometimes, it’s more than enough for us.

As far as I know, Jinja2 remains an integral part of the Holy Trinity of Flask-Jinja2-Werkzeug. Pip install Flask would get you the entire Trinity. However, you don’t need to learn all of Flask to put Python functions on the web. You do still need to import flask in your script and learn the basics of where to put your files and how to name your folders the way Flask likes it, but after that, it can be simple. Here’s an example.

In your index.html file, which must be placed in the templates folder according to Flask’s preferences, you can have a string like, say:

I like {{type_of_jam}}.

In your server script, you can do:

@app.route(‘/’)
def mainIndex():
list = [‘butter’, ‘apple jam’, ‘orange marmalade’, ‘crude oil’]
jam = random.choice(list)
return render_template(‘index.html’, type_of_jam=jam)

And that’s it. Your string on the webpage randomly displays a type of jam.

You can do other things with it, of course, and you’ll need some more knowledge to better appreciate what it can do. But my point is, for beginners to get to here, we first need to tunnel through mountains of other stuff, a lot of which is unnecessary (even if nice) simply because the current ecology of pedagogical resources don’t design for noobs.

Path of Least Resistance: From Knowing Nothing to Python to Flask

Path of Least Resistance: From Knowing Nothing to Python to Flask

I have to work on urgent stuff so I can’t go on with Flask for the moment. 😦 But I want to quickly pen down what I think might be the relatively easiest way to go from knowing nada to learning to make a web app, based on my experience.

Code Academy

Easy stuff. Dip your feet in shallow waters with its Python course. Also do its HTML, CSS, and Javascript stuff.

Learn Python the Hard Way (LPTHW)

First half was good, second half got too hard, partly because the way things were explained did not agree with me. I quit this site in its last third, I think.

PythonProgramming.net

I think I did Python basics on this site in the same period I did LPTHW. I may have done one or two other basic tutorials too because I wanted strong enough fundamentals to make learning the harder stuff easier later.

I don’t think my fundamentals are strong even now though. For instance, I’ve never written a class and I’m not sure I know how to.

Web Design for Everybody (Basics of Web Development and Coding), with Colleen van Lent

Lent is very clear on most things. I also did a Bootstrap course somewhere online but I can’t remember what it was. Learning front end stuff helps me understand which code comes from what programming language and where it should go when doing Flask. Learning Flask will involve Python, SQL, HTML, CSS, and JS, at some point or other.

I didn’t do the Capstone for this or any other Coursera course I did, because it costs money.

Python for Everybody, with Charles Severance

The first couple of Python courses in this specialisation are pretty all right. But I feel beginners require a lot more hands-on/embodied experience before we know to use Stack Overflow and other resources as vital supplements to understanding the things instructors miss out, and to troubleshoot all kinds of problems course instructors could not predict might affect their students. This is why it’s a good idea to go through Code Academy and LPTHW before doing this Coursera specialisation.

Severance is the clearest instructor I’ve come across on the things he goes through in the “Using Python to Access Web Data” and “Using Databases with Python” courses. I gave up working on a couple of the more complicated projects towards the end, in part because the instructions grew less and less and I kind of still needed them. But most of the courses are really pretty damn great.

Templating With Jinja2 in Flask

I didn’t finish even midway through part 3 of this series but the first two parts gave me a pretty ok beginner grasp of Flask with respect to Jinja2.

CS350 Flask tutorials on YouTube

For me, the clearest instructor and content so far when it comes to Flask. I’m slightly less than halfway through at the moment, though, I think.

UPDATE 19 April 2017: Model-View-Controller (MVC) Paradigm

At this point, I feel, it’s time to focus on two things: security, and the MVC paradigm. I am presently trying to figure out flask-security, but haven’t found good enough teaching/learning material for it. Please message me if you know some.

For MVC, this is a good introduction:

It helped me a lot, made me realise I could reduce my code by around 90%.

Others

Throughout this journey, Stack Overflow has been absolutely vital for finding solutions to miscellaneous problems. But usually, I google my problems and it finds solutions on Quora and a lot of other great websites too. I tried duckduckgo but its results were dismal for research.

UPDATE 2 April 2017: Yes, CS350 is good, but slightly more than halfway through it, I found myself building my own web apps, and that meant that I began seeking solutions from everywhere. It was a sudden and significant decentralisation of sources. A bit more detail in Part 3 of my experience learning Flask.

First Flounderings in the Real World

First Flounderings in the Real World

After driving through HTML, CSS, JavaScript, PHP, Responsive Design, and Information Design courses on Coursera, Udacity, and Code Academy, I knew I was ready to get super confused and flounder like a drowning rat in the real world. So yesterday, I came up with the brilliant idea of making a quote randomiser.

I calculated: index.html, CSS, and JS files. Just three files. The HTML file contains just the usual links to the CSS and JS files, and an element for the randomiser. That’s it. The JS file contains what I imagined to be a simple function to pick from an array of quotes. So simple. What could go wrong? Well, remember that time you wanted to have the computer open a program automatically at a specified time and you thought it would take 5 minutes but it took like 4 hours?

Three frustrating hours later, after tweaking a handful of functions I’d taken from elsewhere any which way I could, and on the verge of murdery activities, I discovered why they weren’t working. They were working! The problem was, I’d put the link to the JavaScript code in the head of index.html, just like many examples showed. Of course it’s not supposed to be there. Why would it be? Just as life, destiny, and the universe will it, it should be at the bottom, below </body>, and all the examples before were created by the Elders of the Internet solely to fuck with you.

Finally, I could turn my mind to other problems. Two aggravating hours later, I figured out that some of the code was JQuery, and I couldn’t use them without installing something? I’m not sure at this point, but I googled up strictly JavaScript alternatives and they finally worked.

Then I could work on the CSS, which wasn’t bad, just tedious. Changed sizes and colours and floated things left and right and, vitally, realised that I did not know what the standards for these things were. I was just making things up on the fly. I’m sure there are standards. Right? I have to return to Colleen Van Lent’s lectures and read up on conventions and other things.

In particular, I spent a lot of time trying to figure out how to make the background cycle through all the colours of the colour wheel. Apparently, that’s a tough one. Most tutorials tell you about how to cycle through just a few colours. At least I learn that. It was at this point that I found -webkit- codes. My first brush with it and it’s confusing. I kind of get what it is, but not really.

And then, because someone’s onclick function worked for him but didn’t work for me even though I’m very sure it should, I had to look into addEventListener, at which point I discovered that the fight between Netscape and Microsoft over event handling left us with and inconvenient piece of heritage: confusing events order. Naturally, I had to wonder why they couldn’t get their shit together. Anyway, I read the linked article, and I will likely forget it until it comes back to bite me on the behind.

I also learnt that document.getElementById() is different from document.getElementById().innerHTML. But I don’t know how and I don’t know when to use either, and tutorials and lectures don’t seem to explain the difference between them. I got by on trial and error on this one, and several other things. Not ideal.

Finally, the randomiser worked. And now, I wanted to go on to the next phase. I want users to input quotes. But, I need some sort of CMS. Something like Flask? So each user has his/her own account. The gap betwixt seems the length and breadth of Thanatos’ scythe. But, what with the Law of Diminishing Marginal Returns (that is, I got tired) setting in, I became more and more unwilling to research things properly and experiment. Next weekend then!

If this post is a bit confusing with too many irregular bits thrown in, that’s because it reflects what beginning programming feels like. You think the learning curve is linear, but more often than not, it turns into a bewildering mess in the blink of an eye.