Parse Twitter Hashtags, Usernames & URLs with JavaScript — auto-linking is easy!

Using the Twitter API? Need to parse links in tweets? Autolinking user tweets is a cinch with JavaScript! In this post, I’ll show you the method I used when building Twitscreen to display real-time tweets.

As part of the rebuild for Twitscreen, I wanted to parse Twitter hashtags, usernames and URLs on the frontend vs. the backend. The purpose was to help simplify the Twitscreen API responses making it less error-prone when future updates to the Twitter API are made. Plus, I was using React so feeling extra… JavaScripty. My solution, JavaScript prototype objects. Continue reading “Parse Twitter Hashtags, Usernames & URLs with JavaScript — auto-linking is easy!”

Responsive Iframes — The Right Way (CSS Only)!

Building responsive iframes can be frustrating. Don’t let an iframe break your beautifully laid out responsive site. Learn how to build responsive iframes the right way with just a few lines of CSS.

“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.

Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!

View Demo View Code

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
The responsive iframe CSS above demonstrates how to transform a normally fluid iframe into a responsive iframe. Just be sure to update the padding-top property to reflect the aspect ratio to make iframe responsive.

Continue reading “Responsive Iframes — The Right Way (CSS Only)!”

Attaching JavaScript Handlers to Scroll Events — a how-NOT-to, use this instead.

Don’t do what I’ve seen countless devs do — attach JavaScript handlers to the window scroll event. There’s a better way, here’s Twitter’s solution.

I came across an article by John Resig, Learning from Twitter — it completely changed how I attach JavaScript handlers to scroll events. It’s a simple trick that will help boost performance and help keep your code object-orientated.

It’s a very, very, bad idea to attach handlers to the window scroll event.

Continue reading “Attaching JavaScript Handlers to Scroll Events — a how-NOT-to, use this instead.”

GA Custom Dimensions & Custom Reports

Learn to track page performance, user behaviors, personas and more with the power of GA Custom Dimensions.

Creating audience segments is one of the most important things you can do with an analytics tool. When segmentation rules do a good job of highlighting motivations of visitors, behaviors of each segment help make sites become more relevant to each group. This will increase the likelihood that your site will deliver on your goals.

GA already lets you segment more than 130 dimensions. With Universal Analytics, Custom Dimensions (aka. Custom Variables) can be used to track even more. Once you know how to use them, they’ll become a powerful tool in your analytic arsenal. Continue reading “GA Custom Dimensions & Custom Reports”