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

Injecting CSS with Javascript

Why injectCSS? Why make it? What is it solving?

• The primary goal was to create an easy way to include multi-line (lots) of CSS using Javascript.
• Can reduce number of files in a JS plugin or project (My goal was one).
• A test run at jsperf.com shows that injecting CSS rules for a vast number of elements is very fast.

There are already some existing CSS injection tools, but I wanted something dead-simple. There is a great library called VeinJS, which does so much more than mine in many different ways. But after perusing through the examples I knew that I would have to dismantle my CSS too much. What I wanted was something like what you will see in the example below.

Example Usage

With RequireJS

With no dependencies

Compatability

Tested successfully on:

• Chrome (+mobile)
• Firefox
• Safari (+mobile)
• IE 10+

Due to the older IE browsers not allowing the innerHTML property to be set on certain elements, this will not work in them.

Download

The code is on GitHub. Download, use and modify as you please.

Collect - A PHP/JQM Mobile Framework

For nearly as long as I can remember, I've been trying to simplify my programming projects by breaking down long repetitive tasks down into as short and concise steps as I can. I shudder to think of the hours in my life spent putting together a web page that reads a list of items from a database, filters or transforms them, then renders out the appropriate html and attachments. So many times have I done this, across many languages, projects, and technologies.

For the past two years I've been reforming my interest in web, to an interest in mobile web. During this time, I've also run through all my regular distractions like creating a little mobile RSS reader, a mobile client profile database for a cousin, a mobile plumbing inspection checklist for another friend. All these very different projects have a lot in common. They need to capture, edit, delete and list objects. Throw in a little menu navigation and there you have a system. My goal with this PHP/JQM MVC project is to turn my dev cycle for small projects into 90% deciding what I want, 10% typing it in.

Now since I'm targeting mobile devices, form layout can simply default to a vertical list of form controls down the page. All that's really left is deciding what data needs to be captured in my simple data capture app. Here's an example set of definitions...

The Client Profile Demo

There are three object models there: A client, a client state, and a product. Clients have several details, among which is a state. They can be in only one state at a time. Clients can have many products. That may or may not look like a lot,.. but what does it get you?

• Six tables in your database, three data tables, each with a respective log table tracking all changes
• An API on the serverside to manipulate that data
• Clientside forms to edit instances of each of the models
• Some simple regex error detection in the forms
• Overview and list pages to navigate the data
• A dashboard to hold it all together
• The login procedure and managing users are also thrown in already

Here's some screen grabs of the app produced by the above definitions:

Download and Setup

You can freely download, copy, hack and sell this project from GitHub. To setup your own mobile app, the general process is as follows:

• Copy this project folder into your htdocs or respective web directory
• Edit the app/schema.json file to define your models and views
• Delete any existing app/database.sqlite files (if you want to start from a clean slate)
• Open api/check.php in a browser. This will create any tables that don't exist
• Now open your mobile web app in a browser window

Some Caveats

As per usual, I offer this simply as a mostly working prototype. I was actively working on this project more than a year ago, but since then time and priority has led to the inevitable disregard of maintaining it. I still use it often when I need a little admin panel for a website or project I'm working on. I find it workable, but there are definitely bugs, and features half baked in. Have fun with it.

Joystick to JSON/HTTP in Processing

This weekend I had the urge to read the state of the game paddle connected to my PC and offer it as a JSON web service. This is but a part of my larger goal to do the same with my LEGO Power Functions through Arduino, then couple all of the aforementioned together; ie: Use a joystick to control LEGO.

I used a Java library called FF4J which in turn is based on the SDL library. I tried to make my Processing sketch as simple as possible while interfacing with the aforementioned libraries.

JSON Output mapping

You are able to define a mapping that describes the output format of your JSON web service. It would look something like this, depending on your game controller:

