#BADA55 !important – Chrome Dev Tools

Freaking awesome developments in Chrome Dev Tools – putting FireBug on notice maybe?

From Paul Irish’s blog:

Pavel Feldman (Dev Tools engineering lead) and I just spoke at Google I/O about the Chrome Developer tools.

We covered a whole lot of enhancements to style manipulation, timeline inspection, script debugging, DOM and Event listener breakpoints.

We announced a few brand new features I’m really jazzed about:

For full text and comments got to
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/

Video MIME types

So, we’re all gee’ed up with HTML5 video and it’s all working smoothly, so clients are going to want to start updating their videos themselves.

Grand. But trying to explain to users how to convert their videos into 3 different formats with the correct encoding settings is not a task to be taken lightly. I’ve dealt with people who work with digital video every day, and they still don’t grasp it. And for many, they simply don’t want to – they’ve got other things to do.

As a result I’m working on integrating video transcoding services into my CMS. This has all been fairly painless to get working, but now I come to think about ensuring that malicious files are not uploaded to the server. Now, as long as these files can be ensured to never be executed on your server, only sent to the encoding server for conversion, you can let them worrry about all of that – but if you can’t ensure that, or are just particularly paranoid, you might want to do some heavy checking when receiving the files.

Zencoder, which I am using currently, reckon they can convert pretty much anything, and users being users, they are bound to decide to try and send you some rare file format.

With this in mind I’ve compiled a list of video extensions (which are NOT to be relied on as an indicator of a valid file type), and video MIME types.
Checking MIME types can be tricky – not all server setups support MIME checking – and many video formats don’t have an associated MIME type, instead reporting as ‘application/octet-stream’. But you can certainly exclude the upload of any files with a MIME type not on your list.

So I have compiled three lists, none of them should be considered completely exhaustive, but it took some effort to compile these from a variety of sources, so it may be a useful resource. There are some MIMEs I don’t have extensions listed for, and vice versa (partcularly where an extension doesn’t have a type), as well as types which may be missing valid extensions but there is a limit to how much effort it was worth putting into it.

Errata and addendum are most welcome!

Video MIME types and associated extensions

"video/fli","fli,flc""video/flc","flc,vfw""video/flv","flv""video/gl","gl""video/mp4","mp4,mpg4""video/mpeg","m1v,m2v,mp2,mp3,mpa,mpe,mpeg,mpegv,mpg,mpv,vbs,rmvb""video/mpeg-system","mpg,mpeg,mpe,vob""video/msvideo","avi,vfw""video/ogg","ogg""video/quicktime","mov,moov,qt,mp4,qtm,qts""video/sd-video","sdv""video/ty","tivo""video/vc1","vc1""video/vdo","vdo""video/vivo","viv,vivo""video/vnd.divx","divx""video/vnd.rn-realvideo","rv""video/vnd.vivo","viv""video/vosaic","vos""video/vp3","vp3""video/wavelet","wv""video/webm","webm,vp8""video/wtv","wtv""video/x-amt-demorun","xdr""video/x-amt-showrun","xsr""video/x-atomic3d-feature","fmf""video/x-divx","divx""video/x-dl","dl""video/x-dv","dif,dv""video/x-fli","fli,flc""video/x-flv","flv""video/x-gl","gl""video/x-isvideo","isu""video/x-m4v","m4v""video/x-matroska","mkv""video/x-motion-jpeg","mjpg""video/x-mpb","mpb""video/x-mpeg","m2ts,mp2,mp3,mpe,mpeg,mpegv,mpg,mpv,mts""video/x-mpeg-system","mpg,mpeg,mpe,vob""video/x-mpeg2","mp2,mpv2,mp2v,mp2ve""video/x-mpeq2a","mp2""video/x-ms-asf","asf,asx""video/x-ms-asf-plugin","asf,asx,wmv""video/x-msvideo","avi,asf,vfw,wmv""video/x-ms-wm","wm,wmv""video/x-ms-wmp","wmv,wmp""video/x-ms-wm","wm""video/x-ms-wmv","wmv""video/x-ms-wmx","wmx""video/x-ms-wvx","wvx,wmv""video/x-mve","mve""video/x-ogg","ogm,ogv""video/x-pva","pva""video/x-qtc","qtc""video/x-quicktime","mov,moov,qt,mp4,qtm,qts""video/x-raw-yuv","yuv""video/x-scm","scm""video/x-sgi-movie","movie,mv""video/x-videogram","vgm,vgx,xdr""video/x-videogram-plugin","vgp""video/x-vp3","vp3""video/x-vp6","vp6""video/x-vp7","vp7""video/x-wmv","wmv""video/x-xvid","xvid"

Video MIME types

