Category: Tutorials

New media on the Internet has gone through a rigorous process of quality control and best practices for web developers. Back just a few years ago Flash video was the most prominent solution. But with HTML5 support in all modern browsers the solution to embedding audio/video media has become a lot less complicated.

In this tutorial I want to explore how we can build a very simple webpage for embedding mobile-responsive HTML5 video. I have included two versions of the page – one with standard HTML5 video and the other using Video.js. The HTML is almost identical which shows how much progress HTML video has made in a few short years. But you can check out a demo of both pages from the links I’ve included below.

Preview Screen HTML5 Video Stream MP4/WebM

There are so many web applications available for shortening URLs to share online. TinyURL is one of the originals and has been around longer than I can even remember. Their service is always online and it works perfectly for translating into tweets or posts on Facebook.

In this tutorial I want to build a mini-app which will generate tiny URLs right from your web browser. You could install this script on any domain and you’ll be able to generate dynamic links using Ajax without even refreshing the page! Their service doesn’t have a detailed API but it’s enough that we can pass a full URL and get the tiny version back as a result. And that’s just enough functionality for this app to hold some value when hosted on a 3rd party website.

TinyURL Links Generator with Ajax - preview

There are many social networking websites designed with a specific layout in mind. User profile pages are some of the more complex designs included with a community-based network. You’ll often have access to edit user profile settings, subscriptions, and e-mail options. I want to create such a simple menu for a minimalist Digg-style layout.

In this tutorial I have actually built two working demo pages. The first runs on jQuery to fade the menu in and out as you hover. The 2nd demo is built using just CSS effects which display the submenu using the :hover selector. It’s even easier to combine both methods for legacy support – however at that point I’d recommend the CSS-only methodology. But you can see for yourself in the live demo examples and build this yourself by following my code below.

jQuery sub-menu navigation dropdown

There are plenty of social networking websites today where you can find dynamic Ajax-based comments. This system is more usable because you don’t need to refresh the page every time you post something new. However setting up a whole database for user comments from scratch can be difficult.

In this tutorial I want to look at using jQuery just for animating custom comments. The form will submit each post anonymously and won’t save anything to a local database. The effects are only for show – but you can easily adopt the dynamic code into a system such as Wordpress, vBulletin, Joomla!, or even your own custom backend.

imgborder

Privacy Policy | Contact