Hazelong.com

Megan Fox painting

Merry Christmas!!
This is a painting I did in the Brushes app, iPad recently. Took me a few days to finish it up. I wish that there is a brush setting in the app that minimizes it’s own size at the very end of the stroke.

It was a fun project!

And this here is the time lapse of how I painted Megan Fox.

Happy New Year!

Guide to HTML5 new tag elements

HTML5 includes a whole new load of tag elements that are more descriptive compared to HTML 4.01. I have been itching to try the new tag elements and see what it offers in our browsers today.

This is the first part of a three parts article, covering only the Structure Tag Elements.

So here are some examples of how HTML5 attempts to solve HTML 4.01 problems.

Structure Tag Elements

1. Header, Nav, Article, Section Aside, Footer

<div id="header">Header content here</div>
<div id="menu">My Menu
	<a href="home.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a>
</div>
<div id="article">Articles/Blog here
  <div class="chapters">
    <h3>First chapter of the day!</h3>
    <p>Contents of chapter</p>
  </div>
  <div class="chapters">
    <h3>Chapter 2</h3>
    <p>Contents of chapter</p>
  </div>
</div>
<div id="sidebar">Sidebar here</div>
<div id="footer">footer here</div>

Old way of doing things

<header>Header content here</header>
<nav>My Menu
	<menu>
		<a href="home.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a>
	</menu>
</nav>
<article>Articles/Blog here
 <section>
    <h3>First chapter of the day!</h3>
    <p>Contents of chapter</p>
  </section>
  <section>
    <h3>Chapter 2</h3>
    <p>Contents of chapter</p>
  </section>
</article>
<aside>Sidebar here</aside>
<footer>footer here</footer>

Cleaner and more descriptive approach in HTML5

Screenshot of example.

2. Hgroup

<h1>Category</h1>
  <h2>Clothes</h2>
    <h3>Pants</h3> 

Old way of doing things

<hgroup>
  <h1>Category</h1>
   <h2>Clothes</h2>
     <h3>Pants</h3>
</hgroup> 

Using the <hgroup> is easier for styling when it comes to a group of headings. Interactive menus can also be made this way. For example, click on Category reveals Clothes.. etc

Screenshot of Example

3. Figure, Figcaption

<div class="diagramContainer">
  <img src="diagram.jpg" alt="Pretty Girl"/>
  <span class="caption">Figure 1 above shows a picture of a pretty girl</span>
</div> 

Old way of doing things

<figure>
  <img src="diagram.jpg" alt="Pretty Girl"/><!--you can also insert more than one images-->
  <figcaption>Figure 1 above shows a picture of a pretty girl</figcaption>
</figure> 

Figure and figcaption can be used for diagrams & illustrations.

<figure>
  <blockquote>Sarah says, "I love this code!"</blockquote>
  <blockquote>Jess says, "But it is awful..Are you sure?"</blockquote>
  <figcaption>A dialogue between Sarah and Jessica.</figcaption
</figure> 

It can also be used code snippets or reference in an article.

Screenshot of example.

4. Details & Summary

<div class="details show hide">
	<h2>Spoiler here : Click to show spoiler</h2>
	<p>Leaked photos of The Dark Knight</p>
</div>
<!--insert script to enable show hide for the above element-->

The closest example that I could think of is the Show/Hide spoiler tab in forums. This is how it’s usually implemented.

<details>
	<summary>Spoiler here : Click to show spoiler</summary>
	<p>Leaked photos of The Dark Knight</p>
</details>
<!--insert script to enable show hide for the summary element-->

It can be achieved in HTML5 using the details and summary tags. The <summary> is expected to be the controller for showing the contents within the <details> element but it is not implemented yet so far.

Demo. Click on the yellow tab to see it in action.

5. Time

We are open from <span class="time">8 am</span> til <span class="time">5 pm</span>

The old way of doing things

We are open from <time>8 am</time> til <time datetime="5.00 pm">late</time>

HTML5′s new time markup. Note that date/time must be included within the element OR in the datetime attribute.

We are open from 8 am til late

Demo

6. Mark

I can study better when I can <span style="color:yellow">highlight</span> my notes. 
I don't mind <span class="highlight">highlighting the whole sentence.</span>

Highlighting words the old way involves calling a span, adding a style and defining the colour. The call for inline styling or classes doesn’t produce very pleasing source codes.

I can study better when I can <mark>highlight</mark> my notes. 
I don't mind <mark>highlighting the whole sentence.</mark>

In HTML5, it is much easier and cleaner to do so.

I can study better when I can highlight my notes. 
I don't mind highlighting the whole sentence.

Demo.

7. Wbr

<p style="word-wrap:break-word">Iamaverylongwordlikeanreallyreallylongurlorsomethingitalwaysbreakmylayout</p>

Certain words like links can be really long and they destroy layouts. The word-wrap property in CSS3 can fix this.

<p>Iamaverylongwordlikeanreally<wbr>reallylongurlorsomethingit<wbr>alwaysbreakmylayout</p>

In HTML5, you can insert <wbr> between the letters to tell the browser that it is ok to break the word at that particular point. The example above will result in the following if the container is not wide enough for the word:

Iamaverylongwordlikeanreally
reallylongurlorsomethingit
alwaysbreakmylayou

8. Meter

<h2>Rating</h2>
<p class="rating">3 out of 5 stars</p>

The old way of doing things.

