Pretty YouTube Embeds with PrettyEmbed.js

Prettier YouTube Embeds

PrettyEmbed.js is a jQuery plugin for making your YouTube embeds look much better. It’s on GitHub, and a demo can be seen here on CodePen.

PrettyEmbed.js works with FitVid.js, but it’s not required, and comes with options like high-res preview images and advanced customization of embed options.

You can see some of the advanced customization options in the CodePen demo below. Just click the “JS” tab to see the JavaScript.

See the Pen PrettyEmbed.js Demo by Mike Zarandona (@mike-zarandona) on CodePen.

I’ve used this for a number of client websites, people like to host their videos on YouTube, yet have an elegant looking player that’s not screaming YOUTUBE when it’s embedded. This is where PrettyEmbed.js comes in. This is for those of you who want nice looking YouTube embeds.

Documentation is quite good and provides a list of all options and how to use it with HTML5 or with Javascript. It does require jQuery.

Advertisements

Aggregate System and Application Logs with Papertrail

Frustration-free log management

I’ve been using Papertrail for a few months now, and absolutely love it. Being able to search logs across all my servers at once is crazy nice.

I can even get alerts when someone logs in via SSH, which, by itself, has made Papertrail well worth it.

A non-production server was compromised, due to a since-rectified configuration issue. Papertrail notified me almost immediately, allowing for immediate action to be taken.

There’s a variety of pricing plans, and there’s even a free for life plan, which includes plenty of features for most folks. I’m currently on the free plan, but plan on upgrading soon. Adding more servers and will need the extra space at Papertrail.

Do you use a log management service?

View Results

Loading ... Loading ...

In addition to collecting logs from your servers, you can also send logs from your applications. Got a PHP application that’s erroring out for some reason? You can send that error to Papertrail for later investigation.

Same deal with Apache logs, MySQL logs, and pretty much every other piece of software that generates logs.

Not many limits on what you can configure Papertrail to do for you. It’s very powerful.

I suggest you give it a try. Installation is super easy, especially if you’re using rsyslog. Below is a screenshot of their installation instructions. Doesn’t get much easier than that.
papertrail-install

Change your WordPress Theme Favicon

Really easy to do, but rarely done

Not sure how to create your favicon? I typically use GIMP, along with this tutorial. It has some good info on creating “proper” favicons, too, so it’s a worthwhile read even if you aren’t creating a favicon at the moment.

I like X-Icon Editor, too (it’s in the screenshot attached to this post), and there’s tons of converters for creating .ico favicon files.

Just add this modify the following and add it to your theme’s functions.php file, or add it to your WordPress functionality plugin.

Change /path/to/favicon.ico to point to your favicon.ico file and you’re done!

How-To: Add Minimal-UI Viewport Meta Tag to WordPress

Introduced with iOS 7.1

I don’t have an iPhone, but my daughter does have an iPad Mini, which is running the latest iOS, 7.1. However, this only works for those of you on iPhone’s, so I see no difference. :

Martin Wolf was kind enough to let me use the image from his post about this subject so that I could more easily illustrate the difference. So, even if you don’t have an iPhone, you can still see the changes this makes in the featured image above.

With the release of iOS 7.1 (and possibly late 7.0.x builds), Safari introduced support for a new value in the viewport meta tag. To me, it sounds like it adds effects similar to how Chrome hides its top bar when a page is loaded, but more. For example, the navigation buttons at the bottom are hidden.

I rarely use Safari, like never. Chrome is available on iOS, so that’s what I’ve always used. That’s not to say that you shouldn’t support Safari to it’s fullest, because I’d wager that a majority of iOS users stick with the default, which is Safari.

Chances are, your theme already has a viewport meta tag defined in it’s header.php file. If it does, add minimal-ui to it, so it should look something like this:

If your theme doesn’t already have a viewport meta tag set, you can add one with your functionality plugin or theme’s functions.php file like so:

Adding the code above will add a brand new viewport meta tag for you, so only use that if your theme isn’t already using a viewport meta tag in it’s header.php file.

That’s it!

Loading Scripts in WordPress Themes and Child Themes, Quickly

Here’s how I load scripts and styles in WordPress themes, in functions.php.

The above code would load up two css files, custom-css-1.css and my-secret-script.css. It would also load one JavaScript file, my-secret-javascript.js.

This post by Brian Krogsgard at WPCandy describes the proper way of loading scripts, using wp_register_script, as it takes dependencies into consideration and allows loading of scripts by their defined name. However, I think the wp_register_script methodology is lengthier and a bit more difficult to read, mostly due to the dependency stuff.

However, you do need to take dependencies into consideration if you’re using a JavaScript library, like jQuery.

wp_register_style should also be used to load styles with dependencies. This article at Tuts+ has a very good description and examples on loading CSS stylesheets using wp_register_style and wp_enqueue_style.

You should also be aware of the differences when authoring themes and plugins, which Brian also explains in his post on WPCandy. That mostly involves one WordPress function out for another.

Let me know if you run into any issues, comments are open!