Tuesday, August 20, 2024

CODING PAGES

CODING PAGES

I must admit, this idea is not fully fleshed out. But in this morning's session of Morning Pages, I was thinking about the practise of writing. Writing is new, it's not something very ancient, even though it is ancient. If you go back far enough in your family's history, it won't take too many generations, in some cases just one or two, before you reach ancestors that could not write.

Having the skill, or simply ability, to write is something technical. It's not very natural. It's a skill from patient learning of how to hold a pen, and memorize the various symbols that make up the language in which you are writing. If it's Chinese, then I suspect that the learning period requires a lot more practice than the Arabic script of 26 letters.

And after you have learned the technical skill of holding the pen, making marks that are recognizable (not just legible) as letters you move on to the art of composing these together into words.

And all of this takes years to master. Once mastery is achieved, some people do go on practising. Taking the time to write daily, so that the hands become independent of the mind, and can write easily. They experiment with different pens, paper and other media. And ultimately learn to enjoy the simple act of writing.

WRITING IS NORMAL

Today, writing is normal. Those who cannot write are the exception. And we are steadily moving on to the next phase of this technological shift. From using pens and paper, we are using computers, tablets and phones. We are no longer mastering how to shape letters and how to hold a pen, rather how to tap on a key and make sure that the letter that appears is the correct one. 

We know the symbol, we just don't need to craft it manually. While some may argue that it's a different skill from writing using a pen, and of course, the media is different and the way we form the words is different, but I think it falls into the same type of experiential activity. Writing.

A DIFFERENT EXERCISE

The Morning Pages are an exercise I took out of two books, Writing Down the Bones by Natalie Goldberg was the first book I read, and she talks about sitting down for "free writing" - I think that's the term she used. And then much later, years even, I ran into Julia Cameron's book, The Artist's Way, where she codified this free form of writing by specifying when (first thing in the morning) how long (3 A4 size pages) and the media (a pen and paper). She was absolutely adamant about this while Natalie, if my memory serves me right, was not.

I enjoy writing code. As a person who spent quite a lot of time with drawings and sketches, I am familiar with long sessions in front of paper, scratching and making legible marks whether it's drafting something, sketching something, or writing something. When my career shifted to software development, I taught myself how to touch type. Initially so that I could concentrate on the work and not constantly have my face fixed on the keyboard. I thought that the touch typing skill was very important for someone in that software development career, though I know some people who manage to live in software development who stare at the keyboard all day.

Just as the hand got used to crafting letters, symbols, on a piece of paper, and so you could now concentrate on thinking about the word, in fact the entire sentence, and not worry about what the shapes of the letters look like, touch typing frees you from thinking of the keyboard, and only concentrate on the word. My fingers know where the keys are and repetitive practise has made the act of typing fairly easy.

WRITING PRACTISE

In my Morning Pages, I now am able to simply move along, not worry too much about content, and simply allow myself to enjoy the feel of the pen as I make the strokes. Indeed, it is an enjoyable experience now, but it wasn't always like this. My initial exercises were fraught with anxiety, I did not know what to do. I was thinking of an audience to my writing, even though Julia Cameron states that this stuff is not for even my re-reading. It's just practising letting go, writing free form. 

It took a really long time to get to the point where I pick up a pen, open my Morning Pages journal, and simply start putting down letters. Of course I'm thinking and of course I'm writing legible sentences, but for the most part, it's not nerve wracking and I don't have to struggle with the content.

TYPING VS HANDWRITING

I think that the same exercise, with different experience, different outcome, can be done on a computer keyboard. After all, it's just a piece of technology, just like a pen and paper. Remember my paragraph above regarding the nature of writing, that it's not natural, it is learned? We have learned to use pens and write and in the same fashion, we can learn to use a computer keyboard simply as a mechanism for putting down letters and writing.

