Hazelong.com

Invisible Falsies!

Easy Cupid Lips

Click for full view

I just realized that if I consolidate my tutorials to a simple one jpeg view ala 9gag style, it is easier to digest. Don’t you think?

Anyway, today’s tutorial is Easy Cupid Lips..kissable puckers that look sexy and cute at the same time. You will need a lip balm, concealer, lip liner in the same color as your lipstick or a lip liner in the shade of your natural lips and lipstick!

1.  Apply lip balm to your lips and let it sit for a few minutes while you do other makeup.
2. Line just outside your lips edges with concealer pencil or brush. Start from the top of your lips and line each side. Gently slope in with a curve towards the ends of your top lip.
   Using lipliner, clean up the edges and line just inside the concealer.
3. Fill it in with lipstick and you are done!

Warm Smokey Eyes

Warm smokey eyes

Recently I bought a camera and could finally continue with my makeup tutorials. Yay! Today’s look is a warm maroon smokey eye makeup for days when you have clear, healthy eyes. Using red eyeshadow can be challenging, in order not to look bruised it has to be blended nicely into the eyelids. Try not to cover the entire eyelid with the eyeshadow as well, keep them close to the lash line.

In the middle of revamping my brows

I am changing the shape of my brows to be lower with less arch. Suits my long face better but the hairs haven’t grow out nicely so pardon my skin-brows. :p Anyway, you should always pick a brow color that is similar to your current hair color. If your brows are darker, you can always have them dyed at Number76 salon in Plaza Mont Kiara/ Mid Valley.

Cool yellow as highlight for the brow bone

I used a very light cool yellow for the brow bone. I am not going to reference any pallete unless I specifically want to review the brand. The reason is colors are easy to find when it comes to makeup and I am definitely not that kind that hoards a lot of makeup palletes. I just have each of the essentials and thats enough for me. I do admire those girls with pretty makeup sets though. So jelly.

Just use similar colors and the effect will be the same.

Pale pink for the base

You know that pink eyeshadow you have that never seem to be vibrant enough when you apply them on? Use that. The color is neutral and therefore very similar to your skin tone. Perfect for a base.

Darker shade of reddish brown for the outer corners

After that, I use some sort of a clay red kinda color of the outer corners of the eyes. Remember to blend well. At this point, your eyes will look slightly puffy.

Dark brown in the outer lash lines

Finish off with dark brown or black in the outer lash lines.

Pencil eyeliner to smudge the lash line out

Use a pencil eyeliner to roughly fill in your lash lines. When you do this, the puffy look is gone since you will be covering most of the reds in the eyelid with this liner.

False lashes

Looking at this photo makes me wonder why I never buy my camera earlier. Apply falsies, if you have thicker ones use them for the dramatic look.

Warm blusher

Apply blusher to your cheeks. My blusher has to be applied from the cheekbone towards my nose. Every face shape is different, make sure you find out how to apply your blusher to suit your face.

Pale lips done with lipliner in Nude

I have a very pretty lipliner from MakeUp Forever in Nude and it is my staple makeup ingredient. I usually use it to line the edges and sometimes even change the shape of my lips. Then I fill it in with the lipliner.

Inward curls for the bottom half of the hair

Now on to hair!! Split your hair half top and bottom. Then split it again left and right. Hold your tongs vertically and focus on curling each side in the same direction. You may have to separate one side into manageable clumps but always curl in towards your face.

Bigger curls for the top half of the hair

Let the top part down and hold your tongs horizontally for this. Curl the leftover hair horizontally, go as close to the roots as you dare for the volume.

Hope you like it

OK finished di. Fast right. Anyway, my braces is giving me funny faces all the time now. I look like a duck sometimes and at times anorexic. Its misery.com

My third manicure in my life.

Because of the nature of my job, I couldn’t have manicures fearing the paint I deal with everyday will soil the manicure. Michelle did this gel manicure for me last night and assured me that even thinner couldn’t get it off.

I was working today and the thinner just cleaned my nails without rubbing off the nail polish. You should try it if you are in the same situation as me! Btw Michelle is super pro, she spent super long just cleaning my nails and preparing it. Very OCD. And then even when it is so late, she insisted on creating art on the manicure. Too good for value.

The nails lasts for a month and cost RM 60 and if you are interested, she can come to your house and do yours. Just give her a call at 016 218 5356

Deploying Rails to Centos 5 : mySQL

Hello, this is part two of the series!

If you have played with Rails before, you would know that the default database is SQLite. That is fine for development, for production having mySQL is better for handling more queries.

Deploying Rails to Centos 5

• Part 1 // Apache
• You are here!
• Part 3 // Git
• Part 4 // Ruby, Gems & Rails
• Part 5 // Passenger
• Part 6 // Gitosis
• Part 7 // Capistrano

Make sure you have Apache installed before doing this. There are a few dependencies that you should install as well. Connect via ssh to your remote server and run this command

 yum install httpd-devel\
openssl-devel\
zlib-devel\
gcc\
gcc-c++\
curl-devel\
expat-devel\
gettext-devel\
mysql-server\
mysql-devel

Once you are done, you can boot up mysql by doing this

 service mysqld start

And also make sure that mySQL starts when you boot up your server.

chkconfig mysqld on

Now, let’s make sure that we have a database prepped for a test rails application. To do that, run

/usr/bin/mysql -u root -p

Enter your root password if there is any.

You should be greeted with a friendly :

 mysql> 

If you want to change your root password you can do so by running this,

UPDATE mysql.user SET Password = PASSWORD('password') WHERE User = 'root';
FLUSH PRIVILEGES;

Let’s create a database for our rails test application.

CREATE DATABASE demodb;

And add a user for this database.

 INSERT INTO mysql.user (User,Host,Password) VALUES('loginname','localhost',PASSWORD('yourpassword'));
GRANT ALL PRIVILEGES ON demodb.* to loginname@localhost;
FLUSH PRIVILEGES;

Now you have a working database! Yay!

For a list of handy commands to communicate with your mySQL database, head here.

Next : Git

Sexy Eyes makeup look

Recently, I took Johnny’s camera for a test drive. His Canon EOS 550d can do wonders with videos and I wanted to do some videography again. But with a good camera, I couldn’t resist making a makeup tutorial. With no photographer, I raped his camera.

I put in Ringo’s flashgun, jacked a USB cable from it to my Mac and use DSLR Remote Pro. Set it up to use a remote and started shooting my photos. (His lens can go up to 1.8.. the dof is damn nais T_T )

Anyway this is a 2 part tutorial covering makeup and hair. The hair tutorial will be up this Friday.

Start by applying a dark brown shade for your eyebrows.

After that, use a shimmery white eyeshadow for the browbone. Then frame your eyes with this color like above.

When you are done, use a shimmery grey color and frame your eyes again. This time get closer to the lashlines.

Now, use a black eyeshadow and frame your lashline like above. Get as close to the lashline as possible and spend as much time as you can in this step to make sure that the colour is really really black.

Further define your lashline with a pencil eyeliner.

Use a liquid eyeliner and go over your pencil eyeliner. Make your lashline as black as you can. Keep your lines very thin.

Glam up with mascara. Make sure you coat every single lash. The key to this look is dark, volumnious lashes

Wear false lashes. If you have lower lashes, it is time to wear them!

Apply a light pink blusher, put on a pale lipstick and finish up with gloss.

The result is a intense makeup that draws attention to your beautiful eyes

It looks great from every angle, especially if you use long lashes.

And the best thing is no matter what camera you use, your eyes will be really defined since you spent a really long time on the lashes and liner. It keeps your lashline and lashes thick, dark and sultry.

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.