Thursday 28 February 2013

Media queries being ignored

Are all your media queries failing? You are probably just forgetting to add the meta tag. The code is as follows:

    <meta name="viewport" content="width=device-width">

Then you can use your media queries. They will work.

    @media (max-width: 800px) {
        .titleimg {
            width: 100%;
        }
        .wrapper {
            width: auto;
        }
    }

You will also want to keep in mind that tablet and smartphone vendors will lie about their device's resolution and physical size. This is because of display density differences among devices, and between these devices and the desktop.

You can read more about this on quirksmode.

Saturday 23 February 2013

Python discovery: urlparse - parse URLs with ease

I had a problem during testing: I wanted to test the query part of an url generated by a function. I was getting my regex hat out, when I started to wonder if the Python standard library included something to do what I sought to do.

A quick google search for "python parse url" did the trick. I found out about the urlparse module, which was clearly made for this purpose.

Example of parsing urls with python using the urlparse module:

    >>> from urlparse import urlparse
    >>> urlparse('http://www.example.com/pth?q=123#frag') 
    ParseResult(scheme='http', netloc='www.example.com', path='/pth', params='', query='q=123', fragment='frag')
    >>> parse_result = _
    >>> parse_result.scheme
    'http'
    >>> parse_result.query
    'q=123'
    >>> parse_result.fragment
    'frag'
    >>>

Lesson learned: There are many more things in the Python standard library than one would dare imagine.

Saturday 16 February 2013

A cute service

The guys at {placekitten} have made this simple, but cute, service. It's intended for developers like you and me, who don't have many pictures laying around on their hard drive.

When in need of a quick example image, you can hotlink to them and get a cute kitty as a placeholder :3

Here is 200x200:

I found this especially useful in jsfiddle, since you have nowhere to upload your images.

Just make an <img> tag and set src to the following:

    http://placekitten.com/{ width }/{ height }

And replace { width } and { height } by the width and height of the desired image.

Apparently a trailing slash makes your image a square, so if you get a square you know what's happening.

Their kitty pictures are really tasteful and cute. They vary according to the size of the image you requested.