Making beautiful business applications

L0u1sb4rn4rd

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.

Memory

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.

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

Variables

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:

<script>

var nameOfSpace;

</script>

coffee-flow

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:

<script>

function NameOfFunction()

{

}

</script>

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.

<script>

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

</script>

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.

<script>

var thingToAnimate = "Animate Me!" ;

MakeContactUs();

MakeCoffee();

MakeAnimation(thingToAnimate);

</script>

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.

 

 

brackets and coffee – a discussion about encapsulation and syntax for CSS, Javascript and HTML

As discussed in my previous posts, having a good foundation for understanding the layout language HTML, we are now able to move on to actions and styling – CSS and Jacascript. Before we do, here is a short summary of what we have learnt:

  • HTML is a layout language – it’s about the placement of your coffee in the cup
  • For all layout related things, we need an opening and closing tag – The coffeecup needs to know where to start and when to end
  • Tags are nested – like cups inside of one another
  • There are layout tags, typography (font related tags), and some others we have not covered (they are a bit advanced)

so, now I think it important to talk about encapsulation and brackets. When I talk about encapsulation, I refer not to the coding principle as much as to the idea of grouping things from a syntactical level.

Defining syntax in normal language:

syntaxError

Think of syntax as grammar. If your grammar is weird, people might think you are insane or illiterate. Your computer will break as well if you do not speak its grammar! So here is some terminology things: When you speak to the computer in code, it has a language syntax/grammar. The interpreter (sometimes referred to as the compiler) tries to make sense from what you are saying. If it cannot understand what you are saying, it probably will throw a syntax error

What I mean by that, is that we use certain things (brackets) for grouping and splitting the code in a way to help up understand what is going on. Under the hood the computer translates this into 0’s and 1’s. But we don’t have to know how or anything. This is called syntactic sugar.

In language we use full-stops to group our information in sentences. Sometimes we even use new lines for new paragraphs! In coffee we use cups to limit the flow of the coffee, and sometimes a lid that limits the place where the coffee flows out of. Most languages has ways in its syntax to limit statements (sentences). Most of the layout languages (of which HTML is one and XAML is another) and styling has a start and closing thing.

As discussed previously, HTML has opening and closing brackets. This tells the compiler when to start and when to end  – it’s like the coffee machine that knows when to start and stop pouring milk. CSS has a much shorted way – it uses mini brackets, called curly braces. Javascript has a few, as it is able to do loads more

Brackets

<>

We have come across these brackets before, haven’t we…? These brackets are for HTML, XAML and XML. These are called tags. Here is an example:

The coffee is what the tag is called. The slash “/” tells the compiler that this is the closing thing. If you dont add the slash in, it thinks you are creating another coffee!

<coffee> </coffee>
{}

Squirly brackets/braces are used in CSS and Javascript. They are used to encapsulate (group) a set of data.

In CSS (the styling language of the web) these are used to tell the compiler starting and ending locations of the styles for the specific element (called a rule). Look at the below code –  we have two rules that are encapsulated each with their own styles

.coffeecup{
color: brown;

}

.milk{
color: white;

}
[]

Square brackets are used in more codey languages than layout and styling languages. This is used to show a list/group of something. In uber codey language this is called an array. You are able to add and take things out of an array. I could have a list of all my coffee ingredients. A best use case in cofee would be something like this:

&nbsp;

var coffee = ["milk", "instant coffee", "hot water", "sugar"];

The brackets tells the compiler that this is the start and the end of an array. the semi colon is like the fullstop. It tells the compiler that this line is now complete. It’s like a sentence [where i have some stuff, but the fullstop ultimately – yes, altumately – closes the sentence off].

()

Rounded corners will be done in the next post, as you need to know a bit of background in understanding this. :)

 

So, in a nutshell – brackets are there for opening and closing things for the computer. It tells them where to start and when to stop understanding things.

 

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:

coffeeRow

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

<table></table>

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

<tr></tr>

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.

<td></td>

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

<th></th>

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

coffeetext

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>

Result:

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

Spans

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>

Result:

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>

Result:

i stands for italic

b stands for bold

coffeesub coffee

coffeesup coffee

these would be used in a normal paragraph:

boldCoffee

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?

Result:

I love arabica
I really love arabica


did I mention vietnamese robusta is amazing?

HTML Tags and coffee – Tags closing and nesting

coffeeStartAndEnd
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:

 

<coffeecup></coffeecup>

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:

mergedCoffee

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:

 

<coffeecup>
<coffee>
</coffeecup>
</coffee>

Yet, you could have a situation like this:

 

<coffeecup>
      <coffee>
      </coffee>
</coffeecup>

beansinside
or this:
 

<coffeecup>
      <coffeecup>
      </coffeecup>
</coffeecup>

or this:
 

<coffeecup>
      <coffeebean>
      </coffeebean>
      <coffeebean>
      </coffeebean>
</coffeecup>

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.

<div><span></div>

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: http://asiacrosonphotography.pass.us/spearheadslowhat

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