Archive for October, 2010

Which of these is not a web browser?

22 Oct


Most readers landing upon this page wouldn’t require a seconds hesitation in answering the question posed above.

But for a contestant on India’s version of ‘Who Wants to be a Millionaire?’ it required an entire audience vote to pick an answer.

The contestant above isn’t alone in not being clued up on the divide between ‘the web’ and the tools one uses to access the web. Google’s infamous vox-pop on the streets of New York also proved this with less than 8% of  people quizzed able to answer the question of ‘What is a browser?’.

But does it matter?

As an advocate for Ubuntu I’m acutely aware of how easy bamboozling casual users is when rolling off terms like ‘web browser’, ‘CPU’, ‘RAM’, ’64 bit’, ‘graphics chip’, ‘taskbar’, etc. It’s all a densely packed jargon-jungle for which they have no inclination to explore.

But dig a little deeper and people are actually a lot smarter than given credit for. Had those people in New York been given a laptop and asked to log in to Facebook the majority would’ve managed it fine.

Whether accustomed to the ‘little blue E’, ‘the orange ball’, ‘the big red O’ or the ‘rainbow wheel’ people know how to get online and it’s this ‘doing’ part that matters most.


Do Intelligent People Drink More Alcohol?

22 Oct
Smart kids end up drinking more as adults than less intelligent children, according to an analysis of U.S. and U.K. social data.

A robot uprising comedy from Jack Black and the director of Hot Tub Time Machine? [Exclusive]

22 Oct
Now that Steven Spielberg is adapting Daniel H. Wilson's Robopocalypse, another Wilson book is becoming a movie. Jack Black and Hot Tub Time Machine director Steve Pink have scooped up the rights to How To Survive A Robot Uprising. More »

New evidence that Alzheimer’s disease is infectious [Brains]

22 Oct
Alzheimer's disease is caused in part by a build-up of protein debris in the brain. Scientists already knew that this protein debris, called amyloid peptides, is infectious. But now it turns out that it's easier to catch than they thought. More »

Cheap as in crappy

22 Oct

via Macenstein.

Print Digg Facebook Mixx Google Bookmarks Reddit Suggest to Techmeme via Twitter Twitter Yahoo! Buzz email Fark FriendFeed LinkedIn MySpace PDF Posterous RSS Slashdot Technorati Tumblr


Guy Asks Obama: “Mr. President, Sign My iPad”

22 Oct

Guy Asks Obama: “Mr. President, Sign My iPad”

The above photo is probably one of the coolest things you’ll see all day. Not only does the guy wearing the Obama shirt look incredibly calm about meeting the President, but he’s also offering President Obama his iPad to sign. And, no – not with a permanent marker; with President Obama’s finger, using Adobe’s Ideas application. How cool is that?

Sylvester Cann IV, the iPad-toting gentleman, told TechCrunch:

At a rally in Seattle, WA at the University of Washington, the President used the touchscreen on my iPad to give me his autograph. Secret service was leery about the idea, but they warmed up to the idea and the President thought it was cool.

He looked slightly surprised, but proceeded to use his finger to scribble on the iPad using the Adobe Ideas app.

I have a video of the event as well. This HAS to be the first time an iPad has received a Presidential autograph.

We’ve embedded Sylvester’s video below, along with an iPad screenshot showing President Obama’s signature. In addition to this, you can also check out Sylvester’s mini-site which pays homage to the event, titled: “I figured, ‘Why not ask?’” All that’s left to say is: well done, Sylvester!

obama Guy Asks Obama: Mr. President, Sign My iPad

