Howto code part 1: Learning to learn

Idea to this article series came when I tried to help someone at some programming course. This article is about programming in general, and some examples.

1. Shutdown computer, and write the recipe with pen and paper

Computer works by making series of steps, like when you are designing and cooking new kind of food, that is your special mix. You need to plan it first, or it does not taste good.

Steps need to be as small as possible. So small steps, that a small child can understand. We are making birthday cake, and it’s going to be fun. It’s a new cake, and it’s going to be delicious. Yes, it takes some time. We need to design how it looks, what it has inside and where, and how it works step by step.

Most important is to try to do these steps yourself. You are learning to code. It’s like you are learning to cook, walk, drive bike, or anything. Try to do most of the steps yourself, so that you learn that new programming language, and you can do the work. Relax, try to think, try alternative ways how to make it work. Don’t be in a hurry, this does take time, like cooking takes time, the end result is worth it.

Yes, coding takes some time. The point is not to memorize everything, nobody does that. You need to read enough documentation and code to understand how to get to the next step. No one can remember all syntax and all steps of everything. You can only remember couple things in your head, and soon you will forget it. You should write comments to that code, your recipe, and under each small recipe step write the code that does that small step. That way you can read later how it works, because you will forget it how that code works. Code comments are for everyone using that code, because written code is read many times later.

2. Example 1: Word game.

1. General idea

  1. Quess a word: Someone went to shop to get ingredients for cake and did buy _________ and ______ for making a cake. Alternatives of answer: flour, cream, bubble gum, shoes.
  2. Game checks answer. For every correct answer, player gets one point.

2. How it should look (UI design)

  1. Draw to paper how it should look at each step. Text, images or image names, using very simple line drawing.
  2. What text, images, etc should be displayed first.
  3. Draw arrows where user should type text or click.
  4. Draw and write next screen what happens next, if answer is correct.
  5. Draw and write next screen what happens next, if answer not correct.
  6. Draw results screen, etc all possible what can be shown.

3. Write recipe, how the code should work step by step

You can use any words to write recipe, because you will change that recipe to be more exact as time goes on. Recipe will be in comments in small steps, and below each step is small amount of code that does that step.

Recipe example (algorithm) in small steps:

  1. There is text file questions.csv. CSV means comma separated values. Example: 
    question1,correctword1,correctword2,wrongword1,wrongword2
question2,correctword1,correctword2,wrongword1,wrongword2
  2. Read fist line of questions.csv.
  3. Separate each comma separated value to different variable. Variable is something that has a name and value. For examle, cakename=”birthday cake”, correctword1=”flour”, strawberries=10.
  4. Replace in text question1 word correctword1 with text _________
  5. Replace in text question2 word correctword1 with text _________
  6. Ask question1 by printing question to display.
  7. Check is the answer1 same as correctword1. If yes, add one point. Print result to screen.
  8. Check is the answer2 same as correctword2. If yes, add one point. Print result to screen.
  9. Ask next question at next line, goto step 1.

4. Find out where programming language documentation is

Google search for programming language documentation. This is most important. Example search:

  • ___programming_language___  documentation
  • ___framework_name____ documentation
  • ___framework_name____ directory structure
  • ___database_name____ documentation
  • ___something____ GitHub. But you can only use that code if there is some license. You can search what license means at https://tldrlegal.com what license requires, for example if you use it, you need to include also that license text to your code, and what else is allowed. If there is not any license that gives enough permissions, you can not use the code, it’s propietary (closed source).

In documentation, you can find this kind of info:

  • How it’s possible to do something to text, images, files, etc
  • How to search something
  • How to download file from website with code
  • How to upload file with code
  • How to use ready-made code library to do something big with just couple lines of code.
  • You can search documentation about something you want to do with that programming language code.

Also Google search for code examples. But some of the results can be wrong, or old, or does not work with newest code framework, so it’s still best to use official documentation as mentioned above. Some example Google searches below:

  • how to read csv file in __programming_language_name___
  • how to read from __database_name__  using __programming_language_name___
  • how to write to _____ using  __programming_language_name___

