Louisbarnard.com

Making beautiful business applications

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

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 slashdata.co:

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.

GNU LESSER GENERAL PUBLIC 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)!

BSD
  • 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

 

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. Hold on, if the thing is working, why do we need to improve it?

I personally see how behaviour driven development can help in making developers not do unecessary things the client or business do not require.

Defining the outcomes

The question is actually, is it working as expected?

The main question on this is: What do we expect?

What is it suppose to do?

Sometimes nobody actually knows how the thing should work in the first place.

It becomes important in pinning down what exactly this is. Once you know what the system should be doing, we can look at outcomes – what we expect.

An example:

I am currently busy with a a piece of code that needs the user to type in information. This is then saved and used as a contract of sorts between the parties involved.

I need to consider the following outcomes:

  • The user’s information is saved
  • The user is able to retrieve the information

Defining the process

The system can be seen as something like this:

Interaction > System > desired output

Meaning: I do something, the system does something, then i get a result.

An example:

Taking the above example a bit further:

  • The user clicks the save button > insert magic here > The user’s information is saved
  • The user clicks to see an existing contract > insert magic here >  The user is able to retrieve the information

Other factors

But it is never this simple, right? Sometimes we have other factors that could play a role. One of these is the state of the software. This means that the system might react differently depending on what it is busy with in some way.

An example:

A great example of this would be logged in permissions – someone is only able to see/edit/change/delete certain things at certain times. Yet this does complicate the scenario a bit, but following this model, we should have a good overview of all the things that our system needs to cover.

 

Scenario Name State Interaction Outcome
The user clicks the save button  Have permission Attempts to save The user’s information is saved
The user clicks the save button  Doesnt have full permission Attempts to save Error
The user clicks to see an existing contrac Have permission Attempts to get information
The user clicks to see an existing contract Have limited permissions Attempts to get information User can see only certain areas that they have access to – these needs to be specified and used as new inputs here
The user clicks to see an existing contract Doesnt have permission Attempts to get information Error, redirects to homepage
The user clicks to see an existing contract Have full permission Attempts to get information Sees everything

 

 

The user sees only things he has access to

The user logs in and goes to the page to setup the contract > insert magic here > The user sees only things he has access to