Random Posts


    HP Slate has a bad solution to “too many stickers” syndrome

    22 Oct

    Daring Fireball points to this little gem in the hands-on gallery our sister site Engadget had with forthcoming Windows would-be iPad competitor, the HP Slate. To explain what you're looking at, you'll need to look into this crystal ball showing an image of HP's product design offices six months ago...

    "Hey boss, this HP Slate we're making. It'd be a shame to mess up our sculpted backplate with our usual eleventy billion barcodes and the Windows licence sticker and all that stuff. Maybe we should just slim all that info down somehow?"

    The Boss sits back in his chair and sips his Tab. He thinks about how much work it would be to renegotiate the licence sticker requirement with Microsoft, or even to try and convince the support guys that they could make do with just one serial number per product. He sips his Tab again. Then inspiration strikes and he cries, "No, peon! I have a better idea! Tabs! Retractable tabs!"

    Yes, dear reader, that's a little pull-out drawer who's only role in life is to hold and display a dizzying array of licencing and serial number data. There's even more of this stuff on the back too.

    If an Apple designer pitched this craplution to Steve Jobs, he'd rip their still-beating heart clear out of their chest.

    HP Slate has a bad solution to "too many stickers" syndrome originally appeared on TUAW on Fri, 22 Oct 2010 09:30:00 EST. Please see our terms for use of feeds.

    Source | Permalink | Email this | Comments

    10 Random CSS Tricks You Might Want to Know About

    22 Oct

    10 Random CSS Tricks You Might Want to Know About

    CSS is the fundamental way of styling our web pages. Its deceptively easy syntax allows us to do many things to affect the visual layer of our work. And especially with CSS3, the language has gotten even more powerful.

    There are many useful CSS techniques and tricks out there for you to take advantage of. This is a collection of a few useful CSS snippets that you might want to keep in your toolkit.

    1. Set body font-size to 62.5% for Easier em Conversion

    If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

    body {
      font-size: 62.5%; /* font-size 1em = 10px */
    p {
      font-size: 1.2em; /* 1.2em = 12px */

    2. Remove outline for WebKit Browsers

    When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).

    Remove outline for WebKit Browsers

    If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):

    input[type="text"]:focus {
      outline: none;

    Please note that outline is used for accessibility purposes so that it is easier to see what input field is active. This is beneficial for those with motor impairments who cannot use a point-and-click device (such as a mouse), and thus must rely on alternative means of navigating a web page, such as the Tab key. The outline is also useful for able-bodied users who use keyboard shortcuts to get to web form input fields (it’s easier for them to see which input is currently active). Therefore, rather than completely taking out the outline, consider styling your input fields such that it indicates that it is the focused element.

    3. Use CSS transform for Interesting Hover Effects

    For progressive enhancement, you could use the transform property that is supported by many browsers that have CSS3 support.

    Here’s a trick for enlarging a elements on hover by 110%.

    a {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);

    Use CSS transform for Interesting Hover Effects

    4. Target IE6 and IE7 Browsers without Conditional Comments

    Need to target IE browsers? Here is a quick hack that doesn’t require conditional comments (note that your CSS will therefore not pass auto-validation, which is fine if you are aware of why it doesn’t).

    The code below will change the background-color of divs depending on what browser the user is viewing the web page under. Since * cascades down to IE7 and below, we use _ after that declaration so that IE6 (and below) has a different background color from IE7.

    div {
      background-color: #999; /* all browsers */
      *background-color: #ccc; /* add a * before the property - IE7 and below */
      _background-color: #000; /* add a _ before the property - IE6 and below */

    5. Support Transparency/Opacity in All Major Browsers

    This example gives the div element a 70% opacity. We need to use proprietary CSS to get it to work on Internet Explorer (which will invalidate our code under W3C standards).

    div {
    /* standards-compliant browsers */
    /* The following is ignored by standards-based browsers */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
    filter: alpha(opacity=70); /* IE 5-7  */

    6. Use !important to Override Normal CSS Precedence Rules

    In CSS, when two properties apply to the same element, the one that is farther down the stylesheet is the one that will take effect. However, by using !important at the end of a property value, this can be changed.

    Let’s take, for example, this set of style rules:

    h1 { color: green; }
    h1 { color: red; }

    The h1 element will have a red color with the CSS above.

    If we wanted to change the style rule’s priority without changing the order of the property declaration, then we simply do the following:

    h1 { color: green !important; }
    h1 { color: red; }

    Now, the <h1> element will be green.

    7. Centering a Fixed-Sized Element

    Here is one way to center a fixed-width/fixed-height div at the center of its container. This could be adapted to centering text, images, etc. within their containers. Essentially, we do a bit of arithmetic to get the fixed-sized element centered using absolute positioning and margins. Note that the parent container must have a position: relative property for this to work.

    div {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 300px;
      margin-top: -150px; /* 1/2 of your element height*/
      margin-left: -200px; /* 1/2 of your element width */

    Centering a Fixed-Sized Element

    8. Easy Web Fonts with Google Font API

    Web fonts allow you to step outside of the normal web-safe fonts by taking advantage of CSS’s @font-face rule. However, right now, browsers aren’t uniform in its implementation of @font-face. More specifically, web browsers differ in the types of font files they support (hopefully this will change with the WOFF standards). Additionally, you must be careful with the fonts you use since some of them might not be licensed for web use.

    To sidestep the issues with @font-face, the Google Font API is here to the rescue.

    Here is an example of using the Cantarell font on <h1> elements that takes advantage of Google Fonts API.

    If you want to use the Cantarell font from Google Font API, first reference the remote stylesheet inside your <head> tags as such:

    <link href="" rel="stylesheet" type="text/css">

    To use the font in h1 elements, simply use the font-family CSS property.

    h1 {
      font-family: 'Cantarell', Arial, serif;  /* Use a font stack, just in case. */

    9. Prevent Line-Wrapping of Text Elements

    Sometimes, you don’t want your text to wrap to the next line if it happens to reach the end of the width of its containing element.

    Here is how a normal anchor text works when it reaches the end of its parent element’s width:

    Notice that the link wraps at a whitespace in the text. What if we always want our links to be on the same line all the time (i.e. to prevent wrapping)? Simple. We just use the white-space property.

    a { white-space: nowrap; }

    Now, our links won’t wrap.

    10. Vertically Align Text

    We can use a variety of methods for horizontally aligning text (such as text-align: center or margin: 0 auto) but it’s slightly trickier to vertically align text.

    However, for single-line text, we can use the line-height property. By setting the line-height property of the text element to the same height of its container, it will become vertically centered.

    Here is a p element that is horizontally-centered inside a 100×100px div using text-align: center:

    Vertically Align Text

    As you can see, text-align doesn’t center it vertically. To fix that, we can set line-height to the same height as the containing div (100px).

    div { width:100px; height:100px; }
    div p { line-height:100px; }

    Vertically Align Text

    Note that this assumes the p element has no margin or padding. If you have margin or padding at the top or bottom of the p element, you need to compensate for them accordingly or just simply set padding and margin to 0 to make life easier.

    Also, this trick becomes troublesome when there is more than one line of text (i.e. when the text wraps) because there will be a space between the text lines that is equivalent to the line-height value.

    It’s your turn to share. Share your own favorite CSS tricks and techniques in the comments.

    Related Content

    About the Author

    Catalin Rosu, a.k.a. Red, is a web designer and developer with over 5 years experience in the industry. You can find articles or tutorials on CSS tips and tricks by visiting his blog at You can connect with him on Twitter as @catalinred.


    We may be even more alone in the universe than we thought [Evolution]

    22 Oct
    Two scientists propose that the jump from bacteria to complex life might be much riskier than previously imagined. Even on planets with earthlike conditions, plant and animal life would therefore be incredibly rare. More »

    Programmer problem solving sequence

    22 Oct

    From Phillipe Leybaert:

    2010 developer’s problem solving sequence:

    1. Google
    2. Coworkers
    3. StackOverflow
    4. RTFM
    5. Think