What I Do For A Living – Developer & Designer

When people ask me what I do for a living, I typically respond with “I’m a full stack developer”, “I’m a web applications developer and designer”, or “I’m a web developer and designer”. Most people normally associate that with “he’s a computer guy”, and assume it is make pretty websites, or working on computers. Too often, I am asked to diagnose someone’s latest computer virus. So, this post is for all my friends, family, acquaintances, and Facebook connections.

First off, I’m not a “computer guy” in the sense that I work on hardware. Think of it like this, I work every day on a computer, probably like you, but I don’t build, diagnose or customize computers. That is a computer technician, also known as your friendly IT (information technology) guy.

I am a developer and designer, meaning that my world is all about code, design and graphics, layout, databases, setting up server configuration, command line interface, and a lot more code. Did I mention coding?

I’m not going to dive into setting up server configuration in this post, as I think you can just infer what that means. I will only summarize by saying that it is anything that has to do with making sure the server or computer that the application or website code is hosted on, (served from), is set up with the database(s), structure, requirements, and anything that is needed for the code to build, retrieve data, and render as fast as possible to you on your screen.

Some of my work includes, this website you’re looking at, PrayForNews.com, VintageMX.net, and EBHelp.org. My main full time job includes building internal web applications for AdvisorsExcel.com which includes customer management systems, product calculators, event management applications and more! Most of my recent work I cannot show to the public as it is all privately owned. I love working with 3rd party APIs and building needed solutions for people and their businesses.

Design and UI

I’ll start with the easy stuff that everyone can relate with, and that’s the “design” or “UI”. The term “UI” stands for “user interface”. It is literally what you are looking at on the screen, and whatever is presented to you. For example, this website, or Facebook is a web application, and the UI is all the buttons, ads, menus, pop-ups, graphics and more that you interact with. Design and UI is the finished product that allow the end user (you) to click, drag, drop, press and destroy on the web.

I personally have designed everything from a basic web advertisement, to blogs, websites, administrative tools, customer relationship management systems, e-commerce websites, templates and more in my career. The website you are looking at right now is my design.

The process for me starts typically on a sheet of paper with a pencil. I will layout the basic grid of where I want things to be and then I take that basic outline and structure and create a mockup in a program called Adobe Photoshop. It is here that I create and draw all of my graphics and structure the actually finished look that I want for whatever it is I am building.

After I have created all of my graphics and am satisfied with how it will look on the screen, I then take all of the graphics that won’t be coded, (yes you can code graphics and images), make individual images out of them and save them to the projects image folder. This folder I will reference using code to retrieve the images, also known as assets, that will display in the web browser to you. Remember, this is the easy part, so stick with me!

HTML and CSS

I’ve covered the graphics, layout, design, UI side of things. Now let’s talk about two basic coding languages that create the actual web page the the browser reads, renders, and that you look at and interact with. HTML, which is short for hypertext markup language, and CSS which is short for cascading style sheets.

HTML is a very basic language that creates the skeleton, or the structure and layout of the page, (user interface). HTML is created by a set of “elements” that can be either custom from the developer or from the standard HTML specifications. Below is a very small example of HTML that would render a single image.

<img src="https://www.keganv.com/wp-content/uploads/be-nice-610x270.jpg" alt="Be Nice To People" class="aligncenter size-thumbnail" />

The code above, renders the image below.

Again, this is an extremely basic example. The element in this example is img. You can probably guess that it is short for the word “image”. This is the major factor that makes HTML easy to learn. The alt and class are what is called attributes, or properties for that element. The alt attribute describes the image, which is good for search engines and for screen readers, for those who are blind. The class attribute tells a linked cascading style sheet how to display the image on the page. For this example we want the thumbnail style and the image to be aligned in the center. This makes sense! Below is an example of CSS that would achieve the style results seen above.

img.aligncenter {
    display: block;
    margin: auto;
}

img.size-thumbnail {
    height: 270px;
    width: 610px;
}

There are a ton of different ways I could have styled this image to align it to center, or make it spin, or basically whatever you could think of except for jumping off the screen and becoming tangible. I’m not trying to teach you how to develop here, my goal is to give you a very, very basic understanding with simple examples of the processes involved.

You click here to view all the html that makes the home page for this website! As you can see, it’s a few hundred lines of html, just to make one page. That’s just the code that is necessary to tell the browser how to render the page on your screen. It doesn’t include any of the logic, (server side code), that pulls information from the database, or much of the JavaScript code that runs logic on the UI, or any of the styles that tells the HTML how to display!

Here is a link to the majority of styles that create the layout and look of this website. The CSS is a little messy because it was compiled from a CSS language processor called SASS.

Are you still with me? Good! What follows gets more complicated and truly what I would consider the developing aspect.

JavaScript