<meter min="0" max="5">3 stars</meter>
<meter>3 out of 5 stars</meter>
<meter>60%</meter>
<meter min="0" max="5" value="3"/>

In HTML5, the <meter> tag is used for measurements such as ratings or counts. The value must be defined either in the attributes or within the elements. You can also define which value is regarded as high/low. For example, 1st prize til 5th prize would mean that the value “1″ is the optimal high value.

9. Progress

The animation is loading :
<span class="preloader">
	76% 
</span>
<!--insert script for preloader-->

Making a preloader involves making more divs, spans and putting in a script to run the thing.

The animation is loading :
<progress max="100" value="65"/>
<!--script for preloader-->

With HTML5, the syntax is cleaner when it comes to making a progress bar.

10. Command

<!--link buttons-->
<a href="#" onclick="alert('This is a link button')" class="button">Click me</a>

<!--radiogroup buttons-->
<input type="radio" name="group1" value="Milk">Milk<br>
<input type="radio" name="group1" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter

<!--checkbox buttons-->
<input type="checkbox" name="option1" value="Milk">Milk<br>
<input type="checkbox" name="option2" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter

<!--insert script to use any of the buttons above to control elements in other forms elsewhere-->

Sometimes when you have a form elsewhere in your website, like for example : your sidebar, you might want to control it from another section, like for example : one of the menu links. Once the code is built up and the website is launched, other people who sees the source code might not know that certain buttons are for controlling forms elsewhere in the page.

<menu>
	<!--link buttons-->
	<command onclick="alert('This is a link button')" class="button">Click me

	<!--radiogroup buttons-->
	<command type="radio" radiogroup="group1" value="Milk">Milk<br>
		<command type="radio" radiogroup="group1" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter

	<!--checkbox buttons-->
	<command type="checkbox" name="option1" value="Milk">Milk<br>
		<command type="checkbox" name="option2" value="Butter" checked onclick="alert('Clicking on this can select Butter in another form')">Butter
</menu>

The <command> solves the problem. Note that commands must be nested in <menu> in order for them to be visible. It gives alot more meaning to sourcecodes, for example if I have a article editor menu that have links to create headings, links, images, tags and paragraphs; using <command> is a more meaningful syntax than using <a>.

Ruby, rt & rp

When I first saw this, I thought it has something to do with the programming language, Ruby and I was ecstatic to see what they offer in HTML5. Turns out I was wrong. Ruby is actually a short annotation for some base text. It helps phonetic languages like Chinese, Japanese & Korean to have pronunciation guidance in the website.

Surprisingly, it was supported in IE 5+ before and also incorporated in XHTML 1.1 but no browser supported it yet since then.

<p>The <b>Grass mud horse</b> — <ruby>草泥馬<rp>(</rp><rt>Cǎo Ní Mǎ</rt><rp>)</rp></ruby> — is … characterised as “lively, intelligent and tenacious”. However, their existence is said to be threatened by the “river crabs” — <ruby class="styled">河蟹<rp> (</rp><rt>héxiè</rt><rp>) </rp></ruby> — which are invading their habitat.</p>

The way of implementing Ruby is like above. HTML5Doctor have more information on this topic.

The Grass mud horse — 草泥馬(Cǎo Ní Mǎ) — is … characterised as “lively, 
intelligent and tenacious”. However, their existence is said to be
threatened by the “river crabs” — 河蟹 (héxiè)  — which are invading
their habitat.

Demo

An article wouldn’t be complete without a disclaimer : I am listing the following to help myself learn and remember HTML5, there may be mistakes which you are welcomed to correct me.

Rewiring the New

Hey you.. thanks for reading.

It’s been some time. I miss your comments and reads. The past few months I have been bouncing left and right from idea to idea, job to job. It is kinda bad cuz I keep buying a new domain everytime I have a new idea. As fickle as I was, I woke up.

When I graduated from uni, I was swamped with interviews with 3D companies. That was my first wake up call. I knew I couldn’t spend the rest of my life doing 3D and I had no way of getting out of the industry. So I overacted and ignored all calls.

This time, I have made a solid resolution not to accept anymore freelance jobs for web design. I imagined myself in the future before, and the future me is not a freelance web dev. I have to stop now and focus on who I want to become.

For clients or future clients, I will help you out with your blog/website. But for no charge. This also means I will most likely say ‘No’ unless it is a huge emergency or an interesting bug. Other than that, my advice and consultation is free. My portfolio is also off the site and will be ported to Behance Network. I am really happy I got accepted into Behance.

Shop is also finally closed. No more orders. I am considering letting you guys know where I get my stock, cuz I seriously have no time to maintain the shop.

What’s next?

Its pretty hard to answer this question as I been breaking my promises over n over again. Stating things I will do but they never happen. What I can do is predict the chain reaction from my recent actions.

Before the year ends, I definitely will wrap up my last job. Check it out if you haven’t. I am still fixing the ie7 issues. And get this blog properly coded so that I can go to sleep each night without a thorn in my brain reminding me how awful my blog is.

I been reading alot, joined a really awesome forum for web devs. This means I will be posting more often in Tumblr and more tutorials here as well. I feel more connected to the web community and I want to contribute back. (Since I been leeching knowledge and learning so much from Google)

I also have a great urge to belong to a work/hobby community. So I might be contributing to other people’s projects for the sake of helping and learning as well. I’ll be doing that and my own project. I can also visualize myself joining new people and enjoying common hobbies.

Thank you for reading. Comments are welcome.