The Programming Pedestal

 

I remember like it was yesterday when I had one of my first encounters with a line of code. Other than the lines of code that you would see when you turned ON the Operating System of the computer.

It was when I created a MySpace profile account. MySpace was the social media platform that dominated at that the moment. The platform allowed users to customize their profiles through code.

For a lot of people, that flexibility introduced them to the world of web development but for me, it was the opposite. I got instantly intimidated.

I remember “Googling”, or at that time MSN or Yahoo, articles with code examples that explained how to customize your MySpace profile. The articles were too technical and confusing for me to follow.

Youtube was not available therefore, I could not search for video references easily. And if you downloaded something through Kazaa or Limewire, you were risking a computer infection with a fix that would cost you a lot of money.

So, I put web development in a pedestal. I categorized it as something that only a person with formal education in the subject could understand. Eventually, I moved from MySpace to Facebook because of how easy it was to edit your profile.

Looking back, I realize that two factors that weighed in on my coding mental blockage when I tried to code at that moment:

  1. My goal was not to learn how to code so I did not want to learn to code. I just wanted to change my My Space profile so coding was not my interest.
  2. Not having the right resources to learn. Now there are more online resources written for people that do not have a computer science or computer engineering background, hence they are easier to understand.

Now, having my mindset committed to learning to code, that’s exactly what is happening. I am learning to code. Programming has been officially taken down from the pedestal.

Where to start?

Surely you must have created a user account for some service like Netflix or Amazon, or to check your bank account online. Think about the basic process of creating an online account.

Usually, you start by filling a form where you have to provide your name, last name, and password. After filling the required information, you click (or press Enter on your keyboard) on a button to submit your information to a database.

If the create account process was completed successfully, you receive a message that confirms that the account was created. So, when you come back to the website, and log in again to your account, the information you provided will be available for you to delete or edit.

The web development world can be subdivided into two (2) principal areas: front-end and back-end.

Front-end

A front-end web developer is the one that designs and implements the frontal part of the web product. The frontal part is where the user sees, or interacts with the web product. The buttons, menus, colors, text styles, size, layout, animations, and screen functionalities are some of the examples of the things that a front-end could code.

The three (3) programming languages that can help you launch a career in front-end web development are Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and Javascript (JS).

HTML is the standard markup language that describes the structure of the web page. It denotes semantically the appearance of the document. In other words, it is the language that denotes the texts, buttons, menus, images, videos, and other elements on the web page.

A button written in HTML would be denoted as:

<button class="button-example" id="exampleBtn" type="submit">
    Create Account
</button>

Styles like colors, size, or animations could be added to the web page by programming in CSS. Changing the background and text color of the button previously denoted writing CSS would be like this:

button.button-example#exampleBtn {
    background-color: black;
    color: white;
}

Web page functionality like managing the Submit button, or opening a computer file system so the user uploads a document or picture, in the actuality is commonly programmed in JS.

A function written in JS for submitting information to your local storage would look something like this:

function setState(index) {
    localStorage.setItem(`exampleItem${index}`, 
    counters[`itemCount${index}`]);    
}

Going back to the user account creation example, a front-end developer was the one who design and programmed the electronic form that you observed. As a user, you interacted with the form by using your keyboard to write information on spaces provided and mouse to click the button to submit your information.

Back-end

Once you click the “Create User” button, the information you provided as a user is stored in a database, located on a server, so you can retrieve it when you log in again. If you have worked with Google Sheets or Excel, imagine that the database as a Google sheet or excel file and your computer is a server, but your computer is located far away (as a real server).

A backend software developer designs and implements the web product’s database and the functions that allow the server to receive and store the information in the database fast and in a secure manner.

Also, the back-end developer designs and implements the processes and functions that extract information from the database and the speed in which is presented to the user.

NodeJS, Python, and PHP are some of the programming languages that are used to develop the backend of a web-based product. These languages are responsible for the interaction between the webpage and the server.

Here is an example from the Standard Python Library, that demonstrates a code in… well… Python.

# File:whichdb-example-1.py
import whichdb
filename = "database"
result = whichdb.whichdb(filename)
if result:
 print "file created by", result
 handler = __import__(result)
 db = handler.open(filename, "r")
 print db.keys()
else:
 # cannot identify data base
 if result is None:
 print "cannot read database file", filename
 else:
 print "cannot identify database file", filename
 db = None

Borrowing from my blog theme code Bootstrap for WordPress, the following block is an example of code how PHP would look:

<h1 class="example-title"><?php the_title(); ?></h1>

Finally, this example from NodeJS.org can give a taste on how NodeJS looks like:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Consider your likes and dislikes

Some programmers specialize in front-end development, while others specialize in back end development. Also, there are Full Stack engineers that know how to develop software front and back end.

You can separate time to learn whatever you want, but when you are starting programming, you should only focus on either front-end or back-end development. Not both at the same time.

There is too much to learn in both areas so you will get overwhelmed fast if you see articles from both sides. If you get overwhelmed, eventually you will feel discouraged. You won’t learn a hard topic like programming being discouraged.

When deciding which area of web development to start with, you should consider starting within an area based on your likes and dislikes. Remember that you are going to be spending long hours reading, trying and failing, which can result in getting discouraged very easily.

What do I mean by considering your likes and dislikes?

If you are someone that needs to visualize concrete things when planning, I would recommend you to start learning programming languages that work with the front-end side.

On the other hand, if you like abstraction and data management, you should start with programming languages that develop the back end side of the web product.

I preferred to start learning programming languages from the front-end side. I acknowledged that is easier for me to learn. Also, is less frustrating for me if I visualize things immediately.  It takes time and a lot of patience but if the motivation is right, you can do it 💪.

I wrote this article that has coding resources that have helped me learn to code front-end on my own. Hopefully, the article helps you to start somewhere.

Did I leave you wondering which was the programming language that was so intimidating that my adolescent self put coding into a pedestal? It was HTML.

By the way

I wrote this post while listening to the Groove Salad playlist on soma.fm I recommend this online station if you want to listen to some electronic and upbeat music but want to concentrate.

Have you ever put something on a pedestal? Are you willing to take it down?

Leave a Reply

Your email address will not be published. Required fields are marked *