UI Challenge with Angular, Chart.js, and JSON

I was recently challenged to come up with a client-side application that displays streaming customer information within a card.  

The front-end of my solution uses fluid layout and responsive design.  The template layout was set up to cascade efficiently to reduce CSS bloat.  I used AngularJS to join two sets of JSON data together and display the information in a repeatable template.  


I used Chart.js to render the chart, and webkit filters to support animated rollovers.

One of the nifty things about this solution is that if a user’s avatar is missing then their first initial is rendered instead. 

Open the link here.

Reclaiming Bedroom Closet

For the past several years I’ve been hosting my websites from my bedroom closet.

This has worked out mostly well.  I purchased a large rack for all of the servers and a large UPS for when the electricity goes out.  I had a fiber-optic  business line installed to the house and everything.

Unfortunately there are conditions that make this more trouble than it’s worth.  The servers can get really loud, and that room can get really hot, especially in the summer time.  The large rack is also in the way and we really can’t use the closet for its intended purpose: to hold our clothes.

There is also nobody to call for help when the server stops responding.  There have been no shortage of outages, and the constant potential of having to shift gears to fix server problems is mentally taxing.

The recent 6-day outage with Frontier Communications was the extra tip I needed to finally move the servers to the cloud.  I’ve written about this previously, and the entire incident is nothing short of a fiasco, complete with “Three Stooges” sound effects.

Today I’m cleaning up the house, and one of the more satisfying tasks will be shutting down the internet servers for good and gaining my closet back.

Now I have to figure out where I’m going to put everything!

OCmodshop Back After 4-Day Outage

I hope this is the last time I have to write about news of this site being down yet again. had been offline since last Saturday due to a wind storm in Seattle.  The storm knocked out a critical part of the fiber network which affected our corner of the Internet (where the cool kids hang out).

As understandable as that may seem, the technical team at Frontier bungled one event after another; making assumptions, relying on other departments, and overall the communication between departments and to their customers was practically non-existent.

Regardless of the competency level of Frontier as an organization, the issue is still unresolved.  The executive staff collectively decided to move to new Cloud-based hosting with a new provider.  Our new hardware is many times more powerful than the previous server, which should translate into a faster site.

The main site is up and mostly functional, however there are some assets that are offline and will be populated over the next few days.

To rephrase – our resident Closet Monkey is going through all the backup floppies and restoring files before moving out.  Closet Monkey is being replaced with Kloud Monkey… super-enhanced with the power of water vapor!

Misused English Words and Phrases

For better or worse, in today’s world you are judged by how you communicate.  There are lots of words and phrases in the English language that are easily misspelled or misunderstood, but as a professional writer and editor I have to be aware of the correct usage.  It doesn’t matter how big or how small your publication is; if you use improper English then your authority can be overruled by your ignorance.

Below are some of the things that are mis-used.  Some are rather funny, and you wouldn’t really know what people are really thinking until it is written down.

Frowned a pond.  Mis-use of this phrase is  frowned upon.

Intensive purposes.  “For all intents and purposes”.

Mute point.  You probably meant “moot” point.  I guess someone who is non-verbal could make a point, but that’s probably not what was intended.

Irregardless.  There is no such word.  You meant “regardless”.

Supposably.  You mean “supposedly”… as in something was “supposed” to happen. )

Would of. You meant “would have”.

I could care less.  That means you do care, at least a little.

Drive safe (drive safely)

Reap what you sew.  To sow is to plant something.  Reaping is to harvest the thing you planted.  To sew is to prepare fabric.

Breath vs. Breathe.  Breath is a noun.  Breathe is a verb.

Tow the line.  It’s “toe the line”.  During debates, there were lines on the floor to keep your toes behind.  If you stayed behind this line then you were out of reach of your opponent’s saber.

Worth your wild.  It’s “worth your while”.

Pall Meadow bug instead of Palmetto bug

Affect vs. Effect

Enormity means outrageous, not size.

Nonplussed means bewildered instead of unimpressed.

Redundant means beyond necessary, not mildly amused.

Plethora means a super abundance, not having too much.

Unique is more than just unusual, but truly one of a kind.  As in there is not another one like it.

Flushing Out vs Fleshing Out.  Flushing something out is revealing something that already exists but is hidden (like flushing out quail during a hunt).  Fleshing out means to “add to” something that already exists but not well defined.  Artists usually start with a skeletal frame and then “flesh out” the rest of the body.

Hone in on.  It’s “home in on”.

Imply vs. Infer.  To infer is to figure out.  To imply is to suggest.

Oxymoron is more subtle than “contradiction in terms”. It is a deliberate apposition of contrast or words (e.g. “parting is such sweet sorrow”).

Apposition vs Opposition.  Appose is to switch or contrast, oppose is positive and negative.

Lead vs. Led

Party Harty.  Party hardy.

Data is always plural.

Are you done? No, you’re finished.

Your vs. you’re.  “You’re” is a contraction meaning “you are”.  

It’s is always “it is”.  
Plural of “it” is “its”.  Always.  No exceptions.

