Sass mixins for placeholder styles

in code

It took me like twenty minutes to figure the correct way to do this, so it’s worth a mention. I need to change the colour of unfilled or incomplete inputs in a form, including the placeholder style. Different browsers each have their own ways of handling placeholder styles.

@mixin placeholder_style() {
    &::-webkit-input-placeholder {
       @content;
    }

    &::-webkit-input-placeholder {
        @content;
    }

    &:-moz-placeholder {
        @content;
        opacity: 1;
    }

    &::-moz-placeholder {
        @content;
        opacity: 1;
    }

    &:-ms-input-placeholder {
        @content;
    }
}

Use it thusly:

input[class=unfilled] {
    background: #ed8787;
    color: #fff;

    @include placeholder_style() {
        color: #fff;
    }
}

It works for <textarea> blocks too!


Operation: Break the Site

in the website

The website’s appearance has bugged me badly over the past six months. I threw it together in my first fumblings with WordPress, and the sheer amount of things I have learned since on the topics of HTMl, CSS, PHP, UX and usability, Sass and JavaScript has made the site an ever-sharper embarrassment.

Frankly, it looks shit: I see a sidebar with giant blocky text in an blocky abused font, giant content text in dull grey and angry red colours, nav elements big enough that you can serve dinner off them, and giant holes in functionality caused by my then-limited knowledge of both PHP and the WordPress API. Since December this has helped to hold me back from posting: not only was I busy, but I felt such a strong dislike toward the site that I just didn’t want to face it.

Shatain took hold of me on Friday, and in a fit I tore down most of the code behind the site. There wasn’t much to tear down because the template was pretty simple at its core.

Neue-lök site, as Ikea would say

Between Friday afternoon and tonight (Saturday) I’ve accomplished a great deal, with much more to do. I’m happy to keep the site live while I work on it given the low traffic. I have the option to either put up a warning for users who aren’t logged in, or entirely deny it to them instead. Work goals for the next few days are:

  1. Clean up comments and commentform template, as well as support for threaded comments and minimized comment presence (I average 0.5 comments per month).
  2. Expand on functionality in article templates.
  3. Add per-month, per-tag and per-category archive templates.
  4. Sidebar search form and more options to search the site.
  5. 100% adherence with WordPress’ theme guidelines.
  6. Prettier navigational elements and buttons.
  7. Navigation menu support.
  8. Baked-in Open Graph, Twitter Cards and Google+ schema support.
  9. Social sharing links in order that you may directly share posts.

In the meantime, part of all of the site may intermittently be broken while I work on it. I’ve decided to not use a separate sandbox for this as I want to keep my work invested into this to a minimum. You can always pull or fork the code directly from its GitHub repository.


I missed January

in me

Well fuck, I missed a whole month. Long story short, I’ve been busy in real life and my iPhone is in pieces in my desk drawer. Back in August or September I dropped my phone into the toilet after a night drinking with Alanna and Casey. The dock module was fried and battery capacity seemed to suffer, so I replaced both. Intermittent problems continued that were connected to the ambient temperature, which culminated around Christmas when the radio module in my phone began to die. First the WiFi and then the 3G stopped working. The problem is well-known and has a clear fix, except I never have things that easy: One of the screws that secure the battery is stripped from my first hamfisted replacement, so I ordered a set of replacement screws, and a screw removal tool. Two weeks later and neither parts have turned up, at least in part because of the huge winter storms that have hit the northeastern United States of America.

My fallback cellphone, a shitty little Nokia, is good enough for calls and texts, but little else, so I haven’t been able to take or post any of the random Instagram shots that I love so much.

Real Boats Rock
I’m sure that the sentiment behind “real boats rock” is as old as humanity itself, but the specific expression I know of is tied to Frank Herbert and Chapterhouse: Dune. I’ve always interpreted the sentiment to mean you should always give allowances. The boat Eadaoin and I sail in rocked after the New Year. At the end of it I am very glad of the space Eadaoin and I share; I work for Eadaoin because it makes me happy and out of a desire to always do better. It’s a big thing and s small thing all at once, and it makes me glad to have Eadaoin in my life.

Work
Too much work, too little money. I made the mistake of taking on too much work though January and into February. I relish the challenges it brings though; I learn something new every day.

Me
Tired and suffering lightheadedness since December. Working (painstakingly and slowly) on a diet and exercise. I’m wary and weary of Mariah’s crap. For all that she wants me gone out of her life, she won’t even talk to me enough to divorce and extended this to her family and the kids by fiat. I’ve started the process here, but Ireland being Ireland, the progress is glacial.

That’s it, really. Work and family. Bought a new laptop too. ^_^


Center and size an absolutely positioned box with percentages only

in code

I feel like I have been screwed over with lightheadedness lately, so let’s see if I can churn out something useful. There are times when you have to absolutely position a child element, and there are subset of those cases where the child has to be positioned absolutely in the center of the parent. The common piece of advice given is to use a fixed size negative margin, thus:

.foo {
    left: 50%;
    margin-left: -100px; 
    position: absolute;
    top: 30px;
    width: 200px;
}

That’s always bugged me. What if I need a flexible width, but don’t want to use JavaScript? Huzzah for the CSS3 transform property:

.foo {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 30%;
}

To take this a half-step further, I wanted a responsive flex height too, proportional to its width:

.foo {
    height: 0;
    padding-bottom: 30%;
    width: 30%;
}

In the above, the padding-bottom attribute is equal to the width, so:

  • padding-bottom: 30%; == “100% of the width”
  • padding-bottom: 60% == “200% of the width”
  • padding-bottom: 15% == “50% of the width”

And so on. This even works for anchor elements, in instances where you want a responsive button size without a fixed width:

a.foo {
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%;
}

You can play around with this on JSFiddle (using viewport units). Sass mixin:

@mixin flex_size($width, $ratio) {
    // Ratio should be between 0 and foo.
    display: block;
    height: 0;
    padding-bottom: $width * $ratio;
    width: $width;
}