Categories
Authored Content

Authored Content, Episode 14: hood.ie, WordPress under attack, jQuery 2.0, and HTML5 vs. Native

Special guests Joe LeBlanc and Simon Allardice join Ray Villalobos and Morten Rand-Hendriksen for a discussion of the new JS based framework hood.ie, WordPress brute force attacks, Government website design, jQuery 2.0 and no more support for IE8, and the neverending debate over HTML5 vs. natvie apps brought to the forefront again due to LinkedIn’s move from HTML5 to native.

Full list of links:

Watch the video and join the ongoing live chat: http://tlk.io/authoredcontent

You can watch all the episodes of Authored Content on YouTube (playlist), like Authored Content on Facebook, and join the Authored Content Community on Google+.

 

Categories
Authored Content

Authored Content, Episode. 13: hgroup, Raspberry PI, digital afterlife, personas, and more

Mark Niemann-Ross joins the Authored Content crew to talk about the deprecation of the hgroup HTML5 tag, DIY computing with the Raspberry PI, your digital afterlife, Microsoft ending support for Windows XP, Mozilla’s Personas project, Moonbase and more. Links to everything below.

Watch the video and join the discussion!

You can watch all the episodes of Authored Content on YouTube (playlist), like Authored Content on Facebook, and join the Authored Content Community on Google+.

 

Categories
video WordPress

Video hosting and WordPress: How to do it right

I’m getting questions about video hosting and WordPress on a weekly basis now so I think it’s time to publish an article about it. Here’s the most common question I get:

How do I upload videos to my WordPress site so I don’t have to use YouTube for my videos?

The answer to this question is “you don’t”, but that doesn’t really explain anything. So let me explain:

There are a myriad of reasons why you may want to host your videos on your own site: Maybe you don’t like the standard video hosting services. Maybe you don’t want your videos on YouTube or Vimeo. Maybe you want to restrict viewership to only specific visitors or paying visitors. All these reasons are perfectly reasonable. But the solution – to host the videos on your own server under WordPress – is ill advised and detrimental to your goals. In this article I’ll give you the reasons why you shouldn’t host videos on your WordPress site (or any other site for that matter) and then I’ll suggest what you should do instead.

Why you shouldn’t host videos yourself, part 1: Video files are big

Video hosting is complicated at the best of times. Let me illustrate why: Let’s say you have a standard 3 minute HD video. It is encoded in a standard video format (say MP4) and the total file size is 100MB (very small btw). You upload it to your server and use a plugin to embed the video in a player on your site. You visit the site and play the video and it works fine. What happens when you watch the video is your browser downloads the entire 100MB file and plays it. Now think about what happens if 10 people go to the site and try to watch the video at the same time: The server has to upload a 100MB file to 10 different computers at the same time so it is actually uploading 1GB of data. Now imagine if 50, or 100, or 500 people try watching that video at the same time. For every new person who watches the video simultaneously, the server will have a harder time getting the file to the viewer. The service will be slow, and after not too long you’ll get an angry call from the hosting provider saying you need to take the video offline.

You see most regular hosts are not designed to serve up video files. There are customized hosts that do this well, but they are few and far between.

Why you shouldn’t host videos yourself, part 2: Codec Fragmentation

The web is no longer restricted to desktop and laptop browsers. People access the web using smartphones and tablets as well, and TVs and game consols are now shipping with web browsers as well. What is not well known is that all these different platforms use different types of browsers and these browsers in turn interpret video differently. Back in the day (2 years ago), video on the web was pretty much displayed using either Flash or QuickTime. Today Flash has largely been replaced by HTML5 video, and each browser has its own preferred codec for this video format.

If you’re not a video geek like me that makes no sense so let me translate it into plain English: Different web browsers, on your computer and on tablets and smartphones, speak different video languages. And for whatever reason they usually only understand one video language. As a result if you only upload one video file in one language, anyone using a browser that speaks a different language won’t be able to see the video. That means if you want to host your videos yourself you have to upload not one file but five to cover all your bases: Ogg, WebM, H.264/MPEG-4, VP8, and Flash. This is the only way to cover all your bases and ensure that everyone can view the video regardless of what browser or device they are using.

Why you shouldn’t host videos yourself, part 3: Wireless data is expensive