Physical Year vs. Fiscal Year.

You don’t wreck havoc, you wreak it.

Have less of something like milk or sand, cars or paper clips you have fewer

Wreckless driving. While you may have not had a “wreck”, reckless driving is driving dangerously.

Ice sickles instead of icicles

Decimate means a 10-percent destruction rate.  This comes is a Roman term meaning to kill one in ten (hence deci).   You do not completely destroy your opponent when they have been decimated.

Rationalize means to justify instead of “make excuses for”.

Waxing vs. Waning.  Waxing means “increasing”.  Waning means “decreasing”.

Untitled vs. Entitled.  

Lack Toast and Tolerant.  I actually encountered this once.  They meant to write “lactose intolerant”.

Midas whale.  I believe this was supposed to be “might as well”.

Blessing in this guys.  Blessing in disguise.

To eaches own.  To each his own.

Sponsorship Refusal Means Truthful Reviews

Sometimes it’s best to not get sponsored products to review.

We lost some of the traction we used to have on the Internet.  It could be that smaller “guy with a vision in his apartment” sites are overrun by large sites with fancy offices, just like Wal-Mart runs Main Street shops out of towns.  Maybe it’s because we had to scale back temporarially to deal with family and life.

When it was time to write a keyboard comparison articles, I contacted vendors to secure some samples.  We didn’t have the traffic to make it worth their while to send out samples.

So instead of being blocked, tucking my tail between my legs and not writing the articles, I bought all of the product myself.  I discovered some of the real issues with these issues.  Issues that seem to be somehow missing from reviews by larger tech review websites.

It could appear that large sites have an agenda.  The consumer is not getting the full story.

When I buy the review products myself, there is no obligation to candy-coat some of the obvious problems.  If the product was crap, I say so.  My house is filled with stuff that was sponsored that I wouldn’t otherwise keep if it wasn’t given to me.

Most big sites have an agenda to keep vendors content in order to remain big.  You will not see this kind of journalistic dis-honesty on

Thank you, vendors for not providing samples.  Now the consumer can learn the truth about your products.

Technology Journalist Survival Kit Article

I wrote an article about being a world-class technology journalist on  Here’s some of the skinny…

Being a world-class technology journalist, people often ask what’s in my bag.  For some reason most of these requests are from people in uniform when I’m near schools or playgrounds.  I guess those that find themselves in public service want to make it big in online journalism. 

Go read it on OCmodshop.

Improved Web Server Performance @ OCmodshop

The bacon-scented underpants gnomes have been busy this weekend, and have improved web server performance for OCmodshop.   Here’s how we improved site load times by 2000%.

Well, it was really just me locking myself in the OCmoffice all weekend and ignoring everyone.  But we really do have a monkey in a closet banging out the news.  Honest.

The Red Hat Enterprise Linux web server had been hosting some other projects that are no longer relevant, and those have been cleaned up.

Read the full story here

Fixing transparent spacers on Linux

When I first created this new page, I uploaded a lot of examples of my previous work.

Since some of these were originally hosted on a Windows server, I had to scrape and flatten them so they could be served by the new Linux server.   Sure, there are solutions where you can get ASP and .NET projects to work on Linux, but honestly it wasn’t worth the effort for a site that is basically archived.

Anyway, one of the weird problems I was having was with my digital clock example.  I used transparent spacer GIFs to help with the layout (if I were to do this project today I would rely more on CSS than this table layout), but they always rendered as white blocks when served from the Linux server, but worked fine locally.

The common denominator seemed to be that the transparent GIFs were under 1k in size, so I “de-optimized” them and uploaded, and still the same problem.

White shows up when spacers are on Linux server

Sometimes files aren’t served right if you don’t have the right permissions or owner.  I’ve seen people open the permissions of their web files too much when the solution is to make sure the owner and group of the file is the web server…  I made sure I had the right permissions (by doing a chmod command on the new files) and made sure the owner and group of the files were the same as the others (using chown command).  But still the same thing.

Then I had a complete bonehead moment.  The background texture of the entire area had capitals in the name, and I’m sure you know that Linux is extremely case-sensitive.  The web file was looking for “lcdtexture.gif” and the file on the server was “LCDtexture.gif”.

I quickly renamed the file, and of course it worked.  I really can’t believe I missed this, when I went through an extensive file-renaming exercise when I first moved everything over to Linux.

Anyay, the digital clock is now fixed.  I’ve been thinking of re-doing this project using object-oriented javascript methods or jQuery, just to show that I know how to do it.  Originally this clock was created just before jQuery became popular.

Where is the perfect browser I was promised?

As a developer, I have to switch between multiple browsers to ensure compatibility.

As a consumer, I still had to switch between browsers, as some supported features that others didn’t.  There was a time when Firefox was the perfect browser and was the absolute go-to with no compromises.
Back in the day, there were several browsers each with their pros and cons.

As the web evolved, so did the browsers, and there was a point when Internet Explorer 4 was the king, and all was well with the world.

