Hey there. I’m a front-end developer and web designer. I'm all about creating websites and web apps that look and perform flawlessly on any device using HTML, CSS, and Javascript. I enjoy utilizing libraries, frameworks and preprocessors that improve efficiency and reduce confusion.

Vertically centering an element with a known height is relatively easy – it's when you don't know the height of said element when things start getting tricky. Luckily, there's an easy way to center these mysterious elements using psuedo elements, inline blocks, and vertical alignment. Unfortunately, this method does not work when either parent or child element is floated.

When writing unit tests using phpunit and ecomdev for Magento, you can run into problems when testing methods that make calls for a session singleton instance, such as adding messages to admin/session. For example:

A vanilla Magento install is not conducive to development; there are a few configurations that should be made in order to make your life as a Magento developer much easier. Why make it harder on yourself?

I ran into an iOS Safari bug recently where a HTML5 video would not play on a page with basic HTTP authentication enabled by Apache. If I removed the authentication, the video would play fine. However, with authentication turned on and after a successful login, the video would not play.

I was experiencing a HTML5 video issue in Safari and IE where it took 20-30 seconds to begin playback. Both of these browsers use the x264/MP4 encoding. The video was around 15 seconds long and full 1080 HD. Chrome and Firefox, which instead use the WEBM encoding, had less than a second delay before playback started. It turns out that the MP4 metadata index (aka MOOV atom) was located at the end of the file; so Safari and IE were downloading the entire file before playing the video. To fix this issue, I re-encoded the video file using ffmpeg and passed an additional option with the -movflags flag to move the metadata to the beginning of the file.

In order to use HTML5 video and support all modern browsers, you need to serve (as of the time of writing) 2 different source encodings: mp4 and webm. The mp4 format is commonly used in desktop media, and can be easily be encoded with programs like Handbrake. The webm format is not as commonly found. I tried the free Mira video conversion software, however it doesn't allow you to tweak any settings. On the other end of the spectrum, ffmpeg is a command-line tool that gives you full control over everything (which can be a little overwhelming at first). Here's how I went about encoding my webm video file with ffmpeg.

Until CSS shapes are generally supported, this Sass mixin will create those triangle shapes you need out of plain-ol' borders. It's great for making navigational arrows or those tiny design elements without having to create an image. Since it only uses borders, you don't have to worry about any browsers not being able to render them.

For animating page scrolling, simply using the duration parameter of jQuery's .animate() method will not produce desirable effects. This is because no matter what the distance being scrolled is, the animation needs to finish in the specified time. Handling this is easy – simply multiply the scrolling distance by a specified speed to get the correct duration for the animation.