Flowplayer 5 was released a few days ago.
The new player has a bunch of new / cleaned up bits of functionality:
- Streamlined design
- HTML5 comes first! Flash is no longer the default, it’s HTML5. Glad to see this
- Fully responsive
- Some functionality previously supported through plugins is now built into the player (playlists, cuepoints, google analytics, and embedding)
- Random seeking (no matter what has been loaded)
- Native full screen — no more using flash to force the full screen mode
- Keyboard shortcuts built in (volume, seek, fullscreen, mute, play/pause, stop)
- Simplified syntax
- Primarily CSS based styling (no more complex JS embeds)
- Embeddable (mentioned earlier) — you can even include your brand if you have the commercial version and propagate your brand
Flowplayer has been my favorite video player for at least a few years, and looks like it will stay that way for another few years.
Sorry for the deluge of posts today. This next one is a must read for web developers.
I’m not sure when it was first posted, but I just came across it today, the Google HTML/CSS Style Guide.
There are some useful reminders in there, and also some curveballs (beyond “Use Valid HTML where possible”):
- Omit protocol from embedded resources – this means your JS and CSS includes should use “//” as opposed to “http://”. This means whenever your code runs over HTTPS it won’t generate all those annoying popup windows.
- Don’t use Entity references – an interesting point. If your entire environment revolves around UTF-8, there is no need to encode special characters (except for < > and & because they are HTML code). Bye bye —
- Omit optional tags – skipping a few lines of code must save Google millions annually, but it’s interesting. I don’t know if I can stop writing “<head><title>Title Here</title></head>” … but according to HTML5 specifications it’s an optional tag, and you can just write “<title>Title Here</title>”.
- Hexadecimal Notation – Use 3 character notation where possible. I’ve been doing this, but didn’t realize it was a best practice (this may save Google hundreds of thousands of dollars a year, me? nothing).
- Alphabetize CSS declarations – I guess this makes sense, so there is at least SOME organization to CSS declarations
- Property name stops – For some reason Google WANTS room between a CSS property and the value (“value: 0px” vs “value:0px”). Seems odd to me, but at least it’s what I’ve always done
In case you missed it, as I did, jQuery Mobile released version 1.0.1 a week ago.
The biggest changes seem to be the addition of official Samsung bada support, along with some additional test clients. bada is an operating system for mobile developers developed by Samsung. It doesn’t sound like the team had to do anything to support the platform, but it’s nice to know there will be an additional device tested with releases.
To download the new jQuery Mobile 1.0.1:
- JS – http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js (24KB)
- CSS w/ Theme – http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css (7KB)
- CSS w/o Theme – http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css (6KB)
Not only do we have 1.0.1 now, but jQuery Mobile 1.1 is coming out soon.
Here’s some stuff to look forward to in jQuery mobile 1.1:
- AMD support
- True Fixed Toolbars – it’s always been buggy, but they seem to have come up with a CSS based method that works everywhere (and doesn’t jump around)
- Better AJAX page transitions
I could swear there was a beta version of jQuery Mobile 1.1 out there, but I can’t seem to find the link. Maybe I’m crazy?
Mozilla released Firefox 10 this morning.
Firefox has converted over to the Google Chrome release numbering, so browser versions aren’t as “major” anymore, but the new browser still brings some nice enhancements.
The biggest addition (especially for us web developers) is the addition of extra built-in developer tools (very similar to Chrome’s):
- Inspect tool for CSS
- Page Inspector (also like chrome, although it has a nice whole page highlight / dehighlight so you can see exactly what you are inspecting
Some other additions are:
- Forward button hides until you go back
- WebGL suppors anti-aliasing
- CSS3 3D Transforms are present
- Full Screen API (should be better for running web applications / kiosks)
- General Bug Fixes
I think it’s worth checking out, as this version will also be part of the ESR program (Extended Support Release). That means it won’t be updated for another 42 weeks, to allow businesses to use the browser long term.
WordPress tends to add a LOT of “stuff” in both the final HTML, and all the layers that build it. This is done to accommodate the masses. As a developer you can write <img src=’images/image.gif’ alt=’test’> or you can ping a database, resize an image, pull the proper alt tag, construct the final img tag then output it to the screen.
All the same, WP adds code to your header to account for all the functionality it MIGHT use. Not necessarily all the functionality it does use.
In iOS 5 we will be able to use the nice velocity / momentum base scrolling through CSS in Safari.
Identified by Johan Brook, at Native style momentum scrolling to arrive in iOS 5, the new functionality will be a nice addition to web based iOS apps and websites.
The CSS code is:
I’m going to start publishing, every Friday, a list of some useful / interesting links I’ve visited throughout the course of the week.
Usually this will involve whatever I am working on at the moment. If you like these links, you can follow me on Twitter to get them as I find them (as opposed to waiting for Friday).
This week I’ve been working a lot with jQuery (nothing new), Flowplayer, and CSS. An average week for a web developer.
Way back when, in the times of HTML 4, and CSS was just getting started we worked with IE6. IE6 required us to do everything differently, because of the ways things were implemented. They just had to be different.
Fast forward to 2011. The world is rapidly expanding use of an incomplete spec, HTML5, and things seem OK. Browsers support it, the implementations seem pretty consistent.
Working with multiple languages is tough, one of the great tools is Google Translate Tools.
It lets you specify which languages and make them available on your site.
Unfortunately once you are viewing a page written NOT in your browser’s native language, it pops up automatically. The banner that pops up pushes your site content down independent of your background graphic, and that can cause problems for certain layout / design approaches.
There’s a quick and easy fix.
I grew up with webmonkey as the single best destination for web developers and any tutorial you could want, but just saw that Google has a Google Code University featuring Tutorials, Contributed course content and Video lectures on:
- Web Programming
- Web Security (yes, web developers should be well versed in Web Security)
Just looking through the site it is so much more than basic web development. Material covers topics ranging from the Android platform, to basic algorithms. Please check out the material that isn’t just web development. There’s a reason Google is providing content for Distributed Systems, Tools and working with APIs.
We’re never beyond refreshing our own skills, as I’m sure Google has some great advice on their site.
I wish I could send this link to some other web developer’s I’ve had to rescue projects from.