A Log of Coding Solutions
by webhead
I was having trouble figuring out what input type brings up what keyboard on the iPhone and iPad. Turns out the number type doesn’t bring up the numeric pad. Only “tel” does.
This is a great article on what input type brings up what keyboard:
When your input is surrounded by a form tag, the keyboard will show a blue “Go” button. Otherwise it will show a regular return button.
http://stackoverflow.com/questions/22986347/go-vs-return-button-in-ios-keyboard-for-html-input-forms
by funkysmell
There are a ton of video player that use HTML5 with flash fallback. A few years ago I found one named JW Player. This was a great player that was fully featured. Keyword being “was”. I was developing a website that would be using this player, but for the time being I used the free version of the player because I was hoping for a promo code to show up. As I was developing the site, the company that owns JW Player upped the price from a simple $79 fee to a yearly $99 fee. This was a big jump in price and developers complained a whole lot, including myself. (i got the CEO to respond! woohoo!) but no changes came of it (as of now anyway).
Onto a search for a new javascript player that could do HTML5, Flash fallback, and RTMP streaming when flash is used. A few players I found were jPlayer, videoJS, MediaElement.js, Flowplayer. Flowplayer costed about $99(to remove the watermark) plus I wasn’t sure if I needed to purchase the flash player for flash fallback. Confusion is not good to a potential buyer. jPlayer was the most popular of the free ones, but I couldn’t get the RTMP to work with my video for some reason. I got the sample to work, but not mine, weird. videoJs scared me because I saw a post were the flash fallback used Flowplayer which means I could not use it commercially without purchasing. Would’ve been a legal disaster if I used it and didn’t pay for it. MediaElementJs was the only one I had no opinion. It was actually the least popular of all the open source players. But then I saw that it would be in WordPress core 3.6! Case closed. MediaElement.js would be the replacement.
As it turns out MediaElement does not get Firefox to fallback to flash if I use a mp4 video file. It simply errors out. It does however, support the webm format. The WebM format is sponsored by Google and is supposedly the next industry standard for web videos so it would be a good thing if I converted to it. I found a free converter called Miro Video Converter to convert my mp4 to webm format. In the end I have a video player that will be integrated into WordPress, a more standard video format, smaller footprint for HTML5 users (mp4 size: 163mb webm:78mb), and no money spent… but a whole lot of time spent looking for this… oh well, the client wins at least.
JW Player, mp4 format
MediaElementJS (WordPress 3.6), webm format, Miro Video Converter
by funkysmell
Using jPlayer to play video works fine in Chrome and Firefox and the iPhone, but does not play in Internet Explorer 9 (IE9). In IE9 it just shows a black screen and goes back to the first frame.
What seemed to fix the problem was defining the mime types. Simply add the following lines to your htaccess if you are trying to play mp4 files:
AddType video/mp4 mp4
AddType video/mp4 m4v
source: http://stackoverflow.com/questions/6175417/jplayer-issue-in-ie9
other help: http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response
keywords: jplayer ie9 doesn’t play
by funkysmell
It is now easier than ever to make an image greyscale in CSS.
[prettify class=”xml”]
<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”grayscale”>
<feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/>
</filter>
</svg>
[/prettify]
Then use this to make a greyscale:
[prettify class=”css”]
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
[/prettify]
and then ungreyscale
[prettify class=”css”]
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
[/prettify]
Of course, i got this from stack overflow: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
keywords: css grey scale
by funkysmell
Using your own fonts with HTML 5 can be great, but different browsers require different font formats. I only had the TTF (True Type Font) file, but I also needed the otf, .eot, .woff and .svg files to be compatible with all browsers.
http://www.font2web.com. Font 2 Web is a great website that does what it says. It takes your TTF and gives you back a zip file with the other 4 files that you need. It also gives you the CSS file needed for your custom @font-face. You may notice that in the CSS file the local src has a smiley face character. You can read more here on what that’s all about: http://paulirish.com/2010/font-face-gotchas/#smiley.
Update: Another solution is http://www.fontsquirrel.com. However, even if you have all font format files, it still may not work in all browsers and all OS’s. I believe one issue is the EOT licensing issue for IE. Microsoft use EOT format so that font licenses can be verified so maybe I’m using un-licensed fonts. The only fonts that have worked consistently for me are Google’s Web Fonts.
by funkysmell
IE has officially forced me to spend 50% more time to complete a project. Bugs, workarounds, special IE filters, all contributed to the time. The last 3 or 4 projects, I tracked my hours spent on IE. Maybe Microsoft secretly hates other developers.
I have a new example demonstrating a few HTML 5 features like:
Of course, IE is not yet a “modern” browser so it needs to use it’s little “filter” hack. Leave it to IE to have a bug in it’s own hack. Gradients and Shadows cannot be shown at the same time. I haven’t really found a workaround yet.
http://mymonkeydo.com/example/chart_gradient_vtext_shadow.html