4. How to write code

  1. Take first step of recipe. Write down all steps you have done when you try to make it work. You are following some path in cyberspace labyrinth to get to destination. Sometimes when some way does not work, you need to go back a little and try a different way to make it work. Or you need to try all possible ways to make it work. Also remember to eat, sleep, etc. Take some breaks for example every 30 mins stretching. It’s easy to get lost in cyberspace, try to find your way back too.
  2. Try small amount of new code, and try to make it work. Make different code directories with names about what each small part of code does. And then combine those code parts to your main code.
  3. If you don’t find how to code some step, you need to divide that step into much smaller steps, so small that there is some code example for that, trying to explain to computer so that it can do that. Computer can only do exact steps.
  4. It’s normal that code is wrong. Just keep fixing it. When you run code, it usually says where error is. Copy that error to Google search, usually there is explained how to fix it. If you have time, try different ways to search Google for answer, so you would not need to ask anyone how to code something.
  5. If you are in a hurry, or can’t find how to fix it, try to find some forum or mailing list or chat for that programming language, framework, database, or GitHub issue. Try to search is there any answer to it already. Try to find some correct place where to ask it, because if you ask at wrong place, they probably don’t know answer. If you find correct place, there you can ask question how to do something. Usually someone answers how to do it, or tells where is documentation or some other place where to find more information. If you have bug, you will be asked to try to make smallest code example where that bug happens. Yes, any code can have bugs somewhere.
  6. When asking questions, try to ask
  7. After some time of fixing, then your code works. It feels great. You did it ! You can also read what some newbie Wekan contributor did feel after adding features to Wekan.
  8. And after you get feedback about your code, there is more bugs and feature request. And you keep fixing it and adding features. And that is what programming is all about.

3. Example 2: Adding search to Wekan Admin Panel People page

General info about installing and using Wekan

https://github.com/wekan/wekan/blob/master/README.md#requirements

https://github.com/wekan/wekan-snap/wiki/Install

Default: node port 3001, mongodb port 27019
https://github.com/wekan/wekan-snap/wiki/Supported-settings-keys

https://github.com/wekan/wekan/wiki/Settings

/var/snap/wekan/common/Caddyfile
https://github.com/wekan/wekan/wiki/Caddy-Webserver-Config

https://github.com/wekan/wekan/wiki/Adding-users

https://github.com/wekan/wekan/wiki/Backup

Coding info for Wekan

Also see all repos at https://github.com/wekan

  1. Source Linux/Mac/Windows Subsystem for Linux Ubuntu
  1. https://github.com/wekan/wekan/wiki/Directory-Structure
  2. https://github.com/wekan/wekan/wiki/Developer-Documentation

Snap Linux

https://snapcraft.io
https://docs.snapcraft.io/snap-documentation/3781

wekan/snapcraft.yaml
wekan/snap-src/
wekan/snap/
wekan/releases/release-snap.sh

Docker Linux/Mac/Windows

https://github.com/wekan/wekan/wiki/Install-Wekan-from-source-on-Windows
https://github.com/wekan/wekan/wiki/Docker

wekan/Dockerfile
wekan/docker-compose.yml

Sandstorm / Linux

wekan/releases/release-sandstorm.sh
wekan/sandstorm.js
wekan/sandstorm-pkgdef.capnp

How to add search to Wekan people page

As mentioned at https://github.com/wekan/wekan/wiki/Developer-Documentation

Wekan has find.sh script for finding code at non-generated code. So first we find code for searching:

cd wekan
./find.sh search

Yes, this does bring a lot of code. But there I did also find more exact search term:

cd wekan
./find.sh js-search

This does show .jade and .js files where existing Wekan search code is. CSS is at .styl files. So this in then copied to somewhere at wekan/client/components/settings/ where Admin Panel is, to show search input fields at .jade file and have search code at .js file. So today 2019-04-19 Wekan contributor Akuket did ask about this search feature, so I did tell how to find this code so that Akuket then implemented search for people and added pull request to Wekan.

BR,
xet7