All posts tagged ‘video’

File Under: JavaScript, Multimedia

Tired of Tiny Movies? Go Large With BigVideo.js

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

File Under: Humor, Multimedia

Video: The Show With Ze Frank Returns to the Web

Humorist and web artist extraordinaire Ze Frank is returning to the internet airwaves with new episodes of The Show. The Show, which Frank wrote, produced and starred in, was a daily video show about, well, everything.

Although much-loved by sports racers everywhere, Frank stopped making The Show in 2007, after roughly a year’s worth of daily episodes. But now The Show is back. After a wildly successful Kickstarter campaign, Frank has released the first episode, “An Invocation for Beginnings.”

Not only are we happy to see The Show return, the first episode also serves as an inspiration for any who’s is trying to start something. As Frank puts it, “anyone who’s stuck between zero and one.” So enjoy the first episode of the new The Show and then get out there and make something awesome and “enjoy the cheese of accomplishment.”

File Under: Programming, UI/UX, Web Basics

Video: Progressive Enhancement 2.0

A webpage doesn’t have to look the same in every browser. In fact, a webpage shouldn’t look the same in every browser, according to former Yahoo developer and JavaScript guru, Nicolas Zakas.

Zakas, who spent five years as the front-end tech lead for the Yahoo homepage, recently spoke at the March BayJax Meetup group about what he calls Progressive Enhancement 2.0 — offering users the best possible experience given the capabilities of their device.

Not the same experience, mind you, but the best possible experience. That means progressively enhancing sites according to the device’s (browser’s) capabilities.

Progressive enhancement is perhaps best summed up by the famous Mitch Hedburg quip, “an escalator can never break, it can only become stairs.” In other words, if you’re building websites well they never break, even if you look at them in Lynx. The site may not look the same in Lynx as it does in, say Chrome, it may not function as smoothly, but the core content is still there and can still serve as a stairway that gets people where they want to go even when the enhanced ease of the escalator is absent.

More practically, progressive enhancement means starting with the least capable devices — an older phone, Lynx running on Windows 95 — and then adding more sophisticated features based on screen size, bandwidth and so on.

Zakas also takes on the common assumption that a web “page” is analogous to the printed page. In fact Zakas argues the web is more like television, which has a similar separation of content and device. In that analogy old browsers are like black and white TVs. No one expects a black and white TV to play HD content, but everyone would be disappointed if you served black and white content to an HD TV. Hence the need for progressive enhancement.

If you’re well versed in the history of the web the beginning of the video may be a bit slow, but stick with it. Also be sure to watch the questions at the end where Zakas addresses how to progressively enhance more application-like web pages.

Connect With Your Creation Through a Real-Time Editor

Inspired by Bret Victor's demo, Chris Granger's live editor helps connect you with what you're building.

Last month we pointed you to a video of Bret Victor’s talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. In the talk Victor showed off a demo of a great real-time game editor that makes your existing coding tools look primitive at best.

Inspired by Victor’s presentation, developer Chris Granger has put together a similar live game editor in Clojurescript.

If you haven’t watched the video of Victor’s talk, you should start there, but the basic idea behind his real-time editor is to make your code more closely connected to what it creates, in this case a simple game. Granger’s take on the idea is similar — all changes you make to the code are reflected immediately in the running game. You change a line of code and the game immediately changes right with it. Here’s Granger’s video demonstrating the editor:

As Granger writes on his blog, “essentially I learned that Victor was right — there’s unquestionable value in connecting yourself with your creation.”

Granger’s demo code is available on GitHub and there’s a .jar file available for download if you’d just like to play with the demo.

Video: Inventing on Principle

We just had a moment similar to the time we first saw content-aware scaling in action, but this time it’s even better — we’ve seen the future of programming tools and it looks awesome.

Check out the video above of Bret Victor‘s recent talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. The video above of Victor’s keynote at the Canadian University Software Engineering Conference, captures a wonderful talk on living your life based on principles, but for many developers what’s most arresting are the software development tools demoed.

Do your current tools suddenly feel incredibly outdated? Perhaps you thought you were using a well-tuned coding machine but suddenly realize you’re really just hitting two stones together? Thought so. Sadly, the apps demoed in the video aren’t available. That’s all right, though; it just means someone needs to build them. Be sure to let us know if you do.