application/mp21application/mp4application/mpeg4-iodapplication/mpeg4-muxcodetableapplication/mxfapplication/oggapplication/octet-streamapplication/vnd.ms-asfapplication/vnd.rn-realmediaapplication/vnd.rn-realmedia-vbrapplication/vnd.rn-realplayerapplication/x-nsv-vp3-mp3application/x-mplayer2application/x-ms-wmsapplication/x-ms-wmpapplication/x-nsv-vp3-mp3application/x-oggapplication/x-troff-msvideoapplication/x-winampapplication/x-shockwave-flashaudio/x-m4aaudio/x-pn-realaudioaudio/x-pn-realaudio-pluginaudio/x-pn-realvideoaudio/x-realaudiovideo/3gppvideo/3gpp2video/animaflexvideo/annodexvideo/avivideo/avs-videovideo/divxvideo/dlvideo/flivideo/flcvideo/glvideo/gvivideo/h264video/m75video/mj2video/mp4video/mp4v-esvideo/mpegvideo/mpeg4video/mpeg4-genericvideo/msvideovideo/nvvideo/oggvideo/quicktimevideo/sd-videovideo/tyvideo/vc1video/vdovideo/vivovideo/vnd.avivideo/vnd.divxvideo/vnd.rn-realvideovideo/vnd.vivovideo/vosaicvideo/vp3video/waveletvideo/webmvideo/wtvvideo/x-3ivxvideo/x-ajpvideo/x-amt-demorunvideo/x-amt-showrunvideo/x-amvvideo/x-atomic3d-featurevideo/x-divxvideo/x-dlvideo/x-dvvideo/x-ffvvideo/x-flivideo/x-flvvideo/x-glvideo/x-h263video/x-h264video/x-huffyuvvideo/x-indeovideo/x-intel-h263video/x-isvideovideo/x-ivfvideo/x-jpegvideo/x-la-asfvideo/x-m4vvideo/x-matroskavideo/x-motion-jpegvideo/x-mpegvideo/x-mpeg2video/x-mpeq2avideo/x-ms-asfvideo/x-ms-asf-pluginvideo/x-ms-wmvideo/x-ms-wmxvideo/x-ms-wmvvideo/x-ms-wvxvideo/x-msmpegvideo/x-msvideovideo/x-msvideocodecvideo/x-oggvideo/x-pn-multirate-realvideovideo/x-pn-realvideo video/x-pvavideo/x-qtcvideo/x-quicktimevideo/x-raw-rgbvideo/x-raw-yuvvideo/x-rlevideo/x-scmvideo/x-sgi-movievideo/x-svqvideo/x-tarkinvideo/x-theoravideo/x-videogramvideo/x-videogram-pluginvideo/x-vp3video/x-vp6video/x-vp7video/x-wmvvideo/x-xvid

Video file extensions

3gp3g23gp23gpp3gpp23p2aflajpamvasfasxaviavsaxvbdmbdmvdifdivxdldvdv-avidvxf4vfliflcflvfmfglgvihdmovhdvisuivfivrls4k3gm15m1sm1vm21m2tm2tsm2pm2sm2vm4em4vm75mgvmj2mjpmjpgmkvmnvmodmoovmovmoviemp2mp21mp2vmp3mp4mpampempegmpgmpg4mpvmpv2mpv2emqvmtsmtvmvmxfnsvoggogvpmfpvapvrpxvqtqtcqtmr3drecrmrmdrmvbrprtsrvscmtivotodtp0tpdvbsvc1vdovgmvgpvgxvfwvidvivvivovobvosvp3vrowebmwmwmpwmvwtvwvwmxwvxxdrxsryu

Pixie – user editable blocks

Pixie is a simple, lightweight CMS. I had to knock something up double quick, and Pixie did the job nicely. It’s pretty light on modules and plugins, but ripe for customisation as being so lightweight it’s very easy to get into quickly.

In Pixie ‘blocks’ are small sidebar-type elements for additional comments. These are easy enough to put in for a coder, but the developers admit that easily editable block content for users is on their list to do.

Well that just won’t do will it? I need to get some user editable content in there today!

So here’s how to do it.

Create a new page in admin:

Settings > Create a new pagePage Type: Static[Create Page]

Give it a slug and Display NameDon’t give it any blocks

Set:Public: Yes

If you don’t want this content to be accessible from the menu:In Navigation: No

[Save]

Edit the content of the new page:

Publish > {your new page title}Edit page and [Update]

That’s our content ready to go. You can obviously include as much or as little as you like, but as blocks are generally sidebars it’s probably best to keep it simple and minimal.

Next we need to create a new block.This is a REALLY simple file – we leverage the Pixie static page system and hack it into a block file called admin/blocks/block_{myblock}.phpThe {myblock} name can be whatever you want – just make sure it doesn’t clash with any existing blocks. This will be the block name you add to the page you want it to appear in.

And here’s the code for your block. Simply edit $block_static to the value of the page’s slug.

You can use this method to create as many different editable blocks as you need – just change the $block_static value and the filename. You can probably adapt the same method pretty easily to use dynamic content with a bit of tweaking – I may look at that another day. I may not. Depends how far I go with Pixie.

Hmm. I know a couple of girls named Pixie. I should probably rephrase that…

[update201105251920]Later that evening I improved this slightly, so that the $block_static takes its value from the filename. This means that anyone with ftp access can very quickly and easily add a new block. Just keep a spare copy in the admin/blocks folder – possibly name it block_rename_me.php so it’s easily recognised, then site admins can copy and rename your master block_rename_me.php file to block_{newblock}.php where {newblock} is the name of the… new… block.

The changes:

Replace:

with:

You can also replace:

with:

and you now have a dynamic id you can target for styling and manipulation.

Complete with changes, with the $block_static definition moved for tidiness and consistency:

[/update]

PHP mime_content_type() replacement

mime_content_type is not always available depending on your serverThere are various ways to get around it. The current PHP recommendation is to use the Fileinfo (aka finfo) library

An useful alternative is to use exec()

If you know (or are only expecting) that your file is an image you can also use getimagesize(), but this is limited to the image types getimagesize() recognises.]

My preference is the following combination of all three methods, with ‘application/octet-stream’ as a fallback for anything you can’t recognise:

[update 201105302125]

Function updated with more error reporting, including additional debug info if named constant __ADMIN_DEBUG has been set

[/update]