IWOMM (It Works On My Machine)!

Say you have a test suite for your project. Go ahead, say it… right now out loud so a random passerby can hear you and begin rumors about the person muttering nonsense to themselves. Now say the test suite is all nice and well factored giving you 80+% coverage on your project. Say you’re proud of the test suite and then say you add a new test case to it that works beautifully until it makes its way over to either the build server or a colleague’s workstation. Hi, I’m Cliff. You’re probably here because you have a broken test case. I’m here because I’ve been there and done that.

I was recently in a discussion with a coworker when this topic came up and I thought I’d post a little something about it. The frustration most people feel from that random test failure that always works so well on my machine is that it seems incredibly hard to track down the problem. If you know a couple of basic principles, however, it can make finding and fixing these failures as easy as… as easy as the Kool-Aid man bustin’ through your living room wall. “Oh yeah!” Technically, forcing a glass pitcher full of red liquid through plaster (or concrete like in the 80s) without spilling a drop is not easy but I’l leave that as a physics exercise for the more adept among us.

“But it works on my machine!!!”

…they always say in disgust as the green bar flips to a shade of crimson indicating they are not as careful as they claimed to be during the pull request. It’s okay though. It happens when you make a change like adding a new test or adding logic to an existing test which creates a random failure in a test case that has absolutely nothing to do with your changes. The problem many times is not the fault of the additional test or test mods that seem to trigger the failure. The cause is almost always one of two things, which I’ll elaborate on now.

Check your environment!
Many test cases have a tendency to rely on a particular environment. Maybe it’s an environmet variable, a version of the Runtime (nodeJS, Java, Ruby, etc.), or even a compiler optimization. If the environment where the failure occurs differs even slightly from yours then it’s highly possible that the slight variation is triggering the failure. I recall a Java test which ran a version of Tomcat failed because of the ImageIO library which was (or was not) present on the build server. The JVM was 1 point revision ahead (or behind, I can’t recall exactly) my local version. There were times that I discovered the presence of an executable in the system’s $PATH environment variable would cause it to be picked up during the test and dramatically change the behavior. This can happen when you run on OS X vs. Linux.

Even something as subtle as a configuration file difference can have an affect. Some applications make use of local machine specific configuration files which are used to locate things like a database, an XML parser, or a virtual machine. The database itself is considered an environmental resource. Though you should never have unit tests which depend on a database, many people make a habit of it. Anything coming from a local or external database should always be considered first when trying to isolate a failure.

Order of Operations
These are my favorite problems because they’re dirt simple to fix! In a perfect world, your test cases should be able to run regardless of which order they execute in. However, in practice, this is often not the case. Check the actual order your test cases are run in. If the failing test passes when run on its own or when run in a different order, then the failing test itself may not even be the problem. The problem is in a test that is running before the failing test. Consider the following:

Your machine
A, B, C, D, E, F -> ALL PASS

OTHER machine
F, E, C, D, B, A -> D FAILS

The problem in this scenario is immediately obvious to me and would take me all of 5 minutes of dev time to fix. Can you identify what to fix?

Either test cases E or F is causing a failure in D because D runs successfully when they are not run first. I would run F before D then E before D to see which of these (possibly both of these) cause the failure. Once I’ve identified the offending test case I would simply add a tearDown step, which reverted any state established during either the setup or the test cases. Usually this is a very easy pattern of matching any file, database, or socket open cal with a corresponding close in the teardown. It’s followed by nulling out any global variables, and resetting all mock objects. On very rare occasions I have to tilt my head and squint a little harder to find the problem.

Take the above example. Let’s say running test D passes when it runs after E. Immediately I know that test F is the offender. I would run F, D to confirm. I would then open up F and look for any global variable use. In Java this would mean anything that is static either in the test case, the tested source, or any test helper files. I would make sure these global variables were set to null in F’s tear down method. (If F doesn’t have a tearDown method I would add it.) I would then look to see if there were any mock objects used in F. Failure to reset and then even null out mock objects can trigger problems because sometimes mock frameworks can make use of globals under the covers.

Lastly, I would look for any external resources used such as files, databases, and/or network connections. You should never use these in a unit test case but there are times when you feel the need to include them. I would reset the state of any external resources in tearDown then re-run the offending tests in the problematic order. Usually I don’t need to look any further and all my problems go away, but on occasion…

Test cases which make use of concurrency are the most difficult to fix. Usually I use a recipe of unwinding the concurrency and making the test synchronous. This is an exercise I’ll have to explain in another post. In short, it means decoupling the concurrent piece of your logic and testing it separately. This part is usually in the form of a callback, but again, I’ll have to cover that separately. (It’s a little more involved.) In fact, this is the only true way to fix concurrency triggered failures. Every other approach is merely a hack. Many people do tricky things like adding sleeps/delays and timers. Some people go as far as to move the asserts out of the concurrent block of code! This is extremely inappropriate because you actually change the nature of what you are testing. If you can’t take the time to unwind the concurrent piece you’re probably better off removing the test case entirely. It’s not entirely right but a missing test case is always better than a faulty test case.

