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.

Advertisements
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.

Attempting to Learn Flask, Part 2

Attempting to Learn Flask, Part 2

23 Feb 2017

I thought I’d break up the holy trinity of Flask to make it easier to learn: Flask, Jinja2, and Werkzeug. As it turns out, separating Flask from Jinja2 might be impossible. I don’t know for sure yet. Anyway, I used Shalabh Aggarwal’s tutorial, which is thankfully focused on templating, which means a bit more Jinja2 than usual.

I am still trying to get the hang of Flask spreading code over many files, and involving code from Flask, Jinja2, HTML, and even JS and CSS. But I feel like maybe I am progressing, even if just a tiny bit. It’s hard to tell since progress is incremental. I’ll know soon, I hope.

I couldn’t do part 3 of Aggarwal’s tutorial. Something is wrong somewhere and I have no clue what it is. In part 2, I couldn’t import render_field from _help.html as _help.jinja. So I googled it and found a solution, which was to import the whole _help.html and call render_field normally, like form.render_field(). I have no idea why Aggarwal’s method didn’t work for me.

25 Feb 2017

So, after slightly more than a full week floundering, I might have found a good tutorial. I don’t know whom he is, but this CS350 chap seems pretty ok so far, although admittedly, we haven’t reached any of the difficult stuff yet.

In spite of that, I do like that he introduced me to Cloud9 and Gitlab. Cloud9, especially, might solve some issues for me. For instance, the Werkzeug site uses Redis for its tutorials, and it doesn’t quite run on Windows, and I couldn’t figure out how to use the version ported to Windows to work alongside the code the Werkzeug tutorial provided. Cloud9 allows me to run Linux, amongst other things, which means I can use Redis if I want to. CS350 doesn’t use Redis though.

I know I could have used VirtualBox, but I find it a bit of a pain to use, for reasons I no longer remember. Haven’t used it in a while.

And yes, after I tried out Aggarwal’s Jinja2 templating tutorial, I decided to try a Werkzeug one, using the official site’s tutorial. It was horrible. I gave up midway because I couldn’t figure out the Redis bit.

26 Feb 2017, Part A

Following CS350 into PostgreSQL on Cloud9. It’s unfamiliar, because I don’t see the SQL database file anywhere in Cloud9. The method of interface makes it a bit hard to grok. The data is rendered in text on the command line. Is that ASCII? I don’t know. Anyway, I do understand it a little because a month or so ago I did Charles Severance’s excellent Using Databases with Python. It uses SQLite. So, I kind of get some of the commands. I wish I could continue with SQLite though and the DB Browser for SQLite within the CS350 tutorial though. It would make the learning experience a lot smoother.

It might be possible if I had more knowledge, but in that scenario, jumping between the YouTube channel, Cloud9, Gitlab, and whatever other resources I might leverage to use SQLite would make things more complicated.

26 Feb 2017, Part B

Ran into seemingly insurmountable problems when CS350 decided to use psycopg2 in its tutorial. Various forums had different solutions and some of it coincided with my own suspicions. Generally, these were:

  • The right dependencies hadn’t been installed.
  • I didn’t know to use sudo to install/upgrade it.
  • I didn’t know apt-get and pip well enough to use them properly.

It was super confusing. At first, I used apt-get and pip, and sudo apt-get and sudo pip, to install it. I ran pip freeze and found it wasn’t in the list of installed packages. I tried various things after that and at one point, pip freeze said I had the latest version of psycopg2, but I checked Pypi, and I definitely had the wrong one. I ran sudo apt-get update but it still gave me the wrong version.

I basically ran through permutations of solutions for all three of the above possible problems and finally,  got the right version of psycopg2. It took about two hours and every minute grew more and more despondent until that final moment it suddenly worked.

This is how I solve this kind of Python problem(s). I had to do this with NLTK too. It always drains me. Now I need to take a break.

Anyway, this problem prompted me to find out what the differences are between apt-get and pip. Now I know.

26 Feb 2017, Part C

On a tram to friend’s for dinner. Put two and two together and figured out that I can use <input type=’submit’ name=’placeholder’>request.form[‘placeholder’] and cur.execute(“””SQL COMMAND”””) to mediate between front end users and database.

