The Flight – ep01

It was a sunny day. I did not remember the date or what day it was. I was walking towards a plane. I guess I’m travelling somewhere. Along the way, I noticed a lady walking beside me. A ticket in her hand. “So we’re on the same flight”, I said to myself.

While we’re walking, I feel a warmth which I can’t explain. “What’s your number?,” I awkwardly asked her while pointing towards her hand. She was surprised. I can see it in the way her face reacted. She looked at her ticket.

“11A,” she hesitantly replied.

“I mean your phone number,” I smiled. I was surprised at how easy I say the line. She was confused and there was a moment of silence.

“Sorry, I’m just joking,” I assured her. “I’m not sure why I said those,” I continued. “I’m an introvert and would have had a hard time starting a conversation with strangers. But somehow the words came out easily when I saw you.” This is true. I, normally, don’t start conversations with strangers.

“That’s alright,” she said with a smile. I was relieved and smiled back. We talked. I can see that she enjoyed our conversation so I asked if I could sit near her. She agreed so I end up asking another passenger to switch seats with me. Luckily, it went well. So we talked pretty much the whole flight.

Upon arrival, we went to a local park and had a good laugh. On that moment, I felt something that I haven’t felt for a long time. I silently thought, “This must be…”

Then, I opened my eyes and woke up. There I was, sleeping on the floor of my room. “10:14,” the phone read. “Who was that girl,” I thought. “But importantly, I’m late for work.” Back to reality. A reality where love is for the living.

“Fair is foul, foul is fair,” I reminded myself.

 


Photo by Sofia Sforza on Unsplash

Interactive Pure-CSS Hamburger menu icon

I recently came across a site with a nifty hamburger icon which transforms into an X icon when the menu is shown or it’s active. The transformation also includes a transition. So it’s not a simple background image change.

It really interests me so I recreate it in a codepen:

See the Pen interactive hamburger menu icon by Leo Gono (@leogono) on CodePen.0

As you might have notice, here what happens, the top bar transforms 45 degree, the middle bar disappears, and lastly, the bottom bar transforms -45 degree.

The code is pure CSS so it’s very lightweight. It utilizes ‘transform’ and ‘transition’ css properties. You can add prefixes for browser support.

How Ghostlab makes my life easier

I recently came across GhostLab in search for tools in cross-browser testing. I’m not sure how it happens because I googled before and haven’t saw this app. You may call it accident but I consider it a “divine intervention”. 🙂

Running it for the first time was a breeze. Just drag the folder of your HTML files and one click of a button, your files are served on a local server. You can also add URL in case you need to test a live site. This feature is very important to me. This is one of the feature that would make me buy this app.

Most of the time, I work on a WordPress site. So you can’t just drag the folder into Ghostlab. My solution is served the site on MAMP, then copy the link to Ghostlab. TADA! Problem solved.

Another problem is viewing the page on IE. I’m on OSX and we all know that IE is not (and may never be) ported to OSX. My solution, virtualbox. And to my surprise, it work seamlessly with Ghostlab.

I don’t have all the devices to test cross-browser but here’s my current set up:
Mac – Safari, Chrome, Firefox
Virtualbox – IE
Virtualbox – Android Kitkat
iOS simulator (iPad)
and my iPhone 5S.

I’m still on trial and I’m going to buy this app at the end of the trial period.