Get Video Thumbnails from YouTube & Vimeo

On WordPress websites, I often add the ability for clients to add videos to their content, and while I use Advanced Custom Fields to achieve this, I don’t use the oEmbed field type. This is because often the video cards feature custom play buttons, additionally as it turns out – clients really like being able […]

Pointer-Events: None – Game Changer

This might sound familiar: The Problem An absolutely positioned div with a transparent background is stacked on top of a link that needs to be clickable. The Fix Futz around with z-index values until you manage to get the clickable element positioned so that your mouse triggers cursor:pointer on hover. NOPE! Okay, so that fix […]

Clean Phone Numbers

This is handy when adding call links with ACF content. $phone = (307) 555-1234; $clean = preg_replace(‘/(\W*)/’, ”, $phone); echo ‘<a href=”tel:+’ .$clean. ‘”>’ .$phone. ‘</a>’; TA DA

CSS Transforms Cheatsheet

2D Transform Functions These occur along a cartesian plane with an x & y axis. X-axis: horizontal / width. Y-axis: vertical / height. Scale Function Used to transform the size of elements. How to Use: transform: scale(x); // width and height are multiplied by x. transform: scale(x,y); // width is multiplied by x. height is […]

CSS Transitions Cheatsheet

Properties: span { transition-property: color; transition-duration: .5s; transition-delay: 1s; transition-timing-function: ease; } → Check out which CSS properties you can apply transitions to here ← Shorthand: span { transition: color .5s 1s ease; } Apply Transitions to Multiple Properties: span { transition: color .5s ease-in, background .2s linear; } Apply Transitions to All Properties: span […]

Sublime Text Packages

While noodling around on the internet, I found the following round-up of helpful Sublime Text packages for front-end devs. → Check it out here ← I’m super excited to give the Emmet package a whirl – check out this gif, I mean come on! I’m also interested to see how using the SCSS package changes […]