Part of the difficulty in typing is that when you it the wrong key, your hand automatically hits the backspace key and removes the misspelled word. This doesn't happen when you handwrite. Deleting mistakes is very hard, and also, fewer mistakes are made since handwriting is very slow. It is slow and it is tiring. And so when typing, practise needs to continue, just like Morning Pages, till there is a comfortable pace at which the activity is done. And the mistakes are fewer. This does not mean repetitively writing out words, as is the case when someone is learning to type (the same as when a child or adult is learning to handwrite), but thinking on paper - in this case, thinking on the screen.

Because typing is faster than handwriting, care needs to be taken because when fatigue finally hits the hands (as it will), the frustration level in typing can be much more severe than with handwriting. When you write with a pen, and your hand gets tired, you have no option but to stop writing till your hand is ready again. Not only is the fatigue discomforting, it is painful and very uncomfortable. The same may not be the case on the computer keyboard. Your fingers may simply now hit the wrong keys over and over, so your backspacing and deleting activity takes a lot longer and the writing becomes more frustrating.

You should remember at that time to stop typing and take a break.

NOW ON TO CODING

Having said all of that, I still have not gotten to the point of explaining what CODING PAGES are. They are similar to Morning Pages in the sense that it's a practise of sorts. But it's also a way to encourage and push software developers past the boredom of the comfort zone.

Let me try and explain.

Computer programming is a combination of learning a computer programming language as well as a bunch of other tools (sort of like other different languages) in order to build software systems. You may have heard of front-end programmers. These are programmers who know how to design user interfaces using tools like Twitter Bootstrap. On the other side there are back-end programmers, who write software to do some sort of processing, not necessarily visible to the person using the software, but calculating and providing results. There are database programmers who learn how to fetch and provide data requested by the software system. And so on.

Coding, computer programming, involves writing these instructions to the computer, using some sort of notepad, or advanced development tool. You sit down, and you type.

It also involves a lot of stopping, to think, and to lookup something you forgot. For example, in the Python programming language, which is what I'm going to be using as an example for these coding pages, there's are date functions that allow you to lookup dates as well as calculate the difference (in days, or hours, or minutes or seconds) between them. I never remember what they are, so I spend time, every time I need to do this, looking it up.

I know what I want, just that my memory isn't good enough to hold all of that stuff in storage.

Sometimes it's a simple thing. For example, in the Twitter Bootstrap library, there's an extensive collection of classes that allow you to do quite beautiful screen layouts. And I always forget something or the other. For example, how do I stripe the table, or allow hovering, or make the entire cell clickable?

And so, even though I've done this stuff repeatedly, I go back too often that my productivity suffers and I'm not interested in starting new projects.

It's almost like forgetting what a few of the letters in the alphabet look like. Oops, I've forgotten what a lowercase "H" looks like, so I have to look it up. Not the same as spelling since that can be resolved quite quickly, but a real challenge looking up something which is not commonly found.

So in these CODING PAGES, I go into a simple exercise, to be done often. Daily. Taking up about 30 minutes of your time. I think an hour's too much, and fifteen minutes too little to get anything done, so 30 minutes seems about right. And the exercise is fairly simple. It's actually a typing exercise with a goal in mind. To exercise specific skills in some of the things programmers do. And to build something from end to end. This is so that some of the routine items become automatic, like this writing.

RULES
  1. You can use any of the software development platforms that you are used to. However, a plain text enabled environment makes things easier.
  2. You should be able to do three things:
    1. Build a screen with a form - even one box.
    2. Create a database with a simple table - to put data in the form.
    3. Write some code to collect the data from the screen and put it into the database.
    4. Write some code to take data from the database and put it on the screen.
Now, a couple of clarifications:
  1. The database can be a simple file - say a CSV file.
  2. The screen does not need any formatting, you can start with a simple HTML <input> tag at the start, or a <textarea> to type stuff into.
  3. I'll be using Python, but you can use anything.

EXAMPLE 1

Here are three files.
  • input.html - this file has the HTML input to type stuff into a box.
  • display.html - this file has the HTML to display a table of what's in the file.
  • data.csv - our database file. A file with sample information about people, names and emails.
  • app.py - the Python program to take data from the input.

IMPORTANT

