Asgeir Hoem

Google ‘Streaming’ search

Asgeir — Tue, 24 Aug 2010 08:38:28 +0000

Search results updated by the key stroke. (via The Register)

Google Image Swirl has eyes

New type attributes in HTML5 forms

Asgeir — Fri, 20 Aug 2010 09:32:18 +0000

Another extremely handy feature introduced in HTML5, is the ability to more specifically define what kind of information is expected in an input, so that in turn, your handheld device can display the appropriate keyboard.

In previous versions of HTML, you were restricted to the text input type for written information. However, you were not able to define what kind of information a text field was expecting.

HTML5 introduces 13-ish new input types

With the new input types, you can define that aparticular input is expecting a phone number, or an email address, or a URL, or a date, et cetera. The most practical use of the new values, beside the fact that it makes more sense, is that user agents can display the most useful keyboard for the input.

Full list of HTML5 input types (as of 20. August 2010)

* input type=text
* input type=password
* input type=checkbox
* input type=radio
* input type=button
* input type=submit
* input type=reset
* input type=file
* input type=hidden
* input type=image
* input type=datetime NEW
* input type=datetime-local NEW
* input type=date NEW
* input type=month NEW
* input type=time NEW
* input type=week NEW
* input type=number NEW
* input type=range NEW
* input type=email NEW
* input type=url NEW
* input type=search NEW
* input type=tel NEW
* input type=color NEW

Placeholder text in HTML5 forms

Asgeir — Thu, 19 Aug 2010 12:13:59 +0000

One of the many improvements in HTML5, is the input placeholder attribute. Instead of using javascript to achieve this functionality, you can now specify the placeholder directly in the input tag. Whenever the input is empty and not in focus, the placeholder text will be displayed.

Comic Sans, scooch over, we have Rosewood!

Asgeir — Tue, 17 Aug 2010 09:01:23 +0000

Adobe and Typekit are teaming up to bring some of the world’s most popular, recognizable, and respected fonts to the web. Starting today, you’ll be able to use classics like Adobe Garamond, News Gothic, Myriad, and Minion plus many more on your website — all of them newly optimized and hinted for the screen.

I can not wait to see the personal weblogs about food and babies, with body copy set in Bickham Script with negative leading.

(But seriously, we get Myriad!)

“It is the actual settings manager!”

CSS3 media queries in older browsers

Asgeir — Wed, 04 Aug 2010 18:36:31 +0000

css3-mediaqueries-js is a small javascript library that gives you support for CSS3 media queries in older browsers, including IE5+, Firefox 1+ and Safari. Newer versions of Firefox, Opera, Safari and Chrome already offer native support.

If you are unfamiliar with media queries, I suggest reading Ethan Marcotte’s article in a recent issue of A List Apart. Speaking of which, I just finished the first A Book Apart by Jeremy Keith. It is a short read, clearly explaining the most important aspects of HTML5.

Slug as string in WordPress – the_slug();

Asgeir — Thu, 15 Jul 2010 13:47:11 +0000

I needed a way to replace the default page ID in WordPress with the page slug, and discovered this two year old post in the support forums.

Put this function in your functions.php:

function the_slug() {
	$post_data = get_post($post->ID, ARRAY_A);
	$slug = $post_data['post_name'];
	return $slug;
}

And call it in your template file like this:

Simple as that; saves you from writing CSS for randomly numbered IDs.

List titles within the list element

Asgeir — Tue, 29 Jun 2010 11:15:31 +0000

Why don’t lists allow a list title child element? It makes perfect sense semantically, and it would save the extra wrapper

every time the designer needs to position a titled list.

Valid HTML, with the title separated from the list element:


List title

Proin convallis fermentum leo, at elementum enim dapibus sed.
Quisque dictum ligula massa, eget convallis tellus.
Nulla et purus ut nisi cursus posuere nec pretium elit.

My suggestion, with a new list title child element:


List title
Nunc aliquam nunc quis turpis laoreet pretium.
Aliquam et tortor quis massa rutrum commodo.
Donec quis sapien ac justo fringilla fermentum cursus sit amet velit.
Aliquam pulvinar rutrum nisi, a congue lacus blandit quis.

Why not?

Found no related posts.

I might be inactive, but sand maker is not!

Asgeir — Mon, 19 Apr 2010 19:51:46 +0000

The few times that I log in to this thing, I find myself enjoying the increasing amount of great comments. Sand maker thinks that the..

..Permalink Article write great, I think all read this article people would think so. I from China, I seen article, really beautiful, great. I like article feeling good. I will continue concern here.

..as opposed to my good friend Daniel Depp, who is unhappy with my tone, and is yet to durchgerungen:

I can only speak for myself: I find your articles are packed too sober and too long. When I had seen it, I had no desire to read it (but I’ve yet to durchgerungen). Furthermore, I am interested in the topics of your article is not particularly. Too bad. Nevertheless, I hope for you, of course, to more comments. Besides that, this is also one!

And, my other friend funny, knows where to get CSS classes on DVD:

i do not know much about CSS ,but i learnt some in my collegeTv series on DVD ,i think it is very difficult to learn it well .it is so hard .And i am poor in learning computerDVD Collection too .It is my pity i did not grasp the computer skills before .

Custom radio inputs using pure CSS

Asgeir — Wed, 24 Feb 2010 14:26:41 +0000

Ryan Seddon, also referred to as the CSS Ninja, has created some impressive custom radio and checkbox inputs with pure CSS. The technique, which he posted late last week, is using some nifty selectors and pseudo-madness to detect input state, and swap the original inputs with images from a sprite.

The new inputs are actually attached to the label tag, rather than to the input itself, using the :before pseudo-class. The :hover, :focus, :active, and the :disabled classes are all used, in order to achieve full control over all possible states. So far, it looks like it degrades nicely in older browsers, falling back to the default inputs. It doesn’t require any additional markup, and it even lets you navigate the forms with the keyboard.

The only thing I noticed is that it seems like the bottom third or so of the checkbox doesn’t actually respond to a click, and the click zone stretches above the input correspondingly.

Have a look at the demo.

Well done!

DOM Scripting by Jeremy Keith

Asgeir — Sun, 21 Feb 2010 13:22:59 +0000

I have been dabbling with Javascript a few times, but only at the level where I was stoked when I could create a function to convert fahrenheit to celsius. I was going to try to make a slightly more serious attempt at learning it, and bought DOM Scripting: Web Design with Javascript and the Document Object Model by Jeremy Keith of Clearleft.

Javascript has restored its name the last few years, after having lost all credibility as a serious tool due to browser wars, the DHTML disaster, pop-up dialogues and open-CD-tray scripts. Jeremy Keith sees javascript as a necessary scripting language that completes the front-end development toolkit, together with CSS and (X)HTML. Unobtrusive javascripting, unobtrusive being the keyword, offers an equal level of power to what CSS once did, when used correctly.

As for the target audience, this book was exactly what I was after:

The book is aimed at designers rather than programmers. If you’ve learned the benefits of Web Standards through CSS and you’re now ready to move on to the next level, this is the book for you.

DOM Scripting clearly introduces all the concepts that would be unfamiliar to a a non-programmer, and provides a solid history of the developments the last 10-or-so years, before diving into any scripting. Chapter two is a thorough explanation of the javascript syntax, with some half-practical examples. Next is the Document Object Model, and that’s where I’m at.

CSS3 media queries in older browsers