JavaScript is a programming language that runs the web. It used to only, or mainly, be what is called a “front-end” language. However, for many years now, it can also be server-side code, or “back-end” code like PHP or Java, which I will show you after this JavaScript section.

JavaScript performs all sorts of logic to manipulate data, save and store data, and manipulate elements and objects in the user interface (the page). For example, JavaScript handles things like loading more data onto the page, without having to refresh the page. Think about when you scroll down on Facebook, how more and more posts continue to show, those are loaded with JavaScript onto the page so you don’t have to wait for a page reload.

JavaScript also handles things like cookies, where data is stored, like your website preferences for example. JavaScript also can make dropdown menus appear, trigger music, animate elements, create HTML templates, really anything on the web.

Below is a snippet of JavaScript that triggers a confirmation box. Again, this is a very basic example, but you get the idea!

Go ahead, click it, you know you want to!

Click Me!

document.getElementById('confirmBtn').addEventListener('click', function() {
    var txt;
    var response = confirm('Press a button!');
    if (response == true) {
        text = 'You pressed OK.';
    } else {
        text = 'You pressed Cancel.';
    }
    document.getElementById('confirmText').innerHTML = text;
});
</script>

Most websites, especially web applications, can easily use tens of thousands of lines of JavaScript provide the logic necessary for the application to function and work properly. That’s right, thousands of lines of just JavaScript code.

Server Side Code (PHP)

There are many languages that developers use for web programming, like Node.js, Ruby, .NET, Java, PHP and more! My main programming language for asking the server for data and interacting with a database is PHP. These languages can also be used to create HTML templates like JavaScript, so that it will populate these templates with data so that manual pages do not have to be created for each URL or page of a web application.

I also write most of all my applications in a style called “Object Oriented Programming”, or “OOP”. Objects in code are basically groups of code that can stand alone on their own and can use other blocks of code to create functionality for the application.

Below is a very simple example of connecting to a database using PHP.

<?php
namespace 'PHP\Database\Connection';

class Example
{
    CONST SERVERNAME = "localhost";
    CONST DBNAME = "dbname";
    CONST USERNAME = "username";
    CONST PASSWORD = "password";
        
    public function connect()
    {
        try {
            $conn = new PDO("mysql:host=" . self::SERVERNAME . ";" ."dbname=" . self::DBNAME, self::USERNAME, self::PASSWORD);
            // set the PDO error mode to exception
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            return $conn; 
        } catch (PDOException $e) {
            return "Connection failed: " . $e->getMessage();
        }
    }
}

With the example above, if the connection fails, it returns a message that gives the developer an exception that explains where and why it failed. If the connection succeeds, it returns an “instance” of the connection to the database. This would allow the developer to update the database, add new entries, delete entries, whatever needs to be done!

Database Languages

The two database types that I mainly use are MySQL and PostgreSQL. Using MySQL and PostgreSQL syntax, I can tell the database to create tables, pull data, update data, delete data, and insert new data. You can think of a database like an Excel file. Each table in a database would be like one sheet of an Excel file. There are columns, indexes and keys that relate to other tables in the database.

Below are a few simple select statements using standard SQL syntax, the example is from Wikipedia.org.

SELECT * FROM T;

SELECT C1 FROM T;

SELECT * FROM T WHERE C1 = 1;

SELECT * FROM T ORDER BY C1 DESC;

Conclusion

Obviously, there are many more topics, categories, code, and such that I could dive into, but I think this should give you a general idea of what it is that I do. Hopefully, you can see that it is not easy, and there is no “button pushing”, at least on my end of things. My job is to make the web easy for you, to make your life better or your job more efficient, so that it’s easier, like pressing a button!

Common Questions

Do you work for yourself or for another company?
Yes. Mainly, I work for another company. I do some freelance and quite a few personal projects including a few web applications and blogs.

How much do you charge for a website or application?
This depends greatly on what you are looking for, just like cars or houses, the price could be from a couple hundred dollars, to hundreds of thousands.

Why is development and design so expensive?
First of all, if you are good at something, you don’t sell yourself cheap. This article should also show you why development is very expensive. It’s not easy, and it’s very time consuming. If you compare what I do, to an electrician, general carpenter, or a plumber, (and I can because I have done all this type of work as well), developing is most often much more time consuming and much more complex than any of the other types of work. However, people don’t hesitate to pay hundreds of dollars an hour to unclog their drains or wire in a light. I do understand that contractors have more overhead, typically with liability and licensing. I should also mention, that I do not charge hundreds of dollars an hour, just fyi!

What do you think about build-it-yourself websites?
If you have the motivation to use one of these types of web applications to build your site, and you are happy with the results, I think they are fine! However, the old saying still rings true, “You get what you pay for”.

Do you have any questions or thoughts? Leave a comment below!