Serving up a 300MB HD video file to a desktop computer with a broadband internet connection is no big deal. Serving up a 300MB video file to a smartphone is a disaster waiting to happen. Never mind that it’ll take forever to load and that the video format is wrong for the size of screen, but many smartphone data plans are only 500MB or 1GB, so downloading that file just 3 times could put the visitor over her monthly limit. Professional video hosting services like YouTube have systems in place to ensure that smartphones receive videos optimized for smartphones that don’t fry data plans. Doing the same with your self hosted videos is pretty much impossible.

The Solution: Use a professional video hosting service

I bet that right about now you are asking yourself “OK, so if I can’t host the videos on my own server, what am I supposed to do?” The answer is simple: Don’t reinvent the wheel. The problems above, and a myriad of others I didn’t mention, have been solved, and solve well, by several different companies over the years. And it would behoove you to take advantage of their expertise.

With the sudden popularity of online video, largely spurred on by YouTube, entrepreneurs came out of the woodworks to offer up alternatives with more control and less spam. These alternatives have now matured and deliver professional grade services at acceptable prices. And because of the popularity of WordPress, most of these services integrate seamlessly with the platform giving you all the control you need while at the same time staying clear of the YouTube trolls.

There are many services out there offering different types of services for different purposes so you need to do your research and figure out a) what you need and b) who provides those services at a price point you are comfortable with. (And yes, you have to pay for these services, but they are not all that expensive.) My recommended (but not exhaustive) list includes, in no particular order, VideoPress (by Automattic), Viddler, BrightCove, and Kaltura. All these services will provide you with secure video hosting that works the way your users will expect across all platforms and devices without server lag and other bandwidth issues.

Using videos in WordPress

How you use your videos in WordPress depends on the service you end up selecting. Some, like VideoPress, integrate seamlessly into WordPress with a plugin and all the work is done from within the CMS. Others, like BrightCove, have their own custom user interface and you embed the videos into your site by copying and pasting code. You can also use independent plugins like VideoJS to place hosted videos in your site. It’s really up to you.

But what about Amazon S3 / Azure / The Cloud?

You’ve probably seen people talk about video hosting on a cloud service like Amazon S3, Azure, or the likes. And yes, that can be done, and you can even overcome the issues raised above by using a service like ZenCoder to encode your video files to be served up to every possible browser and device. But the reality is this combination will be more complicated and cumbersome and probably more expensive than just using a professional video hosting service. It’s a question of simplicity and reliability.

If you don’t want to break the bank, just go with VideoPress at $59.97 / year and you’ll have all the frustration free video hosting you need. Or you can go with one of the other services for enhanced functionality. Just don’t waste your time on self hosted videos. It is not worth it.

Categories
Authored Content

Authored Content, Episode 11: Google+ Hangouts, noUI, IE11, April Fools and more

Join Ray Villalobos and Morten Rand-Hendriksen in a conversation about IE11 user agent strings, the noUI movement, the future of the border-corner-shape CSS rule, aprilFools.css, the Unreal engine on the web, and HTML5 development for WiiU. Links below.

James is out and there is no guest so this is just the two nerds in conversation.

IE11 user agent strings
No to noUI
The future of border-corner-style
aprilFools.css
The Unreal engine on the web
Nintendo WiiU goes HTML5

Watch the video and join the discussion!

You can watch all the episodes of Authored Content on YouTube (playlist), like Authored Content on Facebook, and join the Authored Content Community on Google+.

Categories
Authored Content

Authored Content, Ep. 6: HTML5 main tag, Twenty Thirteen WordPress theme, and Emmet

Authored Content crew James Williamson, Morten Rand-Hendriksen and Ray Villalobos talk about the new main HTML5 tag, the Twenty Thirteen WordPress theme, Emmet code completion, and high rez displays.

Watch the video and join the discussion!

You can watch all the episodes of Authored Content on YouTube (playlist), like Authored Content on Facebook, and join the Authored Content Community on Google+.

Categories
WordPress Themes

Introducing Anaximander: New WordPress theme to be released in the near future

It’s been a long time coming, but Design is Philosophy finally has a new look and better functionality. The new theme which I activated over the weekend is called “Anaximander” and sports everything a modern WordPress theme should have: Semantic valid HTML5 throughout, responsive layout through CSS3 media queries, carefully enqueued javascripts where necessary and index pages running Masonry for ease of use.