That’s all I have for now. I hope this long rant makes sense to somebody and/or saves time debugging. In summary you should follow the principles of testing code at all times.

  • Never let your tests depend on an external resource like a file, network connection, or database.
  • Do not use global variables in your test code or your production code.
  • decouple your concurrent logic from the place it’s being called from. (This actually means refrain from using inline callbacks and/or anonymous inner classes or lambda expressions.)

IF you follow these rules and also make sure you regularly run your tests in random order ad code a decent tearDown method in each test then you should rarely, if ever, experience an IWOMM error.

God, Code, and what’s that gotta do with me?

What do you call it when something unique and surprising happens to you? A coincidence? What about when something else even more unique and surprising occurs? What happens when a bunch of events, each one more unique and unexpected happen in series? Hi, I’m Cliff. This is my story which involves a unique chain of events which happened to me. It resulted in my having consistent access to people and organizations that many do not have while landing me on several journeys where I experienced different people and cultures. It is a story that can best be titled, “I ain’t ‘posed to be here!”

First, some background is in order. I don’t have a college degree. I am not the most handsome person in the room. I am not smart, wise, or even witty. I do work out on occasion but I am by no means strong. (I struggle, like Damon Wayans said, with 90lbs on the bar.) I am that kid from school that should have been picked on way more than I was but somehow always got over.

I want to share my story to clarify why I don’t take credit for anything that has happened to/around me. This is solely my account of what I observed in 40+ years of sucking in oxygen and expelling CO2. I recently posted about my 20 year anniversary in my professional coding career. I explained how my wife and I came up from next to nothing. What I didn’t explain was how blessed I’ve been ever since.

In my years since becoming professional I’ve managed to have some incredible experiences. I started at a company called Seagull Lighting in Delran, NJ. There I worked on an AS/400 system and built out a client/server parts & inventory GUI using VB6 and ODBC to run stored RPG procedures and pull records back. I was then fortunate enough to get my first relocation package and move my family out of the tight 1 bedroom apartment to a slightly less tight 2 bedroom apartment as I worked at R.R. Donnelley & Son’s. There I was part of a major $10 million project which resulted in a new Donnelley facility being erected right off Rte. 30 in Lancaster PA. It was my experience with VB and stored procedures which created this business opportunity. Also, it was my earlier streak of coincidental fortune that allowed me to have this unique experience. I won’t elaborate but the short story was that the deal almost didn’t happen and it came down to the wire when I had a MAJOR break through substituting the OLE/DB driver with ODBC and literally saving the day, the deal, and probably several folks jobs. $10 million dropped into the business which came directly out of Jesus’ bank account.

Fast forward a few years later where I worked at a small startup. I didn’t do anything as phenomenal as landing another $10 million deal but I did work on some cutting edge (at the time) tech. Everything from Java RMI, to Linux, to EJB/Servlets. I wrote a lexer/parser which parsed and rewrote Java Source files injecting a special String attribute in each and every class including inner and anonymous classes. It was part of a Java WebStart like tech which had a backward scaling feature Web Start lacked. I can go into way more detail but let’s just say I got into some really crazy JVM based shenanigans at this company. The funny thing was that there was never any pressure. I was mostly free to play and explore.

Years later I was blessed to work for MapQuest where I got into mobile. It was there around 2009 when I wrote an early Siri prototype using (ironically) the same voice that eventually became the default Siri voice. (This was the Samantha voice package from Nuance.) I did this work years before Siri, before there was even any voice capabilities on iOS. It was a passion project I worked over a year on. (I quietly started the prototype on Blackberry before iPhone was released.) By now I established a pattern of playing with random tech and I kept being fortunate enough to have the time and resources to do so. I had the most elaborate setup of any developer in our office and I was sooo not senior! The Text To Speech part of my concept was eventually worked into the first ever free voice guidance app released on iPhone, MapQuest 4 Mobile. This was another gift from God’s bank account, not my doing at all but entirely His work. I also did a bunch of other random/crazy stuff there like naming and animating the MapQuest star logo trying to make a recognizable character out of him like the GEICO Gecko, trying (and failing) to start an ad campaign slogan, “There’s a Map For That” and striking out on a hackathon because I was more obsessed with TDD than the app we built. LOL, Good times!

I was eventually relocated (for REAL this time) to Silicone Valley when I got hired by Skype. I did some amazing work there as well but much of it went unrecognized. I built the first Video Mail prototype working with a team out of Russia. I brought my earlier Siri prototype to a hackathon that never happened, I eventually won another hackathon building a Skype voice assistant, I built an early prototype of a realtime language to language translate feature into Skype for Android, and other some stuff. This is when God started to show off as I travelled around the world frequenting places like Sweden, Estonia, Amsterdam, London, and Moscow. I was also part of a Skype promotional event where I got to meet and hang out with the cast from the Marvel movies on a red carpet event. I watched both Captain America Winter Soldier and Guardian’s of the Galaxy premiers in the theater with the actual actors… in the same breathing space! I was invited to the after party. This was on repeated occasions.

Since moving to Cali I’ve been fortunate to work at many of the big name tech companies, Microsoft, Apple, GE, and Samsung. At each company something amazing happened.

Traveling the globe, hanging out with celebrities and the like are activities reserved for those attractive, brilliant, talented, muscle-bound, or those with any combination of these traits. The opportunity to meet and shake hands with the actual super heroes I grew up idolizing sounds like something straight out of God’s playbook.

I am merely summarizing a small amount of the highlights that come to mind when I reflect. Each one of these moments was either initiated or spear-headed in prayer and Bible study. As a software developer I’ve learned to be pretty keen at observing patterns. The one pattern that has been 100% consistent is where there was prayer in my past there was also huge blessings. Truth is there are far more memories and events that I could include. Also, I am really not that good at computers… really! I’ve failed more tech interviews than I can count and have made a fool of myself with some of the most basic tasks professionally. There are details behind these above stories that sound straight out of a Hollywood blockbuster event. There are also some dark moments that are equally as dramatic. I’ve learned to be just as grateful for these moments for reasons I can’t explain without rambling on for several hundred pages.

When I look back there’s only a few ways I can described what happened and continues to happen to me over the years. I can say, “golly gee wiz! That was an amazing string of coincidences!” But that would just sound stupid because nobody begins their sentences with “golly gee wiz”. I COULD say, “I did it all by myself because I am this super awesome attractive tech guru who has a way with computers and whom nobody can say ‘no’ to!” That’s also silly because, as I’ve said, I failed more interviews than I can count and also I was recently caught squelching exceptions with silent catch blocks *yikes* in professional Java code. (Plus I’m not attractive.) Instead I will just continue to say what I’ve been saying all along. I am blessed.

Happy Friday!

Another week down and I’m trying to motivate myself for some weekend developer activity. I’ve been out of it lately and taking a hiatus on #SaturdayCoding but this has to stop. Hi, I’m Cliff. You’re probably here because you write code. (It’s either that or you know me from high school or seen me at church. If you’re part of the church crowd don’t run off! You might pick up something useful!) On the drive home I was seriously thinking of picking back up on Android development. Then when I hit the front door I began considering my unfinished robotics projects. It’s so easy to get distracted, however I feel like I should re-acclimate with Android Studio as it’s been so long!

The last serious bit of Android code I wrote was close to a year ago when I was helping to build out an SDK. I’m not even sure what an Android app would look like these days! So much has changed. Should I continue to use Java? Should I tackle my next project in Kotlin? How about writing a game in Lua?? I do have some overdue work on another hybrid app I started a while ago. That means more Javascript/HTML which has all of a sudden become the only tech I use these days. (I never thought I’d be so heavily into browser tech but here I am!) The project also involves a nodeJS backend which I might try to tackle with Ruby/Rails instead… just for practice. All these languages feel so long in the tooth. I desperately need a change. I am so itching to do something with Lua embedded in a C++ thing with some OpenGL touches for good measure.

I know! Maybe I could dive into the Android NDK and stretch my C++/Lua wings there! Or maybe not… This hybrid project is calling me. It’s a promise I made to a friend that I shouldn’t let sit too much longer. Enough rambling for now. I really should to fire up one of my IDEs. Which one do I choose???

[ ] IntelliJ
[ ] Android Studio
[ ] Xcode
[ ] VSCode

Something’s wrong with my Pumas

Maybe it’s ironic that I decided to wear my Puma sneaks to work today, on the very same day I get into trouble installing the puma gem. Maybe it’s ironic that I tweeted something whacky about my Pumas just yesterday. Maybe it’s also ironic that Alanis Morissette decided to collaborate with me on this blog post. (Okay, that last point isn’t totally true.) Hi, I’m Cliff. You’re here because you don’t wear Puma sneakers. I’m here because I spend so much money on my family that I can’t afford to upgrade my kicks.

Just the other day I felt like I finally mastered RVM/Ruby/Rails. Today I hit another snag. Hold up though, this snag wasn’t as bad. You see, I think the Lord allows us to have trouble installing software like RVM in order to prepare us for the devil that comes out when you start installing other software like the puma gem. If I didn’t pay particular attention and read my error messages I would be scratching/snatching another bald spot into my scalp. The error I was getting was in the middle of a bundle install when it hit the puma gem. The last part of the error was:

3 warnings and 4 errors generated.
make: *** [mini_ssl.o] Error 1

make failed, exit code 2

Gem files will remain installed in
/Users/c.craig/.rvm/gems/ruby-2.3.3@tutorial/gems/puma-3.4.0 for inspection.

I could have figured it out from this text alone but I looked further up in the error messages just to be sure.

make "DESTDIR="
compiling http11_parser.c
ext/http11/http11_parser.rl:111:17: warning: comparison of integers of different
signs: 'long' and 'unsigned long' [-Wsign-compare]
  assert(pe - p == len - off && "pointers aren't same distance");
         ~~~~~~ ^  ~~~~~~~~~
/usr/include/assert.h:93:25: note: expanded from macro 'assert'
(__builtin_expect(!(e), 0) ? __assert_rtn(__func__, __FILE__, __LINE__, #e)
: (void)0)

This looked suspiciously like the error I got the other day. The problem seemed to be related to compile errors where the compiler was using the wrong version of openssl headers. I tried to use the same command line flag to see if the error would just disappear but that wouldn’t work.

gem install puma -C --with-openssl-dir=$HOME/.rvm/usr

Then I thought I would just upgrade to a different/newer version of Ruby instead of using the problematic 2.3.3 version that first introduced the problem. After upgrading to Ruby 2.5 I still saw the error. After a bit of Googling I found that I just needed a slightly different variant of the command line flag to point the gem installer to use the same openssl headers I installed for Ruby 2.3.3. The command to install the puma gem turned out to be:
gem install puma -- --with-opt-dir=/path/to/custom/openssl

I ran that and my errors went away! All in a day’s work! The lessons learned here are

  • Don’t panic when a given gem fails to install without errors.
  • Read your error messages carefully even/especially when you don’t understand them.
  • Don’t wear Puma sneakers to work.

Of all the bullet points the last one is most important.

Can’t see nothing but the source code, I’m trippin’

We begin another year with more Ruby/RVM drama. First, a recap: In our latest episode, filmed last Friday, we discovered a problem with Ruby 2.3.3 and openSSL on OSX.

Me: rvm install 2.3.3

OSX: Nah, bruh! You are not slick enough, nor do you possess the lyrical skills to master this pristine version of Ruby. Get ya weight up!

Me: What the???!!!

Me: rvm reinstall 2.3.3p222

OSX: Srsly bruh? I said nah! Come back when ya game is tight! (Oh and your hat is plaid out!)

Me: How does this have anything to do with my game???!!!

Me: rm -fr ~/.rvm

Me: [repeats above steps with slightly different “game”]

Several iterations later we found the magic to satisfy some build-time macro that was getting in the way of the installation “game”. Hi, I’m Cliff. You’re here because you ain’t got any programming “game”. I’m here because I actually thought my baseball cap look was stylish when it really ain’t. In either case we now have a working Ruby installation but no way to properly install and run bundler. For those who don’t know, bundler is a Ruby gem that works similar to npm in NodeJS. It manages dependencies.

I’ve spent the better part of my morning arguing with my command line in failed attempts to bundle install anything. What I get are various errors indicating a missing executable in some user directory of some sort. It’s not immediately clear:

You're whack and I cannot load such a file... $HOME/.rvm/rubies/ruby-2.3.3/lib/ruby/gems/2.3.0/gems/bundler-1.16.6/exe/bundler (LoadError)

I’m paraphrasing the error slightly, but you get my point. This comes after a clean RVM install of Ruby 2.3.3, which I just learned is “a ruby that requires 2 patches just to be compiled on an up to date linux system.” I was so generously warned about this post install. It’s also after a successful gem install of bundler with that same Ruby. So I was thinking it’s as if my environment is set to use some default or global version of bundler. The confusion is that bundler is not installed with the 2.3.3 Ruby I pulled using RVM. So I’m not quite sure why it’s looking in that path or bundler. I don’t have enough Ruby experience to know the difference between user installed, system installed, default and/or global gems so then I was stumped.

Believe it or not, I got all the way to the above sentence where I said, “I’m stumped” before the obviousness of my problem jumped out at me. It really jumped off of my LCD display and slapped me across the face like, “C’mon homie! Don’t act like you can’t see what’s wrong here!” I was issuing all of my bundle commands with a trailing r! I know I’m not the only person who confuses "bundler install" and "bundle install"

Installing software that installs software to write software

I should be home right now but I can’t leave the office until I document what felt like an extreme waste of time. Hi, I’m Cliff. I write software. Sometimes I write software that installs software. Sometimes the software installed by software I originally wrote is intended to install other software which I’m not clever or available enough to write. Sometimes the software installed by the software installed by the software I originally wrote… are you following me? It’s cool if you’re not.

Today’s pain came from RVM and Ruby version 2.3.3 on OSX. I hit a bug that I am almost certain I ran into before but I don’t have any evidence of it on this blog. Today I am generating the evidence. Github user TheZoq2 solves the mystery in this thread.

Error running ‘__rvm_make -j8’

In short, This particular version of Ruby depends on openssl headers that don’t match the openssl installed by the Xcode developer tools. The solution is to install the Ruby openssl package, and reinstall Ruby 2.3.3 while pointing the C compiler to its headers.

$ rvm pkg install openssl
$ rvm remove 2.3.3
$ rvm install 2.3.3 -C --with-openssl-dir=$HOME/.rvm/usr

Short story lengthened… You wouldn’t know that from the above error. The only way you could figure this out is by reading the entirety of the error message. Somewhere after the rvm install fails it tells you to look inside a log file for details. Somewhere inside this log file you’ll see evidence of the make build system choking on macro arguments and the like.

So, in summary… if you wanna suck at programming, install Ruby version 2.3.3 via rvm. You won’t burn down your development machine doing so but you also won’t have any hair left on your head, eyebrows, or eyelids after several attempts to make sense of what “-j8” means.

Things they never taught in Kindergarten

Things I Don’t know as of 2018

Inspired by Dan Abramov, I wish to make a formal confession about all the tech stuff I still don’t know after coding professionally for almost exactly 20 years. This is on the heels of the tech confession discussion in the #CodeNewbie community and right around my 20th anniversary of becoming a professional programmer. The following is more of a knowledge wish list than a formal confession of how stupid I still am. But know this… I am still stupid and there’s so much obvious stuff that I wish I currently knew. (…or is it know??? For eg. Grammar!) As I get older I realize there are soooo many things they failed to teach me in Kindergarten! Above all, I wish I was better at the classic tech interview leet coding data-structure/algorithm thing and I list that first. My actual skill set is so deep and wide in so many areas but still these other skill sets have eluded me over the years and I remain a newbie even 20 years in…

* Algorithms/Data Structures: I totally suck at interviewing! I can do quick sort and maybe marge sort. I can tell you how to build a hash table, but that’s about it! Many of the interviews I’ve been on seem to require extensive understanding of these topics which infuriate me because I suck at it! I also hardly ever use this knowledge in practice and feel you can get so much value out of other aspects of software development which are never prioritized or even considered during the “tech interview”.

* SSL – SSL might as well stand for Slippery SLope because my knowledge cuts off right after “it is used in combination with http and email protocols (SMTP?)”, and “…port 443 is used for https.” I know I usually have to install a bunch of SSL/crypto dependencies when setting up any server or build system that uses SSL and that these dependencies do some sort of magic hashing and message digesting but that’s ‘bout it!

* CSS/SASS/LESS/Pre/Post processors: I tinkered with CSS a few times here and there but if you ask me about these modern tools or how to do animations I’d be mostly lost.

* GraphQL: I took a course on React full stack which used this tech extensively. I hobbled through the course and finished it but I still don’t know how any of GraphQL works. The course I took had tons of bugs do to version differences, most of which I actually fixed as I took it. At the end, I was no more smarter than I was at the beginning.

* OAuth: I understand the concepts of OAuth, I’ve worked extensively with projects that required it, but I still feel like I need a separate class or set of instructions to come up to speed.

* Ruby/Rails: My Ruby experience has been relegated to a handful of command line Ruby scripts I wrote a few years ago. I am currently working through tutorials to learn Ruby and Rails. I feel like I am sooo overdue.

* Python: I should be shot for adding this one! I’ve actually taken a two week course on it and developed entire solutions with it! I wrote and maintained an entire test framework and suite with Python and gave my Cozmo bot a personality using it a year ago. Somehow, every time I start anything Python related I have to go back to “Hello World”. This is not so with any other programming language from Java to Obj-C to NodeJS/Electron/JavaScript to C++!

* Kotlin: I intended to write a book on Kotlin for Android some years ago but life got in the way of my mastering or spending any time with this technology.

* Real Time streaming: I wrote a few programs trying to master UDP and converted one of them to TCP after realizing how much I didn’t know about UDP. I would absolutely LOVE to become a network programming expert!

* Network Stack: At one point I tried to think about possibly contemplating my writing a DNS server. Don’t ask why! It just seemed cool at the time, never mind the fact that I have zero knowledge of network topology! I know the basics of how computers resolve IP addresses via DNS and DHCP, but I would kill to really understand the low level conversation that happens as clients babble back and forth over the network. I’m talking about reading raw SMB, really understanding how LDAP works, writing my own proxy server, etc.

* Kubernetes: There’s been so much talk about Kubernetes and I feel like I never get to play in any reindeer games!

* CORS/XSS/CSRF tokens: I just did a deep dive on this topic today so I really can’t include it anymore, but only hours prior I couldn’t tell you the difference between these terms or why you would use one and not another.

* OpenGL – I read some blog article many years ago (about a decade now) which illustrated how to do OpenGL-ES on iOS v3 and it was the coolest thing! I got my first black triangle then everything went dark. I haven’t touched OpenGL in any form since.

* DirectX/Metal – You might as well lump in DirectX, Metal and any 3D rendering concept because I suck at all of these. There is the basic 3D rendering APIs on iOS that I used to be really good at but I can’t even remember the name of the API now since it’s been about 10 years. (I think it was Core motion? Core something or other…)

20 years, Going strong!

I just realized that I recently passed my 20 year professional programming anniversary! It was twenty years ago on December 9th when I walked into the happiest day of my life! My daughter had just been born the night prior, and I was finally able to afford the tight 1 bedroom apartment my girlfriend (now wife) and I had been scraping by in! There is so much that had to go right in order for me to type this blog post so blissfully today. I’ve told this story to friends, family, coworkers but it still humbles me to this day. I have to begin with a dramatic scene opener to legitimize everything.

The year was 1998. I was making just above minimum wage at $6.05/hr through a temp agency called Manpower. (I think they still have an office right down the road from where I currently live which gives me flashbacks!) They gave me a multiple-month assignment at a lighting company. Only months prior I had been living in my mother’s basement unemployed with a 40oz of beer each day playing Sega Phantasy Star & other classics. I was not in college, nor had I attended any more than a single semester of community college. I was currently enrolled in a tech school called The Cittone Institute, where I was learning and getting hands-on experience in various programming languages, one of them being RPG. I was also really concerned because my girlfriend was pregnant, Christmas was coming and my temporary assignment at this lighting company was not supposed to last into the following year.

My job was to function as the file-boy. This means any menial task from stuffing envelopes to organizing the mail room was given to me. I was astounded, but bored out of my mind. I was astounded because I always wanted a permanent comfy office job like you see on TV. However I was bored because I wasn’t doing anything cool. I wasn’t in a 3 piece blazer standing at the head of a conference room giving a presentation. I wasn’t in charge of any portfolio. I didn’t even know what a portfolio was aside from how I heard fancy folks on TV talk about them. They would say cool stuff like, “I’m taking over that portfolio…”, or, “I’m the guy in charge! Haven’t you seen my portfolio?”, along with the occasional, “don’t talk to me that way or I’ll bust you upside the head with my portfolio!” I lacked a fancy suit (aside from my one church outfit) and I didn’t have a portfolio.

Times were tough and we were on the WIC program which, I believe is ONE step above food-stamps. This gives you permission to act like you ain’t poor because it’s just government assistance. By day I was constantly applying to any office position that would eventually give me a portfolio and I spent nights learning stuff like VB6, SQL and C. I was also enrolled in a Bible study night program. I had a bit of a hustle going on but still, when I was at work, I was bored out of my mind!

I still remember the nice ladies in the office I worked with. These were your typical clerical workers with various positions ranging from accounts receivable, to data entry, to parts/inventory clerk. Each one of them seemed so important to the company and each one of them appeared to have a life while I was wasting away in the back mail room quietly listening to Hip-hop music on this little FM radio that someone left back there. Occasionally I would get a task like, “pull all the papers out of these folders and sort them in those cabinets”, or “find the 2 1/2×3 1/4 labels for the next parts and inventory instruction manuals.” These ladies were pretty cool though. One, I believe her name was Helen, organized an office collection for our yet-to-be-born child and got us a bunch of gifts. The other, a sistah, was constantly trying to get me involved in her role of the business and treating me like an equal although I lacked the skills/education to be anything more than a file boy.

One day there was a task that sounded like a true need. Actually office work which involved the use of a computer! I believe Helen organized it but the sistah (I honestly can’t recall her name but I always thought she was pretty fly) set me up with my own computer at a desk. I think the women all felt bad watching me occupy space with no meaning. They wanted me to feel at home. I thought this new task was more busy work. I usually would have been upset but this busy work was in the form of something I could actually process! They had an Excel spreadsheet of some 200-500 addresses that they wanted me to type into a Word document filled with labels. The task was intended to occupy me for the remainder of the week or possibly the remainder of my tenure, depending on how inefficiently I operated.

Within 15 minutes I had all of the labels completed and printed which shocked everyone in the office. One of the ladies was constantly double checking my work not sure if I somehow fabricated the labels or took some shortcut. “How in the world are you finished already?”, said another.

I replied, “I used a mail merge” I had just learned Word/Excel data merges the week prior at tech school and this so happened to be the perfect opportunity to practice. It actually took me a couple of tries to get the data imported into Word because I was inexperienced but after the 3rd or 4th take I had it. Everyone in the office was floored as they actually had a need for this rapid sort of data merging. Nobody had heard of it prior and it was something short of a miracle.

That one experience led to my being introduced to the head of data processing, a software engineer by the name of John. John looked EXACTLY like Santa Claus (I am not making this up either) and he took a special interest in me. You see, I just so happened to be fluent in RPG, which was the only programming language they used on his team. His team consisted of himself as manager, one sole programmer-hermit guy, and a lady who would be considered the ops engineer by today’s standards. At first he tried ti get my hired by any of his friends in the industry and scored me an interview with a lady named Nora. The interview never resulted in a job so he eventually scheduled me for a tech interview test. If I were to pass the test I would be hired at the very same company (and maybe even given a portfolio?) The test fell on December 8th.

December 8th, 1998 would be the day that remains forever burned into my memory. I light-footed into the office because I was extremely nervous. My girlfriend had gone into labor the night prior and I was up the entire time wondering if/when I would be a father. Up to this moment I hadn’t actually thought about what fatherhood really was. I was only focused on getting a portfolio. In my mind a portfolio was this magical adult trapper-keeper with laminated pages of awesomeness that was meant to be carried in a briefcase and pulled out during important office meetings where its contents would be mirrored on a task board next to you. This same task board would have been hand colored by your office secretary. If someone were to disagree during one of these important meetings, you could then politely organize a private meeting where the adult trapper keeper could be weaponized against the offender.

I felt like I was only hours away from being blessed with this long time coveted mystical piece of office supply but I could no longer dream of it because somewhere many miles away (my girlfriend lived about an hour’s drive away and was currently in the hospital in her hometown) a tiny replica of me was about to make a dramatic entrance into the world. The task that John gave me was simple. Write a subfile program to display a list of items. Extra credit for being able to drill into an item and get detail. It was the RPG equivalent of a CRUD web app. First butterflies then later bumble bees swarmed in my belly as I stumbled through writing the first “subfile” program which would eventually launch my career. I used the entire day spending most of it on random calls to the hospital checking in on my soon to be family but I finished just prior to 5pm. I turned in my assignment to John who completely understood why I needed to rush off.

Roughly 10 hours later I found myself in the hospital holding what truly was a human clone of me. Family and friends were there and the feeling of uncertainty about my possessing an all powerful binder was completely replaced by the warmth of becoming a father for the first time. I didn’t see binary digits, I had no thoughts of compilation units or office prowess. I only felt love.

The next day I was back at the lighting company and greeted by the HR guy. (There is an entire story I can share about my experience with this HR guy but it’s not relevant.) I was given an offer to become a permanent employee, along with paperwork describing the benefits, my compensation, the company’s mission, and other misc things (excluding an employee handbook which is part of another story involving the HR guy, but again not relevant). All of this information was tucked neatly inside a binder sporting the company’s logo. It wasn’t actually a portfolio but it was thick enough to be weaponized if I were to be caught in the wrong section of town. My compensation jumped dramatically from 6.05/hr to $9/hr and I was RICH! I bragged to my girlfriend that same day while I silently hummed the theme song to “The Jefferson’s” in my head. She was so battle-torn from pregnancy that she heard none of my rambling about my special binder or “moving on up”.

As I look back on this series of events, the only thing that truly tied it all together was my involvement in the Bible study program and constant prayers. There is no other explanation for the string of consecutive miracles that had been all daisy-chained together which eventually landed me in my current role. I tend to exaggerate on this blog while fabricating stories but this story, in its entirety, is 100% accurate and true. It highlights only a fraction of the events that brought me to where I am and if I were to describe some of the others it would most certainly sound like the script to an upcoming Hollywood blockbuster. I wish I had some clear way of explaining but I definitely see the correlation between the Bible, my life in software, my experiences in the military, and my life as a parent.

I’m a guy with a high school education who has been at many of the biggest tech companies working on some of the most prominent projects that most people use all day. Most of what I’ve done I never actually “tried” to do… it just sort of happened.

Service Workers With Create-React-App

These days Service Workers are the latest craze in web apps. They are specifically in the area of Progressive Web Apps (PWAs). I’m futzing with a React app trying to get my own custom Service Worker logic to run and I hit a snag. Hi, I’m Cliff. You’re probably here because write web apps. (I still think it sounds funny to say “write web apps”. I think of physically writing with a pen and a pad when I say “write” and nobody writes any programming logic with anything other than a source editor… unless you’re extremely hard-core! In which case, I think there should be a contest on the most advanced computer program actually written with traditional tools, like a stone and chisel. Am I still typing under parenthesis?)

Yesterday I realized that the popular automation tool, “Create React App” or CRA for short, was never intended to be used with anything other than some caching service worker logic. If you try to do anything beside offline support you’re probably going to need to “eject”. If you’re new to React, “eject” is the last thing you want to do. To “eject” means to own all of the configuration that CRA offers which means you are now in “I know what I’m doing, don’t tell me nothing!” mode. In short, it’s not a good mode to be in because when you get that far you are basically writing your own Create React App tool.

At any rate, my task was to figure out if/how we could use a service worker to enable some sort of push notification support in our app. I’m still working through the details so I should probably wrap this up and get back to it. Before I close I did wanna share a couple of nuances. First, you won’t be able to easily add your own service worker logic to a react app for a few painful reasons. The registration script, which looks so innocently easy to change on the surface, actually locks you into using ONLY the service worker which is generated by the CRA tool. It looks to see if your browser has support for service workers then it tries to fetch the service worker by name. You can change the name of the file it attempts to fetch but then there’s the wrinkle of how to get a custom Javascript file to be individually pushed to the output folder without being webpack-ed in with the rest of your React files. I hacked one directly into my build output folder which sorta works but then… THEN… there’s this OTHER wrinkle! The JavaScript file, when fetched, has to be served with a Content-type HTTP header that includes “javascript” somewhere in it. Here’s where it’s ugly because there is a noop-serviceworker-middleware plugin included with the dev server and support stuff in webpack which always serves the file with Content-Type equal to “text/plain”. I dug deep in the source and found that it will ONLY use Javascript in the content type if the file name is EXACTLY equal to “service-worker” and this value is a HARD-CODED string! Now I could remove the check from the register ServiceWorker script but it just feels ugly at that point.

Time is going by and I should get back to the salt mill and figure out how to make all of this play nicely together. In the meantime, if you know of any CreateReactApp hax or work-arounds that would make life simpler please speak up!

Hi Super Nintendo Chalmers, I’m Learnding!!!

It was one of those surreal moments when I was looking at some idiomatic JavaScript code illustrating the newer features of the language when I couldn’t follow the syntax. Then it clicked, I had a Ralph Wiggum moment. Hi, I’m Cliff. You’re here because I just learned how to spell cat. I’m here because I like the way the cat meows.

I’ll give you an example of some Redux code that tripped me up:

import React from "react";
import { connect } from "react-redux";
const mapStateToProps = state => {
  return { articles: state.articles };

const ConnectedList = ({ articles }) => (
  <ul className="list-group list-group-flush">
    {articles.map(el => (
      <li className="list-group-item" key={el.id}>

const List = connect(mapStateToProps)(ConnectedList);
export default List;

My understanding was just based on React. In React I could recognize ConnectedList as a functional component, or a function that returns the rendered part of a React component which does not need an entire class definition. I could also make sense of the redux magic that connects the state’s articles object to the articles property of the ConnectedList. What I couldn’t follow was the absence of any props parameter or references in the ConnectedList. I also was a little blurred on the initialization of the List object just prior to the export. It all looked a little foreign to me. Bear in mind, I’m still coming from a “Just Learned 1998-style JavaScript Last Night” background and the whole ECMA6 ES2015 stuff is still taking a minute to bake in. then it just clicked… automatically! I instantly recognized everything that was happening as if I had been working in this environment my entire career! Let me try to decompose this block and explain how I understood it.

ECMA6, destructuring, arrow functions, etc.
There are many new features in ES6 which give you enhanced expressiveness in your code. These features are borrowed from or inspired by similar features in other languages. Having several years of experience in other languages which expose features like closures, default return values, and collection destructuring, I tend to pick up on patterns. For eg. a piece of code that looks like this conveys a certain meaning or intention:

accounts.map.(each => each.name + ', ' + each.phone)

It intends to change a collection of account objects into a collection of strings of name and phone numbers separated by a comma. It doesn’t fit my 1998 JavaScript way of thinking but my RxJava/Groovy/Kotlin/Swift/Python brain pulls pieces from its database and fills in gaps. These gaps are put in place by my early ECMA6 understanding. You see I know ECMA 6 adds a bunch of modern features and semantics but I’m not sure which ones. I know these other technologies include features like map/reduce. They also include other niceties such as being able to define a closure in place, optionally omit the enclosing curly braces, and optionally omit the return keyword. If I look at the outer piece as a vanilla Javascript function call that takes some newer Javascript syntax I get this:

accounts.map.(/*magical Javascript new stuff*/)

That much I can comprehend. It says we are probably using some newer map/reduce coolness to iterate a list of accounts. Nothing too intimidating, right? Now lets take the inner guts or magical Javascript parameter syntax and try to make sense of it.

each => each.name + ', ' + each.phone

This looks a lot like a Closure or anonymous function. It’s weird because there’s nothing around the naked initial each parameter, but that’s okay because many other languages make defining the function parameter with official types and parenthesis optional so maybe it’s optional here too. Also some languages make enclosing curly braces around the function body optional. It’s called syntax sugar. so I’m thinking the curly braces are optional in ECMA6 too. Lastly, other languages make it optional to specify the return keyword. Instead it is accepted in some languages to use the value of the last statement in a function as it’s return value. With that understanding in mind I can read the above as:

(each) => { return each.name + ', ' + each.phone; }

Which actually makes me understand the original single line statement as:

var closure = (each) => { return each.name + ', ' + each.phone; };

Now that you get an idea how my multi-language brain operates let’s get back to the first piece of React/Redux magic that threw me. We have this:

const mapStateToProps = state => {
  return { articles: state.articles };

Which we understand as a closure or an anonymous function which is assigned to a variable named mapStateToProps. This function takes a state parameter and returns an object with an articles property which is set to the value of the articles property of the given state object. In essence, it merely transforms a state object into an object with a single property which is the articles property from the state.

Next we have this code, which really troubled me:

const List = connect(mapStateToProps)(ConnectedList);

The 2nd set of parenthesis triggered a thought. The Groovy programming language side of my brained jumped in here and said, incorrectly, “Ooh! I know what this is!!!” You can pass a closure parameter to a function outside of the closing parenthesis!!!” Then this part of my brain smiled intently just prior to running off to grab a donut. This was totally incorrect. Instead what’s happening is we are calling a function named connect and passing our anonymous function value as the parameter to this function. The connect function is actually returning a function, which we call in place and pass the ConnectedList react component. So, in actuality, connect is transforming the React functional component into another functional component and it is using the mapStateToProps function to do this.

But wait! What about this piece of code?

const ConnectedList = ({ articles }) => (
  <ul className="list-group list-group-flush">
    {articles.map(el => (
      <li className="list-group-item" key={el.id}>

It almost looks like how I remember React functional components would look but there’s not props parameter. Instead it uses this weird syntax:

const ConnectedList = ({ articles }) => (
  /*JSX stuff here*/

Again, we’re missing enclosing curly braces and a return statement. We can mentally add those and come up with this:

const ConnectedList = ({ articles }) => { return (
  /*JSX stuff here*/

Still there’s the weird parameter definition, “({ articles })”. My Python/Kotlin brain center kicked in and reminded me about object de-structuring. These languages allow you to decompose tuples or objects and literally declare and assign multiple variables in one shot. The pattern looks like this:

var {name, address, zip} = profile;

which is equivalent to:

var name = profile.name, address = profile.address, zip = profile.zip;

This is not the exact syntax from these other language, just pseudo code to illustrate the pattern.What this code does is take the name, address, and zip properties of the profile object and assign them to the name, address, and zip variables respectively. That’s a brief explanation of de-structuring. So maybe what’s happening is the props parameter is being de-structured into an articles variable. With that understanding we can read the original code as:

const ConnectedList = (props) => { 
var {articles} = props;
return (
  /*JSX stuff here*/

This is just a little more syntax sugar that cleans up the noise of what would be a bunch of “props.” references in your code.

That’s a bunch to take in at once but it’s how I was able to make sense of some initial Redux examples without actually looking up the new features from ES6. Ultimately I referred to the new feature list to confirm my understanding but I was able to go a long way on my own.

(This message was brought to you in part by NBCC Community Church in Redwood City. Through constant prayer, Bible study, fellowship, service, and teachings from Pastor hurmon Hamilton one can understand even the most challenging programming environments. Other sponsors advise you to eat your veggies and always get at least 7 hrs of sleep nightly.)