DEV Community: Cameron Wardzala

Hi, I'm Cam

Cameron Wardzala — Mon, 24 Jul 2017 17:14:54 +0000

I have been coding for 18 years.

You can find me on GitHub as cwardzala

I live in Cleveland.

I work for Findaway

I mostly program in these languages: HTML, CSS, Javascript, Python.

I am currently learning more about being a better person.

Nice to meet you.

Solving Mysteries in Magento

Cameron Wardzala — Wed, 11 May 2016 04:00:00 +0000

Not long ago our Magento eCommerce website started logging a strange and cryptic exception.

PHP Fatal error: Uncaught exception 'Exception' with message 'Serialization of 'Mage_Core_Model_Con
fig_Element' is not allowed' in [no active file]:0\nStack trace:\n#0 {main}\n thrown in [no active file] on line 0

With no context about what this means I turned to Google. Little of the results helped trace down what the issue was. Since it never appeared to affect our users I pushed it to the side to solve another day.

Around the time the exception began, I noticed alert messages were never getting cleared. A message would just stay around until the user logged out and cleared their session.

After a few months, I found time to dig into the messages issue. I started poking around at our extension of Magento’s built-in messages class. Once I ruled that out as the source of the issue, I moved on to more aggressive measures to find the issue. I turned on every debug option I could find. With DEBUG ALL THE THINGS mode turned on I saw our old cryptic message popping up again. This led me to dig into that once again. Google didn’t provide much in the way of solutions, but it did point me in the direction of our session storage. I began poking around and looking for anywhere we put something into session. Once I ruled out string and int types as an issue, I looked at other data types. EUREKA! I found a function trying to store an instance of the Findaway_MultiCart_Model_Quote Class. Commenting out the code and reloading proved that was the source.

Moral of the story, test and look for exceptions related to new code. It’s amazing this was so easy to fix given it was so difficult to track down. This could have been quicker had PHP exposed a more useful message, or had Magento raised an exception.

Image Preloading in CSS

Cameron Wardzala — Fri, 22 Feb 2013 14:59:00 +0000

Something that I hadn’t thought about in a while was image preloading in css. The other day I sent Matt a code review because the way he was preloading an image was causing some odd behavior. We talked about it and could not think of a good solution, or better preload option so I removed his preload CSS (below).

html {
    background: url(/path/to/image.jpg) no-repeat -1000px;
}

In most cases, I think this method would work but in our case, it was causing pages with short content to have an unstyled block of white on the bottom of the page. I wasn’t sure how to tell him to fix this, we really didn't want to go the old JS route but could not find a way to do this in CSS.

Then for no reason, I was poking around the source of http://foundation.kr and found this little gem that made total sense to me.

body:before {
    content: url() url() ...;
    display:none;
}

My first thought was “Oh my gosh this is amazing!”. Then I started wondering if the image would download because display:none. I updated our code to use this method of preloading and IT WORKED! I grabbed Matt and showed him and he asked the same question I did about the display property. Because the image url is the content of the pseudo-element it gets downloaded regardless of the display property. Unlike background images which don’t get downloaded until the image display is something other than none.

And the best part about this method is you can have as many url() in the content and they will all get downloaded!

How We Grew Out of Bootstrap

Cameron Wardzala — Thu, 14 Feb 2013 14:06:00 +0000

When we started our redesign of the Cheezburger network we had the daunting task of building a front-end framework that met the needs of not only our developers but our vast network of sites. After many meetings, grueling discussions and attempts at DIY we finally choose [twitter] Bootstrap. It was the ‘it’ framework and had just reached its 2.0 milestone, so why not?

Going into this we had no idea how to take bootstrap and make it Cheezburger. We initially tried to “extend” Bootstrap by overriding styles in our own chzboot library. This proved to be less than ideal since we were duplicating code for everything we wanted to extend. Eventually, we merged our changes with Bootstrap core and forfeited any upgrade path to newer versions.

Our own pseudo fork of Bootstrap has worked well throughout. However, as our design has changed and matured we have begun to migrate away from the Bootstrap core components and build our own. It was nice to have Bootstrap to fall back on when we needed a quick UI treatment for something, but now we have our own style guide and documentation around what components to use and how to use them. If something isn’t in the style guide then we need to build and add it to the bucket of things that can be reused later.

It has become difficult to develop our own components along with maintaining existing Bootstrap based components. Finding parity between what Bootstrap offers and the needs of our sites is the one thing that has effectively driven us away from continuing to use Bootstrap as our core foundation. We have talked about completely removing anything Bootstrap from our code and rewriting components, but that is a task that isn’t logical at this time. Eventually, as we continue to mature our code Bootstrap will play less of a role.

Ultimately we grew out of bootstrap not because it’s a bad framework but because we grew up, we started needing things that were not in its core. We changed so much it didn’t make sense to continue to maintain a connection to the core library. We have maintained many of the naming and structural conventions that bootstrap employs but we don’t rely on its library of UI elements.

One thing I didn’t mention, when we made the decision to use Bootstrap over creating our own I pushed for it out of fear of “re-inventing the wheel”†. Throughout this experience I have come to believe you should not fear re-inventing the wheel, you should fear using a round wheel when you need a square one.

† I don’t want to speak for @b_sted, @marthakelly, or @trademark but this was my biggest fear going into the redesign.

Using SignalR with RequireJS

Cameron Wardzala — Fri, 09 Nov 2012 15:16:00 +0000

If you don’t know about SignalR and RequireJS

When I was building my app with SignalR and RequireJS there were two steps I needed before stuff would work.

1. Setup dependencies

I needed to wrap all my SignalR javascript so they will work properly with RequireJS.

require.config({
    paths: {
        jquery: 'jquery-1.8.2.min'
    },
    shim : {
        "jquery.signalR-0.5.3": ['jquery'],
        "/signalr2/hubs": ['jquery', 'jquery.signalR-0.5.3'],
    }
});

Using the great shim feature of RequireJS 2. I can use non-AMD compatible scripts with RequireJS without manually wrapping them in define() statements. I also set the path for jquery because it is a named module and is required by the SignalR scripts.

2. Fix SignalR $.connection.hub.start()

I am calling SignalR’s $.connection.hub.start() from within a $(document).ready(). Even before I started using RequireJS to load my scripts this worked fine. However, after moving to RequireJS this stopped working. Why? basically, SignalR will by default delay starting your connection until the page has completely loaded. Enter the waitForPageLoad option on $.connection.hub.start(). This tells SignalR if you want to wait for the page to load before starting your connection which in my case I don’t. Simply set that option to false and it will start the connection when invoked instead of waiting. This fixed my issues and SignalR and RequireJS started playing nice together. Note: I am also using a callback on start() to make sure my connection has been established before using my server methods.

$(document).ready(function () {
    $.connection.hub.start({waitForPageLoad:false},function () {
        // callback code
    });
});

Setup todo.txt CLI on OSX with Homebrew and Dropbox

Cameron Wardzala — Thu, 20 Sep 2012 15:58:00 +0000

I have recently re-discovered todo.txt the handy plain text todo list, along with its CLI. I have fallen in love with this method for keeping to-do lists, it's taggable and has search capabilities too! One of the biggest pain points for me getting started was installing the CLI and hooking it up to Dropbox for cross-platform sharing. The todo.txt docs don't provide much of a step by step getting started for OSX with homebrew, they merely say go install with homebrew and then you have to dig through the Tips and Tricks to find what different params to setup to customize your experience.

This article will walk you through setting up todo.txt CLI on OSX with Homebrew and storing your todo.txt files in Dropbox for use across multiple platforms.

Heads up! make sure to change any <your username> to your OSX username

Install todo.txt CLI with homebrew using this command

$ brew install todo-txt
Create a folder in your Dropbox folder called “todo”
Create the following files in your new folder in your Dropbox folder
- todo.txt
- todo.txt.bak
- report.txt
- done.txt
Or from the command-line, you could cd into your new folder and run this command instead

$ touch todo.txt todo.txt.bak report.txt done.txt
Make a copy of the todo.cfg in your new Dropbox folder

$ cp /usr/local/Cellar/todo-txt/2.9/todo.cfg $HOME/Dropbox/todo
Update your new todo.cfg file to reflect the location of your todo directory. This should be on line 4 change /Users/gina/Documents/todo to $HOME/Dropbox/todo
Update your ~/.bash_profile with these lines

source /usr/local/Cellar/todo-txt/2.9/etc/bash_completion.d/todo_completion complete -F _todo t

alias t='/usr/local/Cellar/todo-txt/2.9/bin/todo.sh -d $HOME/Dropbox/todo/todo.cfg'

This will give you the shortcut of t so you don't have to type todo.sh every time. It will also add tab complete to for t as well.
Restart your terminal and you should now be able to add tasks using

$ t add “My first task”

For more info about todo.txt see http://todotxt.com