{
 x: 'rX',
 y: 'Y',
 z: 'Z',
 dial: 'X',
 pov: 'POV1',
 fire: 'B1',
 b2: 'B2',
 b3: 'B3',
 b4: 'B4',
 b5: 'B5',
 b6: 'B6',
 b7: 'B7',
 b8: 'B8',
 b9: 'B9',
 b10: 'B10',
 b11: 'B11',
 b12: 'B12'
}

This JSON is defined in [mapping.json]. This allows you to choose custom names for the buttons, axis, and POVs available to you. You can find the code name of the keys by running the app.

Installation

• Download and install the SDL Library.
• Add the SDL DLLs to processing/java/bin/ folder.
• (Plug in your joystick)
• Make sure your Joystick is available to SDL ~ Test with dxdiag.exe
• Open JoystickService in Processing.

The Result

Once it's running you can view the state of your joystick in the application window. If all is well then open up the service in a browser (localhost:28080 by default). You should see something like this:

Download

You can download my processing app folder from JoystickService on GitHub.

Information Overload

Information abundant: information pools, information pockets, information streams, information databases; Information sources of so many types delivered in so many formats. I have too much information to manage it properly. Well, when I say 'properly' I mean there's too much to remember all of it, digest all of it, to take full potential of all the data being delivered to me.

I am a child of the information age: When I wake up in the morning the first thing I do is get behind my computer to catch up with the world around me. I've got social networks, business networks, email accounts, and am a programmer so have a multitude of other internet services and jobs running on schedules. I need(read want) to know certain things at certain times. If a client has requested my attention via email I need to know as soon as possible. If it's my mothers birthday I need to know 7am in the morning. If my web server goes down, I need to know five minutes ago.

With so many online services and so many of them offering an RSS/Atom stream about nearly everything; An RSS reader does a good job on keeping me up to date with 66.67% of my knowledge source. But even reading my master RSS feed every morning doesnt provide all the information I need, but more importantly it doesnt invoke some simple actions that I find repetitive when I come across certain data.

• I have a facebook account; I want to be alerted of birthdays in the early morning.
  
• I follow some twitterers'; I only want to view tweets that are re-tweeted.
• I have family members on Flickr and Picasa; If they post photos then I want to see them, better yet funnel them straight to my wireless photo frame in one merged Media RSS stream.
• I've got an AreMySitesUp account: I need to urgently know when my servers are unavailable.
• I've got Gtalk, Skype and AIM acocunts...
• I have setup FTP locations that clients drop work in...
• I've got several email accounts...
• I follow several open source projects on forums, bug trackers, and version releases...
• I run several projects and each of those have several checks and balances in place to make sure all is in order.

I could go on, but the point is made. I've got so many sources of information of varying types and each hold a certain level of importance or urgency to me. Now I want a central way to organise all of this; A way to manage and schedule my information.

I am a programmer; I'm going to make something. An information engine. This engine will:

• Store data
• Consume data stream/trigger inputs
• Publish stream/alert outputs
• Provide a management console for all of the above

More on this to come...

I want a web desktop

It seems the web is awaking to the concept of interoperability between service providers. I read somewhere, and so true it is, that it's ironic how, in a sense service provision is returning to the 'mainframe'. The web as a platform offers so many advantages over the desktop platform, but in many regards the desktop is still the home to the user. So; how can we get the web up to speed - not to replace the desktop, but to be as comfortable, secure and integrated as the desktop? What do we need? What does the user want? What do I want?
Here's a couple of ideas... It's not an exhaustive list; It's just some ideas.
The web in the future:

• Everything is open
• Everything is decentralized
  
• User space is shared and accessible
  
• The user has control of their own information
  

