Making beautiful business applications


functions(), variables; memory and coffee

maxresdefaultWith my previous post I looked at brackets – all except the rounded ones (). I will in this post discuss variables, memory and functions so that we can understand how the things work together.


We all know that a PC has limited memory. There’s nothing as annoying as seeing this error that it ran into a problem, and it is now no longer working the way we think it should. Often times things go wrong because the computer thinks it knows how much you need, but actually it doesnt. The computer tries to guess this – sometimes not very accurately!

What does this mean in coffee though? Well, think of it like this – you have a small espresso cup. You have a coffee machine. The coffee machine knows how much it should take – or you hope so. Once you start pouring and you dont watch it, it overflows! This is in code is called a stack overflow exception, and is where the website stackoverflow gets its name from.

The computer tries to be clever though. It tries and allocate the glasses as best it can.


In steps variables. Variables are cups  – we tell the computer to leave some space in the memory for something that you would want to place there. The JavaScript syntax for this is simple:


var nameOfSpace;



Note that I am adding the javascript in script tags. This will tell HTML that the things inside is not HTML, but Javascript. The compiler will know how to interpret this. Back to the declaration – var tells Javascript that i am going to need some space in memory. The thing after the var will be the name that I am able to get that piece of memory in code. Remember, I need to remember what I want to allocate space to!

In reality, what is space/memory used for?

Yeah, I thought you would ask this question. This could be used for loads of things. Here are some examples:

  • PDFs, images, files like excel
  • data like your facebook posts, your browser history
  • the thing that you copied and trying to paste (control + C, control + V)

I have some allocated space in a variable. What do I do now?

Action! Well, you can perform some actions on it. Think of it like this: You have all your ingredients for the perfect cup of coffee. You now need to do now is MAKE it! In comes functions (also called methods). Under the hood you tell the PC – allocate some space for a method – I will use it later for something. You declare functions with the following syntax:


function NameOfFunction()




Wow! There’s a lot here. Let’s break it down:

  • The script tag (which is in the HTML will tell the compiler that it is Javascript)
  • The word function tells the compiler what this is
  • The NameOfFunction is something we know how to reference the thing
  • The () tells the compiler if there are any parameters (to be discussed below)
  • The {} brackets tells the compiler the beginning and the end of the function code that will be run (executed) when the function is called

Back to the round brackets.

What are these things called parameters? Think of them as more variables. When you make coffee, you need things to make coffee – the coffee machine needs coffee beans and water as a start. In code we call these things input parameters – I put the parameters into the function, and it would know what to make with it.


function NameOfFunction(coffeebeans, hotWater)
return coffeebeans + hotWater;


This makes a bit more sense – we pass in the things needed to make coffee.

Now that I have the function in memory, how do I call it? Simple! Here are some examples.


var thingToAnimate = "Animate Me!" ;





The rule of thumb is call your function ACTION WORDS. Often time we use things like make. 


In the real world – where do we use functions?

Where do we not use functions?? Here’s a few places we use functions on the “front end”:

  • Validation – did you put your name into the contact form? if not display an error
  • Animations – Make a “subscribe” popup display after x seconds of you landing on a website
  • hiding and showing content/text
  • clocks – make things count down every x seconds

Events also goes hand in hand with funtions more often than not. But that one can be handled in a different post altogether!

What have we learnt?

  • Whenever we write/declare code, computer memory is allocated to it.
  • we can declare variables and functions.
    • variables – var – are things to store data in short term memory.
    • function – function(){} – is a way of allocating memory – yet I am able to call (use/action it ) this code to make it do something like animate, makeCoffee, or validate that a person entered their credit card details.



The box model – and coffee

In the previous article we looked into the basics of a table. In this article we will discuss the box model. This is one of the more challenging things to discuss, so I have my coffee ready. yay!

Image resultImage result for glass coffee cupThe coffeecup

So, you are a stylish person and love awesomely shaped things. You get hold of these amazing coffeecups from a store online. They do all that a coffeecup does and more! They are pretty and functional, and you get the see the coffee through the edge of the border.