Am I right? Is this the standard way to do it? Can’t wait to go on with the tutorials and/or figure it out another way.

The Aggravating Prong of Epistemology

The Aggravating Prong of Epistemology

You’ve heard of forks. What about prongs? Prongs are like forks, but with more, uh, prongs on them. Did that make you think Gnu? That totally made you think Gnu, didn’t it?

Anyway, there are two types of prongs. I don’t really want to name them like that because now it sounds so official. And I’m making this up on the fly but, well, there you go. Now it’ll be in your exams at the end of the semester. Stop groaning. If you’d done something simpler, like brain surgery or rocket science, you won’t be in this mess, would you? Serves you right.

So, there are two types of prongs, broadly speaking. In the first scenario, a prong happens when you want to learn something new, but unfortunately, that new thing is part of some ecology of knowledge. To understand it, you have to understand this other thing, and that other thing, and that other thing over there and there’s also that one by the window, and another one under the stairs, and there’s its brother-in-law and his dog in the kitchen will be the ones to bludgeon your brain with another right thick epistemological tree branch that you also need to understand to understand that one thing.

This will happen to you a lot as you move from the pure and liberating empty-headedness of not even having made the decision to learn to code to becoming a mess of a person at 3am in the morning deep in a morass of open tabs on every subject under the sun that could be remotely related to the English alphabet as you try your desperate and futile best to understand that one thing.

That’s the first scenario, for which I used to have examples but did not write them down. Oh well. They’ll surely pop up again.

The second scenario is similar. It happens when you want to find out What to Do Next. At this point, you’re a feckin’ noob with a soft skull and half a brain when it comes to programming. You may have been a stupendously magnificent diplomat and you stopped World War III by charming the pants and undies off the husband of a diplomat’s wife with your high-brow intellectual wit and sharp observance of his idiosyncratic cultural mores, but in this world of code, you are shit.

So what happens? You go to Google. But alas, you’re in Poland right now and the internet connection is– seriously, why is it so bad? This is Europe, isn’t it? I thought it’s supposed to be way better than this. What do you mean Eastern Europe is different?

All right, all right. We’re digressing way too much. Let’s move on. Google Chrome takes up too much resources so you open up Microsoft Edge and go with the default Bing to save time. Sigh.

The question of the day for me (I’m switching to me now. It’s not all about you.) was thus: I have made a sketch of a small app I think I can deal with. Now, what do I have to do to turn it into a Tinder or Instagram-like thing with users and such? Where do users go? Into a dictionary? I don’t know. I’m a noob.

So Bing gives you this:

How Can I Build an App Like Tinder

I read it and quickly isolate two things I need to learn next to make my app come alive: a backend, and RESTful API’s. Hang on to these two. They’re crucial to the plot. Like when Snyder’s Comedian died in Gotham and breathed, “Martha…”. That kind of important.

Before we move on, let me just say, none of the definitions of “API” I’ve seen have described it to me in sufficient clarity so that I understand it. I kind of gave up trying to figure out what it is. Maybe I’ll get a sort of instinctive embodied sense of it as I go along. Hopefully.

So, I think, right, I need a “back end”. What on earth is a “back end”? I toyed with Flask once. It worked kind of like WordPress, but it also looked like a Prestashop CMS. Is that a “back end”. I don’t know. I’m a noob. So I Bing “back end” and hit Wikipedia:

Front End and Back End on Wikipedia.

Too many words, so I return to Bing. Along with a tab for Firebase, a “back end” open from the Quora piece,  I open up the following:

Flask, a… framework? What’s a framework?

Flask on Wikipedia

I don’t get it. But, I have to move on. So I Bing something like “python back end for android app” because I’m most familiar with Python. Although I’m familiar with it in the same way Jem and Scout are familiar with Boo Radley. Wha-? What do you mean who? Do you guys not read books? Geez. Boo Radley!

Anyway, Binging that gives me these:

Creating a Web App From Scratch Using Python Flask and MySQL

Can I use some Python in the backend for an Android app?

Which is better for my back end needs: PHP or Python?

I want to develop a backend for an Android app. Which technology should I use?

Adding a database/backend to android applications [closed]

In one of these many links, “Node.js” is mentioned, and I’m currently learning JavaScript. Maybe that’s framework? I’ve always thought it’s a framework. But Node.js on Wikipedia says:

Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of tools and applications. Although Node.js is not a JavaScript framework…