The name “Anaximander” comes from my new theme naming standard. Inspired by the WordPress release naming standard I have chosen to name my themes after famous philosophers starting with Thales and movin up through the ages. The philosophy geeks out there will already know this, but Anaximander is the 2nd classical philosopher on that list. If you are curious you should go check out the Wikipedia page about Anaximander (the philosopher, not the theme).

Anaximander is a work in progress and I launched it here on Design is Philosophy to put it through its paces. That means more functionality will be added in the near future (AJAXified infinite scroll on index pages is first on the list) and I will be expanding theme options and customizability. Why you ask? Because Anaximander was built to be shared.

Anaximander: The Free WordPress Theme – coming to your WordPress site in due time

Yep, as with my previous non-client themes Anaximander will be released to the masses at some point in the not too distant future. But not in the normal way: Though I can’t really say anything about what’s in store for Anaximander, it will be released as part of a bigger plan. Unfortunately I can’t be any more specific than that. But stay tuned and you’ll find out.

Browse, play, and report back

Anaximander (and by extension Design is Philosophy) has a lot of tricks up its sleeve – from Masonry to responsive layouts to other stuff. I would love it if you took it for a spin, opened it on your different devices, left a comment and reported back if something didn’t behave the way you expected. I want to build this theme out to make it as user friendly as possible and that means the front end must be flawless. Your input and suggestions are welcome.

Categories
Responsive Design Tutorials WordPress

Automatic responsive videos in WordPress with oEmbed, FitVids and a little PHP magic

Automaitc responsive videos in WordPress with oEmbed, FitVids and PHP
UPDATE: I’ve added a 4th step to the list to remove automatic inline styles from being inserted when embedding videos.

If you’re using a responsive theme on your WordPress site (or you’ve built a responsive theme) and you’ve added YouTube, Vimeo or other videos using oEmbed you will undoubtedly have noticed those videos do not resize with the rest of the frame. And that’s a royal pain. Fortunately there are solutions out there that can fix this, but they are a little tricky to implement. In this tutorial I’ll share with you a method for making the process automatic so you don’t have to worry about it.

The Problem

Responsive themes use percentage values, media queries and other coding magic to make the content resize to fit the size of the window. But when you embed videos from YouTube etc using the built in oEmbed function in WordPress (i.e. just paste in the URL to the video and it appears automatically) that video is inserted with a fixed width and height. As a result when the rest of the page resizes to fit the window, the video stays the same size causing all sorts of problems. This is sub optimal.

FitVids to the rescue… almost

Realizing this is a frustrating problem Chris Coyier and Paravel created a clever little jQuery plugin called FitVids that when installed automatically resizes videos along with the rest of the content. FitVids attaches to specified containers and forces the video iframes within these containers to resize along with it. Very clever and it works exactly as expected. However, to make this work you have to wrap the video in a container with a specified class. So if you want to use the oEmbed method you have to go to HTML view, create a div with a class and then put the URL inside it. Which kind of takes away the whole point of using oEmbed which is simplicity.

The Solution

What is needed is a function that automatically wraps all oEmbed videos in a div with the correct class that applies FitVids so all the user has to do is paste in the link to the video and then WordPress does the rest. And that’s just what we’re going to do:

Step 1: Enqueue FitVids

Go download FitVids.js from GitHub and add the jquery.fitvids.js file to your theme. I place all my JavaScript files in a sub-folder called ‘js’ for simplicity. Then we need to enqueue the script and associate it with jQuery. This is done in functions.php:


<?php 
// Add FitVids to allow for responsive sizing of videos
function your_theme_fitvids() {
	if (!is_admin()) {

		wp_register_script( 'fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), '1.0', true);    	
		wp_enqueue_script( 'fitvids');
	}
}

add_action('init', 'your_theme_fitvids');
?>

This function loads the jquery.fitvids.js file along with the packaged version of jQuery that comes with WordPress whenever a page is loaded.

Step 2: Create a function to target the videos

To make FitVids work you need to add a JavaScript function targeting a specific class. The function looks like this:


<?php
add_action('wp_footer', 'add_fitthem');
    	
function add_fitthem() { 
	    	jQuery(document).ready(function() {
    			jQuery('.video').fitVids();
    		});
}

All that happens here is the action is loaded in the footer (so it doesn’t slow down the population of the page itself and allows the videos in the iframes to load properly). It then appends the function to the .video class so that any video inside a div with the class video will be scaled to size.

This function is combined with the previous function so they get called at the same time. The resulting function looks like this:


<?php
// Add FitVids to allow for responsive sizing of videos
function your_theme_fitvids() {
	if (!is_admin()) {

		wp_register_script( 'fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), '1.0', true);    	
    	wp_enqueue_script( 'fitvids');
    	add_action('wp_footer', 'add_fitthem');
    	
    	function add_fitthem() { 
		    	jQuery(document).ready(function() {
	    			jQuery('.video').fitVids();
	    		});

	    }
	}
}

add_action('init', 'your_theme_fitvids');

Step 3: Automatically wrap oEmbed videos in a div with a class

The last step is to change the oEmbed output so that it automatically wraps the video iframe in a div with the class .video. This is done using a filter:


<?php
// Automatically add FitVids to oembed YouTube videos
function your_theme_embed_filter( $output, $data, $url ) {

	$return = '<div class="video">'.$output.'</div>;
	return $return;

}
add_filter('oembed_dataparse', 'your_theme_embed_filter', 90, 3 );
?>

This function grabs the output of the oembed_dataparse function (the one that creates the final code when you paste in a video URL) and wraps it in the correct div.

Step 4: Set Maximum Embed Size to 0

To get everything to work properly you have to go to Settings -> Media and set both width and height under Maximum Embed Size to 0. If you have a value in either of these fields, WordPress will include inline style code to constrain the size of the video and as a result the automatic resizing will not work.

That is all! When you add new videos to posts and pages using the oEmbed function, they are not automatically wrapped in the correct div and class and FitVids is applied. And voila: Your videos are responsive.

Caveat: These functions are not recursive!

The only catch with this process is that it is not recursive. By that I mean it doesn’t automatically work on videos that have already been embedded on your site. That is because the oembed_dataparse() function is called the when the post is published or updated. As a result, the function has already been run on old content and to apply the new div and class you have to re-run it. Fortunately that just means going in and clicking the Update button for each of the posts that have oEmbed videos in them, but if you have hundreds of videos you may want to consider doing some sort of database search/replace action.

To avoid the recursive problem I suggest you add this function to your theme at the very beginning and be done with it. That way as you populate your site the all your videos will be responsive.

Comments? Questions? Problems?

Got something to say? Leave a comment below.

Categories
MIX11

MIX11 – Day One Recap

HTML5 mattersEvery MIX conference has an overreaching theme it seems. In 2008 – my first year – the theme was the Dev-Igner – the developer – designer hybrid – and how that person was going to find a place in the web development universe. This was spurred on by the launch of Silverlight and all the tools associated with it. 2010 (I didn’t go in 2009) was all about Mobile and the launch of Windows Phone 7 later that year. This year the focus is HTML5, illustrated by the picture above. It may seem surprising, it may be confusing, but it actually makes a lot of sense.

For anyone not working within or closely associated with the Microsoft universe the seemingly sudden shift to a focus on web standards, open source and interoperability may seem as a sudden and irratic shift. But it has actually been going on for a long time. It’s just that with the release of IE9 just a few weeks ago Microsoft suddenly went from being the reason why web standards and cutting edge web technologies couldn’t be implemented to a company leading the way and in many respects leaps and bounds ahead of the competition. So with that in mind the focus on HTML5 isn’t so strage after all.

The first day of MIX in many ways felt like a formal staking out of a new path for Microsoft. Yes, there was the ever present celebration of the .NET framework and all the technologies associated with it, but there was also an inescapable and refreshing focus on open standards, forward thinking and interoperability. If there was any doubt, the keynote, and the sessions that followed made it pretty clear that Microsoft is now fully backing open source, being it based on .NET, JavaScript, PHP or whatever other code language you swear by. And that’s a good thing. No. That’s a great thing. It means we are moving forward and can start pushing the limits rather than working on making everything comply with old and broken applications. And more importantly it means us open source programmers have well and truly been let in from the cold and accepted as equals.

The sessions I attended on the first day were on infographics, HTML5 standards and JavaScript – all non-platform specific, all cutting edge, all promising. And even the Ask the Experts session carried with it a vibe of moving forward together to make amazing things happen on the web.

Not to sound like a crazy cheer leader or anything, but the future looks bright. Or to put it in my own humble terms: Microsoft has seen the light and is accepting what we have known all along: Web standards and open source is where the future lies.

I’m really looking forward to the Keynote tomorrow where there are rumours they will be announcing some cool stuff that will make our startup PhotoPivot.com even more revolutionary.

Oh yeah, if you haven’t done so yet, go to PhotoPivot.com, check out the app and sign up for the beta. That was just my little plug.

Check out my continuously updated photostream from MIX11 on Flickr.

Categories
News

Code Your Art Out and Dev:Unplugged: Two dev contests to cut your teeth on

There are a lot of exciting things happening in the online development space right now and there are some great opportunities for designers, developers and people with great ideas for online applications to get recognition, cut their teeth on bleeding edge technologies and maybe even win some stuff or a big wad of cash.

Code Your Art OutCode Your Art Out – Doing some good with your code

In conjunction with the Open Source conference Make Web Not War put on by Microsoft in Vancouver on May 6th and 7th this year the team has also launched a contest named Code Your Art Out. The contest is an extension and maturing of last year’s FTW (For The Web) contest which focussed on using oData in applications. This year the main focus is on using the web to do good – more specifically helping charitable organizations and non-profits reach out to their communities in new ways. From the website:

“Code Your Art Out” is about helping non-profits harness the power of technology in order to better serve its communities and members. It’s also about blending Microsoft technologies with other technologies to create applications that connect people, data, and diverse systems in new ways; bringing it all together in one ground breaking application.

Code Your Art Out brings to light an interesting conundrum in today’s rapidly evolving online environment: There are data sets, applications, solutions and technologies out there that can be of great benefit to individuals, organizations and companies, but the know-how and understanding necessary to utilize these often lie beyond the grasp of those who need it the most. The contest serves to build a bridge between those who would benefit from these technologies and those who understand and can build on these technologies. And for that alone I think it’s well worth it to take an active approach and submit an entry.

Not to mention that there are some serious prizes to be had including a trip to Toronto in June and some serious cash ($10,000 for the winner and $5,000 for the runner up).

Code Your Art Out runs from March 1st to June 1st. For all the details visit the site and get coding!

Dev:UnpluggedDev:Unplugged – release the power of the web

We are entering a new era where web code is concerned. The introduction of HTML5, CSS3, SVG and other related technologies are opening new and previously uncharted teritories for designers, developers and everyone else playing around on the web. The IE9 team is heavily invested in furthering this technology and is doing what it can to encourage early adoption and ground breaking work on the code front.

Enter Dev:Unplugged, a contest built on the premise of pushing the new HTML5 standard to its limits and create web apps that are “unplugged” as in not reliant on plug-ins. From the website:

We believe that HTML5 and related technologies, in conjunction with faster and faster browsers, finally give developers the tools they need to create experiences that are just as vivid, interactive and high-fidelity as what you have come to expect from native applications without the need for plug-ins. We want to see what you can do unplugged.

What is truly interesting about Dev:Unplugged is that even though it’s a contest put on by Microsoft and the IE9 team this is not a contest centered around Microsoft technologies – it’s centered around the new common markup languages of the web. To accentuate this the rules state, and I quote: “The submission has to work across IE9 RC, Chrome Beta and Firefox Beta.” For Microsoft haters this might come as a bit of a suprise, but it’s part of the new “we’re all in this together” approach adopted by the company over the last few years. After all, the web doesn’t care what platform you’re on or what browser you use, so why should coders?

The Dev:Unplugged contest itself is split into two main categories: Games and Music. Entrants are asked to build innovative gaming and music applications using only HTML5, CSS3 and JavaScript centered around material provided by the contest. You can read a full breakdown of how all this fits together over at the Internet Explorer blog and at the Dev:Unplugged website. Entering the contest you’ll be working with material from the animated series HellBoy and bands Awolnation and Ra Ra Riot.

As with Code Your Art Out there are some awesome prizes to be had including a trip to the Future of Web Apps conference in Las Vegas in June, cash, computers and other cool stuff.

All entries for Dev:Unplugged must be submitted through the website by May 8th, 2011 so get crackin!