WNAS

input type number

Apr 20, 2011

If you use the new html5 input types, like I do, you may encounter some differences in the way browsers style them. I wrote about the search field last year. Today I came across the input type="number". In safari, chrome and opera there appears a spinner beside it, a spinner that the client didn't want.

So to remove that, we go:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

And presto we're done. Now the input looks like a text field in chrome and safari.

The only loose end we have now is Opera, if anyone knows of a trick to remove the spinner there, I would love to hear it.

vid.ly

Mar 17, 2011 , and

I just created my first universal video with vid.ly

I wonder if this is any use in the corporate sites that I tend to build for a living. It makes it easier as the hassle of encoding several video's for the different codes it taken out of the equation. All you have to code is:

<video 
id='vidly-video'
controls='controls'
width='400'
height='240'>
<source
src='http://vid.ly/7p6y0f?content=video'/>
<script
id='vidjs'
src='http://m.vid.ly/js/html5.js'></script>
</video>

Looks promising I say...

How to deliver a proper screenshot to your webdev

Feb 11, 2011 , and

As a web developer I deal with lots of different people. Designers, back-end people, Project managers, traffic managers, sales and marketing people. This is nice, as I get lots of different views on how to make a proper website or application. Some nice, some ludicrous, but all of 'm teach me something. So different views I enjoy, but what I don't enjoy is the different ways in which they deliver me screenshots.

I mean seriously folks, do you really think that a screen shot pasted in a frigging powerpoint presentation or a word document makes your developer happy? I even got stuff in an excell file one time, believe it. The answer is ofcourse, NO.

If you see something amiss in your browser, please write down your browser version (and no, Internet Explorer won't do) and operating system (again, more than just windows) and paste a simple image in the mail you send me. If you don't know how to do that, here is how:

How to Take a Screenshot in Microsoft Windows

And while we're at it, here are a few pointer about how to report a bug:

Please report

  • What is going wrong
  • the url of the page : the bit above in your address bar, you can copy that.
  • How you got there.
  • Browser and version: like - Safari Version 5.0.3 (6533.19.4).
  • Operating system: Like - Mac OS X Version 10.6.6.
  • A screenshot of the problem: and an explanation maybe.

And it will help if you stand up after sending this mail and walk to the developer to explain in person what is wrong in your opinion. (call if your not on site)

Together you can solve problems, not alone...

Datetime in habari

Right now I am reading the most excellent book by the esteemed Bruce Lawson and his partner in crime Remy Sharp. I must say, to start with, that is a great read, which has me whipping out my laptop. Even on a sunday morning, before my 2nd breakfast, which is really uncommon. I even started to hack away at this site, just for the heck of it...

And that is the small thing that I wanted to share with you. I don't know why but I haven't gotten around to properly adding the time attribute to this site, even though I got it in #html5 for quite some time now. Somehow it didn't happen, but anyway, here is the code to add it in habari.

<time 
datetime="<?php echo $post->pubdate->text_format('{Y}-{m}-{d}'); ?>"
pubtime>
<?php echo $post->pubdate->
text_format('<span>{M}</span>
<span>{d}</span>,
<span>{Y}</span>');
?>
</time>

It's just a small bit, but I hope it is of help to someone who uses habari...

It's visible content is in dutch / european order, but I'm sure you can change that to suit yours...