What the hell is a runtime environment?! Wikipedia:

A runtime system, also called run-time system, primarily implements portions of an execution model. This is in contrast to the runtime lifecycle phase of a program, during which the runtime system is in operation. Most languages have some form of runtime system, which…

What the– What?!

Ok. All right. Take a deep breath. Don’t lose it. You’re doing fine. Just breathe. I’ve heard of ReactJS. Is that a framework or a runtime environment or a back end? Wikipedia:

React (sometimes styled React.js or ReactJS) is an open-source JavaScript library providing a view for data rendered as HTML.

It’s a LIBRARY?

*Defenestrates computer in frustration.*

I’ve also heard of AngularJS and I’d Bing it but I’d just thrown my computer out the window and someone’s probably dead four storeys down because that’s what happens when you hit people on the head with the weight of all that knowledge.

FUCK.

So, I go all the way back to the original Quora entry on how to build a Tinder-like app. Yes. That’s all I have. After twenty minutes of aggravating pronging, I learn nothing more than the fact that I still need to find out what back end to use and how to work with RESTful API’s. Notice, I am tired out enough not to bother looking for their definitions anymore. And that is what a prong does to you.

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.

Safe Spaces: Women, LGBTQIA+ & Noobs

Safe Spaces: Women, LGBTQIA+ & Noobs

I’ve been visiting hackerspaces and their kin in various cities for a while, and much as I love them, most of them have a few Very Big Problems:

  1. Sexism. This has been detailed elsewhere so I won’t delineate it.
  2. Privileging of software and hardware expertise. This is a strange one to me. In one space I visited, biologists were made to feel unwelcome and second-rate because they were wetware experts, not software and hardware specialists.
  3. General unfriendliness to noobs. A lot of the time, this isn’t intentional. But sometimes, it is. Techxperts tend to forget that noobs can’t hold more than maybe two or three new things in their head at any one time, and ramble on and on with a litany of gobbledegook that turns a noob’s face green with sick.

The sum of these boils down to one thing: bullying. That’s all it is. We don’t need to go through why bullying is bad. We know it is. Some of us, including myself, have friends who committed suicide because of bullying. It’s super, super, incredibly bad. You never get over a suicide.

What do you do if you’re like me and want to find a safe community in which to geek out and learn stuff with people who won’t bully you? You look for it online. Unfortunately, the global hackerspace list doesn’t tell you which spaces are safe for marginalised peoples.

I know Mz Baltazar’s Laboratory in Vienna is an awesome feminist and transgender space. Geek Girls Carrots in Poland is great for women. I’d bet GutHub in Singapore is safe too.

I guess we need a safe spaces list. Let me know if there already is one, or email me your favourite safe space and I’ll put a list together.

PHP: Where’s the Love?

PHP: Where’s the Love?

I want to learn how to make WordPress themes. One of the funny things about WordPress is, it uses PHP. I’m not sure what for exactly at the moment. But here’s the funnier thing.

There’s no PHP tutorial on EDX, Udacity, and Coursera. Codeacademy has a small one at 4 hours. YouTube has comparable results. I can’t check Khan Academy right now because my internet is broken, but I’d wager the results are similar.

As a noob, this puzzles you, and nothing online tells you what’s up. Actually, there are a ton of things online that tell you what’s up, but as a noob, you don’t have the requisite knowledge and vocabulary to search those things up. But, I’m lucky, I have a few helpful programmer friends. They are often far too busy or much too exhausted by the end of the day to help, but sometimes they answer a few questions.

One of them sent me a post detailing why PHP is so unloved. Excerpt:

Virtually every feature in PHP is broken somehow. The language, the framework, the ecosystem, are all just bad. And I can’t even point out any single damning thing, because the damage is so systemic.

I don’t want to get into why PHP is bad because I don’t know and it’s not the point I’m trying to make anyway. Read the post for the details.

My point is, ideally, noobs shouldn’t go it alone. Noobs have to try and make friends with experts, and daunting as it is, especially for those who are scared of sunlight, it can be very, very helpful. Of course, experts don’t make it easy. Too many of them scoff and make inappropriate remarks. But there are nice ones. Unfortunately, it takes some work to find them.