愛老虎油

What is this?

This is a simple pseudo 3D rendering of a heart. The little buzzing pink dots will zip between points and choose a new direction at each point. Sweep your mouse across the heart to swivel the heart.

The Chinese phrase 『愛老虎油』 literally translates as "Love tiger oil",.. but then it's not supposed to be literally translated. This is a play on words, or sounds of the words to be more exact. The pinyin transliteration for the Chinese looks like "Ài lǎohǔ yóu". Sometimes when a Taiwanese speaker says these words in Chinese, using a very thick Taiwanese accent, it sounds remarkably similar to "I love you"! Google Translate does a very mediocre job of pronouncing it - Click through and click the speaker button on the grey translation box.

See the Pen I Love You by Pat Cullen (@patcullen) on CodePen.

Then & Now

Recently I stumbled across an excellent photo/postcard collection of Taiwan from yonder year. I am a big fan of Tainan, a city in the southern half of the island; So have decided to go to some of these locations to take current photos to compare against the historical counterparts. The first thing I wanted to do was download an mobile app that would facilitate this desire, only to find that there was either no free app to do so, or no such thing at all. Well here I present a prototype for such an app.

Example and/or Goal

Here is a photo I took in Tainan, and it's historical counterpart I found on the internet. I tried to get a close match, but unfortunately at the time the road was quite busy and wandering around in between speeding cars to find a perfect angle was not as a high priority as I initially imagined.

Demo on CodePen

(The app will ask to use your webcam if it is present. A similar question will be asked if using your mobile.)

See the Pen Then & Now by Pat Cullen (@patcullen) on CodePen.

If you're interested..

A full-page (unlike the pen above) linkable version can be found at http://cullen.co.za/project/thenAndNow. On my mobile I have created a shortcut to open this in my browser, which is the closest I am probably going to bundle this into any mobile-app form.

Video Background Header

A customer asked us recently to design their webpage and they were very certain they wanted a "Video background like AirBnb has". I searched the net a bit and found several sources of info, some of which were quite different, and some of which were straight out contradictory. After fiddling for several hours with all the different ideas presented, I settled on something that I found met most of my requirements. Here I present a boilerplate which you can customize to create your own video background header.

Goals

The short and curly of it is that I wanted a CSS/HTML combination that gave me a video background over which I could lay any other HTML and style them.

• The video should auto play as the page loads.
• The video should always fill and cover the element it is a background for, vertical and horizontal device profiles alike.
• If loading the video is slow or fails, then a placeholder image should be ready in it's place.
• The video and layout above it should render as expected on as many devices and platforms possible.

Demo on CodePen

In my pen I did not want to link to any other offsite resources, so I inlined and compressed the video in JS. I would advise anyone else to rather render the appropriate static HTML (provided but commented out) that points to actual video files that can be optimised themselves.

See the Pen Video Background Boilerplate by Pat Cullen (@patcullen) on CodePen.