I'm using a framework called Python/Flask. There's a setup required but the important pieces for this exercise are:
  1. Python installed on your laptop / desktop.
  2. Flask installed (in Python)
  3. Knowledge that the web server is part of Python/Flask - there's a small command to run the server
So, here's input.html

<html>
    <head>
        <title>Input Form</title>
    </head>
    <body>
        <form action="/putdata" method="POST">
            <p>First Name: <input type="text" name="firstname"></p>
            <p>Last Name: <input type="text" name="surname"></p>
            <p>Email: <input type="email" name="email" placeholder="email@domain.com"></p>
            <p><input type="submit" name="submit" value="Put Data"></p>
        </form>
    </body>
</html>

Now, that's not formatted at all, but the main thing is that I know what those pieces are and I don't have to look them up.
  1. I know the general format of a HTML page and the main tags that form the header part <head> and the body part <body>
  2. I know what the form tag <form> looks like and some of the parameters it takes - like where to send the form when the submit button is clicked.
  3. I know how to put a text box inside the form.
I could write forms all day, and for the first few days, I'll just play with this. Forms by themselves, forms inside tables, forms horizontally (I think we use <span> tags and not <p> tags). And so on.

Now let's write the data file that we will be putting data in, and reading from.

This is data.csv

Tony, Mwai, tony@email.com
Jack, Johnson, jack@home.net
Mary, Mary, marymary@musicstuff.com
Evan, Watt, ew@gross.me
Judge, Jordan, jj@coolhouse.or.ke

That's done. Data can be in any format and later on, I'll switch to using a file database called SQLite that I absolutely adore.

Now, onto the file that's going to display all the data. For this, there's another technology that I'm going to use inside this template HTML file. Jinja2 - which I know. So it's best to keep within the scope of stuff that you know how to use. The Jinja2 templating language allows for variability inside a HTML file. This allows you to alter the data that's displayed based on the data, or other conditions. The Jinja2 programming language is not difficult to use. Together with Twitter Bootstrap they form a really useful framework for designing user interfaces.

Here's that file - display.html

<html>
    <head>
        <title>Data Display</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Surname</th>
                <th>Email</th>
            </tr>
            {% for row in data %}
            <tr>
                <td>{{ row.firstname }}</td>
                <td>{{ row.surname }}</td>
                <td>{{ row.email }}</td>
            </tr>
            {% endfor %}
        </table>
    </body>
</html>

That's it. That's what a HTML table looks like. The tags at each end <table>...</table> signify the scope of the table. The data between each <tr>...</tr> is a single row. And the data between the <td>...</td> tags is a single cell.

The Jinja2 programming part has some special tags also. It's inside the {% ... %} tags. That part needs some programming knowledge. There's another way to do this inside the code, but that will be a coding pages for another day.

Right now there's only one thing left. The actual application code. This is also not too complex, remember I'm trying to keep this exercise down to 30 minutes at the most, on a daily basis. So far we've written 38 lines of code, of which 4 lines are the data itself. And some of the code are single words (like <tr> to start a row).

Here's the program code in a file called app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/input', methods=['GET','POST'])
def input():
    return render_template('input.html')

@app.route('/display')
def display():
    f = open('data.csv', 'r')
    data = [] # we'll keep the data in a list
    item = {} # each item is a dictionary.
    for line in f:
        line = line.strip().split() # this removes the newline
        item['firstname'] = line[0] # these remove any spaces end
        item['surname'] = line[1]
        item['email'] = line[2]
        data.append(item)
        item = {} # need to clear the dictionary.

    f.close()
    return render_template('display.html', data=data)

if __name__ == "__main__":
    app.run(debug=True)

And that's it. Another 20 lines of code.

Honestly, there was a tiny bit of debugging at the end, so writing this post took way longer than I anticipated. But writing the actual code was possibly much less than 30 minutes, including any debugging.

Here are screenshots of the HTML pages.

INPUT.HTML

DISPLAY.HTML


So that's the end of this coding session.

Of course, that's not a full application, the input.html part doesn't even work. If you type in it, nothing happens, but that's for later.

No comments: