Craft Web Design + Development
Brendan McKeown

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.

Check out my resume.

HTML5 Video in iOS Safari with HTTP Authentication Won't Play

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.

Read More

Move MP4 Metadata to Beginning of File

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.

Read More

Encode Webm Videos for HTML5 Video

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.

Read More

Triangle Shape Generator Mixin

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.

Read More

Smooth Scroll to Page Section

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.

Read More

D.R.Y. Breakpoints in SASS

In my opinion, I like to write breakpoints inline with my selectors when using SASS. This way, I don’t have to write the selector more than once, and styles for every breakpoint can be found in one place.

Read More

A Simple Pointer-Events Polyfill

If a browser does not support the CSS property pointer-events, you can use this simple javascript polyfill to manually forward your click/touch/mouse events onto a different element. This came in handy for me when I needed to ignore a layer mask in a photo editor so the user could drag & drop the image underneath.

Read More