Tag Archives: css

On CSSConf + JSConf 2014

TL;WR*: a mostly social event, great for meeting the authors of those modules you see scroll past when you run npm install and it installs half of the internet. Also, lots of presentations on somewhat hipster stuff which I not always understood, but that’s great–I like not understanding it all from the get go, so I can learn something. And some discussion about physical and mental health and better community building and other important non purely technical stuff that usually never gets the chance to be discussed in tech conferences.
Continue reading

“Mozilla’s new technologies” (for Mozilla Power’13)

I was going to “manifest” myself in Cairo via the powers of videoconferencing for Mozilla Power’13, but connectivity issues happened, so I recorded a screencast with my talk:

Slides

Here’s hoping the Mozilla Egypt community is having a great event :-)

Do send me any questions you might have about the topics I discussed, and I’ll do my best to answer them!

“Sorry, technical discussion”

It happened to me several times while at OFFF past week: I was in a conversation with people whom I had just met moments before and the conversation derived into “technical” matters, which is to say mild-core development topics like CSS or HTML5. And then someone looked at me with a mix of pity and embarrassment and excused himself and the others, shoulder-shrugging while muttering Sorry, technical discussion. Like if I couldn’t follow the thread and all that.

It was kind of amusing –because I could indeed follow it–, but it’s also very sad to assume that only because I’m female I can’t follow a “technical” discussion.

It’s also funny that “technical” means “traditionally male-dominated topics”, such as software development. But that is absurd: as any sane person will agree, if you want to excel at a field you have to master the technique, whatever your genre is.

Thus, CSS are as technical as knitting, which is a traditional female-only field, but yet you don’t get to look at the only male caught by accident in the middle of a knitting discussion by passionate female knitters and tell him Sorry, technical discussion. No, it’s more like: Oh dear, women’s things! *giggles*.

I say, stop perpetuating the stereotypes. Keep on talking about your preferred subjects and let your audience decide whether it’s too technical for them or not. But don’t make erroneous judgements, please :-)

Proportionally resize images with CSS (and maybe JS)

With CSS only:

img { height: auto; max-width: 99%; }

I normally used only max-width: 99%;, but I found it tends to produce images which are too vertically stretched in some cases, and I am of the opinion that images should always preserve their aspect ratio, unless you’re trying to create some strange effect.

Tested in Firefox 3.5, Chrome 3, and Safari 3 — let me know if it works (or not) in other browsers!

If it doesn’t work, I have been playing with some javascript that you could use. In theory, something like the following could be used instead, although I can’t think of an scenario where CSS support was bad enough that JS had to be used… oh wait, I just remembered this script. Ha!

Anyway, here’s the javascript code:

if(document.getElementsByTagName)
{
        var imgs = document.getElementsByTagName("img");
        var i, el, nw, w, h, nh, cw, container;
        for(i = 0; i < imgs.length; i++)
        {
                el = imgs[i];
                nw = el.naturalWidth;
                w = el.width;
               
                container = el.parentNode;
                if(container == null) { continue; }
               
                cw = container.clientWidth;
               
                if(nw > cw)
                {
                        nh = el.naturalHeight;
                       
                        el.width = Math.round(0.99 * cw);
                        el.height = Math.round(el.width * 1.0 * nh / nw);
                }
               
        }
}

I’m not sure if I’m being extra cautious with the if(document.getElementsByTagName) check.

Of course, if you want to do things properly, this script should only be executed once the page and images have been fully loaded, because only at that point the real size of the images (also known as the naturalWidth and naturalHeight properties) can be accessed.

Corrections and suggestions are gladly welcome.