HTML box model is similar in this regard. Your normal layout that you see does not do justice to the complexity underneath.

Looking at the image on the right, you are able to see the content in the middle. This is like the coffee itself. The container/cup is made for containing/ holding coffee. Edging on the coffee, is padding – this allows for a bit of breathing space around the edges and is normally specified in pixels (for advanced magical people, you can use things like em’s and points, but why would you do that, except to show off?!).


We also have a border. This is the edge of the cup – the end of the thing. But we are able in HTML to add a colour, border width and style to an element.

REMEMBER! If you set the width of an element, it sets it only of the content!

Having these options allows for people like us – developers and web designers to create beautiful designs with just the right amount of spacing and borders to make any design ‘pop’.


Coffee and Tables

coffeemenuThe table is one of those things designers love – you can work with it like you would in word or excel – create a lot of blocks, and add stuff in there. If you are working with a developer, avoid using tables for layout –  as the developer might stab you to death or jump off a cliff – having to redesign the whole layout.

When to use tables:

Looking at what the magical people from the powers that be says about tables:

The table element represents data with more than one dimension, in the form of a table.

So, the rule of thumb is when you have data that you want to display – a menu with details/data about the type of coffee, description and price (depending on the size). You could try add this into paragraphs and headers, but note that people will point and laugh! It would be almost like you are trying to make tea using a coffeegrinder… #awkward.

Think of a table as a set of information.

Table structure and explanation:


A table has a few elements and a few odd things you need to consider:


This is the basic table element. It tells IE/Chrome/Safari/Firefox that that inside these tags you can expect a table with data.


A table contains columns and rows. For me, as a designer I was thinking the people were nuts – why in heaven’s name would they want to group the stuff by row.


Initially I wanted to style the “Grande Sized Price” column only! These sinners in the initial web world decided to use a coding standard – the way that the data was saved – to dictate the UI. They created cells inside of the table rows. These you are able to style and add the price of your coffee in. In a later post I will discuss how we can only style the totals columns. #cry


If you have headers in your data (e.g. “coffee type:”, “small:”, “medium:”, “large:”), you can add this in a table header. Note the structure for this is within a table row. So each column can have a header giving more info about what data it contains.

Paragraphs, headings and breaks – A coffee discussion


You are lazy and prefer to code rather than spend 10 minutes to prepare your coffee.

Some people reach a point in their lives where they want to explore coffee that is more exotic and hand crafted. They have done the instant coffee and filter coffee, but have a craving for the finer art of the barista and coffee connoisseur.

Fonts, typography and text layout is like the upgrade from instant coffee to a full choice of the barista menu: with coffee you can choose between americano, cafe latte, cappuccino, espresso and so forth, and with HTML text related tags you can choose between headers, paragraphs, breaks, horizontal rules, to name a few.

Understanding that people would like a visual aide to understanding these, I would like to group these into three distinct sections:

Text layout

In Html, these tags are used for telling the browser what is seen as a header, a paragraph and quote. Google is also most interested in this, because it tells them what is the thing that it is reading.

As in the image on the right, we use an “h” to say this is a header, and a “p” to show it’s a paragraph. as noted in the previous blog post here, we use opening and closing tags.

<h1>This is a heading. Big coffee bean</h1>
<p>This is a paragraph. many small ideas/coffeebeans</p>

<p>This is a paragraph. many other small ideas/coffeebeans</p>


This is a heading. Big coffee bean

This is a paragraph. many small ideas/coffeebeans

This is a paragraph. many other small ideas/coffeebeans

You can use up to 6 header tags: h1, h2, h3,h4, h5,h6, but only the one p.

Note that the output is exactly the same for now. Once we have some knowledge on styling we can make that piece green!

Text formatting


Okay, so what’s up with the green bean? Sometimes in a paragraph, we would want to style something differently – but only one word. Or we want to add an image or an icon inside of the text. This happens quite often! Incoming – the SPAN. the span is a really cool way for catering for small changes in a paragraph or header. If you are an Adobe InDesign user, think of it as paragraph styles and character styles. The following does make perfect sense:

<h1>This is a heading. Big coffee bean</h1>
<p><span>This</span> is a paragraph. many small ideas/coffeebeans</p>

<p>This is a paragraph. many other small ideas/coffeebeans</p>


This is a heading. Big coffee bean

This is a paragraph. many small ideas/coffeebeans

This is a paragraph. many other small ideas/coffeebeans

We would still be required from time to time to make some enhancements to our layout – things like bold, italics, top and bottom scripts: superscript, subscript: subscript.

<i>i stands for italic</i>

<b>b stands for bold</b>

coffee<sub>sub coffee</sub>

coffee<sup>sup coffee</sup>


i stands for italic

b stands for bold

coffeesub coffee

coffeesup coffee

these would be used in a normal paragraph:


Text spacing

This sections is about sections – sometimes you want a bit more spacing in your text, or all a line to split different sets of content. You can do this with elements like break tags and horizontal rules.

these are difficult to explain. So here goes: the break tag is like the shift + enter button on your keyboard. It breaks to a new line, but doesn’t create a new paragraph altogether. Sometimes in paragraphs you want it to be part of the same paragraph.

the horizontal rule adds a line to split content. Say, you are ranting about Arabica coffee, and you want to now rant about Robusta coffee. It might make sense to not to add a new header.

I love arabica
I really love arabica

<hr />

did I mention vietnamese robusta is amazing?


I love arabica
I really love arabica

did I mention vietnamese robusta is amazing?

HTML Tags and coffee – Tags closing and nesting

If you want to learn about HTML, you need to understand some core concepts about the language. I will here discuss a few, using some pictures I have found online.

HTML is a layout language – it consists of tags, like so:



This would correspond in coffee terms to something like the big image here =>

You need to think of HTML as a set of containers. These containers will make magical things happen to anything that is on the inside. For now, it could make things italic, bold, explain to the code and the browser that it is a paragraph or a header.

Most tags require you to close it. Think about it – if your coffee cup does not know where to start and end, where will your coffee end…? Quite possibly at a restaurant with bottomless coffee!

Nesting: coffeecups in coffeecups and coffee in coffeecups

But on a more serious note – most layout containers need you to specify the end and the start. There’s a select few that does not have start and end tags, as it would be a bit silly – these will be discussed in a future blog post.

I do want to explain something here about layout though:


Does this picture look awkward? It seems like the coffee had some bad experience in Photoshop! It seems like someone tried to merge these coffees into each other, but the cup containers’ start and ends got messed up. In Html, this is very important: you cannot have a situation like this:



Yet, you could have a situation like this:



or this:


or this:


These are allowed. Remember – HTML is all about layout. You want to define what goes into what – coffee goes into the coffeecup, coffeebeans could go into the cup for the photo, but also into the coffee grinder. Now that you understand the basics of HTML layout, you’re ready to go make another delicious cup of coffee.


Coffee: a parable between graphic designers and web designers

I have recently been helping a friend of mine with learning the basics of code. I think the main problem recently has been the issue of where to start. Let’s be honest – coding is difficult to learn. On face value it looks like quick magic – yet the people that think this is magic loves to use the final product. As long as it works, they are happy.

My friend I am teaching has a (graphic) design background, as do I. There’s a few things in the thinking that hinders and helps us to come to a point of understanding.

Just a friendly note – there’s no single interpretation of these job titles, and I am explaining it in my experience.

Graphic design thinking vs front end HTML designer thinking

Graphic design thinking is an iterative explorational thinking. Think of it like loads of coffees – like LOADS of coffees

Graphic design thinking: explore, explore explore

Graphic designers tend to think about things like this: if one solution is not working, scrap everything and start over. It’s similar to making coffee – if they tried the espresso,, but they cannot seem to get it right, maybe the latte will do. Both of them will give the same caffeine outcome, right? This way of thinking is important in doing general design. You sometimes need to explore, until you find a few solutions to show to the client. On the original solution, they will then start building the brand identity, corporate identity and brand applications.

Front end developers look at it a bit different –

View More:

A web designer understands the limitations of the web browser (they understand HTML and CSS – some layout coding). They are the people bridging the gap between the graphic designer and the developer. They understand that the web is simply the cup in which the coffee goes. The flavour and colour of the coffee might be different, but it’s still coffee. The process that web designers work is a lot more step-driven. Think of it like making coffee. They understand what is needed, and have a formula to get the desired layout – even if the layout is different everytime.

Web designers need to understand how web layout works.

To move from graphic design to web design, there’s a few concepts you want to explore. In my next blog post, I will look into coffee and coding structures – Specifically Html and Css structures.

The Open Source Scare

As everyone knows there is this thing going around of people copying. They copy each other by the way they dress, what is fashionable to eat (I love sushi), and the codey they need to develop. 

Some even say we have a right to copy: it’s called copyright

In coding this is a fairly complex thing… Continue reading

Behaviour Driven Development

I recently went to the developer usergroup at Microsoft in Bryanston, Johannesburg. Joshua Lewis (twitter account here, blog here). He was talking about a model in which we think about how to improve a system that is working. Continue reading

The Open Source Scare

As everyone knows there is this thing going around of people copying. They copy each other by the way they dress, what is fashionable to eat (I love sushi), and the codey they need to develop.

Some even say we have a right to copy: it’s called copyright

In coding this is a fairly complex thing… As seen in the article by Joel Spolsky, where he looks into those sideline projects, we can see some issues like: who really owns the code? In retalliation to many of this, the open source community was born.

Defining open source

Google defines open source as:

…denoting software for which the original source code is made freely available and may be redistributed and modified.

The idea here is that the source code is open, and anyone can go in and change it, or look what is going on inside. It DOESN’T mean free though, but many are free,

Open source concerns

Some of the concerns from the dev community has been things like:

  • we are telling students from universities to write code and give it away for free – thus we are giving away jobs and intelectual property.
  • But I want to do such a simple task, and now i need to reinvent the wheel.

But i need that component

And this is where the issue kicks in. The problem is that we ‘need’ to get that thing. And it is free when i hack it. Or, on the other hand, the component with the sourcecode is available for ‘free’ online.

It all sounds good and well, but we should not forget who owns the code, or what license if comes with. There has been quite a few cases where we have seen we need to be exceptionally careful on what code we use where.

As mentioned by

n the Sitecom case (2004) Welte identified his own source code in the binaries for Sitecom´s Network routers, which Welte had licensed under the GNU GPL v2.0 but Sitecom had not made the source code available or referenced the GNU GPL v2.0, both of which are a requirements of the License. The District Court of Munich granted Welte an injunction against Sitecom Deutschland GmbH whereby Sitecom was prohibited to distribute the products, until they were compliant with the GPL terms. Sitecom appealed but lost and posted the terms for GPL on their Web FAQ for the router.

Some cases were reported where companies had to open source ALL their code for violating the terms and conditions of the source code!

Here are some information on the most common licenses:

A summary of some licenses

GNU General Public License GNU General Public License
  • Copy it as many times as you like, on as many machines as you like
  • If you want to SELL your software, you need to give the clients a copy of the license, saying they can find the open source piece somewhere else for free.
  • If you modify the open source code, go ahead! BUT the code needs to be RELEASED UNDER THE SAME LICENSE

An example would be if we use a dropdown with this license, that we give clients a link to the license, and tell them they are able to get the dropdown somewhere else for free – but obviously our software is not ALL free! But hold on, you also need to open source your code here! So be careful if you use a control code with this license.

  • This license is like the previous one, but allows people to use these libraries in proprietary

With this license you are able to use your dropdown comercially and in proprietary software… remember to let your client know that you are using it and give them the license (even if it is through a link)!

  • You can only attribute the contributers by explicit permission

The BSD license is similar to the GPL, but you need to make sure that the copyright notices are still in the final product.

MIT Licenses
  • Sell it, rent it, sub-license it, or do whatever with it
  • Change and modify it
  • Include the copyright license agreement of the MIT license

More reading

Smashing magazine

Choose a license