Tuesday, September 22, 2015

愛老虎油

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.

Monday, July 27, 2015

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.

Monday, June 1, 2015

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.

Friday, November 7, 2014

Copy to FTP in Classic ASP (JScript)

Recently I had the need to FTP some files in the old Classic ASP platform. The catch is that I need it to be in JScript (Javascript for IIS). In my experience most people use VB script in their ASP environment,. the past few years I have grown to prefer using JScript. If you'd like to use VBScript to FTP then might I suggest this great source. It is from this that I have adapted my JS version.

FTP in ASP (JScript)

In my current environment I never use serverside JScript to render HTML, rather only to serve in a JSON based API format. For the purposes of sharing, I trimmed down the scaffolding into the bare necessities and was left only needing a JSON polyfill: JSON polyfill that works in ASP JScript.

var ftp = (function() { /* * Copy a file(s) to a directory on a remote FTP server. * * Adapted from the very usefull post @ http://benmeg.com/code/asp/ftp.asp.html */ function copyTo(address, username, password, remote_directory, files_to_put, isBinary) { var objFSO = Server.CreateObject("Scripting.FileSystemObject"), oScript = Server.CreateObject("WSCRIPT.SHELL"), oFileSys = Server.CreateObject("Scripting.FileSystemObject"), objTextFile, oScriptNet, oFile, strCMD, strTempFile, strCommandResult = '', uniqueNumber = '__'; // This is for you to implement a random key on your system (if required). // Build our ftp-commands file objTextFile = objFSO.CreateTextFile(Server.MapPath('ftpCommand' + uniqueNumber + '.ftp')); objTextFile.WriteLine('lcd ' + Server.MapPath('.')); objTextFile.WriteLine('open ' + address); objTextFile.WriteLine(username); objTextFile.WriteLine(password); // Check to see if we need to issue a 'cd' command if (remote_directory != '') objTextFile.WriteLine('cd ' + remote_directory); objTextFile.WriteLine('prompt'); // If the file(s) is/are binary (i.e. .jpg, .mdb, etc..) if (isBinary) objTextFile.WriteLine('binary'); // If there are multiple files to put, we need to use the command 'mput', instead of 'put' if (files_to_put.indexOf('*') > -1) objTextFile.WriteLine('mput ' + files_to_put); else objTextFile.WriteLine('put ' + files_to_put); objTextFile.WriteLine('bye'); objTextFile.Close(); delete objTextFile; // Pipe output from cmd.exe to a temporary file strTempFile = Server.MapPath('ftpOutput-' + uniqueNumber + '.ftp'); // Use cmd.exe to run ftp.exe, parsing our newly created command file oScript.Run('cmd.exe /c ' + 'ftp.exe -s:' + Server.MapPath('ftpCommand' + uniqueNumber + '.ftp') + ' > ' + strTempFile, 0, true); oFile = oFileSys.OpenTextFile(strTempFile, 1, false, 0); // Grab output from temporary file strCommandResult = oFile.ReadAll(); oFile.Close(); // Delete the temporary & ftp-command files oFileSys.DeleteFile(strTempFile, true); objFSO.DeleteFile(Server.MapPath('ftpCommand' + uniqueNumber + '.ftp'), true); delete oFileSys; delete objFSO; return { result: strCommandResult.split('\r\n') }; } return { copyTo: copyTo }; })();

Which results in:

Friday, July 18, 2014

Chinese Javascript Tools - 中文Javascript的工具

A set of tools and functions for working with Chinese characters in the browser or NodeJS.

Features

  • Generating Pinyin or Zhuyin (Bopomofo) for strings of Chinese text - 翻譯中文到拼音或注音
  • Converting between Traditional and Simplified Chinese - 兌換傳統到簡體漢字而且反之亦然
  • Detecting Chinese characters in strings - 檢測中文字
  • UI elements/facilities for reading Chinese text in the browser - 用拼音和注音便利使用者讀中文字
  • Translating Chinese characters and common phrases to English - 翻譯成語和常見的字

Download

All source and examples can be downloaded from GitHub.

Examples