So How do we decentralize our systems in an open manner?
Security and data integrity is a critical issue shaping the web. Decentralization and openness always comes coupled with policies and procedures. So how do we share personal and business intelligence in a fair and controlled manner? If a user has permission to view or mash information on one system, how can we securely let him reference that information from another system? (I realize this is a paragraph of questions,...)
It is becoming more frequent to perform more of our daily work functions online; The trend of remote storage and processing is undeniable. The internet computing cloud is storming. I myself do not store email, pictures, video or music on my local computer; All of these are provided by -free- online services. In my work environment 4 out of the 6 regular applications I use all reside on the intranet.
Another interesting thing to watch is the commercial adoption of social engineering (or more generally any 'Web2.0') platforms. Work environments, at least the ones I've worked in, either embrace the evolving web, or try and firewall it out. I always enjoy hearing of success stories from organisations that have embraced the evolving web; One of the examples that spring to mind is that of the micromessaging arena. Many companies now use Twitter et al to communicate within their organisation - and find it very effective. There are now many comercial micromessaging platforms that offer packages to willing corporates that want the paid support. So what - Why am I mentioning this?

I believe the web is the dominant application domain now - and if your industry doens't fit into this rather swooping statement then, I beg to argue, that it most likely will in the future. Now I can either be in the company that waits to see what happens with the web and design my business around accordingly, or I can storm ahead and be on the forefront of the evolving web platform. Gotto admit - I prefer setting trends rather than following them.
What do I want my web platform to be? As a starting point I'm just going to throw together another list. This will be a few things that I would like to see out of a web framework, and the web in general. [Some are slightly redundant, but I thought it coloured in the picture nicely]

• I, as a user, want control.
• As a user, when I open my browser (or log on to the internet per say), I want to have access to all my information, all the time.
  
• I need a clear entry point or a mechanism to manage my online life.
  
• I want a platform that will abstract (hence simplify) the communication between different flavours of the same product type.
  Example: Which Instant Messenger do you use? AIM, Gtalk, Skype, SIP, Gizmo, XMPP? What about your friends? This issue has been cordially addressed with the applicaiton of XMPP and multi-protocol clients, but this is an example of the open web and the need to find common ground between service providers.
  
• I want to be able to choose where I store my personal data and for that data to be seemlessly accessible from everywhere else I go.
  Exmaple: If I'm at work, I do infact want to set my web-desktop background to that picture of my wife and kids. Sure some business policies will prohibit personal data accessability, but for those work environments that aren't so, dare I say 'old-school', as to lock down everything, I want this accessability.
  
• I want clear ownership of some of my information.
  Example: I want to store my financials and budgets on my FTP server at home, but these should be as readily available to myself, as my online photo album. [And no,.. I don't want to carry around a portable FTP client on USB.] I want a web-desktop that seemlessly integrates with my online data, and my personal data at home.
  
• Some people are technical,... some are not. This is a fact of life. If the system does fit a decentralized model, the take-home installer should be simple to setup.
  I want to addon to my web desktop system and code new plugins - My sister does not; She just wants to click once and install - Furthermore, my mother doesn't understand what installing is, she just wants to logon to a hosted solution.
  
• My web-desktop system I host at home, the one I subscribe to online, and the one we use at work should in some manner communicate and synchronize.
  
• I want to access my web-desktop from a plethora of different devices; Such as my computer, mobile phone, UMPC, or any other capable computing device.

Well some might say that these things are highly improbable. How will the world accept such infusion between all of a persons online life?

Will business's ever let me have access to my personal desktop (or portions thereof) at work?

How many end users actually understand the concept of decentralization? (Few would be my guess.) I tried to explain OpenID's to my wife once and she could not see the purpose of it.Worst case scenario,.. lets just wait for my generation to pass. I would put money on it that in ten years every site will be OpenID enabled. The problem with most users in this 'internet generation', is that even though we all know how to use a computer , unless there's a need to know, we don't want to. It seems the best time to teach a generation of users new concepts, is in their infancy. In some ways this makes me sad that the digital-experience I yearn to have will only really become a reality for the next generation.

So what do I want?
I want a desktop for the web. A platform for integrating all my online escapades into a web platform. My very own personal web desktop.