Menu

Reflection

In the rain
The ground becomes
Like a mirror
Reflecting light from
Cars and buildings
Traffic and street
Lights as well
A world painted
On a canvas
Of asphalt, concrete
and precise stone
A world so
Etherial and disturbed
By the frolicking
Raindrops falling in
Ever present chaos
Dancing around each
Other like lovers
That long for
One another at
Immense distances rarely
Touching to sweetly
Chance to become
one.

Reminder

My mind betrays me
As I look upon
This photograph of yours
I was absent– without
You as you boarded
That plane and set
Off on an adventure
With who?
The unknown is a
Weighty ghost within my
Mind, ever changing– churning
My insides with a
Deluge of emotions that
Evince qualities of the
Self, qualities I feel
Are better left in
Dark recesses, and forever
Forgotten, but there is
Also a light, faintly,
Relentlessly glimmering within the
Abyss of formless shadow
That draws me closer
To that feeling of
Love unconditional felt by
Many for you, the
Reminder.

Bootstrap

After installing Bootstrap you can quickly get started! Bootstrap uses a 12-column responsive layout placed inside a container.


Here is an example that shows the 12-column responsive grid clearly:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
      div { border:1px solid grey; }
    </style>
  </head>
  <body>
    <!-- bootstrap -->
    <div class="container">
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div><!-- /row -->
    
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div><!-- /row -->
      
      <div class="row">
        <div class="col-md-8 col-md-offset-2">.col-md-8 .col-md-offset-2
          <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
          <h2>h2. Bootstrap heading <small>Secondary text</small> <span class="label label-info">New</span></h2>
          <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
          <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
          <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
          <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
          <p class="lead">This is some lead text.</p>
          <p class="text-center bg-primary">This is a <em><mark>standard</mark> centered <strong>bg-primary</strong></em> paragraph.</p>
        </div><!-- /col-md-8 .col-md-offset-2 -->
      </div><!-- /row -->
      
    </div><!-- /container -->
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Responsive Web Design

Responsive Web Design is a technique/technology that involves using fluid, proportional grids and CSS3 media queries. It is relatively easy to implement if you are starting from scratch. It’s a little more difficult to add to existing sites because of it’s use of containers. If you want to get started with a Responsive Web Design here are a few simple steps you can follow:

1) Add a viewport meta tag in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

2) Add a “breakpoint” in your CSS:

@media screen and (max-width: 767px) {
  /* smaller than 1024x768 for example */
  CSS { ... }
}

3) Define your custom CSS.

4) Repeat steps 2 & 3.


Here is an example that uses two elements with widths of 50% (a maximum of 390px each due to the containing element and padding) which stack on top of each other when the screen width is smaller than 768px:

<!DOCTYPE html><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    body { 
      margin:0;
      padding:0;
    }
    .container {
      margin:auto;
      max-width:800px;
    }
    .grey { 
      background-color:#ccc;
      color:#fff;
      padding:20px;
    }
    .section { 
      box-sizing:border-box; 
      float:left;
      padding:5px;
      width:50%;
    }
    @media screen and (max-width: 767px) {
      .section { width:100%; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 1: Some content.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 2: Some more content.
      </div>
    </div>
  </div>
</body>
</html>

mousemove event (jQuery)

Here is a little script that allows an element with the id “follow” to follow the mouse cursor:

$(document).mousemove(function(){
  // Displays the mouse x and y coordinates inside #mouseposition.
  $("#mouseposition").html("x:"+event.pageX+", y:"+event.pageY+"."); 
  // #follow must have absolute positioning.
  $("#follow").css("left", event.pageX);
  $("#follow").css("top", event.pageY);
});

Othello Book Cover Design

Othello Book Cover Design

Othello Book Cover Design

This is a book cover concept I did for the William Shakespeare play Othello. It features a silhouette of Othello revealed in blood. I broke some conventions when creating the spine, but I think it works well as a graphic piece.

Email form processing via PHP

Here is a PHP script that sends an email from an HTML form (submitted via POST):

<?php
/*
 *
 * email form processor
 * form contains: email, subject, message.
 * email is sent from php@php.net.
 *
 */
  $email=$_POST["email"];
  $subject=$_POST["subject"];
  $message="email sent from ip address: "
  . $_SERVER["REMOTE_ADDR"]
  . "\nmessage: " 
  . $_POST["message"];
  $from="php@php.net";

  mail($email, $subject, $message, "From:".$from);
?>

(α)lpha (6) (c)arbon

(α)lpha (6) (c)arbon cover for The Mars Volta RAMROD tapes.

(α)lpha (6) (c)arbon cover for The Mars Volta RAMROD tapes.

This is a cover concept I did called αlpha 6(atomic number) carbon for The Mars Volta RAMROD tapes. I took this project on myself, seeing an opportunity to use design ideas I had after listening to the tapes. I was reviewing organic chemistry at the time. The alpha carbon is the first carbon atom attached to a functional group. Each track was a different functional group. The symbols are reminiscent of organic molecules, but modified to be obfuscated.

Hello world!

I have set up this WordPress site while learning Web Development. I have a PHP redirect in the root (/) folder of my site. It looks like this:

<?php
  header("Location: http://www.poneet.com/wordpress");
?>