Then along came Firefox, which seemed to be the perfect browser in the early 2000s. It was fast, supported all the HTML4 standards.  We finally had our perfect browser, and there was no need to use anything else.  I only had to use IE for ActiveX, and the only site requiring it was Microsoft’s own download widget for MSDN.

Then something changed

Firefox can be slow and updates every 3 months but has firebug and lots of plugins.  Great download manager and very configurable.  Also the bringer of Adblock, which is the boon to many a consumer, but the bane of online content producers, such as myself.  For some reason, Firefox is also very slow when editing in WordPress, and the “hardware acceleration” feature makes it even slower.

chrome is fast, but has limited plugins and weird browser issues (cannot find page, sometimes has weird javascript interpretations).

Internet Exploder

I used to be a die-hard IE fanboy.

IE was much more innovative than Netscape; it was much more forgiving of bad code and introduced new visualization features (such as colored lighting and transparency) to the world, but it was IE’s shortcomings that made the whole Mozilla world (Firefox and Chome) a necessity.

Internet Explorer was incredibly insecure, especially in the hands of inexperienced netizens who would unwittingly install spyware, toolbars and ActiveX controls, just because the scam site they were duped into visiting said so.  Since IE4 was tightly integrated into Windows, many PCs became hacked because of the browser’s security, which is what basically started the flood of security patches that Microsoft now forces on everyone.

These security patches in turn led to additional DLL hell, which required Microsoft to manage all of the different versions for the sake of compatibility… Enter WinSXS.   One of the reasons that an average installation of Windows takes up 18 Gigabytes is because of Internet Explorer 4.

IE has Silverlight and different IE modes, and IE9 seems to support more standards, but still has many quirks and browser errors.  Also no download manager and if you have a bunch of downloads going it can fill up your entire monitor.

Unfortunately most companies use Internet Explorer because lazy IT departments don’t want to test compatibility of their intranets with a new browser or code to the industry standard.  There is a scary percentage of the modern world that still uses IE6 (one of the worst versions of any browser, ever) simply because of their corporate IT policy.

Javascript debugging is turned off by default in Internet Explorer, and for good reason.  If you enable javascript debugging you will probably encounter an annoying popup on every freakin’ web page…

Very hard to debug, and many web bugs are IE-specific.

Doesn’t support firebug (although Firebug Lite works, but is very limited and slow).


And don’t get me started on Flash.  That technology needs to be buried as soon as possible.  With HTML5 and other standards there is absolutely no reason for this slow-running piece of garbage.

Flash was a great solution for multi-file uploads, animation, web videos, and bringing other dynamic multimedia to a standard web page, but each version that Adobe forces on you has bugs and makes the browser unstable.  Firefox even crashes with the latest version of Flash, and it’s not exactly intuitive on how to roll it back.

Still no perfect browser

So I still find myself switching between browsers frequently.  I will only touch IE when debugging IE-specific issues, and even then I only do so with a 10-foot pole.

I use Firefox for debugging, but Chrome for most of my day-to-day casual browsing, but I still get annoyed when Chome can’t find a webpage when a simple refresh fixes it.

There still is no one Browser To Rule Them All.

…and where are my flying cars, dammit?

How to center two inline images in WordPress

WordPress is a great content management system, but one of the weirdest quirks about its WYSIWYG editor is inserting two or more centered images side-by-side.

If you insert a single image and set its alignment to “centered” then it works just fine.  If you try to insert multiple images on the same line and have them centered, then they totally screw up the layout.  If you highlight two images with no alignment and then click on the Align Center button (usually meant for paragraphs), then the layout gets messed up.

You can go into HTML mode and use a few tricks to try and fix this, but none of them work just right.  I have found a foolproof method that works every time and can be done completely in the visual editor (no HTML code required).

I’ve tried several different methods to getting two images centered.  I’ve tried <center>image</center>, a centered table with one row and two cells, <p align=”center”>image</p>, <div align=”center”>, <div style=”text-align: center;”>, and all of these either mess up the layout or change the next paragraph’s font.  For some reason when using the <center> tag (no longer supported by HTML5), TinyMCE makes the image block part of the next paragraph, which changes the font style when the page is rendered.

Using the table method works, but if you have to move the images to another area, then copying and pasting will have very undesirable results and cause several headaches.  Doing this method also is much more time consuming.  CSS purists will argue that tables should never be used for layout, anyway.

The code that works every time is to wrap your images in <p style=”text-align: center;”>image</p>. This can be done by editing the code in HTML mode, but there is a way to do this quickly from the Visual editor.

Step 1. First, create a new paragraph with a single character or word.  I use “asdf”.

Step 2. Highlight “asdf” and then click the “Align Center” button to make it a centered paragraph.

Step 3. With the word still highlighted, insert your first image.  Make sure the alignment of your image is set to “none”.


Step 4. After you insert the first image, press space (to separate the two images) and insert your second image.

You have now inserted two centered images on the same line in WordPress without any HTML coding, and without compromising the layout of your article.

You’re welcome.